flysoft-react-ui 1.4.0 → 1.4.3

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

@@ -0,0 +1,374 @@
+<!-- Generado desde los tipos de flysoft-react-ui@1.4.3. No editar a mano. -->
+<!-- Regenerar con: npm run docs:skill -->
+
+# Providers, hooks y context types
+
+Los providers montan el contexto; los hooks lo leen. Para cada hook se incluye la forma de lo que devuelve, porque es la mitad de su API.
+
+## ThemeProvider
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `children` | `ReactNode` | **sí** | — |  |
+| `initialTheme` | `string \| Theme` |  | `"light"` |  |
+| `storageKey` | `string` |  | `"flysoft-theme"` |  |
+| `forceInitialTheme` | `boolean` |  | `false` |  |
+| `onThemeChange` | `(theme: Theme) => void` |  | — |  |
+| `density` | `"comfortable" \| "compact" \| "dense"  (Density)` |  | — | Densidad global inicial. Controla padding, tipografía y altura de los controles de toda la librería sin necesidad de pasar `compact`/`size` por componente. |
+| `densityStorageKey` | `string` |  | `"flysoft-density"` | Clave separada para persistir la densidad en localStorage. |
+| `forceInitialDensity` | `boolean` |  | `false` | Si es true, ignora el valor guardado en localStorage y fuerza `density`. |
+| `onDensityChange` | `(density: Density) => void` |  | — |  |
+
+## AppLayoutProvider
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `children` | `ReactNode` | **sí** | — |  |
+| `initialTheme` | `string \| Theme` |  | `"light"` |  |
+| `storageKey` | `string` |  | `"flysoft-theme"` |  |
+| `forceInitialTheme` | `boolean` |  | `false` |  |
+| `density` | `"comfortable" \| "compact" \| "dense"  (Density)` |  | — |  |
+| `densityStorageKey` | `string` |  | — |  |
+| `forceInitialDensity` | `boolean` |  | — |  |
+| `onDensityChange` | `(density: Density) => void` |  | — |  |
+| `initialNavbar` | `NavbarInterface` |  | — |  |
+| `initialLeftDrawer` | `LeftDrawerInterface` |  | — |  |
+| `initialContentFooter` | `ReactNode` |  | — |  |
+| `className` | `string` |  | `""` |  |
+
+## AuthProvider
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `children` | `React.ReactNode` | **sí** | — |  |
+| `getToken` | `(username: string, password: string) => Promise<AuthTokenInterface>` | **sí** | — |  |
+| `getUserData` | `(auth: AuthTokenInterface) => Promise<AuthContextUserInterface>` | **sí** | — |  |
+| `refreshToken` | `(auth: AuthTokenInterface) => Promise<AuthTokenInterface>` |  | — |  |
+| `removeToken` | `(auth: AuthTokenInterface) => Promise<void>` |  | — |  |
+| `showLog` | `boolean` |  | `false` |  |
+
+## CrudProvider\<T\>
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `children` | `ReactNode` | **sí** | — |  |
+| `getPromise` | `\| ((params?: Record<string, any>) => Promise<Array<T> \| PaginationInterface<T> \| undefined>) \| PromiseWithOptions< Array<T> \| PaginationInterface<T> \| undefined, [params?: Record<string, any>] >` |  | — |  |
+| `getItemPromise` | `\| ((id: string \| number) => Promise<T \| undefined>) \| PromiseWithOptions<T \| undefined, [id: string \| number]>` |  | — |  |
+| `postPromise` | `\| ((item: T) => Promise<T \| undefined \| null>) \| PromiseWithOptions<T \| undefined \| null, [item: T]>` |  | — |  |
+| `putPromise` | `\| ((item: T) => Promise<T \| undefined \| null>) \| PromiseWithOptions<T \| undefined \| null, [item: T]>` |  | — |  |
+| `deletePromise` | `\| ((item: T) => Promise<void>) \| PromiseWithOptions<void, [item: T]>` |  | — |  |
+| `urlParams` | `Array<string>` |  | `[]` |  |
+| `limit` | `number` |  | `15` |  |
+| `pageParam` | `string` |  | `"pagina"` |  |
+| `singleItemId` | `string \| number` |  | — |  |
+| `extraData` | `Record<string, any>` |  | — |  |
+
+## SnackbarProvider
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `children` | `ReactNode` | **sí** | — |  |
+
+## Tipos auxiliares
+
+### `AppLayoutContextType`
+
+Extiende `ThemeContextType`.
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `navbar` | `NavbarInterface \| undefined` | **sí** | — |  |
+| `leftDrawer` | `LeftDrawerInterface \| undefined` | **sí** | — |  |
+| `contentFooter` | `ReactNode \| undefined` | **sí** | — |  |
+| `className` | `string` | **sí** | — |  |
+| `setNavbar` | `Dispatch<SetStateAction<NavbarInterface \| undefined>>` | **sí** | — |  |
+| `setLeftDrawer` | `Dispatch<SetStateAction<LeftDrawerInterface \| undefined>>` | **sí** | — |  |
+| `setContentFooter` | `(node: ReactNode \| undefined) => void` | **sí** | — |  |
+| `setClassName` | `(className: string) => void` | **sí** | — |  |
+| `setNavBarLeftNode` | `(node: string \| ReactNode \| undefined) => void` | **sí** | — |  |
+| `setNavbarRightNode` | `(node: string \| ReactNode \| undefined) => void` | **sí** | — |  |
+| `isLeftDrawerOpen` | `boolean` | **sí** | — |  |
+| `openLeftDrawer` | `() => void` | **sí** | — |  |
+| `closeLeftDrawer` | `() => void` | **sí** | — |  |
+| `toggleLeftDrawer` | `() => void` | **sí** | — |  |
+
+### `AsyncRequestOptions`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `successMessage` | `string` |  | — |  |
+| `errorMessage` | `string \| ((error: any) => string)` |  | — |  |
+| `successVariant` | `\| "primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "info"  (SnackbarVariant)` |  | — |  |
+| `errorVariant` | `\| "primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "info"  (SnackbarVariant)` |  | — |  |
+| `onSuccess` | `(data: any) => void` |  | — |  |
+| `onError` | `(error: any) => void` |  | — |  |
+| `onFinally` | `() => void` |  | — |  |
+
+### `AuthContext`
+
+```ts
+AuthContext: import("D:/development/flysoft-react-ui/node_modules/@types/react/index").Context<AuthContextType>
+```
+
+### `AuthContextType`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `user` | `AuthContextUserInterface \| null` | **sí** | — |  |
+| `login` | `(username: string, password: string) => Promise<void>` | **sí** | — |  |
+| `logout` | `() => void` | **sí** | — |  |
+| `isAuthenticated` | `boolean` | **sí** | — |  |
+| `isLoading` | `boolean` | **sí** | — |  |
+
+### `AuthContextUserInterface`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `id` | `number \| string` |  | — |  |
+| `name` | `string` |  | — |  |
+| `aditionalData` | `any` |  | — |  |
+| `token` | `AuthTokenInterface` |  | — |  |
+
+### `AuthTokenInterface`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `accessToken` | `string` |  | — |  |
+| `expires` | `string` |  | — |  |
+| `tokenType` | `string` |  | — |  |
+| `refreshToken` | `string` |  | — |  |
+| `aditionalData` | `any` |  | — |  |
+
+### `Breakpoint`
+
+```ts
+type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+```
+
+### `BreakpointInfo`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `breakpoint` | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"  (Breakpoint)` | **sí** | — |  |
+| `windowSize` | `WindowSize` | **sí** | — |  |
+| `isMobile` | `boolean` | **sí** | — |  |
+| `isTablet` | `boolean` | **sí** | — |  |
+| `isDesktop` | `boolean` | **sí** | — |  |
+
+### `CrudContext`
+
+```ts
+CrudContext: import("D:/development/flysoft-react-ui/node_modules/@types/react/index").Context<CrudContextType<any> | undefined>
+```
+
+### `CrudContextType`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `list` | `Array<T> \| undefined` | **sí** | — |  |
+| `item` | `T \| undefined` | **sí** | — |  |
+| `page` | `number` | **sí** | — |  |
+| `pages` | `number` | **sí** | — |  |
+| `total` | `number` | **sí** | — |  |
+| `limit` | `number` | **sí** | — |  |
+| `isLoading` | `boolean` | **sí** | — |  |
+| `pagination` | `ReactNode` | **sí** | — |  |
+| `params` | `Record<string, any>` | **sí** | — |  |
+| `extraData` | `Record<string, any>` |  | — |  |
+| `setExtraData` | `Dispatch<SetStateAction<Record<string, any> \| undefined>>` | **sí** | — |  |
+| `fetchItems` | `{ execute: (params?: Record<string, any>) => Promise<void>; isLoading: boolean; }` | **sí** | — |  |
+| `fetchItem` | `{ execute: (params?: Record<string, any> \| string \| number) => Promise<T \| undefined>; isLoading: boolean; }` | **sí** | — |  |
+| `createItem` | `{ execute: (item: T) => Promise<T \| undefined \| null>; isLoading: boolean; }` | **sí** | — |  |
+| `updateItem` | `{ execute: (item: T) => Promise<T \| undefined \| null>; isLoading: boolean; }` | **sí** | — |  |
+| `deleteItem` | `{ execute: (item: T) => Promise<void>; isLoading: boolean; }` | **sí** | — |  |
+
+### `LeftDrawerContext`
+
+```ts
+LeftDrawerContext: import("D:/development/flysoft-react-ui/node_modules/@types/react/index").Context<LeftDrawerContextType | undefined>
+```
+
+### `LeftDrawerContextType`
+
+Comandos para controlar el drawer izquierdo del AppLayout. En resoluciones grandes el drawer está siempre visible, por lo que `closeLeftDrawer()` no produce ningún cambio visual. En móvil/tablet el drawer se muestra como panel flotante con overlay y estos comandos lo abren o cierran.
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `isLeftDrawerOpen` | `boolean` | **sí** | — | Indica si el drawer móvil está abierto |
+| `isLeftDrawerCollapsible` | `boolean` | **sí** | — | Indica si el drawer se está mostrando como panel colapsable con overlay (móvil/tablet con contenido en el drawer). En desktop es `false`. |
+| `openLeftDrawer` | `() => void` | **sí** | — | Abre el drawer |
+| `closeLeftDrawer` | `() => void` | **sí** | — | Cierra el drawer |
+| `toggleLeftDrawer` | `() => void` | **sí** | — | Alterna el estado del drawer |
+
+### `SnackbarActionsType`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `showSnackbar` | `(message: string, variant?: SnackbarVariant, options?: { duration?: number; icon?: string; iconLabel?: string; }) => void` | **sí** | — |  |
+| `removeSnackbar` | `(id: string) => void` | **sí** | — |  |
+
+### `SnackbarContextType`
+
+Extiende `SnackbarActionsType`.
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `snackbars` | `SnackbarMessage[]` | **sí** | — |  |
+
+### `SnackbarMessage`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `id` | `string` | **sí** | — |  |
+| `message` | `string` | **sí** | — |  |
+| `variant` | `\| "primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "info"  (SnackbarVariant)` | **sí** | — |  |
+| `duration` | `number` |  | — |  |
+| `icon` | `string` |  | — |  |
+| `iconLabel` | `string` |  | — |  |
+
+### `SnackbarVariant`
+
+```ts
+type SnackbarVariant = | "primary" | "secondary" | "success" | "warning" | "danger" | "info"
+```
+
+### `ThemeContextType`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `theme` | `Theme` | **sí** | — |  |
+| `setTheme` | `(theme: Theme \| string) => void` | **sí** | — |  |
+| `updateTheme` | `(updates: Partial<Theme> \| ((prev: Theme) => Theme)) => void` | **sí** | — |  |
+| `currentThemeName` | `string` | **sí** | — |  |
+| `availableThemes` | `string[]` | **sí** | — |  |
+| `resetToDefault` | `() => void` | **sí** | — |  |
+| `isDark` | `boolean` | **sí** | — |  |
+| `density` | `"comfortable" \| "compact" \| "dense"  (Density)` | **sí** | — |  |
+| `setDensity` | `(density: Density) => void` | **sí** | — |  |
+
+### `useAppLayout`
+
+```ts
+useAppLayout: () => AppLayoutContextType
+```
+
+### `useAppLayoutContext`
+
+```ts
+useAppLayoutContext: () => boolean
+```
+
+### `useAsyncRequest`
+
+```ts
+useAsyncRequest: (options?: AsyncRequestOptions) => UseAsyncRequestReturn
+```
+
+### `UseAsyncRequestReturn`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `isLoading` | `boolean` | **sí** | — |  |
+| `execute` | `<T>(requestFn: () => Promise<T>) => Promise<T \| undefined>` | **sí** | — |  |
+| `setLoading` | `(loading: boolean) => void` | **sí** | — |  |
+
+### `useBreakpoint`
+
+```ts
+useBreakpoint: () => BreakpointInfo
+```
+
+### `useCrud`
+
+```ts
+useCrud: <T>() => CrudContextType<T>
+```
+
+### `useElementScroll`
+
+```ts
+useElementScroll: (elementRef: React.RefObject<HTMLElement | null>) => { scrollY: number; scrollDirection: "up" | "down" | null; }
+```
+
+### `useEnum`
+
+```ts
+useEnum: (baseEnum: any) => { getArray: () => NameValueInterface<number>[]; getInstance: (id: number) => NameValueInterface<number> | undefined; }
+```
+
+### `useGlobalThemeStyles`
+
+Hook que aplica estilos globales del tema al body y html Útil para aplicaciones host que quieren que el tema afecte toda la página
+
+```ts
+useGlobalThemeStyles: () => void
+```
+
+### `useLeftDrawer`
+
+Hook para controlar el drawer izquierdo desde cualquier componente renderizado dentro de `AppLayout` (contenido del drawer, navbar, footer o children).
+
+```ts
+useLeftDrawer: () => LeftDrawerContextType
+```
+
+```tsx
+const { closeLeftDrawer } = useLeftDrawer();
+
+<LinkButton to="/inicio" onClick={closeLeftDrawer}>Inicio</LinkButton>
+```
+
+### `useOptionalLeftDrawer`
+
+Igual que `useLeftDrawer` pero devuelve `undefined` en lugar de lanzar error cuando el componente se usa fuera de un `AppLayout`. Útil para componentes reutilizables que pueden renderizarse dentro o fuera del layout.
+
+```ts
+useOptionalLeftDrawer: () => LeftDrawerContextType | undefined
+```
+
+### `useSnackbar`
+
+```ts
+useSnackbar: () => SnackbarActionsType
+```
+
+### `useSnackbarState`
+
+```ts
+useSnackbarState: () => SnackbarMessage[]
+```
+
+### `useTemporaryOverride`
+
+Hook para aplicar overrides temporales que se revierten automáticamente
+
+```ts
+useTemporaryOverride: (overrides: ThemeOverride, duration?: number, options?: UseThemeOverrideOptions) => { applyTemporaryOverride: () => () => void; }
+```
+
+### `useTheme`
+
+```ts
+useTheme: () => ThemeContextType
+```
+
+### `useThemeContext`
+
+```ts
+useThemeContext: () => boolean
+```
+
+### `useThemeOverride`
+
+Hook para aplicar overrides directos a variables CSS del tema Permite personalización granular sin cambiar el tema completo
+
+```ts
+useThemeOverride: (options?: UseThemeOverrideOptions) => { applyOverride: (overrides: ThemeOverride) => void; revertOverride: (keys: string[]) => void; revertAllOverrides: () => void; getCSSVariable: (key: string) => string | null; isOverrideApplied: (key: string) => boolean; appliedOverridesCount: number; }
+```
+
+### `WindowSize`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `width` | `number` | **sí** | — |  |
+| `height` | `number` | **sí** | — |  |

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

