flysoft-react-ui 0.3.3 → 0.5.0

package/dist/docs/DialogDocs.js

@@ -0,0 +1,12 @@
+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);
+    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" }), "."] }), _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", dialogBody: _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 en el ", _jsx("code", { children: "dialogBody" }), "."] }), _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." })] }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenBasic(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", onClick: () => setIsOpenBasic(false), children: "Aceptar" })] }), onClose: () => setIsOpenBasic(false) })] })] }), _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", dialogBody: _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" })] }), dialogActions: _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) })] })] }), _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: "fa fa-exclamation-triangle text-[var(--color-danger)]" }), _jsx("span", { children: "Confirmar Eliminaci\u00F3n" })] }), dialogBody: _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" }) })] }), dialogActions: _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) })] })] }), _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", dialogBody: _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." })] }), dialogActions: _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 })] })] }), _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: "fa fa-info-circle text-[var(--color-primary)]" }), _jsx("span", { children: "Informaci\u00F3n Importante" }), _jsx(Badge, { variant: "info", size: "sm", children: "Nuevo" })] }), dialogBody: _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: "fa fa-lightbulb mr-2" }), "Puedes usar cualquier componente React en el t\u00EDtulo, body y acciones."] }) })] }), dialogActions: _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) })] })] }), _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"] })] }) }) })] })] }) }) }));
+};
+export default DialogDocs;

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,+CAqCpB,CAAC"}
+{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAuDpB,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/auth", children: "AuthContext" }) })] }) }));
+    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" }) })] }) }));
 };

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;AAa1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAgB9B,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;AAmB1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAsB9B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/DocsRouter.js

@@ -10,8 +10,14 @@ import DataFieldDocs from "./DataFieldDocs";
 import AutocompleteInputDocs from "./AutocompleteInputDocs";
 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 { AuthDocs } from "./AuthDocs.tsx/AuthDocs";
 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: "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: "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, {}) })] }));
 };
 export default DocsRouter;

package/dist/docs/DropdownMenuDocs.d.ts

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

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

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

