flysoft-react-ui 0.1.12 → 0.1.14

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAYA,OAAO,aAAa,CAAC;AAkQrB,iBAAS,GAAG,4CAkBX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAYA,OAAO,aAAa,CAAC;AAyQrB,iBAAS,GAAG,4CAkBX;AAED,eAAe,GAAG,CAAC"}

package/dist/App.js

@@ -20,7 +20,7 @@ const GlobalThemeDemo = () => {
         }, children: [_jsx("h3", { className: "text-lg font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Hook useGlobalThemeStyles" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Este componente usa el hook useGlobalThemeStyles que aplica autom\u00E1ticamente los estilos del tema actual al body y html." })] }));
 };
 function HomeContent() {
-    return (_jsxs("div", { children: [_jsxs("div", { className: "max-w-4xl mx-auto", children: [_jsx("div", { className: "text-center mb-12", children: _jsx("p", { className: "text-xl", style: { color: "var(--flysoft-text-secondary)" }, children: "Biblioteca de componentes React moderna con Tailwind CSS, FontAwesome y sistema de temas personalizable" }) }), _jsx("div", { className: "mb-8", children: _jsx(ThemeSwitcher, {}) }), _jsx("div", { className: "mb-8 text-center", children: _jsx(ResetToDefaultButton, {}) }), _jsx("div", { className: "mb-8", children: _jsx(GlobalThemeDemo, {}) }), _jsx("div", { className: "mb-8", children: _jsx(Card, { title: "Form Controls", className: "mb-6", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Botones" }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { variant: "primary", icon: "fa-save", children: "Primary" }), _jsx(Button, { variant: "outline", icon: "fa-edit", children: "Outline" }), _jsx(Button, { variant: "ghost", icon: "fa-trash", children: "Ghost" }), _jsx(Button, { size: "sm", variant: "primary", children: "Small" }), _jsx(Button, { size: "lg", variant: "outline", children: "Large" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Campos de Entrada" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "tu@email.com", icon: "fa-envelope" }), _jsx(Input, { label: "Contrase\u00F1a", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-lock" }), _jsx(Input, { label: "Mensaje", placeholder: "Escribe tu mensaje aqu\u00ED...", icon: "fa-comment" })] })] })] }) }) }), _jsx("div", { className: "mb-8", children: _jsx(Card, { title: "Utility Components", children: _jsx("div", { className: "space-y-6", children: _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Badges" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Badge, { variant: "primary", children: "Primary" }), _jsx(Badge, { variant: "secondary", children: "Secondary" }), _jsx(Badge, { variant: "success", children: "Success" }), _jsx(Badge, { variant: "warning", children: "Warning" }), _jsx(Badge, { variant: "danger", children: "Danger" }), _jsx(Badge, { variant: "info", children: "Info" })] })] }) }) }) }), _jsx("div", { className: "mb-8", children: _jsx(Card, { title: "Layout Components", children: _jsx("div", { className: "space-y-6", children: _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Cards con Diferentes Variantes" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(Card, { variant: "default", title: "Card Default", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta con variante por defecto." }) }), _jsx(Card, { variant: "elevated", title: "Card Elevated", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta con sombra elevada." }) }), _jsx(Card, { variant: "outlined", title: "Card Outlined", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta con borde destacado." }) }), _jsx(Card, { title: "Card con Footer", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", children: "Cancelar" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-save", children: "Guardar" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Tarjeta con footer personalizado y botones." }) })] })] }) }) }) }), _jsxs("div", { className: "mt-8 space-y-8", children: [_jsxs("div", { className: "h-96 bg-blue-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 1" }), _jsx("p", { children: "Contenido adicional para hacer scroll..." })] }), _jsxs("div", { className: "h-96 bg-green-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 2" }), _jsx("p", { children: "M\u00E1s contenido para probar el comportamiento del navbar..." })] }), _jsxs("div", { className: "h-96 bg-yellow-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 3" }), _jsx("p", { children: "Contenido final para asegurar que hay suficiente altura..." })] }), _jsxs("div", { className: "h-96 bg-red-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 4" }), _jsx("p", { children: "\u00DAltima secci\u00F3n para completar la prueba de scroll..." })] })] })] }), _jsx("div", { className: "mb-8 text-center", children: _jsx(Link, { to: "/docs/button", className: "inline-block", children: _jsx(Button, { variant: "outline", icon: "fa-book", children: "Ver Documentaci\u00F3n de Button" }) }) }), _jsx("div", { className: "mb-8 text-center", children: _jsx(Link, { to: "/docs/card", className: "inline-block", children: _jsx(Button, { variant: "outline", icon: "fa-book", children: "Ver Documentaci\u00F3n de Card" }) }) })] }));
+    return (_jsxs("div", { children: [_jsxs("div", { className: "max-w-4xl mx-auto", children: [_jsx("div", { className: "text-center mb-12", children: _jsx("p", { className: "text-xl", style: { color: "var(--flysoft-text-secondary)" }, children: "Biblioteca de componentes React moderna con Tailwind CSS, FontAwesome y sistema de temas personalizable" }) }), _jsx("div", { className: "mb-8", children: _jsx(ThemeSwitcher, {}) }), _jsx("div", { className: "mb-8 text-center", children: _jsx(ResetToDefaultButton, {}) }), _jsx("div", { className: "mb-8", children: _jsx(GlobalThemeDemo, {}) }), _jsx("div", { className: "mb-8", children: _jsx(Card, { title: "Form Controls", className: "mb-6", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Botones" }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { variant: "primary", icon: "fa-save", children: "Primary" }), _jsx(Button, { variant: "outline", icon: "fa-edit", children: "Outline" }), _jsx(Button, { variant: "ghost", icon: "fa-trash", children: "Ghost" }), _jsx(Button, { size: "sm", variant: "primary", children: "Small" }), _jsx(Button, { size: "lg", variant: "outline", children: "Large" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Campos de Entrada" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "tu@email.com", icon: "fa-envelope" }), _jsx(Input, { label: "Contrase\u00F1a", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-lock" }), _jsx(Input, { label: "Mensaje", placeholder: "Escribe tu mensaje aqu\u00ED...", icon: "fa-comment" })] })] })] }) }) }), _jsx("div", { className: "mb-8", children: _jsx(Card, { title: "Utility Components", children: _jsx("div", { className: "space-y-6", children: _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Badges" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Badge, { variant: "primary", children: "Primary" }), _jsx(Badge, { variant: "secondary", children: "Secondary" }), _jsx(Badge, { variant: "success", children: "Success" }), _jsx(Badge, { variant: "warning", children: "Warning" }), _jsx(Badge, { variant: "danger", children: "Danger" }), _jsx(Badge, { variant: "info", children: "Info" })] })] }) }) }) }), _jsx("div", { className: "mb-8", children: _jsx(Card, { title: "Layout Components", children: _jsx("div", { className: "space-y-6", children: _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Cards con Diferentes Variantes" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(Card, { variant: "default", title: "Card Default", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta con variante por defecto." }) }), _jsx(Card, { variant: "elevated", title: "Card Elevated", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta con sombra elevada." }) }), _jsx(Card, { variant: "outlined", title: "Card Outlined", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta con borde destacado." }) }), _jsx(Card, { title: "Card con Footer", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", children: "Cancelar" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-save", children: "Guardar" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Tarjeta con footer personalizado y botones." }) })] })] }) }) }) }), _jsxs("div", { className: "mt-8 space-y-8", children: [_jsxs("div", { className: "h-96 bg-blue-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 1" }), _jsx("p", { children: "Contenido adicional para hacer scroll..." })] }), _jsxs("div", { className: "h-96 bg-green-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 2" }), _jsx("p", { children: "M\u00E1s contenido para probar el comportamiento del navbar..." })] }), _jsxs("div", { className: "h-96 bg-yellow-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 3" }), _jsx("p", { children: "Contenido final para asegurar que hay suficiente altura..." })] }), _jsxs("div", { className: "h-96 bg-red-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 4" }), _jsx("p", { children: "\u00DAltima secci\u00F3n para completar la prueba de scroll..." })] })] })] }), _jsx("div", { className: "mb-8 text-center", children: _jsx(Link, { to: "/docs/button", className: "inline-block", children: _jsx(Button, { variant: "outline", icon: "fa-book", children: "Ver Documentaci\u00F3n de Button" }) }) }), _jsx("div", { className: "mb-8 text-center", children: _jsx(Link, { to: "/docs/card", className: "inline-block", children: _jsx(Button, { variant: "outline", icon: "fa-book", children: "Ver Documentaci\u00F3n de Card" }) }) }), _jsx("div", { className: "mb-8 text-center", children: _jsx(Link, { to: "/docs/theme", className: "inline-block", children: _jsx(Button, { variant: "outline", icon: "fa-adjust", children: "Ver Documentaci\u00F3n de ThemeSwitcher" }) }) })] }));
 }
 function App() {
     return (_jsx(ThemeProvider, { initialTheme: "light", forceInitialTheme: false, children: _jsx(AppLayout, { navBarDrawer: _jsx("h2", { children: _jsx(Link, { to: "/", children: "Flysoft React UI" }) }), leftDrawer: _jsx(DocsMenu, {}), children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(HomeContent, {}) }), _jsx(Route, { path: "/docs/*", element: _jsx(DocsRouter, {}) })] }) }) }));

