flysoft-react-ui 0.5.0 → 0.5.3

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

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

package/dist/docs/AutocompleteInputDocs.js

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

package/dist/docs/AvatarDocs.d.ts

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

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

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

package/dist/docs/AvatarDocs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Avatar, Card } from "../index";
+const AvatarDocs = () => {
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Avatar - Iniciales e Im\u00E1genes", 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 con Iniciales" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "John Doe" }), _jsx(Avatar, { text: "Jane Smith" }), _jsx(Avatar, { text: "Mar\u00EDa Garc\u00EDa" }), _jsx(Avatar, { text: "Pedro" }), _jsx(Avatar, { text: "Ana Mar\u00EDa L\u00F3pez" })] }), _jsx("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente muestra las iniciales del texto. Si hay una sola palabra, muestra la primera letra. Si hay m\u00FAltiples palabras, muestra la primera letra de la primera palabra y la primera letra de la \u00FAltima palabra." })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Avatar, { text: "Small", size: "sm" }), _jsx("span", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "sm" })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Avatar, { text: "Medium", size: "md" }), _jsx("span", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "md (default)" })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Avatar, { text: "Large", size: "lg" }), _jsx("span", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "lg" })] })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa la propiedad ", _jsx("code", { children: "size" }), " para cambiar el tama\u00F1o del avatar. Los tama\u00F1os disponibles son: ", _jsx("code", { children: "sm" }), ", ", _jsx("code", { children: "md" }), " (por defecto), y ", _jsx("code", { children: "lg" }), "."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con Im\u00E1genes" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "Usuario con Imagen", image: "https://i.pravatar.cc/150?img=1" }), _jsx(Avatar, { text: "Otra Imagen", image: "https://i.pravatar.cc/150?img=12" }), _jsx(Avatar, { text: "Tercera Imagen", image: "https://i.pravatar.cc/150?img=33" })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando se proporciona una imagen mediante la propiedad ", _jsx("code", { children: "image" }), ", el avatar muestra la imagen en lugar de las iniciales. Si la imagen falla al cargar, autom\u00E1ticamente se mostrar\u00E1n las iniciales como fallback."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Colores Personalizados" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Colores Hexadecimales" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "Azul", bgColor: "#3b82f6", textColor: "#ffffff" }), _jsx(Avatar, { text: "Verde", bgColor: "#10b981", textColor: "#ffffff" }), _jsx(Avatar, { text: "Rojo", bgColor: "#ef4444", textColor: "#ffffff" }), _jsx(Avatar, { text: "Amarillo", bgColor: "#f59e0b", textColor: "#000000" }), _jsx(Avatar, { text: "P\u00FArpura", bgColor: "#8b5cf6", textColor: "#ffffff" }), _jsx(Avatar, { text: "Rosa", bgColor: "#ec4899", textColor: "#ffffff" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Colores RGB" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "RGB", bgColor: "rgb(59, 130, 246)", textColor: "rgb(255, 255, 255)" }), _jsx(Avatar, { text: "RGBA", bgColor: "rgba(16, 185, 129, 0.9)", textColor: "rgb(255, 255, 255)" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Nombres de Colores" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "Gray-800", bgColor: "gray-800", textColor: "white" }), _jsx(Avatar, { text: "Gray-700", bgColor: "gray-700", textColor: "white" }), _jsx(Avatar, { text: "Gray-500", bgColor: "gray-500", textColor: "white" })] })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa las propiedades ", _jsx("code", { children: "bgColor" }), " y ", _jsx("code", { children: "textColor" }), " para personalizar los colores. Puedes usar valores hexadecimales (ej:", " ", _jsx("code", { children: "#3b82f6" }), "), RGB (ej: ", _jsx("code", { children: "rgb(59, 130, 246)" }), "), o nombres de colores comunes (ej: ", _jsx("code", { children: "white" }), ", ", _jsx("code", { children: "black" }), ",", _jsx("code", { children: "gray-600" }), "). Por defecto, el fondo es ", _jsx("code", { children: "gray-600" }), " y el texto es ", _jsx("code", { children: "white" }), "."] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplos Pr\u00E1cticos" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Lista de Usuarios" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { text: "Juan P\u00E9rez", bgColor: "#3b82f6" }), _jsx("span", { style: { color: "var(--flysoft-text-primary)" }, children: "Juan P\u00E9rez" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { text: "Mar\u00EDa Gonz\u00E1lez", bgColor: "#10b981" }), _jsx("span", { style: { color: "var(--flysoft-text-primary)" }, children: "Mar\u00EDa Gonz\u00E1lez" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { text: "Carlos Rodr\u00EDguez", image: "https://i.pravatar.cc/150?img=5" }), _jsx("span", { style: { color: "var(--flysoft-text-primary)" }, children: "Carlos Rodr\u00EDguez" })] })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Diferentes Tama\u00F1os con Colores" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "SM", size: "sm", bgColor: "#8b5cf6" }), _jsx(Avatar, { text: "MD", size: "md", bgColor: "#ec4899" }), _jsx(Avatar, { text: "LG", size: "lg", bgColor: "#f59e0b" })] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Atributo Title" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "Pasa el mouse aqu\u00ED" }), _jsx(Avatar, { text: "John Doe", bgColor: "#3b82f6" }), _jsx(Avatar, { text: "Usuario con Imagen", image: "https://i.pravatar.cc/150?img=8" })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente siempre incluye un atributo ", _jsx("code", { children: "title" }), " con el texto completo. Pasa el mouse sobre cualquier avatar para ver el tooltip."] })] })] }) }) }));
+};
+export default AvatarDocs;

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

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

