flysoft-react-ui 0.4.0 → 0.5.2

package/dist/docs/SnackbarDocs.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card, Button, SnackbarProvider, SnackbarContainer, useSnackbar } from "../index";
+// Componente wrapper para usar el hook dentro del provider
+const SnackbarExamples = () => {
+    const { showSnackbar } = useSnackbar();
+    return (_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("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Los snackbars soportan las mismas variantes que el componente Badge:", _jsx("code", { children: "primary" }), ", ", _jsx("code", { children: "secondary" }), ", ", _jsx("code", { children: "success" }), ",", " ", _jsx("code", { children: "warning" }), ", ", _jsx("code", { children: "danger" }), ", e ", _jsx("code", { children: "info" }), "."] }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", onClick: () => showSnackbar("Mensaje de información primaria", "primary"), children: "Primary" }), _jsx(Button, { variant: "outline", onClick: () => showSnackbar("Mensaje secundario", "secondary"), children: "Secondary" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Operación completada exitosamente", "success"), children: "Success" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Advertencia: revisa esta acción", "warning"), children: "Warning" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Error al procesar la solicitud", "danger"), children: "Danger" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Información adicional disponible", "info"), children: "Info" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con \u00EDconos personalizados" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes especificar un \u00EDcono personalizado usando clases de FontAwesome 5. Si no especificas un \u00EDcono, se usa uno por defecto seg\u00FAn la variante." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", icon: "fa-star", onClick: () => showSnackbar("¡Favorito agregado!", "success", {
+                                    icon: "fa-star",
+                                    iconLabel: "Favorito",
+                                }), children: "Con \u00EDcono estrella" }), _jsx(Button, { variant: "primary", icon: "fa-bell", onClick: () => showSnackbar("Nueva notificación recibida", "info", {
+                                    icon: "fa-bell",
+                                    iconLabel: "Notificación",
+                                }), children: "Con \u00EDcono campana" }), _jsx(Button, { variant: "primary", icon: "fa-download", onClick: () => showSnackbar("Descarga completada", "success", {
+                                    icon: "fa-download",
+                                    iconLabel: "Descarga",
+                                }), children: "Con \u00EDcono descarga" }), _jsx(Button, { variant: "primary", icon: "fa-save", onClick: () => showSnackbar("Cambios guardados correctamente", "success", {
+                                    icon: "fa-save",
+                                    iconLabel: "Guardado",
+                                }), children: "Con \u00EDcono guardar" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Duraci\u00F3n personalizada" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Por defecto, los snackbars se muestran durante 3 segundos. Puedes personalizar la duraci\u00F3n en milisegundos. Usa ", _jsx("code", { children: "0" }), " para que no se cierren autom\u00E1ticamente."] }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este snackbar dura 2 segundos", "info", {
+                                    duration: 2000,
+                                }), children: "2 segundos" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este snackbar dura 10 segundos", "warning", {
+                                    duration: 10000,
+                                }), children: "10 segundos" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este snackbar no se cierra automáticamente", "success", {
+                                    duration: 0,
+                                }), children: "Sin auto-cierre" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Mensajes largos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los snackbars tienen un ancho fijo de 18rem. Los mensajes largos se ajustan autom\u00E1ticamente ocupando varios renglones sin estirar el snackbar." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este es un mensaje muy largo que debería ocupar varios renglones en el snackbar sin estirarlo, manteniendo el ancho fijo de 18rem.", "info"), children: "Mensaje largo" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este es otro ejemplo de mensaje extenso que demuestra cómo el texto se ajusta automáticamente dentro del snackbar, permitiendo que el contenido sea legible sin afectar el diseño.", "warning", {
+                                    icon: "fa-exclamation-triangle",
+                                }), children: "Mensaje muy largo" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "M\u00FAltiples snackbars" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes mostrar m\u00FAltiples snackbars simult\u00E1neamente. Los nuevos aparecen abajo y los antiguos arriba. La barra de progreso se pausa cuando pasas el mouse sobre un snackbar." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", onClick: () => {
+                                    showSnackbar("Primer snackbar", "success");
+                                    setTimeout(() => showSnackbar("Segundo snackbar", "info"), 500);
+                                    setTimeout(() => showSnackbar("Tercer snackbar", "warning"), 1000);
+                                }, children: "Mostrar 3 snackbars" }), _jsx(Button, { variant: "primary", onClick: () => {
+                                    for (let i = 1; i <= 5; i++) {
+                                        setTimeout(() => showSnackbar(`Snackbar número ${i}`, "primary", {
+                                            duration: 3000,
+                                        }), i * 300);
+                                    }
+                                }, children: "Mostrar 5 snackbars" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Casos de uso comunes" }), _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: "Operaci\u00F3n exitosa" }), _jsx(Button, { variant: "primary", icon: "fa-check", onClick: () => showSnackbar("Los cambios se guardaron correctamente", "success", {
+                                            icon: "fa-check-circle",
+                                        }), children: "Guardar cambios" })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Error de validaci\u00F3n" }), _jsx(Button, { variant: "primary", icon: "fa-exclamation-triangle", onClick: () => showSnackbar("Por favor, completa todos los campos requeridos", "danger", {
+                                            icon: "fa-times-circle",
+                                            duration: 6000,
+                                        }), children: "Validar formulario" })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Informaci\u00F3n importante" }), _jsx(Button, { variant: "primary", icon: "fa-info-circle", onClick: () => showSnackbar("Tu sesión expirará en 5 minutos. Guarda tu trabajo.", "warning", {
+                                            icon: "fa-clock",
+                                            duration: 8000,
+                                        }), children: "Mostrar advertencia" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Posiciones del contenedor" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El ", _jsx("code", { children: "SnackbarContainer" }), " puede posicionarse en diferentes lugares de la pantalla. En esta documentaci\u00F3n est\u00E1 configurado en", " ", _jsx("code", { children: "top-right" }), ". Las opciones disponibles son:"] }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-sm mb-4", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("code", { children: "top-right" }), " - Esquina superior derecha (por defecto)"] }), _jsxs("li", { children: [_jsx("code", { children: "top-left" }), " - Esquina superior izquierda"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-right" }), " - Esquina inferior derecha"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-left" }), " - Esquina inferior izquierda"] }), _jsxs("li", { children: [_jsx("code", { children: "top-center" }), " - Centro superior"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-center" }), " - Centro inferior"] })] }), _jsx("div", { className: "bg-gray-100 dark:bg-gray-800 p-4 rounded-md", children: _jsx("code", { className: "text-sm", children: `<SnackbarContainer position="top-right" />` }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _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: "Ancho fijo:" }), " 18rem (288px)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Barra de progreso:" }), " Muestra el tiempo restante en el borde inferior con el color de la variante"] }), _jsxs("li", { children: [_jsx("strong", { children: "Auto-cierre:" }), " Se cierra autom\u00E1ticamente despu\u00E9s de la duraci\u00F3n especificada (default: 3 segundos)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Pausa al hover:" }), " La barra de progreso se pausa cuando pasas el mouse sobre el snackbar"] }), _jsxs("li", { children: [_jsx("strong", { children: "Cierre manual:" }), " Bot\u00F3n X en la esquina superior derecha"] }), _jsxs("li", { children: [_jsx("strong", { children: "\u00CDconos:" }), " Soporte para \u00EDconos FontAwesome 5 con \u00EDconos por defecto seg\u00FAn la variante"] }), _jsxs("li", { children: [_jsx("strong", { children: "Mensajes largos:" }), " El texto se ajusta autom\u00E1ticamente en m\u00FAltiples l\u00EDneas"] }), _jsxs("li", { children: [_jsx("strong", { children: "M\u00FAltiples snackbars:" }), " Soporte para mostrar varios snackbars apilados verticalmente"] }), _jsxs("li", { children: [_jsx("strong", { children: "Posiciones:" }), " Configurable en el SnackbarContainer (top-right, top-left, bottom-right, bottom-left, top-center, bottom-center)"] })] })] })] }));
+};
+const SnackbarDocs = () => {
+    return (_jsxs(SnackbarProvider, { children: [_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Snackbar - Notificaciones y Mensajes", children: _jsx(SnackbarExamples, {}) }) }), _jsx(SnackbarContainer, { position: "top-right" })] }));
+};
+export default SnackbarDocs;

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

@@ -1 +1 @@
-{"version":3,"file":"TabsGroupDocs.d.ts","sourceRoot":"","sources":["../../src/docs/TabsGroupDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAwY1B,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TabsGroupDocs.d.ts","sourceRoot":"","sources":["../../src/docs/TabsGroupDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA+IxC,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAsa1B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/docs/TabsGroupDocs.js

@@ -1,6 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import { Card, TabsGroup, TabPanel, Button, Badge, Input } from "../index";
+const UrlSyncExample = () => {
+    const [searchParams] = useSearchParams();
+    const urlTab = searchParams.get("tab");
+    const tabsForUrl = [
+        { id: "overview", label: "Resumen" },
+        { id: "details", label: "Detalles" },
+        { id: "settings", label: "Configuración" },
+    ];
+    return (_jsxs("div", { className: "space-y-4", children: [urlTab && (_jsxs("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: [_jsxs("p", { className: "text-sm", children: [_jsx("span", { className: "font-semibold", children: "Tab desde URL:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: urlTab })] }), _jsxs("p", { className: "text-xs mt-1", style: { color: "var(--flysoft-text-secondary)" }, children: ["URL actual:", " ", _jsxs("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: ["?tab=", urlTab] })] }), _jsxs("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: ["\uD83D\uDCA1 Prueba cambiar de tab y observa c\u00F3mo se actualiza la URL. Tambi\u00E9n puedes recargar la p\u00E1gina con", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: "?tab=details" }), "en la URL para ver c\u00F3mo se carga directamente ese tab."] })] })), !urlTab && (_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: ["\uD83D\uDCA1 Cambia de tab y observa c\u00F3mo se actualiza la URL. Tambi\u00E9n puedes agregar", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: "?tab=details" }), "manualmente en la URL para cargar directamente ese tab."] }) })), _jsxs(TabsGroup, { tabs: tabsForUrl, paramName: "tab", children: [_jsx(TabPanel, { tabId: "overview", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Resumen General" }), _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este es el tab de resumen. Cuando este tab est\u00E9 activo, la URL mostrar\u00E1", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?tab=overview" }), "."] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-chart-bar", children: "Ver Estad\u00EDsticas" }), _jsx(Button, { variant: "outline", icon: "fa-download", children: "Exportar" })] })] }) }), _jsx(TabPanel, { tabId: "details", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Detalles Completos" }), _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este es el tab de detalles. Cuando este tab est\u00E9 activo, la URL mostrar\u00E1", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?tab=details" }), "."] }), _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Si recargas la p\u00E1gina con", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?tab=details" }), "en la URL, este tab se cargar\u00E1 autom\u00E1ticamente."] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-info-circle", children: "M\u00E1s Informaci\u00F3n" }), _jsx(Button, { variant: "outline", icon: "fa-edit", children: "Editar" })] })] }) }), _jsx(TabPanel, { tabId: "settings", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Configuraci\u00F3n" }), _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este es el tab de configuraci\u00F3n. Cuando este tab est\u00E9 activo, la URL mostrar\u00E1", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?tab=settings" }), "."] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-cog", children: "Configurar" }), _jsx(Button, { variant: "outline", icon: "fa-save", children: "Guardar" })] })] }) })] })] }));
+};
 const TabsGroupDocs = () => {
     const [selectedTab, setSelectedTab] = useState("");
     const basicTabs = [
@@ -18,7 +29,7 @@ const TabsGroupDocs = () => {
         { id: "analytics", label: "Analytics" },
         { id: "reports", label: "Reportes" },
     ];
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "TabsGroup - 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" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente TabsGroup permite organizar contenido en pesta\u00F1as. Cada TabPanel muestra su contenido cuando el tab correspondiente est\u00E1 activo." }), _jsx(Card, { title: "Ejemplo b\u00E1sico", children: _jsxs(TabsGroup, { tabs: basicTabs, children: [_jsx(TabPanel, { tabId: "users", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Lista de Usuarios" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de usuarios. Aqu\u00ED puedes mostrar una lista, formulario, o cualquier contenido relacionado con usuarios." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-user-plus", children: "Agregar Usuario" }), _jsx(Button, { variant: "outline", icon: "fa-search", children: "Buscar" })] })] }) }), _jsx(TabPanel, { tabId: "roles", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Gesti\u00F3n de Roles" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de roles. Aqu\u00ED puedes gestionar los diferentes roles del sistema." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-shield-alt", children: "Crear Rol" }), _jsx(Button, { variant: "outline", icon: "fa-list", children: "Ver Todos" })] })] }) }), _jsx(TabPanel, { tabId: "permissions", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Permisos del Sistema" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de permisos. Aqu\u00ED puedes configurar los permisos disponibles en el sistema." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-key", children: "Asignar Permisos" }), _jsx(Button, { variant: "outline", icon: "fa-cog", children: "Configurar" })] })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabs con IDs num\u00E9ricos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los tabs pueden usar tanto strings como n\u00FAmeros como identificadores." }), _jsx(Card, { title: "Ejemplo con IDs num\u00E9ricos", children: _jsxs(TabsGroup, { tabs: tabsWithNumbers, children: [_jsx(TabPanel, { tabId: 1, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Primer Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 1." })] }) }), _jsx(TabPanel, { tabId: 2, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Segundo Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 2." })] }) }), _jsx(TabPanel, { tabId: 3, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Tercer Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 3." })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabs con headerNode" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El prop headerNode permite agregar contenido adicional en la misma l\u00EDnea que los tabs, alineado a la derecha. \u00DAtil para botones de acci\u00F3n, badges, o cualquier otro contenido." }), _jsx(Card, { title: "Ejemplo con headerNode", children: _jsxs(TabsGroup, { tabs: tabsWithHeader, headerNode: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "info", children: "Nuevo" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-plus", children: "Agregar" })] }), children: [_jsx(TabPanel, { tabId: "dashboard", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Dashboard" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Vista general del sistema con m\u00E9tricas y estad\u00EDsticas importantes." })] }) }), _jsx(TabPanel, { tabId: "analytics", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Analytics" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "An\u00E1lisis detallado de datos y tendencias del sistema." })] }) }), _jsx(TabPanel, { tabId: "reports", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Reportes" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Generaci\u00F3n y visualizaci\u00F3n de reportes del sistema." })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con callback onChangeTab" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El prop onChangeTab permite ejecutar una funci\u00F3n cuando se cambia de tab. \u00DAtil para sincronizar estado externo o realizar acciones al cambiar de pesta\u00F1a." }), _jsx(Card, { title: "Ejemplo con onChangeTab", children: _jsxs("div", { className: "space-y-4", children: [selectedTab && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", children: [_jsx("span", { className: "font-semibold", children: "Tab seleccionado:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: selectedTab })] }) })), _jsxs(TabsGroup, { tabs: basicTabs, onChangeTab: (tab) => setSelectedTab(tab), children: [_jsx(TabPanel, { tabId: "users", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Usuarios" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab notifica el cambio mediante onChangeTab." })] }) }), _jsx(TabPanel, { tabId: "roles", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Roles" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab tambi\u00E9n notifica el cambio mediante onChangeTab." })] }) }), _jsx(TabPanel, { tabId: "permissions", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Permisos" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab tambi\u00E9n notifica el cambio mediante onChangeTab." })] }) })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo completo con formularios" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo pr\u00E1ctico usando TabsGroup con TabPanel para organizar formularios en diferentes secciones." }), _jsx(Card, { title: "Formulario de Configuraci\u00F3n", children: _jsxs(TabsGroup, { tabs: [
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "TabsGroup - 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" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente TabsGroup permite organizar contenido en pesta\u00F1as. Cada TabPanel muestra su contenido cuando el tab correspondiente est\u00E1 activo." }), _jsx(Card, { title: "Ejemplo b\u00E1sico", children: _jsxs(TabsGroup, { tabs: basicTabs, children: [_jsx(TabPanel, { tabId: "users", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Lista de Usuarios" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de usuarios. Aqu\u00ED puedes mostrar una lista, formulario, o cualquier contenido relacionado con usuarios." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-user-plus", children: "Agregar Usuario" }), _jsx(Button, { variant: "outline", icon: "fa-search", children: "Buscar" })] })] }) }), _jsx(TabPanel, { tabId: "roles", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Gesti\u00F3n de Roles" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de roles. Aqu\u00ED puedes gestionar los diferentes roles del sistema." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-shield-alt", children: "Crear Rol" }), _jsx(Button, { variant: "outline", icon: "fa-list", children: "Ver Todos" })] })] }) }), _jsx(TabPanel, { tabId: "permissions", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Permisos del Sistema" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de permisos. Aqu\u00ED puedes configurar los permisos disponibles en el sistema." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-key", children: "Asignar Permisos" }), _jsx(Button, { variant: "outline", icon: "fa-cog", children: "Configurar" })] })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabs con IDs num\u00E9ricos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los tabs pueden usar tanto strings como n\u00FAmeros como identificadores." }), _jsx(Card, { title: "Ejemplo con IDs num\u00E9ricos", children: _jsxs(TabsGroup, { tabs: tabsWithNumbers, children: [_jsx(TabPanel, { tabId: 1, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Primer Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 1." })] }) }), _jsx(TabPanel, { tabId: 2, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Segundo Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 2." })] }) }), _jsx(TabPanel, { tabId: 3, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Tercer Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 3." })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabs con headerNode" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El prop headerNode permite agregar contenido adicional en la misma l\u00EDnea que los tabs, alineado a la derecha. \u00DAtil para botones de acci\u00F3n, badges, o cualquier otro contenido." }), _jsx(Card, { title: "Ejemplo con headerNode", children: _jsxs(TabsGroup, { tabs: tabsWithHeader, headerNode: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "info", children: "Nuevo" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-plus", children: "Agregar" })] }), children: [_jsx(TabPanel, { tabId: "dashboard", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Dashboard" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Vista general del sistema con m\u00E9tricas y estad\u00EDsticas importantes." })] }) }), _jsx(TabPanel, { tabId: "analytics", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Analytics" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "An\u00E1lisis detallado de datos y tendencias del sistema." })] }) }), _jsx(TabPanel, { tabId: "reports", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Reportes" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Generaci\u00F3n y visualizaci\u00F3n de reportes del sistema." })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con callback onChangeTab" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El prop onChangeTab permite ejecutar una funci\u00F3n cuando se cambia de tab. \u00DAtil para sincronizar estado externo o realizar acciones al cambiar de pesta\u00F1a." }), _jsx(Card, { title: "Ejemplo con onChangeTab", children: _jsxs("div", { className: "space-y-4", children: [selectedTab && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", children: [_jsx("span", { className: "font-semibold", children: "Tab seleccionado:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: selectedTab })] }) })), _jsxs(TabsGroup, { tabs: basicTabs, onChangeTab: (tab) => setSelectedTab(tab), children: [_jsx(TabPanel, { tabId: "users", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Usuarios" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab notifica el cambio mediante onChangeTab." })] }) }), _jsx(TabPanel, { tabId: "roles", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Roles" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab tambi\u00E9n notifica el cambio mediante onChangeTab." })] }) }), _jsx(TabPanel, { tabId: "permissions", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Permisos" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab tambi\u00E9n notifica el cambio mediante onChangeTab." })] }) })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Sincronizaci\u00F3n con URL (paramName)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El prop", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "paramName" }), " ", "permite sincronizar el tab activo con los par\u00E1metros de la URL. Cuando cambias de tab, se actualiza la URL autom\u00E1ticamente. Si la URL ya contiene el par\u00E1metro al cargar la p\u00E1gina, se mostrar\u00E1 el tab correspondiente. Esto es \u00FAtil para compartir enlaces directos a un tab espec\u00EDfico o para mantener el estado al navegar con el bot\u00F3n atr\u00E1s/adelante del navegador."] }), _jsx(Card, { title: "Ejemplo con sincronizaci\u00F3n de URL", children: _jsx(UrlSyncExample, {}) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo completo con formularios" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo pr\u00E1ctico usando TabsGroup con TabPanel para organizar formularios en diferentes secciones." }), _jsx(Card, { title: "Formulario de Configuraci\u00F3n", children: _jsxs(TabsGroup, { tabs: [
                                         { id: "personal", label: "Personal" },
                                         { id: "contact", label: "Contacto" },
                                         { id: "security", label: "Seguridad" },

