flysoft-react-ui 0.5.0 → 0.5.3

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

package/dist/docs/SnackbarDocs.js

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

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

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

package/dist/docs/TabsGroupDocs.js

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