flysoft-react-ui 0.5.2 → 1.0.0

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

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

package/dist/docs/DropdownPanelDocs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card, DropdownPanel, Button } from "../index";
+const DropdownPanelDocs = () => {
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DropdownPanel - Panel Flotante Gen\u00E9rico", 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 DropdownPanel muestra un panel flotante con contenido arbitrario (children). A diferencia de DropdownMenu, no maneja una lista de opciones, sino que renderiza lo que le pases." }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(DropdownPanel, { children: _jsxs("div", { className: "p-4 w-64", children: [_jsx("h4", { className: "font-bold mb-2", children: "Contenido del panel" }), _jsx("p", { className: "text-sm", children: "Aqu\u00ED puedes poner cualquier cosa: texto, im\u00E1genes, componentes, formularios, etc." })] }) }), _jsx("div", { className: "text-sm text-[var(--flysoft-text-secondary)]", children: "<- Click en los tres puntos para ver el panel" })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con renderNode personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el disparador (trigger) usando la prop", " ", _jsx("code", { children: "renderNode" }), "."] }), _jsx("div", { className: "space-y-4", children: _jsx(DropdownPanel, { renderNode: _jsx(Button, { variant: "primary", icon: "fa-filter", children: "Filtros Avanzados" }), children: _jsxs("div", { className: "p-4 w-80 space-y-4", children: [_jsx("h4", { className: "font-bold border-b pb-2", children: "Configuraci\u00F3n de Filtros" }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm mb-1", children: "Buscar por nombre" }), _jsx("input", { type: "text", className: "w-full p-2 border rounded", placeholder: "Escribe..." })] }), _jsx("div", { className: "flex justify-end pt-2", children: _jsx(Button, { variant: "primary", size: "sm", children: "Aplicar" }) })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Requerido" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "children" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido a mostrar dentro del panel flotante." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "renderNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Elemento personalizado que activa el panel. Si no se proporciona, se muestra un bot\u00F3n ghost con tres puntos." })] })] })] }) })] })] }) }) }));
+};
+export default DropdownPanelDocs;

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

@@ -1 +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"}
+{"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,EAgzBvB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/FilterDocs.js

@@ -107,6 +107,24 @@ const FilterDocs = () => {
                                                     paramName: "ejemplo2",
                                                     label: "Ejemplo 2",
                                                 },
-                                            ] }), _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: "Query parameters actuales:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: searchParams.toString() || "ninguno" })] }), _jsx("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Configura los filtros en el dialog y observa c\u00F3mo la URL no cambia hasta que hagas clic en \"Aplicar filtros\"." })] })] }) })] })] }) }) }));
+                                            ] }), _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: "Query parameters actuales:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: searchParams.toString() || "ninguno" })] }), _jsx("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Configura los filtros en el dialog y observa c\u00F3mo la URL no cambia hasta que hagas clic en \"Aplicar filtros\"." })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Search y FiltersDialog Combinados" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Una disposici\u00F3n com\u00FAn es tener una b\u00FAsqueda r\u00E1pida a la izquierda y filtros avanzados a la derecha. Esto se logra f\u00E1cilmente con un contenedor flex y ", _jsx("code", { children: "justify-between" }), "."] }), _jsx(Card, { title: "Barra de herramientas combinada", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs(Collection, { direction: "row", children: [_jsx(Filter, { paramName: "busquedaGlobal", label: "Buscar...", filterType: "search", inputWidth: "300px" }), _jsx(Filter, { paramName: "filtroFecha", label: "Fecha", filterType: "date", inputWidth: "300px", hideEmpty: true }), _jsx(Filter, { paramName: "filtroEstado", label: "Estado", filterType: "autocomplete", inputWidth: "300px", hideEmpty: true, options: [
+                                                                { label: "Activo", value: "active" },
+                                                                { label: "Inactivo", value: "inactive" },
+                                                            ] })] }), _jsx(FiltersDialog, { filters: [
+                                                        {
+                                                            filterType: "date",
+                                                            paramName: "filtroFecha",
+                                                            label: "Fecha",
+                                                        },
+                                                        {
+                                                            filterType: "autocomplete",
+                                                            paramName: "filtroEstado",
+                                                            label: "Estado",
+                                                            options: [
+                                                                { label: "Activo", value: "active" },
+                                                                { label: "Inactivo", value: "inactive" },
+                                                            ],
+                                                        },
+                                                    ] })] }), _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: "Query parameters actuales:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: searchParams.toString() || "ninguno" })] }), _jsx("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Prueba escribir en el buscador (aplica inmediato) y luego usar los filtros avanzados (aplica al aceptar). Ambos coexisten en la URL." })] })] }) })] })] }) }) }));
 };
 export default FilterDocs;

