flysoft-react-ui 0.4.0 → 0.5.2

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, 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";
+/**
+ * Componente de Documentación del ListCrudContext
+ *
+ * Este componente muestra cómo usar el ListCrudContext con un servicio mock
+ * para propósitos de documentación y desarrollo.
+ *
+ * El servicio mock simula la operación principal:
+ * - getPromise: Obtiene una lista de items (Array o PaginationInterface)
+ */
+export const ListCrudDocs = () => {
+    const { listarPaginados, eliminar } = personaService;
+    const { listarPaginados: listarPaginadosEmpresa } = empresaService;
+    const { setNavBarLeftNode } = useAppLayout();
+    useEffect(() => {
+        setNavBarLeftNode(_jsx("h3", { className: "text-2xl font-semibold", children: "ListCrudContext" }));
+    }, [setNavBarLeftNode]);
+    return (_jsxs(Collection, { children: [_jsx(ListCrudProvider, { getPromise: listarPaginados, deletePromise: eliminar, urlParams: ["filtro", "idEmpresa"], children: _jsx(ListCrudDocsContentPersonas, {}) }), _jsx(ListCrudProvider, { getPromise: listarPaginadosEmpresa, urlParams: ["filtroEmpresa", "idEmpresaEmpresa"], children: "Empresas" })] }));
+};

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":"AAcA,eAAO,MAAM,2BAA2B,+CAsHvC,CAAC"}

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

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

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"}

package/dist/docs/RadioButtonGroupDocs.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Card, RadioButtonGroup, Button } from "../index";
+import { useForm, FormProvider } from "react-hook-form";
+const FormExample = () => {
+    const methods = useForm({
+        defaultValues: {
+            gender: "male",
+            preferences: "notifications",
+        },
+    });
+    const { handleSubmit, watch, register, formState: { errors }, } = methods;
+    const onSubmit = () => {
+        console.log(watch());
+    };
+    return (_jsx(FormProvider, { ...methods, children: _jsx(Card, { title: "Formulario con RadioButtonGroup", subtitle: "Ejemplo pr\u00E1ctico de uso de RadioButtonGroup en un formulario con react-hook-form", children: _jsxs("form", { onSubmit: handleSubmit(onSubmit), children: [_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm text-[var(--color-primary)] mb-1 font-[var(--font-default)]", children: "G\u00E9nero" }), _jsx(RadioButtonGroup, { options: [
+                                            { label: "Masculino", value: "male" },
+                                            { label: "Femenino", value: "female" },
+                                            { label: "Otro", value: "other" },
+                                        ], ...register("gender", {
+                                            required: "El género es obligatorio",
+                                        }), error: errors.gender?.message })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm text-[var(--color-primary)] mb-1 font-[var(--font-default)]", children: "Preferencias" }), _jsx(RadioButtonGroup, { options: [
+                                            { label: "Notificaciones", value: "notifications" },
+                                            { label: "Email", value: "email" },
+                                            { label: "SMS", value: "sms" },
+                                        ], ...register("preferences", {
+                                            required: "Las preferencias son obligatorias",
+                                        }), error: errors.preferences?.message, direction: "horizontal" })] })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", type: "button", children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-check", type: "submit", children: "Enviar" })] })] }) }) }));
+};
+const RadioButtonGroupDocs = () => {
+    const [selectedValue1, setSelectedValue1] = useState("option1");
+    const basicOptions = [
+        { label: "Opción 1", value: "option1" },
+        { label: "Opción 2", value: "option2" },
+        { label: "Opción 3", value: "option3" },
+    ];
+    const optionsWithNumbers = [
+        { label: "Uno", value: 1 },
+        { label: "Dos", value: 2 },
+        { label: "Tres", value: 3 },
+    ];
+    // Crear un FormProvider mínimo para los ejemplos en modo controlado
+    const controlMethods = useForm();
+    return (_jsx(FormProvider, { ...controlMethods, children: _jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "RadioButtonGroup - 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 con options" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "basic-group" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "grupo de radio buttons con options, label a la derecha (por defecto)" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "basic-group-left", labelPosition: "left" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "grupo con labels a la izquierda" })] })] })] }), _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(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "size-sm", size: "sm" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o compacto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "size-md", size: "md" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o por defecto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "size-lg", size: "lg" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o amplio" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Direcci\u00F3n del layout" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "direction-vertical", direction: "vertical" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "direcci\u00F3n vertical (por defecto)" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "direction-horizontal", direction: "horizontal" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "direcci\u00F3n horizontal" })] })] })] }), _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(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "error-group", error: "Debes seleccionar una opci\u00F3n" }), _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(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "disabled-group", disabled: true }), _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: "Valores num\u00E9ricos" }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: optionsWithNumbers, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "numeric-group" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "soporta valores num\u00E9ricos adem\u00E1s de strings" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Espaciado personalizado" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "gap-sm", gap: "sm" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "espaciado peque\u00F1o" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "gap-md", gap: "md" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "espaciado mediano (por defecto)" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(RadioButtonGroup, { options: basicOptions, value: selectedValue1, onChange: (value) => setSelectedValue1(value), name: "gap-lg", gap: "lg" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "espaciado grande" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo de uso" }), _jsx(FormExample, {})] })] }) }) }) }));
+};
+export default RadioButtonGroupDocs;

