flysoft-react-ui 1.2.4 → 1.2.6

package/dist/components/layout/AppLayout.js

@@ -1,230 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useRef } from "react";
-import { useBreakpoint } from "../../hooks";
-import { useElementScroll } from "../../hooks/useElementScroll";
-import { Button } from "../form-controls";
-export const AppLayout = ({ navbar, leftDrawer, contentFooter, children, className = "", }) => {
-    // Extract values from interfaces
-    const navBarLeftNode = navbar?.navBarLeftNode;
-    const navBarRightNode = navbar?.navBarRightNode;
-    const fullWidthNavbar = navbar?.fullWidthNavbar ?? true;
-    const navbarHeight = navbar?.height ?? "64px";
-    const navbarClassName = navbar?.className || "";
-    const leftDrawerHeader = leftDrawer?.headerNode;
-    const leftDrawerContent = leftDrawer?.contentNode;
-    const leftDrawerFooter = leftDrawer?.footerNode;
-    const leftDrawerClassName = leftDrawer?.className || "";
-    const leftDrawerWidth = leftDrawer?.width;
-    const { isMobile, isTablet } = useBreakpoint();
-    const contentRef = useRef(null);
-    const { scrollY, scrollDirection } = useElementScroll(contentRef);
-    const [isMobileDrawerOpen, setIsMobileDrawerOpen] = useState(false);
-    const [isNavbarVisible, setIsNavbarVisible] = useState(true);
-    const isNavbarVisibleRef = useRef(isNavbarVisible);
-    const isTransitioningRef = useRef(false);
-    const lastScrollYRef = useRef(0);
-    // Determinar si hay algún contenido en el drawer izquierdo
-    const hasLeftDrawerContent = leftDrawerHeader || leftDrawerContent || leftDrawerFooter;
-    const shouldShowMobileDrawer = isMobile || isTablet;
-    const shouldShowDesktopDrawer = !shouldShowMobileDrawer && hasLeftDrawerContent;
-    // Determinar si debemos mostrar el navbar
-    // Se muestra si hay navBarLeftNode o navBarRightNode o si estamos en móvil/tablet con contenido en el drawer
-    const shouldShowNavbar = navBarLeftNode ||
-        navBarRightNode ||
-        (shouldShowMobileDrawer && hasLeftDrawerContent);
-    // Mantener el ref sincronizado con el estado
-    React.useEffect(() => {
-        isNavbarVisibleRef.current = isNavbarVisible;
-        // Marcar que estamos en transición por 350ms (duración de la transición + margen)
-        isTransitioningRef.current = true;
-        const timer = setTimeout(() => {
-            isTransitioningRef.current = false;
-        }, 350);
-        return () => clearTimeout(timer);
-    }, [isNavbarVisible]);
-    // Controlar visibilidad del navbar basado en scroll con histeresis mejorada
-    React.useEffect(() => {
-        // Ignorar cambios durante transiciones o cambios muy pequeños de scroll
-        if (isTransitioningRef.current) {
-            return;
-        }
-        const SCROLL_DELTA_THRESHOLD = 5; // Mínimo cambio de scroll para considerar
-        const scrollDelta = Math.abs(scrollY - lastScrollYRef.current);
-        // Ignorar cambios muy pequeños que pueden ser causados por el cambio de padding
-        if (scrollDelta < SCROLL_DELTA_THRESHOLD && lastScrollYRef.current > 0) {
-            return;
-        }
-        const SHOW_THRESHOLD = 80;
-        const HIDE_THRESHOLD = 120;
-        // Verificar si estamos cerca del final del scroll (margen de error de 10px)
-        const element = contentRef.current;
-        const isNearBottom = element
-            ? Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 10
-            : false;
-        let shouldBeVisible;
-        if (scrollY < SHOW_THRESHOLD) {
-            // Siempre mostrar navbar cerca del top
-            shouldBeVisible = true;
-        }
-        else if (scrollDirection === "down" &&
-            scrollY > HIDE_THRESHOLD &&
-            !isNearBottom) {
-            // Ocultar navbar al hacer scroll hacia abajo, excepto si estamos cerca del final
-            shouldBeVisible = false;
-        }
-        else if (scrollDirection === "up" && scrollY > SHOW_THRESHOLD) {
-            // Mostrar navbar al hacer scroll hacia arriba
-            shouldBeVisible = true;
-        }
-        else if (isNearBottom && scrollDirection === "down") {
-            // Si estamos en el final y scrolleamos hacia abajo, mantener el estado actual
-            return;
-        }
-        else {
-            // No cambiar el estado si scrollDirection es null o no se cumple ninguna condición
-            return;
-        }
-        // Solo actualizar el estado si hay un cambio real
-        if (shouldBeVisible !== isNavbarVisibleRef.current) {
-            lastScrollYRef.current = scrollY;
-            setIsNavbarVisible(shouldBeVisible);
-        }
-        else {
-            // Actualizar la referencia del scroll incluso si no cambiamos la visibilidad
-            lastScrollYRef.current = scrollY;
-        }
-    }, [scrollDirection, scrollY]);
-    const handleMobileDrawerToggle = () => {
-        setIsMobileDrawerOpen(!isMobileDrawerOpen);
-    };
-    const handleOverlayClick = () => {
-        setIsMobileDrawerOpen(false);
-    };
-    // Clases base del layout
-    const layoutClasses = `
-    flex flex-col w-full ${navbar?.navBarLeftNode || navbar?.navBarRightNode || leftDrawer?.contentNode || leftDrawer?.headerNode || leftDrawer?.footerNode ? "h-screen overflow-hidden" : "h-auto"}
-    font-[var(--font-default)]
-    ${className}
-  `;
-    // Clases del navbar
-    const navbarClasses = `${fullWidthNavbar
-        ? `z-[1000] fixed top-0 left-0 right-0 overflow-hidden`
-        : `relative z-[1000] overflow-hidden`} ${navbarClassName}`.trim();
-    // Estilos inline para la transformación
-    // Cuando fullWidthNavbar es false, solo usamos height para ocultar (sin transform)
-    // Cuando fullWidthNavbar es true, usamos transform para ocultar (manteniendo height)
-    const navbarStyle = fullWidthNavbar
-        ? {
-            transform: isNavbarVisible ? "translateY(0)" : "translateY(-100%)",
-            transition: "transform 100ms ease-in",
-            willChange: "transform",
-            height: navbarHeight, // Override any height classes in className
-        }
-        : {
-            height: isNavbarVisible ? navbarHeight : "0",
-            minHeight: isNavbarVisible ? navbarHeight : "0",
-            maxHeight: isNavbarVisible ? navbarHeight : "0",
-            transition: "height 100ms ease-in, min-height 100ms ease-in, max-height 100ms ease-in",
-            overflow: "hidden",
-        };
-    const navbarContentClasses = `flex items-center justify-between gap-2`;
-    // Style for navbar content with dynamic height
-    // When fullWidthNavbar is false and hidden, set height to 0 to not occupy space
-    // When fullWidthNavbar is true, always maintain height to prevent layout shifts
-    const navbarContentStyle = {
-        height: fullWidthNavbar || isNavbarVisible ? navbarHeight : "0",
-        maxHeight: fullWidthNavbar || isNavbarVisible ? navbarHeight : "0",
-        overflow: "hidden",
-        transition: "height 100ms ease-in, max-height 100ms ease-in",
-        opacity: isNavbarVisible || fullWidthNavbar ? 1 : 0,
-    };
-    const navbarLeftClasses = `flex items-center gap-2`;
-    const navbarRightClasses = `flex items-center gap-2`;
-    // Clases del contenido principal
-    const mainClasses = `flex flex-1 overflow-hidden transition-all duration-100 ease-in`;
-    // Style for main content with dynamic navbar height padding
-    // No padding here anymore, it's handled by individual elements
-    const mainStyle = {};
-    // Style for the main content area (actual scrollable area)
-    // When fullWidthNavbar is true, we need top padding to avoid being covered by fixed navbar
-    const contentStyle = fullWidthNavbar && shouldShowNavbar && isNavbarVisible
-        ? { paddingTop: navbarHeight }
-        : {};
-    // Clases del drawer izquierdo (contenedor principal)
-    // width se aplica como estilo inline para tener prioridad sobre className
-    const leftDrawerClasses = `
-    ${leftDrawerWidth ? "" : "w-64"} bg-[var(--color-bg-default)]
-    flex-shrink-0 flex flex-col
-    transition-all duration-100 ease-in
-    ${leftDrawerClassName}
-  `
-        .trim()
-        .replace(/\s+/g, " ");
-    // Style for left drawer with dynamic height and positioning
-    const leftDrawerStyle = {
-        ...(leftDrawerWidth ? { width: leftDrawerWidth } : {}),
-        height: "100%", // Siempre 100% para evitar huecos en la parte superior
-    };
-    if (fullWidthNavbar) {
-        // Si el navbar es fullwidth, el drawer mide 100% y usamos padding para que el contenido
-        // no quede debajo del navbar fixed.
-        leftDrawerStyle.paddingTop =
-            shouldShowNavbar && isNavbarVisible ? navbarHeight : "0px";
-        leftDrawerStyle.transition = "padding-top 100ms ease-in";
-    }
-    else {
-        // Si no es fullwidth, el drawer está al lado del navbar.
-        // No necesitamos marginTop ni height dinámico porque ya está en un flex-row
-        // y queremos que ocupe siempre todo el alto desde el borde superior.
-        leftDrawerStyle.marginTop = "0px";
-        leftDrawerStyle.transition = "padding-top 100ms ease-in";
-    }
-    // Clases del contenedor que incluye drawer y contenido (cuando fullWidthNavbar es false)
-    const contentWrapperClasses = fullWidthNavbar
-        ? ""
-        : `flex flex-row flex-1 overflow-hidden`;
-    // Clases del contenedor que incluye navbar y main (cuando fullWidthNavbar es false)
-    const drawerAndContentClasses = fullWidthNavbar
-        ? ""
-        : `flex flex-col flex-1 overflow-hidden`;
-    // Style for drawer and content wrapper with dynamic navbar height padding
-    const drawerAndContentStyle = !fullWidthNavbar && shouldShowNavbar && isNavbarVisible
-        ? { paddingTop: 0 }
-        : {};
-    // Clases del header del drawer (fijo arriba)
-    const leftDrawerHeaderClasses = `
-    flex-shrink-0
-  `;
-    // Clases del contenido del drawer (scrolleable sin scrollbar visible)
-    const leftDrawerContentClasses = `
-    flex-1 overflow-y-auto scrollbar-hide
-  `;
-    // Clases del footer del drawer (fijo abajo)
-    const leftDrawerFooterClasses = `
-    flex-shrink-0
-  `;
-    const contentClasses = `
-    flex-1 overflow-y-auto flex flex-col
-  `;
-    // Clases del overlay móvil
-    const overlayClasses = `
-    fixed inset-0 bg-black/50 backdrop-blur-sm z-[1998]
-  `;
-    // Clases del drawer móvil
-    const mobileDrawerBaseClasses = `
-    fixed top-0 left-0 h-screen w-64 max-w-[80vw]
-    bg-[var(--color-bg-default)] shadow-[var(--shadow-xl)]
-    transform -translate-x-full transition-transform duration-100 ease-in
-    z-[1999] flex flex-col
-    ${leftDrawerClassName}
-  `
-        .trim()
-        .replace(/\s+/g, " ");
-    // Style for mobile drawer with dynamic width
-    const mobileDrawerStyle = leftDrawerWidth ? { width: leftDrawerWidth } : {};
-    const mobileDrawerOpenClasses = `translate-x-0`;
-    const mobileDrawerContentClasses = `
-    flex-1 overflow-y-auto scrollbar-hide
-  `;
-    return (_jsxs("div", { className: layoutClasses, children: [fullWidthNavbar ? (_jsxs(_Fragment, { children: [shouldShowNavbar && (_jsx("nav", { className: navbarClasses, style: navbarStyle, children: _jsxs("div", { className: navbarContentClasses, style: navbarContentStyle, children: [_jsxs("div", { className: navbarLeftClasses, children: [shouldShowMobileDrawer && hasLeftDrawerContent && (_jsx("div", { className: "pr-4 lg:px-4 md:px-3", children: _jsx(Button, { variant: "ghost", icon: "fa-bars", onClick: handleMobileDrawerToggle, "aria-label": "Abrir men\u00FA" }) })), navBarLeftNode && (_jsx("div", { children: typeof navBarLeftNode === "string" ? (_jsx("span", { children: navBarLeftNode })) : (navBarLeftNode) }))] }), navBarRightNode && (_jsx("div", { className: navbarRightClasses, children: typeof navBarRightNode === "string" ? (_jsx("span", { children: navBarRightNode })) : (navBarRightNode) }))] }) })), _jsxs("div", { className: mainClasses, style: mainStyle, children: [shouldShowDesktopDrawer && (_jsxs("aside", { className: leftDrawerClasses, style: leftDrawerStyle, children: [leftDrawerHeader && (_jsx("div", { className: leftDrawerHeaderClasses, children: leftDrawerHeader })), leftDrawerContent && (_jsx("div", { className: leftDrawerContentClasses, children: leftDrawerContent })), leftDrawerFooter && (_jsx("div", { className: leftDrawerFooterClasses, children: leftDrawerFooter }))] })), _jsxs("main", { ref: contentRef, className: contentClasses, style: contentStyle, children: [_jsx("div", { className: "flex-1", children: children }), contentFooter && _jsx("div", { role: "contentinfo", children: contentFooter })] })] })] })) : (_jsx(_Fragment, { children: _jsxs("div", { className: contentWrapperClasses, children: [shouldShowDesktopDrawer && (_jsxs("aside", { className: leftDrawerClasses, style: leftDrawerStyle, children: [leftDrawerHeader && (_jsx("div", { className: leftDrawerHeaderClasses, children: leftDrawerHeader })), leftDrawerContent && (_jsx("div", { className: leftDrawerContentClasses, children: leftDrawerContent })), leftDrawerFooter && (_jsx("div", { className: leftDrawerFooterClasses, children: leftDrawerFooter }))] })), _jsxs("div", { className: drawerAndContentClasses, style: drawerAndContentStyle, children: [shouldShowNavbar && (_jsx("nav", { className: navbarClasses, style: navbarStyle, children: _jsxs("div", { className: navbarContentClasses, style: navbarContentStyle, children: [_jsxs("div", { className: navbarLeftClasses, children: [shouldShowMobileDrawer && hasLeftDrawerContent && (_jsx("div", { className: "pr-4 px-2", children: _jsx(Button, { variant: "ghost", icon: "fa-bars", onClick: handleMobileDrawerToggle, "aria-label": "Abrir men\u00FA" }) })), navBarLeftNode && (_jsx("div", { children: typeof navBarLeftNode === "string" ? (_jsx("span", { children: navBarLeftNode })) : (navBarLeftNode) }))] }), navBarRightNode && (_jsx("div", { className: navbarRightClasses, children: typeof navBarRightNode === "string" ? (_jsx("span", { children: navBarRightNode })) : (navBarRightNode) }))] }) })), _jsxs("main", { ref: contentRef, className: contentClasses, style: contentStyle, children: [_jsx("div", { className: "flex-1", children: children }), contentFooter && _jsx("div", { role: "contentinfo", children: contentFooter })] })] })] }) })), shouldShowMobileDrawer && hasLeftDrawerContent && isMobileDrawerOpen && (_jsx("div", { className: overlayClasses, onClick: handleOverlayClick })), shouldShowMobileDrawer && hasLeftDrawerContent && (_jsxs("aside", { className: `${mobileDrawerBaseClasses} ${isMobileDrawerOpen ? mobileDrawerOpenClasses : ""}`, style: mobileDrawerStyle, children: [_jsxs("div", { className: "flex-shrink-0 flex items-center justify-between", children: [leftDrawerHeader ? (_jsx("div", { className: "flex-1", children: leftDrawerHeader })) : (_jsx("div", { className: "flex-1" })), _jsx("div", { className: "absolute top-3 right-2", children: _jsx(Button, { variant: "ghost", icon: "fa-times", onClick: handleMobileDrawerToggle, "aria-label": "Cerrar men\u00FA" }) })] }), leftDrawerContent && (_jsx("div", { className: mobileDrawerContentClasses, children: leftDrawerContent })), leftDrawerFooter && (_jsx("div", { className: "flex-shrink-0", children: leftDrawerFooter }))] }))] }));
-};

