flysoft-react-ui 1.2.3 → 1.2.5

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

@@ -1,144 +0,0 @@
-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 = dayjs(date);
-    return d.startOf("day");
-};
-const isSameDay = (a, b) => {
-    return a.isSame(b, "day");
-};
-const getDaysInMonth = (year, month) => {
-    return dayjs().year(year).month(month).daysInMonth();
-};
-const getWeekdayLabels = (startWeekOn) => {
-    const base = ["D", "L", "M", "X", "J", "V", "S"];
-    if (startWeekOn === "sunday") {
-        return base;
-    }
-    return [...base.slice(1), base[0]];
-};
-export const DatePicker = ({ value, onChange, initialViewDate, startWeekOn = "sunday", className = "", }) => {
-    const today = React.useMemo(() => dayjs().startOf("day"), []);
-    const getViewFromValue = React.useCallback((val) => {
-        const base = val ?? initialViewDate ?? today;
-        return {
-            month: base.month(),
-            year: base.year(),
-        };
-    }, [initialViewDate, today]);
-    const [view, setView] = React.useState(() => getViewFromValue(value));
-    React.useEffect(() => {
-        // 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;
-            const year = prev.month === 0 ? prev.year - 1 : prev.year;
-            return { month, year };
-        });
-    };
-    const handleNextMonth = () => {
-        setView((prev) => {
-            const month = prev.month === 11 ? 0 : prev.month + 1;
-            const year = prev.month === 11 ? prev.year + 1 : prev.year;
-            return { month, year };
-        });
-    };
-    const handlePrevYear = () => {
-        setView((prev) => ({ ...prev, year: prev.year - 1 }));
-    };
-    const handleNextYear = () => {
-        setView((prev) => ({ ...prev, year: prev.year + 1 }));
-    };
-    const handleSelectDay = (day, month, year) => {
-        const targetMonth = month !== undefined ? month : view.month;
-        const targetYear = year !== undefined ? year : view.year;
-        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) {
-            setView({ month: targetMonth, year: targetYear });
-        }
-        else if (year !== undefined && year !== view.year) {
-            setView({ month: targetMonth, year: targetYear });
-        }
-    };
-    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"
-        ? firstWeekday
-        : firstWeekday === 0
-            ? 6
-            : firstWeekday - 1;
-    // Calcular días del mes anterior y siguiente
-    const prevMonth = view.month === 0 ? 11 : view.month - 1;
-    const prevYear = view.month === 0 ? view.year - 1 : view.year;
-    const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth);
-    const nextMonth = view.month === 11 ? 0 : view.month + 1;
-    const nextYear = view.month === 11 ? view.year + 1 : view.year;
-    const weeks = [];
-    // Construir todas las semanas (6 semanas = 42 días)
-    let dayCounter = 1 - offset; // Puede ser negativo para días del mes anterior
-    for (let week = 0; week < 6; week++) {
-        const currentWeek = [];
-        for (let dayOfWeek = 0; dayOfWeek < 7; dayOfWeek++) {
-            if (dayCounter < 1) {
-                // Día del mes anterior
-                const day = daysInPrevMonth + dayCounter;
-                currentWeek.push({ day, month: prevMonth, year: prevYear });
-            }
-            else if (dayCounter > daysInMonth) {
-                // Día del mes siguiente
-                const day = dayCounter - daysInMonth;
-                currentWeek.push({ day, month: nextMonth, year: nextYear });
-            }
-            else {
-                // Día del mes actual
-                currentWeek.push({
-                    day: dayCounter,
-                    month: view.month,
-                    year: view.year,
-                });
-            }
-            dayCounter++;
-        }
-        weeks.push(currentWeek);
-    }
-    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 = 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";
-                        if (isSelected) {
-                            dayClasses +=
-                                " bg-[var(--color-primary)] text-[var(--color-primary-contrast)]";
-                        }
-                        else if (isToday) {
-                            dayClasses +=
-                                " border border-[var(--color-primary)] text-[var(--color-primary)]";
-                        }
-                        else if (isCurrentMonth) {
-                            dayClasses +=
-                                " text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)]";
-                        }
-                        else {
-                            dayClasses +=
-                                " text-[var(--color-text-muted)] opacity-50 hover:bg-[var(--color-bg-secondary)] hover:opacity-75";
-                        }
-                        return (_jsx("button", { type: "button", className: dayClasses, onClick: () => handleSelectDay(day, month, year), children: day }, index));
-                    }) }, rowIndex))) })] }));
-};

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

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-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
-    disabled:opacity-50 disabled:cursor-not-allowed
-    font-[var(--font-default)] text-[var(--color-text-primary)]
-    flysoft-input-reset box-border
-  `;
-    const readOnlyClasses = readOnly
-        ? `border-transparent bg-transparent focus:ring-0`
-        : `focus:ring-1 bg-[var(--color-bg-default)]`;
-    const sizeClasses = {
-        sm: `${readOnly ? "p-0" : "px-3 py-1.5"} text-sm`,
-        md: `${readOnly ? "p-0" : "px-4 py-2"} text-base`,
-        lg: `${readOnly ? "p-0" : "px-6 py-3"} text-lg`,
-    };
-    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 || readOnly)
-            return null;
-        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", { ref: ref, id: inputId, className: `${inputClasses} ${icon && iconPosition === "left" && !readOnly ? "pl-10" : ""} ${icon && iconPosition === "right" && !readOnly ? "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.js

@@ -1,248 +0,0 @@
-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.js

@@ -1,23 +0,0 @@
-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, isLoading = false, }) => {
-    const [searchParams, setSearchParams] = useSearchParams();
-    const navigateToPage = (newPage) => {
-        if (newPage < 1 || newPage > pages || newPage === page) {
-            return;
-        }
-        const newSearchParams = new URLSearchParams(searchParams);
-        newSearchParams.set(fieldName, newPage.toString());
-        setSearchParams(newSearchParams, { replace: true });
-    };
-    const goToFirstPage = () => navigateToPage(1);
-    const goToPreviousPage = () => navigateToPage(page - 1);
-    const goToNextPage = () => navigateToPage(page + 1);
-    const goToLastPage = () => navigateToPage(pages);
-    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 || 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" }) })] }));
-};