flysoft-react-ui 0.5.0 → 0.5.3

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

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import dayjs, {} from "dayjs";
 import { Button } from "./Button";
 const createDateAtMidnight = (date) => {
-    const d = new Date(date);
-    d.setHours(0, 0, 0, 0);
-    return d;
+    const d = dayjs(date);
+    return d.startOf("day");
 };
 const isSameDay = (a, b) => {
-    return (a.getFullYear() === b.getFullYear() &&
-        a.getMonth() === b.getMonth() &&
-        a.getDate() === b.getDate());
+    return a.isSame(b, "day");
 };
 const getDaysInMonth = (year, month) => {
-    return new Date(year, month + 1, 0).getDate();
+    return dayjs().year(year).month(month).daysInMonth();
 };
 const getWeekdayLabels = (startWeekOn) => {
     const base = ["D", "L", "M", "X", "J", "V", "S"];
@@ -22,23 +20,19 @@ const getWeekdayLabels = (startWeekOn) => {
     return [...base.slice(1), base[0]];
 };
 export const DatePicker = ({ value, onChange, initialViewDate, startWeekOn = "sunday", className = "", }) => {
-    const today = React.useMemo(() => createDateAtMidnight(new Date()), []);
-    const initial = React.useMemo(() => {
-        const base = value ?? initialViewDate ?? today;
+    const today = React.useMemo(() => dayjs().startOf("day"), []);
+    const getViewFromValue = React.useCallback((val) => {
+        const base = val ?? initialViewDate ?? today;
         return {
-            month: base.getMonth(),
-            year: base.getFullYear(),
+            month: base.month(),
+            year: base.year(),
         };
-    }, [value, initialViewDate, today]);
-    const [view, setView] = React.useState(initial);
+    }, [initialViewDate, today]);
+    const [view, setView] = React.useState(() => getViewFromValue(value));
     React.useEffect(() => {
-        if (value) {
-            setView({
-                month: value.getMonth(),
-                year: value.getFullYear(),
-            });
-        }
-    }, [value]);
+        // Sincronizar la vista con el valor actual, incluso si es null/undefined
+        setView(getViewFromValue(value));
+    }, [value, getViewFromValue]);
     const handlePrevMonth = () => {
         setView((prev) => {
             const month = prev.month === 0 ? 11 : prev.month - 1;
@@ -62,7 +56,7 @@ export const DatePicker = ({ value, onChange, initialViewDate, startWeekOn = "su
     const handleSelectDay = (day, month, year) => {
         const targetMonth = month !== undefined ? month : view.month;
         const targetYear = year !== undefined ? year : view.year;
-        const date = new Date(targetYear, targetMonth, day);
+        const date = dayjs().year(targetYear).month(targetMonth).date(day);
         onChange?.(createDateAtMidnight(date));
         // Si el día es de otro mes, cambiar la vista
         if (month !== undefined && month !== view.month) {
@@ -72,8 +66,8 @@ export const DatePicker = ({ value, onChange, initialViewDate, startWeekOn = "su
             setView({ month: targetMonth, year: targetYear });
         }
     };
-    const firstDayOfMonth = new Date(view.year, view.month, 1);
-    const firstWeekday = firstDayOfMonth.getDay(); // 0-6, Sunday=0
+    const firstDayOfMonth = dayjs().year(view.year).month(view.month).date(1);
+    const firstWeekday = firstDayOfMonth.day(); // 0-6, Sunday=0
     const daysInMonth = getDaysInMonth(view.year, view.month);
     const weekdayLabels = getWeekdayLabels(startWeekOn);
     const offset = startWeekOn === "sunday"
@@ -115,15 +109,17 @@ export const DatePicker = ({ value, onChange, initialViewDate, startWeekOn = "su
         }
         weeks.push(currentWeek);
     }
-    const selectedDate = value && !isNaN(value.getTime()) ? createDateAtMidnight(value) : null;
-    const monthName = new Date(view.year, view.month, 1).toLocaleString("es-ES", {
-        month: "long",
-    });
-    return (_jsxs("div", { className: `inline-flex flex-col rounded-lg border border-[var(--color-border-default)] 
+    const selectedDate = value && value.isValid() ? createDateAtMidnight(value) : null;
+    const monthName = dayjs()
+        .year(view.year)
+        .month(view.month)
+        .date(1)
+        .format("MMMM");
+    return (_jsxs("div", { className: `inline-flex flex-col rounded-lg border border-[var(--color-border-default)] 
       bg-[var(--color-bg-default)] p-3 shadow-sm font-[var(--font-default)] text-sm ${className}`, children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", icon: "fa-angle-double-left", onClick: handlePrevYear, "aria-label": "A\u00F1o anterior" }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", icon: "fa-angle-left", onClick: handlePrevMonth, "aria-label": "Mes anterior" })] }), _jsx("div", { className: "text-center", children: _jsxs("div", { className: "text-[var(--color-text-primary)] font-medium capitalize", children: [monthName, " ", view.year] }) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", icon: "fa-angle-right", onClick: handleNextMonth, "aria-label": "Mes siguiente" }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", icon: "fa-angle-double-right", onClick: handleNextYear, "aria-label": "A\u00F1o siguiente" })] })] }), _jsx("div", { className: "grid grid-cols-7 gap-1 mb-1", children: weekdayLabels.map((label) => (_jsx("div", { className: "text-xs text-center text-[var(--color-text-secondary)]", children: label }, label))) }), _jsx("div", { className: "grid grid-rows-6 gap-1", children: weeks.map((week, rowIndex) => (_jsx("div", { className: "grid grid-cols-7 gap-1", children: week.map((dayInfo, index) => {
                         const { day, month, year } = dayInfo;
                         const isCurrentMonth = month === view.month && year === view.year;
-                        const date = new Date(year, month, day);
+                        const date = dayjs().year(year).month(month).date(day);
                         const isToday = isSameDay(date, today);
                         const isSelected = selectedDate !== null && isSameDay(date, selectedDate);
                         let dayClasses = "w-8 h-8 flex items-center justify-center rounded-full cursor-pointer text-xs";

package/dist/components/form-controls/Input.d.ts

@@ -6,6 +6,15 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     iconPosition?: "left" | "right";
     size?: "sm" | "md" | "lg";
     children?: React.ReactNode;
+    /**
+     * Callback cuando se hace click en el ícono. Si está definido, el ícono será clickeable.
+     */
+    onIconClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Si es true, el input será de solo lectura. No se podrá modificar pero no se verá como disabled.
+     * Por defecto es false.
+     */
+    readOnly?: boolean;
 }
-export declare const Input: React.FC<InputProps>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0EtC,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,qFA4FjB,CAAC"}

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

@@ -1,27 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-export const Input = ({ label, error, icon, iconPosition = "left", size = "md", className = "", id, ...props }) => {
+import { normalizeIconClass } from "../utils/iconUtils";
+export const Input = React.forwardRef(({ label, error, icon, iconPosition = "left", size = "md", className = "", id, onIconClick, readOnly = false, ...props }, ref) => {
     const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
     const baseClasses = `
-    w-full border rounded-lg transition-colors focus:outline-none focus:ring-1
+    w-full border rounded-lg transition-colors focus:outline-none
     disabled:opacity-50 disabled:cursor-not-allowed
     font-[var(--font-default)] text-[var(--color-text-primary)]
-    bg-[var(--color-bg-default)]
   `;
+    const readOnlyClasses = readOnly
+        ? `border-transparent bg-transparent focus:ring-0`
+        : `focus:ring-1 bg-[var(--color-bg-default)]`;
     const sizeClasses = {
         sm: "px-3 py-1.5 text-sm",
         md: "px-4 py-2 text-base",
         lg: "px-6 py-3 text-lg",
     };
-    const stateClasses = error
-        ? `border-[var(--color-border-error)] focus:border-[var(--color-border-error)] focus:ring-[var(--color-border-error)]`
-        : `border-[var(--color-border-default)] focus:border-[var(--color-border-focus)] focus:ring-[var(--color-border-focus)]`;
-    const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${className}`;
+    const stateClasses = readOnly
+        ? ""
+        : error
+            ? `border-[var(--color-border-error)] focus:border-[var(--color-border-error)] focus:ring-[var(--color-border-error)]`
+            : `border-[var(--color-border-default)] focus:border-[var(--color-border-focus)] focus:ring-[var(--color-border-focus)]`;
+    const inputClasses = `${baseClasses} ${readOnlyClasses} ${sizeClasses[size]} ${stateClasses} ${className}`;
     const iconClasses = size === "sm" ? "w-4 h-4" : size === "md" ? "w-5 h-5" : "w-6 h-6";
     const renderIcon = () => {
         if (!icon)
             return null;
-        return (_jsx("i", { className: `fa ${icon} ${iconClasses} text-[var(--color-text-muted)] absolute top-1/2 transform -translate-y-1/2 ${iconPosition === "left" ? "left-3" : "right-3"}` }));
+        const iconElement = (_jsx("i", { className: `${normalizeIconClass(icon)} ${iconClasses} text-[var(--color-text-muted)] absolute top-1/2 transform -translate-y-1/2 ${iconPosition === "left" ? "left-3" : "right-3"} ${onIconClick && !readOnly ? "cursor-pointer hover:text-[var(--color-primary)] transition-colors" : ""}`, onClick: readOnly ? undefined : onIconClick }));
+        return iconElement;
     };
-    return (_jsxs("div", { className: "w-full", children: [label && (_jsx("label", { htmlFor: inputId, className: "block text-sm text-[var(--color-primary)] mb-1 font-[var(--font-default)]", children: label })), _jsxs("div", { className: "relative", children: [icon && iconPosition === "left" && renderIcon(), _jsx("input", { id: inputId, className: `${inputClasses} ${icon && iconPosition === "left" ? "pl-10" : ""} ${icon && iconPosition === "right" ? "pr-10" : ""}`, ...props }), icon && iconPosition === "right" && renderIcon()] }), error && (_jsx("p", { className: "mt-1 text-sm text-[var(--color-danger)] font-[var(--font-default)]", children: error }))] }));
-};
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx("label", { htmlFor: inputId, className: "block text-sm text-[var(--color-primary)] mb-1 font-[var(--font-default)]", children: label })), _jsxs("div", { className: "relative", children: [icon && iconPosition === "left" && renderIcon(), _jsx("input", { ref: ref, id: inputId, className: `${inputClasses} ${icon && iconPosition === "left" ? "pl-10" : ""} ${icon && iconPosition === "right" ? "pr-10" : ""}`, autoComplete: "off", readOnly: readOnly, ...props }), icon && iconPosition === "right" && renderIcon()] }), error && (_jsx("p", { className: "mt-1 text-sm text-[var(--color-danger)] font-[var(--font-default)]", children: error }))] }));
+});
+Input.displayName = "Input";

package/dist/components/form-controls/LinkButton.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface LinkButtonProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+    to: string;
+    target?: string;
+    variant?: "primary" | "outline" | "ghost";
+    size?: "sm" | "md" | "lg";
+    color?: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+    bg?: string;
+    textColor?: string;
+    icon?: string;
+    iconPosition?: "left" | "right";
+    children?: React.ReactNode;
+}
+export declare const LinkButton: React.FC<LinkButtonProps>;
+//# sourceMappingURL=LinkButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/LinkButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmC1B,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACnE,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC5E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AASD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgThD,CAAC"}

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

@@ -0,0 +1,248 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Link } from "react-router-dom";
+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 LinkButton = ({ to, target, variant = "primary", size = "md", color = "primary", bg, textColor, icon, iconPosition = "left", children, className = "", onClick, ...props }) => {
+    const [ripples, setRipples] = React.useState([]);
+    const baseClasses = `
+    inline-flex items-center justify-center font-medium rounded-sm transition-colors 
+    cursor-pointer relative overflow-hidden no-underline outline-none focus:outline-none 
+    focus-visible:outline-none active:outline-none focus:ring-0 focus:ring-offset-0
+    font-[var(--font-default)]
+  `;
+    // 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)]
+        `;
+            }
+            else if (variantType === "outline") {
+                return `
+          border border-[var(--color-primary)] text-[var(--color-primary)] 
+          hover:bg-[var(--color-bg-secondary)]
+        `;
+            }
+            else {
+                return `
+          text-[var(--color-primary)] hover:bg-[var(--color-bg-secondary)]
+        `;
+            }
+        }
+        // Para otros colores, retornar clases base sin color (se aplicarán con estilos inline)
+        if (variantType === "primary") {
+            return ``;
+        }
+        else if (variantType === "outline") {
+            return `border hover:bg-[var(--color-bg-secondary)]`;
+        }
+        else {
+            return `hover:bg-[var(--color-bg-secondary)]`;
+        }
+    };
+    // 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")}`;
+    };
+    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} ${children ? (iconPosition === "right" ? "ml-2" : "mr-2") : ""} mt-0.5` }));
+    };
+    // 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) => {
+        const targetElement = event.currentTarget;
+        if (targetElement) {
+            const rect = targetElement.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);
+    };
+    // Determinar si es una ruta externa (http/https) o interna
+    const isExternal = to.startsWith("http://") || to.startsWith("https://") || to.startsWith("mailto:") || to.startsWith("tel:");
+    // Combinar estilos inline - agregar outline: none para asegurar que no aparezca
+    const combinedStyles = {
+        ...inlineStyles,
+        outline: "none",
+        outlineWidth: "0",
+        outlineStyle: "none",
+        outlineOffset: "0",
+        WebkitTapHighlightColor: "transparent",
+        boxShadow: "none",
+    };
+    const linkProps = {
+        className: classes,
+        style: combinedStyles,
+        onClick: handleClick,
+        onFocus: (e) => {
+            e.currentTarget.style.outline = "none";
+            e.currentTarget.style.outlineWidth = "0";
+            e.currentTarget.style.outlineStyle = "none";
+            e.currentTarget.style.outlineOffset = "0";
+            e.currentTarget.style.boxShadow = "none";
+        },
+        onBlur: (e) => {
+            e.currentTarget.style.outline = "none";
+            e.currentTarget.style.outlineWidth = "0";
+            e.currentTarget.style.outlineStyle = "none";
+            e.currentTarget.style.outlineOffset = "0";
+            e.currentTarget.style.boxShadow = "none";
+        },
+        onKeyDown: (e) => {
+            // Eliminar outline cuando se presiona cualquier tecla
+            if (e.key === "Tab" || e.key === "Enter" || e.key === " ") {
+                e.currentTarget.style.outline = "none";
+                e.currentTarget.style.outlineWidth = "0";
+                e.currentTarget.style.outlineStyle = "none";
+                e.currentTarget.style.outlineOffset = "0";
+                e.currentTarget.style.boxShadow = "none";
+            }
+        },
+        onMouseEnter: (e) => {
+            if (variant === "primary") {
+                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,
+    };
+    if (isExternal) {
+        const externalTarget = target || "_blank";
+        return (_jsxs("a", { href: to, target: externalTarget, rel: externalTarget === "_blank" ? "noopener noreferrer" : undefined, ...linkProps, 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: [icon && iconPosition === "left" && renderIcon(), children, icon && iconPosition === "right" && renderIcon()] })] }));
+    }
+    return (_jsxs(Link, { to: to, ...linkProps, 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: [icon && iconPosition === "left" && renderIcon(), children, icon && iconPosition === "right" && renderIcon()] })] }));
+};

package/dist/components/form-controls/Pagination.d.ts

@@ -11,6 +11,7 @@ export interface PaginationProps {
     page?: number;
     pages?: number;
     total?: number;
+    isLoading?: boolean;
 }
 export declare const Pagination: React.FC<PaginationProps>;
 //# sourceMappingURL=Pagination.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsHhD,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0FhD,CAAC"}

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

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useSearchParams } from "react-router-dom";
 import { Button } from "./Button";
-export const Pagination = ({ fieldName = "pagina", page = 1, pages = 1, total = 0, }) => {
+export const Pagination = ({ fieldName = "pagina", page = 1, pages = 1, total = 0, isLoading = false, }) => {
     const [searchParams, setSearchParams] = useSearchParams();
     const navigateToPage = (newPage) => {
         if (newPage < 1 || newPage > pages || newPage === page) {
@@ -19,42 +19,5 @@ export const Pagination = ({ fieldName = "pagina", page = 1, pages = 1, total =
     const isFirstPage = page <= 1;
     const isLastPage = page >= pages;
     const hasPages = pages > 1;
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-double-left", onClick: goToFirstPage, disabled: isFirstPage || !hasPages, "aria-label": "Primera p\u00E1gina" }) }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-left", onClick: goToPreviousPage, disabled: isFirstPage || !hasPages, "aria-label": "P\u00E1gina anterior" }) }), _jsxs("div", { className: "text-xs", children: [_jsxs("span", { className: "block", children: ["P\u00E1gina ", page, " de ", pages] }), _jsxs("span", { className: "block", children: [total, " elemento", total !== 1 ? "s" : ""] })] }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-right", onClick: goToNextPage, disabled: isLastPage || !hasPages, "aria-label": "P\u00E1gina siguiente" }) }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-double-right", onClick: goToLastPage, disabled: isLastPage || !hasPages, "aria-label": "\u00DAltima p\u00E1gina" }) })] })
-    // <div className="flex flex-col items-center gap-0 font-[var(--font-default)]">
-    //   {/* Botones de navegación */}
-    //   <div className="flex items-center gap-2">
-    //
-    //     {/* Texto de página */}
-    //     <span
-    //       className="text-xs px-3 leading-none"
-    //       style={{ color: "var(--color-text-primary)" }}
-    //     >
-    //       Página {page} de {pages}
-    //     </span>
-    //     <Button
-    //       variant="ghost"
-    //       size="sm"
-    //       icon="fa-angle-right"
-    //       onClick={goToNextPage}
-    //       disabled={isLastPage || !hasPages}
-    //       aria-label="Página siguiente"
-    //     />
-    //     <Button
-    //       variant="ghost"
-    //       size="sm"
-    //       icon="fa-angle-double-right"
-    //       onClick={goToLastPage}
-    //       disabled={isLastPage || !hasPages}
-    //       aria-label="Última página"
-    //     />
-    //   </div>
-    //   {/* Texto de elementos */}
-    //   <span
-    //     className="text-xs leading-none"
-    //     style={{ color: "var(--color-text-secondary)" }}
-    //   >
-    //     {total} elemento{total !== 1 ? "s" : ""}
-    //   </span>
-    // </div>
-    );
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-double-left", onClick: goToFirstPage, disabled: isFirstPage || !hasPages || isLoading, "aria-label": "Primera p\u00E1gina" }) }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-left", onClick: goToPreviousPage, disabled: isFirstPage || !hasPages || isLoading, "aria-label": "P\u00E1gina anterior" }) }), _jsx("div", { className: `text-xs h-[32px] min-w-[100px] text-center flex flex-col justify-center`, children: isLoading ? (_jsx(_Fragment, { children: _jsx("span", { className: "block", children: "Cargando..." }) })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "block", children: ["P\u00E1gina ", page, " de ", pages] }), _jsxs("span", { className: "block", children: [total, " elemento", total !== 1 ? "s" : ""] })] })) }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-right", onClick: goToNextPage, disabled: isLastPage || !hasPages || isLoading, "aria-label": "P\u00E1gina siguiente" }) }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-double-right", onClick: goToLastPage, disabled: isLastPage || !hasPages || isLoading, "aria-label": "\u00DAltima p\u00E1gina" }) })] }));
 };

package/dist/components/form-controls/RadioButtonGroup.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+export interface RadioOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+export interface RadioButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
+    /**
+     * Array de opciones para renderizar radios automáticamente
+     */
+    options: RadioOption[];
+    /**
+     * Valor seleccionado (controlado)
+     */
+    value?: string | number;
+    /**
+     * Callback cuando cambia la selección
+     * Puede recibir un valor directo o un evento (para compatibilidad con react-hook-form)
+     */
+    onChange?: ((value: string | number) => void) | React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Posición del label para todas las opciones
+     */
+    labelPosition?: "left" | "right";
+    /**
+     * Tamaño de los radio buttons
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Mensaje de error a mostrar
+     */
+    error?: string;
+    /**
+     * Dirección del layout: vertical (columna) o horizontal (fila)
+     */
+    direction?: "vertical" | "horizontal";
+    /**
+     * Espaciado entre opciones
+     */
+    gap?: "sm" | "md" | "lg";
+    /**
+     * Nombre del campo (para react-hook-form)
+     */
+    name?: string;
+    /**
+     * Estado deshabilitado
+     */
+    disabled?: boolean;
+    /**
+     * Callback cuando pierde el foco
+     * Puede recibir un evento (para compatibilidad con react-hook-form) o ser una función sin parámetros
+     */
+    onBlur?: (() => void) | React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Si es true, el radio group será de solo lectura. Las opciones no seleccionadas se verán deshabilitadas
+     * y la seleccionada se verá igual, pero no se podrá cambiar el valor.
+     * Por defecto es false.
+     */
+    readOnly?: boolean;
+}
+export declare const RadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=RadioButtonGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/RadioButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC3E;;OAEG;IACH,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EACL,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC,GAClC,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC/C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC;;OAEG;IACH,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAClE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,gGAmV5B,CAAC"}