package/dist/docs/docMockServices/empresaService.d.ts

@@ -0,0 +1,38 @@
+import type { Empresa } from "./interfaces";
+import type { PaginationInterface } from "../../components/form-controls/Pagination";
+/**
+ * Servicio mock para gestionar Empresas en localStorage
+ */
+export declare const empresaService: {
+    /**
+     * Obtiene empresas opcionalmente filtradas por nombre
+     */
+    listar(params?: {
+        filtro?: string;
+    }): Promise<Empresa[]>;
+    /**
+     * Obtiene empresas paginadas opcionalmente filtradas por nombre
+     */
+    listarPaginados(params?: {
+        filtro?: string;
+        pagina?: number;
+        limit?: number;
+    }): Promise<PaginationInterface<Empresa>>;
+    /**
+     * Busca una empresa por ID
+     */
+    buscarPorId(id: number): Promise<Empresa | undefined>;
+    /**
+     * Agrega una nueva empresa
+     */
+    agregar(empresa: Omit<Empresa, "id">): Promise<Empresa>;
+    /**
+     * Edita una empresa existente
+     */
+    editar(id: number, datos: Partial<Omit<Empresa, "id">>): Promise<Empresa | null>;
+    /**
+     * Elimina una empresa por ID
+     */
+    eliminar(id: number): Promise<boolean>;
+};
+//# sourceMappingURL=empresaService.d.ts.map