package/dist/components/form-controls/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgExC,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AASD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiHxC,CAAC"}

package/dist/components/form-controls/Button.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-export const Button = ({ variant = "primary", size = "md", icon, iconPosition = "left", loading = false, children, className = "", disabled, ...props }) => {
+export const Button = ({ variant = "primary", size = "md", icon, iconPosition = "left", loading = false, children, className = "", disabled, onClick, ...props }) => {
+    const buttonRef = React.useRef(null);
+    const [ripples, setRipples] = React.useState([]);
     const baseClasses = `
     inline-flex items-center justify-center font-medium rounded-sm transition-colors 
-    cursor-pointer
+    cursor-pointer relative overflow-hidden
     disabled:opacity-50 disabled:cursor-not-allowed
     font-[var(--font-default)]
   `;
@@ -33,5 +35,27 @@ export const Button = ({ variant = "primary", size = "md", icon, iconPosition =
         const iconClasses = size === "sm" ? "w-4 h-4" : size === "md" ? "w-5 h-5" : "w-6 h-6";
         return (_jsx("i", { className: `fa ${icon} ${iconClasses} ${children ? (iconPosition === "right" ? "ml-2" : "mr-2") : ""}` }));
     };
-    return (_jsxs("button", { className: classes, disabled: disabled || loading, ...props, children: [loading && _jsx("i", { className: "fa fa-spinner fa-spin mr-2" }), icon && iconPosition === "left" && !loading && renderIcon(), children, icon && iconPosition === "right" && !loading && renderIcon()] }));
+    const rippleColor = variant === "primary" ? "rgba(255, 255, 255, 0.45)" : "rgba(0, 0, 0, 0.15)";
+    const handleClick = (event) => {
+        if (!disabled && !loading && buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height) * 1.2;
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            const id = window.performance.now();
+            const newRipple = { id, x, y, size };
+            setRipples((prev) => [...prev, newRipple]);
+            window.setTimeout(() => {
+                setRipples((prev) => prev.filter((ripple) => ripple.id !== id));
+            }, 600);
+        }
+        onClick?.(event);
+    };
+    return (_jsxs("button", { ref: buttonRef, className: classes, disabled: disabled || loading, onClick: handleClick, ...props, children: [_jsx("span", { className: "absolute inset-0 pointer-events-none", children: ripples.map((ripple) => (_jsx("span", { className: "absolute rounded-full opacity-40 flysoft-button-ripple", style: {
+                        top: ripple.y,
+                        left: ripple.x,
+                        width: ripple.size,
+                        height: ripple.size,
+                        backgroundColor: rippleColor,
+                    } }, ripple.id))) }), _jsxs("span", { className: "relative inline-flex items-center justify-center", children: [loading && _jsx("i", { className: "fa fa-spinner fa-spin mr-2" }), icon && iconPosition === "left" && !loading && renderIcon(), children, icon && iconPosition === "right" && !loading && renderIcon()] })] }));
 };

package/dist/contexts/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKvD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmJtD,CAAC;AAGF,eAAO,MAAM,QAAQ,QAAO,gBAM3B,CAAC;AAGF,eAAO,MAAM,eAAe,eAG3B,CAAC"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2CvD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgKtD,CAAC;AAIF,eAAO,MAAM,QAAQ,QAAO,gBAM3B,CAAC;AAIF,eAAO,MAAM,eAAe,eAG3B,CAAC"}

