flysoft-react-ui 0.5.0 → 0.5.2

package/dist/docs/DataTableDocs.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { useState } from "react";
 import { Card, DataTable, Button, Badge } from "../index";
 const DataTableDocs = () => {
+    const [isLoading, setIsLoading] = useState(false);
     const allProducts = [
         {
             id: 1,
@@ -235,6 +236,9 @@ const DataTableDocs = () => {
             ],
         },
     ];
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DataTable - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla b\u00E1sica" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo b\u00E1sico de una tabla con columnas simples usando nombres de propiedades." }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla completa con tipos de datos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Tabla con diferentes tipos de datos: currency, numeric y date. Las columnas se formatean autom\u00E1ticamente seg\u00FAn su tipo." }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con contenido personalizado y acciones" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Ejemplo con valores personalizados usando funciones, tooltips y componentes React como Badges. La columna de acciones usa la propiedad ", _jsx("code", { children: "actions" }), " que muestra un DropdownMenu con las acciones disponibles para cada fila. Cuando hay una sola acci\u00F3n (como en la columna \"Ver\"), se muestra directamente gracias a", " ", _jsx("code", { children: "replaceOnSingleOption" }), ", sin necesidad de abrir un men\u00FA."] }), _jsx(Card, { children: _jsx(DataTable, { columns: customColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con headers personalizados y acciones en header" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Los headers pueden ser ReactNode, permitiendo incluir iconos u otros componentes personalizados. Tambi\u00E9n puedes usar", " ", _jsx("code", { children: "headerActions" }), " para agregar un DropdownMenu con acciones en el header de la columna."] }), _jsx(Card, { children: _jsx(DataTable, { columns: headerCustomColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con scroll limitado (maxRows) y footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "maxRows" }), " puedes limitar el n\u00FAmero de filas visibles. Si hay m\u00E1s filas que el m\u00E1ximo, la tabla mostrar\u00E1 scroll solo en las filas mientras el header y el footer permanecen fijos. El footer se muestra usando la propiedad", " ", _jsx("code", { children: "footer" }), " en las columnas."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: allProducts, maxRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con locale personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "locale" }), " puedes cambiar el formato de los n\u00FAmeros (separador de miles y decimales). Por defecto usa", " ", _jsx("code", { children: "'es-AR'" }), ". En este ejemplo se usa ", _jsx("code", { children: "'en-US'" }), " ", "que formatea los n\u00FAmeros con coma como separador de miles y punto como separador decimal."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, locale: "en-US" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Tipos de datos:" }), " Soporta text, numeric, currency y date con formateo autom\u00E1tico"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones por fila:" }), " Usa la propiedad", " ", _jsx("code", { children: "actions" }), " para mostrar un DropdownMenu con acciones espec\u00EDficas para cada fila"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones en header:" }), " Usa la propiedad", " ", _jsx("code", { children: "headerActions" }), " para mostrar un DropdownMenu con acciones en el header de la columna"] }), _jsxs("li", { children: [_jsx("strong", { children: "Alineaci\u00F3n:" }), " Cada columna puede tener su propia alineaci\u00F3n (left, right, center)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Ancho personalizado:" }), " Puedes definir el ancho de cada columna usando la propiedad width"] }), _jsxs("li", { children: [_jsx("strong", { children: "Valores personalizados:" }), " El value puede ser una funci\u00F3n que recibe la fila completa y retorna ReactNode"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tooltips:" }), " Soporte para tooltips personalizados por celda"] }), _jsxs("li", { children: [_jsx("strong", { children: "Headers personalizados:" }), " Los headers pueden ser ReactNode para incluir iconos o componentes"] }), _jsxs("li", { children: [_jsx("strong", { children: "Hover effect:" }), " Las filas tienen un efecto hover para mejor UX"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " La tabla tiene scroll horizontal autom\u00E1tico en pantallas peque\u00F1as"] }), _jsxs("li", { children: [_jsx("strong", { children: "Scroll limitado:" }), " Con maxRows puedes limitar el n\u00FAmero de filas visibles, manteniendo el header fijo y permitiendo scroll solo en las filas"] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "columns" }) }), _jsx("td", { className: "p-3 text-sm", children: "DataTableColumn<T>[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de columnas que define la estructura de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rows" }) }), _jsx("td", { className: "p-3 text-sm", children: "T[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de objetos que representan las filas de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "className" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para el contenedor de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "maxRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsx("td", { className: "p-3 text-sm", children: "M\u00E1ximo n\u00FAmero de filas visibles. Si hay m\u00E1s filas, se activa scroll vertical manteniendo el header fijo" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "locale" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsxs("td", { className: "p-3 text-sm", children: ["Locale para formateo de n\u00FAmeros (currency y numeric). Por defecto es ", _jsx("code", { children: "'es-AR'" }), ". Ejemplos:", " ", _jsx("code", { children: "'en-US'" }), ", ", _jsx("code", { children: "'es-ES'" }), ",", " ", _jsx("code", { children: "'de-DE'" })] })] })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "DataTableColumn Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "align" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"left\" | \"right\" | \"center\"" }), _jsx("td", { className: "p-3 text-sm", children: "Alineaci\u00F3n del contenido de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "width" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Ancho de la columna (ej: \"100px\", \"20%\")" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "header" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Texto o componente React para el header de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "value" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | number | ((row: T) => string | ReactNode)" }), _jsx("td", { className: "p-3 text-sm", children: "Nombre de la propiedad del objeto, valor directo, o funci\u00F3n que retorna el valor a mostrar" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "tooltip" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna el tooltip a mostrar al hacer hover sobre la celda" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "type" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"text\" | \"numeric\" | \"currency\" | \"date\"" }), _jsx("td", { className: "p-3 text-sm", children: "Tipo de dato que determina el formateo autom\u00E1tico" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "actions" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu para cada fila. Las acciones deben manejar sus propios eventos onClick." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerActions" }) }), _jsx("td", { className: "p-3 text-sm", children: "() => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu en el header de la columna. Las acciones deben manejar sus propios eventos onClick." })] })] })] }) })] })] }) }) }));
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DataTable - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla b\u00E1sica" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo b\u00E1sico de una tabla con columnas simples usando nombres de propiedades." }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla completa con tipos de datos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Tabla con diferentes tipos de datos: currency, numeric y date. Las columnas se formatean autom\u00E1ticamente seg\u00FAn su tipo." }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con contenido personalizado y acciones" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Ejemplo con valores personalizados usando funciones, tooltips y componentes React como Badges. La columna de acciones usa la propiedad ", _jsx("code", { children: "actions" }), " que muestra un DropdownMenu con las acciones disponibles para cada fila. Cuando hay una sola acci\u00F3n (como en la columna \"Ver\"), se muestra directamente gracias a", " ", _jsx("code", { children: "replaceOnSingleOption" }), ", sin necesidad de abrir un men\u00FA."] }), _jsx(Card, { children: _jsx(DataTable, { columns: customColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con headers personalizados y acciones en header" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Los headers pueden ser ReactNode, permitiendo incluir iconos u otros componentes personalizados. Tambi\u00E9n puedes usar", " ", _jsx("code", { children: "headerActions" }), " para agregar un DropdownMenu con acciones en el header de la columna."] }), _jsx(Card, { children: _jsx(DataTable, { columns: headerCustomColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con scroll limitado (maxRows) y footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "maxRows" }), " puedes limitar el n\u00FAmero de filas visibles. Si hay m\u00E1s filas que el m\u00E1ximo, la tabla mostrar\u00E1 scroll solo en las filas mientras el header y el footer permanecen fijos. El footer se muestra usando la propiedad", " ", _jsx("code", { children: "footer" }), " en las columnas."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: allProducts, maxRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con locale personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "locale" }), " puedes cambiar el formato de los n\u00FAmeros (separador de miles y decimales). Por defecto usa", " ", _jsx("code", { children: "'es-AR'" }), ". En este ejemplo se usa ", _jsx("code", { children: "'en-US'" }), " ", "que formatea los n\u00FAmeros con coma como separador de miles y punto como separador decimal."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, locale: "en-US" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estado de carga (Loading)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando las props ", _jsx("code", { children: "isLoading" }), " y ", _jsx("code", { children: "loadingRows" }), " ", "puedes mostrar un estado de carga con skeleton loaders. Cuando", " ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ", la tabla muestra las columnas pero reemplaza las filas de datos con filas skeleton que simulan el contenido. El n\u00FAmero de filas skeleton se controla con", " ", _jsx("code", { children: "loadingRows" }), " (por defecto 5)."] }), _jsx("div", { className: "mb-4", children: _jsx(Button, { variant: "primary", icon: "fa-sync-alt", onClick: () => {
+                                        setIsLoading(true);
+                                        setTimeout(() => setIsLoading(false), 3000);
+                                    }, disabled: isLoading, children: isLoading ? "Cargando..." : "Simular carga" }) }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, isLoading: isLoading, loadingRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Tipos de datos:" }), " Soporta text, numeric, currency y date con formateo autom\u00E1tico"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones por fila:" }), " Usa la propiedad", " ", _jsx("code", { children: "actions" }), " para mostrar un DropdownMenu con acciones espec\u00EDficas para cada fila"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones en header:" }), " Usa la propiedad", " ", _jsx("code", { children: "headerActions" }), " para mostrar un DropdownMenu con acciones en el header de la columna"] }), _jsxs("li", { children: [_jsx("strong", { children: "Alineaci\u00F3n:" }), " Cada columna puede tener su propia alineaci\u00F3n (left, right, center)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Ancho personalizado:" }), " Puedes definir el ancho de cada columna usando la propiedad width"] }), _jsxs("li", { children: [_jsx("strong", { children: "Valores personalizados:" }), " El value puede ser una funci\u00F3n que recibe la fila completa y retorna ReactNode"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tooltips:" }), " Soporte para tooltips personalizados por celda"] }), _jsxs("li", { children: [_jsx("strong", { children: "Headers personalizados:" }), " Los headers pueden ser ReactNode para incluir iconos o componentes"] }), _jsxs("li", { children: [_jsx("strong", { children: "Hover effect:" }), " Las filas tienen un efecto hover para mejor UX"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " La tabla tiene scroll horizontal autom\u00E1tico en pantallas peque\u00F1as"] }), _jsxs("li", { children: [_jsx("strong", { children: "Scroll limitado:" }), " Con maxRows puedes limitar el n\u00FAmero de filas visibles, manteniendo el header fijo y permitiendo scroll solo en las filas"] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "columns" }) }), _jsx("td", { className: "p-3 text-sm", children: "DataTableColumn<T>[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de columnas que define la estructura de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rows" }) }), _jsx("td", { className: "p-3 text-sm", children: "T[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de objetos que representan las filas de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "className" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para el contenedor de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "maxRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsx("td", { className: "p-3 text-sm", children: "M\u00E1ximo n\u00FAmero de filas visibles. Si hay m\u00E1s filas, se activa scroll vertical manteniendo el header fijo" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "locale" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsxs("td", { className: "p-3 text-sm", children: ["Locale para formateo de n\u00FAmeros (currency y numeric). Por defecto es ", _jsx("code", { children: "'es-AR'" }), ". Ejemplos:", " ", _jsx("code", { children: "'en-US'" }), ", ", _jsx("code", { children: "'es-ES'" }), ",", " ", _jsx("code", { children: "'de-DE'" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "isLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsxs("td", { className: "p-3 text-sm", children: ["Estado de carga. Cuando es ", _jsx("code", { children: "true" }), ", muestra filas skeleton en lugar de los datos. Por defecto es", " ", _jsx("code", { children: "false" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "loadingRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsxs("td", { className: "p-3 text-sm", children: ["N\u00FAmero de filas skeleton a mostrar cuando", " ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ". Por defecto es", " ", _jsx("code", { children: "5" })] })] })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "DataTableColumn Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "align" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"left\" | \"right\" | \"center\"" }), _jsx("td", { className: "p-3 text-sm", children: "Alineaci\u00F3n del contenido de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "width" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Ancho de la columna (ej: \"100px\", \"20%\")" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "header" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Texto o componente React para el header de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "value" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | number | ((row: T) => string | ReactNode)" }), _jsx("td", { className: "p-3 text-sm", children: "Nombre de la propiedad del objeto, valor directo, o funci\u00F3n que retorna el valor a mostrar" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "tooltip" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna el tooltip a mostrar al hacer hover sobre la celda" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "type" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"text\" | \"numeric\" | \"currency\" | \"date\"" }), _jsx("td", { className: "p-3 text-sm", children: "Tipo de dato que determina el formateo autom\u00E1tico" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "actions" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu para cada fila. Las acciones deben manejar sus propios eventos onClick." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerActions" }) }), _jsx("td", { className: "p-3 text-sm", children: "() => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu en el header de la columna. Las acciones deben manejar sus propios eventos onClick." })] })] })] }) })] })] }) }) }));
 };
 export default DataTableDocs;

