flysoft-react-ui 0.4.0 → 0.5.2

package/dist/docs/DocsMenu.js

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

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

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

package/dist/docs/DocsRouter.js

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

package/dist/docs/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/ExampleFormDocs.d.ts

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

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

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

package/dist/docs/ExampleFormDocs.js

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

package/dist/docs/FilterDocs.d.ts

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

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

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

package/dist/docs/FilterDocs.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useSearchParams } from "react-router-dom";
+import { Card, Filter, Collection, FiltersDialog } from "../index";
+import dayjs from "dayjs";
+import { personaService } from "./docMockServices/personaService";
+const FilterDocs = () => {
+    const [searchParams] = useSearchParams();
+    const currentFilterValue = searchParams.get("filtro");
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Filter - Gesti\u00F3n de Filtros con Query Parameters", 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 Filter permite gestionar filtros que se sincronizan con los query parameters de la URL. El valor se obtiene autom\u00E1ticamente del query parameter que coincida con el", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "paramName" }), " ", "proporcionado. Al setear el filtro, se actualiza la URL sin perder los dem\u00E1s query parameters y sin agregar una nueva entrada al historial del navegador."] }), _jsx(Card, { title: "Ejemplo b\u00E1sico", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Filter, { paramName: "filtro", label: "Filtro" }), currentFilterValue && (_jsxs("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: "Valor del filtro:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: currentFilterValue })] }), _jsxs("p", { className: "text-xs mt-1", style: { color: "var(--flysoft-text-secondary)" }, children: ["URL actual:", " ", _jsxs("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: ["?filtro=", currentFilterValue] })] }), _jsx("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 El componente muestra el valor actual del query parameter. Al hacer clic en \"setear\", se actualiza la URL con el valor del estado interno." })] })), !currentFilterValue && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 El filtro est\u00E1 vac\u00EDo. El componente mostrar\u00E1 \"undefined\" hasta que se establezca un valor." }) }))] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Sincronizaci\u00F3n con URL" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente se sincroniza autom\u00E1ticamente con los query parameters de la URL. Si la URL contiene el par\u00E1metro al cargar la p\u00E1gina, el componente mostrar\u00E1 ese valor. Si cambias la URL manualmente, el componente se actualizar\u00E1 autom\u00E1ticamente." }), _jsx(Card, { title: "Ejemplo con sincronizaci\u00F3n", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: ["Prueba agregar", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?test=valor123" }), " ", "a la URL y observa c\u00F3mo el componente se actualiza autom\u00E1ticamente."] }) }), _jsx(Filter, { paramName: "test", label: "Filtro de prueba" }), _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: ["\uD83D\uDCA1 Al hacer clic en \"setear\", la URL se actualiza usando", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "replace: true" }), ", lo que significa que al presionar el bot\u00F3n \"atr\u00E1s\" del navegador, volver\u00E1s a la p\u00E1gina anterior, no a la misma p\u00E1gina sin el par\u00E1metro."] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "M\u00FAltiples filtros" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes usar m\u00FAltiples componentes Filter con diferentes", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "paramName" }), " ", "para gestionar varios filtros simult\u00E1neamente. Cada filtro mantiene su propio estado y se sincroniza con su respectivo query parameter."] }), _jsx(Card, { title: "Ejemplo con m\u00FAltiples filtros", children: _jsxs("div", { className: "space-y-4", children: [_jsxs(Collection, { direction: "row", gap: "1rem", wrap: true, children: [_jsx(Filter, { paramName: "categoria", label: "Categor\u00EDa", filterType: "text" }), _jsx(Filter, { paramName: "cantidad", label: "Cantidad", filterType: "number", min: 0, max: 1000 }), _jsx(Filter, { paramName: "fecha", label: "Fecha", filterType: "date", staticOptions: [
+                                                        { text: "Hoy", value: dayjs().format("YYYY-MM-DD") },
+                                                        {
+                                                            text: "Ayer",
+                                                            value: dayjs().subtract(1, "day").format("YYYY-MM-DD"),
+                                                        },
+                                                        {
+                                                            text: "Última semana",
+                                                            value: dayjs().subtract(1, "week").format("YYYY-MM-DD"),
+                                                        },
+                                                        {
+                                                            text: "Último mes",
+                                                            value: dayjs()
+                                                                .subtract(1, "month")
+                                                                .format("YYYY-MM-DD"),
+                                                        },
+                                                        {
+                                                            text: "Último año",
+                                                            value: dayjs().subtract(1, "year").format("YYYY-MM-DD"),
+                                                        },
+                                                    ].map((option) => ({
+                                                        text: option.text,
+                                                        value: option.value,
+                                                    })) }), _jsx(Filter, { paramName: "estado", label: "Estado", filterType: "autocomplete", options: [
+                                                        { label: "Activo", value: "activo" },
+                                                        { label: "Inactivo", value: "inactivo" },
+                                                        { label: "Pendiente", value: "pendiente" },
+                                                        { label: "Cancelado", value: "cancelado" },
+                                                    ] }), _jsx(Filter, { paramName: "busqueda", label: "B\u00FAsqueda", filterType: "search" })] }), _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsx("p", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Cada filtro mantiene su propio query parameter. Puedes tener varios filtros activos simult\u00E1neamente en la URL. Los filtros de tipo date guardan el valor como \"yyyy-mm-dd\" pero lo muestran como \"dd/mm/yyyy\". El filtro de tipo search muestra directamente el input sin panel desplegable y emite cambios al presionar Enter o hacer click en el \u00EDcono." }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Filtro de tipo Search" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El filtro de tipo", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "search" }), " ", "muestra directamente un campo de b\u00FAsqueda sin panel desplegable. Es ideal para b\u00FAsquedas r\u00E1pidas donde el usuario puede escribir y presionar Enter para aplicar el filtro. El \u00EDcono cambia din\u00E1micamente: muestra un \u00EDcono de b\u00FAsqueda cuando no hay valor y un \u00EDcono de X cuando hay un valor para limpiarlo."] }), _jsx(Card, { title: "Ejemplo de filtro Search", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Filter, { paramName: "busquedaTexto", label: "Buscar", filterType: "search", inputWidth: "300px" }), _jsxs("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: _jsx("span", { className: "font-semibold", children: "Caracter\u00EDsticas:" }) }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("li", { children: "Muestra el input directamente sin panel desplegable" }), _jsx("li", { children: "Al presionar Enter, emite los cambios y actualiza la URL" }), _jsx("li", { children: "El \u00EDcono cambia: b\u00FAsqueda (fa-search) cuando est\u00E1 vac\u00EDo, X (fa-times) cuando hay valor" }), _jsx("li", { children: "Al hacer click en el \u00EDcono X, limpia el valor y emite undefined" }), _jsx("li", { children: "Al hacer click en el \u00EDcono de b\u00FAsqueda, emite los cambios (submit)" }), _jsx("li", { children: "Se sincroniza autom\u00E1ticamente con el query parameter asociado" })] })] }), searchParams.get("busquedaTexto") && (_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: "Valor actual:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: searchParams.get("busquedaTexto") })] }) }))] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Filtro de tipo SearchSelect" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El filtro de tipo", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "searchSelect" }), " ", "muestra un panel desplegable con un", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "SearchSelectInput" }), " ", "que permite buscar y seleccionar opciones desde una fuente de datos as\u00EDncrona. Requiere funciones de b\u00FAsqueda que devuelvan Promises, ideal para b\u00FAsquedas en APIs o bases de datos."] }), _jsx(Card, { title: "Ejemplo de filtro SearchSelect", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Filter, { paramName: "persona", label: "Persona", filterType: "searchSelect", onSearchPromiseFn: async (text) => {
+                                                return (await personaService.listar({
+                                                    filtro: text,
+                                                }));
+                                            }, onSingleSearchPromiseFn: async (id) => {
+                                                return (await personaService.buscarPorId(Number(id)));
+                                            }, getOptionLabel: (persona) => persona.nombre, getOptionValue: (persona) => persona.id }), _jsxs("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: _jsx("span", { className: "font-semibold", children: "Caracter\u00EDsticas:" }) }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: ["Requiere", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "onSearchPromiseFn" }), " ", "para buscar opciones (recibe texto y devuelve Promise con array o PaginationInterface)"] }), _jsxs("li", { children: ["Requiere", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "onSingleSearchPromiseFn" }), " ", "para buscar una opci\u00F3n individual por su valor (recibe el valor y devuelve Promise con el objeto o undefined)"] }), _jsxs("li", { children: ["Opcionalmente puede recibir", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "getOptionLabel" }), ",", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "getOptionValue" }), ", y", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "renderOption" }), " ", "para personalizar c\u00F3mo se muestran las opciones"] }), _jsxs("li", { children: ["Al seleccionar una opci\u00F3n, se guarda el valor (usando", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "getOptionValue" }), ") pero se muestra el label en el badge"] }), _jsx("li", { children: "Se sincroniza autom\u00E1ticamente con el query parameter asociado" })] })] }), searchParams.get("persona") && (_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: "ID de persona seleccionada:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: searchParams.get("persona") })] }) }))] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Preservaci\u00F3n de otros query parameters" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Al setear un filtro, el componente preserva todos los dem\u00E1s query parameters existentes en la URL. Esto permite combinar filtros con otros par\u00E1metros como paginaci\u00F3n, ordenamiento, etc." }), _jsx(Card, { title: "Ejemplo con otros par\u00E1metros", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: ["Prueba agregar", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?pagina=2&orden=asc" }), " ", "a la URL y luego setear un filtro. Observa c\u00F3mo se preservan los par\u00E1metros existentes."] }) }), _jsx(Filter, { paramName: "filtroCompleto", label: "Filtro completo", filterType: "text" }), _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: "Query parameters actuales:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: searchParams.toString() || "ninguno" })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Comportamiento del historial" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente usa", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "replace: true" }), " ", "al actualizar la URL, lo que significa que reemplaza la entrada actual del historial en lugar de agregar una nueva. Esto permite que al presionar el bot\u00F3n \"atr\u00E1s\" del navegador, vuelvas a la p\u00E1gina anterior, no a la misma p\u00E1gina sin el par\u00E1metro."] }), _jsx(Card, { title: "Prueba el historial", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Sigue estos pasos para probar el comportamiento del historial:" }), _jsxs("ol", { className: "list-decimal list-inside space-y-1 text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("li", { children: "Navega a otra p\u00E1gina (o recarga esta p\u00E1gina)" }), _jsx("li", { children: "Vuelve a esta p\u00E1gina" }), _jsx("li", { children: "Setear un filtro" }), _jsx("li", { children: "Presiona el bot\u00F3n \"atr\u00E1s\" del navegador" }), _jsx("li", { children: "Deber\u00EDas volver a la p\u00E1gina anterior, no a esta misma p\u00E1gina sin el par\u00E1metro" })] })] }), _jsx(Filter, { paramName: "historial", label: "Filtro de historial" })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "FiltersDialog - Dialog de Filtros" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "FiltersDialog" }), " ", "permite agrupar m\u00FAltiples filtros en un dialog que se abre al hacer clic en un bot\u00F3n con \u00EDcono de filtrar. Los filtros no modifican la URL directamente, sino que se actualizan en un estado interno. Solo cuando el usuario hace clic en \"Aplicar filtros\", se actualizan todos los query parameters de una vez."] }), _jsx(Card, { title: "Ejemplo b\u00E1sico de FiltersDialog", children: _jsxs("div", { className: "space-y-4", children: [_jsx(FiltersDialog, { filters: [
+                                                {
+                                                    filterType: "text",
+                                                    paramName: "nombre",
+                                                    label: "Nombre",
+                                                },
+                                                {
+                                                    filterType: "number",
+                                                    paramName: "edad",
+                                                    label: "Edad",
+                                                    min: 0,
+                                                    max: 120,
+                                                },
+                                                {
+                                                    filterType: "date",
+                                                    paramName: "fechaNacimiento",
+                                                    label: "Fecha de Nacimiento",
+                                                },
+                                            ] }), _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsx("p", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Haz clic en el bot\u00F3n de filtrar para abrir el dialog. Los filtros se actualizan en tiempo real pero no modifican la URL hasta que hagas clic en \"Aplicar filtros\"." }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "FiltersDialog con Autocomplete" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes incluir filtros de tipo autocomplete en el", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "FiltersDialog" }), ". Todos los tipos de filtros son compatibles."] }), _jsx(Card, { title: "Ejemplo con Autocomplete", children: _jsxs("div", { className: "space-y-4", children: [_jsx(FiltersDialog, { filters: [
+                                                {
+                                                    filterType: "text",
+                                                    paramName: "busqueda",
+                                                    label: "Búsqueda",
+                                                },
+                                                {
+                                                    filterType: "autocomplete",
+                                                    paramName: "estado",
+                                                    label: "Estado",
+                                                    options: [
+                                                        { label: "Activo", value: "activo" },
+                                                        { label: "Inactivo", value: "inactivo" },
+                                                        { label: "Pendiente", value: "pendiente" },
+                                                        { label: "Cancelado", value: "cancelado" },
+                                                    ],
+                                                },
+                                                {
+                                                    filterType: "date",
+                                                    paramName: "fecha",
+                                                    label: "Fecha",
+                                                    staticOptions: [
+                                                        { text: "Hoy", value: dayjs().format("YYYY-MM-DD") },
+                                                        {
+                                                            text: "Ayer",
+                                                            value: dayjs()
+                                                                .subtract(1, "day")
+                                                                .format("YYYY-MM-DD"),
+                                                        },
+                                                        {
+                                                            text: "Última semana",
+                                                            value: dayjs()
+                                                                .subtract(1, "week")
+                                                                .format("YYYY-MM-DD"),
+                                                        },
+                                                    ],
+                                                },
+                                            ] }), _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsx("p", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Puedes combinar diferentes tipos de filtros en un solo dialog. Todos se aplican simult\u00E1neamente cuando haces clic en \"Aplicar filtros\"." }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Comportamiento de FiltersDialog" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "FiltersDialog" }), " ", "tiene un comportamiento especial: los filtros no modifican la URL mientras el usuario los est\u00E1 configurando. Solo cuando hace clic en \"Aplicar filtros\", se actualizan todos los query parameters de una vez. Esto permite que el usuario configure m\u00FAltiples filtros antes de aplicarlos."] }), _jsx(Card, { title: "Ventajas de FiltersDialog", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: _jsx("span", { className: "font-semibold", children: "Ventajas:" }) }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("li", { children: "Los filtros se configuran sin modificar la URL hasta que se aplican" }), _jsx("li", { children: "Permite configurar m\u00FAltiples filtros antes de aplicarlos" }), _jsx("li", { children: "Todos los filtros se aplican simult\u00E1neamente, evitando m\u00FAltiples actualizaciones de URL" }), _jsx("li", { children: "El bot\u00F3n \"Cerrar\" descarta los cambios sin aplicarlos" }), _jsx("li", { children: "Al abrir el dialog, se sincroniza con los valores actuales de la URL" })] })] }), _jsx(FiltersDialog, { filters: [
+                                                {
+                                                    filterType: "text",
+                                                    paramName: "ejemplo1",
+                                                    label: "Ejemplo 1",
+                                                },
+                                                {
+                                                    filterType: "text",
+                                                    paramName: "ejemplo2",
+                                                    label: "Ejemplo 2",
+                                                },
+                                            ] }), _jsxs("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: "Query parameters actuales:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: searchParams.toString() || "ninguno" })] }), _jsx("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Configura los filtros en el dialog y observa c\u00F3mo la URL no cambia hasta que hagas clic en \"Aplicar filtros\"." })] })] }) })] })] }) }) }));
+};
+export default FilterDocs;

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