package/dist/docs/LinkButtonDocs.d.ts

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

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

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

package/dist/docs/LinkButtonDocs.js

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

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

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

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

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

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

@@ -1,25 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useAppLayout } from "../../contexts";
-import { ListCrudProvider } from "../../contexts/ListCrudContext";
+import { CrudProvider } from "../../contexts/CrudContext";
 import { empresaService, personaService, } from "../docMockServices";
 import { ListCrudDocsContentPersonas } from "./ListCrudDocsContentPersonas";
-import { Collection } from "../../components";
-/**
- * Componente de Documentación del ListCrudContext
- *
- * Este componente muestra cómo usar el ListCrudContext con un servicio mock
- * para propósitos de documentación y desarrollo.
- *
- * El servicio mock simula la operación principal:
- * - getPromise: Obtiene una lista de items (Array o PaginationInterface)
- */
+import { Collection, TabPanel, TabsGroup } from "../../components";
+import { ListCrudDocsContentEmpresas } from "./ListCrudDocsContentEmpresas";
+import { useParams } from "react-router-dom";
+import { ListCrudDocsContentEmpresaSingle } from "./ListCrudDocsContentEmpresaSingle";
 export const ListCrudDocs = () => {
-    const { listarPaginados, eliminar } = personaService;
-    const { listarPaginados: listarPaginadosEmpresa } = empresaService;
+    const { listarPaginados, eliminar, editar, agregar } = personaService;
+    const { listarPaginados: listarPaginadosEmpresa, buscarPorId, editar: editarEmpresa, eliminar: eliminarEmpresa, } = empresaService;
     const { setNavBarLeftNode } = useAppLayout();
     useEffect(() => {
-        setNavBarLeftNode(_jsx("h3", { className: "text-2xl font-semibold", children: "ListCrudContext" }));
+        setNavBarLeftNode(_jsx("h3", { className: "text-2xl font-semibold", children: "CrudContext" }));
+        return () => {
+            setNavBarLeftNode(_jsx(_Fragment, {}));
+        };
     }, [setNavBarLeftNode]);
-    return (_jsxs(Collection, { children: [_jsx(ListCrudProvider, { getPromise: listarPaginados, deletePromise: eliminar, urlParams: ["filtro", "idEmpresa"], children: _jsx(ListCrudDocsContentPersonas, {}) }), _jsx(ListCrudProvider, { getPromise: listarPaginadosEmpresa, urlParams: ["filtroEmpresa", "idEmpresaEmpresa"], children: "Empresas" })] }));
+    const { id } = useParams();
+    return (_jsx(Collection, { children: _jsxs(TabsGroup, { tabs: [
+                { id: "personas", label: "Personas" },
+                { id: "empresas", label: "Empresas" },
+            ], paramName: "tab", children: [_jsx(TabPanel, { tabId: "personas", children: _jsx(CrudProvider, { getPromise: listarPaginados, postPromise: {
+                            execute: agregar,
+                            successMessage: "Persona agregada correctamente",
+                        }, putPromise: {
+                            execute: (persona) => editar(persona.id, persona),
+                            successMessage: "Cambios guardados",
+                        }, deletePromise: {
+                            execute: eliminar,
+                            successMessage: "Persona eliminada correctamente",
+                        }, urlParams: ["filtro", "idEmpresa"], children: _jsx(ListCrudDocsContentPersonas, {}) }) }), _jsx(TabPanel, { tabId: "empresas", children: _jsx(CrudProvider, { getPromise: listarPaginadosEmpresa, putPromise: {
+                            execute: (empresa) => editarEmpresa(empresa.id, empresa),
+                            successMessage: "Cambios guardados",
+                        }, deletePromise: {
+                            execute: eliminarEmpresa,
+                            successMessage: "Persona eliminada correctamente",
+                        }, getItemPromise: (params) => buscarPorId(params?.toString() || ""), pageParam: "paginaEmpresa", urlParams: ["filtroEmpresa", "idEmpresaEmpresa"], singleItemId: id, children: id ? (_jsx(ListCrudDocsContentEmpresaSingle, {})) : (_jsx(ListCrudDocsContentEmpresas, {})) }) })] }) }));
 };

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

