flysoft-react-ui 0.5.2 → 1.0.0

package/dist/docs/AccordionDocs.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Accordion, Card, Badge, Input } from "../index";
+const AccordionDocs = () => {
+    const [openAccordions, setOpenAccordions] = useState(new Set());
+    const handleToggle = (id, isOpen) => {
+        const newSet = new Set(openAccordions);
+        if (isOpen) {
+            newSet.add(id);
+        }
+        else {
+            newSet.delete(id);
+        }
+        setOpenAccordions(newSet);
+    };
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Accordion - 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: "Variantes" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente Accordion soporta tres variantes visuales: default, elevated (con sombra) y outlined (con borde destacado)." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { variant: "default", title: "Default", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con variante por defecto." }) }), _jsx(Accordion, { variant: "elevated", title: "Elevated", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con sombra elevada." }) }), _jsx(Accordion, { variant: "outlined", title: "Outlined", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con borde destacado." }) })] })] }), _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 Accordion permite mostrar contenido colapsable con una animaci\u00F3n suave de expandir/contraer. Haz clic en el header para abrir o cerrar el contenido." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Informaci\u00F3n General", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este es un accordion b\u00E1sico sin icono ni elementos adicionales. El contenido se muestra cuando el accordion est\u00E1 abierto y se oculta con una animaci\u00F3n suave cuando est\u00E1 cerrado." }) }), _jsx(Accordion, { title: "Detalles del Producto", defaultOpen: true, children: _jsxs("div", { className: "space-y-2", children: [_jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este accordion est\u00E1 abierto por defecto usando la propiedad", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "defaultOpen" }), "."] }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("li", { children: "Caracter\u00EDstica 1: Descripci\u00F3n detallada" }), _jsx("li", { children: "Caracter\u00EDstica 2: M\u00E1s informaci\u00F3n" }), _jsx("li", { children: "Caracter\u00EDstica 3: Detalles adicionales" })] })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con icono" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes agregar un icono FontAwesome 5 del lado izquierdo del t\u00EDtulo usando la propiedad ", _jsx("code", { children: "icon" }), "."] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Configuraci\u00F3n", icon: "fa-cog", children: _jsxs("div", { className: "space-y-2", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion tiene un icono de configuraci\u00F3n en el lado izquierdo." }), _jsx(Input, { label: "Nombre", placeholder: "Ingresa un nombre" }), _jsx(Input, { label: "Email", type: "email", placeholder: "correo@ejemplo.com" })] }) }), _jsx(Accordion, { title: "Informaci\u00F3n de Usuario", icon: "fa-user", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con icono de usuario. Los iconos ayudan a identificar visualmente el tipo de contenido." }) }), _jsx(Accordion, { title: "Notificaciones", icon: "fa-bell", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con icono de notificaciones. Puedes usar cualquier icono de FontAwesome 5." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con rightNode" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La propiedad ", _jsx("code", { children: "rightNode" }), " permite agregar contenido personalizado del lado derecho, antes del chevron. \u00DAtil para badges, botones peque\u00F1os, contadores, etc."] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Mensajes", icon: "fa-envelope", rightNode: _jsx(Badge, { variant: "info", children: "3" }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion muestra un badge con el n\u00FAmero de mensajes no le\u00EDdos en el lado derecho." }) }), _jsx(Accordion, { title: "Tareas Pendientes", icon: "fa-tasks", rightNode: _jsx(Badge, { variant: "warning", children: "5" }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con badge de tareas pendientes. El rightNode puede contener cualquier ReactNode." }) }), _jsx(Accordion, { title: "Configuraci\u00F3n Avanzada", icon: "fa-sliders-h", rightNode: _jsxs("div", { className: "flex items-center gap-2 px-2 py-1 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] cursor-pointer rounded transition-colors", onClick: (e) => {
+                                                e.stopPropagation();
+                                                console.log("Editar configuración");
+                                            }, children: [_jsx("i", { className: "fal fa-edit" }), _jsx("span", { children: "Editar" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion incluye un elemento de acci\u00F3n en el rightNode, permitiendo acciones r\u00E1pidas sin abrir el accordion. Nota: No uses componentes Button dentro de rightNode ya que causar\u00EDa un error de anidaci\u00F3n de botones." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con callback onToggle" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La propiedad ", _jsx("code", { children: "onToggle" }), " permite ejecutar una funci\u00F3n cuando el accordion se abre o cierra. \u00DAtil para sincronizar estado externo o realizar acciones al cambiar el estado."] }), _jsxs("div", { className: "space-y-3", children: [openAccordions.size > 0 && (_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: "Accordions abiertos:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: Array.from(openAccordions).join(", ") || "Ninguno" })] }) })), _jsx(Accordion, { title: "Secci\u00F3n 1", icon: "fa-folder", onToggle: (isOpen) => handleToggle("seccion1", isOpen), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion notifica cuando se abre o cierra mediante el callback onToggle." }) }), _jsx(Accordion, { title: "Secci\u00F3n 2", icon: "fa-folder", onToggle: (isOpen) => handleToggle("seccion2", isOpen), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Otro accordion que tambi\u00E9n notifica su estado mediante onToggle." }) }), _jsx(Accordion, { title: "Secci\u00F3n 3", icon: "fa-folder", onToggle: (isOpen) => handleToggle("seccion3", isOpen), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Un tercer accordion para demostrar el seguimiento de m\u00FAltiples accordions." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo completo con m\u00FAltiples accordions" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo pr\u00E1ctico usando m\u00FAltiples accordions para organizar informaci\u00F3n en secciones colapsables." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Informaci\u00F3n Personal", icon: "fa-user-circle", rightNode: _jsx(Badge, { variant: "success", children: "Completo" }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Nombre", placeholder: "Juan", icon: "fa-user" }), _jsx(Input, { label: "Apellido", placeholder: "P\u00E9rez", icon: "fa-user" }), _jsx(Input, { label: "Fecha de Nacimiento", type: "date", icon: "fa-calendar" })] }) }), _jsx(Accordion, { title: "Informaci\u00F3n de Contacto", icon: "fa-address-book", rightNode: _jsx(Badge, { variant: "warning", children: "Pendiente" }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Email", type: "email", placeholder: "juan@ejemplo.com", icon: "fa-envelope" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" })] }) }), _jsx(Accordion, { title: "Configuraci\u00F3n de Seguridad", icon: "fa-shield-alt", rightNode: _jsx(Badge, { variant: "info", children: "Recomendado" }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Contrase\u00F1a Actual", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-lock" }), _jsx(Input, { label: "Nueva Contrase\u00F1a", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-key" })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Background Personalizado" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente detecta autom\u00E1ticamente las clases de background (bg-*) desde la prop className y las aplica al background del accordion. Las dem\u00E1s clases se aplican normalmente al contenedor." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Accordion con bg-blue-50", className: "bg-blue-50", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con background personalizado usando clases de Tailwind." }) }), _jsx(Accordion, { title: "Accordion con bg-gradient", className: "bg-gradient-to-br from-purple-100 to-pink-100", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con gradiente personalizado." }) }), _jsx(Accordion, { title: "Accordion con bg y otras clases", className: "bg-green-50", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes combinar clases de background con otras clases de Tailwind." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Title como ReactNode" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El t\u00EDtulo puede ser un ReactNode, permitiendo incluir contenido personalizado como badges, iconos adicionales, o cualquier otro componente." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: "Proyecto Importante" }), _jsx(Badge, { variant: "danger", size: "sm", children: "Urgente" })] }), icon: "fa-project-diagram", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion tiene un t\u00EDtulo personalizado con un badge integrado." }) }), _jsx(Accordion, { title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-star text-yellow-500" }), _jsx("span", { children: "Favoritos" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "T\u00EDtulo personalizado con un icono de estrella integrado." }) })] })] }), _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: "Animaci\u00F3n suave:" }), " El contenido se expande y contrae con una animaci\u00F3n CSS de 300ms."] }), _jsxs("li", { children: [_jsx("strong", { children: "Icono opcional:" }), " Soporta iconos FontAwesome 5 del lado izquierdo del t\u00EDtulo."] }), _jsxs("li", { children: [_jsx("strong", { children: "RightNode:" }), " Permite agregar contenido personalizado (badges, botones, etc.) del lado derecho antes del chevron."] }), _jsxs("li", { children: [_jsx("strong", { children: "Estado controlado:" }), " Soporta estado controlado mediante ", _jsx("code", { children: "defaultOpen" }), " y", " ", _jsx("code", { children: "onToggle" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "Title flexible:" }), " El t\u00EDtulo puede ser un string o un ReactNode, permitiendo contenido personalizado."] }), _jsxs("li", { children: [_jsx("strong", { children: "Accesibilidad:" }), " Incluye atributos ARIA para mejor accesibilidad."] }), _jsxs("li", { children: [_jsx("strong", { children: "Chevron din\u00E1mico:" }), " El chevron cambia autom\u00E1ticamente entre arriba (abierto) y abajo (cerrado)."] }), _jsxs("li", { children: [_jsx("strong", { children: "Variantes:" }), " Soporta tres variantes: default, elevated (con sombra) y outlined (con borde destacado)."] }), _jsxs("li", { children: [_jsx("strong", { children: "Background personalizado:" }), " El componente detecta autom\u00E1ticamente las clases de background (bg-*) y las aplica correctamente."] })] }) }) })] }), _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: "title" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string | 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: "T\u00EDtulo del accordion. Puede ser un string o un ReactNode." })] }), _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 que se muestra cuando el accordion est\u00E1 abierto." })] }), _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: "icon" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _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: "Clase de icono FontAwesome 5 (ej: \"fa-user\", \"fa-cog\") que se muestra del lado izquierdo del t\u00EDtulo." })] }), _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: "rightNode" }), _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: "Contenido personalizado que se muestra del lado derecho, antes del chevron. \u00DAtil para badges, botones, contadores, etc." })] }), _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: "defaultOpen" }), _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" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Si es true, el accordion estar\u00E1 abierto por defecto. Por defecto es 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: "onToggle" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "(isOpen: boolean) => void" }), _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: "Callback que se ejecuta cuando el accordion se abre o cierra. Recibe un boolean indicando si est\u00E1 abierto (true) o cerrado (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: "variant" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\"default\" | \"elevated\" | \"outlined\"" }), _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: "Variante visual del accordion. Por defecto es \"default\"." })] }), _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: "className" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _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: "Clases CSS adicionales. Las clases de background (bg-*) se aplican autom\u00E1ticamente al background del accordion." })] })] })] }) })] })] }) }) }));
+};
+export default AccordionDocs;