package/dist/docs/DateInputDocs.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import "dayjs/locale/es";
 declare const DateInputDocs: React.FC;
 export default DateInputDocs;
 //# sourceMappingURL=DateInputDocs.d.ts.map

package/dist/docs/DateInputDocs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInputDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DateInputDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EA0P1B,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DateInputDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DateInputDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAIzB,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAwP1B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/docs/DateInputDocs.js

@@ -1,21 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import dayjs, {} from "dayjs";
+import "dayjs/locale/es";
 import { Card, DateInput, Button, Input, DatePicker } from "../index";
 const DateInputDocs = () => {
-    const [date1, setDate1] = React.useState(new Date());
+    const [date1, setDate1] = React.useState(dayjs());
     const [date2, setDate2] = React.useState(null);
     const [format, setFormat] = React.useState("dd/mm/yyyy");
     const formatDate = (date) => {
-        if (!date)
+        if (!date || !date.isValid())
             return "Sin fecha seleccionada";
-        return date.toLocaleDateString("es-ES", {
-            day: "2-digit",
-            month: "long",
-            year: "numeric",
-        });
+        return date.locale("es").format("DD [de] MMMM [de] YYYY");
     };
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DateInput - Input de fecha con calendario", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico (dd/mm/yyyy)" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha de nacimiento", value: date1, onChange: setDate1, format: "dd/mm/yyyy", icon: "fa-calendar-alt" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "puedes escribir la fecha manualmente (dd/mm/yyyy) o elegirla desde el calendario" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(date1) }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Soporte de formatos (dd/mm/yyyy y mm/dd/yyyy)" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { size: "sm", variant: format === "dd/mm/yyyy" ? "primary" : "outline", onClick: () => setFormat("dd/mm/yyyy"), children: "dd/mm/yyyy" }), _jsx(Button, { size: "sm", variant: format === "mm/dd/yyyy" ? "primary" : "outline", onClick: () => setFormat("mm/dd/yyyy"), children: "mm/dd/yyyy" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha con formato din\u00E1mico", value: date2, onChange: setDate2, format: format, icon: "fa-calendar-day" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "cambia el formato y escribe la fecha usando el mismo patr\u00F3n" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(date2) }) })] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Integraci\u00F3n con DatePicker" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha de reserva", value: date1, onChange: setDate1, format: "dd/mm/yyyy", datePickerProps: {
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DateInput - Input de fecha con calendario", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico (dd/mm/yyyy)" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha de nacimiento", value: date1, onChange: setDate1, format: "dd/mm/yyyy", icon: "fa-calendar-alt" }), _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["puedes escribir la fecha manualmente (dd/mm/yyyy) o hacer click en el \u00EDcono del calendario para abrir el selector de fecha. El componente usa ", _jsx("code", { children: "onIconClick" }), " del Input para manejar el click en el \u00EDcono."] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(date1) }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Soporte de formatos (dd/mm/yyyy y mm/dd/yyyy)" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { size: "sm", variant: format === "dd/mm/yyyy" ? "primary" : "outline", onClick: () => setFormat("dd/mm/yyyy"), children: "dd/mm/yyyy" }), _jsx(Button, { size: "sm", variant: format === "mm/dd/yyyy" ? "primary" : "outline", onClick: () => setFormat("mm/dd/yyyy"), children: "mm/dd/yyyy" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha con formato din\u00E1mico", value: date2, onChange: setDate2, format: format, icon: "fa-calendar-day" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "cambia el formato y escribe la fecha usando el mismo patr\u00F3n" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(date2) }) })] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Integraci\u00F3n con DatePicker" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha de reserva", value: date1, onChange: setDate1, format: "dd/mm/yyyy", datePickerProps: {
                                                     startWeekOn: "monday",
-                                                } }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "puedes pasar props al DatePicker interno mediante la prop datePickerProps" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "DatePicker independiente" }), _jsx(DatePicker, { value: date1 ?? undefined, onChange: setDate1, startWeekOn: "monday" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados y personalizaci\u00F3n" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Solo lectura", value: new Date(), readOnly: true, icon: "fa-lock" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado readOnly del Input subyacente" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Deshabilitado", value: new Date(), disabled: true, icon: "fa-ban" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado disabled y evita abrir el calendario" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo de formulario" }), _jsx(Card, { title: "Formulario de reserva", subtitle: "Combinaci\u00F3n de DateInput, Input y Button", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-check", children: "Confirmar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Nombre completo", icon: "fa-user" }), _jsx(DateInput, { label: "Fecha de entrada", value: date1, onChange: setDate1, format: "dd/mm/yyyy", icon: "fa-calendar-check" }), _jsx(DateInput, { label: "Fecha de salida", value: date2, onChange: setDate2, format: "dd/mm/yyyy", icon: "fa-calendar-minus" })] }) })] })] }) }) }));
+                                                } }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "puedes pasar props al DatePicker interno mediante la prop datePickerProps" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "DatePicker independiente" }), _jsx(DatePicker, { value: date1 ?? undefined, onChange: setDate1, startWeekOn: "monday" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados y personalizaci\u00F3n" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Solo lectura", value: dayjs(), readOnly: true, icon: "fa-lock" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado readOnly del Input subyacente" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Deshabilitado", value: dayjs(), disabled: true, icon: "fa-ban" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado disabled y evita abrir el calendario" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo de formulario" }), _jsx(Card, { title: "Formulario de reserva", subtitle: "Combinaci\u00F3n de DateInput, Input y Button", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-check", children: "Confirmar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Nombre completo", icon: "fa-user" }), _jsx(DateInput, { label: "Fecha de entrada", value: date1, onChange: setDate1, format: "dd/mm/yyyy", icon: "fa-calendar-check" }), _jsx(DateInput, { label: "Fecha de salida", value: date2, onChange: setDate2, format: "dd/mm/yyyy", icon: "fa-calendar-minus" })] }) })] })] }) }) }));
 };
 export default DateInputDocs;

package/dist/docs/DatePickerDocs.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import "dayjs/locale/es";
 declare const DatePickerDocs: React.FC;
 export default DatePickerDocs;
 //# sourceMappingURL=DatePickerDocs.d.ts.map

package/dist/docs/DatePickerDocs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DatePickerDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EA+H3B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DatePickerDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DatePickerDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAGzB,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EA2H3B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/docs/DatePickerDocs.js

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import dayjs, {} from "dayjs";
+import "dayjs/locale/es";
 import { Card, DatePicker, Button } from "../index";
 const DatePickerDocs = () => {
     const [selectedDate, setSelectedDate] = React.useState(null);
-    const [anotherDate, setAnotherDate] = React.useState(new Date());
+    const [anotherDate, setAnotherDate] = React.useState(dayjs());
     const formatDate = (date) => {
-        if (!date)
+        if (!date || !date.isValid())
             return "Sin fecha seleccionada";
-        return date.toLocaleDateString("es-ES", {
-            day: "2-digit",
-            month: "long",
-            year: "numeric",
-        });
+        return date.locale("es").format("DD [de] MMMM [de] YYYY");
     };
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DatePicker - Selector de fecha con calendario", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DatePicker, { value: selectedDate ?? undefined, onChange: setSelectedDate }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "selector de fecha sin input, solo calendario" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(selectedDate) }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Navegaci\u00F3n por meses y a\u00F1os" }), _jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Usa los botones con flechas para cambiar de mes o de a\u00F1o. El d\u00EDa actual se resalta con un borde, y el d\u00EDa seleccionado se marca con el color primario." }), _jsx(DatePicker, { value: anotherDate ?? undefined, onChange: setAnotherDate, startWeekOn: "monday" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(anotherDate) }), _jsx(Button, { size: "sm", variant: "outline", icon: "fa-calendar-day", onClick: () => setAnotherDate(new Date()), children: "Ir a hoy" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Inicio de semana configurable" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Semana comenzando en lunes (default)" }), _jsx(DatePicker, { startWeekOn: "monday" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Semana comenzando en domingo" }), _jsx(DatePicker, { startWeekOn: "sunday" })] })] })] })] }) }) }));
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DatePicker - Selector de fecha con calendario", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DatePicker, { value: selectedDate ?? undefined, onChange: setSelectedDate }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "selector de fecha sin input, solo calendario" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(selectedDate) }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Navegaci\u00F3n por meses y a\u00F1os" }), _jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Usa los botones con flechas para cambiar de mes o de a\u00F1o. El d\u00EDa actual se resalta con un borde, y el d\u00EDa seleccionado se marca con el color primario." }), _jsx(DatePicker, { value: anotherDate ?? undefined, onChange: setAnotherDate, startWeekOn: "monday" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(anotherDate) }), _jsx(Button, { size: "sm", variant: "outline", icon: "fa-calendar-day", onClick: () => setAnotherDate(dayjs()), children: "Ir a hoy" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Inicio de semana configurable" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Semana comenzando en lunes (default)" }), _jsx(DatePicker, { startWeekOn: "monday" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Semana comenzando en domingo" }), _jsx(DatePicker, { startWeekOn: "sunday" })] })] })] })] }) }) }));
 };
 export default DatePickerDocs;