@@ -0,0 +1,260 @@
+<!-- Generado desde los tipos de flysoft-react-ui@1.4.3. No editar a mano. -->
+<!-- Regenerar con: npm run docs:skill -->
+
+# Layout, overlay y navegación
+
+Estructura de página, contenedores, modales, menús y filtros.
+
+## AppLayout
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `navbar` | `NavbarInterface` |  | — |  |
+| `leftDrawer` | `LeftDrawerInterface` |  | — |  |
+| `contentFooter` | `React.ReactNode` |  | — |  |
+| `children` | `React.ReactNode` | **sí** | — |  |
+| `className` | `string` |  | `""` |  |
+| `isLeftDrawerOpen` | `boolean` |  | — | Estado controlado del drawer móvil. Si se define, el AppLayout deja de manejar el estado internamente y hay que actualizarlo desde `onLeftDrawerOpenChange`. |
+| `onLeftDrawerOpenChange` | `(isOpen: boolean) => void` |  | — | Se dispara cada vez que el drawer móvil debe abrirse o cerrarse |
+
+## Card
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `title` | `string \| React.ReactNode` |  | — |  |
+| `subtitle` | `string \| React.ReactNode` |  | — |  |
+| `children` | `React.ReactNode` |  | — |  |
+| `className` | `string` |  | `""` |  |
+| `headerActions` | `React.ReactNode` |  | — | Acciones para el header de la tarjeta. Se muestra directamente el ReactNode proporcionado. |
+| `footer` | `React.ReactNode` |  | — |  |
+| `variant` | `"default" \| "elevated" \| "outlined"` |  | `"default"` |  |
+| `alwaysDisplayHeaderActions` | `boolean` |  | `false` | Si es true, las headerActions siempre se muestran. Si es false, solo se muestran al hacer hover (en pantallas grandes). En resoluciones md e inferiores, siempre se muestran sin importar este valor. |
+| `headerClassName` | `string` |  | `""` |  |
+| `contentClassName` | `string` |  | `""` |  |
+| `footerClassName` | `string` |  | `""` |  |
+| `compact` | `boolean` |  | `false` | Override local de densidad: cuando es true, fuerza el preset "compact" para los paddings, gaps y tipografía DE ESTA CARD (y sus hijos que consuman las variables --flysoft-density-*), independientemente de la densidad global del ThemeProvider. |
+
+## Collection
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `children` | `React.ReactNode` | **sí** | — |  |
+| `gap` | `"tight" \| "sm" \| "md" \| "lg" \| string  (CollectionGap)` |  | `"md"` | Tamaño del gap entre items. Acepta presets semánticos que respetan la densidad activa o cualquier valor CSS arbitrario (p. ej. "0.5rem", "8px"). - "tight" → 0 - "sm" → var(--flysoft-density-gap-sm) - "md" → var(--flysoft-density-gap-md) (default) - "lg" → var(--flysoft-density-gap-lg) |
+| `direction` | `"column" \| "row"` |  | `"column"` |  |
+| `wrap` | `boolean` |  | `false` |  |
+| `className` | `string` |  | `""` |  |
+| `density` | `"comfortable" \| "compact" \| "dense"  (Density)` |  | — | Override local de densidad: redefine las variables CSS --flysoft-density-* para esta Collection y sus descendientes. Útil para crear secciones densas dentro de un layout con densidad global "comfortable". |
+
+## Accordion
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `title` | `string \| React.ReactNode` | **sí** | — |  |
+| `children` | `React.ReactNode` | **sí** | — |  |
+| `icon` | `string` |  | — |  |
+| `rightNode` | `React.ReactNode` |  | — |  |
+| `defaultOpen` | `boolean` |  | `false` |  |
+| `className` | `string` |  | `""` |  |
+| `headerClassName` | `string` |  | `""` | Clases adicionales para el header (el botón que despliega/colapsa el acordeón). |
+| `contentClassName` | `string` |  | `""` | Clases adicionales para el contenedor del contenido (children). |
+| `variant` | `"default" \| "elevated" \| "outlined"` |  | `"default"` |  |
+| `onToggle` | `(isOpen: boolean) => void` |  | — |  |
+| `compact` | `boolean` |  | `false` |  |
+
+## TabsGroup
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `children` | `React.ReactNode` |  | — |  |
+| `tabs` | `Tab[]` | **sí** | — |  |
+| `paramName` | `string` |  | — |  |
+| `headerNode` | `React.ReactNode` |  | — |  |
+| `onChangeTab` | `(selectedTab: string) => void` |  | — |  |
+| `compact` | `boolean` |  | `false` |  |
+
+## TabPanel
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `children` | `React.ReactNode` |  | — |  |
+| `tabId` | `string \| number` | **sí** | — |  |
+
+## Menu\<T\>
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `options` | `T[]` | **sí** | — |  |
+| `onOptionSelected` | `(item: T) => void` | **sí** | — |  |
+| `getOptionLabel` | `(item: T) => string` |  | — | Obtiene el label que se muestra para cada opción. Por defecto usa la propiedad "label". |
+| `renderOption` | `(item: T) => React.ReactNode` |  | — | Renderizado personalizado de cada opción. Si se define, se ignora el render por defecto. |
+| `className` | `string` |  | — | Clases adicionales para el contenedor del menú. Permite sobreescribir los estilos por defecto. |
+| `style` | `React.CSSProperties` |  | — | Estilos adicionales para el contenedor del menú. |
+| `itemClassName` | `string` |  | — | Clases adicionales para cada opción del menú. |
+| `compact` | `boolean` |  | `false` |  |
+
+## DropdownMenu\<T\>
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `options` | `T[]` | **sí** | — |  |
+| `onOptionSelected` | `(item: T) => void` | **sí** | — |  |
+| `renderNode` | `React.ReactNode` |  | — |  |
+| `getOptionLabel` | `(item: T) => string` |  | — | Obtiene el label que se muestra para cada opción. Por defecto usa la propiedad "label". |
+| `renderOption` | `(item: T) => React.ReactNode` |  | — | Renderizado personalizado de cada opción. Si se define, se ignora el render por defecto. |
+| `replaceOnSingleOption` | `boolean` |  | `false` | Si es true y hay una sola opción, muestra directamente la opción en lugar del trigger. Por defecto es false. |
+| `openOnHover` | `boolean` |  | `false` | Si es true, el menú se abre al pasar el mouse por encima. Por defecto es false. |
+| `compact` | `boolean` |  | `false` |  |
+
+## DropdownPanel
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `renderNode` | `React.ReactNode` |  | — |  |
+| `children` | `React.ReactNode` | **sí** | — |  |
+| `openOnHover` | `boolean` |  | `false` | Si es true, el panel se abre al pasar el mouse por encima. Por defecto es false. |
+| `compact` | `boolean` |  | `false` |  |
+
+## Filter
+
+**Props base** (comunes a todas las variantes):
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `paramName` | `string` |  | — |  |
+| `label` | `string` |  | — |  |
+| `staticOptions` | `StaticOption[]` |  | — |  |
+| `inputWidth` | `string` |  | — |  |
+| `value` | `string` |  | — |  |
+| `onChange` | `(value: string \| undefined) => void` |  | — |  |
+| `hideEmpty` | `boolean` |  | — | Si es true, el componente solo se renderiza si tiene un valor o existe el queryParam asociado con un valor. Por defecto es false. |
+| `disabled` | `boolean` |  | — | Si es true, el componente se muestra con opacidad y no permite interacciones. Si el panel está abierto, se cerrará automáticamente. |
+| `compact` | `boolean` |  | — |  |
+| `bgColor` | `string` |  | — | Color de fondo del filtro (badge e input interno). Útil cuando el filtro se coloca sobre una superficie del mismo color que el fondo por defecto (por ej. dentro de una Card blanca). Acepta cualquier valor CSS de color o una variable del tema, p. ej. `"#f5f5f5"` o `"var(--color-bg-secondary)"`. El panel flotante mantiene el fondo por defecto (es un popover). |
+
+Después, según `filterType` — la unión es discriminada, así que el tipo exige las props de su variante:
+
+**`filterType: "text"`**
+
+Sólo las props base.
+
+**`filterType: "number"`**
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `min` | `number` |  | — |  |
+| `max` | `number` |  | — |  |
+
+**`filterType: "date"`**
+
+Sólo las props base.
+
+**`filterType: "autocomplete"`**
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `options` | `T[]` | **sí** | — |  |
+| `getOptionLabel` | `(item: T) => string` |  | — |  |
+| `getOptionValue` | `(item: T) => K` |  | — |  |
+| `renderOption` | `(item: T) => React.ReactNode` |  | — |  |
+| `noResultsText` | `string` |  | — |  |
+| `multiple` | `boolean` |  | — |  |
+
+**`filterType: "search"`**
+
+Sólo las props base.
+
+**`filterType: "searchSelect"`**
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `onSearchPromiseFn` | `(text: string) => Promise<Array<T> \| PaginationInterface<T>>` | **sí** | — |  |
+| `onSingleSearchPromiseFn` | `(value: K) => Promise<T \| undefined>` | **sí** | — |  |
+| `getOptionLabel` | `(item: T) => string` |  | — |  |
+| `getOptionValue` | `(item: T) => K` |  | — |  |
+| `renderOption` | `(item: T) => React.ReactNode` |  | — |  |
+| `dialogTitle` | `string` |  | — |  |
+| `noResultsText` | `string` |  | — |  |
+
+## FiltersDialog
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `filters` | `FilterConfig[]` | **sí** | — |  |
+
+## Dialog
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `isOpen` | `boolean` | **sí** | — |  |
+| `title` | `React.ReactNode` | **sí** | — |  |
+| `children` | `React.ReactNode` | **sí** | — |  |
+| `footer` | `React.ReactNode` |  | — |  |
+| `onClose` | `() => void` |  | — |  |
+| `closeOnOverlayClick` | `boolean` |  | `false` |  |
+| `compact` | `boolean` |  | `false` |  |
+| `bodyWidth` | `string \| number` |  | — |  |
+
+## Snackbar
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `id` | `string` | **sí** | — |  |
+| `message` | `string` | **sí** | — |  |
+| `variant` | `\| "primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "info"  (SnackbarVariant)` | **sí** | — |  |
+| `duration` | `number` |  | `3000` |  |
+| `icon` | `string` |  | — |  |
+| `iconLabel` | `string` |  | — |  |
+| `onClose` | `(id: string) => void` | **sí** | — |  |
+
+## SnackbarContainer
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `position` | `\| "top-right" \| "top-left" \| "bottom-right" \| "bottom-left" \| "top-center" \| "bottom-center"` |  | `"top-right"` |  |
+| `maxSnackbars` | `number` |  | `5` |  |
+
+## Tipos auxiliares
+
+### `FilterConfig`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `filterType` | `FilterProps["filterType"]` | **sí** | — |  |
+| `paramName` | `string` | **sí** | — |  |
+| `label` | `string` |  | — |  |
+| `staticOptions` | `FilterProps["staticOptions"]` |  | — |  |
+| `inputWidth` | `string` |  | — |  |
+| `min` | `number` |  | — |  |
+| `max` | `number` |  | — |  |
+| `options` | `any[]` |  | — |  |
+| `getOptionLabel` | `(item: any) => string` |  | — |  |
+| `getOptionValue` | `(item: any) => any` |  | — |  |
+| `renderOption` | `(item: any) => React.ReactNode` |  | — |  |
+| `noResultsText` | `string` |  | — |  |
+
+### `LeftDrawerInterface`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `headerNode` | `ReactNode` |  | — |  |
+| `contentNode` | `ReactNode` |  | — |  |
+| `footerNode` | `ReactNode` |  | — |  |
+| `className` | `string` |  | — | Clases del contenedor del drawer (header, contenido y footer). |
+| `width` | `string` |  | `"16rem"` | Ancho del drawer. Pisa cualquier clase de ancho que venga en `className`. Si no se pasa, el drawer usa la clase `w-64`. |
+
+### `NavbarInterface`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `navBarLeftNode` | `string \| ReactNode` |  | — |  |
+| `navBarRightNode` | `string \| ReactNode` |  | — |  |
+| `fullWidthNavbar` | `boolean` | **sí** | — |  |
+| `height` | `string` |  | `"64px"` | Altura del navbar. |
+| `className` | `string` |  | — | Clases del contenedor del navbar (incluye el botón). |
+
+### `Tab`
+
+| Prop | Tipo | Req. | Default | Descripción |
+|---|---|---|---|---|
+| `id` | `string \| number` | **sí** | — |  |
+| `label` | `string` | **sí** | — |  |