package/dist/docs/BadgeDocs.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { useState } from "react";
 import { Badge, Card } from "../index";
 const BadgeDocs = () => {
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Badge - Variantes y Estados", 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-4", children: [_jsx(Badge, { variant: "primary", children: "Primario" }), _jsx(Badge, { variant: "secondary", children: "Secundario" }), _jsx(Badge, { variant: "success", icon: "fa-check-circle", children: "\u00C9xito" }), _jsx(Badge, { variant: "warning", icon: "fa-exclamation-triangle", children: "Advertencia" }), _jsx(Badge, { variant: "danger", icon: "fa-times-circle", children: "Error" }), _jsx(Badge, { variant: "info", icon: "fa-info-circle", children: "Informaci\u00F3n" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Badge, { size: "sm", icon: "fa-circle", iconLabel: "Indicador peque\u00F1o", children: "Peque\u00F1o" }), _jsx(Badge, { size: "md", icon: "fa-circle", children: "Mediano" }), _jsx(Badge, { size: "lg", icon: "fa-circle", children: "Grande" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDconos y dise\u00F1o" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { icon: "fa-bell", rounded: true, children: "Notificaci\u00F3n" }), _jsx(Badge, { icon: "fa-arrow-right", iconPosition: "right", children: "Acci\u00F3n" }), _jsx(Badge, { icon: "fa-shield-alt", iconLabel: "Estado protegido", children: "Accesible" })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa ", _jsx("code", { children: "icon" }), " con clases FontAwesome 5 (ej.", " ", _jsx("code", { children: "fa-check" }), ") y combina ", _jsx("code", { children: "rounded" }), " para badges tipo pills."] })] })] }) }) }));
+    const [clickCount, setClickCount] = useState(0);
+    const [iconClickCount, setIconClickCount] = useState(0);
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Badge - Variantes y Estados", 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-4", children: [_jsx(Badge, { variant: "primary", icon: "fa-star", iconPosition: "right", children: "Primario" }), _jsx(Badge, { variant: "secondary", children: "Secundario" }), _jsx(Badge, { variant: "success", icon: "fa-check-circle", children: "\u00C9xito" }), _jsx(Badge, { variant: "warning", icon: "fa-exclamation-triangle", children: "Advertencia" }), _jsx(Badge, { variant: "danger", icon: "fa-times-circle", children: "Error" }), _jsx(Badge, { variant: "info", icon: "fa-info-circle", children: "Informaci\u00F3n" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Badge, { size: "sm", icon: "fa-circle", iconLabel: "Indicador peque\u00F1o", children: "Peque\u00F1o" }), _jsx(Badge, { size: "md", icon: "fa-circle", children: "Mediano" }), _jsx(Badge, { size: "lg", icon: "fa-circle", children: "Grande" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDconos y dise\u00F1o" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Iconos a la izquierda (por defecto)" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { icon: "fa-bell", rounded: true, children: "Notificaci\u00F3n" }), _jsx(Badge, { variant: "primary", icon: "fa-star", children: "Primario" }), _jsx(Badge, { variant: "success", icon: "fa-check-circle", children: "\u00C9xito" }), _jsx(Badge, { icon: "fa-shield-alt", iconLabel: "Estado protegido", children: "Accesible" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Iconos a la derecha (iconPosition=\"right\")" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { variant: "primary", icon: "fa-star", iconPosition: "right", children: "Primario" }), _jsx(Badge, { variant: "secondary", icon: "fa-circle", iconPosition: "right", children: "Secundario" }), _jsx(Badge, { variant: "success", icon: "fa-check", iconPosition: "right", children: "\u00C9xito" }), _jsx(Badge, { variant: "warning", icon: "fa-exclamation", iconPosition: "right", children: "Advertencia" }), _jsx(Badge, { variant: "danger", icon: "fa-times", iconPosition: "right", children: "Error" }), _jsx(Badge, { variant: "info", icon: "fa-info", iconPosition: "right", children: "Informaci\u00F3n" }), _jsx(Badge, { icon: "fa-arrow-right", iconPosition: "right", rounded: true, children: "Acci\u00F3n" })] })] })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa ", _jsx("code", { children: "icon" }), " con clases FontAwesome 5 (ej.", " ", _jsx("code", { children: "fa-check" }), "). El prop ", _jsx("code", { children: "iconPosition" }), " puede ser ", _jsx("code", { children: "\"left\"" }), " (por defecto) o ", _jsx("code", { children: "\"right\"" }), " para posicionar el icono. Combina ", _jsx("code", { children: "rounded" }), " para badges tipo pills."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Interactividad con onClick" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Badge sin iconos (todo el badge es clickeable)" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsxs(Badge, { variant: "primary", onClick: () => setClickCount((prev) => prev + 1), children: ["Click aqu\u00ED (", clickCount, ")"] }), _jsx(Badge, { variant: "success", onClick: () => alert("Badge clickeado!"), children: "Alerta" }), _jsx(Badge, { variant: "info", rounded: true, onClick: () => console.log("Badge info clickeado"), children: "Ver en consola" })] }), _jsxs("p", { className: "text-sm mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando no hay iconos, el ", _jsx("code", { children: "onClick" }), " afecta a todo el badge y muestra cursor pointer."] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Badge con iconos (solo los iconos son clickeables)" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsxs(Badge, { variant: "warning", icon: "fa-times-circle", onClick: () => setIconClickCount((prev) => prev + 1), children: ["Cerrar (", iconClickCount, ")"] }), _jsx(Badge, { variant: "danger", icon: "fa-trash", iconPosition: "right", onClick: () => alert("Eliminar item"), children: "Eliminar" }), _jsx(Badge, { variant: "info", icon: "fa-edit", rounded: true, onClick: () => console.log("Editar clickeado"), children: "Editar" }), _jsx(Badge, { variant: "success", icon: "fa-check", iconPosition: "right", onClick: () => alert("Aceptar"), children: "Aceptar" })] }), _jsxs("p", { className: "text-sm mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando hay iconos, el ", _jsx("code", { children: "onClick" }), " solo afecta a los iconos (tienen cursor pointer). El texto del badge no es clickeable."] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Background personalizado" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Colores personalizados (hex, rgb, nombres)" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { bg: "#ff6b6b", textColor: "white", children: "Rojo personalizado" }), _jsx(Badge, { bg: "#4ecdc4", textColor: "white", children: "Turquesa" }), _jsx(Badge, { bg: "#ffe66d", textColor: "#1f2937", children: "Amarillo claro" }), _jsx(Badge, { bg: "rgb(138, 43, 226)", textColor: "white", children: "Violeta RGB" }), _jsx(Badge, { bg: "#95e1d3", textColor: "#1f2937", children: "Verde menta" }), _jsx(Badge, { bg: "#f38181", textColor: "white", children: "Coral" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Con iconos y rounded" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { bg: "#6c5ce7", textColor: "white", icon: "fa-star", rounded: true, children: "Premium" }), _jsx(Badge, { bg: "#00b894", textColor: "white", icon: "fa-check-circle", iconPosition: "right", children: "Verificado" }), _jsx(Badge, { bg: "#e17055", textColor: "white", icon: "fa-fire", rounded: true, children: "Popular" }), _jsx(Badge, { bg: "#0984e3", textColor: "white", icon: "fa-bolt", iconPosition: "right", rounded: true, children: "R\u00E1pido" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Con onClick y background personalizado" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { bg: "#a29bfe", textColor: "white", onClick: () => alert("Badge personalizado clickeado!"), children: "Click aqu\u00ED" }), _jsx(Badge, { bg: "#fd79a8", textColor: "white", icon: "fa-heart", onClick: () => alert("Me gusta!"), rounded: true, children: "Me gusta" }), _jsx(Badge, { bg: "#55efc4", textColor: "#1f2937", icon: "fa-share", iconPosition: "right", onClick: () => console.log("Compartir"), children: "Compartir" })] })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa ", _jsx("code", { children: "bg" }), " para definir un color de fondo personalizado (hex, rgb, nombres de colores CSS como \"white\", \"black\", o valores Tailwind como \"gray-800\") y ", _jsx("code", { children: "textColor" }), " para personalizar el color del texto. Si no especificas", " ", _jsx("code", { children: "textColor" }), ", se usa gris oscuro por defecto."] })] })] })] }) }) }));
 };
 export default BadgeDocs;

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/CheckboxDocs.d.ts

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

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

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

