flysoft-react-ui 0.5.0 → 0.5.3

package/dist/docs/FilterDocs.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useSearchParams } from "react-router-dom";
+import { Card, Filter, Collection, FiltersDialog } from "../index";
+import dayjs from "dayjs";
+import { personaService } from "./docMockServices/personaService";
+const FilterDocs = () => {
+    const [searchParams] = useSearchParams();
+    const currentFilterValue = searchParams.get("filtro");
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Filter - Gesti\u00F3n de Filtros con Query Parameters", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente Filter permite gestionar filtros que se sincronizan con los query parameters de la URL. El valor se obtiene autom\u00E1ticamente del query parameter que coincida con el", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "paramName" }), " ", "proporcionado. Al setear el filtro, se actualiza la URL sin perder los dem\u00E1s query parameters y sin agregar una nueva entrada al historial del navegador."] }), _jsx(Card, { title: "Ejemplo b\u00E1sico", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Filter, { paramName: "filtro", label: "Filtro" }), currentFilterValue && (_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: "Valor del filtro:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: currentFilterValue })] }), _jsxs("p", { className: "text-xs mt-1", style: { color: "var(--flysoft-text-secondary)" }, children: ["URL actual:", " ", _jsxs("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: ["?filtro=", currentFilterValue] })] }), _jsx("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 El componente muestra el valor actual del query parameter. Al hacer clic en \"setear\", se actualiza la URL con el valor del estado interno." })] })), !currentFilterValue && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 El filtro est\u00E1 vac\u00EDo. El componente mostrar\u00E1 \"undefined\" hasta que se establezca un valor." }) }))] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Sincronizaci\u00F3n con URL" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente se sincroniza autom\u00E1ticamente con los query parameters de la URL. Si la URL contiene el par\u00E1metro al cargar la p\u00E1gina, el componente mostrar\u00E1 ese valor. Si cambias la URL manualmente, el componente se actualizar\u00E1 autom\u00E1ticamente." }), _jsx(Card, { title: "Ejemplo con sincronizaci\u00F3n", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: ["Prueba agregar", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?test=valor123" }), " ", "a la URL y observa c\u00F3mo el componente se actualiza autom\u00E1ticamente."] }) }), _jsx(Filter, { paramName: "test", label: "Filtro de prueba" }), _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: ["\uD83D\uDCA1 Al hacer clic en \"setear\", la URL se actualiza usando", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "replace: true" }), ", lo que significa que al presionar el bot\u00F3n \"atr\u00E1s\" del navegador, volver\u00E1s a la p\u00E1gina anterior, no a la misma p\u00E1gina sin el par\u00E1metro."] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "M\u00FAltiples filtros" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes usar m\u00FAltiples componentes Filter con diferentes", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "paramName" }), " ", "para gestionar varios filtros simult\u00E1neamente. Cada filtro mantiene su propio estado y se sincroniza con su respectivo query parameter."] }), _jsx(Card, { title: "Ejemplo con m\u00FAltiples filtros", children: _jsxs("div", { className: "space-y-4", children: [_jsxs(Collection, { direction: "row", gap: "1rem", wrap: true, children: [_jsx(Filter, { paramName: "categoria", label: "Categor\u00EDa", filterType: "text" }), _jsx(Filter, { paramName: "cantidad", label: "Cantidad", filterType: "number", min: 0, max: 1000 }), _jsx(Filter, { paramName: "fecha", label: "Fecha", filterType: "date", staticOptions: [
+                                                        { text: "Hoy", value: dayjs().format("YYYY-MM-DD") },
+                                                        {
+                                                            text: "Ayer",
+                                                            value: dayjs().subtract(1, "day").format("YYYY-MM-DD"),
+                                                        },
+                                                        {
+                                                            text: "Última semana",
+                                                            value: dayjs().subtract(1, "week").format("YYYY-MM-DD"),
+                                                        },
+                                                        {
+                                                            text: "Último mes",
+                                                            value: dayjs()
+                                                                .subtract(1, "month")
+                                                                .format("YYYY-MM-DD"),
+                                                        },
+                                                        {
+                                                            text: "Último año",
+                                                            value: dayjs().subtract(1, "year").format("YYYY-MM-DD"),
+                                                        },
+                                                    ].map((option) => ({
+                                                        text: option.text,
+                                                        value: option.value,
+                                                    })) }), _jsx(Filter, { paramName: "estado", label: "Estado", filterType: "autocomplete", options: [
+                                                        { label: "Activo", value: "activo" },
+                                                        { label: "Inactivo", value: "inactivo" },
+                                                        { label: "Pendiente", value: "pendiente" },
+                                                        { label: "Cancelado", value: "cancelado" },
+                                                    ] }), _jsx(Filter, { paramName: "busqueda", label: "B\u00FAsqueda", filterType: "search" })] }), _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsx("p", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Cada filtro mantiene su propio query parameter. Puedes tener varios filtros activos simult\u00E1neamente en la URL. Los filtros de tipo date guardan el valor como \"yyyy-mm-dd\" pero lo muestran como \"dd/mm/yyyy\". El filtro de tipo search muestra directamente el input sin panel desplegable y emite cambios al presionar Enter o hacer click en el \u00EDcono." }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Filtro de tipo Search" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El filtro de tipo", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "search" }), " ", "muestra directamente un campo de b\u00FAsqueda sin panel desplegable. Es ideal para b\u00FAsquedas r\u00E1pidas donde el usuario puede escribir y presionar Enter para aplicar el filtro. El \u00EDcono cambia din\u00E1micamente: muestra un \u00EDcono de b\u00FAsqueda cuando no hay valor y un \u00EDcono de X cuando hay un valor para limpiarlo."] }), _jsx(Card, { title: "Ejemplo de filtro Search", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Filter, { paramName: "busquedaTexto", label: "Buscar", filterType: "search", inputWidth: "300px" }), _jsxs("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: _jsx("span", { className: "font-semibold", children: "Caracter\u00EDsticas:" }) }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("li", { children: "Muestra el input directamente sin panel desplegable" }), _jsx("li", { children: "Al presionar Enter, emite los cambios y actualiza la URL" }), _jsx("li", { children: "El \u00EDcono cambia: b\u00FAsqueda (fa-search) cuando est\u00E1 vac\u00EDo, X (fa-times) cuando hay valor" }), _jsx("li", { children: "Al hacer click en el \u00EDcono X, limpia el valor y emite undefined" }), _jsx("li", { children: "Al hacer click en el \u00EDcono de b\u00FAsqueda, emite los cambios (submit)" }), _jsx("li", { children: "Se sincroniza autom\u00E1ticamente con el query parameter asociado" })] })] }), searchParams.get("busquedaTexto") && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", children: [_jsx("span", { className: "font-semibold", children: "Valor actual:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: searchParams.get("busquedaTexto") })] }) }))] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Filtro de tipo SearchSelect" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El filtro de tipo", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "searchSelect" }), " ", "muestra un panel desplegable con un", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "SearchSelectInput" }), " ", "que permite buscar y seleccionar opciones desde una fuente de datos as\u00EDncrona. Requiere funciones de b\u00FAsqueda que devuelvan Promises, ideal para b\u00FAsquedas en APIs o bases de datos."] }), _jsx(Card, { title: "Ejemplo de filtro SearchSelect", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Filter, { paramName: "persona", label: "Persona", filterType: "searchSelect", onSearchPromiseFn: async (text) => {
+                                                return (await personaService.listar({
+                                                    filtro: text,
+                                                }));
+                                            }, onSingleSearchPromiseFn: async (id) => {
+                                                return (await personaService.buscarPorId(Number(id)));
+                                            }, getOptionLabel: (persona) => persona.nombre, getOptionValue: (persona) => persona.id }), _jsxs("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: _jsx("span", { className: "font-semibold", children: "Caracter\u00EDsticas:" }) }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: ["Requiere", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "onSearchPromiseFn" }), " ", "para buscar opciones (recibe texto y devuelve Promise con array o PaginationInterface)"] }), _jsxs("li", { children: ["Requiere", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "onSingleSearchPromiseFn" }), " ", "para buscar una opci\u00F3n individual por su valor (recibe el valor y devuelve Promise con el objeto o undefined)"] }), _jsxs("li", { children: ["Opcionalmente puede recibir", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "getOptionLabel" }), ",", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "getOptionValue" }), ", y", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "renderOption" }), " ", "para personalizar c\u00F3mo se muestran las opciones"] }), _jsxs("li", { children: ["Al seleccionar una opci\u00F3n, se guarda el valor (usando", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "getOptionValue" }), ") pero se muestra el label en el badge"] }), _jsx("li", { children: "Se sincroniza autom\u00E1ticamente con el query parameter asociado" })] })] }), searchParams.get("persona") && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", children: [_jsx("span", { className: "font-semibold", children: "ID de persona seleccionada:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: searchParams.get("persona") })] }) }))] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Preservaci\u00F3n de otros query parameters" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Al setear un filtro, el componente preserva todos los dem\u00E1s query parameters existentes en la URL. Esto permite combinar filtros con otros par\u00E1metros como paginaci\u00F3n, ordenamiento, etc." }), _jsx(Card, { title: "Ejemplo con otros par\u00E1metros", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: ["Prueba agregar", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?pagina=2&orden=asc" }), " ", "a la URL y luego setear un filtro. Observa c\u00F3mo se preservan los par\u00E1metros existentes."] }) }), _jsx(Filter, { paramName: "filtroCompleto", label: "Filtro completo", filterType: "text" }), _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", children: [_jsx("span", { className: "font-semibold", children: "Query parameters actuales:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: searchParams.toString() || "ninguno" })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Comportamiento del historial" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente usa", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "replace: true" }), " ", "al actualizar la URL, lo que significa que reemplaza la entrada actual del historial en lugar de agregar una nueva. Esto permite que al presionar el bot\u00F3n \"atr\u00E1s\" del navegador, vuelvas a la p\u00E1gina anterior, no a la misma p\u00E1gina sin el par\u00E1metro."] }), _jsx(Card, { title: "Prueba el historial", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Sigue estos pasos para probar el comportamiento del historial:" }), _jsxs("ol", { className: "list-decimal list-inside space-y-1 text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("li", { children: "Navega a otra p\u00E1gina (o recarga esta p\u00E1gina)" }), _jsx("li", { children: "Vuelve a esta p\u00E1gina" }), _jsx("li", { children: "Setear un filtro" }), _jsx("li", { children: "Presiona el bot\u00F3n \"atr\u00E1s\" del navegador" }), _jsx("li", { children: "Deber\u00EDas volver a la p\u00E1gina anterior, no a esta misma p\u00E1gina sin el par\u00E1metro" })] })] }), _jsx(Filter, { paramName: "historial", label: "Filtro de historial" })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "FiltersDialog - Dialog de Filtros" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "FiltersDialog" }), " ", "permite agrupar m\u00FAltiples filtros en un dialog que se abre al hacer clic en un bot\u00F3n con \u00EDcono de filtrar. Los filtros no modifican la URL directamente, sino que se actualizan en un estado interno. Solo cuando el usuario hace clic en \"Aplicar filtros\", se actualizan todos los query parameters de una vez."] }), _jsx(Card, { title: "Ejemplo b\u00E1sico de FiltersDialog", children: _jsxs("div", { className: "space-y-4", children: [_jsx(FiltersDialog, { filters: [
+                                                {
+                                                    filterType: "text",
+                                                    paramName: "nombre",
+                                                    label: "Nombre",
+                                                },
+                                                {
+                                                    filterType: "number",
+                                                    paramName: "edad",
+                                                    label: "Edad",
+                                                    min: 0,
+                                                    max: 120,
+                                                },
+                                                {
+                                                    filterType: "date",
+                                                    paramName: "fechaNacimiento",
+                                                    label: "Fecha de Nacimiento",
+                                                },
+                                            ] }), _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsx("p", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Haz clic en el bot\u00F3n de filtrar para abrir el dialog. Los filtros se actualizan en tiempo real pero no modifican la URL 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: "FiltersDialog con Autocomplete" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes incluir filtros de tipo autocomplete en el", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "FiltersDialog" }), ". Todos los tipos de filtros son compatibles."] }), _jsx(Card, { title: "Ejemplo con Autocomplete", children: _jsxs("div", { className: "space-y-4", children: [_jsx(FiltersDialog, { filters: [
+                                                {
+                                                    filterType: "text",
+                                                    paramName: "busqueda",
+                                                    label: "Búsqueda",
+                                                },
+                                                {
+                                                    filterType: "autocomplete",
+                                                    paramName: "estado",
+                                                    label: "Estado",
+                                                    options: [
+                                                        { label: "Activo", value: "activo" },
+                                                        { label: "Inactivo", value: "inactivo" },
+                                                        { label: "Pendiente", value: "pendiente" },
+                                                        { label: "Cancelado", value: "cancelado" },
+                                                    ],
+                                                },
+                                                {
+                                                    filterType: "date",
+                                                    paramName: "fecha",
+                                                    label: "Fecha",
+                                                    staticOptions: [
+                                                        { text: "Hoy", value: dayjs().format("YYYY-MM-DD") },
+                                                        {
+                                                            text: "Ayer",
+                                                            value: dayjs()
+                                                                .subtract(1, "day")
+                                                                .format("YYYY-MM-DD"),
+                                                        },
+                                                        {
+                                                            text: "Última semana",
+                                                            value: dayjs()
+                                                                .subtract(1, "week")
+                                                                .format("YYYY-MM-DD"),
+                                                        },
+                                                    ],
+                                                },
+                                            ] }), _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsx("p", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Puedes combinar diferentes tipos de filtros en un solo dialog. Todos se aplican simult\u00E1neamente cuando haces clic en \"Aplicar filtros\"." }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Comportamiento de FiltersDialog" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "FiltersDialog" }), " ", "tiene un comportamiento especial: los filtros no modifican la URL mientras el usuario los est\u00E1 configurando. Solo cuando hace clic en \"Aplicar filtros\", se actualizan todos los query parameters de una vez. Esto permite que el usuario configure m\u00FAltiples filtros antes de aplicarlos."] }), _jsx(Card, { title: "Ventajas de FiltersDialog", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: [_jsx("p", { className: "text-sm mb-2", style: { color: "var(--flysoft-text-secondary)" }, children: _jsx("span", { className: "font-semibold", children: "Ventajas:" }) }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("li", { children: "Los filtros se configuran sin modificar la URL hasta que se aplican" }), _jsx("li", { children: "Permite configurar m\u00FAltiples filtros antes de aplicarlos" }), _jsx("li", { children: "Todos los filtros se aplican simult\u00E1neamente, evitando m\u00FAltiples actualizaciones de URL" }), _jsx("li", { children: "El bot\u00F3n \"Cerrar\" descarta los cambios sin aplicarlos" }), _jsx("li", { children: "Al abrir el dialog, se sincroniza con los valores actuales de la URL" })] })] }), _jsx(FiltersDialog, { filters: [
+                                                {
+                                                    filterType: "text",
+                                                    paramName: "ejemplo1",
+                                                    label: "Ejemplo 1",
+                                                },
+                                                {
+                                                    filterType: "text",
+                                                    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\"." })] })] }) })] })] }) }) }));
+};
+export default FilterDocs;

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

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