package/dist/docs/docMockServices/empresaService.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empresaService.d.ts","sourceRoot":"","sources":["../../../src/docs/docMockServices/empresaService.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAmBrF;;GAEG;AACH,eAAO,MAAM,cAAc;IACzB;;OAEG;oBACmB;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC;IAY9D;;OAEG;6BAC4B;QAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,GAAG,OAAO,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;IAyCzC;;OAEG;oBACmB,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC;IAM3D;;OAEG;qBACoB,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;IAc7D;;OAEG;eAEG,MAAM,SACH,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,GAClC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAW1B;;OAEG;iBACgB,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;CAU7C,CAAC"}

package/dist/docs/docMockServices/empresaService.js

@@ -0,0 +1,116 @@
+const STORAGE_KEY = "docMockServices_empresas";
+/**
+ * Simula un delay de red para hacer más realista el mock
+ */
+const simulateNetworkDelay = (ms = 500) => {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+};
+/**
+ * Obtiene todas las empresas del almacenamiento (función helper interna)
+ */
+const _obtenerTodas = () => {
+    const data = localStorage.getItem(STORAGE_KEY);
+    return data ? JSON.parse(data) : [];
+};
+/**
+ * Servicio mock para gestionar Empresas en localStorage
+ */
+export const empresaService = {
+    /**
+     * Obtiene empresas opcionalmente filtradas por nombre
+     */
+    async listar(params) {
+        await simulateNetworkDelay();
+        const todas = _obtenerTodas();
+        if (!params?.filtro) {
+            return todas;
+        }
+        const filtroLower = params.filtro.toLowerCase();
+        return todas.filter((emp) => emp.nombre.toLowerCase().includes(filtroLower));
+    },
+    /**
+     * Obtiene empresas paginadas opcionalmente filtradas por nombre
+     */
+    async listarPaginados(params) {
+        await simulateNetworkDelay();
+        const pagina = params?.pagina ?? 1;
+        const limit = params?.limit ?? 20;
+        const todas = _obtenerTodas();
+        let todasFiltradas = todas;
+        if (params?.filtro) {
+            const filtroLower = params.filtro.toLowerCase();
+            todasFiltradas = todas.filter((emp) => emp.nombre.toLowerCase().includes(filtroLower));
+        }
+        const total = todasFiltradas.length;
+        // Si limit es 0, devolver todos los elementos sin paginar
+        if (limit === 0) {
+            return {
+                list: todasFiltradas,
+                limit: 0,
+                page: 1,
+                pages: 1,
+                total,
+            };
+        }
+        const pages = Math.ceil(total / limit);
+        const inicio = (pagina - 1) * limit;
+        const fin = inicio + limit;
+        const list = todasFiltradas.slice(inicio, fin);
+        return {
+            list,
+            limit,
+            page: pagina,
+            pages,
+            total,
+        };
+    },
+    /**
+     * Busca una empresa por ID
+     */
+    async buscarPorId(id) {
+        await simulateNetworkDelay();
+        const empresas = _obtenerTodas();
+        return empresas.find((emp) => emp.id === id);
+    },
+    /**
+     * Agrega una nueva empresa
+     */
+    async agregar(empresa) {
+        await simulateNetworkDelay();
+        const empresas = _obtenerTodas();
+        const nuevoId = empresas.length > 0 ? Math.max(...empresas.map((e) => e.id)) + 1 : 1;
+        const nuevaEmpresa = {
+            id: nuevoId,
+            ...empresa,
+        };
+        empresas.push(nuevaEmpresa);
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(empresas));
+        return nuevaEmpresa;
+    },
+    /**
+     * Edita una empresa existente
+     */
+    async editar(id, datos) {
+        await simulateNetworkDelay();
+        const empresas = _obtenerTodas();
+        const index = empresas.findIndex((emp) => emp.id === id);
+        if (index === -1)
+            return null;
+        empresas[index] = { ...empresas[index], ...datos };
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(empresas));
+        return empresas[index];
+    },
+    /**
+     * Elimina una empresa por ID
+     */
+    async eliminar(id) {
+        await simulateNetworkDelay();
+        const empresas = _obtenerTodas();
+        const index = empresas.findIndex((emp) => emp.id === id);
+        if (index === -1)
+            return false;
+        empresas.splice(index, 1);
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(empresas));
+        return true;
+    },
+};