package/dist/docs/AuthDocs.tsx/AuthDocsContent.js

@@ -13,12 +13,10 @@ export const AuthDocsContent = () => {
     // Sección de documentación de interfaces (siempre visible)
     const InterfacesDocumentation = () => (_jsx("div", { className: "space-y-4 mb-6", children: _jsx(Card, { title: "Interfaces de TypeScript", subtitle: "Estructuras de datos utilizadas por el AuthContext", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "AuthTokenInterface" })] }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Define la estructura de los datos del token de autenticaci\u00F3n devueltos por el servicio de autenticaci\u00F3n." }), _jsx("div", { className: "bg-[var(--color-bg-secondary)] rounded-lg p-4 border border-[var(--color-border-default)]", children: _jsxs("div", { className: "space-y-2", children: [_jsx(DataField, { label: "accessToken", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Token de acceso utilizado para autenticar las solicitudes HTTP." }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "tokenType", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Tipo de token (generalmente \"Bearer\")." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "expires", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Fecha de expiraci\u00F3n del token en formato ISO 8601." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "refreshToken", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Token de actualizaci\u00F3n utilizado para obtener un nuevo token de acceso cuando el actual expira." })] })] }) })] }), _jsxs("div", { className: "pt-4 border-t border-[var(--color-border-default)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "AuthContextUserInterface" })] }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Define la estructura de los datos del usuario autenticado que se almacenan en el contexto." }), _jsx("div", { className: "bg-[var(--color-bg-secondary)] rounded-lg p-4 border border-[var(--color-border-default)]", children: _jsxs("div", { className: "space-y-2", children: [_jsx(DataField, { label: "id", value: _jsx("span", { className: "text-xs font-mono", children: "number | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Identificador \u00FAnico del usuario." }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "name", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Nombre del usuario." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "aditionalData", value: _jsx("span", { className: "text-xs font-mono", children: "any | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Objeto que puede contener datos adicionales del usuario (roles, permisos, email, etc.). Es flexible y puede adaptarse a las necesidades espec\u00EDficas de cada aplicaci\u00F3n." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "token", value: _jsx("span", { className: "text-xs font-mono", children: "AuthTokenInterface | undefined" }) }), _jsxs("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: ["Objeto de token que contiene el", " ", _jsx("code", { className: "text-xs bg-white/50 px-1 rounded", children: "AuthTokenInterface" }), " ", "con la informaci\u00F3n de autenticaci\u00F3n."] })] })] }) })] })] }) }) }));
     if (isLoading) {
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { children: _jsx("div", { className: "flex items-center justify-center py-8", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("i", { className: "fa fa-spinner fa-spin text-[var(--color-primary)] text-xl" }), _jsx("span", { className: "text-[var(--color-text-secondary)]", children: "Iniciando sesi\u00F3n..." })] }) }) })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { children: _jsx("div", { className: "flex items-center justify-center py-8", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("i", { className: "fal fa-spinner fa-spin text-[var(--color-primary)] text-xl" }), _jsx("span", { className: "text-[var(--color-text-secondary)]", children: "Iniciando sesi\u00F3n..." })] }) }) })] }));
     }
     if (isAuthenticated && user) {
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Sesi\u00F3n Activa", subtitle: "Informaci\u00F3n del usuario autenticado", headerActions: () => [
-                        _jsx(Badge, { variant: "success", icon: "fa-check-circle", iconPosition: "left", children: "Autenticado" }),
-                    ], children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "ID de Usuario", value: user.id }), _jsx(DataField, { label: "Nombre", value: user.name || "No disponible" })] }), user.aditionalData && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Datos Adicionales" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [user.aditionalData.role && (_jsx(DataField, { label: "Rol", value: _jsx(Badge, { variant: "primary", icon: "fa-user-shield", children: user.aditionalData.role }) })), user.aditionalData.email && (_jsx(DataField, { label: "Email", value: user.aditionalData.email })), user.aditionalData.createdAt && (_jsx(DataField, { label: "Fecha de Creaci\u00F3n", value: new Date(user.aditionalData.createdAt).toLocaleString() })), user.aditionalData.permissions && (_jsx(DataField, { label: "Permisos", value: _jsx("div", { className: "flex flex-wrap gap-2", children: user.aditionalData.permissions.map((permission, index) => (_jsx(Badge, { variant: "info", size: "sm", icon: "fa-key", children: permission }, index))) }) }))] })] })), user.token && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Informaci\u00F3n del Token" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "Tipo de Token", value: _jsx(Badge, { variant: "secondary", icon: "fa-tag", children: user.token.tokenType || "Bearer" }) }), user.token.expires && (_jsx(DataField, { label: "Expira", value: new Date(user.token.expires).toLocaleString() })), user.token.accessToken && (_jsx(DataField, { label: "Access Token", value: _jsxs("code", { className: "text-xs bg-[var(--color-bg-secondary)] px-2 py-1 rounded break-all", children: [user.token.accessToken.substring(0, 30), "..."] }) }))] })] })), _jsx("div", { className: "mt-6 pt-4 border-t border-[var(--color-border-default)]", children: _jsx(Button, { variant: "outline", icon: "fa-sign-out-alt", iconPosition: "left", onClick: handleLogout, className: "w-full md:w-auto", children: "Cerrar Sesi\u00F3n" }) })] }) })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Sesi\u00F3n Activa", subtitle: "Informaci\u00F3n del usuario autenticado", headerActions: _jsx(Badge, { variant: "success", icon: "fa-check-circle", iconPosition: "left", children: "Autenticado" }), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "ID de Usuario", value: user.id }), _jsx(DataField, { label: "Nombre", value: user.name || "No disponible" })] }), user.aditionalData && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Datos Adicionales" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [user.aditionalData.role && (_jsx(DataField, { label: "Rol", value: _jsx(Badge, { variant: "primary", icon: "fa-user-shield", children: user.aditionalData.role }) })), user.aditionalData.email && (_jsx(DataField, { label: "Email", value: user.aditionalData.email })), user.aditionalData.createdAt && (_jsx(DataField, { label: "Fecha de Creaci\u00F3n", value: new Date(user.aditionalData.createdAt).toLocaleString() })), user.aditionalData.permissions && (_jsx(DataField, { label: "Permisos", value: _jsx("div", { className: "flex flex-wrap gap-2", children: user.aditionalData.permissions.map((permission, index) => (_jsx(Badge, { variant: "info", size: "sm", icon: "fa-key", children: permission }, index))) }) }))] })] })), user.token && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Informaci\u00F3n del Token" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "Tipo de Token", value: _jsx(Badge, { variant: "secondary", icon: "fa-tag", children: user.token.tokenType || "Bearer" }) }), user.token.expires && (_jsx(DataField, { label: "Expira", value: new Date(user.token.expires).toLocaleString() })), user.token.accessToken && (_jsx(DataField, { label: "Access Token", value: _jsxs("code", { className: "text-xs bg-[var(--color-bg-secondary)] px-2 py-1 rounded break-all", children: [user.token.accessToken.substring(0, 30), "..."] }) }))] })] })), _jsx("div", { className: "mt-6 pt-4 border-t border-[var(--color-border-default)]", children: _jsx(Button, { variant: "outline", icon: "fa-sign-out-alt", iconPosition: "left", onClick: handleLogout, className: "w-full md:w-auto", children: "Cerrar Sesi\u00F3n" }) })] }) })] }));
     }
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Autenticaci\u00F3n", subtitle: "Inicia sesi\u00F3n para ver el AuthContext en acci\u00F3n", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "bg-[var(--color-info-light)] border border-[var(--color-info)] rounded-lg p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("i", { className: "fa fa-info-circle text-[var(--color-info)] mt-1" }), _jsx("div", { className: "flex-1", children: _jsxs("p", { className: "text-sm text-[var(--color-text-primary)]", children: ["Esta es una demostraci\u00F3n del", " ", _jsx("code", { className: "text-xs bg-white/50 px-1 rounded", children: "AuthContext" }), " ", "usando un servicio mock. Haz clic en el bot\u00F3n para simular un inicio de sesi\u00F3n."] }) })] }) }), _jsx("div", { className: "flex justify-center pt-4", children: _jsx(Button, { variant: "primary", size: "lg", icon: "fa-sign-in-alt", iconPosition: "left", onClick: handleLogin, children: "Iniciar Sesi\u00F3n" }) })] }) })] }));
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Autenticaci\u00F3n", subtitle: "Inicia sesi\u00F3n para ver el AuthContext en acci\u00F3n", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "bg-[var(--color-info-light)] border border-[var(--color-info)] rounded-lg p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("i", { className: "fal fa-info-circle text-[var(--color-info)] mt-1" }), _jsx("div", { className: "flex-1", children: _jsxs("p", { className: "text-sm text-[var(--color-text-primary)]", children: ["Esta es una demostraci\u00F3n del", " ", _jsx("code", { className: "text-xs bg-white/50 px-1 rounded", children: "AuthContext" }), " ", "usando un servicio mock. Haz clic en el bot\u00F3n para simular un inicio de sesi\u00F3n."] }) })] }) }), _jsx("div", { className: "flex justify-center pt-4", children: _jsx(Button, { variant: "primary", size: "lg", icon: "fa-sign-in-alt", iconPosition: "left", onClick: handleLogin, children: "Iniciar Sesi\u00F3n" }) })] }) })] }));
 };