package/dist/docs/InputDocs.js

@@ -2,6 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Card, Input, Button } from "../index";
 const InputDocs = () => {
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Input - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Nombre completo", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "campo de texto est\u00E1ndar con \u00EDcono a la izquierda" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Correo electr\u00F3nico", type: "email", placeholder: "usuario@ejemplo.com", icon: "fa-envelope" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "soporta tipos de entrada nativos de HTML" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "sm", label: "Tama\u00F1o peque\u00F1o", placeholder: "sm", icon: "fa-compress-alt" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o compacto ideal para barras de herramientas" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "md", label: "Tama\u00F1o mediano", placeholder: "md", icon: "fa-arrows-alt-h" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o por defecto, balanceado para formularios" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "lg", label: "Tama\u00F1o grande", placeholder: "lg", icon: "fa-expand-alt" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o amplio ideal para formularios destacados" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDconos y posiciones" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "\u00CDcono a la izquierda", placeholder: "Buscar...", icon: "fa-search" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\u00EDcono alineado a la izquierda por defecto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "\u00CDcono a la derecha", placeholder: "C\u00F3digo de verificaci\u00F3n", icon: "fa-key", iconPosition: "right" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "iconPosition permite mover el \u00EDcono a la derecha" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Con error", placeholder: "Usuario", error: "Este campo es obligatorio", icon: "fa-exclamation-circle" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "utiliza el prop error para mostrar mensajes y estilos" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Deshabilitado", placeholder: "Solo lectura", disabled: true, icon: "fa-lock" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "el estado disabled aplica estilos y bloqueo de interacci\u00F3n" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Formulario completo" }), _jsx(Card, { title: "Ejemplo de formulario con Input", subtitle: "Combinaci\u00F3n de Input y Button para captura de datos", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-paper-plane", children: "Enviar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Nombre y apellido", icon: "fa-id-card" }), _jsx(Input, { label: "Correo", type: "email", placeholder: "correo@empresa.com", icon: "fa-at" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" })] }) })] })] }) }) }));
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Input - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Nombre completo", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "campo de texto est\u00E1ndar con \u00EDcono a la izquierda" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Correo electr\u00F3nico", type: "email", placeholder: "usuario@ejemplo.com", icon: "fa-envelope" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "soporta tipos de entrada nativos de HTML" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "sm", label: "Tama\u00F1o peque\u00F1o", placeholder: "sm", icon: "fa-compress-alt" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o compacto ideal para barras de herramientas" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "md", label: "Tama\u00F1o mediano", placeholder: "md", icon: "fa-arrows-alt-h" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o por defecto, balanceado para formularios" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "lg", label: "Tama\u00F1o grande", placeholder: "lg", icon: "fa-expand-alt" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o amplio ideal para formularios destacados" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDconos y posiciones" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "\u00CDcono a la izquierda", placeholder: "Buscar...", icon: "fa-search" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\u00EDcono alineado a la izquierda por defecto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "\u00CDcono a la derecha", placeholder: "C\u00F3digo de verificaci\u00F3n", icon: "fa-key", iconPosition: "right" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "iconPosition permite mover el \u00EDcono a la derecha" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDcono clickeable con onIconClick" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Input con \u00EDcono clickeable", placeholder: "Haz click en el \u00EDcono...", icon: "fa-info-circle", iconPosition: "right", onIconClick: () => {
+                                                    alert("¡Ícono clickeado!");
+                                                } }), _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa la propiedad ", _jsx("code", { children: "onIconClick" }), " para hacer el \u00EDcono clickeable. El \u00EDcono mostrar\u00E1 un efecto hover cuando sea clickeable."] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Ejemplo pr\u00E1ctico: limpiar campo", placeholder: "Escribe algo...", icon: "fa-times", iconPosition: "right", onIconClick: (e) => {
+                                                    const input = e.currentTarget
+                                                        .closest(".relative")
+                                                        ?.querySelector("input");
+                                                    if (input) {
+                                                        input.value = "";
+                                                        input.focus();
+                                                    }
+                                                } }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de uso pr\u00E1ctico: limpiar el campo al hacer click en el \u00EDcono." })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Con error", placeholder: "Usuario", error: "Este campo es obligatorio", icon: "fa-exclamation-circle" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "utiliza el prop error para mostrar mensajes y estilos" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Deshabilitado", placeholder: "Solo lectura", disabled: true, icon: "fa-lock" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "el estado disabled aplica estilos y bloqueo de interacci\u00F3n" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Formulario completo" }), _jsx(Card, { title: "Ejemplo de formulario con Input", subtitle: "Combinaci\u00F3n de Input y Button para captura de datos", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-paper-plane", children: "Enviar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Nombre y apellido", icon: "fa-id-card" }), _jsx(Input, { label: "Correo", type: "email", placeholder: "correo@empresa.com", icon: "fa-at" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" })] }) })] })] }) }) }));
 };
 export default InputDocs;

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

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

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

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

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

