flysoft-react-ui 1.2.3 → 1.2.5

package/dist/docs/LinkButtonDocs.js

@@ -1,7 +0,0 @@
-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,2 +0,0 @@
-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 +0,0 @@
-{"version":3,"file":"ListCrudDocs.d.ts","sourceRoot":"","sources":["../../../src/docs/ListCrudDocs.tsx/ListCrudDocs.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,YAAY,+CA8GxB,CAAC"}

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

@@ -1,47 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { useAppLayout } from "../../contexts";
-import { CrudProvider } from "../../contexts/CrudContext";
-import { empresaService, personaService, } from "../docMockServices";
-import { ListCrudDocsContentPersonas } from "./ListCrudDocsContentPersonas";
-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, 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: "CrudContext" }));
-        return () => {
-            setNavBarLeftNode(_jsx(_Fragment, {}));
-        };
-    }, [setNavBarLeftNode]);
-    const { id } = useParams();
-    return (_jsxs(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",
-                                // Ejemplo de mensaje de error diferencial basado en el error
-                                errorMessage: (error) => {
-                                    if (error?.status === 409)
-                                        return "El nombre de la empresa ya existe";
-                                    return "Error al actualizar la empresa";
-                                },
-                            }, deletePromise: {
-                                execute: eliminarEmpresa,
-                                successMessage: "Empresa eliminada correctamente",
-                            }, getItemPromise: (params) => buscarPorId(params?.toString() || ""), pageParam: "paginaEmpresa", urlParams: ["filtroEmpresa", "idEmpresaEmpresa"], singleItemId: id, children: id ? (_jsx(ListCrudDocsContentEmpresaSingle, {})) : (_jsx(ListCrudDocsContentEmpresas, {})) }) })] }), _jsxs("section", { className: "mt-8 p-6 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800", children: [_jsxs("h3", { className: "text-lg font-bold mb-4", children: [_jsx("i", { className: "fa fa-info-circle mr-2 text-blue-500" }), "Configuraci\u00F3n de Feedback en Promesas"] }), _jsxs("p", { className: "text-sm mb-4", children: ["Las propiedades ", _jsx("code", { children: "postPromise" }), ", ", _jsx("code", { children: "putPromise" }), ",", " ", _jsx("code", { children: "deletePromise" }), " y ", _jsx("code", { children: "getItemPromise" }), "soportan configuraci\u00F3n avanzada de feedback:"] }), _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400", children: [_jsxs("li", { children: [_jsx("strong", { children: "M\u00FAltiplos Tipos:" }), " ", _jsx("code", { children: "errorMessage" }), " acepta", " ", _jsx("code", { children: "string" }), " o una funci\u00F3n ", _jsx("code", { children: "(error) => string" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "Feedback Opcional:" }), " Si no se define", " ", _jsx("code", { children: "errorMessage" }), ", no se mostrar\u00E1 ning\u00FAn snackbar ante errores."] }), _jsxs("li", { children: [_jsx("strong", { children: "Simplificaci\u00F3n:" }), " Internamente utiliza", " ", _jsx("code", { children: "useAsyncRequest" }), " para unificar el comportamiento."] })] })] })] }));
-};

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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,34 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,66 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,7 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,39 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-{"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,57 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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, 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);
-        setIsOpenDeleteDialog(true);
-    };
-    const onDeletePersonaSubmit = async () => {
-        if (selectedPersona) {
-            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(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

@@ -1,9 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,30 +0,0 @@
-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/LoaderDocs.d.ts

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

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

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

package/dist/docs/LoaderDocs.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
-import { Card, Loader, Button, Input, Skeleton } from "../index";
-const LoaderDocs = () => {
-    const [isLoading1, setIsLoading1] = useState(false);
-    const [isLoading2, setIsLoading2] = useState(false);
-    const [isLoading3, setIsLoading3] = useState(false);
-    const [isLoading4, setIsLoading4] = useState(false);
-    const [isLoading5, setIsLoading5] = useState(false);
-    const [isLoading6, setIsLoading6] = useState(false);
-    // Componente Skeleton para el ejemplo
-    const SkeletonCard = () => (_jsx(Card, { title: "Cargando contenido...", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-5/6" })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx(Skeleton, { className: "h-20" }), _jsx(Skeleton, { className: "h-20" }), _jsx(Skeleton, { className: "h-20" })] }), _jsx(Skeleton, { className: "h-10 w-1/3" })] }) }));
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Loader - 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: "Loader b\u00E1sico, sin children" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Cuando no hay children ni contentLoadingNode, el Loader muestra \u00FAnicamente la barra de progreso y el texto. Ideal para pantallas de carga completas." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-spinner", onClick: () => {
-                                            setIsLoading1(true);
-                                            setTimeout(() => setIsLoading1(false), 3000);
-                                        }, children: "Mostrar Loader B\u00E1sico" }), _jsx(Loader, { isLoading: isLoading1 })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader b\u00E1sico con texto personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el texto que se muestra debajo de la barra de progreso usando la prop ", _jsx("code", { children: "text" }), "."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-file-upload", onClick: () => {
-                                            setIsLoading2(true);
-                                            setTimeout(() => setIsLoading2(false), 3000);
-                                        }, children: "Mostrar Loader con Texto Personalizado" }), _jsx(Loader, { isLoading: isLoading2, text: "Subiendo archivo... Por favor espera." })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children pero sin contentLoadingNode ni keepContentWhileLoading" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Cuando hay children pero no contentLoadingNode, el Loader muestra los children con un overlay semitransparente y la barra de progreso centrada. Los eventos del mouse y teclado se deshabilitan en los children." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-layer-group", onClick: () => {
-                                            setIsLoading3(true);
-                                            setTimeout(() => setIsLoading3(false), 3000);
-                                        }, children: "Mostrar Loader con Overlay" }), _jsx(Loader, { isLoading: isLoading3, children: _jsx(Card, { title: "Contenido con Loader", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "usuario@ejemplo.com", icon: "fa-envelope" }), _jsx(Button, { variant: "primary", icon: "fa-save", children: "Guardar" })] }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children y keepContentWhileLoading" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando ", _jsx("code", { children: "keepContentWhileLoading" }), " los children mantienen su opacidad normal pero siguen deshabilitados para interacci\u00F3n."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-eye", onClick: () => {
-                                            setIsLoading4(true);
-                                            setTimeout(() => setIsLoading4(false), 3000);
-                                        }, children: "Mostrar Loader (mantener contenido visible)" }), _jsx(Loader, { isLoading: isLoading4, keepContentWhileLoading: true, children: _jsx(Card, { title: "Contenido Visible Durante Carga", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "B\u00FAsqueda", placeholder: "Buscar productos...", icon: "fa-search" }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Producto 1" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Producto 2" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Producto 3" }) })] })] }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children y contentLoadingNode (skeleton)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando se proporciona ", _jsx("code", { children: "contentLoadingNode" }), ", los children se ocultan y se muestra el nodo personalizado con el loader centrado encima. En este ejemplo usamos un skeleton para mostrar el contenido que se est\u00E1 cargando."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-image", onClick: () => {
-                                            setIsLoading5(true);
-                                            setTimeout(() => setIsLoading5(false), 3000);
-                                        }, children: "Mostrar Loader con Skeleton" }), _jsx(Loader, { isLoading: isLoading5, contentLoadingNode: _jsx(SkeletonCard, {}), children: _jsx(Card, { title: "Contenido Real (oculto durante carga)", children: _jsxs("div", { className: "space-y-4", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este es el contenido real que se mostrar\u00E1 cuando termine la carga." }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Item 1" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Item 2" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Item 3" }) })] })] }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children y keepContentWhileLoading pero cambiando el color del overlay" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el overlay usando la prop", " ", _jsx("code", { children: "overlayClassName" }), " con clases de Tailwind. \u00DAtil para adaptar el loader a diferentes fondos de interfaz, cambiar el border radius, padding, color, etc. En este ejemplo usamos un overlay blanco semitransparente con border radius personalizado."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-palette", onClick: () => {
-                                            setIsLoading6(true);
-                                            setTimeout(() => setIsLoading6(false), 3000);
-                                        }, children: "Mostrar Loader (Overlay Blanco)" }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx(Loader, { isLoading: isLoading6, keepContentWhileLoading: true, overlayClassName: "bg-white/50 backdrop-blur-sm rounded-lg", children: _jsx(Card, { title: "Contenido con Overlay Personalizado", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Campo 1", placeholder: "Ejemplo...", icon: "fa-edit" }), _jsx(Input, { label: "Campo 2", placeholder: "Ejemplo...", icon: "fa-edit" }), _jsx(Button, { variant: "primary", icon: "fa-save", children: "Guardar" })] }) }) }) })] })] }), _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: "Barra de progreso infinita:" }), " Animaci\u00F3n continua usando el color primario del tema"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tres variantes de uso:" }), " Solo loader, con overlay sobre children, o con nodo personalizado"] }), _jsxs("li", { children: [_jsx("strong", { children: "Deshabilitaci\u00F3n de eventos:" }), " Cuando est\u00E1 cargando, deshabilita todos los eventos del mouse y teclado en los children"] }), _jsxs("li", { children: [_jsx("strong", { children: "Overlay semitransparente:" }), " Similar al Dialog, con efecto blur para mejor enfoque visual"] }), _jsxs("li", { children: [_jsx("strong", { children: "Texto personalizable:" }), " Puedes cambiar el texto que se muestra debajo de la barra de progreso"] }), _jsxs("li", { children: [_jsx("strong", { children: "Integraci\u00F3n con tema:" }), " Usa el color primario del tema actual autom\u00E1ticamente"] }), _jsxs("li", { children: [_jsx("strong", { children: "Contenido condicional:" }), " Con keepContentWhileLoading puedes mantener el contenido visible pero deshabilitado"] }), _jsxs("li", { children: [_jsx("strong", { children: "Overlay personalizable:" }), " Puedes personalizar completamente el overlay usando overlayClassName con clases de Tailwind para cambiar color, border radius, padding, etc."] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Default" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "isLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsx("td", { className: "p-3 text-sm", children: "false" }), _jsx("td", { className: "p-3 text-sm", children: "Controla si el loader est\u00E1 visible" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "text" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "\"Cargando...\"" }), _jsx("td", { className: "p-3 text-sm", children: "Texto que se muestra debajo de la barra de progreso" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "children" }) }), _jsx("td", { className: "p-3 text-sm", children: "ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "-" }), _jsx("td", { className: "p-3 text-sm", children: "Contenido que se mostrar\u00E1 con overlay cuando isLoading es true" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "keepContentWhileLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsx("td", { className: "p-3 text-sm", children: "false" }), _jsx("td", { className: "p-3 text-sm", children: "Si es true, mantiene el contenido visible (sin reducir opacidad) pero deshabilitado" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "contentLoadingNode" }) }), _jsx("td", { className: "p-3 text-sm", children: "ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "-" }), _jsx("td", { className: "p-3 text-sm", children: "Nodo personalizado que se muestra en lugar de children cuando isLoading es true" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "overlayClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "\"bg-black/50 backdrop-blur-sm\"" }), _jsx("td", { className: "p-3 text-sm", children: "Clases de Tailwind para personalizar el overlay (ej: \"bg-white/50 backdrop-blur-sm rounded-lg\" para overlay blanco con border radius)" })] })] })] }) })] })] }) }) }));
-};
-export default LoaderDocs;

