flysoft-react-ui 1.3.3 → 1.4.1

package/claude/skills/flysoft-ui/references/services.md

@@ -0,0 +1,194 @@
+<!-- Generado desde los tipos de flysoft-react-ui@1.4.1. No editar a mano. -->
+<!-- Regenerar con: npm run docs:skill -->
+
+# apiClient, helpers e interfaces
+
+Cliente HTTP, funciones utilitarias y las interfaces compartidas.
+
+## Tipos auxiliares
+
+### `apiClient`
+
+| Método | Devuelve | Descripción |
+|---|---|---|
+| `setTokenProvider(provider: TokenProvider \| undefined)` | `void` | Establece el proveedor de token que se usará en todas las peticiones |
+| `clearTokenProvider()` | `void` | Limpia el proveedor de token |
+| `updateDefaults(config: ApiClientConfig)` | `void` | Actualiza la configuración por defecto del cliente |
+| `get<T = unknown>(options: GetRequestOptions)` | `Promise<T>` | Realiza una petición GET |
+| `post<T = unknown>(options: PostRequestOptions)` | `Promise<T>` | Realiza una petición POST |
+| `put<T = unknown>(options: PutRequestOptions)` | `Promise<T>` | Realiza una petición PUT |
+| `patch<T = unknown>(options: PatchRequestOptions)` | `Promise<T>` | Realiza una petición PATCH |
+| `del<T = unknown>(options: DeleteRequestOptions)` | `Promise<T>` | Realiza una petición DELETE |
+| `getFile(options: FileRequestOptions)` | `Promise<FileResponse>` | Obtiene un archivo como Blob |
+| `getFileAsUrl(options: FileRequestOptions)` | `Promise<string>` | Obtiene un archivo y retorna su URL como objeto |
+| `openFile(options: FileRequestOptions)` | `Promise<void>` | Abre un archivo en una nueva ventana |
+| `downloadFile(options: FileRequestOptions)` | `Promise<void>` | Descarga un archivo |
+| `uploadFile<T = unknown>(options: UploadFileOptions)` | `Promise<T>` | Sube uno o más archivos usando FormData |
+
+**Formas de los parámetros**
+
+`ApiClientConfig`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `baseURL` | `string` |  | — |  |
+| `timeout` | `number` |  | — |  |
+| `headers` | `Record<string, string>` |  | — |  |
+
+`DeleteRequestOptions`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `url` | `string` | **sí** | — |  |
+| `headers` | `Record<string, string>` |  | — |  |
+
+`FileRequestOptions`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `url` | `string` | **sí** | — |  |
+| `headers` | `Record<string, string>` |  | — |  |
+
+`GetRequestOptions`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `url` | `string` | **sí** | — |  |
+| `params` | `Record<string, unknown>` |  | — |  |
+| `headers` | `Record<string, string>` |  | — |  |
+
+`PatchRequestOptions`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `url` | `string` | **sí** | — |  |
+| `body` | `unknown` |  | — |  |
+| `headers` | `Record<string, string>` |  | — |  |
+
+`PostRequestOptions`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `url` | `string` | **sí** | — |  |
+| `body` | `unknown` |  | — |  |
+| `headers` | `Record<string, string>` |  | — |  |
+
+`PutRequestOptions`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `url` | `string` | **sí** | — |  |
+| `body` | `unknown` |  | — |  |
+| `headers` | `Record<string, string>` |  | — |  |
+
+`UploadFileOptions`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `url` | `string` | **sí** | — |  |
+| `files` | `FileList \| File[]` | **sí** | — |  |
+| `headers` | `{ paramName?: string; [key: string]: unknown; }` |  | — |  |
+
+### `ApiClientConfig`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `baseURL` | `string` |  | — |  |
+| `timeout` | `number` |  | — |  |
+| `headers` | `Record<string, string>` |  | — |  |
+
+### `clearApiClientTokenProvider`
+
+Limpia el proveedor de token global
+
+```ts
+clearApiClientTokenProvider: () => void
+```
+
+### `createApiClient`
+
+Crea una nueva instancia del cliente de API
+
+```ts
+createApiClient: (config?: ApiClientConfig) => ApiClientService
+```
+
+### `currencyFormat`
+
+```ts
+currencyFormat: (value: number) => string
+```
+
+### `getErrorMessage`
+
+```ts
+getErrorMessage: (error: any) => string
+```
+
+### `getInitialLetters`
+
+```ts
+getInitialLetters: (text: string) => string
+```
+
+### `getQueryString`
+
+```ts
+getQueryString: (params: URLSearchParams, newParams: any) => string
+```
+
+### `nameValueArrayToObject`
+
+```ts
+nameValueArrayToObject: <T>(nameValueArray: Array<NameValueInterface<T>>) => {}
+```
+
+### `NameValueInterface`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `name` | `string` | **sí** | — |  |
+| `value` | `T` | **sí** | — |  |
+| `extras` | `any` |  | — |  |
+
+### `objectToQueryString`
+
+```ts
+objectToQueryString: (source: any) => string
+```
+
+### `PaginationInterface`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `list` | `Array<T>` | **sí** | — |  |
+| `limit` | `number` | **sí** | — |  |
+| `page` | `number` | **sí** | — |  |
+| `pages` | `number` | **sí** | — |  |
+| `total` | `number` | **sí** | — |  |
+
+### `promiseMapper`
+
+```ts
+promiseMapper: <T, K>(promise: Promise<any>, mapperFunction: (object: T) => K) => Promise<K | K[] | PaginationInterface<K>>
+```
+
+### `queryStringToObject`
+
+```ts
+queryStringToObject: (params: string) => {}
+```
+
+### `RegularExpressions`
+
+```ts
+RegularExpressions: { email: RegExp; dateString: RegExp; password: ({ minLength, lowerCaseMin, upperCaseMin, digitsMin, specialCharMin }: { minLength?: number | undefined; lowerCaseMin?: number | undefined; upperCaseMin?: number | undefined; digitsMin?: number | undefined; specialCharMin?: number | undefined; }) => RegExp; }
+```
+
+### `setApiClientTokenProvider`
+
+Establece el proveedor de token global para el cliente compartido
+
+```ts
+setApiClientTokenProvider: (provider: TokenProvider | undefined) => void
+```