@@ -0,0 +1,2 @@
+export declare const ListCrudDocsContentEmpresaPersonas: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListCrudDocsContentEmpresaPersonas.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListCrudDocsContentEmpresaPersonas.d.ts","sourceRoot":"","sources":["../../../src/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaPersonas.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,kCAAkC,+CAsG9C,CAAC"}

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Card, DataTable, Dialog, Loader } from "../../components";
+import { useCrud } from "../../contexts";
+import { ListCrudDocsContentEmpresasPersonasEditDialog } from "./ListCrudDocsContentEmpresasPersonasEditDialog";
+export const ListCrudDocsContentEmpresaPersonas = () => {
+    const { list, fetchItems, deleteItem } = useCrud();
+    const [isOpenEditDialog, setIsOpenEditDialog] = useState(false);
+    const [isOpenEliminarDialog, setIsOpenEliminarDialog] = useState(false);
+    const [selectedPersonaEmpresa, setSelectedPersonaEmpresa] = useState();
+    const onEditPersonaEmpresa = (personaEmpresa) => {
+        setSelectedPersonaEmpresa(personaEmpresa);
+        setIsOpenEditDialog(true);
+    };
+    const onEliminarPersonaEmpresa = (personaEmpresa) => {
+        setSelectedPersonaEmpresa(personaEmpresa);
+        setIsOpenEliminarDialog(true);
+    };
+    const onDeletePersonaSubmit = async () => {
+        await deleteItem.execute(selectedPersonaEmpresa);
+        setIsOpenEliminarDialog(false);
+        await fetchItems.execute();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Personas", headerActions: _jsx(Button, { icon: "fa-plus", onClick: () => onEditPersonaEmpresa(undefined), children: "Agregar Persona" }), alwaysDisplayHeaderActions: true, children: _jsx(DataTable, { isLoading: fetchItems.isLoading, columns: [
+                        { header: "Nombre", value: (row) => row.persona.nombre },
+                        { header: "Cargo", value: (row) => row.cargo },
+                        {
+                            actions: (row) => [
+                                _jsx(Button, { icon: "fa-edit", onClick: () => onEditPersonaEmpresa(row), variant: "ghost", children: " Editar " }),
+                                _jsx(Button, { icon: "fa-trash", onClick: () => onEliminarPersonaEmpresa(row), variant: "ghost", children: " Eliminar " })
+                            ]
+                        }
+                    ], rows: list || [] }) }), isOpenEditDialog && (_jsx(ListCrudDocsContentEmpresasPersonasEditDialog, { isOpen: isOpenEditDialog, onClose: () => setIsOpenEditDialog(false), personaEmpresa: selectedPersonaEmpresa, personasEnEmpresa: list || [] })), isOpenEliminarDialog && (_jsxs(Dialog, { isOpen: isOpenEliminarDialog, title: "Eliminar Persona", onClose: () => setIsOpenEliminarDialog(false), footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenEliminarDialog(false), disabled: deleteItem.isLoading, children: "Cancelar" }), _jsx(Button, { onClick: onDeletePersonaSubmit, disabled: deleteItem.isLoading, children: "Eliminar" })] }), children: [_jsx("p", { children: "\u00BFEst\u00E1s seguro de querer eliminar esta persona?" }), _jsx(Loader, { isLoading: deleteItem.isLoading })] }))] }));
+};

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