package/dist/components/layout/Card.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { twMerge } from "tailwind-merge";
-export const Card = ({ title, subtitle, children, className = "", headerActions, footer, variant = "default", alwaysDisplayHeaderActions = false, headerClassName = "", contentClassName = "", footerClassName = "", compact = false, }) => {
-    const variantClasses = {
-        default: "border-[var(--color-border-default)]",
-        elevated: "border-[var(--color-border-default)] shadow-[var(--shadow-lg)]",
-        outlined: "border-[var(--color-gray-300)]",
-    };
-    // Unimos las clases usando twMerge para consistencia
-    const mergedClasses = twMerge("bg-[var(--color-bg-default)] rounded-lg border font-[var(--font-default)]", variantClasses[variant], className);
-    // Verificamos si existe alguna clase de ancho (w-*) que no sea w-auto.
-    // Es importante distinguir entre w-* (ancho) y max-w-*/min-w-* (límites),
-    // ya que un max-w-* sin un w-full puede hacer que la card colapse a su contenido.
-    const hasExplicitWidth = mergedClasses.split(/\s+/).some((cls) => {
-        const mainClass = cls.split(":").pop() || "";
-        return (mainClass.startsWith("w-") &&
-            mainClass !== "w-auto" &&
-            !mainClass.startsWith("max-w-") &&
-            !mainClass.startsWith("min-w-"));
-    });
-    // Si no hay un ancho explícito, forzamos w-full para que ocupe todo el espacio disponible
-    // (incluyendo el espacio limitado por un posible max-w- en la misma card o en su padre).
-    const classes = hasExplicitWidth ? mergedClasses : `${mergedClasses} w-full`;
-    const [isHovered, setIsHovered] = React.useState(false);
-    const [isLargeScreen, setIsLargeScreen] = React.useState(false);
-    React.useEffect(() => {
-        const checkScreenSize = () => {
-            // md breakpoint en Tailwind es 768px, así que lg es 1024px
-            setIsLargeScreen(window.innerWidth >= 1024);
-        };
-        checkScreenSize();
-        window.addEventListener("resize", checkScreenSize);
-        return () => {
-            window.removeEventListener("resize", checkScreenSize);
-        };
-    }, []);
-    // Determinar la opacidad de las headerActions
-    const getHeaderActionsOpacity = () => {
-        if (!headerActions)
-            return 0;
-        // En pantallas pequeñas (md e inferiores) siempre se muestran
-        if (!isLargeScreen)
-            return 1;
-        // Si alwaysDisplayHeaderActions es true, siempre se muestran
-        if (alwaysDisplayHeaderActions)
-            return 1;
-        // Si es false y pantalla grande, solo al hacer hover
-        return isHovered ? 1 : 0;
-    };
-    return (_jsxs("div", { className: `${classes} relative`, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(title || subtitle || headerActions) && (_jsx("div", { className: twMerge(compact ? "px-4 pt-2" : "px-6 pt-4", headerClassName), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [title && (_jsx("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title })), subtitle && (_jsx("div", { className: "text-sm text-[var(--color-text-secondary)] mt-1", children: subtitle }))] }), headerActions && (_jsx("div", { className: "flex items-center transition-opacity", style: {
-                                opacity: getHeaderActionsOpacity(),
-                            }, children: headerActions }))] }) })), children && (_jsx("div", { className: twMerge(compact ? "px-4 py-4" : "px-6 py-4", contentClassName), children: children })), footer && (_jsx("div", { className: twMerge(compact ? "px-4 pb-2" : "px-6 pb-4", "flex items-center justify-end", footerClassName), children: footer }))] }));
-};