package/dist/contexts/ThemeContext.js

@@ -1,7 +1,36 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useEffect, useState, } from "react";
+import React, { createContext, useContext, useEffect, useMemo, useState, } from "react";
 import { themes, defaultTheme } from "./presets";
 const ThemeContext = createContext(undefined);
+const toKebabCase = (value) => value.replace(/([A-Z])/g, "-$1").toLowerCase();
+const buildThemeResetStyles = (theme) => {
+    const cssVariables = {
+        "--flysoft-theme-name": theme.name,
+    };
+    Object.entries(theme.colors).forEach(([key, value]) => {
+        cssVariables[`--flysoft-${toKebabCase(key)}`] = value;
+    });
+    Object.entries(theme.shadows).forEach(([key, value]) => {
+        cssVariables[`--flysoft-shadow-${key}`] = value;
+    });
+    Object.entries(theme.radius).forEach(([key, value]) => {
+        cssVariables[`--flysoft-radius-${key}`] = value;
+    });
+    Object.entries(theme.spacing).forEach(([key, value]) => {
+        cssVariables[`--flysoft-spacing-${key}`] = value;
+    });
+    Object.entries(theme.fonts).forEach(([key, value]) => {
+        cssVariables[`--flysoft-font-${key}`] = value;
+    });
+    return {
+        color: theme.fonts.colorDefault ?? theme.colors.textPrimary,
+        backgroundColor: theme.colors.bgDefault,
+        fontFamily: theme.fonts.default,
+        fontSize: theme.fonts.sizeDefault,
+        lineHeight: "1.5",
+        ...cssVariables,
+    };
+};
 export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "flysoft-theme", forceInitialTheme = false, }) => {
     // Almacenar el tema inicial para poder resetear a él
     const getInitialTheme = () => {
@@ -114,6 +143,7 @@ export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "
     }, [currentTheme]);
     // Check if current theme is dark
     const isDark = currentTheme.name === "dark";
