flysoft-react-ui 1.2.3 → 1.2.5

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

@@ -1,211 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { normalizeIconClass } from "../utils/iconUtils";
-// Función helper para convertir nombres de colores comunes a valores CSS válidos
-const getColorValue = (color) => {
-    if (!color)
-        return undefined;
-    // Si ya es un valor CSS válido (hex, rgb, rgba, hsl, etc.), retornarlo
-    if (color.startsWith("#") ||
-        color.startsWith("rgb") ||
-        color.startsWith("hsl")) {
-        return color;
-    }
-    // Mapeo de nombres de colores comunes
-    const colorMap = {
-        white: "#ffffff",
-        black: "#000000",
-        "gray-800": "#1f2937",
-        "gray-700": "#374151",
-        "gray-600": "#4b5563",
-        "gray-500": "#6b7280",
-        "gray-400": "#9ca3af",
-        "gray-300": "#d1d5db",
-        "gray-200": "#e5e7eb",
-        "gray-100": "#f3f4f6",
-        "gray-50": "#f9fafb",
-    };
-    return colorMap[color.toLowerCase()] || color;
-};
-export const Button = ({ variant = "primary", size = "md", color = "primary", bg, textColor, 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 relative overflow-hidden
-    disabled:opacity-50 disabled:cursor-not-allowed
-    font-[var(--font-default)]
-    flysoft-button-reset
-  `;
-    // Mapeo de clases para variant primary con color primary (usa Tailwind)
-    const getVariantClasses = (variantType, colorType) => {
-        // Solo usar clases Tailwind para primary con color primary
-        if (colorType === "primary") {
-            if (variantType === "primary") {
-                return `
-          bg-primary text-primary-contrast 
-          hover:bg-primary-dark focus:ring-primary
-        `;
-            }
-            if (variantType === "secondary") {
-                return `
-          bg-primary-light/10 text-primary border border-primary/20
-          hover:bg-primary-light/20 focus:ring-primary
-        `;
-            }
-            if (variantType === "outline") {
-                return `
-          border border-primary text-primary bg-transparent
-          hover:bg-primary hover:text-primary-contrast focus:ring-primary
-        `;
-            }
-            if (variantType === "ghost") {
-                return `
-          text-primary bg-transparent
-          hover:bg-primary/10 focus:ring-primary
-        `;
-            }
-            // Default for primary colorType if variantType not matched
-            return `focus:ring-2 focus:ring-offset-2`;
-        }
-        // Para otros colores, retornar clases base sin color (se aplicarán con estilos inline)
-        if (variantType === "primary") {
-            return `focus:ring-2 focus:ring-offset-2`;
-        }
-        else if (variantType === "outline") {
-            return `border bg-transparent hover:bg-[var(--color-bg-secondary)] focus:ring-2 focus:ring-offset-2`;
-        }
-        else {
-            return `bg-transparent border-none hover:bg-[var(--color-bg-secondary)] focus:ring-2 focus:ring-offset-2`;
-        }
-    };
-    // Si se proporciona bg personalizado, no usar las clases de variante
-    const variantClasses = bg ? "" : getVariantClasses(variant, color);
-    // Determinar si necesitamos usar estilos inline para colores del sistema
-    const needsInlineStyles = !bg && color !== "primary";
-    const sizeClasses = {
-        sm: `${children ? "px-3 py-1.5" : "p-1.5"} text-sm`,
-        md: `${children ? "px-4 py-2" : "p-2"} text-base`,
-        lg: `${children ? "px-6 py-3" : "p-3"} text-lg`,
-    };
-    // Clases adicionales para variant outline cuando hay bg personalizado
-    const outlineClasses = bg && variant === "outline" ? "border" : "";
-    const classes = `${baseClasses} ${variantClasses} ${sizeClasses[size]} ${outlineClasses} ${className}`;
-    // Función para obtener el valor de una variable CSS
-    const getCSSVariable = (varName) => {
-        if (typeof window !== "undefined") {
-            const value = getComputedStyle(document.documentElement)
-                .getPropertyValue(varName)
-                .trim();
-            // Si no se encuentra la variable, intentar con el prefijo flysoft
-            if (!value && varName.startsWith("--color-")) {
-                const flysoftVarName = varName.replace("--color-", "--flysoft-");
-                return (getComputedStyle(document.documentElement)
-                    .getPropertyValue(flysoftVarName)
-                    .trim() || value);
-            }
-            return value;
-        }
-        return "";
-    };
-    // Estilos inline para colores personalizados o colores del sistema (no primary)
-    const inlineStyles = bg
-        ? {
-            backgroundColor: variant === "primary" ? getColorValue(bg) || bg : undefined,
-            color: getColorValue(textColor) ||
-                textColor ||
-                (variant === "primary" ? "#ffffff" : getColorValue(bg) || bg),
-            borderColor: variant === "outline" ? getColorValue(bg) || bg : undefined,
-            ...(variant === "ghost" && {
-                color: getColorValue(textColor) || textColor || getColorValue(bg) || bg,
-            }),
-        }
-        : needsInlineStyles
-            ? {
-                ...(variant === "primary" && {
-                    backgroundColor: getCSSVariable(`--color-${color}`),
-                    color: getCSSVariable(`--color-${color}-contrast`) || "#ffffff",
-                }),
-                ...(variant === "outline" && {
-                    borderColor: getCSSVariable(`--color-${color}`),
-                    color: getCSSVariable(`--color-${color}`),
-                }),
-                ...(variant === "ghost" && {
-                    color: getCSSVariable(`--color-${color}`),
-                }),
-            }
-            : {};
-    // Función para oscurecer un color (para hover en variant primary con bg personalizado)
-    const darkenColor = (color, percent) => {
-        const hex = color.replace("#", "");
-        const num = parseInt(hex, 16);
-        const r = Math.max(0, Math.floor((num >> 16) * (1 - percent / 100)));
-        const g = Math.max(0, Math.floor(((num >> 8) & 0x00ff) * (1 - percent / 100)));
-        const b = Math.max(0, Math.floor((num & 0x0000ff) * (1 - percent / 100)));
-        return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`;
-    };
-    // Agregar hover style cuando hay bg personalizado y variant es primary
-    const hoverStyle = bg && variant === "primary" && !disabled && !loading
-        ? {
-            "--hover-bg": darkenColor(getColorValue(bg) || bg, 15),
-        }
-        : {};
-    const renderIcon = () => {
-        if (!icon)
-            return null;
-        const iconClasses = size === "sm" ? "w-4 h-4" : size === "md" ? "w-5 h-5" : "w-6 h-6";
-        return (_jsx("i", { className: `${normalizeIconClass(icon)} ${iconClasses} flex items-center justify-center ${children ? (iconPosition === "right" ? "ml-2" : "mr-2") : ""}` }));
-    };
-    // Determinar el color del ripple basado en el variant y si hay bg personalizado
-    const rippleColor = bg
-        ? variant === "primary"
-            ? "rgba(255, 255, 255, 0.45)"
-            : "rgba(0, 0, 0, 0.15)"
-        : 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);
-    };
-    // Combinar estilos inline
-    const combinedStyles = { ...inlineStyles, ...hoverStyle };
-    return (_jsxs("button", { ref: buttonRef, className: classes, style: combinedStyles, disabled: disabled || loading, onClick: handleClick, onMouseEnter: (e) => {
-            if (variant === "primary" && !disabled && !loading) {
-                if (bg) {
-                    const hoverBg = darkenColor(getColorValue(bg) || bg, 15);
-                    e.currentTarget.style.backgroundColor = hoverBg;
-                }
-                else if (needsInlineStyles) {
-                    const hoverBg = getCSSVariable(`--color-${color}-dark`);
-                    e.currentTarget.style.backgroundColor = hoverBg;
-                }
-            }
-        }, onMouseLeave: (e) => {
-            if (variant === "primary") {
-                if (bg) {
-                    e.currentTarget.style.backgroundColor = getColorValue(bg) || bg;
-                }
-                else if (needsInlineStyles) {
-                    e.currentTarget.style.backgroundColor = getCSSVariable(`--color-${color}`);
-                }
-            }
-        }, ...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: `${normalizeIconClass("fa-spinner fa-spin")} mr-2` })), icon && iconPosition === "left" && !loading && renderIcon(), children, icon && iconPosition === "right" && !loading && renderIcon()] })] }));
-};

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