package/dist/docs/DropdownMenuDocs.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Card, DropdownMenu, Button, Badge } from "../index";
+const DropdownMenuDocs = () => {
+    const [selectedItem, setSelectedItem] = useState(null);
+    // Opciones básicas con propiedad label
+    const basicOptions = [
+        { label: "Editar", id: "edit" },
+        { label: "Eliminar", id: "delete" },
+        { label: "Compartir", id: "share" },
+        { label: "Duplicar", id: "duplicate" },
+    ];
+    // Opciones con iconos usando renderOption
+    const optionsWithIcons = [
+        { label: "Editar", icon: "fa-edit", action: "edit" },
+        { label: "Eliminar", icon: "fa-trash", action: "delete" },
+        { label: "Compartir", icon: "fa-share", action: "share" },
+        { label: "Duplicar", icon: "fa-copy", action: "duplicate" },
+    ];
+    // Opciones complejas usando renderOption
+    const complexOptions = [
+        { label: "Ver Perfil", icon: "fa-user", action: "profile" },
+        { label: "Configuración", icon: "fa-cog", action: "settings" },
+        { label: "Cerrar Sesión", icon: "fa-sign-out-alt", action: "logout" },
+    ];
+    // Opciones con estructura diferente usando getOptionLabel
+    const userOptions = [
+        { id: 1, name: "Juan Pérez", email: "juan@ejemplo.com", role: "Admin" },
+        { id: 2, name: "María García", email: "maria@ejemplo.com", role: "User" },
+        { id: 3, name: "Carlos López", email: "carlos@ejemplo.com", role: "User" },
+    ];
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DropdownMenu - 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 DropdownMenu muestra un men\u00FA desplegable con opciones. Por defecto, muestra un bot\u00F3n con tres puntos horizontales. Al hacer clic, se abre un men\u00FA flotante con las opciones. Las opciones deben ser objetos con una propiedad", " ", _jsx("code", { children: "label" }), " o usar ", _jsx("code", { children: "getOptionLabel" }), "."] }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
+                                                setSelectedItem(item);
+                                            } }), selectedItem && (_jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Opci\u00F3n seleccionada: ", _jsx("strong", { children: selectedItem.label }), " ", "(id: ", selectedItem.id, ")"] }))] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Opciones con iconos usando renderOption" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando ", _jsx("code", { children: "renderOption" }), " puedes personalizar completamente c\u00F3mo se renderiza cada opci\u00F3n, incluyendo iconos, badges u otros componentes."] }), _jsx("div", { className: "space-y-4", children: _jsx(DropdownMenu, { options: optionsWithIcons, onOptionSelected: (item) => {
+                                        console.log("Opción seleccionada:", item);
+                                    }, renderOption: (item) => (_jsxs("span", { children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] })) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Opciones complejas con renderOption" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Ejemplo de men\u00FA con opciones que incluyen m\u00FAltiples elementos como badges y diferentes estilos usando ", _jsx("code", { children: "renderOption" }), "."] }), _jsx("div", { className: "space-y-4", children: _jsx(DropdownMenu, { options: complexOptions, onOptionSelected: (item) => {
+                                        console.log("Opción compleja seleccionada:", item);
+                                    }, renderOption: (item) => {
+                                        if (item.action === "profile") {
+                                            return (_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("span", { className: "mr-2", children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] }), _jsx(Badge, { variant: "info", size: "sm", children: "Nuevo" })] }));
+                                        }
+                                        if (item.action === "logout") {
+                                            return (_jsxs("div", { className: "flex items-center text-[var(--color-danger)]", children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] }));
+                                        }
+                                        return (_jsxs("div", { className: "flex items-center", children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] }));
+                                    } }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Usando getOptionLabel" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando los objetos no tienen una propiedad ", _jsx("code", { children: "label" }), ", puedes usar ", _jsx("code", { children: "getOptionLabel" }), " para especificar c\u00F3mo obtener el texto a mostrar."] }), _jsx("div", { className: "space-y-4", children: _jsx(DropdownMenu, { options: userOptions, onOptionSelected: (item) => {
+                                        console.log("Usuario seleccionado:", item);
+                                    }, getOptionLabel: (item) => item.name }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Reemplazar con opci\u00F3n \u00FAnica (replaceOnSingleOption)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando ", _jsx("code", { children: "replaceOnSingleOption" }), " es ", _jsx("code", { children: "true" }), " y hay una sola opci\u00F3n, el componente muestra directamente la opci\u00F3n en lugar del bot\u00F3n trigger. \u00DAtil cuando solo hay una acci\u00F3n disponible y no necesitas un men\u00FA desplegable."] }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4 flex-wrap", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Con replaceOnSingleOption=false (por defecto):" }), _jsx(DropdownMenu, { options: [{ label: "Única acción", id: "single" }], onOptionSelected: (item) => {
+                                                        console.log("Opción seleccionada:", item);
+                                                    } })] }), _jsxs("div", { children: [_jsx("p", { className: "text-xs mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Con replaceOnSingleOption=true:" }), _jsx(DropdownMenu, { options: [{ label: "Única acción", id: "single" }], onOptionSelected: (item) => {
+                                                        console.log("Opción seleccionada:", item);
+                                                    }, replaceOnSingleOption: true })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con renderNode personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "renderNode" }), " puedes personalizar el elemento que activa el men\u00FA. En lugar del bot\u00F3n con tres puntos, puedes usar cualquier componente React."] }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4 flex-wrap", children: [_jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
+                                                console.log("Opción seleccionada:", item);
+                                            }, renderNode: _jsx(Button, { variant: "primary", icon: "fa-cog", children: "Men\u00FA de Acciones" }) }), _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
+                                                console.log("Opción seleccionada:", item);
+                                            }, renderNode: _jsx(Button, { variant: "outline", icon: "fa-ellipsis-h", children: "M\u00E1s opciones" }) }), _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
+                                                console.log("Opción seleccionada:", item);
+                                            }, renderNode: _jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-[var(--color-bg-secondary)] rounded cursor-pointer hover:bg-[var(--color-bg-hover)] transition-colors", children: [_jsx("i", { className: "fa fa-user-circle" }), _jsx("span", { children: "Usuario" }), _jsx("i", { className: "fa fa-chevron-down text-xs" })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Posicionamiento inteligente" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El men\u00FA se posiciona autom\u00E1ticamente arriba o abajo seg\u00FAn el espacio disponible en la pantalla. Prueba hacer scroll hacia abajo y abrir el men\u00FA cerca del borde inferior de la pantalla." }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex justify-center", children: _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
+                                                    console.log("Opción seleccionada:", item);
+                                                } }) }), _jsx("div", { className: "h-96 flex items-end justify-center", style: { minHeight: "400px" }, children: _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
+                                                    console.log("Opción seleccionada:", item);
+                                                } }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo en tabla" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de uso com\u00FAn: men\u00FA de acciones en una fila de tabla." }), _jsx("div", { className: "space-y-4", children: _jsx("div", { className: "border border-[var(--color-border-default)] rounded", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Nombre" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Email" }), _jsx("th", { className: "px-4 py-2 text-right text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Acciones" })] }) }), _jsx("tbody", { children: userOptions.map((user) => (_jsxs("tr", { className: "border-b border-[var(--color-border-default)] hover:bg-[var(--color-bg-hover)]", children: [_jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-primary)" }, children: user.name }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: user.email }), _jsx("td", { className: "px-4 py-2 text-right", children: _jsx(DropdownMenu, { options: optionsWithIcons, onOptionSelected: (item) => {
+                                                                    console.log(`Acción ${item.action} para usuario:`, user.name);
+                                                                }, renderOption: (item) => (_jsxs("span", { children: [_jsx("i", { className: `fa ${item.icon} mr-2` }), item.label] })) }) })] }, user.id))) })] }) }) })] }), _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: "Gen\u00E9rico y tipado:" }), " El componente es gen\u00E9rico y acepta cualquier tipo de objeto, manteniendo la seguridad de tipos"] }), _jsxs("li", { children: [_jsx("strong", { children: "Posicionamiento inteligente:" }), " El men\u00FA se posiciona autom\u00E1ticamente arriba o abajo seg\u00FAn el espacio disponible en la pantalla"] }), _jsxs("li", { children: [_jsx("strong", { children: "Cierre autom\u00E1tico:" }), " El men\u00FA se cierra al hacer clic fuera de \u00E9l o al presionar la tecla Escape"] }), _jsxs("li", { children: [_jsx("strong", { children: "Renderizado flexible:" }), " Usa", " ", _jsx("code", { children: "renderOption" }), " para renderizado personalizado,", " ", _jsx("code", { children: "getOptionLabel" }), " para obtener el label, o la propiedad ", _jsx("code", { children: "label" }), " por defecto"] }), _jsxs("li", { children: [_jsx("strong", { children: "Trigger personalizable:" }), " Puedes usar", " ", _jsx("code", { children: "renderNode" }), " para personalizar el elemento que activa el men\u00FA"] }), _jsxs("li", { children: [_jsx("strong", { children: "Callback de selecci\u00F3n:" }), " El callback", " ", _jsx("code", { children: "onOptionSelected" }), " recibe el objeto completo seleccionado, no solo el \u00EDndice"] }), _jsxs("li", { children: [_jsx("strong", { children: "Estilos tem\u00E1ticos:" }), " Respeta las variables CSS del tema actual"] }), _jsxs("li", { children: [_jsx("strong", { children: "Accesibilidad:" }), " Soporte para navegaci\u00F3n por teclado (Escape para cerrar)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Opci\u00F3n \u00FAnica:" }), " Con", " ", _jsx("code", { children: "replaceOnSingleOption" }), " puedes mostrar directamente la opci\u00F3n cuando solo hay una disponible, sin necesidad de un men\u00FA desplegable"] })] }) }) })] }), _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: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Requerido" }), _jsx("th", { className: "px-4 py-2 text-left text-sm 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: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "options" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "T[]" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsxs("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Array de opciones gen\u00E9ricas. Por defecto se asume que tienen una propiedad ", _jsx("code", { children: "label" }), ", o se puede usar", " ", _jsx("code", { children: "getOptionLabel" }), "."] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "onOptionSelected" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "(item: T) => void" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Callback que se ejecuta cuando se selecciona una opci\u00F3n. Recibe el objeto completo seleccionado." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "renderNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Elemento personalizado que activa el men\u00FA. Si no se proporciona, se muestra un bot\u00F3n ghost con tres puntos horizontales." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "getOptionLabel" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "(item: T) => string" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsxs("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Funci\u00F3n para obtener el label de cada opci\u00F3n. Si no se proporciona, se usa la propiedad ", _jsx("code", { children: "label" }), " del objeto."] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "renderOption" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "(item: T) => ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsxs("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Funci\u00F3n para renderizar completamente cada opci\u00F3n. Si se define, se ignora ", _jsx("code", { children: "getOptionLabel" }), " y la propiedad ", _jsx("code", { children: "label" }), "."] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "replaceOnSingleOption" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "boolean" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsxs("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Si es ", _jsx("code", { children: "true" }), " y hay una sola opci\u00F3n, muestra directamente la opci\u00F3n en lugar del trigger (bot\u00F3n con tres puntos o renderNode). Por defecto es", " ", _jsx("code", { children: "false" }), "."] })] })] })] }) })] })] }) }) }));
+};
+export default DropdownMenuDocs;