package/dist/docs/docMockServices/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Exportaciones del módulo de servicios mock para documentación
+ */
+export * from "./interfaces";
+export * from "./empresaService";
+export * from "./personaService";
+export * from "./personaEmpresaService";
+export * from "./initialData";
+//# sourceMappingURL=index.d.ts.map

package/dist/docs/docMockServices/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/docs/docMockServices/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC"}

package/dist/docs/docMockServices/index.js

@@ -0,0 +1,8 @@
+/**
+ * Exportaciones del módulo de servicios mock para documentación
+ */
+export * from "./interfaces";
+export * from "./empresaService";
+export * from "./personaService";
+export * from "./personaEmpresaService";
+export * from "./initialData";

package/dist/docs/docMockServices/initialData.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Inicializa los datos de ejemplo en localStorage
+ * Crea 20 empresas, 20 personas y establece relaciones entre ellas
+ */
+export declare const inicializarDatosEjemplo: () => Promise<void>;
+//# sourceMappingURL=initialData.d.ts.map

package/dist/docs/docMockServices/initialData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"initialData.d.ts","sourceRoot":"","sources":["../../../src/docs/docMockServices/initialData.ts"],"names":[],"mappings":"AA+FA;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAAa,OAAO,CAAC,IAAI,CAsD5D,CAAC"}

