flysoft-react-ui 0.1.12 → 0.1.13

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/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,+CAgBpB,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" }) })] }) }));
 };

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;AAM1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAS9B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/DocsRouter.js

@@ -3,7 +3,8 @@ import React from "react";
 import { Routes, Route, Navigate } from "react-router-dom";
 import ButtonDocs from "./ButtonDocs";
 import CardDocs from "./CardDocs";
+import InputDocs from "./InputDocs";
 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, {}) })] }));
 };
 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/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);