@@ -0,0 +1,2 @@
+export declare const ListCrudDocsContentEmpresaSingle: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListCrudDocsContentEmpresaSingle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListCrudDocsContentEmpresaSingle.d.ts","sourceRoot":"","sources":["../../../src/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaSingle.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,gCAAgC,+CAgK5C,CAAC"}

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { personaEmpresaService } from "../docMockServices";
+import { CrudProvider, useCrud } from "../../contexts";
+import { Button, Card, Collection, Dialog, Input, Loader } from "../../components";
+import { useNavigate } from "react-router-dom";
+import { ListCrudDocsContentEmpresaPersonas } from "./ListCrudDocsContentEmpresaPersonas";
+import { useEffect, useState, useCallback } from "react";
+import { DropdownMenu } from "../../components/layout/DropdownMenu";
+import { FormProvider, useForm } from "react-hook-form";
+export const ListCrudDocsContentEmpresaSingle = () => {
+    const { item, fetchItem, fetchItems, updateItem, deleteItem } = useCrud();
+    const methods = useForm({
+        defaultValues: item,
+    });
+    const { buscarPorEmpresa, agregar, editar, eliminar } = personaEmpresaService;
+    const navigate = useNavigate();
+    const [isEditing, setIsEditing] = useState(false);
+    const [isOpenEliminarDialog, setIsOpenEliminarDialog] = useState(false);
+    const buscarPersonasPorEmpresa = useCallback(async () => {
+        if (!item?.id) {
+            return [];
+        }
+        const personas = await buscarPorEmpresa(item.id);
+        return personas;
+    }, [item?.id, buscarPorEmpresa]);
+    useEffect(() => {
+        if (item) {
+            methods.reset(item);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [item]);
+    const onSubmitEdit = async (empresa) => {
+        await updateItem.execute(empresa);
+        setIsEditing(false);
+        fetchItem.execute();
+        fetchItems.execute();
+    };
+    const onDeleteEmpresaSubmit = async () => {
+        await deleteItem.execute(item);
+        setIsOpenEliminarDialog(false);
+        navigate(-1);
+        fetchItems.execute();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: fetchItem.isLoading ? "" : item?.nombre, headerActions: !isEditing ? (_jsxs(Collection, { direction: "row", children: [_jsx(DropdownMenu, { options: [
+                                { label: "Editar", icon: "fa-edit" },
+                                { label: "Eliminar", icon: "fa-trash" },
+                            ], onOptionSelected: (item) => {
+                                if (item.label === "Editar") {
+                                    setIsEditing(true);
+                                }
+                                if (item.label === "Eliminar") {
+                                    setIsOpenEliminarDialog(true);
+                                }
+                            } }), _jsx(Button, { icon: "fa-undo", variant: "ghost", size: "sm", onClick: () => navigate(-1) })] })) : null, alwaysDisplayHeaderActions: true, footer: isEditing ? (_jsx("div", { className: "flex justify-end", children: _jsxs(Collection, { direction: "row", children: [_jsx(Button, { variant: "outline", onClick: () => setIsEditing(false), disabled: updateItem.isLoading, children: "Cancelar" }), _jsx(Button, { icon: "fa-save", onClick: methods.handleSubmit(onSubmitEdit), disabled: updateItem.isLoading, children: "Guardar" })] }) })) : null, children: !isEditing ? (_jsx(CrudProvider, { getPromise: buscarPersonasPorEmpresa, postPromise: {
+                        execute: (persona) => agregar(persona),
+                        successMessage: "Persona agregada correctamente",
+                    }, putPromise: {
+                        execute: (personaEmpresa) => editar(personaEmpresa.idPersona, personaEmpresa.idEmpresa, personaEmpresa),
+                        successMessage: "Cambios guardados",
+                    }, deletePromise: {
+                        execute: (persona) => eliminar(persona),
+                        successMessage: "Persona eliminada correctamente",
+                    }, extraData: { idEmpresa: item?.id }, children: _jsx(ListCrudDocsContentEmpresaPersonas, {}) })) : (_jsx(FormProvider, { ...methods, children: _jsx("form", { onSubmit: methods.handleSubmit(onSubmitEdit), children: _jsx(Collection, { children: _jsx("div", { className: "w-[300px]", children: _jsx(Input, { label: "Nombre", ...methods.register("nombre", {
+                                        required: "Campo obligatorio",
+                                    }) }) }) }) }) })) }), isOpenEliminarDialog && (_jsxs(Dialog, { isOpen: isOpenEliminarDialog, title: "Eliminar Empresa", onClose: () => setIsOpenEliminarDialog(false), footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenEliminarDialog(false), disabled: deleteItem.isLoading, children: "Cancelar" }), _jsx(Button, { onClick: onDeleteEmpresaSubmit, disabled: deleteItem.isLoading, children: "Eliminar" })] }), children: [_jsx("p", { children: "\u00BFEst\u00E1s seguro de querer eliminar esta empresa?" }), _jsx(Loader, { isLoading: deleteItem.isLoading })] }))] }));
+};

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

