flysoft-react-ui 0.5.0 → 0.5.3

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

@@ -1,6 +1,33 @@
 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, onClick, ...props }) => {
+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 = `
@@ -9,33 +36,125 @@ export const Button = ({ variant = "primary", size = "md", icon, iconPosition =
     disabled:opacity-50 disabled:cursor-not-allowed
     font-[var(--font-default)]
   `;
-    const variantClasses = {
-        primary: `
-      bg-[var(--color-primary)] text-[var(--color-primary-contrast)] 
-      hover:bg-[var(--color-primary-dark)] focus:ring-[var(--color-primary)]
-    `,
-        outline: `
-      border border-[var(--color-primary)] text-[var(--color-primary)] 
-      hover:bg-[var(--color-bg-secondary)] focus:ring-[var(--color-primary)]
-    `,
-        ghost: `
-      text-[var(--color-primary)] hover:bg-[var(--color-bg-secondary)] 
-      focus:ring-[var(--color-primary)]
-    `,
+    // 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-[var(--color-primary)] text-[var(--color-primary-contrast)] 
+          hover:bg-[var(--color-primary-dark)] focus:ring-[var(--color-primary)]
+        `;
+            }
+            else if (variantType === "outline") {
+                return `
+          border border-[var(--color-primary)] text-[var(--color-primary)] 
+          hover:bg-[var(--color-bg-secondary)] focus:ring-[var(--color-primary)]
+        `;
+            }
+            else {
+                return `
+          text-[var(--color-primary)] hover:bg-[var(--color-bg-secondary)] 
+          focus:ring-[var(--color-primary)]
+        `;
+            }
+        }
+        // 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 hover:bg-[var(--color-bg-secondary)] focus:ring-2 focus:ring-offset-2`;
+        }
+        else {
+            return `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`,
     };
-    const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
+    // 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: `fa ${icon} ${iconClasses} ${children ? (iconPosition === "right" ? "ml-2" : "mr-2") : ""}` }));
+        return (_jsx("i", { className: `${normalizeIconClass(icon)} ${iconClasses} ${children ? (iconPosition === "right" ? "ml-2" : "mr-2") : ""} mt-0.5` }));
     };
-    const rippleColor = variant === "primary" ? "rgba(255, 255, 255, 0.45)" : "rgba(0, 0, 0, 0.15)";
+    // 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();
@@ -51,11 +170,33 @@ export const Button = ({ variant = "primary", size = "md", icon, iconPosition =
         }
         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: {
+    // 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: "fa fa-spinner fa-spin mr-2" }), icon && iconPosition === "left" && !loading && renderIcon(), children, icon && iconPosition === "right" && !loading && renderIcon()] })] }));
+                    } }, 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.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    labelPosition?: "left" | "right";
+    error?: string;
+    size?: "sm" | "md" | "lg";
+    /**
+     * Si es true, el checkbox será de solo lectura. No se podrá modificar pero se verá igual visualmente.
+     * Por defecto es false.
+     */
+    readOnly?: boolean;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,wFA0IpB,CAAC"}

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

@@ -0,0 +1,79 @@
+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", { className: "w-full", 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/DateInput.d.ts

@@ -1,12 +1,32 @@
 import React from "react";
+import { type Dayjs } from "dayjs";
 import type { InputProps } from "./Input";
 import type { DatePickerProps } from "./DatePicker";
 export type DateInputFormat = "dd/mm/yyyy" | "mm/dd/yyyy";
-export interface DateInputProps extends Omit<InputProps, "type" | "value" | "onChange"> {
-    value?: Date | null;
-    onChange?: (date: Date | null) => void;
+export interface DateInputProps extends Omit<InputProps, "type" | "value" | "onChange" | "ref"> {
+    /**
+     * Valor de la fecha.
+     * En modo register con FormProvider: Dayjs | null (se guarda como Dayjs en el formulario)
+     * En modo register sin FormProvider: string ISO (se guarda como ISO string, se puede parsear a Dayjs)
+     * En modo Controller: Dayjs | null
+     */
+    value?: Dayjs | null | string;
+    /**
+     * Callback cuando cambia la fecha.
+     * En modo register: ChangeEventHandler (de register)
+     * En modo Controller: (date: Dayjs | null) => void
+     *
+     * NOTA: Para usar Dayjs directamente con register, el formulario debe estar envuelto en FormProvider.
+     * Sin FormProvider, el valor se guarda como ISO string y se puede parsear de vuelta a Dayjs usando normalizeToDayjs.
+     */
+    onChange?: ((date: Dayjs | null) => void) | React.ChangeEventHandler<HTMLInputElement>;
     format?: DateInputFormat;
     datePickerProps?: Omit<DatePickerProps, "value" | "onChange">;
+    /**
+     * Si es true, el input será de solo lectura. No se podrá modificar ni desplegar el DatePicker.
+     * Por defecto es false.
+     */
+    readOnly?: boolean;
 }
-export declare const DateInput: React.FC<DateInputProps>;
+export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=DateInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,YAAY,CAAC;AAE1D,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IACvD,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;CAC/D;AAsFD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuK9C,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAc,EAAE,KAAK,KAAK,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,YAAY,CAAC;AAE1D,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAAC;IAC/D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAC9B;;;;;;;OAOG;IACH,QAAQ,CAAC,EACL,CAAC,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC,GAC9B,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC/C,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;IAC9D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2HD,eAAO,MAAM,SAAS,yFAgmBrB,CAAC"}