package/dist/docs/RoadMapDocs.d.ts

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

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

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

package/dist/docs/RoadMapDocs.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { RoadMap, Card } from "../index";
+const RoadMapDocs = () => {
+    const basicStages = [
+        { name: "Inicio", variant: "primary" },
+        { name: "Progreso", variant: "success" },
+        { name: "Finalización", variant: "info" },
+    ];
+    const stagesWithDescriptions = [
+        {
+            name: "Planificación",
+            description: "Definir requisitos y alcance del proyecto",
+            variant: "primary",
+        },
+        {
+            name: "Desarrollo",
+            description: "Construir las funcionalidades principales",
+            variant: "success",
+        },
+        {
+            name: "Pruebas",
+            description: "Realizar testing completo del sistema",
+            variant: "warning",
+        },
+        {
+            name: "Lanzamiento",
+            description: "Publicar y desplegar la aplicación",
+            variant: "info",
+        },
+    ];
+    const stagesWithIcons = [
+        {
+            name: "Análisis",
+            description: "Analizar requerimientos",
+            icon: "fa-search",
+            variant: "primary",
+        },
+        {
+            name: "Diseño",
+            description: "Crear el diseño de la solución",
+            icon: "fa-pencil-alt",
+            variant: "secondary",
+        },
+        {
+            name: "Implementación",
+            description: "Desarrollar la solución",
+            icon: "fa-code",
+            variant: "success",
+        },
+        {
+            name: "Despliegue",
+            description: "Publicar en producción",
+            icon: "fa-rocket",
+            variant: "info",
+        },
+    ];
+    const disabledStages = [
+        {
+            name: "Completado",
+            description: "Esta etapa ya está finalizada",
+            icon: "fa-check-circle",
+            variant: "success",
+        },
+        {
+            name: "En Progreso",
+            description: "Trabajando actualmente en esta etapa",
+            icon: "fa-spinner",
+            variant: "primary",
+        },
+        {
+            name: "Pendiente",
+            description: "Esta etapa aún no ha comenzado",
+            icon: "fa-clock",
+            variant: "warning",
+            disabled: true,
+        },
+        {
+            name: "Bloqueado",
+            description: "Esta etapa está bloqueada",
+            icon: "fa-lock",
+            variant: "danger",
+            disabled: true,
+        },
+    ];
+    const customColorStages = [
+        {
+            name: "Etapa 1",
+            description: "Con color personalizado",
+            icon: "fa-star",
+            bg: "#8b5cf6",
+        },
+        {
+            name: "Etapa 2",
+            description: "Otro color personalizado",
+            icon: "fa-heart",
+            bg: "#ec4899",
+        },
+        {
+            name: "Etapa 3",
+            description: "Verde personalizado",
+            icon: "fa-leaf",
+            bg: "#10b981",
+        },
+    ];
+    const allVariantsStages = [
+        {
+            name: "Primary",
+            description: "Variante primaria",
+            variant: "primary",
+        },
+        {
+            name: "Secondary",
+            description: "Variante secundaria",
+            variant: "secondary",
+        },
+        {
+            name: "Success",
+            description: "Variante de éxito",
+            variant: "success",
+        },
+        {
+            name: "Warning",
+            description: "Variante de advertencia",
+            variant: "warning",
+        },
+        {
+            name: "Danger",
+            description: "Variante de peligro",
+            variant: "danger",
+        },
+        {
+            name: "Info",
+            description: "Variante informativa",
+            variant: "info",
+        },
+    ];
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "RoadMap - Etapas y Progreso", 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(RoadMap, { stages: basicStages }), _jsx("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente RoadMap muestra una serie de etapas conectadas con l\u00EDneas. Cada etapa tiene un c\u00EDrculo con el color seg\u00FAn su variante." })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con Descripciones" }), _jsx(RoadMap, { stages: stagesWithDescriptions }), _jsx("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes agregar descripciones a cada etapa que se mostrar\u00E1n debajo del nombre en un texto m\u00E1s peque\u00F1o." })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con \u00CDconos" }), _jsx(RoadMap, { stages: stagesWithIcons }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cada etapa puede tener un \u00EDcono FontAwesome 5 que se mostrar\u00E1 dentro del c\u00EDrculo. Usa clases como ", _jsx("code", { children: "fa-check" }), ",", " ", _jsx("code", { children: "fa-code" }), ", etc."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Etapas Deshabilitadas" }), _jsx(RoadMap, { stages: disabledStages }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Las etapas con ", _jsx("code", { children: "disabled: true" }), " se muestran con una opacidad de 0.5, tanto el c\u00EDrculo como el texto (nombre y descripci\u00F3n)."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Colores Personalizados" }), _jsx(RoadMap, { stages: customColorStages }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes usar la propiedad ", _jsx("code", { children: "bg" }), " para definir un color de fondo personalizado (hexadecimal, rgb, o nombre de color). Esto tiene prioridad sobre la variante."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Todas las Variantes" }), _jsx(RoadMap, { stages: allVariantsStages }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Las variantes disponibles son: ", _jsx("code", { children: "primary" }), ",", " ", _jsx("code", { children: "secondary" }), ", ", _jsx("code", { children: "success" }), ", ", _jsx("code", { children: "warning" }), ", ", _jsx("code", { children: "danger" }), ", e ", _jsx("code", { children: "info" }), ". Las l\u00EDneas conectadoras tienen un gradiente que combina 50% del color de la etapa origen y 50% del color de la etapa destino."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo Completo" }), _jsx(RoadMap, { stages: [
+                                    {
+                                        name: "Inicio del Proyecto",
+                                        description: "Kickoff y definición de objetivos",
+                                        icon: "fa-flag",
+                                        variant: "primary",
+                                    },
+                                    {
+                                        name: "Desarrollo",
+                                        description: "Implementación de funcionalidades",
+                                        icon: "fa-code",
+                                        variant: "success",
+                                    },
+                                    {
+                                        name: "Revisión",
+                                        description: "Code review y testing",
+                                        icon: "fa-eye",
+                                        variant: "warning",
+                                    },
+                                    {
+                                        name: "Despliegue",
+                                        description: "Publicación en producción",
+                                        icon: "fa-rocket",
+                                        variant: "info",
+                                    },
+                                    {
+                                        name: "Post-Lanzamiento",
+                                        description: "Monitoreo y mejoras continuas",
+                                        icon: "fa-chart-line",
+                                        variant: "secondary",
+                                    },
+                                ] }), _jsx("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo completo combinando todas las caracter\u00EDsticas: variantes, \u00EDconos y descripciones." })] })] }) }) }));
+};
+export default RoadMapDocs;

