flysoft-react-ui 0.5.2 → 0.5.3

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.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" }), "."] }), _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: "fal 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: "fal 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: "fal fa-lightbulb mr-2" }), "Puedes usar cualquier componente React en el t\u00EDtulo, body y acciones."] }) })] }), dialogActions: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-bookmark", onClick: () => setIsOpenCustom(false), children: "Guardar para despu\u00E9s" }), _jsx(Button, { variant: "primary", icon: "fa-check", onClick: () => setIsOpenCustom(false), children: "Entendido" })] }), onClose: () => setIsOpenCustom(false) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Overlay con blur:" }), " El overlay tiene un efecto de desenfoque (backdrop-blur) para mejor enfoque visual"] }), _jsxs("li", { children: [_jsx("strong", { children: "Cierre m\u00FAltiple:" }), " Se puede cerrar haciendo clic en el overlay, en el bot\u00F3n X, en los botones de acci\u00F3n, o presionando Escape"] }), _jsxs("li", { children: [_jsx("strong", { children: "Prevenci\u00F3n de scroll:" }), " Cuando el dialog est\u00E1 abierto, se previene el scroll del body"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " El dialog se adapta a diferentes tama\u00F1os de pantalla con padding adecuado"] }), _jsxs("li", { children: [_jsx("strong", { children: "Accesibilidad:" }), " Incluye atributos ARIA para mejor accesibilidad"] }), _jsxs("li", { children: [_jsx("strong", { children: "Contenido flexible:" }), " El body tiene scroll autom\u00E1tico si el contenido es muy largo"] })] }) }) })] })] }) }) }));
 };
 export default DialogDocs;

