flysoft-react-ui 0.5.0 → 0.5.3

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DatePickerDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EA+H3B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DatePickerDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DatePickerDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAGzB,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EA2H3B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/docs/DatePickerDocs.js

@@ -1,18 +1,16 @@
 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, DatePicker, Button } from "../index";
 const DatePickerDocs = () => {
     const [selectedDate, setSelectedDate] = React.useState(null);
-    const [anotherDate, setAnotherDate] = React.useState(new Date());
+    const [anotherDate, setAnotherDate] = React.useState(dayjs());
     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: "DatePicker - Selector 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" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DatePicker, { value: selectedDate ?? undefined, onChange: setSelectedDate }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "selector de fecha sin input, solo 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(selectedDate) }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Navegaci\u00F3n por meses y a\u00F1os" }), _jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Usa los botones con flechas para cambiar de mes o de a\u00F1o. El d\u00EDa actual se resalta con un borde, y el d\u00EDa seleccionado se marca con el color primario." }), _jsx(DatePicker, { value: anotherDate ?? undefined, onChange: setAnotherDate, startWeekOn: "monday" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(anotherDate) }), _jsx(Button, { size: "sm", variant: "outline", icon: "fa-calendar-day", onClick: () => setAnotherDate(new Date()), children: "Ir a hoy" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Inicio de semana configurable" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Semana comenzando en lunes (default)" }), _jsx(DatePicker, { startWeekOn: "monday" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Semana comenzando en domingo" }), _jsx(DatePicker, { startWeekOn: "sunday" })] })] })] })] }) }) }));
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DatePicker - Selector 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" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DatePicker, { value: selectedDate ?? undefined, onChange: setSelectedDate }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "selector de fecha sin input, solo 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(selectedDate) }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Navegaci\u00F3n por meses y a\u00F1os" }), _jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Usa los botones con flechas para cambiar de mes o de a\u00F1o. El d\u00EDa actual se resalta con un borde, y el d\u00EDa seleccionado se marca con el color primario." }), _jsx(DatePicker, { value: anotherDate ?? undefined, onChange: setAnotherDate, startWeekOn: "monday" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(anotherDate) }), _jsx(Button, { size: "sm", variant: "outline", icon: "fa-calendar-day", onClick: () => setAnotherDate(dayjs()), children: "Ir a hoy" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Inicio de semana configurable" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Semana comenzando en lunes (default)" }), _jsx(DatePicker, { startWeekOn: "monday" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Semana comenzando en domingo" }), _jsx(DatePicker, { startWeekOn: "sunday" })] })] })] })] }) }) }));
 };
 export default DatePickerDocs;

package/dist/docs/DialogDocs.js

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

package/dist/docs/DocAdmin.d.ts

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

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

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

package/dist/docs/DocAdmin.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from "react";
+import { Button, Card, Badge } from "../index";
+import { inicializarDatosEjemplo, empresaService, personaService, personaEmpresaService, } from "./docMockServices";
+const DocAdmin = () => {
+    const [isResetting, setIsResetting] = useState(false);
+    const [stats, setStats] = useState({
+        empresas: 0,
+        personas: 0,
+        relaciones: 0,
+    });
+    // Cargar estadísticas iniciales
+    useEffect(() => {
+        const init = async () => {
+            await actualizarStats();
+            // Inicializar datos si no existen
+            const empresas = await empresaService.listar();
+            const personas = await personaService.listar();
+            if (empresas.length === 0 && personas.length === 0) {
+                await inicializarDatosEjemplo();
+                await actualizarStats();
+            }
+        };
+        init();
+    }, []);
+    const actualizarStats = async () => {
+        const [empresas, personas, relaciones] = await Promise.all([
+            empresaService.listar(),
+            personaService.listar(),
+            personaEmpresaService.listar(),
+        ]);
+        setStats({
+            empresas: empresas.length,
+            personas: personas.length,
+            relaciones: relaciones.length,
+        });
+    };
+    const handleReset = async () => {
+        if (!window.confirm("¿Estás seguro de que deseas reiniciar todos los datos? Esta acción no se puede deshacer.")) {
+            return;
+        }
+        setIsResetting(true);
+        try {
+            await inicializarDatosEjemplo();
+            await actualizarStats();
+            setIsResetting(false);
+            alert("Datos reiniciados correctamente");
+        }
+        catch (error) {
+            console.error("Error al reiniciar datos:", error);
+            setIsResetting(false);
+            alert("Error al reiniciar los datos");
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { title: "Administraci\u00F3n de Datos Mock", subtitle: "Gestiona los datos de ejemplo para la documentaci\u00F3n", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4 text-[var(--color-text-primary)]", children: "Estad\u00EDsticas Actuales" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-2", children: _jsx(Badge, { variant: "primary", icon: "fa-building", size: "sm", children: "Empresas" }) }), _jsx("p", { className: "text-2xl font-bold text-[var(--color-text-primary)]", children: stats.empresas })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-2", children: _jsx(Badge, { variant: "secondary", icon: "fa-users", size: "sm", children: "Personas" }) }), _jsx("p", { className: "text-2xl font-bold text-[var(--color-text-primary)]", children: stats.personas })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-2", children: _jsx(Badge, { variant: "info", icon: "fa-link", size: "sm", children: "Relaciones" }) }), _jsx("p", { className: "text-2xl font-bold text-[var(--color-text-primary)]", children: stats.relaciones })] })] })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsxs("h4", { className: "font-semibold mb-2 text-[var(--color-text-primary)]", children: [_jsx("i", { className: "fal fa-info-circle mr-2 text-[var(--color-info)]" }), "Informaci\u00F3n"] }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: "Los datos se almacenan en localStorage y se utilizan en los ejemplos de documentaci\u00F3n. Al reiniciar, se restaurar\u00E1n 20 empresas, 20 personas y sus relaciones iniciales." })] }), _jsx("div", { className: "flex justify-center", children: _jsx(Button, { variant: "primary", icon: "fa-redo", onClick: handleReset, disabled: isResetting, loading: isResetting, children: isResetting ? "Reiniciando..." : "Reiniciar Datos Locales" }) })] }) }), _jsx(Card, { title: "Servicios Disponibles", subtitle: "Documentaci\u00F3n de los servicios mock disponibles", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-3", children: _jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "empresaService" }) }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Servicio para gestionar empresas" }), _jsxs("div", { className: "space-y-1 text-sm font-mono text-[var(--color-text-primary)]", children: [_jsxs("div", { children: ["\u2022 listar(params?: ", "{", " filtro?: string ", "}", "): Promise<Empresa[]>"] }), _jsxs("div", { children: ["\u2022 listarPaginados(params?: ", "{", " filtro?: string, pagina?: number, limit?: number ", "}", "): Promise<PaginationInterface<Empresa>>"] }), _jsx("div", { children: "\u2022 buscarPorId(id: number): Promise<Empresa | undefined>" }), _jsx("div", { children: "\u2022 agregar(empresa: Omit<Empresa, \"id\">): Promise<Empresa>" }), _jsx("div", { children: "\u2022 editar(id: number, datos: Partial<...>): Promise<Empresa | null>" }), _jsx("div", { children: "\u2022 eliminar(id: number): Promise<boolean>" })] })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-3", children: _jsx(Badge, { variant: "secondary", icon: "fa-code", size: "sm", children: "personaService" }) }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Servicio para gestionar personas" }), _jsxs("div", { className: "space-y-1 text-sm font-mono text-[var(--color-text-primary)]", children: [_jsxs("div", { children: ["\u2022 listar(params?: ", "{", " filtro?: string ", "}", "): Promise<Persona[]>"] }), _jsxs("div", { children: ["\u2022 listarPaginados(params?: ", "{", " filtro?: string, pagina?: number, limit?: number ", "}", "): Promise<PaginationInterface<Persona>>"] }), _jsx("div", { children: "\u2022 buscarPorId(id: number): Promise<Persona | undefined>" }), _jsx("div", { children: "\u2022 agregar(persona: Omit<Persona, \"id\">): Promise<Persona>" }), _jsx("div", { children: "\u2022 editar(id: number, datos: Partial<...>): Promise<Persona | null>" }), _jsx("div", { children: "\u2022 eliminar(id: number): Promise<boolean>" })] })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-2 mb-3", children: _jsx(Badge, { variant: "info", icon: "fa-code", size: "sm", children: "personaEmpresaService" }) }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Servicio para gestionar relaciones persona-empresa (muchos a muchos)" }), _jsxs("div", { className: "space-y-1 text-sm font-mono text-[var(--color-text-primary)]", children: [_jsx("div", { children: "\u2022 listar(): Promise<PersonaEmpresa[]>" }), _jsx("div", { children: "\u2022 buscarPorPersona(idPersona: number): Promise<PersonaEmpresa[]>" }), _jsx("div", { children: "\u2022 buscarPorEmpresa(idEmpresa: number): Promise<PersonaEmpresa[]>" }), _jsx("div", { children: "\u2022 buscarPorPersonaYEmpresa(idPersona, idEmpresa): Promise<PersonaEmpresa | undefined>" }), _jsx("div", { children: "\u2022 agregar(relacion: PersonaEmpresa): Promise<PersonaEmpresa>" }), _jsx("div", { children: "\u2022 editar(idPersona, idEmpresa, datos): Promise<PersonaEmpresa | null>" }), _jsx("div", { children: "\u2022 eliminar(idPersona, idEmpresa): Promise<boolean>" }), _jsx("div", { children: "\u2022 eliminarPorPersona(idPersona): Promise<number>" }), _jsx("div", { children: "\u2022 eliminarPorEmpresa(idEmpresa): Promise<number>" })] })] })] }) }), _jsx(Card, { title: "Interfaces TypeScript", subtitle: "Estructuras de datos utilizadas", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "Empresa" })] }), _jsx("pre", { className: "text-xs bg-[var(--color-bg-default)] p-3 rounded border border-[var(--color-border-default)] overflow-x-auto", children: `interface Empresa {
+  id: number;
+  nombre: string;
+}` })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "Persona" })] }), _jsx("pre", { className: "text-xs bg-[var(--color-bg-default)] p-3 rounded border border-[var(--color-border-default)] overflow-x-auto", children: `interface Persona {
+  id: number;
+  nombre: string;
+  email: string;
+}` })] }), _jsxs("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded-lg border border-[var(--color-border-default)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "PersonaEmpresa" })] }), _jsx("pre", { className: "text-xs bg-[var(--color-bg-default)] p-3 rounded border border-[var(--color-border-default)] overflow-x-auto", children: `interface PersonaEmpresa {
+  idPersona: number;
+  idEmpresa: number;
+  cargo: string;
+}` })] })] }) })] }));
+};
+export default DocAdmin;

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

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

package/dist/docs/DocsMenu.js

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

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

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

package/dist/docs/DocsRouter.js

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

package/dist/docs/DropdownMenuDocs.js

@@ -55,7 +55,7 @@ const DropdownMenuDocs = () => {
                                                 console.log("Opción seleccionada:", item);
                                             }, renderNode: _jsx(Button, { variant: "outline", icon: "fa-ellipsis-h", children: "M\u00E1s opciones" }) }), _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
                                                 console.log("Opción seleccionada:", item);
-                                            }, renderNode: _jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-[var(--color-bg-secondary)] rounded cursor-pointer hover:bg-[var(--color-bg-hover)] transition-colors", children: [_jsx("i", { className: "fa fa-user-circle" }), _jsx("span", { children: "Usuario" }), _jsx("i", { className: "fa fa-chevron-down text-xs" })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Posicionamiento inteligente" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El men\u00FA se posiciona autom\u00E1ticamente arriba o abajo seg\u00FAn el espacio disponible en la pantalla. Prueba hacer scroll hacia abajo y abrir el men\u00FA cerca del borde inferior de la pantalla." }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex justify-center", children: _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
+                                            }, renderNode: _jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-[var(--color-bg-secondary)] rounded cursor-pointer hover:bg-[var(--color-bg-hover)] transition-colors", children: [_jsx("i", { className: "fal fa-user-circle" }), _jsx("span", { children: "Usuario" }), _jsx("i", { className: "fal fa-chevron-down text-xs" })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Posicionamiento inteligente" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El men\u00FA se posiciona autom\u00E1ticamente arriba o abajo seg\u00FAn el espacio disponible en la pantalla. Prueba hacer scroll hacia abajo y abrir el men\u00FA cerca del borde inferior de la pantalla." }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex justify-center", children: _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
                                                     console.log("Opción seleccionada:", item);
                                                 } }) }), _jsx("div", { className: "h-96 flex items-end justify-center", style: { minHeight: "400px" }, children: _jsx(DropdownMenu, { options: basicOptions, onOptionSelected: (item) => {
                                                     console.log("Opción seleccionada:", item);

package/dist/docs/ExampleFormDocs.d.ts

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

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

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

package/dist/docs/ExampleFormDocs.js

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

package/dist/docs/FilterDocs.d.ts

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

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

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