@@ -0,0 +1,29 @@
+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 { empresaService, personaService, } from "../docMockServices";
+import { ListCrudDocsContentPersonas } from "./ListCrudDocsContentPersonas";
+import { Collection } from "../../components";
+import { ListCrudDocsContentEmpresas } from "./ListCrudDocsContentEmpresas";
+export const ListCrudDocs = () => {
+    const { listarPaginados, eliminar, editar, agregar } = personaService;
+    const { listarPaginados: listarPaginadosEmpresa } = empresaService;
+    const { setNavBarLeftNode } = useAppLayout();
+    useEffect(() => {
+        setNavBarLeftNode(_jsx("h3", { className: "text-2xl font-semibold", children: "ListCrudContext" }));
+        return () => {
+            setNavBarLeftNode(_jsx(_Fragment, {}));
+        };
+    }, [setNavBarLeftNode]);
+    return (_jsxs(Collection, { children: [_jsx(ListCrudProvider, { getPromise: listarPaginados, postPromise: {
+                    execute: (persona) => agregar(persona),
+                    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(ListCrudProvider, { getPromise: listarPaginadosEmpresa, urlParams: ["filtroEmpresa", "idEmpresaEmpresa"], children: _jsx(ListCrudDocsContentEmpresas, {}) })] }));
+};

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,+CAgBvC,CAAC"}

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card, Collection } from "../../components";
+import { useListCrud } from "../../contexts";
+export const ListCrudDocsContentEmpresas = () => {
+    const { list } = useListCrud();
+    return (_jsx(Card, { className: "bg-gray-50", title: "Empresas", 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 }, empresa.id))) }) }));
+};

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

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

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

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

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