package/dist/components/layout/Collection.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-export const Collection = ({ children, gap = "1rem", direction = "column", wrap = false, className = "", }) => {
-    const baseClasses = `
-    flex
-    font-[var(--font-default)]
-  `;
-    const directionClasses = {
-        column: "flex-col",
-        row: "flex-row",
-    };
-    const wrapClass = wrap ? "flex-wrap" : "flex-nowrap";
-    const classes = `${baseClasses} ${directionClasses[direction]} ${wrapClass} ${className}`.trim();
-    const style = {
-        gap: gap,
-    };
-    return (_jsx("div", { className: classes, style: style, children: children }));
-};

package/dist/components/layout/DataField.js

@@ -1,38 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { Button } from "../form-controls";
-export const DataField = ({ label, value, inline = false, align = "left", title, link, className = "", labelClassName = "", }) => {
-    const handleLinkClick = () => {
-        if (link) {
-            window.open(link, "_blank", "noopener,noreferrer");
-        }
-    };
-    const alignClasses = {
-        left: "text-left",
-        right: "text-right",
-        center: "text-center",
-    };
-    const justifyClasses = {
-        left: "justify-start",
-        right: "justify-end",
-        center: "justify-center",
-    };
-    const baseContainerClasses = `
-    font-[var(--font-default)]
-    ${alignClasses[align]}
-    ${className}
-  `.trim();
-    const baseLabelClasses = `
-    text-sm text-[var(--color-text-primary)]
-    ${labelClassName}
-  `.trim();
-    const baseValueClasses = `
-    text-base text-[var(--color-text-primary)]
-  `;
-    if (inline) {
-        // Modo inline: label y value en la misma línea
-        return (_jsx("div", { className: baseContainerClasses, title: title, children: _jsxs("div", { className: `flex items-center gap-2 ${justifyClasses[align]}`, children: [label && _jsxs("span", { className: baseLabelClasses, children: [label, ":"] }), _jsx("span", { className: baseValueClasses, children: value }), link && (_jsx(Button, { size: "sm", variant: "ghost", icon: "fa-arrow-right", onClick: handleLinkClick, "aria-label": "Abrir enlace" }))] }) }));
-    }
-    // Modo vertical: label arriba, value abajo
-    return (_jsxs("div", { className: baseContainerClasses, title: title, children: [label && _jsx("div", { className: baseLabelClasses, children: label }), _jsxs("div", { className: `flex items-center gap-2 ${justifyClasses[align]}`, children: [_jsx("div", { className: baseValueClasses, children: value }), link && (_jsx(Button, { size: "sm", variant: "ghost", icon: "fa-arrow-right", onClick: handleLinkClick, "aria-label": "Abrir enlace" }))] })] }));
-};

