flysoft-react-ui 1.2.4 → 1.2.5

package/dist/docs/DataTableDocs.js

@@ -1,244 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
-import { Card, DataTable, Button, Badge } from "../index";
-const DataTableDocs = () => {
-    const [isLoading, setIsLoading] = useState(false);
-    const allProducts = [
-        {
-            id: 1,
-            name: "Laptop Dell XPS 15",
-            price: 1299.1,
-            stock: 45,
-            category: "Electrónica",
-            createdAt: "2024-01-15",
-        },
-        {
-            id: 2,
-            name: "Mouse Logitech MX Master",
-            price: 89.99,
-            stock: 1200,
-            category: "Accesorios",
-            createdAt: "2024-02-20",
-        },
-        {
-            id: 3,
-            name: "Teclado Mecánico RGB",
-            price: 149,
-            stock: 0,
-            category: "Accesorios",
-            createdAt: "2024-03-10",
-        },
-        {
-            id: 4,
-            name: "Monitor 4K 27 pulgadas",
-            price: 599,
-            stock: 15,
-            category: "Electrónica",
-            createdAt: "2024-01-05",
-        },
-        {
-            id: 5,
-            name: "Auriculares Sony WH-1000XM5",
-            price: 399.1,
-            stock: 30,
-            category: "Audio",
-            createdAt: "2024-02-12",
-        },
-        {
-            id: 6,
-            name: "Webcam Logitech C920",
-            price: 79.99,
-            stock: 85,
-            category: "Accesorios",
-            createdAt: "2024-03-22",
-        },
-        {
-            id: 7,
-            name: "SSD Samsung 1TB",
-            price: 129.99,
-            stock: 200,
-            category: "Almacenamiento",
-            createdAt: "2024-01-28",
-        },
-        {
-            id: 8,
-            name: "Tablet iPad Pro 12.9",
-            price: 1099.99,
-            stock: 12,
-            category: "Electrónica",
-            createdAt: "2024-02-05",
-        },
-        {
-            id: 9,
-            name: "Cable USB-C Premium",
-            price: 24.99,
-            stock: 500,
-            category: "Accesorios",
-            createdAt: "2024-03-15",
-        },
-        {
-            id: 10,
-            name: "Router WiFi 6 ASUS",
-            price: 199.99,
-            stock: 25,
-            category: "Redes",
-            createdAt: "2024-01-20",
-        },
-        {
-            id: 11,
-            name: "Micrófono Blue Yeti",
-            price: 129.99,
-            stock: 40,
-            category: "Audio",
-            createdAt: "2024-02-18",
-        },
-        {
-            id: 12,
-            name: "Disco Duro Externo 2TB",
-            price: 89.99,
-            stock: 60,
-            category: "Almacenamiento",
-            createdAt: "2024-03-08",
-        },
-    ];
-    // Solo 4 productos para los ejemplos normales
-    const products = allProducts.slice(0, 4);
-    const basicColumns = [
-        {
-            header: "ID",
-            value: "id",
-            align: "center",
-            width: "80px",
-            type: "numeric",
-        },
-        {
-            header: "Nombre",
-            value: "name",
-            align: "left",
-        },
-        {
-            header: "Categoría",
-            value: "category",
-            align: "left",
-        },
-    ];
-    const fullColumns = [
-        {
-            header: "ID",
-            value: "id",
-            align: "center",
-            width: "80px",
-            type: "numeric",
-            footer: `Total`,
-        },
-        {
-            header: "Nombre del Producto",
-            value: "name",
-            align: "left",
-        },
-        {
-            header: "Precio",
-            value: "price",
-            align: "right",
-            type: "currency",
-            footer: `${allProducts
-                .reduce((sum, p) => sum + p.price, 0)
-                .toLocaleString("es-AR", {
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 2,
-            })}`,
-        },
-        {
-            header: "Stock",
-            value: "stock",
-            align: "center",
-            type: "numeric",
-            footer: `${allProducts
-                .reduce((sum, p) => sum + p.stock, 0)
-                .toLocaleString("es-AR")}`,
-        },
-        {
-            header: "Categoría",
-            value: "category",
-            align: "left",
-        },
-        {
-            header: "Fecha de Creación",
-            value: "createdAt",
-            align: "center",
-            type: "date",
-        },
-    ];
-    const customColumns = [
-        {
-            header: "ID",
-            value: "id",
-            align: "center",
-            width: "80px",
-            type: "numeric",
-        },
-        {
-            header: "Nombre",
-            value: "name",
-            align: "left",
-        },
-        {
-            header: "Precio",
-            value: "price",
-            align: "right",
-            type: "currency",
-            tooltip: (row) => `Precio original: ${row.price}€`,
-        },
-        {
-            header: "Stock",
-            value: (row) => (_jsx(Badge, { variant: row.stock > 0 ? "success" : "danger", icon: row.stock > 0 ? "fa-check-circle" : "fa-times-circle", children: row.stock > 0 ? `${row.stock} unidades` : "Sin stock" })),
-            align: "center",
-        },
-        {
-            header: "Acciones",
-            value: "",
-            align: "center",
-            actions: (row) => [
-                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-edit", onClick: () => console.log("Editar", row), children: "Editar" }, "edit"),
-                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-trash", onClick: () => console.log("Eliminar", row), children: "Eliminar" }, "delete"),
-            ],
-        },
-        {
-            header: "Ver",
-            value: "",
-            align: "center",
-            actions: (row) => [
-                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-search", onClick: () => console.log("Ver detalles", row) }, "view"),
-            ],
-        },
-    ];
-    const headerCustomColumns = [
-        {
-            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-hashtag" }), _jsx("span", { children: "ID" })] })),
-            value: "id",
-            align: "center",
-            width: "80px",
-            type: "numeric",
-        },
-        {
-            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-box" }), _jsx("span", { children: "Producto" })] })),
-            value: "name",
-            align: "left",
-        },
-        {
-            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-euro-sign" }), _jsx("span", { children: "Precio" })] })),
-            value: "price",
-            align: "right",
-            type: "currency",
-            headerActions: () => [
-                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-download", onClick: () => console.log("Exportar precios"), children: "Exportar" }, "export"),
-                _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-filter", onClick: () => console.log("Filtrar precios"), children: "Filtrar" }, "filter"),
-            ],
-        },
-    ];
-    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: "Tabla con estilos condicionales (rowClassName)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "rowClassName" }), " puedes aplicar clases CSS a filas espec\u00EDficas bas\u00E1ndote en sus datos. En este ejemplo, los productos sin stock se resaltan con un fondo rojo suave."] }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products, rowClassName: (row) => row.stock === 0 ? "bg-red-50 dark:bg-red-900/20" : "" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estilos de Header y Footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando las props ", _jsx("code", { children: "headerClassName" }), " y", " ", _jsx("code", { children: "footerClassName" }), " puedes aplicar clases CSS directamente a las filas del header y footer. En este ejemplo, se aplica un fondo azul suave al header y un borde superior m\u00E1s grueso al footer."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, headerClassName: "bg-red-50/50 border-b-2 border-primary", footerClassName: "border-t-2 border-primary bg-green-500" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estilos de Celdas (Cell ClassNames)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Adem\u00E1s de las filas, puedes aplicar clases espec\u00EDficamente a las celdas del header, footer y body. El ", _jsx("code", { children: "cellClassName" }), " ", "del body puede ser un string o una funci\u00F3n que recibe la fila y la columna para un control total."] }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products, headerCellClassName: "text-primary italic uppercase tracking-wider", cellClassName: (_row, column) => column.value === "name" ? "font-bold text-blue-600" : "" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla Compacta" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "compact" }), " puedes reducir significativamente el espacio que ocupa la tabla. Este modo elimina los paddings superiores y reduce los horizontales, ideal para mostrar grandes cantidades de datos en espacios reducidos."] }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products, compact: true }) })] }), _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("li", { children: [_jsx("strong", { children: "Estilos condicionales:" }), " Usa", " ", _jsx("code", { children: "rowClassName" }), " para aplicar clases CSS a filas espec\u00EDficas seg\u00FAn sus datos"] })] }) }) })] }), _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: "isLoading" }), " es ", _jsx("code", { children: "true" }), ". Por defecto es ", _jsx("code", { children: "5" })] })] }), _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: "rowClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n opcional para aplicar clases CSS a una fila espec\u00EDfica basada en sus datos" })] }), _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: "headerClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para la fila del header (tr)" })] }), _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: "footerClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para la fila del footer (tr)" })] }), _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: "headerCellClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para todas las celdas del header (th)" })] }), _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: "footerCellClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para todas las celdas del footer (td)" })] }), _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: "cellClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | ((row: T, col: Col) => string)" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS para celdas del body. Puede ser una funci\u00F3n para l\u00F3gica condicional por 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: "compact" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsx("td", { className: "p-3 text-sm", children: "Si es true, reduce el padding de todas las celdas para una visualizaci\u00F3n m\u00E1s densa. Por defecto es false." })] })] })] }) })] }), _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,5 +0,0 @@
-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 +0,0 @@
-{"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,19 +0,0 @@
-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(dayjs());
-    const [date2, setDate2] = React.useState(null);
-    const [format, setFormat] = React.useState("dd/mm/yyyy");
-    const formatDate = (date) => {
-        if (!date || !date.isValid())
-            return "Sin fecha seleccionada";
-        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" }), _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: 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,5 +0,0 @@
-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 +0,0 @@
-{"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,16 +0,0 @@
-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(dayjs());
-    const formatDate = (date) => {
-        if (!date || !date.isValid())
-            return "Sin fecha seleccionada";
-        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(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/DialogDocs.d.ts

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

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

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

package/dist/docs/DialogDocs.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState } from "react";
-import { Card, Dialog, Button, Input, Badge } from "../index";
-const DialogDocs = () => {
-    const [isOpenBasic, setIsOpenBasic] = useState(false);
-    const [isOpenForm, setIsOpenForm] = useState(false);
-    const [isOpenConfirm, setIsOpenConfirm] = useState(false);
-    const [isOpenNoOverlay, setIsOpenNoOverlay] = useState(false);
-    const [isOpenCustom, setIsOpenCustom] = useState(false);
-    const [isOpenCompact, setIsOpenCompact] = useState(false);
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Dialog - 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: "Uso b\u00E1sico" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente Dialog muestra un modal centrado con overlay. Se controla mediante la prop ", _jsx("code", { children: "isOpen" }), " y se cierra con", " ", _jsx("code", { children: "onClose" }), ". El contenido se pasa como", " ", _jsx("code", { children: "children" }), "."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-window-maximize", onClick: () => setIsOpenBasic(true), children: "Abrir Dialog B\u00E1sico" }), _jsx(Dialog, { isOpen: isOpenBasic, title: "Dialog B\u00E1sico", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenBasic(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", onClick: () => setIsOpenBasic(false), children: "Aceptar" })] }), onClose: () => setIsOpenBasic(false), children: _jsxs("div", { className: "space-y-3", children: [_jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este es un ejemplo de dialog b\u00E1sico. Puedes incluir cualquier contenido como ", _jsx("code", { children: "children" }), "."] }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "El dialog se puede cerrar haciendo clic en el overlay, en el bot\u00F3n de cerrar (X), o presionando la tecla Escape." })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Modo Compacto" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El prop ", _jsx("code", { children: "compact" }), " reduce los paddings del header, body y footer, permitiendo mostrar m\u00E1s contenido en menos espacio. Ideal para formularios densos."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-compress-alt", onClick: () => setIsOpenCompact(true), children: "Abrir Dialog Compacto" }), _jsx(Dialog, { isOpen: isOpenCompact, compact: true, title: "Dialog Modo Compacto", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenCompact(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", onClick: () => setIsOpenCompact(false), children: "Aceptar" })] }), onClose: () => setIsOpenCompact(false), children: _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Este es un ejemplo de dialog en modo compacto. El padding interno es reducido para optimizar el espacio." }), _jsx("div", { className: "p-3 bg-gray-50 border border-gray-200 rounded", children: _jsx("p", { className: "text-xs text-gray-500 italic", children: "Este modo es ideal para modales que contienen formularios complejos o tablas." }) })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog con formulario" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de dialog que contiene un formulario completo con campos de entrada." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-edit", onClick: () => setIsOpenForm(true), children: "Abrir Dialog con Formulario" }), _jsx(Dialog, { isOpen: isOpenForm, title: "Editar Usuario", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", icon: "fa-times", onClick: () => setIsOpenForm(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-save", onClick: () => setIsOpenForm(false), children: "Guardar Cambios" })] }), onClose: () => setIsOpenForm(false), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa el nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "usuario@ejemplo.com", icon: "fa-envelope" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog de confirmaci\u00F3n" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de dialog usado para confirmar una acci\u00F3n importante." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-trash", onClick: () => setIsOpenConfirm(true), children: "Eliminar Item" }), _jsx(Dialog, { isOpen: isOpenConfirm, title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-exclamation-triangle text-[var(--color-danger)]" }), _jsx("span", { children: "Confirmar Eliminaci\u00F3n" })] }), footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", icon: "fa-times", onClick: () => setIsOpenConfirm(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-trash", onClick: () => setIsOpenConfirm(false), children: "Eliminar" })] }), onClose: () => setIsOpenConfirm(false), children: _jsxs("div", { className: "space-y-3", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "\u00BFEst\u00E1s seguro de que deseas eliminar este elemento? Esta acci\u00F3n no se puede deshacer." }), _jsx("div", { className: "flex gap-2", children: _jsx(Badge, { variant: "danger", icon: "fa-exclamation-circle", children: "Acci\u00F3n irreversible" }) })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog sin cerrar al hacer clic en overlay" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando ", _jsxs("code", { children: ["closeOnOverlayClick=", false] }), " el dialog solo se puede cerrar mediante el bot\u00F3n de cerrar, los botones de acci\u00F3n, o la tecla Escape."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-lock", onClick: () => setIsOpenNoOverlay(true), children: "Abrir Dialog (sin cerrar en overlay)" }), _jsx(Dialog, { isOpen: isOpenNoOverlay, title: "Dialog Protegido", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenNoOverlay(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", onClick: () => setIsOpenNoOverlay(false), children: "Continuar" })] }), onClose: () => setIsOpenNoOverlay(false), closeOnOverlayClick: false, children: _jsxs("div", { className: "space-y-3", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este dialog no se cierra al hacer clic en el overlay. Debes usar el bot\u00F3n de cerrar o los botones de acci\u00F3n." }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "\u00DAtil para formularios importantes donde no quieres que el usuario cierre accidentalmente el dialog." })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog con t\u00EDtulo personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El prop ", _jsx("code", { children: "title" }), " acepta un ReactNode, permitiendo incluir iconos, badges u otros componentes."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-star", onClick: () => setIsOpenCustom(true), children: "Abrir Dialog Personalizado" }), _jsx(Dialog, { isOpen: isOpenCustom, title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-info-circle text-[var(--color-primary)]" }), _jsx("span", { children: "Informaci\u00F3n Importante" }), _jsx(Badge, { variant: "info", size: "sm", children: "Nuevo" })] }), footer: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-bookmark", onClick: () => setIsOpenCustom(false), children: "Guardar para despu\u00E9s" }), _jsx(Button, { variant: "primary", icon: "fa-check", onClick: () => setIsOpenCustom(false), children: "Entendido" })] }), onClose: () => setIsOpenCustom(false), children: _jsxs("div", { className: "space-y-3", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este dialog muestra c\u00F3mo puedes personalizar el t\u00EDtulo usando ReactNode, incluyendo iconos y badges." }), _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("i", { className: "fal fa-lightbulb mr-2" }), "Puedes usar cualquier componente React en el t\u00EDtulo, children y acciones."] }) })] }) })] })] }), _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: "Overlay con blur:" }), " El overlay tiene un efecto de desenfoque (backdrop-blur) para mejor enfoque visual"] }), _jsxs("li", { children: [_jsx("strong", { children: "Cierre m\u00FAltiple:" }), " Se puede cerrar haciendo clic en el overlay, en el bot\u00F3n X, en los botones de acci\u00F3n, o presionando Escape"] }), _jsxs("li", { children: [_jsx("strong", { children: "Prevenci\u00F3n de scroll:" }), " Cuando el dialog est\u00E1 abierto, se previene el scroll del body"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " El dialog se adapta a diferentes tama\u00F1os de pantalla con padding adecuado"] }), _jsxs("li", { children: [_jsx("strong", { children: "Accesibilidad:" }), " Incluye atributos ARIA para mejor accesibilidad"] }), _jsxs("li", { children: [_jsx("strong", { children: "Contenido flexible:" }), " El body tiene scroll autom\u00E1tico si el contenido es muy largo"] }), _jsxs("li", { children: [_jsx("strong", { children: "Modo Compacto:" }), " Soporte para paddings reducidos mediante la prop ", _jsx("code", { children: "compact" }), ", ideal para interfaces de alta densidad"] })] }) }) })] })] }) }) }));
-};
-export default DialogDocs;