package/dist/docs/DocAdmin.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const DocAdmin: React.FC;
+export default DocAdmin;
+//# sourceMappingURL=DocAdmin.d.ts.map

package/dist/docs/DocAdmin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocAdmin.d.ts","sourceRoot":"","sources":["../../src/docs/DocAdmin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AASnD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EA0QrB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/docs/DocAdmin.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from "react";
+import { Button, Card, Badge } from "../index";
+import { inicializarDatosEjemplo, empresaService, personaService, personaEmpresaService, } from "./docMockServices";
+const DocAdmin = () => {
+    const [isResetting, setIsResetting] = useState(false);
+    const [stats, setStats] = useState({
+        empresas: 0,
+        personas: 0,
+        relaciones: 0,
+    });
+    // Cargar estadísticas iniciales
+    useEffect(() => {
+        const init = async () => {
+            await actualizarStats();
+            // Inicializar datos si no existen
+            const empresas = await empresaService.listar();
+            const personas = await personaService.listar();
+            if (empresas.length === 0 && personas.length === 0) {
+                await inicializarDatosEjemplo();
+                await actualizarStats();
+            }
+        };
+        init();
+    }, []);
+    const actualizarStats = async () => {
+        const [empresas, personas, relaciones] = await Promise.all([
+            empresaService.listar(),
+            personaService.listar(),
+            personaEmpresaService.listar(),
+        ]);
+        setStats({
+            empresas: empresas.length,
+            personas: personas.length,
+            relaciones: relaciones.length,
+        });
+    };
+    const handleReset = async () => {
+        if (!window.confirm("¿Estás seguro de que deseas reiniciar todos los datos? Esta acción no se puede deshacer.")) {
+            return;
+        }
+        setIsResetting(true);
+        try {
+            await inicializarDatosEjemplo();
+            await actualizarStats();
+            setIsResetting(false);
+            alert("Datos reiniciados correctamente");
+        }
+        catch (error) {
+            console.error("Error al reiniciar datos:", error);
+            setIsResetting(false);
+            alert("Error al reiniciar los datos");
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { title: "Administraci\u00F3n de Datos Mock", subtitle: "Gestiona los datos de ejemplo para la documentaci\u00F3n", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4 text-[var(--color-text-primary)]", children: "Estad\u00EDsticas Actuales" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-2", children: _jsx(Badge, { variant: "primary", icon: "fa-building", size: "sm", children: "Empresas" }) }), _jsx("p", { className: "text-2xl font-bold text-[var(--color-text-primary)]", children: stats.empresas })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-2", children: _jsx(Badge, { variant: "secondary", icon: "fa-users", size: "sm", children: "Personas" }) }), _jsx("p", { className: "text-2xl font-bold text-[var(--color-text-primary)]", children: stats.personas })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-2", children: _jsx(Badge, { variant: "info", icon: "fa-link", size: "sm", children: "Relaciones" }) }), _jsx("p", { className: "text-2xl font-bold text-[var(--color-text-primary)]", children: stats.relaciones })] })] })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsxs("h4", { className: "font-semibold mb-2 text-[var(--color-text-primary)]", children: [_jsx("i", { className: "fa fa-info-circle mr-2 text-[var(--color-info)]" }), "Informaci\u00F3n"] }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: "Los datos se almacenan en localStorage y se utilizan en los ejemplos de documentaci\u00F3n. Al reiniciar, se restaurar\u00E1n 20 empresas, 20 personas y sus relaciones iniciales." })] }), _jsx("div", { className: "flex justify-center", children: _jsx(Button, { variant: "primary", icon: "fa-redo", onClick: handleReset, disabled: isResetting, loading: isResetting, children: isResetting ? "Reiniciando..." : "Reiniciar Datos Locales" }) })] }) }), _jsx(Card, { title: "Servicios Disponibles", subtitle: "Documentaci\u00F3n de los servicios mock disponibles", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-3", children: _jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "empresaService" }) }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Servicio para gestionar empresas" }), _jsxs("div", { className: "space-y-1 text-sm font-mono text-[var(--color-text-primary)]", children: [_jsxs("div", { children: ["\u2022 listar(params?: ", "{", " filtro?: string ", "}", "): Promise<Empresa[]>"] }), _jsxs("div", { children: ["\u2022 listarPaginados(params?: ", "{", " filtro?: string, pagina?: number, limit?: number ", "}", "): Promise<PaginationInterface<Empresa>>"] }), _jsx("div", { children: "\u2022 buscarPorId(id: number): Promise<Empresa | undefined>" }), _jsx("div", { children: "\u2022 agregar(empresa: Omit<Empresa, \"id\">): Promise<Empresa>" }), _jsx("div", { children: "\u2022 editar(id: number, datos: Partial<...>): Promise<Empresa | null>" }), _jsx("div", { children: "\u2022 eliminar(id: number): Promise<boolean>" })] })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-3", children: _jsx(Badge, { variant: "secondary", icon: "fa-code", size: "sm", children: "personaService" }) }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Servicio para gestionar personas" }), _jsxs("div", { className: "space-y-1 text-sm font-mono text-[var(--color-text-primary)]", children: [_jsxs("div", { children: ["\u2022 listar(params?: ", "{", " filtro?: string ", "}", "): Promise<Persona[]>"] }), _jsxs("div", { children: ["\u2022 listarPaginados(params?: ", "{", " filtro?: string, pagina?: number, limit?: number ", "}", "): Promise<PaginationInterface<Persona>>"] }), _jsx("div", { children: "\u2022 buscarPorId(id: number): Promise<Persona | undefined>" }), _jsx("div", { children: "\u2022 agregar(persona: Omit<Persona, \"id\">): Promise<Persona>" }), _jsx("div", { children: "\u2022 editar(id: number, datos: Partial<...>): Promise<Persona | null>" }), _jsx("div", { children: "\u2022 eliminar(id: number): Promise<boolean>" })] })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-3", children: _jsx(Badge, { variant: "info", icon: "fa-code", size: "sm", children: "personaEmpresaService" }) }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Servicio para gestionar relaciones persona-empresa (muchos a muchos)" }), _jsxs("div", { className: "space-y-1 text-sm font-mono text-[var(--color-text-primary)]", children: [_jsx("div", { children: "\u2022 listar(): Promise<PersonaEmpresa[]>" }), _jsx("div", { children: "\u2022 buscarPorPersona(idPersona: number): Promise<PersonaEmpresa[]>" }), _jsx("div", { children: "\u2022 buscarPorEmpresa(idEmpresa: number): Promise<PersonaEmpresa[]>" }), _jsx("div", { children: "\u2022 buscarPorPersonaYEmpresa(idPersona, idEmpresa): Promise<PersonaEmpresa | undefined>" }), _jsx("div", { children: "\u2022 agregar(relacion: PersonaEmpresa): Promise<PersonaEmpresa>" }), _jsx("div", { children: "\u2022 editar(idPersona, idEmpresa, datos): Promise<PersonaEmpresa | null>" }), _jsx("div", { children: "\u2022 eliminar(idPersona, idEmpresa): Promise<boolean>" }), _jsx("div", { children: "\u2022 eliminarPorPersona(idPersona): Promise<number>" }), _jsx("div", { children: "\u2022 eliminarPorEmpresa(idEmpresa): Promise<number>" })] })] })] }) }), _jsx(Card, { title: "Interfaces TypeScript", subtitle: "Estructuras de datos utilizadas", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "Empresa" })] }), _jsx("pre", { className: "text-xs bg-[var(--color-bg-default)] p-3 rounded border border-[var(--color-border-default)] overflow-x-auto", children: `interface Empresa {
+  id: number;
+  nombre: string;
+}` })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "Persona" })] }), _jsx("pre", { className: "text-xs bg-[var(--color-bg-default)] p-3 rounded border border-[var(--color-border-default)] overflow-x-auto", children: `interface Persona {
+  id: number;
+  nombre: string;
+  email: string;
+}` })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "PersonaEmpresa" })] }), _jsx("pre", { className: "text-xs bg-[var(--color-bg-default)] p-3 rounded border border-[var(--color-border-default)] overflow-x-auto", children: `interface PersonaEmpresa {
+  idPersona: number;
+  idEmpresa: number;
+  cargo: string;
+}` })] })] }) })] }));
+};
+export default DocAdmin;