package/dist/docs/AutocompleteInputDocs.js

@@ -70,6 +70,6 @@ const AutocompleteInputDocs = () => {
                                                         : "Ningún país seleccionado" }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Controlado vs no controlado" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Autocomplete no controlado", placeholder: "Escribe para buscar...", icon: "fa-search", options: sampleOptions }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "sin prop value: el componente maneja internamente el valor del input" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Autocomplete controlado", placeholder: "Escribe para buscar...", icon: "fa-search", options: sampleOptions, value: value, onChange: setValue }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "con value y onChange: el valor del input se controla desde el estado externo" }), _jsx(Input, { label: "Valor actual", value: value, readOnly: true, icon: "fa-code" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Personalizaci\u00F3n y estados" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Sin resultados", placeholder: "Escribe algo que no exista", icon: "fa-question-circle", options: sampleOptions, noResultsText: "No encontramos coincidencias" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "el mensaje se muestra cuando no hay coincidencias al filtrar" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Deshabilitado", placeholder: "No editable", icon: "fa-ban", options: sampleOptions, disabled: true }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado disabled heredado del componente Input" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso gen\u00E9rico con renderOption personalizado" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Buscar usuario", placeholder: "Escribe nombre o email...", icon: "fa-users", options: users, getOptionLabel: (user) => `${user.firstName} ${user.lastName}`, getOptionValue: (user) => user.id, getOptionDescription: (user) => user.email, onSelectOption: (user, userId) => {
                                                     setSelectedUser(user);
                                                     console.log("Usuario seleccionado:", user, "ID:", userId);