@@ -0,0 +1,2 @@
+export declare const ListCrudDocsContentEmpresas: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListCrudDocsContentEmpresas.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListCrudDocsContentEmpresas.d.ts","sourceRoot":"","sources":["../../../src/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresas.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,2BAA2B,+CAsCvC,CAAC"}

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Collection, Filter, LinkButton, Loader } from "../../components";
+import { useCrud } from "../../contexts";
+export const ListCrudDocsContentEmpresas = () => {
+    const { list, pagination, fetchItems } = useCrud();
+    return (_jsxs(Card, { className: "bg-gray-50", title: "Empresas", children: [_jsxs("div", { className: "flex justify-between items-center my-2", children: [_jsx(Collection, { direction: "row", wrap: true, children: _jsx(Filter, { paramName: "filtroEmpresa", label: "Buscar", filterType: "search" }) }), _jsx(Collection, { direction: "row", wrap: true, children: pagination })] }), _jsx(Loader, { isLoading: fetchItems.isLoading, children: _jsx(Collection, { direction: "row", wrap: true, children: list?.map((empresa) => (_jsx(Card, { className: "bg-white w-[100%] md:w-[45%] lg:w-[30%] xl:w-[18%]", title: empresa.nombre, headerActions: _jsx(LinkButton, { to: `/docs/listcrud/empresa/${empresa.id}`, icon: "fa-search", variant: "ghost", size: "sm" }) }, empresa.id))) }) })] }));
+};

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