package/dist/docs/DocsMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAuDpB,CAAC"}
+{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAqFpB,CAAC"}

package/dist/docs/DocsMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Link } from "react-router-dom";
 export const DocsMenu = () => {
-    return (_jsx(_Fragment, { children: _jsxs("ul", { children: [_jsx("li", { children: _jsx(Link, { to: "/docs/button", children: "Button" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/badge", children: "Badge" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/card", children: "Card" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/input", children: "Input" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/autocomplete-input", children: "AutocompleteInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datepicker", children: "DatePicker" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dateinput", children: "DateInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/theme", children: "ThemeSwitcher" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datafield", children: "DataField" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/tabsgroup", children: "TabsGroup" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dialog", children: "Dialog" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/pagination", children: "Pagination" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/loader", children: "Loader" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datatable", children: "DataTable" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dropdownmenu", children: "DropdownMenu" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/auth", children: "AuthContext" }) })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("ul", { className: "px-4", children: [_jsx("li", { children: _jsx(Link, { to: "/docs/button", children: "Button" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/badge", children: "Badge" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/avatar", children: "Avatar" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/roadmap", children: "RoadMap" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/card", children: "Card" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/input", children: "Input" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/autocomplete-input", children: "AutocompleteInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/search-select-input", children: "SearchSelectInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datepicker", children: "DatePicker" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dateinput", children: "DateInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/checkbox", children: "Checkbox" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/radiobuttongroup", children: "RadioButtonGroup" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/theme", children: "ThemeSwitcher" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datafield", children: "DataField" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/tabsgroup", children: "TabsGroup" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dialog", children: "Dialog" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/pagination", children: "Pagination" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/loader", children: "Loader" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datatable", children: "DataTable" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dropdownmenu", children: "DropdownMenu" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/filter", children: "Filter" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/auth", children: "AuthContext" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/listcrud", children: "ListCrudContext" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/example-form", children: "Formulario de Ejemplo" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/snackbar", children: "Snackbar" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/admin", children: "Admin (Mock Services)" }) })] }) }));
 };

package/dist/docs/DocsRouter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAsB9B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6B1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAgC9B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/DocsRouter.js

@@ -6,8 +6,11 @@ import CardDocs from "./CardDocs";
 import InputDocs from "./InputDocs";
 import ThemeSwitcherDocs from "./ThemeSwitcherDocs";
 import BadgeDocs from "./BadgeDocs";
+import AvatarDocs from "./AvatarDocs";
+import RoadMapDocs from "./RoadMapDocs";
 import DataFieldDocs from "./DataFieldDocs";
 import AutocompleteInputDocs from "./AutocompleteInputDocs";
+import SearchSelectInputDocs from "./SearchSelectInputDocs";
 import DatePickerDocs from "./DatePickerDocs";
 import DateInputDocs from "./DateInputDocs";
 import TabsGroupDocs from "./TabsGroupDocs";
@@ -16,8 +19,15 @@ import PaginationDocs from "./PaginationDocs";
 import LoaderDocs from "./LoaderDocs";
 import DataTableDocs from "./DataTableDocs";
 import DropdownMenuDocs from "./DropdownMenuDocs";
+import FilterDocs from "./FilterDocs";
 import { AuthDocs } from "./AuthDocs.tsx/AuthDocs";
+import { ListCrudDocs } from "./ListCrudDocs.tsx/ListCrudDocs";
+import ExampleFormDocs from "./ExampleFormDocs";
+import CheckboxDocs from "./CheckboxDocs";
+import RadioButtonGroupDocs from "./RadioButtonGroupDocs";
+import SnackbarDocs from "./SnackbarDocs";
+import DocAdmin from "./DocAdmin";
 export const DocsRouter = () => {
-    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "autocomplete-input", element: _jsx(AutocompleteInputDocs, {}) }), _jsx(Route, { path: "datepicker", element: _jsx(DatePickerDocs, {}) }), _jsx(Route, { path: "dateinput", element: _jsx(DateInputDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) }), _jsx(Route, { path: "tabsgroup", element: _jsx(TabsGroupDocs, {}) }), _jsx(Route, { path: "dialog", element: _jsx(DialogDocs, {}) }), _jsx(Route, { path: "pagination", element: _jsx(PaginationDocs, {}) }), _jsx(Route, { path: "loader", element: _jsx(LoaderDocs, {}) }), _jsx(Route, { path: "datatable", element: _jsx(DataTableDocs, {}) }), _jsx(Route, { path: "dropdownmenu", element: _jsx(DropdownMenuDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) })] }));
+    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "avatar", element: _jsx(AvatarDocs, {}) }), _jsx(Route, { path: "roadmap", element: _jsx(RoadMapDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "autocomplete-input", element: _jsx(AutocompleteInputDocs, {}) }), _jsx(Route, { path: "search-select-input", element: _jsx(SearchSelectInputDocs, {}) }), _jsx(Route, { path: "datepicker", element: _jsx(DatePickerDocs, {}) }), _jsx(Route, { path: "dateinput", element: _jsx(DateInputDocs, {}) }), _jsx(Route, { path: "checkbox", element: _jsx(CheckboxDocs, {}) }), _jsx(Route, { path: "radiobuttongroup", element: _jsx(RadioButtonGroupDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) }), _jsx(Route, { path: "tabsgroup", element: _jsx(TabsGroupDocs, {}) }), _jsx(Route, { path: "dialog", element: _jsx(DialogDocs, {}) }), _jsx(Route, { path: "pagination", element: _jsx(PaginationDocs, {}) }), _jsx(Route, { path: "loader", element: _jsx(LoaderDocs, {}) }), _jsx(Route, { path: "datatable", element: _jsx(DataTableDocs, {}) }), _jsx(Route, { path: "dropdownmenu", element: _jsx(DropdownMenuDocs, {}) }), _jsx(Route, { path: "filter", element: _jsx(FilterDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) }), _jsx(Route, { path: "listcrud", element: _jsx(ListCrudDocs, {}) }), _jsx(Route, { path: "example-form", element: _jsx(ExampleFormDocs, {}) }), _jsx(Route, { path: "snackbar", element: _jsx(SnackbarDocs, {}) }), _jsx(Route, { path: "admin", element: _jsx(DocAdmin, {}) })] }));
 };
 export default DocsRouter;