package/dist/docs/SearchSelectInputDocs.d.ts

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

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

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

package/dist/docs/SearchSelectInputDocs.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card, SearchSelectInput, Button, Input, DateInput } from "../index";
+import { useForm } from "react-hook-form";
+const sampleOptions = [
+    {
+        label: "España",
+        value: "es",
+        icon: "fa-flag",
+        description: "Madrid",
+    },
+    {
+        label: "Estados Unidos",
+        value: "us",
+        icon: "fa-flag",
+        description: "Washington D.C.",
+    },
+    {
+        label: "México",
+        value: "mx",
+        icon: "fa-flag",
+        description: "Ciudad de México",
+    },
+    {
+        label: "Argentina",
+        value: "ar",
+        icon: "fa-flag",
+        description: "Buenos Aires",
+    },
+    {
+        label: "Chile",
+        value: "cl",
+        icon: "fa-flag",
+        description: "Santiago",
+    },
+    {
+        label: "Colombia",
+        value: "co",
+        icon: "fa-flag",
+        description: "Bogotá",
+    },
+];
+const users = [
+    {
+        id: 1,
+        firstName: "Juan",
+        lastName: "Pérez",
+        email: "juan.perez@empresa.com",
+        role: "Desarrollador",
+        department: "Tecnología",
+    },
+    {
+        id: 2,
+        firstName: "María",
+        lastName: "García",
+        email: "maria.garcia@empresa.com",
+        role: "Diseñadora",
+        department: "Diseño",
+    },
+    {
+        id: 3,
+        firstName: "Carlos",
+        lastName: "Rodríguez",
+        email: "carlos.rodriguez@empresa.com",
+        role: "Gerente",
+        department: "Ventas",
+    },
+    {
+        id: 4,
+        firstName: "Ana",
+        lastName: "Martínez",
+        email: "ana.martinez@empresa.com",
+        role: "Analista",
+        department: "Marketing",
+    },
+    {
+        id: 5,
+        firstName: "Luis",
+        lastName: "Fernández",
+        email: "luis.fernandez@empresa.com",
+        role: "Desarrollador",
+        department: "Tecnología",
+    },
+];
+// Simular búsqueda asíncrona
+const mockSearchPromise = async (text) => {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    const search = text.toLowerCase();
+    return sampleOptions.filter((option) => option.label.toLowerCase().includes(search) ||
+        (option.value && option.value.toLowerCase().includes(search)) ||
+        (option.description &&
+            String(option.description).toLowerCase().includes(search)));
+};
+// Simular búsqueda de un elemento individual por valor
+const mockSingleSearchPromise = async (value) => {
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    return sampleOptions.find((option) => option.value === value);
+};
+// Simular búsqueda con PaginationInterface
+const mockSearchWithPagination = async (text) => {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    const search = text.toLowerCase();
+    const filtered = sampleOptions.filter((option) => option.label.toLowerCase().includes(search) ||
+        (option.value && option.value.toLowerCase().includes(search)) ||
+        (option.description &&
+            String(option.description).toLowerCase().includes(search)));
+    return {
+        list: filtered,
+        limit: 10,
+        page: 1,
+        pages: 1,
+        total: filtered.length,
+    };
+};
+// Simular búsqueda de usuarios
+const mockUserSearch = async (text) => {
+    await new Promise((resolve) => setTimeout(resolve, 600));
+    const search = text.toLowerCase();
+    return users.filter((user) => user.firstName.toLowerCase().includes(search) ||
+        user.lastName.toLowerCase().includes(search) ||
+        user.email.toLowerCase().includes(search) ||
+        user.role.toLowerCase().includes(search));
+};
+// Simular búsqueda de un usuario individual por ID
+const mockSingleUserSearch = async (userId) => {
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    return users.find((user) => user.id === userId);
+};
+const SearchSelectInputDocs = () => {
+    const [selectedCountry, setSelectedCountry] = React.useState();
+    const [internalValue, setInternalValue] = React.useState("");
+    const [selectedUser, setSelectedUser] = React.useState();
+    const { register, handleSubmit, reset, setFocus, formState: { errors, isSubmitted }, watch, } = useForm();
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+    // Enfocar el primer campo con error después de un submit fallido
+    React.useEffect(() => {
+        if (isSubmitted && Object.keys(errors).length > 0) {
+            // Usar setTimeout para asegurar que se ejecute después del render
+            const timer = setTimeout(() => {
+                if (errors.country) {
+                    setFocus("country");
+                }
+                else if (errors.birthDate) {
+                    setFocus("birthDate");
+                }
+                else if (errors.city) {
+                    setFocus("city");
+                }
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [errors, isSubmitted, setFocus]);
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "SearchSelectInput - B\u00FAsqueda as\u00EDncrona y selecci\u00F3n en Dialog", 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(SearchSelectInput, { label: "Buscar pa\u00EDs", placeholder: "Escribe y presiona Enter o click en buscar...", icon: "fa-globe", onSearchPromiseFn: mockSearchPromise, onSingleSearchPromiseFn: mockSingleSearchPromise, onSelectOption: (option) => setSelectedCountry(option) }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Escribe el texto, presiona Enter o haz click en el bot\u00F3n de b\u00FAsqueda para abrir el dialog con los resultados" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Selecci\u00F3n actual" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: selectedCountry
+                                                        ? `${selectedCountry.label} (${selectedCountry.value?.toUpperCase() ?? "N/A"})`
+                                                        : "Ningún país seleccionado" }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Posici\u00F3n del bot\u00F3n de b\u00FAsqueda" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(SearchSelectInput, { label: "Bot\u00F3n a la derecha (por defecto)", placeholder: "Escribe y busca...", icon: "fa-search", onSearchPromiseFn: mockSearchPromise, onSingleSearchPromiseFn: mockSingleSearchPromise }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "searchButtonPosition=\"right\" (valor por defecto)" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(SearchSelectInput, { label: "Bot\u00F3n a la izquierda", placeholder: "Escribe y busca...", icon: "fa-search", iconPosition: "left", onSearchPromiseFn: mockSearchPromise, onSingleSearchPromiseFn: mockSingleSearchPromise }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "searchButtonPosition=\"left\"" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Controlado vs no controlado" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(SearchSelectInput, { label: "SearchSelectInput no controlado", placeholder: "Escribe y busca...", icon: "fa-search", onSearchPromiseFn: mockSearchPromise, onSingleSearchPromiseFn: mockSingleSearchPromise }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "sin prop value: el componente maneja internamente el valor del input" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(SearchSelectInput, { label: "SearchSelectInput controlado", placeholder: "Escribe y busca...", icon: "fa-search", value: internalValue, getOptionValue: (option) => option.value ?? "", onChange: (val) => {
+                                                    if (typeof val === "string") {
+                                                        setInternalValue(val);
+                                                    }
+                                                }, onSearchPromiseFn: mockSearchPromise, onSingleSearchPromiseFn: mockSingleSearchPromise }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "con value y onChange: el valor del input se controla desde el estado externo" }), _jsx(Input, { label: "Valor actual", value: internalValue, readOnly: true, icon: "fa-code" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con PaginationInterface" }), _jsxs("div", { className: "space-y-3", children: [_jsx(SearchSelectInput, { label: "B\u00FAsqueda con paginaci\u00F3n", placeholder: "Escribe y busca pa\u00EDses...", icon: "fa-globe", onSearchPromiseFn: mockSearchWithPagination, onSingleSearchPromiseFn: mockSingleSearchPromise, dialogTitle: "Seleccione un pa\u00EDs", onSelectOption: (option) => {
+                                            console.log("País seleccionado:", option);
+                                        } }), _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La funci\u00F3n onSearchPromiseFn puede devolver un", " ", _jsx("code", { children: "PaginationInterface<T>" }), ". El componente extraer\u00E1 autom\u00E1ticamente el array de la propiedad", " ", _jsx("code", { children: "list" }), "."] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Personalizaci\u00F3n del Dialog" }), _jsxs("div", { className: "space-y-3", children: [_jsx(SearchSelectInput, { label: "Dialog personalizado", placeholder: "Escribe y busca...", icon: "fa-search", dialogTitle: "Buscar y seleccionar un pa\u00EDs", noResultsText: "No se encontraron pa\u00EDses con ese criterio", onSearchPromiseFn: mockSearchPromise, onSingleSearchPromiseFn: mockSingleSearchPromise }), _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el t\u00EDtulo del dialog con", " ", _jsx("code", { children: "dialogTitle" }), " y el mensaje de sin resultados con", " ", _jsx("code", { children: "noResultsText" }), "."] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso gen\u00E9rico con renderOption personalizado" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(SearchSelectInput, { label: "Buscar usuario", placeholder: "Escribe nombre, email o rol...", icon: "fa-users", onSearchPromiseFn: mockUserSearch, onSingleSearchPromiseFn: mockSingleUserSearch, getOptionLabel: (user) => `${user.firstName} ${user.lastName}`, getOptionValue: (user) => user.id, getOptionDescription: (user) => user.email, onSelectOption: (user, userId) => {
+                                                    setSelectedUser(user);
+                                                    console.log("Usuario seleccionado:", user, "ID:", userId);
+                                                }, renderOption: (user) => (_jsxs("div", { className: "flex items-start gap-3 w-full", children: [_jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-[var(--color-primary-soft)] flex items-center justify-center", children: _jsx("i", { className: "fa fa-user text-[var(--color-primary)]" }) }), _jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [_jsxs("span", { className: "font-medium text-[var(--color-text-primary)]", children: [user.firstName, " ", user.lastName] }), _jsx("span", { className: "text-xs text-[var(--color-text-secondary)] truncate", children: user.email }), _jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx("span", { className: "text-xs px-2 py-0.5 rounded bg-[var(--color-bg-secondary)] text-[var(--color-text-secondary)]", children: user.role }), _jsxs("span", { className: "text-xs text-[var(--color-text-muted)]", children: ["\u2022 ", user.department] })] })] })] })) }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "usando getOptionLabel, getOptionValue y renderOption para personalizar completamente el renderizado de opciones sin propiedades label/value/description" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Usuario seleccionado" }), _jsx(Card, { variant: "outlined", children: selectedUser ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: [selectedUser.firstName, " ", selectedUser.lastName] }), _jsx("p", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: selectedUser.email }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs px-2 py-0.5 rounded bg-[var(--color-bg-secondary)]", style: { color: "var(--flysoft-text-secondary)" }, children: selectedUser.role }), _jsx("span", { className: "text-xs", style: { color: "var(--flysoft-text-muted)" }, children: selectedUser.department })] }), _jsxs("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-muted)" }, children: ["ID: ", selectedUser.id] })] })) : (_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ning\u00FAn usuario seleccionado" })) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo de formulario" }), _jsx(Card, { title: "Formulario de b\u00FAsqueda con SearchSelectInput", subtitle: "Combinaci\u00F3n de SearchSelectInput, DateInput, Input y Button", children: _jsxs("form", { className: "space-y-4", onSubmit: handleSubmit(onSubmit), children: [_jsx(SearchSelectInput, { label: "Pa\u00EDs de residencia", ...register("country"), placeholder: "Busca y selecciona un pa\u00EDs", getOptionLabel: (option) => option.label, getOptionValue: (option) => option.value ?? "", onSearchPromiseFn: mockSearchPromise, onSingleSearchPromiseFn: mockSingleSearchPromise, dialogTitle: "Seleccione un pa\u00EDs" }), _jsxs("div", { children: ["Pa\u00EDs de residencia: ", watch("country")?.toString()] }), _jsx(DateInput, { label: "Fecha de nacimiento", placeholder: "dd/mm/yyyy", ...register("birthDate") }), _jsx(Input, { label: "Ciudad", placeholder: "Introduce tu ciudad", icon: "fa-city", error: errors.city?.message }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", type: "submit", onClick: () => reset(), children: "Limpiar" }), _jsx(Button, { variant: "primary", icon: "fa-search", type: "submit", children: "Buscar" })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "space-y-4", children: [_jsx(SearchSelectInput, { label: "Tama\u00F1o peque\u00F1o", placeholder: "Escribe y busca...", size: "sm", onSearchPromiseFn: mockSearchPromise, onSingleSearchPromiseFn: mockSingleSearchPromise }), _jsx(SearchSelectInput, { label: "Tama\u00F1o mediano (por defecto)", placeholder: "Escribe y busca...", size: "md", onSearchPromiseFn: mockSearchPromise, onSingleSearchPromiseFn: mockSingleSearchPromise }), _jsx(SearchSelectInput, { label: "Tama\u00F1o grande", placeholder: "Escribe y busca...", size: "lg", onSearchPromiseFn: mockSearchPromise, onSingleSearchPromiseFn: mockSingleSearchPromise })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados y validaci\u00F3n" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(SearchSelectInput, { label: "Con error", placeholder: "Escribe y busca...", error: "Este campo es requerido", onSearchPromiseFn: mockSearchPromise, onSingleSearchPromiseFn: mockSingleSearchPromise }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado error heredado del componente Input" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(SearchSelectInput, { label: "Deshabilitado", placeholder: "No editable", icon: "fa-ban", disabled: true, onSearchPromiseFn: mockSearchPromise, onSingleSearchPromiseFn: mockSingleSearchPromise }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado disabled heredado del componente Input" })] })] })] })] }) }) }));
+};
+export default SearchSelectInputDocs;

package/dist/docs/SnackbarDocs.d.ts

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

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

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