flysoft-react-ui 0.3.0 → 0.3.2

package/dist/contexts/AuthContext.js

@@ -19,36 +19,111 @@ const storeAuth = (auth) => {
 const removeStoredAuth = () => {
     localStorage.removeItem("auth");
 };
+/**
+ * Verifica si un token ha expirado basándose en el string expires en formato ISO 8601
+ * @param expires - String de fecha en formato ISO 8601
+ * @returns true si el token ha expirado o si el formato es inválido, false si está vigente
+ */
+const isTokenExpired = (expires) => {
+    if (!expires) {
+        return true; // Si no hay fecha de expiración, consideramos que está expirado
+    }
+    try {
+        // Validar formato ISO 8601 básico (debe poder ser parseado por Date)
+        const expirationDate = new Date(expires);
+        // Verificar que la fecha sea válida
+        if (isNaN(expirationDate.getTime())) {
+            console.warn("Formato de fecha de expiración inválido:", expires);
+            return true;
+        }
+        // Comparar con la fecha actual (agregamos un margen de 1 minuto para evitar problemas de precisión)
+        const now = new Date();
+        const oneMinuteInMs = 60 * 1000;
+        return expirationDate.getTime() <= now.getTime() + oneMinuteInMs;
+    }
+    catch (error) {
+        console.error("Error al verificar expiración del token:", error);
+        return true; // En caso de error, considerar como expirado por seguridad
+    }
+};
+/**
+ * Valida que un usuario tenga un token vigente
+ * @param user - Objeto de usuario a validar
+ * @returns true si el usuario tiene un token válido y vigente, false en caso contrario
+ */
+const isUserTokenValid = (user) => {
+    if (!user || !user.id) {
+        return false;
+    }
+    if (!user.token) {
+        return false;
+    }
+    return !isTokenExpired(user.token.expires);
+};
 export const AuthProvider = ({ children, getToken, getUserData, removeToken, }) => {
     const [user, setUser] = useState(null);
     const [isAuthenticated, setIsAuthenticated] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     useEffect(() => {
         const auth = initAuth();
-        if (auth.id) {
+        // Verificar que el usuario tenga un token válido y vigente
+        if (isUserTokenValid(auth)) {
             setUser(auth);
             setIsAuthenticated(true);
         }
         else {
+            // Si el token está expirado o es inválido, limpiar el almacenamiento
+            if (auth.id && isTokenExpired(auth.token?.expires)) {
+                removeStoredAuth();
+            }
+            setUser(null);
             setIsAuthenticated(false);
         }
     }, []);
     const login = async (username, password) => {
         setIsLoading(true);
-        const token = await getToken(username, password);
-        if (token.accessToken) {
-            const { id, name, aditionalData } = await getUserData(token.accessToken);
-            const userData = {
-                id,
-                name,
-                aditionalData,
-                token,
-            };
-            setUser(userData);
-            storeAuth(userData);
-            setIsAuthenticated(true);
+        try {
+            const token = await getToken(username, password);
+            if (token.accessToken) {
+                // Verificar que el token recibido no esté expirado antes de continuar
+                if (isTokenExpired(token.expires)) {
+                    console.warn("El token recibido ya está expirado");
+                    setUser(null);
+                    setIsAuthenticated(false);
+                    setIsLoading(false);
+                    return;
+                }
+                const { id, name, aditionalData } = await getUserData(token.accessToken);
+                const userData = {
+                    id,
+                    name,
+                    aditionalData,
+                    token,
+                };
+                // Validar nuevamente antes de establecer el estado
+                if (isUserTokenValid(userData)) {
+                    setUser(userData);
+                    storeAuth(userData);
+                    setIsAuthenticated(true);
+                }
+                else {
+                    setUser(null);
+                    setIsAuthenticated(false);
+                }
+            }
+            else {
+                setUser(null);
+                setIsAuthenticated(false);
+            }
+        }
+        catch (error) {
+            console.error("Error durante el login:", error);
+            setUser(null);
+            setIsAuthenticated(false);
+        }
+        finally {
+            setIsLoading(false);
         }
-        setIsLoading(false);
     };
     const logout = async () => {
         removeStoredAuth();
@@ -58,5 +133,24 @@ export const AuthProvider = ({ children, getToken, getUserData, removeToken, })
         }
         setIsAuthenticated(false);
     };
+    // Validar el token periódicamente o cuando cambia el usuario
+    // Esto asegura que si el token expira durante la sesión, se actualice el estado
+    useEffect(() => {
+        if (user && user.token?.expires) {
+            const checkTokenExpiration = () => {
+                if (isTokenExpired(user.token?.expires)) {
+                    // Token expirado, cerrar sesión
+                    removeStoredAuth();
+                    setUser(null);
+                    setIsAuthenticated(false);
+                }
+            };
+            // Verificar inmediatamente
+            checkTokenExpiration();
+            // Verificar cada minuto para detectar expiraciones
+            const interval = setInterval(checkTokenExpiration, 60000);
+            return () => clearInterval(interval);
+        }
+    }, [user]);
     return (_jsx(AuthContext.Provider, { value: { user, isAuthenticated, isLoading, login, logout }, children: children }));
 };

package/dist/docs/AuthDocs.tsx/AuthDocs.d.ts

@@ -1,2 +1,13 @@
+/**
+ * Componente de Documentación del AuthContext
+ *
+ * Este componente muestra cómo usar el AuthContext con un servicio mock
+ * para propósitos de documentación y desarrollo.
+ *
+ * El servicio mock simula las tres operaciones principales:
+ * - getToken: Obtiene un token de acceso
+ * - getUserData: Obtiene los datos del usuario autenticado
+ * - removeToken: Revoca/invalida un token (opcional)
+ */
 export declare const AuthDocs: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AuthDocs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AuthDocs.d.ts","sourceRoot":"","sources":["../../../src/docs/AuthDocs.tsx/AuthDocs.tsx"],"names":[],"mappings":"AAkDA,eAAO,MAAM,QAAQ,+CAMpB,CAAC"}
+{"version":3,"file":"AuthDocs.d.ts","sourceRoot":"","sources":["../../../src/docs/AuthDocs.tsx/AuthDocs.tsx"],"names":[],"mappings":"AAQA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,+CAUpB,CAAC"}

package/dist/docs/AuthDocs.tsx/AuthDocs.js

@@ -1,37 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AuthProvider, } from "../../contexts/AuthContext";
-import { apiClient } from "../../services/apiClient";
+import { AuthProvider } from "../../contexts/AuthContext";
 import { AuthDocsContent } from "./AuthDocsContent";
-const getToken = async (username, password) => {
-    const { access_token, expires, token_type, refresh_token, } = await apiClient.post({
-        url: "https://devmanager.osocna.com.ar/backend/api/users/login",
-        body: {
-            username,
-            password,
-        },
-    });
-    return {
-        accessToken: access_token,
-        tokenType: token_type,
-        expires,
-        refreshToken: refresh_token,
-    };
-};
-const getUserData = async (token) => {
-    const { id, name } = await apiClient.get({
-        url: "https://devmanager.osocna.com.ar/backend/api/users/userdata",
-        headers: {
-            Authorization: `Bearer ${token}`,
-        },
-    });
-    return {
-        id,
-        name,
-        aditionalData: {
-            role: "admin",
-        },
-    };
-};
+import { mockGetToken, mockGetUserData, mockRemoveToken, } from "./mockAuthService";
+/**
+ * Componente de Documentación del AuthContext
+ *
+ * Este componente muestra cómo usar el AuthContext con un servicio mock
+ * para propósitos de documentación y desarrollo.
+ *
+ * El servicio mock simula las tres operaciones principales:
+ * - getToken: Obtiene un token de acceso
+ * - getUserData: Obtiene los datos del usuario autenticado
+ * - removeToken: Revoca/invalida un token (opcional)
+ */
 export const AuthDocs = () => {
-    return (_jsx(AuthProvider, { getToken: getToken, getUserData: getUserData, children: _jsx(AuthDocsContent, {}) }));
+    return (_jsx(AuthProvider, { getToken: mockGetToken, getUserData: mockGetUserData, removeToken: mockRemoveToken, children: _jsx(AuthDocsContent, {}) }));
 };

package/dist/docs/AuthDocs.tsx/AuthDocsContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuthDocsContent.d.ts","sourceRoot":"","sources":["../../../src/docs/AuthDocs.tsx/AuthDocsContent.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,+CA2B3B,CAAC"}
+{"version":3,"file":"AuthDocsContent.d.ts","sourceRoot":"","sources":["../../../src/docs/AuthDocs.tsx/AuthDocsContent.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,+CAmW3B,CAAC"}

package/dist/docs/AuthDocs.tsx/AuthDocsContent.js

@@ -1,14 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { AuthContext } from "../../contexts/AuthContext";
-import { Button } from "../../components";
+import { Button, Card, DataField, Badge } from "../../components";
 export const AuthDocsContent = () => {
     const { login, isAuthenticated, isLoading, user, logout } = useContext(AuthContext);
     const handleLogin = async () => {
-        await login("wursten.alexis@gmail.com", "Oscn1138");
+        await login("usuario@ejemplo.com", "password123");
     };
     const handleLogout = () => {
         logout();
     };
-    return isAuthenticated ? (_jsxs("div", { children: [_jsx("h1", { children: "Bienvenido" }), JSON.stringify(user), _jsx("div", { children: _jsx(Button, { onClick: handleLogout, children: "Logout" }) })] })) : isLoading ? (_jsx("div", { children: "Cargando..." })) : (_jsx("div", { children: _jsx(Button, { onClick: handleLogin, children: "Login" }) }));
+    // Sección de documentación de interfaces (siempre visible)
+    const InterfacesDocumentation = () => (_jsx("div", { className: "space-y-4 mb-6", children: _jsx(Card, { title: "Interfaces de TypeScript", subtitle: "Estructuras de datos utilizadas por el AuthContext", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "AuthTokenInterface" })] }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Define la estructura de los datos del token de autenticaci\u00F3n devueltos por el servicio de autenticaci\u00F3n." }), _jsx("div", { className: "bg-[var(--color-bg-secondary)] rounded-lg p-4 border border-[var(--color-border-default)]", children: _jsxs("div", { className: "space-y-2", children: [_jsx(DataField, { label: "accessToken", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Token de acceso utilizado para autenticar las solicitudes HTTP." }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "tokenType", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Tipo de token (generalmente \"Bearer\")." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "expires", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Fecha de expiraci\u00F3n del token en formato ISO 8601." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "refreshToken", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Token de actualizaci\u00F3n utilizado para obtener un nuevo token de acceso cuando el actual expira." })] })] }) })] }), _jsxs("div", { className: "pt-4 border-t border-[var(--color-border-default)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "AuthContextUserInterface" })] }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Define la estructura de los datos del usuario autenticado que se almacenan en el contexto." }), _jsx("div", { className: "bg-[var(--color-bg-secondary)] rounded-lg p-4 border border-[var(--color-border-default)]", children: _jsxs("div", { className: "space-y-2", children: [_jsx(DataField, { label: "id", value: _jsx("span", { className: "text-xs font-mono", children: "number | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Identificador \u00FAnico del usuario." }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "name", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Nombre del usuario." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "aditionalData", value: _jsx("span", { className: "text-xs font-mono", children: "any | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Objeto que puede contener datos adicionales del usuario (roles, permisos, email, etc.). Es flexible y puede adaptarse a las necesidades espec\u00EDficas de cada aplicaci\u00F3n." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "token", value: _jsx("span", { className: "text-xs font-mono", children: "AuthTokenInterface | undefined" }) }), _jsxs("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: ["Objeto de token que contiene el", " ", _jsx("code", { className: "text-xs bg-white/50 px-1 rounded", children: "AuthTokenInterface" }), " ", "con la informaci\u00F3n de autenticaci\u00F3n."] })] })] }) })] })] }) }) }));
+    if (isLoading) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { children: _jsx("div", { className: "flex items-center justify-center py-8", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("i", { className: "fa fa-spinner fa-spin text-[var(--color-primary)] text-xl" }), _jsx("span", { className: "text-[var(--color-text-secondary)]", children: "Iniciando sesi\u00F3n..." })] }) }) })] }));
+    }
+    if (isAuthenticated && user) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Sesi\u00F3n Activa", subtitle: "Informaci\u00F3n del usuario autenticado", headerActions: _jsx(Badge, { variant: "success", icon: "fa-check-circle", iconPosition: "left", children: "Autenticado" }), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "ID de Usuario", value: user.id }), _jsx(DataField, { label: "Nombre", value: user.name || "No disponible" })] }), user.aditionalData && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Datos Adicionales" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [user.aditionalData.role && (_jsx(DataField, { label: "Rol", value: _jsx(Badge, { variant: "primary", icon: "fa-user-shield", children: user.aditionalData.role }) })), user.aditionalData.email && (_jsx(DataField, { label: "Email", value: user.aditionalData.email })), user.aditionalData.createdAt && (_jsx(DataField, { label: "Fecha de Creaci\u00F3n", value: new Date(user.aditionalData.createdAt).toLocaleString() })), user.aditionalData.permissions && (_jsx(DataField, { label: "Permisos", value: _jsx("div", { className: "flex flex-wrap gap-2", children: user.aditionalData.permissions.map((permission, index) => (_jsx(Badge, { variant: "info", size: "sm", icon: "fa-key", children: permission }, index))) }) }))] })] })), user.token && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Informaci\u00F3n del Token" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "Tipo de Token", value: _jsx(Badge, { variant: "secondary", icon: "fa-tag", children: user.token.tokenType || "Bearer" }) }), user.token.expires && (_jsx(DataField, { label: "Expira", value: new Date(user.token.expires).toLocaleString() })), user.token.accessToken && (_jsx(DataField, { label: "Access Token", value: _jsxs("code", { className: "text-xs bg-[var(--color-bg-secondary)] px-2 py-1 rounded break-all", children: [user.token.accessToken.substring(0, 30), "..."] }) }))] })] })), _jsx("div", { className: "mt-6 pt-4 border-t border-[var(--color-border-default)]", children: _jsx(Button, { variant: "outline", icon: "fa-sign-out-alt", iconPosition: "left", onClick: handleLogout, className: "w-full md:w-auto", children: "Cerrar Sesi\u00F3n" }) })] }) })] }));
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Autenticaci\u00F3n", subtitle: "Inicia sesi\u00F3n para ver el AuthContext en acci\u00F3n", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "bg-[var(--color-info-light)] border border-[var(--color-info)] rounded-lg p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("i", { className: "fa fa-info-circle text-[var(--color-info)] mt-1" }), _jsx("div", { className: "flex-1", children: _jsxs("p", { className: "text-sm text-[var(--color-text-primary)]", children: ["Esta es una demostraci\u00F3n del", " ", _jsx("code", { className: "text-xs bg-white/50 px-1 rounded", children: "AuthContext" }), " ", "usando un servicio mock. Haz clic en el bot\u00F3n para simular un inicio de sesi\u00F3n."] }) })] }) }), _jsx("div", { className: "flex justify-center pt-4", children: _jsx(Button, { variant: "primary", size: "lg", icon: "fa-sign-in-alt", iconPosition: "left", onClick: handleLogin, children: "Iniciar Sesi\u00F3n" }) })] }) })] }));
 };