package/dist/docs/CheckboxDocs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card, Checkbox, Button } from "../index";
+const CheckboxDocs = () => {
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Checkbox - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Acepto los t\u00E9rminos y condiciones" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "checkbox est\u00E1ndar con label a la derecha (por defecto)" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Acepto los t\u00E9rminos y condiciones", labelPosition: "left" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "checkbox con label a la izquierda" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Tama\u00F1o peque\u00F1o", size: "sm" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o compacto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Tama\u00F1o mediano", size: "md" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o por defecto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Tama\u00F1o grande", size: "lg" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o amplio" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Posiciones de label" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Label a la derecha", labelPosition: "right" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "posici\u00F3n por defecto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Label a la izquierda", labelPosition: "left" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "label antes del checkbox" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Con error", error: "Debes aceptar los t\u00E9rminos y condiciones" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "utiliza el prop error para mostrar mensajes y estilos" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Deshabilitado", disabled: true }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "el estado disabled aplica estilos y bloqueo de interacci\u00F3n" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados checked" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "No seleccionado", checked: false }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "estado inicial sin seleccionar" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Checkbox, { label: "Seleccionado", checked: true }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "checkbox marcado" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo de uso" }), _jsx(Card, { title: "Formulario con Checkbox", subtitle: "Ejemplo pr\u00E1ctico de uso de Checkbox en un formulario", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-check", children: "Enviar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Checkbox, { label: "Acepto los t\u00E9rminos y condiciones" }), _jsx(Checkbox, { label: "Deseo recibir notificaciones por email", labelPosition: "left" }), _jsx(Checkbox, { label: "Acepto la pol\u00EDtica de privacidad", error: "Debes aceptar la pol\u00EDtica de privacidad" })] }) })] })] }) }) }));
+};
+export default CheckboxDocs;

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

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

