flysoft-react-ui 1.2.3 → 1.2.5

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

@@ -1 +0,0 @@
-{"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,EA2vB7B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/docs/DropdownMenuDocs.js

@@ -1,66 +0,0 @@
-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: "fal fa-user-circle" }), _jsx("span", { children: "Usuario" }), _jsx("i", { className: "fal fa-chevron-down text-xs" })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Abrir al pasar el mouse (openOnHover)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Con la prop ", _jsx("code", { children: "openOnHover" }), " establecida en", " ", _jsx("code", { children: "true" }), ", el men\u00FA se abrir\u00E1 autom\u00E1ticamente al pasar el mouse sobre el trigger, sin necesidad de hacer clic. Incluye un peque\u00F1o retraso al salir para evitar cierres accidentales al moverse hacia el men\u00FA."] }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-8 flex-wrap", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => setSelectedItem(item), openOnHover: true }), _jsx("span", { className: "text-sm text-[var(--flysoft-text-secondary)]", children: "Pasa el mouse aqu\u00ED" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => setSelectedItem(item), openOnHover: true, renderNode: _jsx(Button, { variant: "outline", children: "Men\u00FA con Hover" }) }), _jsx("span", { className: "text-sm text-[var(--flysoft-text-secondary)]", children: "O aqu\u00ED" })] })] }) })] }), _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" }), "."] })] }), _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: "openOnHover" }), _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" }), ", el men\u00FA se abre al pasar el mouse por encima del trigger. Por defecto es ", _jsx("code", { children: "false" }), "."] })] })] })] }) })] })] }) }) }));
-};
-export default DropdownMenuDocs;

package/dist/docs/DropdownPanelDocs.d.ts

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

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

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

package/dist/docs/DropdownPanelDocs.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Card, DropdownPanel, Button } from "../index";
-const DropdownPanelDocs = () => {
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DropdownPanel - Panel Flotante Gen\u00E9rico", 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 DropdownPanel muestra un panel flotante con contenido arbitrario (children). A diferencia de DropdownMenu, no maneja una lista de opciones, sino que renderiza lo que le pases." }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(DropdownPanel, { children: _jsxs("div", { className: "p-4 w-64", children: [_jsx("h4", { className: "font-bold mb-2", children: "Contenido del panel" }), _jsx("p", { className: "text-sm", children: "Aqu\u00ED puedes poner cualquier cosa: texto, im\u00E1genes, componentes, formularios, etc." })] }) }), _jsx("div", { className: "text-sm text-[var(--flysoft-text-secondary)]", children: "<- Click en los tres puntos para ver el panel" })] }) })] }), _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: ["Puedes personalizar el disparador (trigger) usando la prop", " ", _jsx("code", { children: "renderNode" }), "."] }), _jsx("div", { className: "space-y-4", children: _jsx(DropdownPanel, { renderNode: _jsx(Button, { variant: "primary", icon: "fa-filter", children: "Filtros Avanzados" }), children: _jsxs("div", { className: "p-4 w-80 space-y-4", children: [_jsx("h4", { className: "font-bold border-b pb-2", children: "Configuraci\u00F3n de Filtros" }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm mb-1", children: "Buscar por nombre" }), _jsx("input", { type: "text", className: "w-full p-2 border rounded", placeholder: "Escribe..." })] }), _jsx("div", { className: "flex justify-end pt-2", children: _jsx(Button, { variant: "primary", size: "sm", children: "Aplicar" }) })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Abrir al pasar el mouse (openOnHover)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Al igual que DropdownMenu, puedes usar ", _jsx("code", { children: "openOnHover" }), " ", "para que el panel se despliegue autom\u00E1ticamente al pasar el cursor."] }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(DropdownPanel, { openOnHover: true, children: _jsxs("div", { className: "p-4 w-64", children: [_jsx("h4", { className: "font-bold mb-2", children: "Panel con Hover" }), _jsx("p", { className: "text-sm", children: "Este panel se abri\u00F3 sin hacer clic. Es ideal para tooltips complejos o men\u00FAs de informaci\u00F3n r\u00E1pida." })] }) }), _jsx("div", { className: "text-sm text-[var(--flysoft-text-secondary)]", children: "<- Pasa el mouse por aqu\u00ED" })] }) })] }), _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: "children" }), _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: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido a mostrar dentro del panel flotante." })] }), _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 panel. Si no se proporciona, se muestra un bot\u00F3n ghost con tres puntos." })] }), _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: "openOnHover" }), _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" }), ", el panel se abre al pasar el mouse por encima del trigger. Por defecto es", " ", _jsx("code", { children: "false" }), "."] })] })] })] }) })] })] }) }) }));
-};
-export default DropdownPanelDocs;