package/dist/docs/DocAdmin.d.ts

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,68 +0,0 @@
-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: "fal 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

@@ -1,2 +0,0 @@
-export declare const DocsMenu: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DocsMenu.d.ts.map

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

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

package/dist/docs/DocsMenu.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Accordion, LinkButton } from "../index";
-export const DocsMenu = () => {
-    return (_jsxs("div", { className: "space-y-2 p-4 bg-gray-100 h-full", children: [_jsx(Accordion, { title: "Form Controls", icon: "fa-edit", defaultOpen: true, children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/button", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Button" }), _jsx(LinkButton, { to: "/docs/linkbutton", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "LinkButton" }), _jsx(LinkButton, { to: "/docs/input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Input" }), _jsx(LinkButton, { to: "/docs/autocomplete-input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "AutocompleteInput" }), _jsx(LinkButton, { to: "/docs/currency-input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "CurrencyInput" }), _jsx(LinkButton, { to: "/docs/search-select-input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "SearchSelectInput" }), _jsx(LinkButton, { to: "/docs/datepicker", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DatePicker" }), _jsx(LinkButton, { to: "/docs/dateinput", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DateInput" }), _jsx(LinkButton, { to: "/docs/checkbox", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Checkbox" }), _jsx(LinkButton, { to: "/docs/radiobuttongroup", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "RadioButtonGroup" }), _jsx(LinkButton, { to: "/docs/pagination", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Pagination" })] }) }), _jsx(Accordion, { title: "Layout", icon: "fa-th-large", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/card", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Card" }), _jsx(LinkButton, { to: "/docs/datafield", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DataField" }), _jsx(LinkButton, { to: "/docs/tabsgroup", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "TabsGroup" }), _jsx(LinkButton, { to: "/docs/datatable", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DataTable" }), _jsx(LinkButton, { to: "/docs/accordion", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Accordion" }), _jsx(LinkButton, { to: "/docs/menu", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Menu" }), _jsx(LinkButton, { to: "/docs/dropdownmenu", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DropdownMenu" }), _jsx(LinkButton, { to: "/docs/dropdownpanel", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DropdownPanel" }), _jsx(LinkButton, { to: "/docs/filter", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Filter" })] }) }), _jsx(Accordion, { title: "Utils", icon: "fa-tools", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/badge", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Badge" }), _jsx(LinkButton, { to: "/docs/avatar", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Avatar" }), _jsx(LinkButton, { to: "/docs/roadmap", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "RoadMap" }), _jsx(LinkButton, { to: "/docs/dialog", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Dialog" }), _jsx(LinkButton, { to: "/docs/loader", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Loader" }), _jsx(LinkButton, { to: "/docs/skeleton", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Skeleton" }), _jsx(LinkButton, { to: "/docs/snackbar", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Snackbar" }), _jsx(LinkButton, { to: "/docs/theme", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "ThemeSwitcher" })] }) }), _jsx(Accordion, { title: "Contexts", icon: "fa-database", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/auth", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "AuthContext" }), _jsx(LinkButton, { to: "/docs/listcrud", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "CrudContext" })] }) }), _jsx(Accordion, { title: "Otros", icon: "fa-folder", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/example-form", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Formulario de Ejemplo" }), _jsx(LinkButton, { to: "/docs/admin", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Admin (Mock Services)" })] }) })] }));
-};

package/dist/docs/DocsRouter.d.ts

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

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

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

package/dist/docs/DocsRouter.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Routes, Route, Navigate } from "react-router-dom";
-import ButtonDocs from "./ButtonDocs";
-import LinkButtonDocs from "./LinkButtonDocs";
-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";
-import DialogDocs from "./DialogDocs";
-import PaginationDocs from "./PaginationDocs";
-import LoaderDocs from "./LoaderDocs";
-import DataTableDocs from "./DataTableDocs";
-import DropdownMenuDocs from "./DropdownMenuDocs";
-import DropdownPanelDocs from "./DropdownPanelDocs";
-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 MenuDocs from "./MenuDocs";
-import SnackbarDocs from "./SnackbarDocs";
-import AccordionDocs from "./AccordionDocs";
-import SkeletonDocs from "./SkeletonDocs";
-import CurrencyInputDocs from "./CurrencyInputDocs";
-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: "linkbutton", element: _jsx(LinkButtonDocs, {}) }), _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: "currency-input", element: _jsx(CurrencyInputDocs, {}) }), _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: "dropdownpanel", element: _jsx(DropdownPanelDocs, {}) }), _jsx(Route, { path: "filter", element: _jsx(FilterDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) }), _jsx(Route, { path: "listcrud/empresa/:id", element: _jsx(ListCrudDocs, {}) }), _jsx(Route, { path: "listcrud", element: _jsx(ListCrudDocs, {}) }), _jsx(Route, { path: "example-form", element: _jsx(ExampleFormDocs, {}) }), _jsx(Route, { path: "menu", element: _jsx(MenuDocs, {}) }), _jsx(Route, { path: "snackbar", element: _jsx(SnackbarDocs, {}) }), _jsx(Route, { path: "accordion", element: _jsx(AccordionDocs, {}) }), _jsx(Route, { path: "skeleton", element: _jsx(SkeletonDocs, {}) }), _jsx(Route, { path: "admin", element: _jsx(DocAdmin, {}) })] }));
-};
-export default DocsRouter;

package/dist/docs/DropdownMenuDocs.d.ts

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