package/dist/docs/DataTableDocs.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { useState } from "react";
 import { Card, DataTable, Button, Badge } from "../index";
 const DataTableDocs = () => {
+    const [isLoading, setIsLoading] = useState(false);
     const allProducts = [
         {
             id: 1,
@@ -213,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",
@@ -235,6 +236,9 @@ const DataTableDocs = () => {
             ],
         },
     ];
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DataTable - 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: "Tabla b\u00E1sica" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo b\u00E1sico de una tabla con columnas simples usando nombres de propiedades." }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla completa con tipos de datos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Tabla con diferentes tipos de datos: currency, numeric y date. Las columnas se formatean autom\u00E1ticamente seg\u00FAn su tipo." }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con contenido personalizado y acciones" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Ejemplo con valores personalizados usando funciones, tooltips y componentes React como Badges. La columna de acciones usa la propiedad ", _jsx("code", { children: "actions" }), " que muestra un DropdownMenu con las acciones disponibles para cada fila. Cuando hay una sola acci\u00F3n (como en la columna \"Ver\"), se muestra directamente gracias a", " ", _jsx("code", { children: "replaceOnSingleOption" }), ", sin necesidad de abrir un men\u00FA."] }), _jsx(Card, { children: _jsx(DataTable, { columns: customColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con headers personalizados y acciones en header" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Los headers pueden ser ReactNode, permitiendo incluir iconos u otros componentes personalizados. Tambi\u00E9n puedes usar", " ", _jsx("code", { children: "headerActions" }), " para agregar un DropdownMenu con acciones en el header de la columna."] }), _jsx(Card, { children: _jsx(DataTable, { columns: headerCustomColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con scroll limitado (maxRows) y footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "maxRows" }), " puedes limitar el n\u00FAmero de filas visibles. Si hay m\u00E1s filas que el m\u00E1ximo, la tabla mostrar\u00E1 scroll solo en las filas mientras el header y el footer permanecen fijos. El footer se muestra usando la propiedad", " ", _jsx("code", { children: "footer" }), " en las columnas."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: allProducts, maxRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con locale personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "locale" }), " puedes cambiar el formato de los n\u00FAmeros (separador de miles y decimales). Por defecto usa", " ", _jsx("code", { children: "'es-AR'" }), ". En este ejemplo se usa ", _jsx("code", { children: "'en-US'" }), " ", "que formatea los n\u00FAmeros con coma como separador de miles y punto como separador decimal."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, locale: "en-US" }) })] }), _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: "Tipos de datos:" }), " Soporta text, numeric, currency y date con formateo autom\u00E1tico"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones por fila:" }), " Usa la propiedad", " ", _jsx("code", { children: "actions" }), " para mostrar un DropdownMenu con acciones espec\u00EDficas para cada fila"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones en header:" }), " Usa la propiedad", " ", _jsx("code", { children: "headerActions" }), " para mostrar un DropdownMenu con acciones en el header de la columna"] }), _jsxs("li", { children: [_jsx("strong", { children: "Alineaci\u00F3n:" }), " Cada columna puede tener su propia alineaci\u00F3n (left, right, center)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Ancho personalizado:" }), " Puedes definir el ancho de cada columna usando la propiedad width"] }), _jsxs("li", { children: [_jsx("strong", { children: "Valores personalizados:" }), " El value puede ser una funci\u00F3n que recibe la fila completa y retorna ReactNode"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tooltips:" }), " Soporte para tooltips personalizados por celda"] }), _jsxs("li", { children: [_jsx("strong", { children: "Headers personalizados:" }), " Los headers pueden ser ReactNode para incluir iconos o componentes"] }), _jsxs("li", { children: [_jsx("strong", { children: "Hover effect:" }), " Las filas tienen un efecto hover para mejor UX"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " La tabla tiene scroll horizontal autom\u00E1tico en pantallas peque\u00F1as"] }), _jsxs("li", { children: [_jsx("strong", { children: "Scroll limitado:" }), " Con maxRows puedes limitar el n\u00FAmero de filas visibles, manteniendo el header fijo y permitiendo scroll solo en las filas"] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "columns" }) }), _jsx("td", { className: "p-3 text-sm", children: "DataTableColumn<T>[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de columnas que define la estructura de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rows" }) }), _jsx("td", { className: "p-3 text-sm", children: "T[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de objetos que representan las filas de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "className" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para el contenedor de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "maxRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsx("td", { className: "p-3 text-sm", children: "M\u00E1ximo n\u00FAmero de filas visibles. Si hay m\u00E1s filas, se activa scroll vertical manteniendo el header fijo" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "locale" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsxs("td", { className: "p-3 text-sm", children: ["Locale para formateo de n\u00FAmeros (currency y numeric). Por defecto es ", _jsx("code", { children: "'es-AR'" }), ". Ejemplos:", " ", _jsx("code", { children: "'en-US'" }), ", ", _jsx("code", { children: "'es-ES'" }), ",", " ", _jsx("code", { children: "'de-DE'" })] })] })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "DataTableColumn Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "align" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"left\" | \"right\" | \"center\"" }), _jsx("td", { className: "p-3 text-sm", children: "Alineaci\u00F3n del contenido de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "width" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Ancho de la columna (ej: \"100px\", \"20%\")" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "header" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Texto o componente React para el header de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "value" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | number | ((row: T) => string | ReactNode)" }), _jsx("td", { className: "p-3 text-sm", children: "Nombre de la propiedad del objeto, valor directo, o funci\u00F3n que retorna el valor a mostrar" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "tooltip" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna el tooltip a mostrar al hacer hover sobre la celda" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "type" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"text\" | \"numeric\" | \"currency\" | \"date\"" }), _jsx("td", { className: "p-3 text-sm", children: "Tipo de dato que determina el formateo autom\u00E1tico" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "actions" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu para cada fila. Las acciones deben manejar sus propios eventos onClick." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerActions" }) }), _jsx("td", { className: "p-3 text-sm", children: "() => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu en el header de la columna. Las acciones deben manejar sus propios eventos onClick." })] })] })] }) })] })] }) }) }));
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DataTable - 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: "Tabla b\u00E1sica" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo b\u00E1sico de una tabla con columnas simples usando nombres de propiedades." }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla completa con tipos de datos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Tabla con diferentes tipos de datos: currency, numeric y date. Las columnas se formatean autom\u00E1ticamente seg\u00FAn su tipo." }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con contenido personalizado y acciones" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Ejemplo con valores personalizados usando funciones, tooltips y componentes React como Badges. La columna de acciones usa la propiedad ", _jsx("code", { children: "actions" }), " que muestra un DropdownMenu con las acciones disponibles para cada fila. Cuando hay una sola acci\u00F3n (como en la columna \"Ver\"), se muestra directamente gracias a", " ", _jsx("code", { children: "replaceOnSingleOption" }), ", sin necesidad de abrir un men\u00FA."] }), _jsx(Card, { children: _jsx(DataTable, { columns: customColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con headers personalizados y acciones en header" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Los headers pueden ser ReactNode, permitiendo incluir iconos u otros componentes personalizados. Tambi\u00E9n puedes usar", " ", _jsx("code", { children: "headerActions" }), " para agregar un DropdownMenu con acciones en el header de la columna."] }), _jsx(Card, { children: _jsx(DataTable, { columns: headerCustomColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con scroll limitado (maxRows) y footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "maxRows" }), " puedes limitar el n\u00FAmero de filas visibles. Si hay m\u00E1s filas que el m\u00E1ximo, la tabla mostrar\u00E1 scroll solo en las filas mientras el header y el footer permanecen fijos. El footer se muestra usando la propiedad", " ", _jsx("code", { children: "footer" }), " en las columnas."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: allProducts, maxRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con locale personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "locale" }), " puedes cambiar el formato de los n\u00FAmeros (separador de miles y decimales). Por defecto usa", " ", _jsx("code", { children: "'es-AR'" }), ". En este ejemplo se usa ", _jsx("code", { children: "'en-US'" }), " ", "que formatea los n\u00FAmeros con coma como separador de miles y punto como separador decimal."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, locale: "en-US" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estado de carga (Loading)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando las props ", _jsx("code", { children: "isLoading" }), " y ", _jsx("code", { children: "loadingRows" }), " ", "puedes mostrar un estado de carga con skeleton loaders. Cuando", " ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ", la tabla muestra las columnas pero reemplaza las filas de datos con filas skeleton que simulan el contenido. El n\u00FAmero de filas skeleton se controla con", " ", _jsx("code", { children: "loadingRows" }), " (por defecto 5)."] }), _jsx("div", { className: "mb-4", children: _jsx(Button, { variant: "primary", icon: "fa-sync-alt", onClick: () => {
+                                        setIsLoading(true);
+                                        setTimeout(() => setIsLoading(false), 3000);
+                                    }, disabled: isLoading, children: isLoading ? "Cargando..." : "Simular carga" }) }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, isLoading: isLoading, loadingRows: 5 }) })] }), _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: "Tipos de datos:" }), " Soporta text, numeric, currency y date con formateo autom\u00E1tico"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones por fila:" }), " Usa la propiedad", " ", _jsx("code", { children: "actions" }), " para mostrar un DropdownMenu con acciones espec\u00EDficas para cada fila"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones en header:" }), " Usa la propiedad", " ", _jsx("code", { children: "headerActions" }), " para mostrar un DropdownMenu con acciones en el header de la columna"] }), _jsxs("li", { children: [_jsx("strong", { children: "Alineaci\u00F3n:" }), " Cada columna puede tener su propia alineaci\u00F3n (left, right, center)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Ancho personalizado:" }), " Puedes definir el ancho de cada columna usando la propiedad width"] }), _jsxs("li", { children: [_jsx("strong", { children: "Valores personalizados:" }), " El value puede ser una funci\u00F3n que recibe la fila completa y retorna ReactNode"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tooltips:" }), " Soporte para tooltips personalizados por celda"] }), _jsxs("li", { children: [_jsx("strong", { children: "Headers personalizados:" }), " Los headers pueden ser ReactNode para incluir iconos o componentes"] }), _jsxs("li", { children: [_jsx("strong", { children: "Hover effect:" }), " Las filas tienen un efecto hover para mejor UX"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " La tabla tiene scroll horizontal autom\u00E1tico en pantallas peque\u00F1as"] }), _jsxs("li", { children: [_jsx("strong", { children: "Scroll limitado:" }), " Con maxRows puedes limitar el n\u00FAmero de filas visibles, manteniendo el header fijo y permitiendo scroll solo en las filas"] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "columns" }) }), _jsx("td", { className: "p-3 text-sm", children: "DataTableColumn<T>[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de columnas que define la estructura de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rows" }) }), _jsx("td", { className: "p-3 text-sm", children: "T[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de objetos que representan las filas de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "className" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para el contenedor de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "maxRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsx("td", { className: "p-3 text-sm", children: "M\u00E1ximo n\u00FAmero de filas visibles. Si hay m\u00E1s filas, se activa scroll vertical manteniendo el header fijo" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "locale" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsxs("td", { className: "p-3 text-sm", children: ["Locale para formateo de n\u00FAmeros (currency y numeric). Por defecto es ", _jsx("code", { children: "'es-AR'" }), ". Ejemplos:", " ", _jsx("code", { children: "'en-US'" }), ", ", _jsx("code", { children: "'es-ES'" }), ",", " ", _jsx("code", { children: "'de-DE'" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "isLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsxs("td", { className: "p-3 text-sm", children: ["Estado de carga. Cuando es ", _jsx("code", { children: "true" }), ", muestra filas skeleton en lugar de los datos. Por defecto es", " ", _jsx("code", { children: "false" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "loadingRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsxs("td", { className: "p-3 text-sm", children: ["N\u00FAmero de filas skeleton a mostrar cuando", " ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ". Por defecto es", " ", _jsx("code", { children: "5" })] })] })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "DataTableColumn Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "align" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"left\" | \"right\" | \"center\"" }), _jsx("td", { className: "p-3 text-sm", children: "Alineaci\u00F3n del contenido de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "width" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Ancho de la columna (ej: \"100px\", \"20%\")" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "header" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Texto o componente React para el header de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "value" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | number | ((row: T) => string | ReactNode)" }), _jsx("td", { className: "p-3 text-sm", children: "Nombre de la propiedad del objeto, valor directo, o funci\u00F3n que retorna el valor a mostrar" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "tooltip" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna el tooltip a mostrar al hacer hover sobre la celda" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "type" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"text\" | \"numeric\" | \"currency\" | \"date\"" }), _jsx("td", { className: "p-3 text-sm", children: "Tipo de dato que determina el formateo autom\u00E1tico" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "actions" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu para cada fila. Las acciones deben manejar sus propios eventos onClick." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerActions" }) }), _jsx("td", { className: "p-3 text-sm", children: "() => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu en el header de la columna. Las acciones deben manejar sus propios eventos onClick." })] })] })] }) })] })] }) }) }));
 };
 export default DataTableDocs;