-                                                }, renderOption: (user) => (_jsxs("div", { className: "flex items-start gap-3 w-full", children: [_jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-[var(--color-primary-soft)] flex items-center justify-center", children: _jsx("i", { className: "fa fa-user text-[var(--color-primary)]" }) }), _jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [_jsxs("span", { className: "font-medium text-[var(--color-text-primary)]", children: [user.firstName, " ", user.lastName] }), _jsx("span", { className: "text-xs text-[var(--color-text-secondary)] truncate", children: user.email }), _jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx("span", { className: "text-xs px-2 py-0.5 rounded bg-[var(--color-bg-secondary)] text-[var(--color-text-secondary)]", children: user.role }), _jsxs("span", { className: "text-xs text-[var(--color-text-muted)]", children: ["\u2022 ", user.department] })] })] })] })) }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "usando getOptionLabel, getOptionValue y renderOption para personalizar completamente el renderizado de opciones sin propiedades label/value/description" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Usuario seleccionado" }), _jsx(Card, { variant: "outlined", children: selectedUser ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: [selectedUser.firstName, " ", selectedUser.lastName] }), _jsx("p", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: selectedUser.email }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs px-2 py-0.5 rounded bg-[var(--color-bg-secondary)]", style: { color: "var(--flysoft-text-secondary)" }, children: selectedUser.role }), _jsx("span", { className: "text-xs", style: { color: "var(--flysoft-text-muted)" }, children: selectedUser.department })] }), _jsxs("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-muted)" }, children: ["ID: ", selectedUser.id] })] })) : (_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ning\u00FAn usuario seleccionado" })) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo de formulario" }), _jsx(Card, { title: "Formulario de b\u00FAsqueda con AutocompleteInput", subtitle: "Combinaci\u00F3n de AutocompleteInput, Input y Button", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Limpiar" }), _jsx(Button, { variant: "primary", icon: "fa-search", children: "Buscar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(AutocompleteInput, { label: "Pa\u00EDs de residencia", placeholder: "Selecciona un pa\u00EDs", icon: "fa-flag", options: sampleOptions }), _jsx(Input, { label: "Ciudad", placeholder: "Introduce tu ciudad", icon: "fa-city" })] }) })] })] }) }) }));
+                                                }, renderOption: (user) => (_jsxs("div", { className: "flex items-start gap-3 w-full", children: [_jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-[var(--color-primary-soft)] flex items-center justify-center", children: _jsx("i", { className: "fal fa-user text-[var(--color-primary)]" }) }), _jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [_jsxs("span", { className: "font-medium text-[var(--color-text-primary)]", children: [user.firstName, " ", user.lastName] }), _jsx("span", { className: "text-xs text-[var(--color-text-secondary)] truncate", children: user.email }), _jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx("span", { className: "text-xs px-2 py-0.5 rounded bg-[var(--color-bg-secondary)] text-[var(--color-text-secondary)]", children: user.role }), _jsxs("span", { className: "text-xs text-[var(--color-text-muted)]", children: ["\u2022 ", user.department] })] })] })] })) }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "usando getOptionLabel, getOptionValue y renderOption para personalizar completamente el renderizado de opciones sin propiedades label/value/description" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Usuario seleccionado" }), _jsx(Card, { variant: "outlined", children: selectedUser ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: [selectedUser.firstName, " ", selectedUser.lastName] }), _jsx("p", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: selectedUser.email }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs px-2 py-0.5 rounded bg-[var(--color-bg-secondary)]", style: { color: "var(--flysoft-text-secondary)" }, children: selectedUser.role }), _jsx("span", { className: "text-xs", style: { color: "var(--flysoft-text-muted)" }, children: selectedUser.department })] }), _jsxs("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-muted)" }, children: ["ID: ", selectedUser.id] })] })) : (_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ning\u00FAn usuario seleccionado" })) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo de formulario" }), _jsx(Card, { title: "Formulario de b\u00FAsqueda con AutocompleteInput", subtitle: "Combinaci\u00F3n de AutocompleteInput, Input y Button", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Limpiar" }), _jsx(Button, { variant: "primary", icon: "fa-search", children: "Buscar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(AutocompleteInput, { label: "Pa\u00EDs de residencia", placeholder: "Selecciona un pa\u00EDs", icon: "fa-flag", options: sampleOptions }), _jsx(Input, { label: "Ciudad", placeholder: "Introduce tu ciudad", icon: "fa-city" })] }) })] })] }) }) }));
 };
 export default AutocompleteInputDocs;

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

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

package/dist/docs/ButtonDocs.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Card, Button } from "../index";
 const ButtonDocs = () => {
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Button - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Variantes" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-check", children: "Primario" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n primario" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-pen", children: "Outline" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n outline" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "ghost", icon: "fa-trash", children: "Ghost" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n ghost" })] })] })] }), _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 sm:grid-cols-3 gap-6", children: [_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { size: "sm", variant: "primary", children: "Peque\u00F1o" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n peque\u00F1o" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { size: "md", variant: "primary", children: "Mediano" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n mediano" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { size: "lg", variant: "primary", children: "Grande" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n grande" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con \u00EDcono" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-download", children: "Con \u00EDcono (izquierda)" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n con \u00EDcono" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-arrow-right", iconPosition: "right", children: "\u00CDcono a la derecha" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\u00EDcono a la derecha" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "ghost", loading: true, icon: "fa-spinner", children: "Cargando" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "estado de carga" })] })] })] })] }) }) }));
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Button - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Variantes" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-check", children: "Primario" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n primario" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-pen", children: "Outline" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n outline" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "ghost", icon: "fa-trash", children: "Ghost" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n ghost" })] })] })] }), _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 sm:grid-cols-3 gap-6", children: [_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { size: "sm", variant: "primary", children: "Peque\u00F1o" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n peque\u00F1o" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { size: "md", variant: "primary", children: "Mediano" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n mediano" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { size: "lg", variant: "primary", children: "Grande" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n grande" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Colores" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes especificar diferentes colores usando la propiedad", " ", _jsx("code", { children: "color" }), ". Los colores disponibles son: primary, secondary, success, warning, danger e info."] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Variante Primary" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", color: "primary", children: "Primary" }), _jsx(Button, { variant: "primary", color: "secondary", children: "Secondary" }), _jsx(Button, { variant: "primary", color: "success", children: "Success" }), _jsx(Button, { variant: "primary", color: "warning", children: "Warning" }), _jsx(Button, { variant: "primary", color: "danger", children: "Danger" }), _jsx(Button, { variant: "primary", color: "info", children: "Info" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Variante Outline" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "outline", color: "primary", children: "Primary" }), _jsx(Button, { variant: "outline", color: "secondary", children: "Secondary" }), _jsx(Button, { variant: "outline", color: "success", children: "Success" }), _jsx(Button, { variant: "outline", color: "warning", children: "Warning" }), _jsx(Button, { variant: "outline", color: "danger", children: "Danger" }), _jsx(Button, { variant: "outline", color: "info", children: "Info" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Variante Ghost" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "ghost", color: "primary", children: "Primary" }), _jsx(Button, { variant: "ghost", color: "secondary", children: "Secondary" }), _jsx(Button, { variant: "ghost", color: "success", children: "Success" }), _jsx(Button, { variant: "ghost", color: "warning", children: "Warning" }), _jsx(Button, { variant: "ghost", color: "danger", children: "Danger" }), _jsx(Button, { variant: "ghost", color: "info", children: "Info" })] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con \u00EDcono" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-download", children: "Con \u00EDcono (izquierda)" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n con \u00EDcono" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-arrow-right", iconPosition: "right", children: "\u00CDcono a la derecha" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\u00EDcono a la derecha" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "ghost", loading: true, icon: "fa-spinner", children: "Cargando" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "estado de carga" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Colores personalizados" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes especificar colores personalizados usando las propiedades", " ", _jsx("code", { children: "bg" }), " y ", _jsx("code", { children: "textColor" }), ". Acepta c\u00F3digos hex, rgb, rgba, hsl, o nombres de colores comunes (white, black, gray-50, gray-100, etc.)."] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Variante Primary con colores personalizados" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", bg: "#8b5cf6", textColor: "white", children: "P\u00FArpura" }), _jsx(Button, { variant: "primary", bg: "#ec4899", textColor: "white", children: "Rosa" }), _jsx(Button, { variant: "primary", bg: "#14b8a6", textColor: "white", children: "Turquesa" }), _jsx(Button, { variant: "primary", bg: "rgb(239, 68, 68)", textColor: "white", children: "Rojo RGB" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Variante Outline con colores personalizados" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "outline", bg: "#8b5cf6", textColor: "#8b5cf6", children: "P\u00FArpura" }), _jsx(Button, { variant: "outline", bg: "#ec4899", textColor: "#ec4899", children: "Rosa" }), _jsx(Button, { variant: "outline", bg: "#14b8a6", textColor: "#14b8a6", children: "Turquesa" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Variante Ghost con colores personalizados" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "ghost", bg: "#8b5cf6", textColor: "#8b5cf6", children: "P\u00FArpura" }), _jsx(Button, { variant: "ghost", bg: "#ec4899", textColor: "#ec4899", children: "Rosa" }), _jsx(Button, { variant: "ghost", bg: "#14b8a6", textColor: "#14b8a6", children: "Turquesa" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Con nombres de colores" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", bg: "gray-800", textColor: "white", children: "Gray-800" }), _jsx(Button, { variant: "primary", bg: "gray-700", textColor: "white", children: "Gray-700" }), _jsx(Button, { variant: "outline", bg: "gray-600", textColor: "gray-600", children: "Gray-600" })] })] })] })] })] }) }) }));
 };
 export default ButtonDocs;

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

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