@@ -1 +1 @@
-{"version":3,"file":"InputDocs.d.ts","sourceRoot":"","sources":["../../src/docs/InputDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EA2NtB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"InputDocs.d.ts","sourceRoot":"","sources":["../../src/docs/InputDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAiRtB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/docs/InputDocs.js

@@ -2,6 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Card, Input, Button } from "../index";
 const InputDocs = () => {
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Input - 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("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Nombre completo", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "campo de texto est\u00E1ndar con \u00EDcono a la izquierda" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Correo electr\u00F3nico", type: "email", placeholder: "usuario@ejemplo.com", icon: "fa-envelope" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "soporta tipos de entrada nativos de HTML" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "sm", label: "Tama\u00F1o peque\u00F1o", placeholder: "sm", icon: "fa-compress-alt" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o compacto ideal para barras de herramientas" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "md", label: "Tama\u00F1o mediano", placeholder: "md", icon: "fa-arrows-alt-h" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o por defecto, balanceado para formularios" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "lg", label: "Tama\u00F1o grande", placeholder: "lg", icon: "fa-expand-alt" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o amplio ideal para formularios destacados" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDconos y posiciones" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "\u00CDcono a la izquierda", placeholder: "Buscar...", icon: "fa-search" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\u00EDcono alineado a la izquierda por defecto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "\u00CDcono a la derecha", placeholder: "C\u00F3digo de verificaci\u00F3n", icon: "fa-key", iconPosition: "right" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "iconPosition permite mover el \u00EDcono a la derecha" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Con error", placeholder: "Usuario", error: "Este campo es obligatorio", icon: "fa-exclamation-circle" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "utiliza el prop error para mostrar mensajes y estilos" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Deshabilitado", placeholder: "Solo lectura", disabled: true, icon: "fa-lock" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "el estado disabled aplica estilos y bloqueo de interacci\u00F3n" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Formulario completo" }), _jsx(Card, { title: "Ejemplo de formulario con Input", subtitle: "Combinaci\u00F3n de Input y Button para captura de datos", 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-paper-plane", children: "Enviar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Nombre y apellido", icon: "fa-id-card" }), _jsx(Input, { label: "Correo", type: "email", placeholder: "correo@empresa.com", icon: "fa-at" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" })] }) })] })] }) }) }));
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Input - 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("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Nombre completo", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "campo de texto est\u00E1ndar con \u00EDcono a la izquierda" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Correo electr\u00F3nico", type: "email", placeholder: "usuario@ejemplo.com", icon: "fa-envelope" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "soporta tipos de entrada nativos de HTML" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "sm", label: "Tama\u00F1o peque\u00F1o", placeholder: "sm", icon: "fa-compress-alt" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o compacto ideal para barras de herramientas" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "md", label: "Tama\u00F1o mediano", placeholder: "md", icon: "fa-arrows-alt-h" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o por defecto, balanceado para formularios" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "lg", label: "Tama\u00F1o grande", placeholder: "lg", icon: "fa-expand-alt" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o amplio ideal para formularios destacados" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDconos y posiciones" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "\u00CDcono a la izquierda", placeholder: "Buscar...", icon: "fa-search" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\u00EDcono alineado a la izquierda por defecto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "\u00CDcono a la derecha", placeholder: "C\u00F3digo de verificaci\u00F3n", icon: "fa-key", iconPosition: "right" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "iconPosition permite mover el \u00EDcono a la derecha" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDcono clickeable con onIconClick" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Input con \u00EDcono clickeable", placeholder: "Haz click en el \u00EDcono...", icon: "fa-info-circle", iconPosition: "right", onIconClick: () => {
+                                                    alert("¡Ícono clickeado!");
+                                                } }), _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa la propiedad ", _jsx("code", { children: "onIconClick" }), " para hacer el \u00EDcono clickeable. El \u00EDcono mostrar\u00E1 un efecto hover cuando sea clickeable."] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Ejemplo pr\u00E1ctico: limpiar campo", placeholder: "Escribe algo...", icon: "fa-times", iconPosition: "right", onIconClick: (e) => {
+                                                    const input = e.currentTarget
+                                                        .closest(".relative")
+                                                        ?.querySelector("input");
+                                                    if (input) {
+                                                        input.value = "";
+                                                        input.focus();
+                                                    }
+                                                } }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de uso pr\u00E1ctico: limpiar el campo al hacer click en el \u00EDcono." })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Con error", placeholder: "Usuario", error: "Este campo es obligatorio", icon: "fa-exclamation-circle" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "utiliza el prop error para mostrar mensajes y estilos" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Deshabilitado", placeholder: "Solo lectura", disabled: true, icon: "fa-lock" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "el estado disabled aplica estilos y bloqueo de interacci\u00F3n" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Formulario completo" }), _jsx(Card, { title: "Ejemplo de formulario con Input", subtitle: "Combinaci\u00F3n de Input y Button para captura de datos", 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-paper-plane", children: "Enviar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Nombre y apellido", icon: "fa-id-card" }), _jsx(Input, { label: "Correo", type: "email", placeholder: "correo@empresa.com", icon: "fa-at" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" })] }) })] })] }) }) }));
 };
 export default InputDocs;

package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Componente de Documentación del ListCrudContext
+ *
+ * Este componente muestra cómo usar el ListCrudContext con un servicio mock
+ * para propósitos de documentación y desarrollo.
+ *
+ * El servicio mock simula la operación principal:
+ * - getPromise: Obtiene una lista de items (Array o PaginationInterface)
+ */
+export declare const ListCrudDocs: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListCrudDocs.d.ts.map

package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListCrudDocs.d.ts","sourceRoot":"","sources":["../../../src/docs/ListCrudDocs.tsx/ListCrudDocs.tsx"],"names":[],"mappings":"AAWA;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,+CA8BxB,CAAC"}