flysoft-react-ui 0.3.1 → 0.3.2

package/dist/docs/AutocompleteInputDocs.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card, AutocompleteInput, Button, Input } from "../index";
+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",
+    },
+];
+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",
+    },
+];
+const AutocompleteInputDocs = () => {
+    const [selectedCountry, setSelectedCountry] = React.useState();
+    const [value, setValue] = React.useState("");
+    const [selectedUser, setSelectedUser] = React.useState();
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "AutocompleteInput - B\u00FAsqueda y selecci\u00F3n de opciones", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Pa\u00EDs", placeholder: "Escribe para buscar...", icon: "fa-globe", options: sampleOptions, onSelectOption: (option) => setSelectedCountry(option) }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "escribe para filtrar la lista de opciones y selecciona con el mouse o con Enter" })] }), _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()})`
+                                                        : "Ningún país seleccionado" }) })] })] })] }), _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(AutocompleteInput, { label: "Autocomplete no controlado", placeholder: "Escribe para buscar...", icon: "fa-search", options: sampleOptions }), _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(AutocompleteInput, { label: "Autocomplete controlado", placeholder: "Escribe para buscar...", icon: "fa-search", options: sampleOptions, value: value, onChange: setValue }), _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: value, readOnly: true, icon: "fa-code" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Personalizaci\u00F3n y estados" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Sin resultados", placeholder: "Escribe algo que no exista", icon: "fa-question-circle", options: sampleOptions, noResultsText: "No encontramos coincidencias" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "el mensaje se muestra cuando no hay coincidencias al filtrar" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(AutocompleteInput, { label: "Deshabilitado", placeholder: "No editable", icon: "fa-ban", options: sampleOptions, disabled: true }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado disabled heredado del componente Input" })] })] })] }), _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(AutocompleteInput, { label: "Buscar usuario", placeholder: "Escribe nombre o email...", icon: "fa-users", options: users, 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 AutocompleteInput", subtitle: "Combinaci\u00F3n de AutocompleteInput, Input y Button", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Limpiar" }), _jsx(Button, { variant: "primary", icon: "fa-search", children: "Buscar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(AutocompleteInput, { label: "Pa\u00EDs de residencia", placeholder: "Selecciona un pa\u00EDs", icon: "fa-flag", options: sampleOptions }), _jsx(Input, { label: "Ciudad", placeholder: "Introduce tu ciudad", icon: "fa-city" })] }) })] })] }) }) }));
+};
+export default AutocompleteInputDocs;

package/dist/docs/DateInputDocs.d.ts

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

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

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