@@ -0,0 +1,10 @@
+import { type PersonaEmpresaConPersona } from "../docMockServices";
+interface ListCrudDocsContentEmpresasPersonasEditDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    personaEmpresa: PersonaEmpresaConPersona | undefined;
+    personasEnEmpresa: PersonaEmpresaConPersona[];
+}
+export declare const ListCrudDocsContentEmpresasPersonasEditDialog: ({ isOpen, onClose, personaEmpresa, personasEnEmpresa, }: ListCrudDocsContentEmpresasPersonasEditDialogProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ListCrudDocsContentEmpresasPersonasEditDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListCrudDocsContentEmpresasPersonasEditDialog.d.ts","sourceRoot":"","sources":["../../../src/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresasPersonasEditDialog.tsx"],"names":[],"mappings":"AASA,OAAO,EAIL,KAAK,wBAAwB,EAC9B,MAAM,oBAAoB,CAAC;AAK5B,UAAU,kDAAkD;IAC1D,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,EAAE,wBAAwB,GAAG,SAAS,CAAC;IACrD,iBAAiB,EAAE,wBAAwB,EAAE,CAAC;CAC/C;AAED,eAAO,MAAM,6CAA6C,GAAI,yDAK3D,kDAAkD,4CAyEpD,CAAC"}

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FormProvider, useForm } from "react-hook-form";
+import { AutocompleteInput, Button, Collection, Dialog, Input, Loader, } from "../../components";
+import { personaService, } from "../docMockServices";
+import { useEffect, useState } from "react";
+import { useCrud } from "../../contexts";
+import { useAsyncRequest } from "../../hooks";
+export const ListCrudDocsContentEmpresasPersonasEditDialog = ({ isOpen, onClose, personaEmpresa, personasEnEmpresa, }) => {
+    const { listar } = personaService;
+    const { updateItem, createItem, extraData, fetchItems } = useCrud();
+    const [personas, setPersonas] = useState([]);
+    const listarPersonas = useAsyncRequest();
+    useEffect(() => {
+        listarPersonas.execute(listar).then((personas) => {
+            setPersonas((personas || []).filter((persona) => !personasEnEmpresa.some((personaEnEmpresa) => personaEnEmpresa.idPersona === persona.id)));
+        });
+    }, [listar, personasEnEmpresa]);
+    const methods = useForm({
+        defaultValues: personaEmpresa,
+    });
+    const onSubmit = async (personaEmpresa) => {
+        if (personaEmpresa.idEmpresa) {
+            await updateItem.execute(personaEmpresa);
+        }
+        else {
+            if (!extraData?.idEmpresa) {
+                throw new Error("No se encontro el id de la empresa");
+            }
+            await createItem.execute({ ...personaEmpresa, idEmpresa: extraData.idEmpresa });
+        }
+        onClose();
+        await fetchItems.execute();
+    };
+    return (_jsx(FormProvider, { ...methods, children: _jsx(Dialog, { isOpen: isOpen, onClose: onClose, title: "Editar Persona Empresa", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: onClose, children: "Cancelar" }), _jsx(Button, { onClick: methods.handleSubmit(onSubmit), children: "Guardar" })] }), children: _jsx("form", { onSubmit: methods.handleSubmit(onSubmit), children: _jsxs(Collection, { children: [_jsx(AutocompleteInput, { label: "Persona", options: personas, getOptionLabel: (option) => option.nombre, getOptionValue: (option) => option.id.toString(), ...methods.register("idPersona", {
+                                required: "Campo obligatorio",
+                            }), error: methods.formState.errors.idPersona?.message, disabled: listarPersonas.isLoading || updateItem.isLoading || createItem.isLoading }), _jsx(Input, { label: "Cargo", ...methods.register("cargo", {
+                                required: "Campo obligatorio",
+                            }), error: methods.formState.errors.cargo?.message, disabled: listarPersonas.isLoading || updateItem.isLoading || createItem.isLoading }), _jsx(Loader, { isLoading: listarPersonas.isLoading || updateItem.isLoading || createItem.isLoading })] }) }) }) }));
+};

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