package/dist/docs/LoaderDocs.d.ts

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

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

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

package/dist/docs/LoaderDocs.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Card, Loader, Button, Input } from "../index";
+const LoaderDocs = () => {
+    const [isLoading1, setIsLoading1] = useState(false);
+    const [isLoading2, setIsLoading2] = useState(false);
+    const [isLoading3, setIsLoading3] = useState(false);
+    const [isLoading4, setIsLoading4] = useState(false);
+    const [isLoading5, setIsLoading5] = useState(false);
+    const [isLoading6, setIsLoading6] = useState(false);
+    // Componente Skeleton para el ejemplo
+    const SkeletonCard = () => (_jsx(Card, { title: "Cargando contenido...", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-4 bg-[var(--color-bg-secondary)] rounded animate-pulse w-3/4" }), _jsx("div", { className: "h-4 bg-[var(--color-bg-secondary)] rounded animate-pulse w-full" }), _jsx("div", { className: "h-4 bg-[var(--color-bg-secondary)] rounded animate-pulse w-5/6" })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx("div", { className: "h-20 bg-[var(--color-bg-secondary)] rounded animate-pulse" }), _jsx("div", { className: "h-20 bg-[var(--color-bg-secondary)] rounded animate-pulse" }), _jsx("div", { className: "h-20 bg-[var(--color-bg-secondary)] rounded animate-pulse" })] }), _jsx("div", { className: "h-10 bg-[var(--color-bg-secondary)] rounded animate-pulse w-1/3" })] }) }));
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Loader - 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: "Loader b\u00E1sico, sin children" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Cuando no hay children ni contentLoadingNode, el Loader muestra \u00FAnicamente la barra de progreso y el texto. Ideal para pantallas de carga completas." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-spinner", onClick: () => {
+                                            setIsLoading1(true);
+                                            setTimeout(() => setIsLoading1(false), 3000);
+                                        }, children: "Mostrar Loader B\u00E1sico" }), _jsx(Loader, { isLoading: isLoading1 })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader b\u00E1sico con texto personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el texto que se muestra debajo de la barra de progreso usando la prop ", _jsx("code", { children: "text" }), "."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-file-upload", onClick: () => {
+                                            setIsLoading2(true);
+                                            setTimeout(() => setIsLoading2(false), 3000);
+                                        }, children: "Mostrar Loader con Texto Personalizado" }), _jsx(Loader, { isLoading: isLoading2, text: "Subiendo archivo... Por favor espera." })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children pero sin contentLoadingNode ni keepContentWhileLoading" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Cuando hay children pero no contentLoadingNode, el Loader muestra los children con un overlay semitransparente y la barra de progreso centrada. Los eventos del mouse y teclado se deshabilitan en los children." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-layer-group", onClick: () => {
+                                            setIsLoading3(true);
+                                            setTimeout(() => setIsLoading3(false), 3000);
+                                        }, children: "Mostrar Loader con Overlay" }), _jsx(Loader, { isLoading: isLoading3, children: _jsx(Card, { title: "Contenido con Loader", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "usuario@ejemplo.com", icon: "fa-envelope" }), _jsx(Button, { variant: "primary", icon: "fa-save", children: "Guardar" })] }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children y keepContentWhileLoading" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando ", _jsx("code", { children: "keepContentWhileLoading" }), " los children mantienen su opacidad normal pero siguen deshabilitados para interacci\u00F3n."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-eye", onClick: () => {
+                                            setIsLoading4(true);
+                                            setTimeout(() => setIsLoading4(false), 3000);
+                                        }, children: "Mostrar Loader (mantener contenido visible)" }), _jsx(Loader, { isLoading: isLoading4, keepContentWhileLoading: true, children: _jsx(Card, { title: "Contenido Visible Durante Carga", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "B\u00FAsqueda", placeholder: "Buscar productos...", icon: "fa-search" }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Producto 1" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Producto 2" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Producto 3" }) })] })] }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children y contentLoadingNode (skeleton)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando se proporciona ", _jsx("code", { children: "contentLoadingNode" }), ", los children se ocultan y se muestra el nodo personalizado con el loader centrado encima. En este ejemplo usamos un skeleton para mostrar el contenido que se est\u00E1 cargando."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-image", onClick: () => {
+                                            setIsLoading5(true);
+                                            setTimeout(() => setIsLoading5(false), 3000);
+                                        }, children: "Mostrar Loader con Skeleton" }), _jsx(Loader, { isLoading: isLoading5, contentLoadingNode: _jsx(SkeletonCard, {}), children: _jsx(Card, { title: "Contenido Real (oculto durante carga)", children: _jsxs("div", { className: "space-y-4", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este es el contenido real que se mostrar\u00E1 cuando termine la carga." }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Item 1" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Item 2" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Item 3" }) })] })] }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children y keepContentWhileLoading pero cambiando el color del overlay" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el overlay usando la prop", " ", _jsx("code", { children: "overlayClassName" }), " con clases de Tailwind. \u00DAtil para adaptar el loader a diferentes fondos de interfaz, cambiar el border radius, padding, color, etc. En este ejemplo usamos un overlay blanco semitransparente con border radius personalizado."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-palette", onClick: () => {
+                                            setIsLoading6(true);
+                                            setTimeout(() => setIsLoading6(false), 3000);
+                                        }, children: "Mostrar Loader (Overlay Blanco)" }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx(Loader, { isLoading: isLoading6, keepContentWhileLoading: true, overlayClassName: "bg-white/50 backdrop-blur-sm rounded-lg", children: _jsx(Card, { title: "Contenido con Overlay Personalizado", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Campo 1", placeholder: "Ejemplo...", icon: "fa-edit" }), _jsx(Input, { label: "Campo 2", placeholder: "Ejemplo...", icon: "fa-edit" }), _jsx(Button, { variant: "primary", icon: "fa-save", children: "Guardar" })] }) }) }) })] })] }), _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: "Barra de progreso infinita:" }), " Animaci\u00F3n continua usando el color primario del tema"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tres variantes de uso:" }), " Solo loader, con overlay sobre children, o con nodo personalizado"] }), _jsxs("li", { children: [_jsx("strong", { children: "Deshabilitaci\u00F3n de eventos:" }), " Cuando est\u00E1 cargando, deshabilita todos los eventos del mouse y teclado en los children"] }), _jsxs("li", { children: [_jsx("strong", { children: "Overlay semitransparente:" }), " Similar al Dialog, con efecto blur para mejor enfoque visual"] }), _jsxs("li", { children: [_jsx("strong", { children: "Texto personalizable:" }), " Puedes cambiar el texto que se muestra debajo de la barra de progreso"] }), _jsxs("li", { children: [_jsx("strong", { children: "Integraci\u00F3n con tema:" }), " Usa el color primario del tema actual autom\u00E1ticamente"] }), _jsxs("li", { children: [_jsx("strong", { children: "Contenido condicional:" }), " Con keepContentWhileLoading puedes mantener el contenido visible pero deshabilitado"] }), _jsxs("li", { children: [_jsx("strong", { children: "Overlay personalizable:" }), " Puedes personalizar completamente el overlay usando overlayClassName con clases de Tailwind para cambiar color, border radius, padding, etc."] })] }) }) })] }), _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: "Default" }), _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: "isLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsx("td", { className: "p-3 text-sm", children: "false" }), _jsx("td", { className: "p-3 text-sm", children: "Controla si el loader est\u00E1 visible" })] }), _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: "text" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "\"Cargando...\"" }), _jsx("td", { className: "p-3 text-sm", children: "Texto que se muestra debajo de la barra de progreso" })] }), _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: "children" }) }), _jsx("td", { className: "p-3 text-sm", children: "ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "-" }), _jsx("td", { className: "p-3 text-sm", children: "Contenido que se mostrar\u00E1 con overlay cuando isLoading es true" })] }), _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: "keepContentWhileLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsx("td", { className: "p-3 text-sm", children: "false" }), _jsx("td", { className: "p-3 text-sm", children: "Si es true, mantiene el contenido visible (sin reducir opacidad) pero deshabilitado" })] }), _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: "contentLoadingNode" }) }), _jsx("td", { className: "p-3 text-sm", children: "ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "-" }), _jsx("td", { className: "p-3 text-sm", children: "Nodo personalizado que se muestra en lugar de children cuando isLoading es true" })] }), _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: "overlayClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "\"bg-black/50 backdrop-blur-sm\"" }), _jsx("td", { className: "p-3 text-sm", children: "Clases de Tailwind para personalizar el overlay (ej: \"bg-white/50 backdrop-blur-sm rounded-lg\" para overlay blanco con border radius)" })] })] })] }) })] })] }) }) }));
+};
+export default LoaderDocs;