@@ -1,79 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-export const Checkbox = React.forwardRef(({ label, labelPosition = "right", error, size = "md", className = "", id, readOnly = false, onClick, onChange, ...props }, ref) => {
-    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
-    const sizeClasses = {
-        sm: "w-4 h-4",
-        md: "w-5 h-5",
-        lg: "w-6 h-6",
-    };
-    const labelSizeClasses = {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
-    };
-    const checkboxClasses = `
-      ${sizeClasses[size]}
-      rounded border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0
-      cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed
-      border-[var(--color-border-default)]
-      checked:bg-[var(--color-primary)] checked:border-[var(--color-primary)]
-      focus:ring-[var(--color-primary)]
-      ${error
-        ? "border-[var(--color-border-error)] checked:border-[var(--color-border-error)] checked:bg-[var(--color-danger)]"
-        : ""}
-      ${className}
-    `;
-    const checkboxStyle = error
-        ? { accentColor: "var(--color-danger)" }
-        : { accentColor: "var(--color-primary)" };
-    const labelClasses = `
-      ${labelSizeClasses[size]}
-      font-[var(--font-default)] cursor-pointer select-none
-      ${props.disabled ? "opacity-50 cursor-not-allowed" : ""}
-      ${error
-        ? "text-[var(--color-danger)]"
-        : "text-[var(--color-text-primary)]"}
-    `;
-    const containerClasses = `
-      flex items-center gap-2
-      ${labelPosition === "left" ? "flex-row-reverse" : "flex-row"}
-    `;
-    // Prevenir cambios cuando está en modo readOnly
-    const handleClick = (e) => {
-        if (readOnly) {
-            e.preventDefault();
-            return false;
-        }
-        // Llamar al onClick original si existe
-        if (onClick) {
-            onClick(e);
-        }
-    };
-    const handleChange = (e) => {
-        if (readOnly) {
-            e.preventDefault();
-            return;
-        }
-        // Llamar al onChange original si existe
-        if (onChange) {
-            onChange(e);
-        }
-    };
-    const handleLabelClick = (e) => {
-        if (readOnly) {
-            e.preventDefault();
-            e.stopPropagation();
-            return false;
-        }
-    };
-    const handleLabelMouseDown = (e) => {
-        if (readOnly) {
-            e.preventDefault();
-            e.stopPropagation();
-            return false;
-        }
-    };
-    return (_jsxs("div", { children: [_jsxs("div", { className: containerClasses, children: [_jsx("input", { ref: ref, type: "checkbox", id: checkboxId, className: checkboxClasses, style: checkboxStyle, readOnly: readOnly, onClick: handleClick, onChange: handleChange, ...props }), label && (_jsx("label", { htmlFor: readOnly ? undefined : checkboxId, className: labelClasses, onClick: handleLabelClick, onMouseDown: handleLabelMouseDown, children: label }))] }), error && (_jsx("p", { className: "mt-1 text-sm text-[var(--color-danger)] font-[var(--font-default)]", children: error }))] }));
-});
-Checkbox.displayName = "Checkbox";

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