package/claude/skills/flysoft-ui/references/templates.md

@@ -0,0 +1,155 @@
+<!-- Generado desde los tipos de flysoft-react-ui@1.4.1. No editar a mano. -->
+<!-- Regenerar con: npm run docs:skill -->
+
+# Templates
+
+Componentes de página pre-armados. Resuelven un caso completo; si necesitás desviarte del caso, componé con los de `layout` y `forms` en vez de peleárselo.
+
+## LoginForm
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `onSubmit` | `(data: { email: string; password: string }) => void` |  | — |  |
+| `loading` | `boolean` |  | `false` |  |
+| `error` | `string` |  | — |  |
+| `className` | `string` |  | `""` |  |
+| `compact` | `boolean` |  | `false` |  |
+
+## RegistrationForm
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `onSubmit` | `(data: { firstName: string; lastName: string; email: string; password: string; confirmPassword: string; }) => void` |  | — |  |
+| `loading` | `boolean` |  | `false` |  |
+| `error` | `string` |  | — |  |
+| `className` | `string` |  | `""` |  |
+| `compact` | `boolean` |  | `false` |  |
+
+## ContactForm
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `onSubmit` | `(data: { name: string; email: string; subject: string; message: string; }) => void` |  | — |  |
+| `loading` | `boolean` |  | `false` |  |
+| `success` | `boolean` |  | `false` |  |
+| `error` | `string` |  | — |  |
+| `className` | `string` |  | `""` |  |
+| `compact` | `boolean` |  | `false` |  |
+
+## DashboardLayout
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `title` | `string` | **sí** | — |  |
+| `subtitle` | `string` |  | — |  |
+| `stats` | `DashboardStat[]` |  | `[]` |  |
+| `actions` | `React.ReactNode` |  | — |  |
+| `children` | `React.ReactNode` | **sí** | — |  |
+| `className` | `string` |  | `""` |  |
+| `compact` | `boolean` |  | `false` |  |
+
+## SidebarLayout
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `title` | `string` | **sí** | — |  |
+| `menuItems` | `MenuItem[]` | **sí** | — |  |
+| `user` | `User` | **sí** | — |  |
+| `children` | `React.ReactNode` | **sí** | — |  |
+| `className` | `string` |  | `""` |  |
+| `onLogout` | `() => void` |  | — |  |
+| `compact` | `boolean` |  | `false` |  |
+
+## FormPattern
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `title` | `string` | **sí** | — |  |
+| `subtitle` | `string` |  | — |  |
+| `fields` | `FormField[]` | **sí** | — |  |
+| `onSubmit` | `(data: Record<string, string>) => void` | **sí** | — |  |
+| `submitText` | `string` |  | `"Enviar"` |  |
+| `submitIcon` | `string` |  | `"fa-paper-plane"` |  |
+| `loading` | `boolean` |  | `false` |  |
+| `error` | `string` |  | — |  |
+| `success` | `boolean` |  | `false` |  |
+| `className` | `string` |  | `""` |  |
+| `gridCols` | `1 \| 2` |  | `1` |  |
+| `compact` | `boolean` |  | `false` |  |
+
+## ListPattern\<T\>
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `title` | `string` | **sí** | — | Título de la card |
+| `subtitle` | `string` |  | — | Subtítulo opcional |
+| `columns` | `DataTableColumn<T>[]` | **sí** | — | Columnas de la DataTable |
+| `rows` | `T[]` | **sí** | — | Filas de datos |
+| `addButtonText` | `string` |  | — | Texto del botón de agregar. Si no se pasa, no se muestra el botón |
+| `addButtonIcon` | `string` |  | `"fa-plus"` | Icono del botón de agregar |
+| `onAdd` | `() => void` |  | — | Callback al presionar el botón de agregar |
+| `searchParamName` | `string` |  | — | Nombre del query parameter para el buscador. Si no se pasa, no se muestra el buscador |
+| `searchLabel` | `string` |  | `"Buscar"` | Label del buscador |
+| `filtersNode` | `React.ReactNode` |  | — | Nodo adicional para agregar filtros extra junto al buscador |
+| `page` | `number` |  | — | Página actual (para el paginador) |
+| `pages` | `number` |  | — | Total de páginas |
+| `total` | `number` |  | — | Total de elementos |
+| `pageParamName` | `string` |  | — | Nombre del query parameter para la página |
+| `isLoading` | `boolean` |  | `false` | Indica si los datos están cargando |
+| `loadingRows` | `number` |  | `10` | Cantidad de filas skeleton mientras carga |
+| `maxRows` | `number` |  | — | Máximo de filas visibles antes de activar scroll |
+| `compact` | `boolean` |  | `false` | Modo compacto: reduce paddings y usa size="sm" en componentes internos |
+| `className` | `string` |  | `""` | Clases CSS adicionales para la Card |
+| `headerActionsNode` | `React.ReactNode` |  | — | Nodo adicional en el header junto al botón de agregar |
+| `locale` | `string` |  | — | Locale para formateo de números en la DataTable |
+| `rowClassName` | `(row: T) => string` |  | — | Función para aplicar clases CSS a una fila |
+
+## Tipos auxiliares
+
+### `DashboardStat`
+
+Template de Layout de Dashboard Ejemplo de uso: ```tsx import { DashboardLayout } from "flysoft-react-ui/templates/layouts/DashboardLayout"; function App() { return ( <DashboardLayout title="Mi Dashboard" stats={stats} actions={<Button>Nueva Acción</Button>} > <div>Contenido del dashboard</div> </DashboardLayout> ); } ```
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `title` | `string` | **sí** | — |  |
+| `value` | `string \| number` | **sí** | — |  |
+| `change` | `string` |  | — |  |
+| `changeType` | `"positive" \| "negative" \| "neutral"` |  | — |  |
+| `icon` | `string` |  | — |  |
+
+### `FormField`
+
+Template de Patrón de Formulario Reutilizable Este patrón proporciona una estructura base para cualquier formulario con validación, estados de carga y manejo de errores. Ejemplo de uso: ```tsx import { FormPattern } from "flysoft-react-ui/templates/patterns/FormPattern"; function MyForm() { const fields = [ { name: "name", label: "Nombre", type: "text", icon: "fa-user", required: true }, { name: "email", label: "Email", type: "email", icon: "fa-envelope", required: true }, ]; return ( <FormPattern title="Mi Formulario" fields={fields} onSubmit={handleSubmit} submitText="Guardar" /> ); } ```
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `name` | `string` | **sí** | — |  |
+| `label` | `string` | **sí** | — |  |
+| `type` | `string` |  | — |  |
+| `placeholder` | `string` |  | — |  |
+| `icon` | `string` |  | — |  |
+| `required` | `boolean` |  | — |  |
+| `validation` | `(value: string) => string \| undefined` |  | — |  |
+| `multiline` | `boolean` |  | — |  |
+| `rows` | `number` |  | — |  |
+
+### `MenuItem`
+
+Template de Layout con Sidebar Ejemplo de uso: ```tsx import { SidebarLayout } from "flysoft-react-ui/templates/layouts/SidebarLayout"; function App() { const menuItems = [ { label: "Dashboard", icon: "fa-home", href: "/" }, { label: "Usuarios", icon: "fa-users", href: "/users" }, ]; return ( <SidebarLayout title="Mi App" menuItems={menuItems} user={{ name: "Juan Pérez", avatar: "fa-user" }} > <div>Contenido principal</div> </SidebarLayout> ); } ```
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `label` | `string` | **sí** | — |  |
+| `icon` | `string` | **sí** | — |  |
+| `href` | `string` | **sí** | — |  |
+| `badge` | `string \| number` |  | — |  |
+| `children` | `MenuItem[]` |  | — |  |
+
+### `User`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `name` | `string` | **sí** | — |  |
+| `email` | `string` |  | — |  |
+| `avatar` | `string` |  | — |  |