package/dist/docs/PaginationDocs.d.ts

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

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

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

package/dist/docs/PaginationDocs.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { Card, Pagination } from "../index";
+const PaginationDocs = () => {
+    const [searchParams] = useSearchParams();
+    const currentPage = parseInt(searchParams.get("pagina") || "1", 10);
+    const [page, setPage] = useState(currentPage);
+    const [customPage, setCustomPage] = useState(2);
+    useEffect(() => {
+        const pageParam = searchParams.get("pagina");
+        if (pageParam) {
+            setPage(parseInt(pageParam, 10));
+        }
+    }, [searchParams]);
+    useEffect(() => {
+        const customPageParam = searchParams.get("page");
+        if (customPageParam) {
+            setCustomPage(parseInt(customPageParam, 10));
+        }
+    }, [searchParams]);
+    // Ejemplo de datos paginados
+    const mockData = {
+        list: Array.from({ length: 50 }, (_, i) => `Elemento ${i + 1}`),
+        limit: 10,
+        page: page,
+        pages: 5,
+        total: 50,
+    };
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Pagination - Navegaci\u00F3n de P\u00E1ginas", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente Pagination permite navegar entre p\u00E1ginas de resultados. Modifica autom\u00E1ticamente el query parameter en la URL para mantener el estado de navegaci\u00F3n." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: mockData.page, pages: mockData.pages, total: mockData.total }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con nombre de campo personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el nombre del query parameter usando la prop", " ", _jsx("code", { children: "fieldName" }), ". Por defecto es \"p\u00E1gina\"."] }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { fieldName: "page", page: customPage, pages: 10, total: 100 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Primera p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los botones de navegaci\u00F3n anterior y primera p\u00E1gina se deshabilitan autom\u00E1ticamente cuando est\u00E1s en la primera p\u00E1gina." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 1, pages: 5, total: 50 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00DAltima p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los botones de navegaci\u00F3n siguiente y \u00FAltima p\u00E1gina se deshabilitan autom\u00E1ticamente cuando est\u00E1s en la \u00FAltima p\u00E1gina." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 5, pages: 5, total: 50 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Una sola p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Cuando solo hay una p\u00E1gina, todos los botones de navegaci\u00F3n se deshabilitan autom\u00E1ticamente." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 1, pages: 1, total: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Interfaz PaginationInterface" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La interfaz ", _jsx("code", { children: "PaginationInterface<T>" }), " define la estructura de datos para informaci\u00F3n de paginaci\u00F3n:"] }), _jsx("div", { className: "p-4 rounded-sm bg-[var(--color-bg-secondary)]", style: { fontFamily: "monospace", fontSize: "0.875rem" }, children: _jsx("pre", { style: { color: "var(--color-text-primary)" }, children: `export interface PaginationInterface<T> {
+  list: Array<T>;
+  limit: number;
+  page: number;
+  pages: number;
+  total: number;
+}` }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props del componente" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "fieldName?: string" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Nombre del query parameter que se usar\u00E1 para la p\u00E1gina. Por defecto es \"pagina\"." })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "page?: number" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "N\u00FAmero de p\u00E1gina actual. Por defecto es 1." })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "pages?: number" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "N\u00FAmero total de p\u00E1ginas. Por defecto es 1." })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "total?: number" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "N\u00FAmero total de elementos. Por defecto es 0." })] })] })] })] }) }) }));
+};
+export default PaginationDocs;

package/dist/docs/TabsGroupDocs.d.ts

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

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

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

package/dist/docs/TabsGroupDocs.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Card, TabsGroup, TabPanel, Button, Badge, Input } from "../index";
+const TabsGroupDocs = () => {
+    const [selectedTab, setSelectedTab] = useState("");
+    const basicTabs = [
+        { id: "users", label: "Usuarios" },
+        { id: "roles", label: "Roles" },
+        { id: "permissions", label: "Permisos" },
+    ];
+    const tabsWithNumbers = [
+        { id: 1, label: "Primero" },
+        { id: 2, label: "Segundo" },
+        { id: 3, label: "Tercero" },
+    ];
+    const tabsWithHeader = [
+        { id: "dashboard", label: "Dashboard" },
+        { id: "analytics", label: "Analytics" },
+        { id: "reports", label: "Reportes" },
+    ];
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "TabsGroup - 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" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente TabsGroup permite organizar contenido en pesta\u00F1as. Cada TabPanel muestra su contenido cuando el tab correspondiente est\u00E1 activo." }), _jsx(Card, { title: "Ejemplo b\u00E1sico", children: _jsxs(TabsGroup, { tabs: basicTabs, children: [_jsx(TabPanel, { tabId: "users", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Lista de Usuarios" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de usuarios. Aqu\u00ED puedes mostrar una lista, formulario, o cualquier contenido relacionado con usuarios." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-user-plus", children: "Agregar Usuario" }), _jsx(Button, { variant: "outline", icon: "fa-search", children: "Buscar" })] })] }) }), _jsx(TabPanel, { tabId: "roles", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Gesti\u00F3n de Roles" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de roles. Aqu\u00ED puedes gestionar los diferentes roles del sistema." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-shield-alt", children: "Crear Rol" }), _jsx(Button, { variant: "outline", icon: "fa-list", children: "Ver Todos" })] })] }) }), _jsx(TabPanel, { tabId: "permissions", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Permisos del Sistema" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de permisos. Aqu\u00ED puedes configurar los permisos disponibles en el sistema." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-key", children: "Asignar Permisos" }), _jsx(Button, { variant: "outline", icon: "fa-cog", children: "Configurar" })] })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabs con IDs num\u00E9ricos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los tabs pueden usar tanto strings como n\u00FAmeros como identificadores." }), _jsx(Card, { title: "Ejemplo con IDs num\u00E9ricos", children: _jsxs(TabsGroup, { tabs: tabsWithNumbers, children: [_jsx(TabPanel, { tabId: 1, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Primer Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 1." })] }) }), _jsx(TabPanel, { tabId: 2, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Segundo Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 2." })] }) }), _jsx(TabPanel, { tabId: 3, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Tercer Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 3." })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabs con headerNode" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El prop headerNode permite agregar contenido adicional en la misma l\u00EDnea que los tabs, alineado a la derecha. \u00DAtil para botones de acci\u00F3n, badges, o cualquier otro contenido." }), _jsx(Card, { title: "Ejemplo con headerNode", children: _jsxs(TabsGroup, { tabs: tabsWithHeader, headerNode: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "info", children: "Nuevo" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-plus", children: "Agregar" })] }), children: [_jsx(TabPanel, { tabId: "dashboard", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Dashboard" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Vista general del sistema con m\u00E9tricas y estad\u00EDsticas importantes." })] }) }), _jsx(TabPanel, { tabId: "analytics", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Analytics" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "An\u00E1lisis detallado de datos y tendencias del sistema." })] }) }), _jsx(TabPanel, { tabId: "reports", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Reportes" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Generaci\u00F3n y visualizaci\u00F3n de reportes del sistema." })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con callback onChangeTab" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El prop onChangeTab permite ejecutar una funci\u00F3n cuando se cambia de tab. \u00DAtil para sincronizar estado externo o realizar acciones al cambiar de pesta\u00F1a." }), _jsx(Card, { title: "Ejemplo con onChangeTab", children: _jsxs("div", { className: "space-y-4", children: [selectedTab && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", children: [_jsx("span", { className: "font-semibold", children: "Tab seleccionado:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: selectedTab })] }) })), _jsxs(TabsGroup, { tabs: basicTabs, onChangeTab: (tab) => setSelectedTab(tab), children: [_jsx(TabPanel, { tabId: "users", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Usuarios" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab notifica el cambio mediante onChangeTab." })] }) }), _jsx(TabPanel, { tabId: "roles", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Roles" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab tambi\u00E9n notifica el cambio mediante onChangeTab." })] }) }), _jsx(TabPanel, { tabId: "permissions", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Permisos" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab tambi\u00E9n notifica el cambio mediante onChangeTab." })] }) })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo completo con formularios" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo pr\u00E1ctico usando TabsGroup con TabPanel para organizar formularios en diferentes secciones." }), _jsx(Card, { title: "Formulario de Configuraci\u00F3n", children: _jsxs(TabsGroup, { tabs: [
+                                        { id: "personal", label: "Personal" },
+                                        { id: "contact", label: "Contacto" },
+                                        { id: "security", label: "Seguridad" },
+                                    ], headerNode: _jsx(Button, { size: "sm", variant: "primary", icon: "fa-save", children: "Guardar Cambios" }), children: [_jsx(TabPanel, { tabId: "personal", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Informaci\u00F3n Personal" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Apellido", placeholder: "Ingresa tu apellido", icon: "fa-user" }), _jsx(Input, { label: "Fecha de Nacimiento", type: "date", icon: "fa-calendar" })] })] }) }), _jsx(TabPanel, { tabId: "contact", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Informaci\u00F3n de Contacto" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Email", type: "email", placeholder: "correo@ejemplo.com", icon: "fa-envelope" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" }), _jsx(Input, { label: "Direcci\u00F3n", placeholder: "Calle, n\u00FAmero, ciudad", icon: "fa-map-marker-alt" })] })] }) }), _jsx(TabPanel, { tabId: "security", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Configuraci\u00F3n de Seguridad" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Contrase\u00F1a Actual", type: "password", placeholder: "Ingresa tu contrase\u00F1a actual", icon: "fa-lock" }), _jsx(Input, { label: "Nueva Contrase\u00F1a", type: "password", placeholder: "Ingresa tu nueva contrase\u00F1a", icon: "fa-key" }), _jsx(Input, { label: "Confirmar Contrase\u00F1a", type: "password", placeholder: "Confirma tu nueva contrase\u00F1a", icon: "fa-key" })] })] }) })] }) })] })] }) }) }));
+};
+export default TabsGroupDocs;