@@ -1 +1 @@
-{"version":3,"file":"ListCrudDocsContentPersonas.d.ts","sourceRoot":"","sources":["../../../src/docs/ListCrudDocs.tsx/ListCrudDocsContentPersonas.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,2BAA2B,+CAsHvC,CAAC"}
+{"version":3,"file":"ListCrudDocsContentPersonas.d.ts","sourceRoot":"","sources":["../../../src/docs/ListCrudDocs.tsx/ListCrudDocsContentPersonas.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,2BAA2B,+CAkJvC,CAAC"}

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

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useListCrud } from "../../contexts";
-import { Button, Card, Collection, DataTable, Dialog, Filter, } from "../../components";
+import { useCrud } from "../../contexts";
+import { Button, Card, Collection, DataTable, Dialog, Filter, Loader, } from "../../components";
 import { useEffect } from "react";
 import { useState } from "react";
 import { empresaService } from "../docMockServices";
+import { ListCrudDocsEditDialog } from "./ListCrudDocsEditDialog";
 export const ListCrudDocsContentPersonas = () => {
-    const { list, pagination, isLoading, refetch, deleteItem } = useListCrud();
+    const { list, pagination, isLoading, fetchItems, deleteItem } = useCrud();
     const { listar } = empresaService;
     const [empresas, setEmpresas] = useState([]);
     const [isOpenDeleteDialog, setIsOpenDeleteDialog] = useState(false);
+    const [isOpenEditDialog, setIsOpenEditDialog] = useState(false);
     const [selectedPersona, setSelectedPersona] = useState();
     const onDeletePersona = (persona) => {
         setSelectedPersona(persona);
@@ -16,36 +18,40 @@ export const ListCrudDocsContentPersonas = () => {
     };
     const onDeletePersonaSubmit = async () => {
         if (selectedPersona) {
-            await deleteItem(selectedPersona);
-            refetch();
+            await deleteItem.execute(selectedPersona);
             setIsOpenDeleteDialog(false);
+            fetchItems.execute();
         }
     };
+    const onEditPersona = (persona) => {
+        setSelectedPersona(persona);
+        setIsOpenEditDialog(true);
+    };
     useEffect(() => {
         listar().then((empresas) => {
             setEmpresas(empresas);
         });
     }, [listar]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Collection, { children: [_jsxs(Card, { className: "bg-gray-50", title: "Personas", children: [_jsxs("div", { className: "flex justify-between items-center my-2", children: [_jsx("div", { children: _jsxs(Collection, { direction: "row", wrap: true, gap: "12px", children: [_jsx(Filter, { paramName: "filtro", label: "Buscar", filterType: "search" }), _jsx(Filter, { paramName: "idEmpresa", label: "Empresa", filterType: "autocomplete", options: empresas.map((empresa) => ({
-                                                        label: empresa.nombre,
-                                                        value: empresa.id.toString(),
-                                                    })) })] }) }), _jsx("div", { children: pagination })] }), _jsx(DataTable, { columns: [
-                                    { header: "Nombre", value: (row) => row.nombre },
-                                    { header: "Email", value: (row) => row.email },
-                                    {
-                                        header: "Fecha de Nacimiento",
-                                        value: (row) => row.fechaNacimiento.format("DD/MM/YYYY"),
-                                    },
-                                    {
-                                        header: "Empresas",
-                                        value: (row) => row.empresas.map((empresa) => empresa.nombre).join(", "),
-                                    },
-                                    {
-                                        align: "center",
-                                        actions: (row) => [
-                                            _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-edit", onClick: () => console.log("Editar", row), children: "Editar" }, "edit"),
-                                            _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-trash", onClick: () => onDeletePersona(row), children: "Eliminar" }, "delete"),
-                                        ],
-                                    },
-                                ], rows: list || [], maxRows: 10, isLoading: isLoading, loadingRows: 10 })] }), _jsx("div", { children: _jsx(Button, { onClick: () => refetch(), children: "Refetch" }) })] }), isOpenDeleteDialog && (_jsx(Dialog, { isOpen: isOpenDeleteDialog, title: "Eliminar Persona", onClose: () => setIsOpenDeleteDialog(false), dialogBody: _jsx("p", { children: "\u00BFEst\u00E1s seguro de querer eliminar esta persona?" }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenDeleteDialog(false), children: "Cancelar" }), _jsx(Button, { onClick: onDeletePersonaSubmit, children: "Eliminar" })] }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Card, { className: "bg-gray-50", title: "Personas", headerActions: _jsxs(Collection, { direction: "row", children: [_jsx(Button, { icon: "fa-plus", onClick: () => onEditPersona(undefined), children: "Agregar Persona" }), _jsx(Button, { icon: "fa-sync", onClick: () => fetchItems.execute() })] }), alwaysDisplayHeaderActions: true, children: [_jsxs("div", { className: "flex justify-between items-center my-2", children: [_jsxs(Collection, { direction: "row", wrap: true, children: [_jsx(Filter, { paramName: "filtro", label: "Buscar", filterType: "search" }), _jsx(Filter, { paramName: "idEmpresa", label: "Empresa", filterType: "autocomplete", options: empresas.map((empresa) => ({
+                                            label: empresa.nombre,
+                                            value: empresa.id.toString(),
+                                        })) })] }), _jsx(Collection, { direction: "row", wrap: true, children: pagination })] }), _jsx(DataTable, { columns: [
+                            { header: "Nombre", value: (row) => row.nombre },
+                            { header: "Email", value: (row) => row.email },
+                            {
+                                header: "Fecha de Nacimiento",
+                                value: (row) => row.fechaNacimiento.format("DD/MM/YYYY"),
+                            },
+                            {
+                                header: "Empresas",
+                                value: (row) => row.empresas.map((empresa) => empresa.nombre).join(", "),
+                            },
+                            {
+                                align: "center",
+                                actions: (row) => [
+                                    _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-edit", onClick: () => onEditPersona(row), children: "Editar" }, "edit"),
+                                    _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-trash", onClick: () => onDeletePersona(row), children: "Eliminar" }, "delete"),
+                                ],
+                            },
+                        ], rows: list || [], maxRows: 10, isLoading: isLoading, loadingRows: 10 })] }), isOpenDeleteDialog && (_jsxs(Dialog, { isOpen: isOpenDeleteDialog, title: "Eliminar Persona", onClose: () => setIsOpenDeleteDialog(false), footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenDeleteDialog(false), disabled: deleteItem.isLoading, children: "Cancelar" }), _jsx(Button, { onClick: onDeletePersonaSubmit, disabled: deleteItem.isLoading, children: "Eliminar" })] }), children: [_jsx("p", { children: "\u00BFEst\u00E1s seguro de querer eliminar esta persona?" }), _jsx(Loader, { isLoading: deleteItem.isLoading })] })), isOpenEditDialog && (_jsx(ListCrudDocsEditDialog, { isOpen: isOpenEditDialog, onClose: () => setIsOpenEditDialog(false), persona: selectedPersona }))] }));
 };

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