@@ -1,106 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { Input } from "./Input";
-import { useFormContext } from "react-hook-form";
-/**
- * Componente de entrada para valores monetarios.
- * Muestra el valor formateado con separadores de miles (puntos) y decimales (comas).
- * Al recibir el foco, quita los puntos para facilitar la edición.
- */
-export const CurrencyInput = React.forwardRef(({ value, onChange, onFocus, onBlur, ...props }, ref) => {
-    const [isFocused, setIsFocused] = useState(false);
-    const [displayValue, setDisplayValue] = useState("");
-    // Detectar si estamos en modo register (si viene 'name')
-    const isRegisterMode = useMemo(() => {
-        return "name" in props && props.name !== undefined;
-    }, [props]);
-    const fieldName = props.name;
-    // Obtener el contexto de react-hook-form si existe
-    const formContext = useFormContext();
-    const setValue = formContext?.setValue;
-    // Formateador para mostrar el valor final (con puntos y comas)
-    const formatToCurrency = useCallback((val) => {
-        if (val === null || val === undefined || isNaN(val))
-            return "";
-        return new Intl.NumberFormat("es-AR", {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-        }).format(val);
-    }, []);
-    // Formateador para cuando tiene el foco (sin puntos de miles)
-    const formatToFocus = useCallback((val) => {
-        if (val === null || val === undefined || isNaN(val))
-            return "";
-        return new Intl.NumberFormat("es-AR", {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-            useGrouping: false,
-        }).format(val);
-    }, []);
-    // Función para parsear el string de vuelta a número
-    const parseToNumeric = useCallback((val) => {
-        if (!val || val.trim() === "")
-            return null;
-        // Reemplazamos la coma por punto para que parseFloat funcione correctamente
-        const cleanValue = val.replace(/\./g, "").replace(",", ".");
-        const numeric = parseFloat(cleanValue);
-        return isNaN(numeric) ? null : numeric;
-    }, []);
-    // Valor actual a usar (del prop value o del formulario)
-    const numericValue = useMemo(() => {
-        if (isRegisterMode && formContext && fieldName) {
-            return formContext.watch(fieldName);
-        }
-        return value;
-    }, [isRegisterMode, formContext, fieldName, value]);
-    // Sincronizar el valor externo con el estado interno cuando no hay foco
-    useEffect(() => {
-        if (!isFocused) {
-            setDisplayValue(formatToCurrency(numericValue));
-        }
-    }, [numericValue, isFocused, formatToCurrency]);
-    const handleFocus = (e) => {
-        setIsFocused(true);
-        // Al ganar foco, mostramos el valor sin separadores de miles
-        setDisplayValue(formatToFocus(numericValue));
-        if (onFocus)
-            onFocus(e);
-    };
-    const handleBlur = (e) => {
-        setIsFocused(false);
-        const numericVal = parseToNumeric(displayValue);
-        // Notificamos el cambio
-        if (isRegisterMode && setValue && fieldName) {
-            // Si estamos en modo register con FormProvider, usamos setValue para guardar el número
-            setValue(fieldName, numericVal, {
-                shouldValidate: true,
-                shouldDirty: true,
-                shouldTouch: true,
-            });
-        }
-        else if (onChange) {
-            // Si no, llamamos al onChange tradicional
-            onChange(numericVal);
-        }
-        // Formateamos el valor final para mostrarlo al perder el foco
-        setDisplayValue(formatToCurrency(numericVal));
-        if (onBlur)
-            onBlur(e);
-    };
-    const handleChange = (e) => {
-        let val = e.target.value;
-        // Solo permitimos números y una sola coma
-        // Si el usuario presiona punto, lo convertimos a coma para facilitar la entrada
-        val = val.replace(/\./g, ",");
-        // Limpiamos caracteres no permitidos
-        val = val.replace(/[^0-9,]/g, "");
-        // Aseguramos que solo haya una coma
-        const parts = val.split(",");
-        if (parts.length > 2) {
-            val = parts[0] + "," + parts.slice(1).join("");
-        }
-        setDisplayValue(val);
-    };
-    return (_jsx(Input, { ...props, ref: ref, type: "text", value: displayValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }));
-});
-CurrencyInput.displayName = "CurrencyInput";