package/claude/skills/flysoft-ui/references/theming.md

@@ -0,0 +1,256 @@
+<!-- Generado desde los tipos de flysoft-react-ui@1.4.1. No editar a mano. -->
+<!-- Regenerar con: npm run docs:skill -->
+
+# Tema, densidad y variables CSS
+
+Los nombres de las variables CSS salen del bloque `@theme` de `src/index.css` y de los mapas de tokens de `src/contexts/`, no de los tipos.
+
+## Cómo leer las variables
+
+Hay dos namespaces y no son intercambiables:
+
+- **`--flysoft-*`** — lo que `ThemeProvider` escribe en `document.documentElement` en runtime cuando cambiás de tema o de densidad.
+- **`--color-*`, `--shadow-*`, `--radius-*`, `--spacing-*`, `--font-*`** — los tokens de Tailwind v4 declarados en el `@theme`, cada uno apuntando a su `--flysoft-*`. **Estos son los que se usan en `className`**, por ejemplo `text-[var(--color-text-primary)]`.
+
+## Tokens de Tailwind (66)
+
+| Token | Apunta a |
+|---|---|
+| `--font-default` | `var(--flysoft-font-default)` |
+| `--font-size-default` | `var(--flysoft-font-size-default)` |
+| `--font-color-default` | `var(--flysoft-font-color-default)` |
+| `--color-primary` | `var(--flysoft-primary)` |
+| `--color-primary-contrast` | `var(--flysoft-primary-contrast)` |
+| `--color-primary-dark` | `var(--flysoft-primary-dark)` |
+| `--color-primary-light` | `var(--flysoft-primary-light)` |
+| `--color-primary-soft` | `var(--flysoft-primary-soft)` |
+| `--color-secondary` | `var(--flysoft-secondary)` |
+| `--color-secondary-contrast` | `var(--flysoft-secondary-contrast)` |
+| `--color-secondary-dark` | `var(--flysoft-secondary-dark)` |
+| `--color-secondary-light` | `var(--flysoft-secondary-light)` |
+| `--color-success` | `var(--flysoft-success)` |
+| `--color-success-contrast` | `var(--flysoft-success-contrast)` |
+| `--color-success-dark` | `var(--flysoft-success-dark)` |
+| `--color-success-light` | `var(--flysoft-success-light)` |
+| `--color-warning` | `var(--flysoft-warning)` |
+| `--color-warning-contrast` | `var(--flysoft-warning-contrast)` |
+| `--color-warning-dark` | `var(--flysoft-warning-dark)` |
+| `--color-warning-light` | `var(--flysoft-warning-light)` |
+| `--color-danger` | `var(--flysoft-danger)` |
+| `--color-danger-contrast` | `var(--flysoft-danger-contrast)` |
+| `--color-danger-dark` | `var(--flysoft-danger-dark)` |
+| `--color-danger-light` | `var(--flysoft-danger-light)` |
+| `--color-info` | `var(--flysoft-info)` |
+| `--color-info-contrast` | `var(--flysoft-info-contrast)` |
+| `--color-info-dark` | `var(--flysoft-info-dark)` |
+| `--color-info-light` | `var(--flysoft-info-light)` |
+| `--color-accent` | `var(--flysoft-accent)` |
+| `--color-accent-contrast` | `var(--flysoft-accent-contrast)` |
+| `--color-accent-dark` | `var(--flysoft-accent-dark)` |
+| `--color-accent-light` | `var(--flysoft-accent-light)` |
+| `--color-gray-50` | `var(--flysoft-gray50)` |
+| `--color-gray-100` | `var(--flysoft-gray100)` |
+| `--color-gray-200` | `var(--flysoft-gray200)` |
+| `--color-gray-300` | `var(--flysoft-gray300)` |
+| `--color-gray-400` | `var(--flysoft-gray400)` |
+| `--color-gray-500` | `var(--flysoft-gray500)` |
+| `--color-gray-600` | `var(--flysoft-gray600)` |
+| `--color-gray-700` | `var(--flysoft-gray700)` |
+| `--color-gray-800` | `var(--flysoft-gray800)` |
+| `--color-gray-900` | `var(--flysoft-gray900)` |
+| `--color-border-default` | `var(--flysoft-border-default)` |
+| `--color-border-focus` | `var(--flysoft-border-focus)` |
+| `--color-border-error` | `var(--flysoft-border-error)` |
+| `--color-bg-default` | `var(--flysoft-bg-default)` |
+| `--color-bg-secondary` | `var(--flysoft-bg-secondary)` |
+| `--color-bg-disabled` | `var(--flysoft-bg-disabled)` |
+| `--color-bg-hover` | `var(--flysoft-bg-hover)` |
+| `--color-text-primary` | `var(--flysoft-text-primary)` |
+| `--color-text-secondary` | `var(--flysoft-text-secondary)` |
+| `--color-text-muted` | `var(--flysoft-text-muted)` |
+| `--color-text-disabled` | `var(--flysoft-text-disabled)` |
+| `--shadow-sm` | `var(--flysoft-shadow-sm)` |
+| `--shadow-md` | `var(--flysoft-shadow-md)` |
+| `--shadow-lg` | `var(--flysoft-shadow-lg)` |
+| `--shadow-xl` | `var(--flysoft-shadow-xl)` |
+| `--radius-sm` | `var(--flysoft-radius-sm)` |
+| `--radius-md` | `var(--flysoft-radius-md)` |
+| `--radius-lg` | `var(--flysoft-radius-lg)` |
+| `--radius-full` | `var(--flysoft-radius-full)` |
+| `--spacing-xs` | `var(--flysoft-spacing-xs)` |
+| `--spacing-sm` | `var(--flysoft-spacing-sm)` |
+| `--spacing-md` | `var(--flysoft-spacing-md)` |
+| `--spacing-lg` | `var(--flysoft-spacing-lg)` |
+| `--spacing-xl` | `var(--flysoft-spacing-xl)` |
+
+## Variables de densidad
+
+Las escribe `ThemeProvider` según la densidad activa. No se usan directo en `className` salvo que estés construyendo un componente nuevo que deba escalar.
+
+- `--flysoft-density-card-gap`
+- `--flysoft-density-container-padding-x`
+- `--flysoft-density-container-padding-y`
+- `--flysoft-density-control-height-lg`
+- `--flysoft-density-control-height-md`
+- `--flysoft-density-control-height-sm`
+- `--flysoft-density-control-indicator-lg`
+- `--flysoft-density-control-indicator-md`
+- `--flysoft-density-control-indicator-sm`
+- `--flysoft-density-datatable-header`
+- `--flysoft-density-datatable-row`
+- `--flysoft-density-font-base`
+- `--flysoft-density-font-lg`
+- `--flysoft-density-font-sm`
+- `--flysoft-density-font-xl`
+- `--flysoft-density-font-xs`
+- `--flysoft-density-gap-lg`
+- `--flysoft-density-gap-md`
+- `--flysoft-density-gap-sm`
+- `--flysoft-density-input-radius`
+- `--flysoft-density-padding-x-lg`
+- `--flysoft-density-padding-x-md`
+- `--flysoft-density-padding-x-sm`
+- `--flysoft-density-padding-y-lg`
+- `--flysoft-density-padding-y-md`
+- `--flysoft-density-padding-y-sm`
+
+Además `ThemeProvider` escribe estos marcadores de identidad, útiles para escribir selectores CSS condicionales: `--flysoft-density-name`, `--flysoft-theme-name`.
+
+## Valores de cada densidad
+
+| Token | `comfortable` | `compact` | `dense` |
+|---|---|---|---|
+| `paddingX.sm` | `0.75rem` | `0.5rem` | `0.375rem` |
+| `paddingX.md` | `1rem` | `0.75rem` | `0.5rem` |
+| `paddingX.lg` | `1.5rem` | `1rem` | `0.75rem` |
+| `paddingY.sm` | `0.375rem` | `0.25rem` | `0.125rem` |
+| `paddingY.md` | `0.5rem` | `0.375rem` | `0.25rem` |
+| `paddingY.lg` | `0.75rem` | `0.5rem` | `0.375rem` |
+| `containerPaddingX` | `1.5rem` | `1rem` | `0.75rem` |
+| `containerPaddingY` | `1rem` | `0.5rem` | `0.375rem` |
+| `gap.sm` | `0.5rem` | `0.375rem` | `0.25rem` |
+| `gap.md` | `1rem` | `0.75rem` | `0.5rem` |
+| `gap.lg` | `1.5rem` | `1rem` | `0.75rem` |
+| `fontXs` | `0.75rem` | `0.6875rem` | `0.625rem` |
+| `fontSm` | `0.875rem` | `0.8125rem` | `0.75rem` |
+| `fontBase` | `1rem` | `0.875rem` | `0.8125rem` |
+| `fontLg` | `1.125rem` | `1rem` | `0.9375rem` |
+| `fontXl` | `1.25rem` | `1.125rem` | `1rem` |
+| `controlHeight.sm` | `2rem` | `1.75rem` | `1.5rem` |
+| `controlHeight.md` | `2.5rem` | `2.125rem` | `1.75rem` |
+| `controlHeight.lg` | `3rem` | `2.5rem` | `2.125rem` |
+| `controlIndicator.sm` | `1rem` | `0.875rem` | `0.75rem` |
+| `controlIndicator.md` | `1.25rem` | `1.125rem` | `1rem` |
+| `controlIndicator.lg` | `1.5rem` | `1.375rem` | `1.25rem` |
+| `inputRadius` | `0.5rem` | `0.375rem` | `0.25rem` |
+| `dataTableRow` | `3rem` | `2.25rem` | `1.75rem` |
+| `dataTableHeader` | `3rem` | `2.25rem` | `1.75rem` |
+| `cardGap` | `1rem` | `0.75rem` | `0.5rem` |
+
+## Tipos
+
+### `blueTheme`
+
+```ts
+blueTheme: Theme
+```
+
+### `comfortableDensity`
+
+```ts
+comfortableDensity: DensityTokens
+```
+
+### `compactDensity`
+
+```ts
+compactDensity: DensityTokens
+```
+
+### `darkTheme`
+
+```ts
+darkTheme: Theme
+```
+
+### `defaultTheme`
+
+```ts
+defaultTheme: Theme
+```
+
+### `denseDensity`
+
+```ts
+denseDensity: DensityTokens
+```
+
+### `Density`
+
+```ts
+type Density = "comfortable" | "compact" | "dense"
+```
+
+### `densityPresets`
+
+```ts
+densityPresets: Record<"comfortable" | "compact" | "dense", DensityTokens>
+```
+
+### `DensityTokens`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `paddingX` | `{ sm: string; md: string; lg: string }` | **sí** | — |  |
+| `paddingY` | `{ sm: string; md: string; lg: string }` | **sí** | — |  |
+| `containerPaddingX` | `string` | **sí** | — | Padding horizontal para containers (Card, Dialog, Filter panel). |
+| `containerPaddingY` | `string` | **sí** | — | Padding vertical para containers (Card header/footer/content). |
+| `gap` | `{ sm: string; md: string; lg: string }` | **sí** | — |  |
+| `fontXs` | `string` | **sí** | — |  |
+| `fontSm` | `string` | **sí** | — |  |
+| `fontBase` | `string` | **sí** | — |  |
+| `fontLg` | `string` | **sí** | — |  |
+| `fontXl` | `string` | **sí** | — |  |
+| `controlHeight` | `{ sm: string; md: string; lg: string }` | **sí** | — |  |
+| `controlIndicator` | `{ sm: string; md: string; lg: string }` | **sí** | — | Tamaño (ancho/alto) del indicator de Checkbox (cuadrado) y RadioButton (círculo). Se reduce en compact/dense para no abrumar visualmente cuando el resto de la UI es más chica. |
+| `inputRadius` | `string` | **sí** | — | Border-radius para inputs, badges del filter, botones — escala con densidad. |
+| `dataTableRow` | `string` | **sí** | — |  |
+| `dataTableHeader` | `string` | **sí** | — |  |
+| `cardGap` | `string` | **sí** | — |  |
+
+### `greenTheme`
+
+```ts
+greenTheme: Theme
+```
+
+### `lightTheme`
+
+```ts
+lightTheme: Theme
+```
+
+### `Theme`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `name` | `string` | **sí** | — |  |
+| `colors` | `{ primary: string; primaryContrast: string; primaryDark: string; primaryLight: string; secondary: string; secondaryContrast: string; secondaryDark: string; secondaryLight: string; success: string; successContrast: string; successDark: string; successLight: string; warning: string; warningContrast: string; warningDark: string; warningLight: string; danger: string; dangerContrast: string; dangerDark: string; dangerLight: string; info: string; infoContrast: string; infoDark: string; infoLight: string; accent: string; accentContrast: string; accentDark: string; accentLight: string; gray50: string; gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; gray800: string; gray900: string; borderDefault: string; borderFocus: string; borderError: string; bgDefault: string; bgSecondary: string; bgDisabled: string; textPrimary: string; textSecondary: string; textMuted: string; textDisabled: string; }` | **sí** | — |  |
+| `shadows` | `{ sm: string; md: string; lg: string; }` | **sí** | — |  |
+| `radius` | `{ sm: string; md: string; lg: string; full: string; }` | **sí** | — |  |
+| `spacing` | `{ xs: string; sm: string; md: string; lg: string; xl: string; }` | **sí** | — |  |
+| `fonts` | `{ default: string; sizeDefault: string; colorDefault: string; }` | **sí** | — |  |
+| `density` | `"comfortable" \| "compact" \| "dense"  (Density)` |  | — |  |
+| `densityTokens` | `DensityTokens` |  | — |  |
+
+### `ThemeOverride`
+
+```ts
+interface ThemeOverride { [key: string]: string | number; }
+```
+
+### `themes`
+
+```ts
+themes: Record<string, Theme>
+```