+    const themeResetStyles = useMemo(() => buildThemeResetStyles(currentTheme), [currentTheme]);
     const value = {
         theme: currentTheme,
         setTheme,
@@ -122,9 +152,10 @@ export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "
         resetToDefault,
         isDark,
     };
-    return (_jsx(ThemeContext.Provider, { value: value, children: children }));
+    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx("div", { className: "flysoft-theme-reset", style: themeResetStyles, "data-theme": currentTheme.name, children: children }) }));
 };
 // Hook to use theme context
+// eslint-disable-next-line react-refresh/only-export-components
 export const useTheme = () => {
     const context = useContext(ThemeContext);
     if (context === undefined) {
@@ -133,6 +164,7 @@ export const useTheme = () => {
     return context;
 };
 // Hook to check if theme context is available
+// eslint-disable-next-line react-refresh/only-export-components
 export const useThemeContext = () => {
     const context = useContext(ThemeContext);
     return context !== undefined;

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,+CAapB,CAAC"}
+{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAmBpB,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/card", children: "Card" }) })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("ul", { children: [_jsx("li", { children: _jsx(Link, { to: "/docs/button", children: "Button" }) }), _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" }) })] }) }));
 };

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;AAK1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAQ9B,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;AAO1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAU9B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/DocsRouter.js