package/dist/docs/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,+CAyRpB,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(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/dropdownmenu", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DropdownMenu" }), _jsx(LinkButton, { to: "/docs/filter", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Filter" }), _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: "ListCrudContext" })] }) }), _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;AA+B1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAkC9B,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";
@@ -26,8 +27,9 @@ import ExampleFormDocs from "./ExampleFormDocs";
 import CheckboxDocs from "./CheckboxDocs";
 import RadioButtonGroupDocs from "./RadioButtonGroupDocs";
 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: "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: "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/LinkButtonDocs.d.ts

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

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

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

package/dist/docs/LinkButtonDocs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card, LinkButton, Button } from "../index";
+const LinkButtonDocs = () => {
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "LinkButton - 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: "Uso b\u00E1sico" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente LinkButton se ve y funciona como un Button, pero funciona como un enlace. Usa react-router-dom Link para rutas internas y un elemento <a> para enlaces externos." }), _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(LinkButton, { to: "/docs/button", variant: "primary", children: "Ruta Interna" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Enlace a ruta interna" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(LinkButton, { to: "https://github.com", target: "_blank", variant: "outline", children: "Enlace Externo" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Enlace externo con target" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(LinkButton, { to: "/docs/card", variant: "ghost", children: "Ghost Link" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Variante ghost" })] })] })] }), _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: "LinkButton tiene las mismas variantes que Button: primary, outline y ghost." }), _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(LinkButton, { to: "/docs/button", variant: "primary", icon: "fa-check", children: "Primario" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "variante primaria" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(LinkButton, { to: "/docs/button", variant: "outline", icon: "fa-pen", children: "Outline" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "variante outline" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(LinkButton, { to: "/docs/button", variant: "ghost", icon: "fa-trash", children: "Ghost" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "variante ghost" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "LinkButton soporta los mismos tama\u00F1os que Button: sm, md y lg." }), _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(LinkButton, { to: "/docs/button", size: "sm", variant: "primary", children: "Peque\u00F1o" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o peque\u00F1o" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(LinkButton, { to: "/docs/button", size: "md", variant: "primary", children: "Mediano" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o mediano" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(LinkButton, { to: "/docs/button", size: "lg", variant: "primary", children: "Grande" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o 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(LinkButton, { to: "/docs/button", variant: "primary", color: "primary", children: "Primary" }), _jsx(LinkButton, { to: "/docs/button", variant: "primary", color: "secondary", children: "Secondary" }), _jsx(LinkButton, { to: "/docs/button", variant: "primary", color: "success", children: "Success" }), _jsx(LinkButton, { to: "/docs/button", variant: "primary", color: "warning", children: "Warning" }), _jsx(LinkButton, { to: "/docs/button", variant: "primary", color: "danger", children: "Danger" }), _jsx(LinkButton, { to: "/docs/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(LinkButton, { to: "/docs/button", variant: "outline", color: "primary", children: "Primary" }), _jsx(LinkButton, { to: "/docs/button", variant: "outline", color: "secondary", children: "Secondary" }), _jsx(LinkButton, { to: "/docs/button", variant: "outline", color: "success", children: "Success" }), _jsx(LinkButton, { to: "/docs/button", variant: "outline", color: "warning", children: "Warning" }), _jsx(LinkButton, { to: "/docs/button", variant: "outline", color: "danger", children: "Danger" }), _jsx(LinkButton, { to: "/docs/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(LinkButton, { to: "/docs/button", variant: "ghost", color: "primary", children: "Primary" }), _jsx(LinkButton, { to: "/docs/button", variant: "ghost", color: "secondary", children: "Secondary" }), _jsx(LinkButton, { to: "/docs/button", variant: "ghost", color: "success", children: "Success" }), _jsx(LinkButton, { to: "/docs/button", variant: "ghost", color: "warning", children: "Warning" }), _jsx(LinkButton, { to: "/docs/button", variant: "ghost", color: "danger", children: "Danger" }), _jsx(LinkButton, { to: "/docs/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: "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(LinkButton, { to: "/docs/button", variant: "primary", bg: "#8b5cf6", textColor: "white", children: "P\u00FArpura" }), _jsx(LinkButton, { to: "/docs/button", variant: "primary", bg: "#ec4899", textColor: "white", children: "Rosa" }), _jsx(LinkButton, { to: "/docs/button", variant: "primary", bg: "#14b8a6", textColor: "white", children: "Turquesa" }), _jsx(LinkButton, { to: "/docs/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(LinkButton, { to: "/docs/button", variant: "outline", bg: "#8b5cf6", textColor: "#8b5cf6", children: "P\u00FArpura" }), _jsx(LinkButton, { to: "/docs/button", variant: "outline", bg: "#ec4899", textColor: "#ec4899", children: "Rosa" }), _jsx(LinkButton, { to: "/docs/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(LinkButton, { to: "/docs/button", variant: "ghost", bg: "#8b5cf6", textColor: "#8b5cf6", children: "P\u00FArpura" }), _jsx(LinkButton, { to: "/docs/button", variant: "ghost", bg: "#ec4899", textColor: "#ec4899", children: "Rosa" }), _jsx(LinkButton, { to: "/docs/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(LinkButton, { to: "/docs/button", variant: "primary", bg: "gray-800", textColor: "white", children: "Gray-800" }), _jsx(LinkButton, { to: "/docs/button", variant: "primary", bg: "gray-700", textColor: "white", children: "Gray-700" }), _jsx(LinkButton, { to: "/docs/button", variant: "outline", bg: "gray-600", textColor: "gray-600", children: "Gray-600" })] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con \u00EDcono" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "LinkButton soporta iconos FontAwesome 5 en las mismas posiciones que Button: izquierda o derecha." }), _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(LinkButton, { to: "/docs/button", variant: "primary", icon: "fa-download", children: "Con \u00EDcono (izquierda)" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\u00EDcono a la izquierda" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(LinkButton, { to: "/docs/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(LinkButton, { to: "/docs/button", variant: "ghost", icon: "fa-external-link-alt", children: "Solo \u00EDcono" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "sin texto, solo \u00EDcono" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Enlaces externos" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["LinkButton detecta autom\u00E1ticamente si el enlace es externo (http://, https://, mailto:, tel:) y usa un elemento <a> en lugar de react-router-dom Link. Puedes usar la propiedad", " ", _jsx("code", { children: "target" }), " para controlar c\u00F3mo se abre el enlace."] }), _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(LinkButton, { to: "https://github.com", target: "_blank", variant: "primary", icon: "fa-external-link-alt", children: "GitHub" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "enlace externo con target=\"_blank\"" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(LinkButton, { to: "mailto:contacto@ejemplo.com", variant: "outline", icon: "fa-envelope", children: "Email" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "enlace mailto" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(LinkButton, { to: "tel:+34600000000", variant: "ghost", icon: "fa-phone", children: "Tel\u00E9fono" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "enlace tel" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Comparaci\u00F3n con Button" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "LinkButton tiene el mismo aspecto visual que Button, pero funciona como un enlace. \u00DAsalo cuando necesites navegar a otra p\u00E1gina o enlace externo." }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-4 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "Button (acci\u00F3n)" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-save", children: "Guardar" }), _jsx(Button, { variant: "outline", icon: "fa-cancel", children: "Cancelar" })] }), _jsx("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Usa Button para acciones que ocurren en la misma p\u00E1gina (guardar, eliminar, etc.)" })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: [_jsx("h4", { className: "text-md font-semibold mb-3", style: { color: "var(--flysoft-text-primary)" }, children: "LinkButton (navegaci\u00F3n)" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(LinkButton, { to: "/docs/button", variant: "primary", icon: "fa-link", children: "Ver Documentaci\u00F3n" }), _jsx(LinkButton, { to: "https://github.com", target: "_blank", variant: "outline", icon: "fa-external-link-alt", children: "GitHub" })] }), _jsx("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: "Usa LinkButton para navegar a otras p\u00E1ginas o enlaces externos" })] })] })] }), _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: "Mismo aspecto que Button:" }), " LinkButton tiene exactamente el mismo dise\u00F1o visual que Button, incluyendo variantes, tama\u00F1os e iconos."] }), _jsxs("li", { children: [_jsx("strong", { children: "Rutas internas:" }), " Para rutas que empiezan con \"/\", usa react-router-dom Link para navegaci\u00F3n del lado del cliente."] }), _jsxs("li", { children: [_jsx("strong", { children: "Enlaces externos:" }), " Detecta autom\u00E1ticamente enlaces externos (http://, https://, mailto:, tel:) y usa un elemento <a>."] }), _jsxs("li", { children: [_jsx("strong", { children: "Target opcional:" }), " Puedes especificar el atributo target para controlar c\u00F3mo se abre el enlace. Para enlaces externos con target=\"_blank\", se agrega autom\u00E1ticamente rel=\"noopener noreferrer\" por seguridad."] }), _jsxs("li", { children: [_jsx("strong", { children: "Ripple effect:" }), " Incluye el mismo efecto ripple que Button al hacer clic."] }), _jsxs("li", { children: [_jsx("strong", { children: "Iconos:" }), " Soporta iconos FontAwesome 5 en posici\u00F3n izquierda o derecha."] }), _jsxs("li", { children: [_jsx("strong", { children: "Accesibilidad:" }), " Mantiene todas las caracter\u00EDsticas de accesibilidad de los enlaces HTML."] })] }) }) })] }), _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: "to" }), _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: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "URL o ruta a la que navegar. Puede ser una ruta interna (ej: \"/docs/button\") o un enlace externo (ej: \"https://github.com\", \"mailto:email@ejemplo.com\")." })] }), _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: "target" }), _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: "Atributo target del enlace (ej: \"_blank\", \"_self\"). Para enlaces externos con target=\"_blank\", se agrega autom\u00E1ticamente rel=\"noopener noreferrer\" por seguridad." })] }), _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: "\"primary\" | \"outline\" | \"ghost\"" }), _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 bot\u00F3n. Por defecto es \"primary\"." })] }), _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: "color" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\" | \"info\"" }), _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: "Color del bot\u00F3n. Por defecto es \"primary\". Permite usar otros colores del sistema de temas (secondary, success, warning, danger, info)." })] }), _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: "size" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\"sm\" | \"md\" | \"lg\"" }), _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: "Tama\u00F1o del bot\u00F3n. Por defecto es \"md\"." })] }), _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 junto al texto." })] }), _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: "iconPosition" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\"left\" | \"right\"" }), _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: "Posici\u00F3n del icono respecto al texto. Por defecto es \"left\"." })] }), _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: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del bot\u00F3n. Si no se proporciona, solo se muestra el icono (si est\u00E1 definido)." })] }), _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: "bg" }), _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: "Color de fondo personalizado. Acepta c\u00F3digos hex (ej: \"#8b5cf6\"), rgb/rgba (ej: \"rgb(139, 92, 246)\"), hsl, o nombres de colores comunes (white, black, gray-50, etc.). Cuando se especifica, sobrescribe las clases de variante." })] }), _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: "textColor" }), _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: "Color del texto personalizado. Acepta los mismos formatos que bg. Si no se especifica y hay bg, usa un color por defecto seg\u00FAn la variante." })] }), _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." })] })] })] }) })] })] }) }) }));
+};
+export default LinkButtonDocs;

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

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

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

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

package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.js

@@ -1,25 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useAppLayout } from "../../contexts";
 import { ListCrudProvider } from "../../contexts/ListCrudContext";
 import { empresaService, personaService, } from "../docMockServices";
 import { ListCrudDocsContentPersonas } from "./ListCrudDocsContentPersonas";
 import { Collection } from "../../components";