@@ -0,0 +1,9 @@
+import type { Persona } from "../docMockServices";
+interface ListCrudDocsEditDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    persona: Persona | undefined;
+}
+export declare const ListCrudDocsEditDialog: ({ isOpen, onClose, persona, }: ListCrudDocsEditDialogProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ListCrudDocsEditDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListCrudDocsEditDialog.d.ts","sourceRoot":"","sources":["../../../src/docs/ListCrudDocs.tsx/ListCrudDocsEditDialog.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,OAAO,EAAsB,MAAM,oBAAoB,CAAC;AAGtE,UAAU,2BAA2B;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,GAAI,+BAIpC,2BAA2B,4CA2E7B,CAAC"}

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useForm, FormProvider } from "react-hook-form";
+import { Button, Collection, DateInput, Dialog, Input, Loader, } from "../../components";
+import { useCrud } from "../../contexts";
+export const ListCrudDocsEditDialog = ({ isOpen, onClose, persona, }) => {
+    const methods = useForm({
+        defaultValues: persona,
+    });
+    const { createItem, updateItem, fetchItems } = useCrud();
+    const { register, handleSubmit, formState: { errors }, } = methods;
+    const onSubmit = async (persona) => {
+        if (persona.id) {
+            await updateItem.execute(persona);
+        }
+        else {
+            await createItem.execute(persona);
+        }
+        onClose();
+        fetchItems.execute();
+    };
+    const isLoading = createItem.isLoading || updateItem.isLoading;
+    return (_jsx(FormProvider, { ...methods, children: _jsx(Dialog, { isOpen: isOpen, onClose: onClose, title: "Editar Persona", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: onClose, children: "Cancelar" }), _jsx(Button, { onClick: handleSubmit(onSubmit), children: "Guardar" })] }), children: _jsx("form", { onSubmit: handleSubmit(onSubmit), onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        e.preventDefault();
+                        handleSubmit(onSubmit)();
+                    }
+                }, children: _jsxs(Collection, { children: [_jsx(Input, { label: "Nombre", ...register("nombre", { required: "Campo obligatorio" }), error: errors.nombre?.message }), _jsx(Input, { label: "Email", ...register("email", { required: "Campo obligatorio" }), error: errors.email?.message }), _jsx(DateInput, { label: "Fecha de Nacimiento", placeholder: "dd/mm/yyyy", icon: "fa-calendar-alt", ...register("fechaNacimiento", {
+                                required: "Campo obligatorio",
+                            }), error: errors.fechaNacimiento?.message }), _jsx(Loader, { isLoading: isLoading })] }) }) }) }));
+};

package/dist/docs/MenuDocs.d.ts

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

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

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