package/dist/docs/DateInputDocs.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card, DateInput, Button, Input, DatePicker } from "../index";
+const DateInputDocs = () => {
+    const [date1, setDate1] = React.useState(new Date());
+    const [date2, setDate2] = React.useState(null);
+    const [format, setFormat] = React.useState("dd/mm/yyyy");
+    const formatDate = (date) => {
+        if (!date)
+            return "Sin fecha seleccionada";
+        return date.toLocaleDateString("es-ES", {
+            day: "2-digit",
+            month: "long",
+            year: "numeric",
+        });
+    };
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DateInput - Input de fecha con calendario", 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 (dd/mm/yyyy)" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha de nacimiento", value: date1, onChange: setDate1, format: "dd/mm/yyyy", icon: "fa-calendar-alt" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "puedes escribir la fecha manualmente (dd/mm/yyyy) o elegirla desde el calendario" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(date1) }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Soporte de formatos (dd/mm/yyyy y mm/dd/yyyy)" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { size: "sm", variant: format === "dd/mm/yyyy" ? "primary" : "outline", onClick: () => setFormat("dd/mm/yyyy"), children: "dd/mm/yyyy" }), _jsx(Button, { size: "sm", variant: format === "mm/dd/yyyy" ? "primary" : "outline", onClick: () => setFormat("mm/dd/yyyy"), children: "mm/dd/yyyy" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha con formato din\u00E1mico", value: date2, onChange: setDate2, format: format, icon: "fa-calendar-day" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "cambia el formato y escribe la fecha usando el mismo patr\u00F3n" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(date2) }) })] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Integraci\u00F3n con DatePicker" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Fecha de reserva", value: date1, onChange: setDate1, format: "dd/mm/yyyy", datePickerProps: {
+                                                    startWeekOn: "monday",
+                                                } }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "puedes pasar props al DatePicker interno mediante la prop datePickerProps" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "DatePicker independiente" }), _jsx(DatePicker, { value: date1 ?? undefined, onChange: setDate1, startWeekOn: "monday" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados y personalizaci\u00F3n" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Solo lectura", value: new Date(), readOnly: true, icon: "fa-lock" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado readOnly del Input subyacente" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(DateInput, { label: "Deshabilitado", value: new Date(), disabled: true, icon: "fa-ban" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "respeta el estado disabled y evita abrir el calendario" })] })] })] }), _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 reserva", subtitle: "Combinaci\u00F3n de DateInput, Input y Button", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-check", children: "Confirmar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Nombre completo", icon: "fa-user" }), _jsx(DateInput, { label: "Fecha de entrada", value: date1, onChange: setDate1, format: "dd/mm/yyyy", icon: "fa-calendar-check" }), _jsx(DateInput, { label: "Fecha de salida", value: date2, onChange: setDate2, format: "dd/mm/yyyy", icon: "fa-calendar-minus" })] }) })] })] }) }) }));
+};
+export default DateInputDocs;

package/dist/docs/DatePickerDocs.d.ts

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

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

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

package/dist/docs/DatePickerDocs.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card, DatePicker, Button } from "../index";
+const DatePickerDocs = () => {
+    const [selectedDate, setSelectedDate] = React.useState(null);
+    const [anotherDate, setAnotherDate] = React.useState(new Date());
+    const formatDate = (date) => {
+        if (!date)
+            return "Sin fecha seleccionada";
+        return date.toLocaleDateString("es-ES", {
+            day: "2-digit",
+            month: "long",
+            year: "numeric",
+        });
+    };
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DatePicker - Selector de fecha con calendario", 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 items-start", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(DatePicker, { value: selectedDate ?? undefined, onChange: setSelectedDate }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "selector de fecha sin input, solo calendario" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Fecha seleccionada" }), _jsx(Card, { variant: "outlined", children: _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(selectedDate) }) })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Navegaci\u00F3n por meses y a\u00F1os" }), _jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Usa los botones con flechas para cambiar de mes o de a\u00F1o. El d\u00EDa actual se resalta con un borde, y el d\u00EDa seleccionado se marca con el color primario." }), _jsx(DatePicker, { value: anotherDate ?? undefined, onChange: setAnotherDate, startWeekOn: "monday" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: formatDate(anotherDate) }), _jsx(Button, { size: "sm", variant: "outline", icon: "fa-calendar-day", onClick: () => setAnotherDate(new Date()), children: "Ir a hoy" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Inicio de semana configurable" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Semana comenzando en lunes (default)" }), _jsx(DatePicker, { startWeekOn: "monday" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm font-medium", style: { color: "var(--flysoft-text-primary)" }, children: "Semana comenzando en domingo" }), _jsx(DatePicker, { startWeekOn: "sunday" })] })] })] })] }) }) }));
+};
+export default DatePickerDocs;

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