-/**
- * Componente de Documentación del ListCrudContext
- *
- * Este componente muestra cómo usar el ListCrudContext con un servicio mock
- * para propósitos de documentación y desarrollo.
- *
- * El servicio mock simula la operación principal:
- * - getPromise: Obtiene una lista de items (Array o PaginationInterface)
- */
+import { ListCrudDocsContentEmpresas } from "./ListCrudDocsContentEmpresas";
 export const ListCrudDocs = () => {
-    const { listarPaginados, eliminar } = personaService;
+    const { listarPaginados, eliminar, editar, agregar } = personaService;
     const { listarPaginados: listarPaginadosEmpresa } = empresaService;
     const { setNavBarLeftNode } = useAppLayout();
     useEffect(() => {
         setNavBarLeftNode(_jsx("h3", { className: "text-2xl font-semibold", children: "ListCrudContext" }));
+        return () => {
+            setNavBarLeftNode(_jsx(_Fragment, {}));
+        };
     }, [setNavBarLeftNode]);
-    return (_jsxs(Collection, { children: [_jsx(ListCrudProvider, { getPromise: listarPaginados, deletePromise: eliminar, urlParams: ["filtro", "idEmpresa"], children: _jsx(ListCrudDocsContentPersonas, {}) }), _jsx(ListCrudProvider, { getPromise: listarPaginadosEmpresa, urlParams: ["filtroEmpresa", "idEmpresaEmpresa"], children: "Empresas" })] }));
+    return (_jsxs(Collection, { children: [_jsx(ListCrudProvider, { getPromise: listarPaginados, postPromise: {
+                    execute: (persona) => agregar(persona),
+                    successMessage: "Persona agregada correctamente",
+                }, putPromise: {
+                    execute: (persona) => editar(persona.id, persona),
+                    successMessage: "Cambios guardados",
+                }, deletePromise: {
+                    execute: eliminar,
+                    successMessage: "Persona eliminada correctamente",
+                }, urlParams: ["filtro", "idEmpresa"], children: _jsx(ListCrudDocsContentPersonas, {}) }), _jsx(ListCrudProvider, { getPromise: listarPaginadosEmpresa, urlParams: ["filtroEmpresa", "idEmpresaEmpresa"], children: _jsx(ListCrudDocsContentEmpresas, {}) })] }));
 };