package/dist/components/layout/DataTable.js

@@ -1,164 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { twMerge } from "tailwind-merge";
-import { DropdownMenu } from "./DropdownMenu";
-export const DataTable = ({ columns, rows, className = "", maxRows, locale = "es-AR", isLoading = false, loadingRows = 5, rowClassName, headerClassName = "", footerClassName = "", headerCellClassName = "", footerCellClassName = "", cellClassName = "", compact = false, }) => {
-    // Calcular si necesitamos scroll
-    const displayRows = isLoading ? loadingRows : rows.length;
-    const needsScroll = maxRows !== undefined && displayRows > maxRows;
-    // Altura aproximada de una fila (px-4 py-3 = ~48px por fila, compact es menos)
-    const rowHeight = compact ? 32 : 48;
-    const maxHeight = maxRows ? `${maxRows * rowHeight}px` : undefined;
-    const cellPadding = compact ? "px-2 py-1" : "px-4 py-3";
-    // Verificar si alguna columna tiene footer
-    const hasFooter = columns.some((column) => column.footer !== undefined);
-    const getCellValue = (column, row) => {
-        if (!column.value)
-            return null;
-        if (typeof column.value === "function") {
-            return column.value(row);
-        }
-        // Si es string o number, puede ser un nombre de propiedad o un valor directo
-        if (typeof column.value === "string" || typeof column.value === "number") {
-            // Intentar obtener la propiedad del objeto si existe
-            if (typeof column.value === "string" &&
-                typeof row === "object" &&
-                row !== null) {
-                const value = row[column.value];
-                if (value !== undefined) {
-                    return value;
-                }
-            }
-            // Si no es una propiedad, retornar el valor directo
-            return column.value;
-        }
-        return column.value;
-    };
-    const formatValue = (value, type) => {
-        if (React.isValidElement(value)) {
-            return value;
-        }
-        // Convertir string a número si es necesario para currency o numeric
-        let numericValue = null;
-        if (typeof value === "number") {
-            numericValue = value;
-        }
-        else if (typeof value === "string" &&
-            (type === "currency" || type === "numeric")) {
-            const parsed = parseFloat(value);
-            if (!isNaN(parsed)) {
-                numericValue = parsed;
-            }
-        }
-        if (numericValue !== null) {
-            if (type === "currency") {
-                // Formatear usando el locale proporcionado sin símbolo de moneda
-                const parts = new Intl.NumberFormat(locale, {
-                    style: "currency",
-                    currency: "EUR",
-                    minimumFractionDigits: 2,
-                    maximumFractionDigits: 2,
-                }).formatToParts(numericValue);
-                // Construir el string sin el símbolo de moneda
-                return parts
-                    .filter((part) => part.type !== "currency")
-                    .map((part) => part.value)
-                    .join("");
-            }
-            if (type === "numeric") {
-                // Formatear usando el locale proporcionado
-                const hasDecimals = numericValue % 1 !== 0;
-                return new Intl.NumberFormat(locale, {
-                    minimumFractionDigits: hasDecimals ? 2 : 0,
-                    maximumFractionDigits: hasDecimals ? 2 : 0,
-                }).format(numericValue);
-            }
-        }
-        if (typeof value === "string" && type === "date") {
-            try {
-                const date = new Date(value);
-                return date.toLocaleDateString(locale);
-            }
-            catch {
-                return value;
-            }
-        }
-        return value;
-    };
-    const getAlignmentClass = (align, type) => {
-        // Las columnas de tipo 'date' siempre se alinean a la izquierda
-        // Las columnas de tipo 'currency' y 'numeric' siempre se alinean a la derecha
-        let effectiveAlign = align;
-        if (type === "date") {
-            effectiveAlign = "left";
-        }
-        else if (type === "currency" || type === "numeric") {
-            effectiveAlign = "right";
-        }
-        switch (effectiveAlign) {
-            case "right":
-                return "text-right";
-            case "center":
-                return "text-center";
-            case "left":
-            default:
-                return "text-left";
-        }
-    };
-    // Convertir array de ReactNode a array de ActionItem para DropdownMenu
-    const convertActionsToOptions = (actions) => {
-        return actions.map((action, index) => ({
-            id: index,
-            content: (_jsx("div", { onClick: (e) => {
-                    // Detener la propagación para que el onClick del DropdownMenu no interfiera
-                    e.stopPropagation();
-                }, children: action })),
-        }));
-    };
-    // Componente Skeleton para celdas de carga
-    const SkeletonCell = () => (_jsx("div", { className: "h-4 bg-[var(--color-border-default)]/40 rounded animate-pulse w-full" }));
-    return (_jsx("div", { className: `overflow-x-auto ${className}`, children: _jsx("div", { className: needsScroll ? "relative overflow-y-auto" : "", style: needsScroll && maxHeight ? { maxHeight: maxHeight } : undefined, children: _jsxs("table", { className: "w-full border-collapse font-[var(--font-default)]", children: [_jsx("thead", { className: needsScroll ? "sticky top-0 z-10" : "", children: _jsx("tr", { className: twMerge("border-b border-[var(--color-border-default)] text-[var(--color-text-primary)]", headerClassName), children: columns.map((column, index) => {
-                                const headerActions = column.headerActions?.();
-                                const hasHeaderActions = headerActions && headerActions.length > 0;
-                                const headerBgClasses = headerClassName
-                                    .split(/\s+/)
-                                    .filter((cls) => cls.split(":").pop()?.startsWith("bg-"))
-                                    .join(" ");
-                                return (_jsx("th", { className: twMerge(cellPadding, "text-sm font-semibold", headerBgClasses || "bg-[var(--color-bg-secondary)]", getAlignmentClass(column.align, column.type), hasHeaderActions ? "relative" : "", headerCellClassName), style: {
-                                        ...(column.width ? { width: column.width } : {}),
-                                    }, children: isLoading ? (_jsx(SkeletonCell, {})) : hasHeaderActions ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { children: column.header || "" }), _jsx(DropdownMenu, { options: convertActionsToOptions(headerActions), onOptionSelected: () => {
-                                                    // Las acciones ya manejan sus propios eventos
-                                                }, renderOption: (item) => item.content, replaceOnSingleOption: true })] })) : (column.header || "") }, index));
-                            }) }) }), _jsx("tbody", { children: isLoading
-                            ? Array.from({ length: loadingRows }).map((_, rowIndex) => (_jsx("tr", { className: "border-b border-[var(--color-border-default)] text-[var(--color-text-primary)]", children: columns.map((column, colIndex) => (_jsx("td", { className: twMerge(cellPadding, "text-sm", getAlignmentClass(column.align, column.type)), style: {
-                                        ...(column.width ? { width: column.width } : {}),
-                                    }, children: _jsx(SkeletonCell, {}) }, colIndex))) }, `skeleton-${rowIndex}`)))
-                            : rows.map((row, rowIndex) => (_jsx("tr", { className: twMerge("group/row border-b border-[var(--color-border-default)] transition-colors hover:bg-[var(--color-bg-secondary)] text-[var(--color-text-primary)]", rowClassName?.(row)), children: columns.map((column, colIndex) => {
-                                    const cellValue = getCellValue(column, row);
-                                    const formattedValue = formatValue(cellValue, column.type);
-                                    const tooltip = column.tooltip
-                                        ? column.tooltip(row)
-                                        : undefined;
-                                    const rowActions = column.actions?.(row);
-                                    const hasRowActions = rowActions && rowActions.length > 0;
-                                    return (_jsx("td", { className: twMerge(cellPadding, "text-sm", getAlignmentClass(column.align, column.type), typeof cellClassName === "function"
-                                            ? cellClassName(row, column)
-                                            : cellClassName), style: {
-                                            ...(column.width ? { width: column.width } : {}),
-                                        }, title: tooltip
-                                            ? typeof tooltip === "string"
-                                                ? tooltip
-                                                : undefined
-                                            : undefined, children: hasRowActions ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { children: formattedValue }), _jsx("div", { className: "lg:opacity-0 lg:group-hover/row:opacity-100 transition-opacity", children: _jsx(DropdownMenu, { options: convertActionsToOptions(rowActions), onOptionSelected: () => {
-                                                            // Las acciones ya manejan sus propios eventos
-                                                        }, renderOption: (item) => item.content, replaceOnSingleOption: true }) })] })) : (formattedValue) }, colIndex));
-                                }) }, rowIndex))) }), hasFooter && (_jsx("tfoot", { className: needsScroll ? "sticky bottom-0 z-10" : "", children: _jsx("tr", { className: twMerge("border-t border-[var(--color-border-default)] text-[var(--color-text-primary)]", footerClassName), children: columns.map((column, index) => {
-                                const footerBgClasses = footerClassName
-                                    .split(/\s+/)
-                                    .filter((cls) => cls.split(":").pop()?.startsWith("bg-"))
-                                    .join(" ");
-                                return (_jsx("td", { className: twMerge(cellPadding, "text-sm font-semibold", footerBgClasses || "bg-[var(--color-bg-secondary)]", getAlignmentClass(column.align, column.type), footerCellClassName), style: {
-                                        ...(column.width ? { width: column.width } : {}),
-                                    }, children: isLoading ? _jsx(SkeletonCell, {}) : column.footer || "" }, index));
-                            }) }) }))] }) }) }));
-};