package/dist/docs/MenuDocs.d.ts

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

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

@@ -1 +0,0 @@
-{"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"}

package/dist/docs/MenuDocs.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
-import { Card, Menu, Badge } from "../index";
-const MenuDocs = () => {
-    const [selectedItem, setSelectedItem] = useState(null);
-    // Opciones básicas
-    const basicOptions = [
-        { label: "Dashboard", id: "dashboard" },
-        { label: "Configuración", id: "settings" },
-        { label: "Perfil", id: "profile" },
-        { label: "Ayuda", id: "help" },
-    ];
-    // Opciones con iconos
-    const optionsWithIcons = [
-        { label: "Editar", icon: "fa-edit", action: "edit" },
-        { label: "Eliminar", icon: "fa-trash", action: "delete" },
-        { label: "Compartir", icon: "fa-share", action: "share" },
-    ];
-    // Opciones complejas
-    const userOptions = [
-        { id: 1, name: "Juan Pérez", email: "juan@ejemplo.com", role: "Admin" },
-        { id: 2, name: "María García", email: "maria@ejemplo.com", role: "User" },
-    ];
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Menu - Lista de Opciones", 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 Menu muestra una lista vertical de opciones. Es la versi\u00F3n est\u00E1tica y siempre visible del contenido de un DropdownMenu." }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-start gap-8", children: [_jsx(Menu, { options: basicOptions, onOptionSelected: (item) => setSelectedItem(item) }), selectedItem && (_jsxs("div", { className: "p-4 border rounded bg-[var(--color-bg-secondary)]", children: [_jsx("p", { className: "text-sm font-semibold", children: "Seleccionado:" }), _jsxs("p", { className: "text-sm", children: [selectedItem.label, " (", selectedItem.id, ")"] })] }))] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Personalizaci\u00F3n con renderOption" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes personalizar completamente c\u00F3mo se renderiza cada opci\u00F3n." }), _jsx("div", { className: "space-y-4", children: _jsx(Menu, { options: optionsWithIcons, onOptionSelected: (item) => console.log(item), renderOption: (item) => (_jsxs("div", { className: "flex items-center", children: [_jsx("i", { className: `fa ${item.icon} w-6` }), _jsx("span", { children: item.label })] })) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso de getOptionLabel" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Si tus objetos no tienen una propiedad `label`, puedes usar `getOptionLabel`." }), _jsx("div", { className: "space-y-4", children: _jsx(Menu, { options: userOptions, onOptionSelected: (item) => console.log(item), getOptionLabel: (item) => item.name, renderOption: (item) => (_jsxs("div", { className: "flex justify-between items-center w-full min-w-[200px]", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium", children: item.name }), _jsx("div", { className: "text-xs text-[var(--flysoft-text-secondary)]", children: item.email })] }), _jsx(Badge, { variant: item.role === 'Admin' ? 'primary' : 'secondary', size: "sm", children: item.role })] })) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Personalizaci\u00F3n de Estilos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes usar la propiedad `className` para sobreescribir los estilos por defecto usando clases de Tailwind. Por ejemplo, puedes cambiar el color de fondo, quitar el borde o sombra, etc." }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex gap-8 flex-wrap", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Fondo Oscuro" }), _jsx(Menu, { options: basicOptions, onOptionSelected: (item) => setSelectedItem(item), className: "bg-gray-800 border-gray-700 text-white", itemClassName: "text-gray-200 hover:bg-gray-700 hover:text-white", renderOption: (item) => (_jsx("span", { children: item.label })) })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Sin Borde ni Sombra" }), _jsx(Menu, { options: basicOptions, onOptionSelected: (item) => setSelectedItem(item), className: "border-0 shadow-none bg-blue-50" })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Estilo Destacado" }), _jsx(Menu, { options: basicOptions, onOptionSelected: (item) => setSelectedItem(item), className: "bg-indigo-50 border-indigo-200 shadow-md", renderOption: (item) => (_jsx("span", { className: "text-indigo-800 font-medium", children: item.label })) })] })] }) })] })] }) }) }));
-};
-export default MenuDocs;

package/dist/docs/PaginationDocs.d.ts

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

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

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