@@ -0,0 +1,57 @@
+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, 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 } = useListCrud();
+    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 && (_jsx(Dialog, { isOpen: isOpenDeleteDialog, title: "Eliminar Persona", onClose: () => setIsOpenDeleteDialog(false), dialogBody: _jsxs(_Fragment, { children: [_jsx("p", { children: "\u00BFEst\u00E1s seguro de querer eliminar esta persona?" }), _jsx(Loader, { isLoading: deleteItem.isLoading })] }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenDeleteDialog(false), disabled: deleteItem.isLoading, children: "Cancelar" }), _jsx(Button, { onClick: onDeletePersonaSubmit, disabled: deleteItem.isLoading, children: "Eliminar" })] }) })), 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,4CA4E7B,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 { useListCrud } from "../../contexts";
+export const ListCrudDocsEditDialog = ({ isOpen, onClose, persona, }) => {
+    const methods = useForm({
+        defaultValues: persona,
+    });
+    const { createItem, updateItem, fetchItems } = useListCrud();
+    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", dialogBody: _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 })] }) }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: onClose, children: "Cancelar" }), _jsx(Button, { onClick: handleSubmit(onSubmit), children: "Guardar" })] }) }) }));
+};

package/dist/docs/PaginationDocs.js

@@ -27,12 +27,12 @@ const PaginationDocs = () => {
         pages: 5,
         total: 50,
     };
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Pagination - Navegaci\u00F3n de P\u00E1ginas", 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 Pagination permite navegar entre p\u00E1ginas de resultados. Modifica autom\u00E1ticamente el query parameter en la URL para mantener el estado de navegaci\u00F3n." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: mockData.page, pages: mockData.pages, total: mockData.total }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con nombre de campo personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el nombre del query parameter usando la prop", " ", _jsx("code", { children: "fieldName" }), ". Por defecto es \"p\u00E1gina\"."] }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { fieldName: "page", page: customPage, pages: 10, total: 100 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Primera p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los botones de navegaci\u00F3n anterior y primera p\u00E1gina se deshabilitan autom\u00E1ticamente cuando est\u00E1s en la primera p\u00E1gina." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 1, pages: 5, total: 50 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00DAltima p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los botones de navegaci\u00F3n siguiente y \u00FAltima p\u00E1gina se deshabilitan autom\u00E1ticamente cuando est\u00E1s en la \u00FAltima p\u00E1gina." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 5, pages: 5, total: 50 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Una sola p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Cuando solo hay una p\u00E1gina, todos los botones de navegaci\u00F3n se deshabilitan autom\u00E1ticamente." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 1, pages: 1, total: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Interfaz PaginationInterface" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La interfaz ", _jsx("code", { children: "PaginationInterface<T>" }), " define la estructura de datos para informaci\u00F3n de paginaci\u00F3n:"] }), _jsx("div", { className: "p-4 rounded-sm bg-[var(--color-bg-secondary)]", style: { fontFamily: "monospace", fontSize: "0.875rem" }, children: _jsx("pre", { style: { color: "var(--color-text-primary)" }, children: `export interface PaginationInterface<T> {
-  list: Array<T>;
-  limit: number;
-  page: number;
-  pages: number;
-  total: number;
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Pagination - Navegaci\u00F3n de P\u00E1ginas", 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 Pagination permite navegar entre p\u00E1ginas de resultados. Modifica autom\u00E1ticamente el query parameter en la URL para mantener el estado de navegaci\u00F3n." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: mockData.page, pages: mockData.pages, total: mockData.total }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con nombre de campo personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el nombre del query parameter usando la prop", " ", _jsx("code", { children: "fieldName" }), ". Por defecto es \"p\u00E1gina\"."] }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { fieldName: "page", page: customPage, pages: 10, total: 100 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Primera p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los botones de navegaci\u00F3n anterior y primera p\u00E1gina se deshabilitan autom\u00E1ticamente cuando est\u00E1s en la primera p\u00E1gina." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 1, pages: 5, total: 50 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00DAltima p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los botones de navegaci\u00F3n siguiente y \u00FAltima p\u00E1gina se deshabilitan autom\u00E1ticamente cuando est\u00E1s en la \u00FAltima p\u00E1gina." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 5, pages: 5, total: 50 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Una sola p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Cuando solo hay una p\u00E1gina, todos los botones de navegaci\u00F3n se deshabilitan autom\u00E1ticamente." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 1, pages: 1, total: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Interfaz PaginationInterface" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La interfaz ", _jsx("code", { children: "PaginationInterface<T>" }), " define la estructura de datos para informaci\u00F3n de paginaci\u00F3n:"] }), _jsx("div", { className: "p-4 rounded-sm bg-[var(--color-bg-secondary)]", style: { fontFamily: "monospace", fontSize: "0.875rem" }, children: _jsx("pre", { style: { color: "var(--color-text-primary)" }, children: `export interface PaginationInterface<T> {
+  list: Array<T>;
+  limit: number;
+  page: number;
+  pages: number;
+  total: number;
 }` }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props del componente" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "fieldName?: string" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Nombre del query parameter que se usar\u00E1 para la p\u00E1gina. Por defecto es \"pagina\"." })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "page?: number" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "N\u00FAmero de p\u00E1gina actual. Por defecto es 1." })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "pages?: number" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "N\u00FAmero total de p\u00E1ginas. Por defecto es 1." })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "total?: number" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "N\u00FAmero total de elementos. Por defecto es 0." })] })] })] })] }) }) }));
 };
 export default PaginationDocs;

package/dist/docs/RadioButtonGroupDocs.d.ts

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

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

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