@@ -1 +1 @@
-{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CA4BpB,CAAC"}
+{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAqCpB,CAAC"}

package/dist/docs/DocsMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Link } from "react-router-dom";
 export const DocsMenu = () => {
-    return (_jsx(_Fragment, { children: _jsxs("ul", { children: [_jsx("li", { children: _jsx(Link, { to: "/docs/button", children: "Button" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/badge", children: "Badge" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/card", children: "Card" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/input", children: "Input" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/theme", children: "ThemeSwitcher" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datafield", children: "DataField" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/auth", children: "AuthContext" }) })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("ul", { children: [_jsx("li", { children: _jsx(Link, { to: "/docs/button", children: "Button" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/badge", children: "Badge" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/card", children: "Card" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/input", children: "Input" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/autocomplete-input", children: "AutocompleteInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datepicker", children: "DatePicker" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dateinput", children: "DateInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/theme", children: "ThemeSwitcher" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datafield", children: "DataField" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/auth", children: "AuthContext" }) })] }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAa9B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAgB9B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/DocsRouter.js

@@ -7,8 +7,11 @@ import InputDocs from "./InputDocs";
 import ThemeSwitcherDocs from "./ThemeSwitcherDocs";
 import BadgeDocs from "./BadgeDocs";
 import DataFieldDocs from "./DataFieldDocs";
+import AutocompleteInputDocs from "./AutocompleteInputDocs";
+import DatePickerDocs from "./DatePickerDocs";
+import DateInputDocs from "./DateInputDocs";
 import { AuthDocs } from "./AuthDocs.tsx/AuthDocs";
 export const DocsRouter = () => {
-    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) })] }));
+    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "autocomplete-input", element: _jsx(AutocompleteInputDocs, {}) }), _jsx(Route, { path: "datepicker", element: _jsx(DatePickerDocs, {}) }), _jsx(Route, { path: "dateinput", element: _jsx(DateInputDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) })] }));
 };
 export default DocsRouter;

package/dist/hooks/useElementScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useElementScroll.d.ts","sourceRoot":"","sources":["../../src/hooks/useElementScroll.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,GAC3B,YAAY,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;;;CA6ChD,CAAC"}
+{"version":3,"file":"useElementScroll.d.ts","sourceRoot":"","sources":["../../src/hooks/useElementScroll.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,GAC3B,YAAY,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;;;CAuEhD,CAAC"}

package/dist/hooks/useElementScroll.js

@@ -8,27 +8,49 @@ export const useElementScroll = (elementRef) => {
         const element = elementRef.current;
         let lastScrollY = element.scrollTop;
         let lastDirection = null;
+        let rafId = null;
+        let pendingScrollY = element.scrollTop;
         const handleScroll = () => {
-            const currentScrollY = element.scrollTop;
-            const delta = currentScrollY - lastScrollY;
-            let newDirection = lastDirection;
-            if (delta > 4 && currentScrollY > 10) {
-                newDirection = "down";
+            pendingScrollY = element.scrollTop;
+            // Usar requestAnimationFrame para agrupar actualizaciones y evitar temblores
+            if (rafId === null) {
+                rafId = requestAnimationFrame(() => {
+                    rafId = null;
+                    const currentScrollY = pendingScrollY;
+                    const delta = currentScrollY - lastScrollY;
+                    // Verificar si estamos cerca del final (margen de 5px)
+                    const isNearBottom = Math.abs(element.scrollHeight - element.clientHeight - currentScrollY) < 5;
+                    let newDirection = lastDirection;
+                    // Si estamos cerca del final y el delta es muy pequeño, mantener la dirección actual
+                    if (isNearBottom && Math.abs(delta) < 2) {
+                        // Mantener la dirección actual, no cambiar
+                    }
+                    else if (delta > 4 && currentScrollY > 10) {
+                        newDirection = "down";
+                    }
+                    else if (delta < -4 && currentScrollY > 0) {
+                        newDirection = "up";
+                    }
+                    else if (Math.abs(delta) < 2) {
+                        // Cambios muy pequeños, mantener la dirección actual
+                        newDirection = lastDirection;
+                    }
+                    setScrollY(currentScrollY);
+                    // Solo actualizar la dirección si cambió realmente
+                    if (newDirection !== lastDirection) {
+                        setScrollDirection(newDirection);
+                        lastDirection = newDirection;
+                    }
+                    lastScrollY = currentScrollY;
+                });
             }
-            else if (delta < -4 && currentScrollY > 0) {
-                newDirection = "up";
-            }
-            setScrollY(currentScrollY);
-            // Solo actualizar la dirección si cambió
-            if (newDirection !== lastDirection) {
-                setScrollDirection(newDirection);
-                lastDirection = newDirection;
-            }
-            lastScrollY = currentScrollY;
         };
         // Agregar el listener al elemento
         element.addEventListener("scroll", handleScroll, { passive: true });
         return () => {
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+            }
             element.removeEventListener("scroll", handleScroll);
         };
     }, [elementRef]);