package/dist/docs/CardDocs.js

@@ -1,13 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Card, Button } from "../index";
+import { Card, Button, DropdownMenu } from "../index";
 const CardDocs = () => {
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Card - 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: "Variantes" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsx(Card, { variant: "default", title: "Default", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "card por defecto" }) }), _jsx(Card, { variant: "elevated", title: "Elevated", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "card con sombra elevada" }) }), _jsx(Card, { variant: "outlined", title: "Outlined", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "card con borde destacado" }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Header y Footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente Card soporta acciones en el header usando la propiedad ", _jsx("code", { children: "headerActions" }), ". Las acciones se muestran en un DropdownMenu. En pantallas grandes (lg+), las acciones solo se muestran al hacer hover sobre el Card. En pantallas peque\u00F1as, siempre son visibles."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Card, { title: "Card con m\u00FAltiples acciones", subtitle: "Ejemplo con DropdownMenu", headerActions: () => [
-                                            _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-edit", onClick: () => console.log("Editar"), children: "Editar" }, "edit"),
-                                            _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-trash", onClick: () => console.log("Eliminar"), children: "Eliminar" }, "delete"),
-                                            _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-share", onClick: () => console.log("Compartir"), children: "Compartir" }, "share"),
-                                        ], footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", children: "Cancelar" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-check", children: "Aceptar" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Card con m\u00FAltiples acciones en el header. En pantallas grandes, pasa el mouse sobre el Card para ver las acciones." }) }), _jsx(Card, { title: "Card con una sola acci\u00F3n", subtitle: "Se muestra directamente sin men\u00FA", headerActions: () => [
-                                            _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-search", onClick: () => console.log("Ver detalles") }, "view"),
-                                        ], children: _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando hay una sola acci\u00F3n, se muestra directamente gracias a", " ", _jsx("code", { children: "replaceOnSingleOption" }), ", sin necesidad de abrir un men\u00FA."] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Title y Subtitle como ReactNode" }), _jsx(Card, { title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fa fa-user-circle" }), _jsx("span", { children: "Usuario Personalizado" })] }), subtitle: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fa fa-envelope" }), _jsx("span", { children: "usuario@ejemplo.com" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "El t\u00EDtulo y subt\u00EDtulo pueden ser ReactNode, permitiendo incluir iconos, badges, o cualquier componente personalizado." }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Background Personalizado" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente detecta autom\u00E1ticamente las clases de background (bg-*) desde la prop className y las aplica al background de la card. Las dem\u00E1s clases se aplican normalmente al contenedor." }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(Card, { title: "Card con bg-blue-50", className: "bg-blue-50", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Card con background personalizado usando clases de Tailwind" }) }), _jsx(Card, { title: "Card con bg-gradient", className: "bg-gradient-to-br from-purple-100 to-pink-100", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Card con gradiente personalizado" }) }), _jsx(Card, { title: "Card con bg y otras clases", className: "bg-green-50 p-8", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes combinar clases de background con otras clases de Tailwind" }) })] })] }), _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: "Variantes:" }), " Soporta tres variantes: default, elevated (con sombra) y outlined (con borde destacado)"] }), _jsxs("li", { children: [_jsx("strong", { children: "HeaderActions:" }), " Usa la propiedad", " ", _jsx("code", { children: "headerActions" }), " para mostrar un DropdownMenu con acciones en el header. Las acciones se muestran en un men\u00FA desplegable."] }), _jsxs("li", { children: [_jsx("strong", { children: "Comportamiento responsive:" }), " En pantallas grandes (lg+), las acciones del header solo se muestran al hacer hover sobre el Card. En pantallas peque\u00F1as, siempre son visibles."] }), _jsxs("li", { children: [_jsx("strong", { children: "Opci\u00F3n \u00FAnica:" }), " Cuando hay una sola acci\u00F3n, se muestra directamente gracias a", " ", _jsx("code", { children: "replaceOnSingleOption" }), ", sin necesidad de abrir un men\u00FA."] }), _jsxs("li", { children: [_jsx("strong", { children: "Title y Subtitle flexibles:" }), " Pueden ser strings o ReactNode, permitiendo incluir iconos, badges u otros componentes."] }), _jsxs("li", { children: [_jsx("strong", { children: "Background personalizado:" }), " El componente detecta autom\u00E1ticamente las clases de background (bg-*) y las aplica correctamente."] }), _jsxs("li", { children: [_jsx("strong", { children: "Footer opcional:" }), " Puedes agregar contenido en el footer de la card."] })] }) }) })] }), _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 principal de la card." })] }), _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: "title" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string | 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: "T\u00EDtulo de la card. Puede ser un string o un ReactNode." })] }), _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: "subtitle" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string | 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: "Subt\u00EDtulo de la card. Se muestra debajo del t\u00EDtulo." })] }), _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: "headerActions" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "() => Array<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: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu en el header. En pantallas grandes (lg+), solo se muestran al hacer hover. Las acciones deben manejar sus propios eventos onClick." })] }), _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: "footer" }), _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: "Contenido del footer de la card." })] }), _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: "variant" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\"default\" | \"elevated\" | \"outlined\"" }), _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: "Variante visual de la card. Por defecto es \"default\"." })] }), _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: "className" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _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: "Clases CSS adicionales. Las clases de background (bg-*) se aplican autom\u00E1ticamente al background de la card." })] })] })] }) })] })] }) }) }));
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Card - 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: "Variantes" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsx(Card, { variant: "default", title: "Default", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "card por defecto" }) }), _jsx(Card, { variant: "elevated", title: "Elevated", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "card con sombra elevada" }) }), _jsx(Card, { variant: "outlined", title: "Outlined", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "card con borde destacado" }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Header y Footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente Card soporta acciones en el header usando la propiedad ", _jsx("code", { children: "headerActions" }), ". Puedes pasar cualquier ReactNode que se mostrar\u00E1 directamente en el header, alineado a la derecha."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Card, { title: "Card con m\u00FAltiples acciones", subtitle: "Ejemplo con botones en el header", headerActions: _jsx("div", { children: _jsx(DropdownMenu, { options: [
+                                                    {
+                                                        label: "Editar",
+                                                        icon: "fa-edit",
+                                                    },
+                                                    {
+                                                        label: "Eliminar",
+                                                        icon: "fa-trash",
+                                                    },
+                                                    {
+                                                        label: "Compartir",
+                                                        icon: "fa-share",
+                                                    },
+                                                ], onOptionSelected: (item) => {
+                                                    console.log(item.label);
+                                                }, renderOption: (item) => (_jsx(Button, { size: "sm", variant: "ghost", icon: item.icon, children: item.label })), renderNode: _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-ellipsis-h", "aria-label": "Acciones" }) }) }), footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", children: "Cancelar" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-check", children: "Aceptar" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Card con m\u00FAltiples acciones en el header. Puedes pasar cualquier ReactNode, como botones, iconos, o componentes personalizados." }) }), _jsx(Card, { title: "Card con una sola acci\u00F3n", subtitle: "Se muestra directamente", headerActions: _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-search", onClick: () => console.log("Ver detalles") }), children: _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes pasar un solo bot\u00F3n o cualquier otro componente directamente en ", _jsx("code", { children: "headerActions" }), "."] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Title y Subtitle como ReactNode" }), _jsx(Card, { title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-user-circle" }), _jsx("span", { children: "Usuario Personalizado" })] }), subtitle: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-envelope" }), _jsx("span", { children: "usuario@ejemplo.com" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "El t\u00EDtulo y subt\u00EDtulo pueden ser ReactNode, permitiendo incluir iconos, badges, o cualquier componente personalizado." }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Background Personalizado" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente detecta autom\u00E1ticamente las clases de background (bg-*) desde la prop className y las aplica al background de la card. Las dem\u00E1s clases se aplican normalmente al contenedor." }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(Card, { title: "Card con bg-blue-50", className: "bg-blue-50", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Card con background personalizado usando clases de Tailwind" }) }), _jsx(Card, { title: "Card con bg-gradient", className: "bg-gradient-to-br from-purple-100 to-pink-100", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Card con gradiente personalizado" }) }), _jsx(Card, { title: "Card con bg y otras clases", className: "bg-green-50 p-8", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes combinar clases de background con otras clases de Tailwind" }) })] })] }), _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: "Variantes:" }), " Soporta tres variantes: default, elevated (con sombra) y outlined (con borde destacado)"] }), _jsxs("li", { children: [_jsx("strong", { children: "HeaderActions:" }), " Usa la propiedad", " ", _jsx("code", { children: "headerActions" }), " para mostrar cualquier ReactNode en el header, alineado a la derecha. Puedes pasar botones, iconos, o cualquier componente personalizado."] }), _jsxs("li", { children: [_jsx("strong", { children: "Title y Subtitle flexibles:" }), " Pueden ser strings o ReactNode, permitiendo incluir iconos, badges u otros componentes."] }), _jsxs("li", { children: [_jsx("strong", { children: "Background personalizado:" }), " El componente detecta autom\u00E1ticamente las clases de background (bg-*) y las aplica correctamente."] }), _jsxs("li", { children: [_jsx("strong", { children: "Footer opcional:" }), " Puedes agregar contenido en el footer de la card."] })] }) }) })] }), _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 principal de la card." })] }), _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: "title" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string | 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: "T\u00EDtulo de la card. Puede ser un string o un ReactNode." })] }), _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: "subtitle" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string | 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: "Subt\u00EDtulo de la card. Se muestra debajo del t\u00EDtulo." })] }), _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: "headerActions" }), _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: "Contenido que se mostrar\u00E1 en el header de la card, alineado a la derecha. Puede ser cualquier ReactNode, como botones, iconos, o componentes personalizados." })] }), _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: "footer" }), _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: "Contenido del footer de la card." })] }), _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: "variant" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\"default\" | \"elevated\" | \"outlined\"" }), _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: "Variante visual de la card. Por defecto es \"default\"." })] }), _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: "className" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _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: "Clases CSS adicionales. Las clases de background (bg-*) se aplican autom\u00E1ticamente al background de la card." })] })] })] }) })] })] }) }) }));
 };
 export default CardDocs;