package/dist/components/layout/Collection.d.ts

@@ -10,6 +10,8 @@ export interface CollectionProps {
      * - "sm"    → var(--flysoft-density-gap-sm)
      * - "md"    → var(--flysoft-density-gap-md) (default)
      * - "lg"    → var(--flysoft-density-gap-lg)
+     *
+     * @default "md"
      */
     gap?: CollectionGap;
     direction?: "column" | "row";

package/dist/components/layout/Collection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Collection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAOpD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA0CD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuChD,CAAC"}
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Collection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAOpD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA0CD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuChD,CAAC"}

package/dist/contexts/AppLayoutContext.d.ts

@@ -4,14 +4,27 @@ export interface NavbarInterface {
     navBarLeftNode?: string | ReactNode;
     navBarRightNode?: string | ReactNode;
     fullWidthNavbar: boolean;
+    /**
+     * Altura del navbar.
+     *
+     * @default "64px"
+     */
     height?: string;
+    /** Clases del contenedor del navbar (incluye el botón). */
     className?: string;
 }
 export interface LeftDrawerInterface {
     headerNode?: ReactNode;
     contentNode?: ReactNode;
     footerNode?: ReactNode;
+    /** Clases del contenedor del drawer (header, contenido y footer). */
     className?: string;
+    /**
+     * Ancho del drawer. Pisa cualquier clase de ancho que venga en `className`.
+     * Si no se pasa, el drawer usa la clase `w-64`.
+     *
+     * @default "16rem"
+     */
     width?: string;
 }
 export interface AppLayoutContextType extends ThemeContextType {

package/dist/contexts/AppLayoutContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppLayoutContext.d.ts","sourceRoot":"","sources":["../../src/contexts/AppLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EAEd,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKhE,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAE5D,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C,aAAa,EAAE,SAAS,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC;IAGlB,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC;IACjE,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC,CAAC;IACzE,gBAAgB,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAClE,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAGnE,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAMD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,SAAS,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7C,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8JD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqC9D,CAAC;AAIF,eAAO,MAAM,YAAY,QAAO,oBAM/B,CAAC;AAIF,eAAO,MAAM,mBAAmB,eAG/B,CAAC"}
+{"version":3,"file":"AppLayoutContext.d.ts","sourceRoot":"","sources":["../../src/contexts/AppLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EAEd,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKhE,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAE5D,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C,aAAa,EAAE,SAAS,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC;IAGlB,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC;IACjE,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC,CAAC;IACzE,gBAAgB,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAClE,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAGnE,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAMD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,SAAS,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7C,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8JD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqC9D,CAAC;AAIF,eAAO,MAAM,YAAY,QAAO,oBAM/B,CAAC;AAIF,eAAO,MAAM,mBAAmB,eAG/B,CAAC"}