package/dist/docs/ExampleFormDocs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const ExampleFormDocs: React.FC;
+export default ExampleFormDocs;
+//# sourceMappingURL=ExampleFormDocs.d.ts.map

package/dist/docs/ExampleFormDocs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleFormDocs.d.ts","sourceRoot":"","sources":["../../src/docs/ExampleFormDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgE1B,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAoP5B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/docs/ExampleFormDocs.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card, Input, AutocompleteInput, DateInput, SearchSelectInput, Button, Checkbox, RadioButtonGroup, } from "../index";
+import { useForm, FormProvider } from "react-hook-form";
+import dayjs from "dayjs";
+const autocompleteOptions = [
+    { label: "España", value: "es", description: "Madrid" },
+    { label: "Francia", value: "fr", description: "París" },
+    { label: "Italia", value: "it", description: "Roma" },
+    { label: "Alemania", value: "de", description: "Berlín" },
+    { label: "Portugal", value: "pt", description: "Lisboa" },
+];
+const searchSelectOptions = [
+    {
+        label: "Madrid",
+        id: 1,
+    },
+    {
+        label: "París",
+        id: 2,
+    },
+    {
+        label: "Roma",
+        id: 3,
+    },
+    {
+        label: "Berlín",
+        id: 4,
+    },
+    {
+        label: "Lisboa",
+        id: 5,
+    },
+];
+const mockSearchPromise = async (text) => {
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    const search = text.toLowerCase();
+    return searchSelectOptions.filter((option) => option.label.toLowerCase().includes(search));
+};
+const mockSingleSearchPromise = async (id) => {
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    return searchSelectOptions.find((option) => option.id === id);
+};
+const ExampleFormDocs = () => {
+    const [isReadOnly, setIsReadOnly] = React.useState(false);
+    const methods = useForm({
+        defaultValues: {
+            nombre: "Alexis Wursten",
+            pais: "de",
+            fechaNacimiento: dayjs("1990-01-01"),
+            ciudad: 3,
+            aceptaTerminos: false,
+            genero: "masculino",
+            tipoUsuario: "user",
+        },
+    });
+    const { handleSubmit, reset, watch, setFocus, register, formState: { errors, isSubmitted }, } = methods;
+    const onSubmit = () => {
+        console.log(watch());
+    };
+    // Enfocar el primer campo con error después de un submit fallido
+    React.useEffect(() => {
+        if (isSubmitted && Object.keys(errors).length > 0) {
+            const timer = setTimeout(() => {
+                if (errors.nombre) {
+                    setFocus("nombre");
+                }
+                else if (errors.pais) {
+                    setFocus("pais");
+                }
+                else if (errors.fechaNacimiento) {
+                    setFocus("fechaNacimiento");
+                }
+                else if (errors.ciudad) {
+                    setFocus("ciudad");
+                }
+                else if (errors.aceptaTerminos) {
+                    // No se puede hacer focus en checkbox, pero podemos registrar el error
+                }
+                else if (errors.genero) {
+                    // No se puede hacer focus en radio button group, pero podemos registrar el error
+                }
+                else if (errors.tipoUsuario) {
+                    // No se puede hacer focus en radio button group, pero podemos registrar el error
+                }
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [errors, isSubmitted, setFocus]);
+    return (_jsx(FormProvider, { ...methods, children: _jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Formulario de Ejemplo", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Este formulario demuestra el uso de todos los componentes de formulario controlados por react-hook-form con validaciones requeridas. Todos los campos usan ", _jsx("code", { children: "register" }), " de forma simplificada (sin Controller)."] }), _jsx("div", { className: "pb-4 border-b border-[var(--color-border-default)]", children: _jsx(Checkbox, { label: "ReadOnly", checked: isReadOnly, onChange: (e) => setIsReadOnly(e.target.checked) }) }), _jsxs("form", { className: "space-y-4", onSubmit: handleSubmit(onSubmit), children: [_jsx(Input, { label: "Nombre completo", placeholder: "Ingresa tu nombre", readOnly: isReadOnly, ...register("nombre", {
+                                        required: "El nombre es obligatorio",
+                                        minLength: {
+                                            value: 3,
+                                            message: "El nombre debe tener al menos 3 caracteres",
+                                        },
+                                    }), error: errors.nombre?.message, onKeyDown: (e) => {
+                                        if (e.key === "Enter") {
+                                            e.preventDefault();
+                                            console.log("Enter");
+                                            setTimeout(() => {
+                                                setFocus("fechaNacimiento");
+                                            }, 100);
+                                        }
+                                    } }), _jsx(AutocompleteInput, { label: "Pa\u00EDs", placeholder: "Selecciona un pa\u00EDs", options: autocompleteOptions, getOptionValue: (option) => option.value, readOnly: isReadOnly, ...register("pais", {
+                                        required: "El país es obligatorio",
+                                    }), error: errors.pais?.message, onSelectOption: () => {
+                                        // Al seleccionar un país, mover el foco a fecha de nacimiento
+                                        setTimeout(() => {
+                                            setFocus("fechaNacimiento");
+                                        }, 100);
+                                    } }), _jsxs("div", { children: ["Pa\u00EDs: ", watch("pais")] }), _jsx(DateInput, { label: "Fecha de nacimiento", placeholder: "dd/mm/yyyy", icon: "fa-calendar-alt", readOnly: isReadOnly, ...register("fechaNacimiento", {
+                                        required: "La fecha de nacimiento es obligatoria",
+                                    }), error: errors.fechaNacimiento?.message }), _jsxs("div", { children: ["Fecha de nacimiento:", " ", (watch("fechaNacimiento") && watch("fechaNacimiento")?.format
+                                            ? watch("fechaNacimiento")?.format("DD/MM/YYYY")
+                                            : "") || "N/A"] }), _jsx(SearchSelectInput, { label: "Ciudad", placeholder: "Busca y selecciona una ciudad", getOptionLabel: (option) => option.label, getOptionValue: (option) => option.id, onSearchPromiseFn: mockSearchPromise, onSingleSearchPromiseFn: mockSingleSearchPromise, dialogTitle: "Seleccione una ciudad", readOnly: isReadOnly, ...register("ciudad", {
+                                        required: "La ciudad es obligatoria",
+                                    }), error: errors.ciudad?.message, onSelectOption: () => {
+                                        // Al seleccionar una ciudad, mover el foco a nombre completo
+                                        setTimeout(() => {
+                                            setFocus("nombre");
+                                        }, 100);
+                                    } }), _jsxs("div", { children: ["Ciudad: ", watch("ciudad")] }), _jsx(Checkbox, { label: "Acepto los t\u00E9rminos y condiciones", readOnly: isReadOnly, ...register("aceptaTerminos", {
+                                        required: "Debes aceptar los términos y condiciones",
+                                    }), error: errors.aceptaTerminos?.message }), _jsxs("div", { children: ["Acepta t\u00E9rminos: ", watch("aceptaTerminos") ? "Sí" : "No"] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm text-[var(--color-primary)] mb-1 font-[var(--font-default)]", children: "G\u00E9nero" }), _jsx(RadioButtonGroup, { options: [
+                                                { label: "Masculino", value: "masculino" },
+                                                { label: "Femenino", value: "femenino" },
+                                                { label: "Otro", value: "otro" },
+                                            ], readOnly: isReadOnly, ...register("genero", {
+                                                required: "El género es obligatorio",
+                                            }), error: errors.genero?.message })] }), _jsxs("div", { children: ["G\u00E9nero: ", watch("genero")] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm text-[var(--color-primary)] mb-1 font-[var(--font-default)]", children: "Tipo de Usuario" }), _jsx(RadioButtonGroup, { options: [
+                                                { label: "Administrador", value: "admin" },
+                                                { label: "Usuario", value: "user" },
+                                                { label: "Invitado", value: "guest" },
+                                            ], readOnly: isReadOnly, ...register("tipoUsuario", {
+                                                required: "El tipo de usuario es obligatorio",
+                                            }), error: errors.tipoUsuario?.message })] }), _jsxs("div", { children: ["Tipo de Usuario: ", watch("tipoUsuario")] }), _jsxs("div", { className: "flex justify-end gap-2 pt-4", children: [_jsx(Button, { variant: "outline", icon: "fa-times", type: "button", onClick: () => {
+                                                reset({
+                                                    nombre: "",
+                                                    pais: "",
+                                                    fechaNacimiento: "",
+                                                    ciudad: undefined,
+                                                    aceptaTerminos: false,
+                                                    genero: "",
+                                                    tipoUsuario: "",
+                                                });
+                                            }, children: "Resetear" }), _jsx(Button, { variant: "primary", icon: "fa-check", type: "submit", children: "Enviar" })] })] })] }) }) }) }));
+};
+export default ExampleFormDocs;

package/dist/docs/FilterDocs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const FilterDocs: React.FC;
+export default FilterDocs;
+//# sourceMappingURL=FilterDocs.d.ts.map

package/dist/docs/FilterDocs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDocs.d.ts","sourceRoot":"","sources":["../../src/docs/FilterDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EA4tBvB,CAAC;AAEF,eAAe,UAAU,CAAC"}