package/dist/docs/ExampleFormDocs.d.ts

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

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

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

package/dist/docs/ExampleFormDocs.js

@@ -1,153 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Card, Input, AutocompleteInput, DateInput, SearchSelectInput, Button, Checkbox, RadioButtonGroup, CurrencyInput, } 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",
-            salario: 1500.5,
-        },
-    });
-    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")] }), _jsx(CurrencyInput, { label: "Salario mensual", placeholder: "0,00", icon: "fa-money-bill-wave", readOnly: isReadOnly, ...register("salario", {
-                                        required: "El salario es obligatorio",
-                                        min: { value: 1, message: "El salario debe ser mayor a 0" },
-                                    }), error: errors.salario?.message }), _jsxs("div", { children: ["Salario: ", watch("salario")] }), _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: "",
-                                                    salario: null,
-                                                });
-                                            }, children: "Resetear" }), _jsx(Button, { variant: "primary", icon: "fa-check", type: "submit", children: "Enviar" })] })] })] }) }) }) }));
-};
-export default ExampleFormDocs;

package/dist/docs/FilterDocs.d.ts

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

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

@@ -1 +0,0 @@
-{"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,EAizBvB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/FilterDocs.js

@@ -1,130 +0,0 @@
-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", multiple: true, 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\"." })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Search y FiltersDialog Combinados" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Una disposici\u00F3n com\u00FAn es tener una b\u00FAsqueda r\u00E1pida a la izquierda y filtros avanzados a la derecha. Esto se logra f\u00E1cilmente con un contenedor flex y ", _jsx("code", { children: "justify-between" }), "."] }), _jsx(Card, { title: "Barra de herramientas combinada", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs(Collection, { direction: "row", children: [_jsx(Filter, { paramName: "busquedaGlobal", label: "Buscar...", filterType: "search", inputWidth: "300px" }), _jsx(Filter, { paramName: "filtroFecha", label: "Fecha", filterType: "date", inputWidth: "300px", hideEmpty: true }), _jsx(Filter, { paramName: "filtroEstado", label: "Estado", filterType: "autocomplete", inputWidth: "300px", hideEmpty: true, options: [
-                                                                { label: "Activo", value: "active" },
-                                                                { label: "Inactivo", value: "inactive" },
-                                                            ] })] }), _jsx(FiltersDialog, { filters: [
-                                                        {
-                                                            filterType: "date",
-                                                            paramName: "filtroFecha",
-                                                            label: "Fecha",
-                                                        },
-                                                        {
-                                                            filterType: "autocomplete",
-                                                            paramName: "filtroEstado",
-                                                            label: "Estado",
-                                                            options: [
-                                                                { label: "Activo", value: "active" },
-                                                                { label: "Inactivo", value: "inactive" },
-                                                            ],
-                                                        },
-                                                    ] })] }), _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 Prueba escribir en el buscador (aplica inmediato) y luego usar los filtros avanzados (aplica al aceptar). Ambos coexisten en la URL." })] })] }) })] })] }) }) }));
-};
-export default FilterDocs;

package/dist/docs/InputDocs.d.ts

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

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

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

@@ -1,17 +0,0 @@
-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: "\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/LinkButtonDocs.d.ts

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

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

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