package/dist/docs/docMockServices/initialData.js

@@ -0,0 +1,132 @@
+import { empresaService } from "./empresaService";
+import { personaService } from "./personaService";
+import { personaEmpresaService } from "./personaEmpresaService";
+import dayjs from "dayjs";
+/**
+ * Datos iniciales de ejemplo para empresas
+ */
+const empresasEjemplo = [
+    { nombre: "TechSolutions S.A." },
+    { nombre: "Innovación Digital Ltda." },
+    { nombre: "Global Systems Inc." },
+    { nombre: "Nexus Technologies" },
+    { nombre: "CloudSoft Enterprise" },
+    { nombre: "DataDrive Solutions" },
+    { nombre: "CyberNet Corp." },
+    { nombre: "FutureSoft Industries" },
+    { nombre: "Quantum Innovations" },
+    { nombre: "SmartCode Systems" },
+    { nombre: "Metro Consulting Group" },
+    { nombre: "Digital Transformation Co." },
+    { nombre: "Agile Development Ltd." },
+    { nombre: "SecureNet Services" },
+    { nombre: "Apex Business Solutions" },
+    { nombre: "Vertex Software" },
+    { nombre: "Matrix Enterprises" },
+    { nombre: "PrimeTech Solutions" },
+    { nombre: "Infinity Tech Corp." },
+    { nombre: "Velocity Systems" },
+];
+/**
+ * Genera una fecha aleatoria entre dos años
+ */
+const generarFechaAleatoria = (anoInicio, anoFin) => {
+    const ano = Math.floor(Math.random() * (anoFin - anoInicio + 1)) + anoInicio;
+    const mes = Math.floor(Math.random() * 12); // 0-11
+    const diasEnMes = dayjs(`${ano}-${mes + 1}-01`).daysInMonth();
+    const dia = Math.floor(Math.random() * diasEnMes) + 1;
+    return dayjs(`${ano}-${String(mes + 1).padStart(2, "0")}-${String(dia).padStart(2, "0")}`);
+};
+/**
+ * Datos iniciales de ejemplo para personas
+ */
+const personasEjemplo = [
+    { nombre: "Ana García", email: "ana.garcia@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Carlos Martínez", email: "carlos.martinez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Laura Fernández", email: "laura.fernandez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Juan Rodríguez", email: "juan.rodriguez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "María López", email: "maria.lopez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Pedro Sánchez", email: "pedro.sanchez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Carmen Ruiz", email: "carmen.ruiz@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Diego Torres", email: "diego.torres@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Sofia Vargas", email: "sofia.vargas@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Miguel Herrera", email: "miguel.herrera@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Elena Jiménez", email: "elena.jimenez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Roberto Díaz", email: "roberto.diaz@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Patricia Moreno", email: "patricia.moreno@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Javier Muñoz", email: "javier.munoz@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Isabel Gutiérrez", email: "isabel.gutierrez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Fernando Castro", email: "fernando.castro@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Lucía Ortega", email: "lucia.ortega@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Alejandro Medina", email: "alejandro.medina@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Marta Romero", email: "marta.romero@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+    { nombre: "Ricardo Morales", email: "ricardo.morales@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
+];
+/**
+ * Cargos disponibles para las relaciones
+ */
+const cargosEjemplo = [
+    "CEO",
+    "CTO",
+    "CFO",
+    "Director de Desarrollo",
+    "Gerente de Proyecto",
+    "Desarrollador Senior",
+    "Desarrollador Junior",
+    "Analista de Sistemas",
+    "Diseñador UX/UI",
+    "Product Manager",
+    "Scrum Master",
+    "QA Engineer",
+    "DevOps Engineer",
+    "Marketing Manager",
+    "Sales Manager",
+    "HR Manager",
+    "Contador",
+    "Asistente Administrativo",
+    "Consultor",
+    "Coordinador",
+];
+/**
+ * Inicializa los datos de ejemplo en localStorage
+ * Crea 20 empresas, 20 personas y establece relaciones entre ellas
+ */
+export const inicializarDatosEjemplo = async () => {
+    // Limpiar datos existentes
+    localStorage.removeItem("docMockServices_empresas");
+    localStorage.removeItem("docMockServices_personas");
+    localStorage.removeItem("docMockServices_personaEmpresas");
+    // Crear empresas (sin await para crear todas en paralelo, luego esperar)
+    const empresasPromesas = empresasEjemplo.map((emp) => empresaService.agregar(emp));
+    const empresasCreadas = await Promise.all(empresasPromesas);
+    // Crear personas (sin await para crear todas en paralelo, luego esperar)
+    const personasPromesas = personasEjemplo.map((per) => personaService.agregar(per));
+    const personasCreadas = await Promise.all(personasPromesas);
+    // Crear relaciones (cada persona tiene entre 1 y 3 trabajos)
+    const relaciones = [];
+    personasCreadas.forEach((persona, indexPersona) => {
+        // Cada persona trabaja en al menos 1 empresa y hasta 3 empresas
+        const numTrabajos = 1 + (indexPersona % 3); // Entre 1 y 3 trabajos
+        // Seleccionar empresas aleatorias sin repetir
+        const empresasSeleccionadas = [];
+        for (let i = 0; i < numTrabajos; i++) {
+            let empresaIndex;
+            do {
+                empresaIndex = Math.floor(Math.random() * empresasCreadas.length);
+            } while (empresasSeleccionadas.includes(empresaIndex));
+            empresasSeleccionadas.push(empresaIndex);
+        }
+        // Crear relaciones
+        empresasSeleccionadas.forEach((empresaIndex) => {
+            const cargo = cargosEjemplo[Math.floor(Math.random() * cargosEjemplo.length)];
+            relaciones.push({
+                idPersona: persona.id,
+                idEmpresa: empresasCreadas[empresaIndex].id,
+                cargo,
+            });
+        });
+    });
+    // Guardar todas las relaciones (en paralelo)
+    const relacionesPromesas = relaciones.map((rel) => personaEmpresaService.agregar(rel));
+    await Promise.all(relacionesPromesas);
+};

package/dist/docs/docMockServices/interfaces.d.ts

@@ -0,0 +1,26 @@
+import type { Dayjs } from "dayjs";
+/**
+ * Interfaces para los servicios mock de documentación
+ */
+export interface Empresa {
+    id: number;
+    nombre: string;
+}
+export interface Persona {
+    id: number;
+    nombre: string;
+    email: string;
+    fechaNacimiento: Dayjs;
+}
+/**
+ * Persona con sus empresas relacionadas
+ */
+export interface PersonaConEmpresas extends Persona {
+    empresas: Empresa[];
+}
+export interface PersonaEmpresa {
+    idPersona: number;
+    idEmpresa: number;
+    cargo: string;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/dist/docs/docMockServices/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/docs/docMockServices/interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAEnC;;GAEG;AAEH,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,KAAK,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,OAAO;IACjD,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/docs/docMockServices/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/docs/docMockServices/personaEmpresaService.d.ts

@@ -0,0 +1,43 @@
+import type { PersonaEmpresa } from "./interfaces";
+/**
+ * Servicio mock para gestionar relaciones Persona-Empresa en localStorage
+ */
+export declare const personaEmpresaService: {
+    /**
+     * Obtiene todas las relaciones
+     */
+    listar(): Promise<PersonaEmpresa[]>;
+    /**
+     * Busca relaciones por ID de persona
+     */
+    buscarPorPersona(idPersona: number): Promise<PersonaEmpresa[]>;
+    /**
+     * Busca relaciones por ID de empresa
+     */
+    buscarPorEmpresa(idEmpresa: number): Promise<PersonaEmpresa[]>;
+    /**
+     * Busca una relación específica por persona y empresa
+     */
+    buscarPorPersonaYEmpresa(idPersona: number, idEmpresa: number): Promise<PersonaEmpresa | undefined>;
+    /**
+     * Agrega una nueva relación
+     */
+    agregar(relacion: PersonaEmpresa): Promise<PersonaEmpresa>;
+    /**
+     * Edita una relación existente
+     */
+    editar(idPersona: number, idEmpresa: number, datos: Partial<Omit<PersonaEmpresa, "idPersona" | "idEmpresa">>): Promise<PersonaEmpresa | null>;
+    /**
+     * Elimina una relación por persona y empresa
+     */
+    eliminar(idPersona: number, idEmpresa: number): Promise<boolean>;
+    /**
+     * Elimina todas las relaciones de una persona
+     */
+    eliminarPorPersona(idPersona: number): Promise<number>;
+    /**
+     * Elimina todas las relaciones de una empresa
+     */
+    eliminarPorEmpresa(idEmpresa: number): Promise<number>;
+};
+//# sourceMappingURL=personaEmpresaService.d.ts.map

package/dist/docs/docMockServices/personaEmpresaService.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"personaEmpresaService.d.ts","sourceRoot":"","sources":["../../../src/docs/docMockServices/personaEmpresaService.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAmBnD;;GAEG;AACH,eAAO,MAAM,qBAAqB;IAChC;;OAEG;cACa,OAAO,CAAC,cAAc,EAAE,CAAC;IAKzC;;OAEG;gCAC+B,MAAM,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC;IAMpE;;OAEG;gCAC+B,MAAM,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC;IAMpE;;OAEG;wCAEU,MAAM,aACN,MAAM,GAChB,OAAO,CAAC,cAAc,GAAG,SAAS,CAAC;IAQtC;;OAEG;sBACqB,cAAc,GAAG,OAAO,CAAC,cAAc,CAAC;IAgBhE;;OAEG;sBAEU,MAAM,aACN,MAAM,SACV,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,WAAW,CAAC,CAAC,GAC9D,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC;IAajC;;OAEG;wBACuB,MAAM,aAAa,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IAatE;;OAEG;kCACiC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAW5D;;OAEG;kCACiC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;CAU7D,CAAC"}