package/dist/docs/AuthDocs.tsx/mockAuthService.d.ts

@@ -0,0 +1,24 @@
+import type { AuthTokenInterface, AuthContextUserInterface } from "../../contexts/AuthContext";
+/**
+ * Mock de getToken - Obtiene un token de acceso
+ *
+ * @param username - Nombre de usuario o email
+ * @param password - Contraseña del usuario
+ * @returns Promise con los datos del token
+ */
+export declare const mockGetToken: (username: string, password: string) => Promise<AuthTokenInterface>;
+/**
+ * Mock de getUserData - Obtiene los datos del usuario autenticado
+ *
+ * @param token - Token de acceso
+ * @returns Promise con los datos del usuario
+ */
+export declare const mockGetUserData: (token: string) => Promise<AuthContextUserInterface>;
+/**
+ * Mock de removeToken - Revoca/invalida un token
+ *
+ * @param token - Token a revocar
+ * @returns Promise que se resuelve cuando el token es revocado
+ */
+export declare const mockRemoveToken: (token: string) => Promise<void>;
+//# sourceMappingURL=mockAuthService.d.ts.map

package/dist/docs/AuthDocs.tsx/mockAuthService.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockAuthService.d.ts","sourceRoot":"","sources":["../../../src/docs/AuthDocs.tsx/mockAuthService.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,4BAA4B,CAAC;AAgBpC;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GACvB,UAAU,MAAM,EAChB,UAAU,MAAM,KACf,OAAO,CAAC,kBAAkB,CAqB5B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,MAAM,KACZ,OAAO,CAAC,wBAAwB,CAoBlC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAAU,OAAO,MAAM,KAAG,OAAO,CAAC,IAAI,CAWjE,CAAC"}