package/dist/docs/DataTableDocs.js

@@ -214,19 +214,19 @@ const DataTableDocs = () => {
     ];
     const headerCustomColumns = [
         {
-            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fa fa-hashtag" }), _jsx("span", { children: "ID" })] })),
+            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-hashtag" }), _jsx("span", { children: "ID" })] })),
             value: "id",
             align: "center",
             width: "80px",
             type: "numeric",
         },
         {
-            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fa fa-box" }), _jsx("span", { children: "Producto" })] })),
+            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-box" }), _jsx("span", { children: "Producto" })] })),
             value: "name",
             align: "left",
         },
         {
-            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fa fa-euro-sign" }), _jsx("span", { children: "Precio" })] })),
+            header: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-euro-sign" }), _jsx("span", { children: "Precio" })] })),
             value: "price",
             align: "right",
             type: "currency",

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

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

package/dist/docs/DialogDocs.js

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

package/dist/docs/DocAdmin.js

@@ -52,7 +52,7 @@ const DocAdmin = () => {
             alert("Error al reiniciar los datos");
         }
     };
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { title: "Administraci\u00F3n de Datos Mock", subtitle: "Gestiona los datos de ejemplo para la documentaci\u00F3n", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4 text-[var(--color-text-primary)]", children: "Estad\u00EDsticas Actuales" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-2", children: _jsx(Badge, { variant: "primary", icon: "fa-building", size: "sm", children: "Empresas" }) }), _jsx("p", { className: "text-2xl font-bold text-[var(--color-text-primary)]", children: stats.empresas })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-2", children: _jsx(Badge, { variant: "secondary", icon: "fa-users", size: "sm", children: "Personas" }) }), _jsx("p", { className: "text-2xl font-bold text-[var(--color-text-primary)]", children: stats.personas })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-2", children: _jsx(Badge, { variant: "info", icon: "fa-link", size: "sm", children: "Relaciones" }) }), _jsx("p", { className: "text-2xl font-bold text-[var(--color-text-primary)]", children: stats.relaciones })] })] })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsxs("h4", { className: "font-semibold mb-2 text-[var(--color-text-primary)]", children: [_jsx("i", { className: "fa fa-info-circle mr-2 text-[var(--color-info)]" }), "Informaci\u00F3n"] }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: "Los datos se almacenan en localStorage y se utilizan en los ejemplos de documentaci\u00F3n. Al reiniciar, se restaurar\u00E1n 20 empresas, 20 personas y sus relaciones iniciales." })] }), _jsx("div", { className: "flex justify-center", children: _jsx(Button, { variant: "primary", icon: "fa-redo", onClick: handleReset, disabled: isResetting, loading: isResetting, children: isResetting ? "Reiniciando..." : "Reiniciar Datos Locales" }) })] }) }), _jsx(Card, { title: "Servicios Disponibles", subtitle: "Documentaci\u00F3n de los servicios mock disponibles", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-3", children: _jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "empresaService" }) }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Servicio para gestionar empresas" }), _jsxs("div", { className: "space-y-1 text-sm font-mono text-[var(--color-text-primary)]", children: [_jsxs("div", { children: ["\u2022 listar(params?: ", "{", " filtro?: string ", "}", "): Promise<Empresa[]>"] }), _jsxs("div", { children: ["\u2022 listarPaginados(params?: ", "{", " filtro?: string, pagina?: number, limit?: number ", "}", "): Promise<PaginationInterface<Empresa>>"] }), _jsx("div", { children: "\u2022 buscarPorId(id: number): Promise<Empresa | undefined>" }), _jsx("div", { children: "\u2022 agregar(empresa: Omit<Empresa, \"id\">): Promise<Empresa>" }), _jsx("div", { children: "\u2022 editar(id: number, datos: Partial<...>): Promise<Empresa | null>" }), _jsx("div", { children: "\u2022 eliminar(id: number): Promise<boolean>" })] })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-3", children: _jsx(Badge, { variant: "secondary", icon: "fa-code", size: "sm", children: "personaService" }) }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Servicio para gestionar personas" }), _jsxs("div", { className: "space-y-1 text-sm font-mono text-[var(--color-text-primary)]", children: [_jsxs("div", { children: ["\u2022 listar(params?: ", "{", " filtro?: string ", "}", "): Promise<Persona[]>"] }), _jsxs("div", { children: ["\u2022 listarPaginados(params?: ", "{", " filtro?: string, pagina?: number, limit?: number ", "}", "): Promise<PaginationInterface<Persona>>"] }), _jsx("div", { children: "\u2022 buscarPorId(id: number): Promise<Persona | undefined>" }), _jsx("div", { children: "\u2022 agregar(persona: Omit<Persona, \"id\">): Promise<Persona>" }), _jsx("div", { children: "\u2022 editar(id: number, datos: Partial<...>): Promise<Persona | null>" }), _jsx("div", { children: "\u2022 eliminar(id: number): Promise<boolean>" })] })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-3", children: _jsx(Badge, { variant: "info", icon: "fa-code", size: "sm", children: "personaEmpresaService" }) }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Servicio para gestionar relaciones persona-empresa (muchos a muchos)" }), _jsxs("div", { className: "space-y-1 text-sm font-mono text-[var(--color-text-primary)]", children: [_jsx("div", { children: "\u2022 listar(): Promise<PersonaEmpresa[]>" }), _jsx("div", { children: "\u2022 buscarPorPersona(idPersona: number): Promise<PersonaEmpresa[]>" }), _jsx("div", { children: "\u2022 buscarPorEmpresa(idEmpresa: number): Promise<PersonaEmpresa[]>" }), _jsx("div", { children: "\u2022 buscarPorPersonaYEmpresa(idPersona, idEmpresa): Promise<PersonaEmpresa | undefined>" }), _jsx("div", { children: "\u2022 agregar(relacion: PersonaEmpresa): Promise<PersonaEmpresa>" }), _jsx("div", { children: "\u2022 editar(idPersona, idEmpresa, datos): Promise<PersonaEmpresa | null>" }), _jsx("div", { children: "\u2022 eliminar(idPersona, idEmpresa): Promise<boolean>" }), _jsx("div", { children: "\u2022 eliminarPorPersona(idPersona): Promise<number>" }), _jsx("div", { children: "\u2022 eliminarPorEmpresa(idEmpresa): Promise<number>" })] })] })] }) }), _jsx(Card, { title: "Interfaces TypeScript", subtitle: "Estructuras de datos utilizadas", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "Empresa" })] }), _jsx("pre", { className: "text-xs bg-[var(--color-bg-default)] p-3 rounded border border-[var(--color-border-default)] overflow-x-auto", children: `interface Empresa {
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { title: "Administraci\u00F3n de Datos Mock", subtitle: "Gestiona los datos de ejemplo para la documentaci\u00F3n", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4 text-[var(--color-text-primary)]", children: "Estad\u00EDsticas Actuales" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-2", children: _jsx(Badge, { variant: "primary", icon: "fa-building", size: "sm", children: "Empresas" }) }), _jsx("p", { className: "text-2xl font-bold text-[var(--color-text-primary)]", children: stats.empresas })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-2", children: _jsx(Badge, { variant: "secondary", icon: "fa-users", size: "sm", children: "Personas" }) }), _jsx("p", { className: "text-2xl font-bold text-[var(--color-text-primary)]", children: stats.personas })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-2", children: _jsx(Badge, { variant: "info", icon: "fa-link", size: "sm", children: "Relaciones" }) }), _jsx("p", { className: "text-2xl font-bold text-[var(--color-text-primary)]", children: stats.relaciones })] })] })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsxs("h4", { className: "font-semibold mb-2 text-[var(--color-text-primary)]", children: [_jsx("i", { className: "fal fa-info-circle mr-2 text-[var(--color-info)]" }), "Informaci\u00F3n"] }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: "Los datos se almacenan en localStorage y se utilizan en los ejemplos de documentaci\u00F3n. Al reiniciar, se restaurar\u00E1n 20 empresas, 20 personas y sus relaciones iniciales." })] }), _jsx("div", { className: "flex justify-center", children: _jsx(Button, { variant: "primary", icon: "fa-redo", onClick: handleReset, disabled: isResetting, loading: isResetting, children: isResetting ? "Reiniciando..." : "Reiniciar Datos Locales" }) })] }) }), _jsx(Card, { title: "Servicios Disponibles", subtitle: "Documentaci\u00F3n de los servicios mock disponibles", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-3", children: _jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "empresaService" }) }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Servicio para gestionar empresas" }), _jsxs("div", { className: "space-y-1 text-sm font-mono text-[var(--color-text-primary)]", children: [_jsxs("div", { children: ["\u2022 listar(params?: ", "{", " filtro?: string ", "}", "): Promise<Empresa[]>"] }), _jsxs("div", { children: ["\u2022 listarPaginados(params?: ", "{", " filtro?: string, pagina?: number, limit?: number ", "}", "): Promise<PaginationInterface<Empresa>>"] }), _jsx("div", { children: "\u2022 buscarPorId(id: number): Promise<Empresa | undefined>" }), _jsx("div", { children: "\u2022 agregar(empresa: Omit<Empresa, \"id\">): Promise<Empresa>" }), _jsx("div", { children: "\u2022 editar(id: number, datos: Partial<...>): Promise<Empresa | null>" }), _jsx("div", { children: "\u2022 eliminar(id: number): Promise<boolean>" })] })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-3", children: _jsx(Badge, { variant: "secondary", icon: "fa-code", size: "sm", children: "personaService" }) }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Servicio para gestionar personas" }), _jsxs("div", { className: "space-y-1 text-sm font-mono text-[var(--color-text-primary)]", children: [_jsxs("div", { children: ["\u2022 listar(params?: ", "{", " filtro?: string ", "}", "): Promise<Persona[]>"] }), _jsxs("div", { children: ["\u2022 listarPaginados(params?: ", "{", " filtro?: string, pagina?: number, limit?: number ", "}", "): Promise<PaginationInterface<Persona>>"] }), _jsx("div", { children: "\u2022 buscarPorId(id: number): Promise<Persona | undefined>" }), _jsx("div", { children: "\u2022 agregar(persona: Omit<Persona, \"id\">): Promise<Persona>" }), _jsx("div", { children: "\u2022 editar(id: number, datos: Partial<...>): Promise<Persona | null>" }), _jsx("div", { children: "\u2022 eliminar(id: number): Promise<boolean>" })] })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-3", children: _jsx(Badge, { variant: "info", icon: "fa-code", size: "sm", children: "personaEmpresaService" }) }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Servicio para gestionar relaciones persona-empresa (muchos a muchos)" }), _jsxs("div", { className: "space-y-1 text-sm font-mono text-[var(--color-text-primary)]", children: [_jsx("div", { children: "\u2022 listar(): Promise<PersonaEmpresa[]>" }), _jsx("div", { children: "\u2022 buscarPorPersona(idPersona: number): Promise<PersonaEmpresa[]>" }), _jsx("div", { children: "\u2022 buscarPorEmpresa(idEmpresa: number): Promise<PersonaEmpresa[]>" }), _jsx("div", { children: "\u2022 buscarPorPersonaYEmpresa(idPersona, idEmpresa): Promise<PersonaEmpresa | undefined>" }), _jsx("div", { children: "\u2022 agregar(relacion: PersonaEmpresa): Promise<PersonaEmpresa>" }), _jsx("div", { children: "\u2022 editar(idPersona, idEmpresa, datos): Promise<PersonaEmpresa | null>" }), _jsx("div", { children: "\u2022 eliminar(idPersona, idEmpresa): Promise<boolean>" }), _jsx("div", { children: "\u2022 eliminarPorPersona(idPersona): Promise<number>" }), _jsx("div", { children: "\u2022 eliminarPorEmpresa(idEmpresa): Promise<number>" })] })] })] }) }), _jsx(Card, { title: "Interfaces TypeScript", subtitle: "Estructuras de datos utilizadas", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "Empresa" })] }), _jsx("pre", { className: "text-xs bg-[var(--color-bg-default)] p-3 rounded border border-[var(--color-border-default)] overflow-x-auto", children: `interface Empresa {
   id: number;
   nombre: string;
 }` })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "Persona" })] }), _jsx("pre", { className: "text-xs bg-[var(--color-bg-default)] p-3 rounded border border-[var(--color-border-default)] overflow-x-auto", children: `interface Persona {

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

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

package/dist/docs/DocsMenu.js

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

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiC1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAqC9B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/DocsRouter.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Routes, Route, Navigate } from "react-router-dom";
 import ButtonDocs from "./ButtonDocs";
+import LinkButtonDocs from "./LinkButtonDocs";
 import CardDocs from "./CardDocs";
 import InputDocs from "./InputDocs";
 import ThemeSwitcherDocs from "./ThemeSwitcherDocs";
@@ -19,15 +20,18 @@ import PaginationDocs from "./PaginationDocs";
 import LoaderDocs from "./LoaderDocs";
 import DataTableDocs from "./DataTableDocs";
 import DropdownMenuDocs from "./DropdownMenuDocs";
+import DropdownPanelDocs from "./DropdownPanelDocs";
 import FilterDocs from "./FilterDocs";
 import { AuthDocs } from "./AuthDocs.tsx/AuthDocs";
 import { ListCrudDocs } from "./ListCrudDocs.tsx/ListCrudDocs";
 import ExampleFormDocs from "./ExampleFormDocs";
 import CheckboxDocs from "./CheckboxDocs";
 import RadioButtonGroupDocs from "./RadioButtonGroupDocs";
+import MenuDocs from "./MenuDocs";
 import SnackbarDocs from "./SnackbarDocs";
+import AccordionDocs from "./AccordionDocs";
 import 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: "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, {}) })] }));
+    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "linkbutton", element: _jsx(LinkButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "avatar", element: _jsx(AvatarDocs, {}) }), _jsx(Route, { path: "roadmap", element: _jsx(RoadMapDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "autocomplete-input", element: _jsx(AutocompleteInputDocs, {}) }), _jsx(Route, { path: "search-select-input", element: _jsx(SearchSelectInputDocs, {}) }), _jsx(Route, { path: "datepicker", element: _jsx(DatePickerDocs, {}) }), _jsx(Route, { path: "dateinput", element: _jsx(DateInputDocs, {}) }), _jsx(Route, { path: "checkbox", element: _jsx(CheckboxDocs, {}) }), _jsx(Route, { path: "radiobuttongroup", element: _jsx(RadioButtonGroupDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) }), _jsx(Route, { path: "tabsgroup", element: _jsx(TabsGroupDocs, {}) }), _jsx(Route, { path: "dialog", element: _jsx(DialogDocs, {}) }), _jsx(Route, { path: "pagination", element: _jsx(PaginationDocs, {}) }), _jsx(Route, { path: "loader", element: _jsx(LoaderDocs, {}) }), _jsx(Route, { path: "datatable", element: _jsx(DataTableDocs, {}) }), _jsx(Route, { path: "dropdownmenu", element: _jsx(DropdownMenuDocs, {}) }), _jsx(Route, { path: "dropdownpanel", element: _jsx(DropdownPanelDocs, {}) }), _jsx(Route, { path: "filter", element: _jsx(FilterDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) }), _jsx(Route, { path: "listcrud/empresa/:id", element: _jsx(ListCrudDocs, {}) }), _jsx(Route, { path: "listcrud", element: _jsx(ListCrudDocs, {}) }), _jsx(Route, { path: "example-form", element: _jsx(ExampleFormDocs, {}) }), _jsx(Route, { path: "menu", element: _jsx(MenuDocs, {}) }), _jsx(Route, { path: "snackbar", element: _jsx(SnackbarDocs, {}) }), _jsx(Route, { path: "accordion", element: _jsx(AccordionDocs, {}) }), _jsx(Route, { path: "admin", element: _jsx(DocAdmin, {}) })] }));
 };
 export default DocsRouter;

package/dist/docs/DropdownMenuDocs.js

@@ -55,7 +55,7 @@ const DropdownMenuDocs = () => {
                                                 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) => {
+                                            }, 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: "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);

package/dist/docs/DropdownPanelDocs.d.ts

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