@@ -3,7 +3,9 @@ import React from "react";
 import { Routes, Route, Navigate } from "react-router-dom";
 import ButtonDocs from "./ButtonDocs";
 import CardDocs from "./CardDocs";
+import InputDocs from "./InputDocs";
+import ThemeSwitcherDocs from "./ThemeSwitcherDocs";
 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: "card", element: _jsx(CardDocs, {}) })] }));
+    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) })] }));
 };
 export default DocsRouter;

package/dist/docs/InputDocs.d.ts

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

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

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

package/dist/docs/InputDocs.js

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

package/dist/docs/ThemeSwitcherDocs.d.ts

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

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

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

package/dist/docs/ThemeSwitcherDocs.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card, Button, Input, ThemeSwitcher, useTheme } from "../index";
+const ThemePreview = () => {
+    const { theme } = useTheme();
+    return (_jsxs(Card, { title: "Vista previa del tema actual", subtitle: `Tema activo: ${theme.name}`, className: "space-y-4", children: [_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los componentes de Flysoft usan autom\u00E1ticamente las variables del tema activo. Cambia el tema con el ThemeSwitcher para ver los estilos actualizados." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", icon: "fa-moon", children: "Acci\u00F3n primaria" }), _jsx(Button, { variant: "outline", icon: "fa-sun", children: "Acci\u00F3n secundaria" }), _jsx(Button, { variant: "ghost", icon: "fa-adjust", children: "Acci\u00F3n fantasma" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Correo", type: "email", placeholder: "correo@empresa.com", icon: "fa-envelope" })] })] }));
+};
+const ThemeSwitcherDocs = () => {
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "ThemeSwitcher - Gu\u00EDa 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: "text-sm mb-6", style: { color: "var(--flysoft-text-secondary)" }, children: "ThemeSwitcher permite alternar entre los temas configurados en la librer\u00EDa. Se integra autom\u00E1ticamente con `ThemeProvider` y aplica los cambios a todos los componentes sin recargar la p\u00E1gina." }), _jsx(Card, { title: "Switcher integrado", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(ThemeSwitcher, {}), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Este ejemplo usa el ThemeSwitcher directamente, ideal para colocarlo en headers o barras laterales." })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Vista previa de tema" }), _jsx(ThemePreview, {})] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Integraci\u00F3n en layouts" }), _jsx(Card, { title: "Recomendaciones", subtitle: "Buenas pr\u00E1cticas para colocar ThemeSwitcher", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", children: [_jsx("li", { children: "Ub\u00EDcalo en lugares visibles como el header o el men\u00FA lateral." }), _jsx("li", { children: "Combina el ThemeSwitcher con informaci\u00F3n del tema actual para mejorar la experiencia del usuario." }), _jsx("li", { children: "Recuerda envolver tu aplicaci\u00F3n con `ThemeProvider` y aplicar los estilos globales con `useGlobalThemeStyles` cuando sea necesario." })] }) })] })] }) }) }));
+};
+export default ThemeSwitcherDocs;

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;;;CA4ChD,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;;;CA6ChD,CAAC"}

package/dist/hooks/useElementScroll.js

@@ -10,11 +10,12 @@ export const useElementScroll = (elementRef) => {
         let lastDirection = null;
         const handleScroll = () => {
             const currentScrollY = element.scrollTop;
+            const delta = currentScrollY - lastScrollY;
             let newDirection = lastDirection;
-            if (currentScrollY > lastScrollY && currentScrollY > 10) {
+            if (delta > 4 && currentScrollY > 10) {
                 newDirection = "down";
             }
-            else if (currentScrollY < lastScrollY && currentScrollY > 0) {
+            else if (delta < -4 && currentScrollY > 0) {
                 newDirection = "up";
             }
             setScrollY(currentScrollY);