package/dist/docs/AuthDocs.tsx/mockAuthService.js

@@ -0,0 +1,78 @@
+/**
+ * Servicio Mock para Autenticación
+ *
+ * Este servicio simula las llamadas a la API de autenticación
+ * para propósitos de documentación y desarrollo.
+ */
+/**
+ * Simula un delay de red para hacer más realista el mock
+ */
+const simulateNetworkDelay = (ms = 800) => {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+};
+/**
+ * Mock de getToken - Obtiene un token de acceso
+ *
+ * @param username - Nombre de usuario o email
+ * @param password - Contraseña del usuario
+ * @returns Promise con los datos del token
+ */
+export const mockGetToken = async (username, password) => {
+    await simulateNetworkDelay();
+    // Validación básica de credenciales
+    if (!username || !password) {
+        throw new Error("Username y password son requeridos");
+    }
+    // Simular token JWT
+    const tokenData = {
+        accessToken: `mock_access_token_${Date.now()}_${Math.random()
+            .toString(36)
+            .substring(7)}`,
+        tokenType: "Bearer",
+        expires: new Date(Date.now() + 3600000).toISOString(), // 1 hora
+        refreshToken: `mock_refresh_token_${Date.now()}_${Math.random()
+            .toString(36)
+            .substring(7)}`,
+    };
+    return tokenData;
+};
+/**
+ * Mock de getUserData - Obtiene los datos del usuario autenticado
+ *
+ * @param token - Token de acceso
+ * @returns Promise con los datos del usuario
+ */
+export const mockGetUserData = async (token) => {
+    await simulateNetworkDelay();
+    if (!token) {
+        throw new Error("Token es requerido");
+    }
+    // Simular datos de usuario
+    const userData = {
+        id: 123,
+        name: "Usuario de Prueba",
+        aditionalData: {
+            role: "admin",
+            email: "usuario@ejemplo.com",
+            createdAt: new Date().toISOString(),
+            permissions: ["read", "write", "delete"],
+        },
+    };
+    return userData;
+};
+/**
+ * Mock de removeToken - Revoca/invalida un token
+ *
+ * @param token - Token a revocar
+ * @returns Promise que se resuelve cuando el token es revocado
+ */
+export const mockRemoveToken = async (token) => {
+    await simulateNetworkDelay();
+    if (!token) {
+        throw new Error("Token es requerido");
+    }
+    // Simular revocación del token
+    // En una implementación real, aquí se haría una llamada al servidor
+    // para invalidar el token
+    console.log(`Token revocado: ${token.substring(0, 20)}...`);
+};

package/dist/docs/AutocompleteInputDocs.d.ts

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

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

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

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,+CAyBpB,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" }) })] }) }));
+    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;AAS1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAY9B,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,7 +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, {}) })] }));
+    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"}