package/dist/docs/DateInputDocs.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import "dayjs/locale/es";
 declare const DateInputDocs: React.FC;
 export default DateInputDocs;
 //# sourceMappingURL=DateInputDocs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateInputDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DateInputDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EA0P1B,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DateInputDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DateInputDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAIzB,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAwP1B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/docs/DateInputDocs.js

@@ -1,21 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import dayjs, {} from "dayjs";
+import "dayjs/locale/es";
 import { Card, DateInput, Button, Input, DatePicker } from "../index";
 const DateInputDocs = () => {
-    const [date1, setDate1] = React.useState(new Date());
+    const [date1, setDate1] = React.useState(dayjs());
     const [date2, setDate2] = React.useState(null);
     const [format, setFormat] = React.useState("dd/mm/yyyy");
     const formatDate = (date) => {
-        if (!date)
+        if (!date || !date.isValid())
             return "Sin fecha seleccionada";
-        return date.toLocaleDateString("es-ES", {
-            day: "2-digit",
-            month: "long",
-            year: "numeric",
-        });
+        return date.locale("es").format("DD [de] MMMM [de] YYYY");
     };
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DateInput - Input de fecha con calendario", 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 (dd/mm/yyyy)" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha de nacimiento", value: date1, onChange: setDate1, format: "dd/mm/yyyy", icon: "fa-calendar-alt" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "puedes escribir la fecha manualmente (dd/mm/yyyy) o elegirla desde el calendario" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(date1) }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Soporte de formatos (dd/mm/yyyy y mm/dd/yyyy)" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { size: "sm", variant: format === "dd/mm/yyyy" ? "primary" : "outline", onClick: () => setFormat("dd/mm/yyyy"), children: "dd/mm/yyyy" }), _jsx(Button, { size: "sm", variant: format === "mm/dd/yyyy" ? "primary" : "outline", onClick: () => setFormat("mm/dd/yyyy"), children: "mm/dd/yyyy" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha con formato din\u00E1mico", value: date2, onChange: setDate2, format: format, icon: "fa-calendar-day" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "cambia el formato y escribe la fecha usando el mismo patr\u00F3n" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(date2) }) })] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Integraci\u00F3n con DatePicker" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha de reserva", value: date1, onChange: setDate1, format: "dd/mm/yyyy", datePickerProps: {
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DateInput - Input de fecha con calendario", 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 (dd/mm/yyyy)" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha de nacimiento", value: date1, onChange: setDate1, format: "dd/mm/yyyy", icon: "fa-calendar-alt" }), _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["puedes escribir la fecha manualmente (dd/mm/yyyy) o hacer click en el \u00EDcono del calendario para abrir el selector de fecha. El componente usa ", _jsx("code", { children: "onIconClick" }), " del Input para manejar el click en el \u00EDcono."] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(date1) }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Soporte de formatos (dd/mm/yyyy y mm/dd/yyyy)" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { size: "sm", variant: format === "dd/mm/yyyy" ? "primary" : "outline", onClick: () => setFormat("dd/mm/yyyy"), children: "dd/mm/yyyy" }), _jsx(Button, { size: "sm", variant: format === "mm/dd/yyyy" ? "primary" : "outline", onClick: () => setFormat("mm/dd/yyyy"), children: "mm/dd/yyyy" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha con formato din\u00E1mico", value: date2, onChange: setDate2, format: format, icon: "fa-calendar-day" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "cambia el formato y escribe la fecha usando el mismo patr\u00F3n" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(date2) }) })] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Integraci\u00F3n con DatePicker" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha de reserva", value: date1, onChange: setDate1, format: "dd/mm/yyyy", datePickerProps: {
                                                     startWeekOn: "monday",
-                                                } }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "puedes pasar props al DatePicker interno mediante la prop datePickerProps" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "DatePicker independiente" }), _jsx(DatePicker, { value: date1 ?? undefined, onChange: setDate1, startWeekOn: "monday" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados y personalizaci\u00F3n" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Solo lectura", value: new Date(), readOnly: true, icon: "fa-lock" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado readOnly del Input subyacente" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Deshabilitado", value: new Date(), disabled: true, icon: "fa-ban" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado disabled y evita abrir el calendario" })] })] })] }), _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 reserva", subtitle: "Combinaci\u00F3n de DateInput, Input y Button", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-check", children: "Confirmar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Nombre completo", icon: "fa-user" }), _jsx(DateInput, { label: "Fecha de entrada", value: date1, onChange: setDate1, format: "dd/mm/yyyy", icon: "fa-calendar-check" }), _jsx(DateInput, { label: "Fecha de salida", value: date2, onChange: setDate2, format: "dd/mm/yyyy", icon: "fa-calendar-minus" })] }) })] })] }) }) }));
+                                                } }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "puedes pasar props al DatePicker interno mediante la prop datePickerProps" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "DatePicker independiente" }), _jsx(DatePicker, { value: date1 ?? undefined, onChange: setDate1, startWeekOn: "monday" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados y personalizaci\u00F3n" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Solo lectura", value: dayjs(), readOnly: true, icon: "fa-lock" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado readOnly del Input subyacente" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Deshabilitado", value: dayjs(), disabled: true, icon: "fa-ban" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado disabled y evita abrir el calendario" })] })] })] }), _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 reserva", subtitle: "Combinaci\u00F3n de DateInput, Input y Button", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-check", children: "Confirmar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Nombre completo", icon: "fa-user" }), _jsx(DateInput, { label: "Fecha de entrada", value: date1, onChange: setDate1, format: "dd/mm/yyyy", icon: "fa-calendar-check" }), _jsx(DateInput, { label: "Fecha de salida", value: date2, onChange: setDate2, format: "dd/mm/yyyy", icon: "fa-calendar-minus" })] }) })] })] }) }) }));
 };
 export default DateInputDocs;

package/dist/docs/DatePickerDocs.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import "dayjs/locale/es";
 declare const DatePickerDocs: React.FC;
 export default DatePickerDocs;
 //# sourceMappingURL=DatePickerDocs.d.ts.map