feat(kotlin-compose): design system fn.compose:ui + toolbelt android Linux-first
Design system Compose (kotlin/functions/ui, modulo Gradle `fn.compose:ui`):
- FnTokens + FnTheme con la paleta heredada al hex de cpp/DESIGN_SYSTEM.md
(Mantine v9 dark + indigo), identica a la web @fn_library y a las apps C++.
- 26 componentes Compose (Layout/Display/Inputs/Feedback/Data/Charts) +
FnTheme + FnTokens registrados en el registry (28 entradas kind=component
lang=kt domain=ui), descubribles via fn_search. Habilitan init_kotlin_app.
Recuperacion: el commit cb6d9e6 habia anadido `kotlin/functions/ui/` al
.gitignore, por eso el design system nunca se versiono y se perdio del working
tree. Des-ignorado; el .gitignore interno del modulo ya excluye
build/.gradle/local.properties. La gallery (apps/gallery_kt) se recupero del
sub-repo Gitea y sus 27 componentes se reconstruyeron con su MainActivity como
contrato exacto.
Toolbelt Android Linux-first (antes asumia WSL2 + Windows):
- adb_wsl 1.1.0, android_emulator_start 1.1.0, android_emulator_list 1.1.0:
resuelven adb/emulator nativos del SDK ($ANDROID_HOME), .exe solo fallback WSL2.
- android_emulator_start: fix `timeout adb_run wait-for-device` (timeout no puede
ejecutar una funcion del shell; ahora invoca el binario $ADB directamente).
- install_android_sdk 1.0.1: fix licencias bajo pipefail (SIGPIPE de `yes`) +
trap EXIT con variable unbound.
- docs/capabilities/android.md regenerado Linux-first + seccion design system.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
.gradle/
|
||||
build/
|
||||
local.properties
|
||||
*.iml
|
||||
.idea/
|
||||
.cxx/
|
||||
@@ -0,0 +1,43 @@
|
||||
plugins {
|
||||
id("com.android.library") version "8.4.0"
|
||||
id("org.jetbrains.kotlin.android") version "1.9.22"
|
||||
}
|
||||
|
||||
// group:name must match the `fn.compose:ui` module notation that apps substitute.
|
||||
group = "fn.compose"
|
||||
version = "0.1.0"
|
||||
|
||||
android {
|
||||
namespace = "fn.compose.ui"
|
||||
compileSdk = 34
|
||||
|
||||
defaultConfig {
|
||||
minSdk = 24
|
||||
consumerProguardFiles("consumer-rules.pro")
|
||||
}
|
||||
|
||||
buildFeatures {
|
||||
compose = true
|
||||
}
|
||||
composeOptions {
|
||||
kotlinCompilerExtensionVersion = "1.5.8"
|
||||
}
|
||||
compileOptions {
|
||||
sourceCompatibility = JavaVersion.VERSION_17
|
||||
targetCompatibility = JavaVersion.VERSION_17
|
||||
}
|
||||
kotlinOptions {
|
||||
jvmTarget = "17"
|
||||
}
|
||||
}
|
||||
|
||||
dependencies {
|
||||
// `api` so consuming apps inherit Compose transitively through fn.compose:ui.
|
||||
implementation(platform("androidx.compose:compose-bom:2024.02.00"))
|
||||
api("androidx.compose.ui:ui")
|
||||
api("androidx.compose.ui:ui-graphics")
|
||||
api("androidx.compose.ui:ui-text")
|
||||
api("androidx.compose.foundation:foundation")
|
||||
api("androidx.compose.material3:material3")
|
||||
api("androidx.compose.ui:ui-tooling-preview")
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
# No consumer ProGuard rules required yet for the fn.compose:ui design system.
|
||||
@@ -0,0 +1,4 @@
|
||||
org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8
|
||||
android.useAndroidX=true
|
||||
kotlin.code.style=official
|
||||
android.nonTransitiveRClass=true
|
||||
Binary file not shown.
@@ -0,0 +1,7 @@
|
||||
distributionBase=GRADLE_USER_HOME
|
||||
distributionPath=wrapper/dists
|
||||
distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-bin.zip
|
||||
networkTimeout=10000
|
||||
validateDistributionUrl=true
|
||||
zipStoreBase=GRADLE_USER_HOME
|
||||
zipStorePath=wrapper/dists
|
||||
+251
@@ -0,0 +1,251 @@
|
||||
#!/bin/sh
|
||||
|
||||
#
|
||||
# Copyright © 2015-2021 the original authors.
|
||||
#
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
#
|
||||
# https://www.apache.org/licenses/LICENSE-2.0
|
||||
#
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
#
|
||||
# SPDX-License-Identifier: Apache-2.0
|
||||
#
|
||||
|
||||
##############################################################################
|
||||
#
|
||||
# Gradle start up script for POSIX generated by Gradle.
|
||||
#
|
||||
# Important for running:
|
||||
#
|
||||
# (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
|
||||
# noncompliant, but you have some other compliant shell such as ksh or
|
||||
# bash, then to run this script, type that shell name before the whole
|
||||
# command line, like:
|
||||
#
|
||||
# ksh Gradle
|
||||
#
|
||||
# Busybox and similar reduced shells will NOT work, because this script
|
||||
# requires all of these POSIX shell features:
|
||||
# * functions;
|
||||
# * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
|
||||
# «${var#prefix}», «${var%suffix}», and «$( cmd )»;
|
||||
# * compound commands having a testable exit status, especially «case»;
|
||||
# * various built-in commands including «command», «set», and «ulimit».
|
||||
#
|
||||
# Important for patching:
|
||||
#
|
||||
# (2) This script targets any POSIX shell, so it avoids extensions provided
|
||||
# by Bash, Ksh, etc; in particular arrays are avoided.
|
||||
#
|
||||
# The "traditional" practice of packing multiple parameters into a
|
||||
# space-separated string is a well documented source of bugs and security
|
||||
# problems, so this is (mostly) avoided, by progressively accumulating
|
||||
# options in "$@", and eventually passing that to Java.
|
||||
#
|
||||
# Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
|
||||
# and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
|
||||
# see the in-line comments for details.
|
||||
#
|
||||
# There are tweaks for specific operating systems such as AIX, CygWin,
|
||||
# Darwin, MinGW, and NonStop.
|
||||
#
|
||||
# (3) This script is generated from the Groovy template
|
||||
# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
|
||||
# within the Gradle project.
|
||||
#
|
||||
# You can find Gradle at https://github.com/gradle/gradle/.
|
||||
#
|
||||
##############################################################################
|
||||
|
||||
# Attempt to set APP_HOME
|
||||
|
||||
# Resolve links: $0 may be a link
|
||||
app_path=$0
|
||||
|
||||
# Need this for daisy-chained symlinks.
|
||||
while
|
||||
APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
|
||||
[ -h "$app_path" ]
|
||||
do
|
||||
ls=$( ls -ld "$app_path" )
|
||||
link=${ls#*' -> '}
|
||||
case $link in #(
|
||||
/*) app_path=$link ;; #(
|
||||
*) app_path=$APP_HOME$link ;;
|
||||
esac
|
||||
done
|
||||
|
||||
# This is normally unused
|
||||
# shellcheck disable=SC2034
|
||||
APP_BASE_NAME=${0##*/}
|
||||
# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
|
||||
APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
|
||||
|
||||
# Use the maximum available, or set MAX_FD != -1 to use that value.
|
||||
MAX_FD=maximum
|
||||
|
||||
warn () {
|
||||
echo "$*"
|
||||
} >&2
|
||||
|
||||
die () {
|
||||
echo
|
||||
echo "$*"
|
||||
echo
|
||||
exit 1
|
||||
} >&2
|
||||
|
||||
# OS specific support (must be 'true' or 'false').
|
||||
cygwin=false
|
||||
msys=false
|
||||
darwin=false
|
||||
nonstop=false
|
||||
case "$( uname )" in #(
|
||||
CYGWIN* ) cygwin=true ;; #(
|
||||
Darwin* ) darwin=true ;; #(
|
||||
MSYS* | MINGW* ) msys=true ;; #(
|
||||
NONSTOP* ) nonstop=true ;;
|
||||
esac
|
||||
|
||||
CLASSPATH="\\\"\\\""
|
||||
|
||||
|
||||
# Determine the Java command to use to start the JVM.
|
||||
if [ -n "$JAVA_HOME" ] ; then
|
||||
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
|
||||
# IBM's JDK on AIX uses strange locations for the executables
|
||||
JAVACMD=$JAVA_HOME/jre/sh/java
|
||||
else
|
||||
JAVACMD=$JAVA_HOME/bin/java
|
||||
fi
|
||||
if [ ! -x "$JAVACMD" ] ; then
|
||||
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
|
||||
|
||||
Please set the JAVA_HOME variable in your environment to match the
|
||||
location of your Java installation."
|
||||
fi
|
||||
else
|
||||
JAVACMD=java
|
||||
if ! command -v java >/dev/null 2>&1
|
||||
then
|
||||
die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
|
||||
|
||||
Please set the JAVA_HOME variable in your environment to match the
|
||||
location of your Java installation."
|
||||
fi
|
||||
fi
|
||||
|
||||
# Increase the maximum file descriptors if we can.
|
||||
if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
|
||||
case $MAX_FD in #(
|
||||
max*)
|
||||
# In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
|
||||
# shellcheck disable=SC2039,SC3045
|
||||
MAX_FD=$( ulimit -H -n ) ||
|
||||
warn "Could not query maximum file descriptor limit"
|
||||
esac
|
||||
case $MAX_FD in #(
|
||||
'' | soft) :;; #(
|
||||
*)
|
||||
# In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
|
||||
# shellcheck disable=SC2039,SC3045
|
||||
ulimit -n "$MAX_FD" ||
|
||||
warn "Could not set maximum file descriptor limit to $MAX_FD"
|
||||
esac
|
||||
fi
|
||||
|
||||
# Collect all arguments for the java command, stacking in reverse order:
|
||||
# * args from the command line
|
||||
# * the main class name
|
||||
# * -classpath
|
||||
# * -D...appname settings
|
||||
# * --module-path (only if needed)
|
||||
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
|
||||
|
||||
# For Cygwin or MSYS, switch paths to Windows format before running java
|
||||
if "$cygwin" || "$msys" ; then
|
||||
APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
|
||||
CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
|
||||
|
||||
JAVACMD=$( cygpath --unix "$JAVACMD" )
|
||||
|
||||
# Now convert the arguments - kludge to limit ourselves to /bin/sh
|
||||
for arg do
|
||||
if
|
||||
case $arg in #(
|
||||
-*) false ;; # don't mess with options #(
|
||||
/?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
|
||||
[ -e "$t" ] ;; #(
|
||||
*) false ;;
|
||||
esac
|
||||
then
|
||||
arg=$( cygpath --path --ignore --mixed "$arg" )
|
||||
fi
|
||||
# Roll the args list around exactly as many times as the number of
|
||||
# args, so each arg winds up back in the position where it started, but
|
||||
# possibly modified.
|
||||
#
|
||||
# NB: a `for` loop captures its iteration list before it begins, so
|
||||
# changing the positional parameters here affects neither the number of
|
||||
# iterations, nor the values presented in `arg`.
|
||||
shift # remove old arg
|
||||
set -- "$@" "$arg" # push replacement arg
|
||||
done
|
||||
fi
|
||||
|
||||
|
||||
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
|
||||
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
|
||||
|
||||
# Collect all arguments for the java command:
|
||||
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
|
||||
# and any embedded shellness will be escaped.
|
||||
# * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
|
||||
# treated as '${Hostname}' itself on the command line.
|
||||
|
||||
set -- \
|
||||
"-Dorg.gradle.appname=$APP_BASE_NAME" \
|
||||
-classpath "$CLASSPATH" \
|
||||
-jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
|
||||
"$@"
|
||||
|
||||
# Stop when "xargs" is not available.
|
||||
if ! command -v xargs >/dev/null 2>&1
|
||||
then
|
||||
die "xargs is not available"
|
||||
fi
|
||||
|
||||
# Use "xargs" to parse quoted args.
|
||||
#
|
||||
# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
|
||||
#
|
||||
# In Bash we could simply go:
|
||||
#
|
||||
# readarray ARGS < <( xargs -n1 <<<"$var" ) &&
|
||||
# set -- "${ARGS[@]}" "$@"
|
||||
#
|
||||
# but POSIX shell has neither arrays nor command substitution, so instead we
|
||||
# post-process each arg (as a line of input to sed) to backslash-escape any
|
||||
# character that might be a shell metacharacter, then use eval to reverse
|
||||
# that process (while maintaining the separation between arguments), and wrap
|
||||
# the whole thing up as a single "set" statement.
|
||||
#
|
||||
# This will of course break if any of these variables contains a newline or
|
||||
# an unmatched quote.
|
||||
#
|
||||
|
||||
eval "set -- $(
|
||||
printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
|
||||
xargs -n1 |
|
||||
sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
|
||||
tr '\n' ' '
|
||||
)" '"$@"'
|
||||
|
||||
exec "$JAVACMD" "$@"
|
||||
@@ -0,0 +1,21 @@
|
||||
pluginManagement {
|
||||
repositories {
|
||||
gradlePluginPortal()
|
||||
google()
|
||||
mavenCentral()
|
||||
}
|
||||
}
|
||||
dependencyResolutionManagement {
|
||||
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
|
||||
repositories {
|
||||
google()
|
||||
mavenCentral()
|
||||
}
|
||||
}
|
||||
|
||||
// Single-project Android library build. The root project IS the `fn.compose:ui`
|
||||
// library. Apps consume it via composite build:
|
||||
// includeBuild("../../kotlin/functions/ui") {
|
||||
// dependencySubstitution { substitute(module("fn.compose:ui")).using(project(":")) }
|
||||
// }
|
||||
rootProject.name = "ui"
|
||||
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<manifest xmlns:android="http://schemas.android.com/apk/res/android" />
|
||||
@@ -0,0 +1,79 @@
|
||||
package fn.compose.theme
|
||||
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.darkColorScheme
|
||||
import androidx.compose.material3.lightColorScheme
|
||||
import androidx.compose.runtime.Composable
|
||||
|
||||
/**
|
||||
* Material 3 [androidx.compose.material3.ColorScheme] derived from [FnColors].
|
||||
*
|
||||
* This is the registry's canonical dark identity (Mantine v9 dark + indigo).
|
||||
* Equivalent to `FnMantineProvider` (web) and `fn::run_app` with
|
||||
* `ThemeMode::FnDark` (C++).
|
||||
*/
|
||||
private val FnDarkColorScheme = darkColorScheme(
|
||||
primary = FnColors.primary,
|
||||
onPrimary = FnColors.white,
|
||||
primaryContainer = FnColors.primaryActive,
|
||||
onPrimaryContainer = FnColors.white,
|
||||
secondary = FnColors.primaryLight,
|
||||
onSecondary = FnColors.white,
|
||||
background = FnColors.bg,
|
||||
onBackground = FnColors.text,
|
||||
surface = FnColors.surface,
|
||||
onSurface = FnColors.text,
|
||||
surfaceVariant = FnColors.surfaceHover,
|
||||
onSurfaceVariant = FnColors.textMuted,
|
||||
error = FnColors.error,
|
||||
onError = FnColors.white,
|
||||
outline = FnColors.border,
|
||||
outlineVariant = FnColors.borderStrong,
|
||||
)
|
||||
|
||||
private val FnLightColorScheme = lightColorScheme(
|
||||
primary = FnColors.primary,
|
||||
onPrimary = FnColors.white,
|
||||
primaryContainer = FnColors.primaryLight,
|
||||
onPrimaryContainer = FnColors.white,
|
||||
secondary = FnColors.primaryActive,
|
||||
onSecondary = FnColors.white,
|
||||
background = FnColors.lightBg,
|
||||
onBackground = FnColors.lightText,
|
||||
surface = FnColors.lightSurface,
|
||||
onSurface = FnColors.lightText,
|
||||
surfaceVariant = FnColors.lightSurface,
|
||||
onSurfaceVariant = FnColors.lightTextMuted,
|
||||
error = FnColors.error,
|
||||
onError = FnColors.white,
|
||||
outline = FnColors.lightBorder,
|
||||
)
|
||||
|
||||
/**
|
||||
* Root theme provider for every registry Android app. Dark by default, mirroring
|
||||
* the web frontend's `defaultColorScheme="dark"`.
|
||||
*
|
||||
* Usage:
|
||||
* ```
|
||||
* setContent {
|
||||
* FnTheme {
|
||||
* Surface(Modifier.fillMaxSize()) { /* ... */ }
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* Override the scheme with `FnTheme(darkMode = false) { ... }` or follow the
|
||||
* system with `FnTheme(darkMode = isSystemInDarkTheme()) { ... }`.
|
||||
*
|
||||
* Apps must NOT call `MaterialTheme {}` directly — always go through `FnTheme`.
|
||||
*/
|
||||
@Composable
|
||||
fun FnTheme(
|
||||
darkMode: Boolean = true,
|
||||
content: @Composable () -> Unit,
|
||||
) {
|
||||
MaterialTheme(
|
||||
colorScheme = if (darkMode) FnDarkColorScheme else FnLightColorScheme,
|
||||
content = content,
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
name: fn_theme
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnTheme(darkMode: Boolean = true, content: @Composable () -> Unit)"
|
||||
description: "Provider raiz del design system Compose del registry (@fn_compose). Envuelve MaterialTheme con un ColorScheme derivado de FnColors (Mantine v9 dark + indigo). Dark por defecto, mirror de FnMantineProvider (web) y fn::run_app ThemeMode::FnDark (C++). Toda app del registry envuelve su contenido en FnTheme."
|
||||
tags: [compose, android, ui, theme, provider, material3, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: [fn_tokens_kt_ui]
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Aplica el ColorScheme del registry (dark o light) al arbol Composable hijo via MaterialTheme. No retorna valor; emite UI."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/theme/FnTheme.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
import fn.compose.theme.FnTheme
|
||||
|
||||
class MainActivity : ComponentActivity() {
|
||||
override fun onCreate(savedInstanceState: Bundle?) {
|
||||
super.onCreate(savedInstanceState)
|
||||
setContent {
|
||||
FnTheme { // darkMode = true por defecto
|
||||
Surface(modifier = Modifier.fillMaxSize()) {
|
||||
Text("Mi app")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Forzar light, o seguir el sistema:
|
||||
FnTheme(darkMode = false) { /* ... */ }
|
||||
FnTheme(darkMode = isSystemInDarkTheme()) { /* ... */ }
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Una vez por app, en el `setContent {}` de la `MainActivity` (o en cualquier `@Preview`/test de Roborazzi), envolviendo todo el árbol de UI. Es el equivalente Compose de `FnMantineProvider`. Sin `FnTheme`, los componentes caen al Material3 stock (morado) y pierden la identidad del registry.
|
||||
|
||||
## Gotchas
|
||||
|
||||
- **NUNCA `MaterialTheme {}` directo en una app.** Siempre `FnTheme {}`. `MaterialTheme` stock no aplica los tokens del registry.
|
||||
- **Dark-first.** El default es `darkMode = true`, igual que el frontend web. Pasar `darkMode = false` solo para capturas light o si la app lo requiere explícitamente.
|
||||
- **Composite build requerido.** Las apps consumen `FnTheme` via `includeBuild("../../kotlin/functions/ui")` con substitución `fn.compose:ui`. No es un artifact Maven publicado; cambios en el módulo recompilan las apps automáticamente.
|
||||
|
||||
## Capability growth log
|
||||
|
||||
- v0.1.0 (2026-06-03) — versión inicial. Provider MaterialTheme dark/light con ColorScheme derivado de FnColors (paleta heredada exacta de C++/Mantine). Desbloquea el scaffolder `init_kotlin_app`.
|
||||
@@ -0,0 +1,143 @@
|
||||
package fn.compose.theme
|
||||
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.TextUnit
|
||||
import androidx.compose.ui.unit.sp
|
||||
|
||||
/**
|
||||
* Design tokens for the registry's Android Compose apps.
|
||||
*
|
||||
* The color palette is inherited *exactly* (same hex literals) from the C++
|
||||
* design system (`cpp/DESIGN_SYSTEM.md` section 4.1), which in turn mirrors
|
||||
* Mantine v9 dark + indigo used by the web frontend (`@fn_library`). A button
|
||||
* rendered here must look identical to the same button on web and on the C++
|
||||
* ImGui apps. Do not invent new colors — extend this object and keep it aligned
|
||||
* with the canonical Mantine values.
|
||||
*/
|
||||
object FnColors {
|
||||
// --- Indigo brand scale (Mantine indigo) ---
|
||||
val indigo4 = Color(0xFF748FFC)
|
||||
val indigo5 = Color(0xFF5C7CFA)
|
||||
val indigo6 = Color(0xFF4C6EF5)
|
||||
val indigo7 = Color(0xFF4263EB)
|
||||
|
||||
// --- Dark gray scale (Mantine dark) ---
|
||||
val dark0 = Color(0xFFC1C2C5)
|
||||
val dark1 = Color(0xFFA6A7AB)
|
||||
val dark2 = Color(0xFF909296)
|
||||
val dark3 = Color(0xFF5C5F66)
|
||||
val dark4 = Color(0xFF373A40)
|
||||
val dark5 = Color(0xFF2C2E33)
|
||||
val dark6 = Color(0xFF25262B)
|
||||
val dark7 = Color(0xFF1A1B1E)
|
||||
val dark8 = Color(0xFF141517)
|
||||
val dark9 = Color(0xFF101113)
|
||||
|
||||
// --- Status colors (Mantine *.6) ---
|
||||
val green6 = Color(0xFF40C057)
|
||||
val yellow6 = Color(0xFFFAB005)
|
||||
val red6 = Color(0xFFFA5252)
|
||||
val blue6 = Color(0xFF228BE6)
|
||||
|
||||
// --- Pure ---
|
||||
val white = Color(0xFFFFFFFF)
|
||||
val black = Color(0xFF000000)
|
||||
|
||||
// --- Semantic aliases (match fn_tokens::colors:: in C++) ---
|
||||
val primary = indigo6 // #4C6EF5
|
||||
val primaryHover = indigo5 // #5C7CFA
|
||||
val primaryLight = indigo4 // #748FFC
|
||||
val primaryActive = indigo7 // #4263EB
|
||||
|
||||
val success = green6 // #40C057
|
||||
val warning = yellow6 // #FAB005
|
||||
val error = red6 // #FA5252
|
||||
val info = blue6 // #228BE6
|
||||
|
||||
val bg = dark7 // #1A1B1E
|
||||
val surface = dark6 // #25262B
|
||||
val surfaceHover = dark5 // #2C2E33
|
||||
val surfaceActive = dark4 // #373A40
|
||||
|
||||
val border = dark4 // #373A40
|
||||
val borderStrong = dark3 // #5C5F66
|
||||
|
||||
val text = dark0 // #C1C2C5
|
||||
val textMuted = dark2 // #909296
|
||||
val textDim = dark3 // #5C5F66
|
||||
|
||||
// --- Light scheme companions (for FnTheme(darkMode = false)) ---
|
||||
val lightBg = Color(0xFFFFFFFF)
|
||||
val lightSurface = Color(0xFFF8F9FA) // gray.0
|
||||
val lightBorder = Color(0xFFDEE2E6) // gray.3
|
||||
val lightText = Color(0xFF212529) // gray.9
|
||||
val lightTextMuted = Color(0xFF868E96) // gray.6
|
||||
}
|
||||
|
||||
/**
|
||||
* Spacing scale in [Dp]. Slightly denser than CSS Mantine, aligned to the
|
||||
* value set documented in `kotlin/PATTERNS.md` section 2.
|
||||
*/
|
||||
object FnSpacing {
|
||||
val xs: Dp = 8.dp
|
||||
val sm: Dp = 12.dp
|
||||
val md: Dp = 16.dp
|
||||
val lg: Dp = 24.dp
|
||||
val xl: Dp = 32.dp
|
||||
val xxl: Dp = 48.dp
|
||||
}
|
||||
|
||||
/** Corner radius scale in [Dp]. Identical to the C++ `fn_tokens::radius`. */
|
||||
object FnRadius {
|
||||
val none: Dp = 0.dp
|
||||
val xs: Dp = 2.dp
|
||||
val sm: Dp = 4.dp
|
||||
val md: Dp = 8.dp // Mantine defaultRadius
|
||||
val lg: Dp = 12.dp
|
||||
val xl: Dp = 16.dp
|
||||
val full: Dp = 9999.dp
|
||||
}
|
||||
|
||||
/** Font sizes (sp) and weights mirroring the web/C++ typography scale. */
|
||||
object FnTypography {
|
||||
val xs: TextUnit = 11.sp
|
||||
val sm: TextUnit = 13.sp
|
||||
val md: TextUnit = 15.sp
|
||||
val lg: TextUnit = 18.sp
|
||||
val xl: TextUnit = 22.sp
|
||||
|
||||
// Heading sizes h1..h6
|
||||
val h1: TextUnit = 32.sp
|
||||
val h2: TextUnit = 26.sp
|
||||
val h3: TextUnit = 22.sp
|
||||
val h4: TextUnit = 18.sp
|
||||
val h5: TextUnit = 15.sp
|
||||
val h6: TextUnit = 13.sp
|
||||
|
||||
val normal: FontWeight = FontWeight.Normal
|
||||
val medium: FontWeight = FontWeight.Medium
|
||||
val semibold: FontWeight = FontWeight.SemiBold
|
||||
val bold: FontWeight = FontWeight.Bold
|
||||
}
|
||||
|
||||
/** Elevation tokens in [Dp]. No direct C++ analogue (ImGui is flat). */
|
||||
object FnShadows {
|
||||
val none: Dp = 0.dp
|
||||
val xs: Dp = 1.dp
|
||||
val sm: Dp = 2.dp
|
||||
val md: Dp = 4.dp
|
||||
val lg: Dp = 8.dp
|
||||
val xl: Dp = 16.dp
|
||||
}
|
||||
|
||||
/** Aggregator so a single import (`FnTokens`) exposes every token group. */
|
||||
object FnTokens {
|
||||
val colors = FnColors
|
||||
val spacing = FnSpacing
|
||||
val radius = FnRadius
|
||||
val typography = FnTypography
|
||||
val shadows = FnShadows
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
name: fn_tokens
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: pure
|
||||
signature: "object FnTokens { colors; spacing; radius; typography; shadows }"
|
||||
description: "Design tokens del design system Compose del registry (@fn_compose). Paleta heredada exacta (mismos hex) de cpp/DESIGN_SYSTEM.md / Mantine v9 dark + indigo: FnColors, FnSpacing (Dp), FnRadius (Dp), FnTypography (sp + weights), FnShadows (Dp). Fuente unica de valores visuales para apps Android del registry."
|
||||
tags: [compose, android, ui, tokens, theme, design-system, mantine]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Objetos Kotlin de solo lectura: FnColors (Color), FnSpacing/FnRadius/FnShadows (Dp), FnTypography (TextUnit + FontWeight), y el agregador FnTokens."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/theme/FnTokens.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
import fn.compose.theme.FnColors
|
||||
import fn.compose.theme.FnSpacing
|
||||
import fn.compose.theme.FnRadius
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.background(FnColors.surface, RoundedCornerShape(FnRadius.md))
|
||||
.padding(FnSpacing.md)
|
||||
) {
|
||||
Text("Hola", color = FnColors.primary) // #4C6EF5 — mismo indigo que web y C++
|
||||
}
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Siempre que escribas un Composable en una app del registry y necesites un color, espaciado, radio, tamaño de fuente o elevación. NUNCA pongas `Color(0xFF...)` o `8.dp` literal en código de app — usa el token. Garantiza que la app se vea idéntica a su equivalente web (Mantine) y C++ (ImGui), porque los tres comparten los mismos valores.
|
||||
|
||||
## Gotchas
|
||||
|
||||
- **Paleta heredada, no inventada.** Los hex coinciden 1:1 con `cpp/DESIGN_SYSTEM.md §4.1` (Mantine v9 dark + indigo). Si cambias un color aquí, debe cambiarse también en web y C++ para no romper la coherencia cross-platform.
|
||||
- **Spacing más denso que CSS.** `FnSpacing` usa la escala de `kotlin/PATTERNS.md` (8/12/16/24/32/48 dp), no los px de CSS Mantine. Es intencional (densidad de pantalla móvil).
|
||||
- **Es `object`, no `@Composable`.** Se consume directo (`FnColors.primary`), no via `MaterialTheme.colorScheme`. Para colores semánticos theme-aware en componentes propios, prefiere `MaterialTheme.colorScheme.*` (lo aplica `fn_theme_kt_ui`).
|
||||
@@ -0,0 +1,219 @@
|
||||
package fn.compose.ui
|
||||
|
||||
import androidx.compose.foundation.Canvas
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.geometry.Offset
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Path
|
||||
import androidx.compose.ui.graphics.StrokeCap
|
||||
import androidx.compose.ui.graphics.StrokeJoin
|
||||
import androidx.compose.ui.graphics.drawscope.DrawScope
|
||||
import androidx.compose.ui.graphics.drawscope.Fill
|
||||
import androidx.compose.ui.graphics.drawscope.Stroke
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import fn.compose.theme.FnColors
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Data class
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** A single bar in [FnBarChart]. */
|
||||
data class FnBarItem(val label: String, val value: Float)
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FnLineChart
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Canvas-based line chart. Draws a polyline connecting [data] points
|
||||
* normalised to [min, max], plus a semi-transparent fill below the line.
|
||||
*
|
||||
* Handles empty lists and single-point lists without crashing.
|
||||
*/
|
||||
@Composable
|
||||
fun FnLineChart(
|
||||
data: List<Float>,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
val primaryColor = FnColors.primary
|
||||
val fillColor = FnColors.primary.copy(alpha = 0.15f)
|
||||
|
||||
Canvas(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(160.dp)
|
||||
.then(modifier),
|
||||
) {
|
||||
if (data.size < 2) return@Canvas
|
||||
|
||||
val minVal = data.min()
|
||||
val maxVal = data.max()
|
||||
val range = (maxVal - minVal).takeIf { it > 0f } ?: 1f
|
||||
|
||||
val strokePx = 2.dp.toPx()
|
||||
val points = buildOffsets(data, minVal, range, size.width, size.height)
|
||||
|
||||
// --- fill path ---
|
||||
val fillPath = Path().apply {
|
||||
moveTo(points.first().x, size.height)
|
||||
points.forEach { lineTo(it.x, it.y) }
|
||||
lineTo(points.last().x, size.height)
|
||||
close()
|
||||
}
|
||||
drawPath(fillPath, color = fillColor, style = Fill)
|
||||
|
||||
// --- polyline ---
|
||||
drawPolyline(points, primaryColor, strokePx)
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FnBarChart
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Canvas-based vertical bar chart. Bars are drawn proportional to the
|
||||
* maximum value in [data]. Labels are rendered below each bar using
|
||||
* [Text] (no FnText dependency to keep Charts.kt standalone).
|
||||
*
|
||||
* Handles empty lists without crashing.
|
||||
*/
|
||||
@Composable
|
||||
fun FnBarChart(
|
||||
data: List<FnBarItem>,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
if (data.isEmpty()) return
|
||||
|
||||
val primaryColor = FnColors.primary
|
||||
val labelColor = FnColors.textMuted
|
||||
val maxVal = data.maxOf { it.value }.takeIf { it > 0f } ?: 1f
|
||||
val barGapDp: Dp = 4.dp
|
||||
|
||||
Column(modifier = modifier) {
|
||||
// --- bar canvas ---
|
||||
Canvas(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(160.dp),
|
||||
) {
|
||||
val count = data.size
|
||||
val totalGapPx = barGapDp.toPx() * (count - 1)
|
||||
val barWidth = (size.width - totalGapPx) / count
|
||||
|
||||
data.forEachIndexed { index, item ->
|
||||
val barHeight = (item.value / maxVal) * size.height
|
||||
val left = index * (barWidth + barGapDp.toPx())
|
||||
val top = size.height - barHeight
|
||||
|
||||
drawRect(
|
||||
color = primaryColor,
|
||||
topLeft = Offset(left, top),
|
||||
size = androidx.compose.ui.geometry.Size(barWidth, barHeight),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// --- labels row ---
|
||||
Row(modifier = Modifier.fillMaxWidth()) {
|
||||
data.forEach { item ->
|
||||
Text(
|
||||
text = item.label,
|
||||
modifier = Modifier.weight(1f),
|
||||
color = labelColor,
|
||||
fontSize = 10.sp,
|
||||
textAlign = androidx.compose.ui.text.style.TextAlign.Center,
|
||||
maxLines = 1,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FnSparkline
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Compact mini line chart — no axes, no fill, no labels.
|
||||
* Ideal for embedding in KPI cards or table cells.
|
||||
*
|
||||
* Handles empty lists and single-point lists without crashing.
|
||||
*/
|
||||
@Composable
|
||||
fun FnSparkline(
|
||||
data: List<Float>,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
val primaryColor = FnColors.primary
|
||||
|
||||
Canvas(
|
||||
modifier = Modifier
|
||||
.width(80.dp)
|
||||
.height(24.dp)
|
||||
.then(modifier),
|
||||
) {
|
||||
if (data.size < 2) return@Canvas
|
||||
|
||||
val minVal = data.min()
|
||||
val maxVal = data.max()
|
||||
val range = (maxVal - minVal).takeIf { it > 0f } ?: 1f
|
||||
|
||||
val strokePx = 1.5.dp.toPx()
|
||||
val points = buildOffsets(data, minVal, range, size.width, size.height)
|
||||
drawPolyline(points, primaryColor, strokePx)
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Private helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Converts a list of raw values into [Offset] positions scaled to the
|
||||
* given [canvasWidth] x [canvasHeight].
|
||||
*/
|
||||
private fun buildOffsets(
|
||||
data: List<Float>,
|
||||
minVal: Float,
|
||||
range: Float,
|
||||
canvasWidth: Float,
|
||||
canvasHeight: Float,
|
||||
): List<Offset> {
|
||||
val count = data.size
|
||||
return data.mapIndexed { index, value ->
|
||||
val x = if (count == 1) 0f else index / (count - 1).toFloat() * canvasWidth
|
||||
val y = canvasHeight - ((value - minVal) / range) * canvasHeight
|
||||
Offset(x, y)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Draws connected line segments between consecutive [points] using the
|
||||
* given [color] and [strokeWidthPx].
|
||||
*/
|
||||
private fun DrawScope.drawPolyline(
|
||||
points: List<Offset>,
|
||||
color: Color,
|
||||
strokeWidthPx: Float,
|
||||
) {
|
||||
for (i in 0 until points.lastIndex) {
|
||||
drawLine(
|
||||
color = color,
|
||||
start = points[i],
|
||||
end = points[i + 1],
|
||||
strokeWidth = strokeWidthPx,
|
||||
cap = StrokeCap.Round,
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
package fn.compose.ui
|
||||
|
||||
import androidx.compose.foundation.Canvas
|
||||
import androidx.compose.foundation.border
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.HorizontalDivider
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.geometry.Offset
|
||||
import androidx.compose.ui.graphics.StrokeCap
|
||||
import androidx.compose.ui.graphics.StrokeJoin
|
||||
import androidx.compose.ui.graphics.drawscope.Stroke
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.unit.dp
|
||||
import fn.compose.theme.FnColors
|
||||
import fn.compose.theme.FnRadius
|
||||
import fn.compose.theme.FnSpacing
|
||||
import fn.compose.theme.FnTypography
|
||||
|
||||
/**
|
||||
* Page-level header with title, optional subtitle and trailing action slot.
|
||||
*
|
||||
* Layout: SpaceBetween Row with CenterVertically alignment.
|
||||
* Left side: Column with title + optional subtitle.
|
||||
* Right side: optional actions lambda.
|
||||
*/
|
||||
@Composable
|
||||
fun FnPageHeader(
|
||||
title: String,
|
||||
modifier: Modifier = Modifier,
|
||||
subtitle: String? = null,
|
||||
actions: (@Composable () -> Unit)? = null,
|
||||
) {
|
||||
Row(
|
||||
modifier = modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.SpaceBetween,
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Column(modifier = Modifier.weight(1f)) {
|
||||
Text(
|
||||
text = title,
|
||||
fontSize = FnTypography.lg,
|
||||
fontWeight = FnTypography.bold,
|
||||
color = MaterialTheme.colorScheme.onSurface,
|
||||
)
|
||||
if (subtitle != null) {
|
||||
Text(
|
||||
text = subtitle,
|
||||
fontSize = FnTypography.sm,
|
||||
fontWeight = FnTypography.normal,
|
||||
color = FnColors.textMuted,
|
||||
)
|
||||
}
|
||||
}
|
||||
if (actions != null) {
|
||||
actions()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* KPI metric card: label, large value, optional delta badge and optional
|
||||
* inline sparkline drawn with Canvas (no external dependency).
|
||||
*
|
||||
* The [modifier] is forwarded to the outermost Surface so callers can pass
|
||||
* `Modifier.weight(1f)` inside a Row (as the gallery does).
|
||||
*/
|
||||
@Composable
|
||||
fun FnKpiCard(
|
||||
label: String,
|
||||
value: String,
|
||||
modifier: Modifier = Modifier,
|
||||
delta: String? = null,
|
||||
deltaPositive: Boolean = true,
|
||||
sparklineData: List<Float>? = null,
|
||||
) {
|
||||
Surface(
|
||||
modifier = modifier
|
||||
.border(
|
||||
width = 1.dp,
|
||||
color = FnColors.border,
|
||||
shape = RoundedCornerShape(FnRadius.md),
|
||||
),
|
||||
shape = RoundedCornerShape(FnRadius.md),
|
||||
color = MaterialTheme.colorScheme.surface,
|
||||
tonalElevation = 0.dp,
|
||||
shadowElevation = 0.dp,
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.padding(FnSpacing.md),
|
||||
verticalArrangement = Arrangement.spacedBy(FnSpacing.xs / 2),
|
||||
) {
|
||||
// Label
|
||||
Text(
|
||||
text = label,
|
||||
fontSize = FnTypography.sm,
|
||||
fontWeight = FnTypography.normal,
|
||||
color = FnColors.textMuted,
|
||||
)
|
||||
|
||||
// Primary value
|
||||
Text(
|
||||
text = value,
|
||||
fontSize = FnTypography.xl,
|
||||
fontWeight = FnTypography.bold,
|
||||
color = MaterialTheme.colorScheme.onSurface,
|
||||
)
|
||||
|
||||
// Delta badge
|
||||
if (delta != null) {
|
||||
Text(
|
||||
text = delta,
|
||||
fontSize = FnTypography.xs,
|
||||
fontWeight = FnTypography.medium,
|
||||
color = if (deltaPositive) FnColors.success else FnColors.error,
|
||||
)
|
||||
}
|
||||
|
||||
// Inline sparkline — drawn with Canvas, no external component
|
||||
if (!sparklineData.isNullOrEmpty()) {
|
||||
val primaryColor = FnColors.primary
|
||||
Canvas(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(32.dp),
|
||||
) {
|
||||
val data = sparklineData
|
||||
if (data.size < 2) return@Canvas
|
||||
|
||||
val minVal = data.min()
|
||||
val maxVal = data.max()
|
||||
val range = (maxVal - minVal).let { if (it == 0f) 1f else it }
|
||||
|
||||
val w = size.width
|
||||
val h = size.height
|
||||
val stepX = w / (data.size - 1).toFloat()
|
||||
|
||||
// Build path points
|
||||
val points = data.mapIndexed { index, v ->
|
||||
val x = index * stepX
|
||||
// Normalize: high value -> low y (top of canvas)
|
||||
val y = h - ((v - minVal) / range) * h
|
||||
Offset(x, y)
|
||||
}
|
||||
|
||||
// Draw polyline segment by segment
|
||||
for (i in 0 until points.size - 1) {
|
||||
drawLine(
|
||||
color = primaryColor,
|
||||
start = points[i],
|
||||
end = points[i + 1],
|
||||
strokeWidth = 2.dp.toPx(),
|
||||
cap = StrokeCap.Round,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Column descriptor for [FnDataTable].
|
||||
*
|
||||
* @param T row data type.
|
||||
* @param header Column header label.
|
||||
* @param weight Relative width weight passed to [Modifier.weight].
|
||||
* @param cell Composable that renders a single cell for a given row value.
|
||||
*/
|
||||
data class FnTableColumn<T>(
|
||||
val header: String,
|
||||
val weight: Float,
|
||||
val cell: @Composable (T) -> Unit,
|
||||
)
|
||||
|
||||
/**
|
||||
* Static data table.
|
||||
*
|
||||
* Uses a non-lazy [Column] so it can be embedded inside a parent
|
||||
* `verticalScroll` (as the gallery does). Do not wrap in LazyColumn.
|
||||
*
|
||||
* Layout:
|
||||
* - Header row: one Text per column, weighted, bold, muted color.
|
||||
* - [HorizontalDivider] below the header.
|
||||
* - One Row per data entry: one [Box] per column, weighted.
|
||||
* - [HorizontalDivider] between data rows (not after the last).
|
||||
*/
|
||||
@Composable
|
||||
fun <T> FnDataTable(
|
||||
rows: List<T>,
|
||||
columns: List<FnTableColumn<T>>,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
Column(modifier = modifier) {
|
||||
// Header row
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(
|
||||
horizontal = FnSpacing.sm,
|
||||
vertical = FnSpacing.xs,
|
||||
),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
columns.forEach { col ->
|
||||
Text(
|
||||
text = col.header,
|
||||
modifier = Modifier.weight(col.weight),
|
||||
fontSize = FnTypography.sm,
|
||||
fontWeight = FontWeight.Bold,
|
||||
color = FnColors.textMuted,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
HorizontalDivider(color = FnColors.border, thickness = 1.dp)
|
||||
|
||||
// Data rows
|
||||
rows.forEachIndexed { rowIndex, row ->
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(
|
||||
horizontal = FnSpacing.sm,
|
||||
vertical = FnSpacing.xs,
|
||||
),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
columns.forEach { col ->
|
||||
Box(modifier = Modifier.weight(col.weight)) {
|
||||
col.cell(row)
|
||||
}
|
||||
}
|
||||
}
|
||||
// Divider between rows, not after the last
|
||||
if (rowIndex < rows.lastIndex) {
|
||||
HorizontalDivider(color = FnColors.border, thickness = 1.dp)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,283 @@
|
||||
package fn.compose.ui
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.border
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.ColumnScope
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.unit.dp
|
||||
import fn.compose.theme.FnColors
|
||||
import fn.compose.theme.FnRadius
|
||||
import fn.compose.theme.FnShadows
|
||||
import fn.compose.theme.FnSpacing
|
||||
import fn.compose.theme.FnTypography
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FnText
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Body text size scale. Maps directly to [FnTypography] sp values. */
|
||||
enum class FnTextSize { Xs, Sm, Md, Lg, Xl }
|
||||
|
||||
/**
|
||||
* Stateless body text following the registry typography scale.
|
||||
*
|
||||
* @param text String to display.
|
||||
* @param size One of [FnTextSize] — maps to FnTypography.xs … xl.
|
||||
* @param color Text color. Defaults to [MaterialTheme.colorScheme.onSurface]
|
||||
* when [Color.Unspecified] is passed.
|
||||
*/
|
||||
@Composable
|
||||
fun FnText(
|
||||
text: String,
|
||||
modifier: Modifier = Modifier,
|
||||
size: FnTextSize = FnTextSize.Md,
|
||||
color: Color = Color.Unspecified,
|
||||
) {
|
||||
val fontSize = when (size) {
|
||||
FnTextSize.Xs -> FnTypography.xs
|
||||
FnTextSize.Sm -> FnTypography.sm
|
||||
FnTextSize.Md -> FnTypography.md
|
||||
FnTextSize.Lg -> FnTypography.lg
|
||||
FnTextSize.Xl -> FnTypography.xl
|
||||
}
|
||||
val resolvedColor = if (color == Color.Unspecified) {
|
||||
MaterialTheme.colorScheme.onSurface
|
||||
} else {
|
||||
color
|
||||
}
|
||||
Text(
|
||||
text = text,
|
||||
modifier = modifier,
|
||||
color = resolvedColor,
|
||||
fontSize = fontSize,
|
||||
fontWeight = FnTypography.normal,
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FnTitle
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Heading text from order 1 (largest) to order 6 (smallest).
|
||||
*
|
||||
* Orders 1–2 use [FontWeight.Bold]; orders 3–6 use [FontWeight.SemiBold].
|
||||
* Font size maps to [FnTypography.h1] … [FnTypography.h6].
|
||||
*/
|
||||
@Composable
|
||||
fun FnTitle(
|
||||
text: String,
|
||||
modifier: Modifier = Modifier,
|
||||
order: Int = 1,
|
||||
) {
|
||||
val clamped = order.coerceIn(1, 6)
|
||||
val fontSize = when (clamped) {
|
||||
1 -> FnTypography.h1
|
||||
2 -> FnTypography.h2
|
||||
3 -> FnTypography.h3
|
||||
4 -> FnTypography.h4
|
||||
5 -> FnTypography.h5
|
||||
else -> FnTypography.h6
|
||||
}
|
||||
val fontWeight = if (clamped <= 2) FnTypography.bold else FnTypography.semibold
|
||||
Text(
|
||||
text = text,
|
||||
modifier = modifier,
|
||||
color = MaterialTheme.colorScheme.onSurface,
|
||||
fontSize = fontSize,
|
||||
fontWeight = fontWeight,
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FnCard
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Visual style variant for [FnCard]. */
|
||||
enum class FnCardVariant { Default, Borderless, Ghost }
|
||||
|
||||
/**
|
||||
* Container card with three visual variants.
|
||||
*
|
||||
* - **Default**: surface background, 1 dp border ([FnColors.border]),
|
||||
* [FnRadius.md] corners, [FnShadows.sm] elevation, [FnSpacing.md] padding.
|
||||
* - **Borderless**: surface background, no border, no shadow,
|
||||
* [FnSpacing.md] padding.
|
||||
* - **Ghost**: transparent background, no border, no shadow,
|
||||
* [FnSpacing.md] padding.
|
||||
*/
|
||||
@Composable
|
||||
fun FnCard(
|
||||
modifier: Modifier = Modifier,
|
||||
variant: FnCardVariant = FnCardVariant.Default,
|
||||
content: @Composable ColumnScope.() -> Unit,
|
||||
) {
|
||||
val shape = RoundedCornerShape(FnRadius.md)
|
||||
|
||||
when (variant) {
|
||||
FnCardVariant.Default -> {
|
||||
Surface(
|
||||
modifier = modifier,
|
||||
shape = shape,
|
||||
color = MaterialTheme.colorScheme.surface,
|
||||
shadowElevation = FnShadows.sm,
|
||||
tonalElevation = 0.dp,
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.border(width = 1.dp, color = FnColors.border, shape = shape)
|
||||
.padding(FnSpacing.md),
|
||||
content = content,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
FnCardVariant.Borderless -> {
|
||||
Surface(
|
||||
modifier = modifier,
|
||||
shape = shape,
|
||||
color = MaterialTheme.colorScheme.surface,
|
||||
shadowElevation = 0.dp,
|
||||
tonalElevation = 0.dp,
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.padding(FnSpacing.md),
|
||||
content = content,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
FnCardVariant.Ghost -> {
|
||||
Surface(
|
||||
modifier = modifier,
|
||||
shape = shape,
|
||||
color = Color.Transparent,
|
||||
shadowElevation = 0.dp,
|
||||
tonalElevation = 0.dp,
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.padding(FnSpacing.md),
|
||||
content = content,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FnBadge
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Semantic color options for [FnBadge]. */
|
||||
enum class FnBadgeColor { Brand, Gray, Green, Red, Yellow, Blue }
|
||||
|
||||
/**
|
||||
* Pill-shaped label using a semitransparent background derived from the base
|
||||
* color (alpha 0.18) and the base color as text color.
|
||||
*
|
||||
* Color mapping:
|
||||
* - Brand → [FnColors.primary]
|
||||
* - Gray → [FnColors.textMuted]
|
||||
* - Green → [FnColors.success]
|
||||
* - Red → [FnColors.error]
|
||||
* - Yellow → [FnColors.warning]
|
||||
* - Blue → [FnColors.info]
|
||||
*/
|
||||
@Composable
|
||||
fun FnBadge(
|
||||
text: String,
|
||||
modifier: Modifier = Modifier,
|
||||
color: FnBadgeColor = FnBadgeColor.Brand,
|
||||
) {
|
||||
val baseColor = when (color) {
|
||||
FnBadgeColor.Brand -> FnColors.primary
|
||||
FnBadgeColor.Gray -> FnColors.textMuted
|
||||
FnBadgeColor.Green -> FnColors.success
|
||||
FnBadgeColor.Red -> FnColors.error
|
||||
FnBadgeColor.Yellow -> FnColors.warning
|
||||
FnBadgeColor.Blue -> FnColors.info
|
||||
}
|
||||
val bgColor = baseColor.copy(alpha = 0.18f)
|
||||
val shape = RoundedCornerShape(FnRadius.full)
|
||||
|
||||
Box(
|
||||
modifier = modifier
|
||||
.background(color = bgColor, shape = shape)
|
||||
.padding(horizontal = 8.dp, vertical = 3.dp),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
Text(
|
||||
text = text,
|
||||
color = baseColor,
|
||||
fontSize = FnTypography.xs,
|
||||
fontWeight = FnTypography.medium,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FnAvatar
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Size variants for [FnAvatar]. */
|
||||
enum class FnAvatarSize { Sm, Md, Lg }
|
||||
|
||||
/**
|
||||
* Circular avatar displaying up to two initials on a [FnColors.primary]
|
||||
* background.
|
||||
*
|
||||
* Size mapping:
|
||||
* - Sm → 28 dp
|
||||
* - Md → 40 dp
|
||||
* - Lg → 56 dp
|
||||
*
|
||||
* Text size scales proportionally (xs / sm / md) so the initials always fit.
|
||||
*/
|
||||
@Composable
|
||||
fun FnAvatar(
|
||||
initials: String,
|
||||
modifier: Modifier = Modifier,
|
||||
size: FnAvatarSize = FnAvatarSize.Md,
|
||||
) {
|
||||
val sizeDp = when (size) {
|
||||
FnAvatarSize.Sm -> 28.dp
|
||||
FnAvatarSize.Md -> 40.dp
|
||||
FnAvatarSize.Lg -> 56.dp
|
||||
}
|
||||
val fontSize = when (size) {
|
||||
FnAvatarSize.Sm -> FnTypography.xs
|
||||
FnAvatarSize.Md -> FnTypography.sm
|
||||
FnAvatarSize.Lg -> FnTypography.md
|
||||
}
|
||||
// Truncate to at most two characters so the avatar never overflows.
|
||||
val label = initials.take(2).uppercase()
|
||||
|
||||
Box(
|
||||
modifier = modifier
|
||||
.size(sizeDp)
|
||||
.background(color = FnColors.primary, shape = CircleShape),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
Text(
|
||||
text = label,
|
||||
color = FnColors.white,
|
||||
fontSize = fontSize,
|
||||
fontWeight = FnTypography.semibold,
|
||||
textAlign = TextAlign.Center,
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,260 @@
|
||||
package fn.compose.ui
|
||||
|
||||
import androidx.compose.animation.core.LinearEasing
|
||||
import androidx.compose.animation.core.RepeatMode
|
||||
import androidx.compose.animation.core.animateFloat
|
||||
import androidx.compose.animation.core.infiniteRepeatable
|
||||
import androidx.compose.animation.core.rememberInfiniteTransition
|
||||
import androidx.compose.animation.core.tween
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.border
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.CircularProgressIndicator
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.ScrollableTabRow
|
||||
import androidx.compose.material3.Tab
|
||||
import androidx.compose.material3.TabRow
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import fn.compose.theme.FnColors
|
||||
import fn.compose.theme.FnRadius
|
||||
import fn.compose.theme.FnSpacing
|
||||
import fn.compose.theme.FnTypography
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FnTabs
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Tab bar backed by [TabRow] or [ScrollableTabRow] depending on [scrollable].
|
||||
*
|
||||
* Each item in [tabs] becomes a [Tab] whose selected state is determined by
|
||||
* comparing its index with [selectedIndex]. Selecting a tab triggers
|
||||
* [onTabSelected] with the tapped index.
|
||||
*/
|
||||
@Composable
|
||||
fun FnTabs(
|
||||
tabs: List<String>,
|
||||
selectedIndex: Int,
|
||||
onTabSelected: (Int) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
scrollable: Boolean = false,
|
||||
) {
|
||||
val tabContent: @Composable () -> Unit = {
|
||||
tabs.forEachIndexed { index, label ->
|
||||
Tab(
|
||||
selected = index == selectedIndex,
|
||||
onClick = { onTabSelected(index) },
|
||||
text = { Text(label) },
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (scrollable) {
|
||||
ScrollableTabRow(
|
||||
selectedTabIndex = selectedIndex,
|
||||
modifier = modifier,
|
||||
) { tabContent() }
|
||||
} else {
|
||||
TabRow(
|
||||
selectedTabIndex = selectedIndex,
|
||||
modifier = modifier,
|
||||
) { tabContent() }
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FnAlert
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Semantic intent of an [FnAlert]. Maps to a status color from [FnColors]. */
|
||||
enum class FnAlertVariant { Info, Success, Warning, Error }
|
||||
|
||||
/**
|
||||
* Inline alert banner.
|
||||
*
|
||||
* The background is the variant's status color at 15 % opacity; the border is
|
||||
* the same color at full opacity (1 dp). When [title] is supplied it is
|
||||
* rendered in bold above [text].
|
||||
*/
|
||||
@Composable
|
||||
fun FnAlert(
|
||||
text: String,
|
||||
modifier: Modifier = Modifier,
|
||||
title: String? = null,
|
||||
variant: FnAlertVariant = FnAlertVariant.Info,
|
||||
) {
|
||||
val colorBase: Color = when (variant) {
|
||||
FnAlertVariant.Info -> FnColors.info
|
||||
FnAlertVariant.Success -> FnColors.success
|
||||
FnAlertVariant.Warning -> FnColors.warning
|
||||
FnAlertVariant.Error -> FnColors.error
|
||||
}
|
||||
val shape = RoundedCornerShape(FnRadius.sm)
|
||||
val onSurface = MaterialTheme.colorScheme.onSurface
|
||||
|
||||
Box(
|
||||
modifier = modifier
|
||||
.fillMaxWidth()
|
||||
.clip(shape)
|
||||
.background(colorBase.copy(alpha = 0.15f))
|
||||
.border(width = 1.dp, color = colorBase, shape = shape)
|
||||
.padding(FnSpacing.md),
|
||||
) {
|
||||
Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
|
||||
if (title != null) {
|
||||
Text(
|
||||
text = title,
|
||||
color = colorBase,
|
||||
fontWeight = FontWeight.Bold,
|
||||
fontSize = FnTypography.sm,
|
||||
)
|
||||
}
|
||||
Text(
|
||||
text = text,
|
||||
color = onSurface,
|
||||
fontSize = FnTypography.sm,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FnLoader
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Visual size of an [FnLoader] spinner. */
|
||||
enum class FnLoaderSize { Sm, Md, Lg }
|
||||
|
||||
/**
|
||||
* Indeterminate circular progress indicator using [FnColors.primary].
|
||||
*
|
||||
* [size] maps to 16 dp (Sm), 32 dp (Md), or 56 dp (Lg). The stroke width
|
||||
* scales proportionally (2 / 3 / 5 dp).
|
||||
*/
|
||||
@Composable
|
||||
fun FnLoader(
|
||||
modifier: Modifier = Modifier,
|
||||
size: FnLoaderSize = FnLoaderSize.Md,
|
||||
) {
|
||||
val (sizeDp, strokeDp) = when (size) {
|
||||
FnLoaderSize.Sm -> 16.dp to 2.dp
|
||||
FnLoaderSize.Md -> 32.dp to 3.dp
|
||||
FnLoaderSize.Lg -> 56.dp to 5.dp
|
||||
}
|
||||
|
||||
CircularProgressIndicator(
|
||||
modifier = modifier.size(sizeDp),
|
||||
color = FnColors.primary,
|
||||
strokeWidth = strokeDp,
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FnSkeleton
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Shimmer placeholder rectangle.
|
||||
*
|
||||
* Fills the available width to [height] dp with a rounded shape and an
|
||||
* animated alpha oscillating between [FnColors.surfaceHover] and
|
||||
* [FnColors.surfaceActive], simulating a loading shimmer without external
|
||||
* dependencies.
|
||||
*/
|
||||
@Composable
|
||||
fun FnSkeleton(
|
||||
modifier: Modifier = Modifier,
|
||||
height: Dp = 16.dp,
|
||||
) {
|
||||
val infiniteTransition = rememberInfiniteTransition(label = "skeleton_shimmer")
|
||||
val alpha by infiniteTransition.animateFloat(
|
||||
initialValue = 0f,
|
||||
targetValue = 1f,
|
||||
animationSpec = infiniteRepeatable(
|
||||
animation = tween(durationMillis = 800, easing = LinearEasing),
|
||||
repeatMode = RepeatMode.Reverse,
|
||||
),
|
||||
label = "skeleton_alpha",
|
||||
)
|
||||
|
||||
// Interpolate between surfaceHover and surfaceActive using the animated alpha.
|
||||
val shimmerColor = androidx.compose.ui.graphics.lerp(
|
||||
FnColors.surfaceHover,
|
||||
FnColors.surfaceActive,
|
||||
alpha,
|
||||
)
|
||||
|
||||
Box(
|
||||
modifier = modifier
|
||||
.fillMaxWidth()
|
||||
.height(height)
|
||||
.clip(RoundedCornerShape(FnRadius.sm))
|
||||
.background(shimmerColor),
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FnEmptyState
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Centred empty-state panel with optional icon, title, description, and
|
||||
* action slot.
|
||||
*
|
||||
* Layout (top to bottom, horizontally centred):
|
||||
* 1. [icon] rendered as large emoji/text (40 sp) — only if non-null.
|
||||
* 2. [title] in bold body size.
|
||||
* 3. [description] in [FnColors.textMuted].
|
||||
* 4. [action] composable slot — only if non-null.
|
||||
*
|
||||
* Padding is [FnSpacing.lg] on all sides; vertical gaps use [FnSpacing.sm].
|
||||
*/
|
||||
@Composable
|
||||
fun FnEmptyState(
|
||||
title: String,
|
||||
description: String,
|
||||
modifier: Modifier = Modifier,
|
||||
icon: String? = null,
|
||||
action: (@Composable () -> Unit)? = null,
|
||||
) {
|
||||
Column(
|
||||
modifier = modifier.padding(FnSpacing.lg),
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
verticalArrangement = Arrangement.spacedBy(FnSpacing.sm),
|
||||
) {
|
||||
if (icon != null) {
|
||||
Text(
|
||||
text = icon,
|
||||
fontSize = 40.sp,
|
||||
)
|
||||
}
|
||||
Text(
|
||||
text = title,
|
||||
fontWeight = FontWeight.Bold,
|
||||
fontSize = FnTypography.md,
|
||||
)
|
||||
Text(
|
||||
text = description,
|
||||
color = FnColors.textMuted,
|
||||
fontSize = FnTypography.sm,
|
||||
)
|
||||
action?.invoke()
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,318 @@
|
||||
package fn.compose.ui
|
||||
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.AlertDialog
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.ButtonDefaults
|
||||
import androidx.compose.material3.Checkbox
|
||||
import androidx.compose.material3.DropdownMenuItem
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.ExposedDropdownMenuBox
|
||||
import androidx.compose.material3.ExposedDropdownMenuDefaults
|
||||
import androidx.compose.material3.OutlinedButton
|
||||
import androidx.compose.material3.OutlinedTextField
|
||||
import androidx.compose.material3.Switch
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.TextButton
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.setValue
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.text.style.TextDecoration
|
||||
import androidx.compose.ui.unit.dp
|
||||
import fn.compose.theme.FnColors
|
||||
import fn.compose.theme.FnRadius
|
||||
import fn.compose.theme.FnSpacing
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Button
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Variants for [FnButton]. Maps to Material3 button styles + custom colors. */
|
||||
enum class FnButtonVariant {
|
||||
Filled,
|
||||
Outlined,
|
||||
Secondary,
|
||||
Ghost,
|
||||
Destructive,
|
||||
Link,
|
||||
}
|
||||
|
||||
private val buttonShape = RoundedCornerShape(FnRadius.sm)
|
||||
|
||||
/**
|
||||
* Design-system button with six visual variants. Stateless — the caller
|
||||
* drives [onClick].
|
||||
*
|
||||
* - Filled: primary container color.
|
||||
* - Outlined: border only, no fill.
|
||||
* - Secondary: filled with [FnColors.surfaceActive].
|
||||
* - Ghost: text-only, no chrome.
|
||||
* - Destructive: filled with [FnColors.error].
|
||||
* - Link: text-only with [FnColors.primary] color and underline decoration.
|
||||
*/
|
||||
@Composable
|
||||
fun FnButton(
|
||||
text: String,
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
variant: FnButtonVariant = FnButtonVariant.Filled,
|
||||
) {
|
||||
val shape = buttonShape
|
||||
when (variant) {
|
||||
FnButtonVariant.Filled -> Button(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
shape = shape,
|
||||
) {
|
||||
Text(text)
|
||||
}
|
||||
|
||||
FnButtonVariant.Outlined -> OutlinedButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
shape = shape,
|
||||
) {
|
||||
Text(text)
|
||||
}
|
||||
|
||||
FnButtonVariant.Secondary -> Button(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
shape = shape,
|
||||
colors = ButtonDefaults.buttonColors(
|
||||
containerColor = FnColors.surfaceActive,
|
||||
contentColor = FnColors.text,
|
||||
),
|
||||
) {
|
||||
Text(text)
|
||||
}
|
||||
|
||||
FnButtonVariant.Ghost -> TextButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
shape = shape,
|
||||
) {
|
||||
Text(text)
|
||||
}
|
||||
|
||||
FnButtonVariant.Destructive -> Button(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
shape = shape,
|
||||
colors = ButtonDefaults.buttonColors(
|
||||
containerColor = FnColors.error,
|
||||
contentColor = FnColors.white,
|
||||
),
|
||||
) {
|
||||
Text(text)
|
||||
}
|
||||
|
||||
FnButtonVariant.Link -> TextButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
shape = shape,
|
||||
) {
|
||||
Text(
|
||||
text = text,
|
||||
color = FnColors.primary,
|
||||
textDecoration = TextDecoration.Underline,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Text input
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Single-line text field with optional label, placeholder and inline error.
|
||||
* Stateless — the caller owns [value] / [onValueChange].
|
||||
*
|
||||
* When [error] is non-null, the field enters error state and the supporting
|
||||
* text slot shows the error message in [FnColors.error].
|
||||
*/
|
||||
@Composable
|
||||
fun FnTextInput(
|
||||
value: String,
|
||||
onValueChange: (String) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
label: String? = null,
|
||||
placeholder: String? = null,
|
||||
error: String? = null,
|
||||
) {
|
||||
OutlinedTextField(
|
||||
value = value,
|
||||
onValueChange = onValueChange,
|
||||
modifier = modifier,
|
||||
label = label?.let { { Text(it) } },
|
||||
placeholder = placeholder?.let { { Text(it) } },
|
||||
isError = error != null,
|
||||
singleLine = true,
|
||||
supportingText = error?.let {
|
||||
{
|
||||
Text(
|
||||
text = it,
|
||||
color = FnColors.error,
|
||||
)
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Select (dropdown)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Exposed dropdown menu that lets the caller pick one item from [options].
|
||||
* Stateless — the caller drives [selected] / [onSelected].
|
||||
*
|
||||
* Annotated with [ExperimentalMaterial3Api] because [ExposedDropdownMenuBox]
|
||||
* is part of the experimental Material3 API surface in BOM 2024.02.00.
|
||||
*/
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun FnSelect(
|
||||
options: List<String>,
|
||||
selected: String?,
|
||||
onSelected: (String) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
label: String? = null,
|
||||
) {
|
||||
var expanded by remember { mutableStateOf(false) }
|
||||
|
||||
ExposedDropdownMenuBox(
|
||||
expanded = expanded,
|
||||
onExpandedChange = { expanded = it },
|
||||
modifier = modifier,
|
||||
) {
|
||||
OutlinedTextField(
|
||||
value = selected ?: "",
|
||||
onValueChange = {},
|
||||
readOnly = true,
|
||||
label = label?.let { { Text(it) } },
|
||||
trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
|
||||
modifier = Modifier
|
||||
.menuAnchor()
|
||||
.fillMaxWidth(),
|
||||
)
|
||||
ExposedDropdownMenu(
|
||||
expanded = expanded,
|
||||
onDismissRequest = { expanded = false },
|
||||
) {
|
||||
options.forEach { option ->
|
||||
DropdownMenuItem(
|
||||
text = { Text(option) },
|
||||
onClick = {
|
||||
onSelected(option)
|
||||
expanded = false
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Switch
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Labeled toggle. The [label] is rendered to the right of the [Switch] when
|
||||
* non-null. Stateless — the caller owns [checked] / [onCheckedChange].
|
||||
*/
|
||||
@Composable
|
||||
fun FnSwitch(
|
||||
checked: Boolean,
|
||||
onCheckedChange: (Boolean) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
label: String? = null,
|
||||
) {
|
||||
Row(
|
||||
modifier = modifier,
|
||||
horizontalArrangement = Arrangement.spacedBy(FnSpacing.sm),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Switch(
|
||||
checked = checked,
|
||||
onCheckedChange = onCheckedChange,
|
||||
)
|
||||
if (label != null) {
|
||||
Text(text = label)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Checkbox
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Labeled checkbox. The [label] is rendered to the right of the [Checkbox]
|
||||
* when non-null. Stateless — the caller owns [checked] / [onCheckedChange].
|
||||
*/
|
||||
@Composable
|
||||
fun FnCheckbox(
|
||||
checked: Boolean,
|
||||
onCheckedChange: (Boolean) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
label: String? = null,
|
||||
) {
|
||||
Row(
|
||||
modifier = modifier,
|
||||
horizontalArrangement = Arrangement.spacedBy(FnSpacing.sm),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Checkbox(
|
||||
checked = checked,
|
||||
onCheckedChange = onCheckedChange,
|
||||
)
|
||||
if (label != null) {
|
||||
Text(text = label)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Dialog
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Modal confirmation dialog.
|
||||
*
|
||||
* Rendered only when [open] is true. Provides "Confirmar" (calls [onConfirm])
|
||||
* and "Cancelar" (calls [onDismiss]) text buttons. The caller is responsible
|
||||
* for updating the [open] flag in response to those callbacks.
|
||||
*/
|
||||
@Composable
|
||||
fun FnDialog(
|
||||
open: Boolean,
|
||||
onDismiss: () -> Unit,
|
||||
title: String,
|
||||
description: String,
|
||||
onConfirm: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
if (open) {
|
||||
AlertDialog(
|
||||
onDismissRequest = onDismiss,
|
||||
title = { Text(title) },
|
||||
text = { Text(description) },
|
||||
confirmButton = {
|
||||
TextButton(onClick = onConfirm) { Text("Confirmar") }
|
||||
},
|
||||
dismissButton = {
|
||||
TextButton(onClick = onDismiss) { Text("Cancelar") }
|
||||
},
|
||||
modifier = modifier,
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
package fn.compose.ui
|
||||
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.ColumnScope
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.RowScope
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.TopAppBar
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import fn.compose.theme.FnColors
|
||||
import fn.compose.theme.FnRadius
|
||||
import fn.compose.theme.FnShadows
|
||||
import fn.compose.theme.FnSpacing
|
||||
|
||||
/**
|
||||
* Vertical layout primitive. Wraps a [Column] with [Arrangement.spacedBy] using [gap].
|
||||
*
|
||||
* Equivalent to the web `<Stack>` component from `@fn_library` (Mantine Stack).
|
||||
* Use to stack items with consistent vertical spacing without inline padding.
|
||||
*
|
||||
* @param modifier Modifier applied to the outer [Column].
|
||||
* @param gap Space between children. Defaults to [FnSpacing.md] (16 dp).
|
||||
* @param content Composable children provided in [ColumnScope].
|
||||
*/
|
||||
@Composable
|
||||
fun FnStack(
|
||||
modifier: Modifier = Modifier,
|
||||
gap: Dp = FnSpacing.md,
|
||||
content: @Composable ColumnScope.() -> Unit,
|
||||
) {
|
||||
Column(
|
||||
modifier = modifier,
|
||||
verticalArrangement = Arrangement.spacedBy(gap),
|
||||
content = content,
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Horizontal layout primitive. Wraps a [Row] with [Arrangement.spacedBy] using [gap]
|
||||
* and vertically centers children via [Alignment.CenterVertically].
|
||||
*
|
||||
* Equivalent to the web `<Group>` component from `@fn_library` (Mantine Group).
|
||||
* Use to place items side-by-side with consistent horizontal spacing.
|
||||
*
|
||||
* @param modifier Modifier applied to the outer [Row].
|
||||
* @param gap Space between children. Defaults to [FnSpacing.sm] (12 dp).
|
||||
* @param content Composable children provided in [RowScope].
|
||||
*/
|
||||
@Composable
|
||||
fun FnGroup(
|
||||
modifier: Modifier = Modifier,
|
||||
gap: Dp = FnSpacing.sm,
|
||||
content: @Composable RowScope.() -> Unit,
|
||||
) {
|
||||
Row(
|
||||
modifier = modifier,
|
||||
horizontalArrangement = Arrangement.spacedBy(gap),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
content = content,
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Elevated container surface. Wraps a [Surface] with [FnColors.surface] background,
|
||||
* rounded corners ([FnRadius.md]) and a subtle tonal elevation ([FnShadows.xs]).
|
||||
*
|
||||
* Equivalent to the web `<Paper>` component from `@fn_library` (Mantine Paper).
|
||||
* Use when content needs a visual separation from the background without a heavy border.
|
||||
*
|
||||
* @param modifier Modifier applied to the [Surface].
|
||||
* @param content Composable children provided in [ColumnScope] with [FnSpacing.md] padding.
|
||||
*/
|
||||
@Composable
|
||||
fun FnPaper(
|
||||
modifier: Modifier = Modifier,
|
||||
content: @Composable ColumnScope.() -> Unit,
|
||||
) {
|
||||
Surface(
|
||||
modifier = modifier,
|
||||
color = FnColors.surface,
|
||||
shape = RoundedCornerShape(FnRadius.md),
|
||||
tonalElevation = FnShadows.xs,
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.padding(FnSpacing.md),
|
||||
content = content,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Root application shell with a top app bar and a content slot that receives
|
||||
* the inner padding from [Scaffold].
|
||||
*
|
||||
* Equivalent to the web `<AppShell>` component from `@fn_library`. Place this
|
||||
* at the top of every screen composable so the system status bar and navigation
|
||||
* insets are handled consistently.
|
||||
*
|
||||
* The [TopAppBar] is annotated with [ExperimentalMaterial3Api] as required by
|
||||
* Compose Material 3 (BOM 2024.02.00). The opt-in is scoped to this function.
|
||||
*
|
||||
* @param title Text displayed in the top app bar.
|
||||
* @param modifier Modifier applied to the [Scaffold].
|
||||
* @param content Screen content. Receives [PaddingValues] from the scaffold and
|
||||
* is responsible for applying them (e.g. via [Modifier.padding]).
|
||||
*/
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun FnAppShell(
|
||||
title: String,
|
||||
modifier: Modifier = Modifier,
|
||||
content: @Composable (PaddingValues) -> Unit,
|
||||
) {
|
||||
Scaffold(
|
||||
modifier = modifier,
|
||||
topBar = {
|
||||
TopAppBar(
|
||||
title = { Text(text = title) },
|
||||
)
|
||||
},
|
||||
content = content,
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_alert
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnAlert(text: String, modifier: Modifier = Modifier, title: String? = null, variant: FnAlertVariant = FnAlertVariant.Info)"
|
||||
description: "Bloque de aviso con 4 variantes semanticas (Info/Success/Warning/Error), fondo y borde del color."
|
||||
tags: [compose, android, ui, feedback, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Feedback.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnAlert("Guardado", title = "Success", variant = FnAlertVariant.Success)
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para mensajes contextuales de estado dentro de una pantalla. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
name: fn_app_shell
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnAppShell(title: String, modifier: Modifier = Modifier, content: @Composable (PaddingValues) -> Unit)"
|
||||
description: "Scaffold con TopAppBar (titulo) que envuelve el contenido principal de una pantalla. Equivalente de <AppShell> de Mantine."
|
||||
tags: [compose, android, ui, layout, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Layout.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnAppShell(title = "Mi App") { padding ->
|
||||
FnStack(Modifier.padding(padding)) { /* ... */ }
|
||||
}
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Como contenedor raiz de cada pantalla de la app, una vez dentro de FnTheme. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_avatar
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnAvatar(initials: String, modifier: Modifier = Modifier, size: FnAvatarSize = FnAvatarSize.Md)"
|
||||
description: "Circulo con iniciales sobre fondo primary, tamanos Sm (28dp), Md (40dp), Lg (56dp)."
|
||||
tags: [compose, android, ui, display, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Display.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnAvatar("EG", size = FnAvatarSize.Md)
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para representar usuarios o entidades por iniciales cuando no hay imagen. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_badge
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnBadge(text: String, modifier: Modifier = Modifier, color: FnBadgeColor = FnBadgeColor.Brand)"
|
||||
description: "Pill de estado con 6 colores semanticos (Brand/Gray/Green/Red/Yellow/Blue), fondo tenue + texto del color."
|
||||
tags: [compose, android, ui, display, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Display.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnBadge("ACTIVE", color = FnBadgeColor.Green)
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para etiquetar estados, categorias o tags cortos. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_bar_chart
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnBarChart(data: List<FnBarItem>, modifier: Modifier = Modifier)"
|
||||
description: "Grafico de barras verticales Canvas con labels. Define FnBarItem(label, value)."
|
||||
tags: [compose, android, ui, charts, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Charts.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnBarChart(data = listOf(FnBarItem("Lun", 12f), FnBarItem("Mar", 19f)))
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para comparar valores discretos por categoria. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
name: fn_button
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnButton(text: String, onClick: () -> Unit, modifier: Modifier = Modifier, variant: FnButtonVariant = FnButtonVariant.Filled)"
|
||||
description: "Boton con 6 variantes: Filled, Outlined, Secondary, Ghost, Destructive, Link. Mirror de los variants de Mantine."
|
||||
tags: [compose, android, ui, inputs, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Inputs.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnButton("Enviar", onClick = { /* ... */ })
|
||||
FnButton("Borrar", onClick = {}, variant = FnButtonVariant.Destructive)
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para cualquier accion; elige variant segun jerarquia/semantica. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
name: fn_card
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnCard(modifier: Modifier = Modifier, variant: FnCardVariant = FnCardVariant.Default, content: @Composable ColumnScope.() -> Unit)"
|
||||
description: "Tarjeta contenedora con tres variantes: Default (borde + sombra), Borderless (solo fondo), Ghost (transparente)."
|
||||
tags: [compose, android, ui, display, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Display.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnCard(variant = FnCardVariant.Default) {
|
||||
FnText("Dentro de la card")
|
||||
}
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para agrupar contenido relacionado con enfasis visual. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_checkbox
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnCheckbox(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, label: String? = null)"
|
||||
description: "Checkbox con label opcional. Stateless."
|
||||
tags: [compose, android, ui, inputs, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Inputs.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnCheckbox(checked = ok, onCheckedChange = { ok = it }, label = "Acepto")
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para seleccion booleana en formularios y listas. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
name: fn_data_table
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun <T> FnDataTable(rows: List<T>, columns: List<FnTableColumn<T>>, modifier: Modifier = Modifier)"
|
||||
description: "Tabla generica por columnas (FnTableColumn: header, weight, cell). Column estatica, cada celda es un Composable. Define FnTableColumn<T>."
|
||||
tags: [compose, android, ui, data, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Data.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnDataTable(rows = users, columns = listOf(
|
||||
FnTableColumn("Nombre", 2f) { FnText(it.name) },
|
||||
FnTableColumn("Estado", 1f) { FnBadge(it.status) },
|
||||
))
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para mostrar datos tabulares con celdas personalizadas. No anidar en verticalScroll con muchas filas. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_dialog
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnDialog(open: Boolean, onDismiss: () -> Unit, title: String, description: String, onConfirm: () -> Unit, modifier: Modifier = Modifier)"
|
||||
description: "Modal AlertDialog con titulo, descripcion y botones Confirmar/Cancelar. Se renderiza solo si open."
|
||||
tags: [compose, android, ui, inputs, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Inputs.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnDialog(open = show, onDismiss = { show = false }, title = "Confirmar", description = "Seguro?", onConfirm = { show = false })
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para confirmaciones y dialogos modales bloqueantes. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_empty_state
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnEmptyState(title: String, description: String, modifier: Modifier = Modifier, icon: String? = null, action: (@Composable () -> Unit)? = null)"
|
||||
description: "Estado vacio centrado con icono (emoji), titulo, descripcion y accion opcional."
|
||||
tags: [compose, android, ui, feedback, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Feedback.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnEmptyState(title = "Sin datos", description = "Anade el primero", icon = "📭")
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para listas/pantallas sin contenido todavia. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
name: fn_group
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnGroup(modifier: Modifier = Modifier, gap: Dp = FnSpacing.sm, content: @Composable RowScope.() -> Unit)"
|
||||
description: "Row con separacion uniforme entre hijos y alineacion vertical centrada. Equivalente Compose de <Group> de Mantine."
|
||||
tags: [compose, android, ui, layout, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Layout.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnGroup {
|
||||
FnButton("Guardar", onClick = {})
|
||||
FnButton("Cancelar", onClick = {}, variant = FnButtonVariant.Ghost)
|
||||
}
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para alinear elementos en fila (botones, badges) con separacion uniforme. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_kpi_card
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnKpiCard(label: String, value: String, modifier: Modifier = Modifier, delta: String? = null, deltaPositive: Boolean = true, sparklineData: List<Float>? = null)"
|
||||
description: "Tarjeta de metrica con label, valor grande, delta coloreado y sparkline inline opcional."
|
||||
tags: [compose, android, ui, data, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Data.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnKpiCard(label = "Revenue", value = "42k", delta = "+12%", sparklineData = listOf(1f,3f,2f,5f))
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para dashboards: mostrar un KPI con tendencia. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_line_chart
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnLineChart(data: List<Float>, modifier: Modifier = Modifier)"
|
||||
description: "Grafico de linea Canvas con relleno de area, sin dependencias externas. Normaliza la serie automaticamente."
|
||||
tags: [compose, android, ui, charts, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Charts.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnLineChart(data = listOf(10f,14f,12f,18f,22f), modifier = Modifier.fillMaxWidth())
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para series temporales o tendencias continuas. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_loader
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnLoader(modifier: Modifier = Modifier, size: FnLoaderSize = FnLoaderSize.Md)"
|
||||
description: "Spinner CircularProgressIndicator en color primary, tamanos Sm/Md/Lg."
|
||||
tags: [compose, android, ui, feedback, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Feedback.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnLoader(size = FnLoaderSize.Md)
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para indicar carga indeterminada. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_page_header
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnPageHeader(title: String, modifier: Modifier = Modifier, subtitle: String? = null, actions: (@Composable () -> Unit)? = null)"
|
||||
description: "Cabecera de seccion con titulo, subtitulo opcional y slot de acciones a la derecha."
|
||||
tags: [compose, android, ui, data, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Data.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnPageHeader("Usuarios", subtitle = "Listado activo", actions = { FnButton("Nuevo", onClick = {}) })
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Al inicio de cada seccion/pantalla para titular y exponer acciones. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
name: fn_paper
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnPaper(modifier: Modifier = Modifier, content: @Composable ColumnScope.() -> Unit)"
|
||||
description: "Contenedor Surface minimal con radius y sombra leves, fondo surface del tema. Mas ligero que FnCard."
|
||||
tags: [compose, android, ui, layout, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Layout.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnPaper(modifier = Modifier.fillMaxWidth()) {
|
||||
FnText("Contenido")
|
||||
}
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para agrupar contenido en una superficie elevada sin el borde marcado de FnCard. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_select
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnSelect(options: List<String>, selected: String?, onSelected: (String) -> Unit, modifier: Modifier = Modifier, label: String? = null)"
|
||||
description: "Dropdown ExposedDropdownMenu sobre una lista de opciones string. Stateless respecto a la seleccion."
|
||||
tags: [compose, android, ui, inputs, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Inputs.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnSelect(options = listOf("A","B"), selected = sel, onSelected = { sel = it }, label = "Tipo")
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para elegir una opcion de una lista cerrada. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_skeleton
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnSkeleton(modifier: Modifier = Modifier, height: Dp = 16.dp)"
|
||||
description: "Placeholder animado (shimmer) para contenido en carga. Interpola entre surfaceHover y surfaceActive."
|
||||
tags: [compose, android, ui, feedback, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Feedback.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnSkeleton(height = 20.dp)
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para esqueletos de carga antes de que lleguen los datos. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_sparkline
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnSparkline(data: List<Float>, modifier: Modifier = Modifier)"
|
||||
description: "Mini grafico de linea inline (sin ejes ni labels) para incrustar en KPIs, tablas o filas."
|
||||
tags: [compose, android, ui, charts, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Charts.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnSparkline(listOf(20f,35f,28f,42f,38f))
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para tendencias compactas dentro de otra fila/tarjeta. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
name: fn_stack
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnStack(modifier: Modifier = Modifier, gap: Dp = FnSpacing.md, content: @Composable ColumnScope.() -> Unit)"
|
||||
description: "Column con separacion uniforme entre hijos (Arrangement.spacedBy(gap)). Equivalente Compose de <Stack> de Mantine."
|
||||
tags: [compose, android, ui, layout, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Layout.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnStack(gap = FnSpacing.md) {
|
||||
FnText("Linea 1")
|
||||
FnText("Linea 2")
|
||||
}
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para apilar elementos en vertical con separacion consistente sin repetir Spacers. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_switch
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnSwitch(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, label: String? = null)"
|
||||
description: "Toggle Switch con label opcional a la derecha. Stateless."
|
||||
tags: [compose, android, ui, inputs, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Inputs.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnSwitch(checked = on, onCheckedChange = { on = it }, label = "Activado")
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para opciones booleanas de activado/desactivado. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_tabs
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnTabs(tabs: List<String>, selectedIndex: Int, onTabSelected: (Int) -> Unit, modifier: Modifier = Modifier, scrollable: Boolean = false)"
|
||||
description: "Barra de pestanas TabRow (o ScrollableTabRow si scrollable). Stateless respecto al indice activo."
|
||||
tags: [compose, android, ui, feedback, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Feedback.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnTabs(tabs = cats, selectedIndex = tab, onTabSelected = { tab = it }, scrollable = true)
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para navegar entre secciones/categorias dentro de una pantalla. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_text
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnText(text: String, modifier: Modifier = Modifier, size: FnTextSize = FnTextSize.Md, color: Color = Color.Unspecified)"
|
||||
description: "Texto de cuerpo con escala de tamanos Xs/Sm/Md/Lg/Xl via FnTypography. Color onSurface por defecto."
|
||||
tags: [compose, android, ui, display, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Display.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnText("Hola", size = FnTextSize.Lg)
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para todo texto de cuerpo; no uses Text de Material directo. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
name: fn_text_input
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnTextInput(value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, label: String? = null, placeholder: String? = null, error: String? = null)"
|
||||
description: "Campo de texto OutlinedTextField con label, placeholder y estado de error opcionales. Stateless."
|
||||
tags: [compose, android, ui, inputs, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Inputs.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
var v by remember { mutableStateOf("") }
|
||||
FnTextInput(value = v, onValueChange = { v = it }, label = "Nombre")
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para entrada de texto de una linea con validacion visual. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
name: fn_title
|
||||
kind: component
|
||||
lang: kt
|
||||
domain: ui
|
||||
version: "0.1.0"
|
||||
framework: compose
|
||||
purity: impure
|
||||
signature: "@Composable fun FnTitle(text: String, modifier: Modifier = Modifier, order: Int = 1)"
|
||||
description: "Encabezado con jerarquia order 1..6 (h1..h6 de FnTypography), peso bold/semibold."
|
||||
tags: [compose, android, ui, display, design-system]
|
||||
props: []
|
||||
emits: []
|
||||
uses_functions: []
|
||||
uses_types: []
|
||||
returns: []
|
||||
returns_optional: false
|
||||
error_type: ""
|
||||
imports: []
|
||||
output: "Composable del design system @fn_compose. Emite UI con la identidad del registry (paleta Mantine v9 dark + indigo via FnTheme/FnTokens)."
|
||||
file_path: "kotlin/functions/ui/src/main/kotlin/fn/compose/ui/Display.kt"
|
||||
---
|
||||
|
||||
## Ejemplo
|
||||
|
||||
```kotlin
|
||||
FnTitle("Seccion", order = 2)
|
||||
```
|
||||
|
||||
## Cuando usarla
|
||||
|
||||
Para titulos de seccion y headings jerarquicos. Importa desde `fn.compose.ui`; requiere estar dentro de un `FnTheme {}`.
|
||||
Reference in New Issue
Block a user