flysoft-react-ui 0.4.0 → 0.5.2

package/dist/components/layout/AppLayout.js

@@ -1,9 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = ({ navBarDrawer, leftDrawer, children, className = "", }) => {
+export const AppLayout = ({ navbar, leftDrawer, 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);
@@ -12,8 +23,15 @@ export const AppLayout = ({ navBarDrawer, leftDrawer, children, className = "",
     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 && leftDrawer;
+    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;
@@ -48,7 +66,9 @@ export const AppLayout = ({ navBarDrawer, leftDrawer, children, className = "",
             // Siempre mostrar navbar cerca del top
             shouldBeVisible = true;
         }
-        else if (scrollDirection === "down" && scrollY > HIDE_THRESHOLD && !isNearBottom) {
+        else if (scrollDirection === "down" &&
+            scrollY > HIDE_THRESHOLD &&
+            !isNearBottom) {
             // Ocultar navbar al hacer scroll hacia abajo, excepto si estamos cerca del final
             shouldBeVisible = false;
         }
@@ -87,36 +107,84 @@ export const AppLayout = ({ navBarDrawer, leftDrawer, children, className = "",
     ${className}
   `;
     // Clases del navbar
-    const navbarClasses = `
-    bg-[var(--color-bg-default)] border-b border-[var(--color-border-default)]
-    z-[1000] fixed top-0 left-0 right-0
-    transform transition-transform duration-300 ease-in-out
-    ${isNavbarVisible ? "translate-y-0" : "-translate-y-full"}
-  `;
-    // Estilos inline para debug
-    const navbarStyle = {
-        transform: isNavbarVisible ? "translateY(0)" : "translateY(-100%)",
-        transition: "transform 300ms ease-in-out",
+    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 300ms ease-in-out",
+            willChange: "transform",
+            height: navbarHeight, // Override any height classes in className
+        }
+        : {
+            height: isNavbarVisible ? navbarHeight : "0",
+            minHeight: isNavbarVisible ? navbarHeight : "0",
+            maxHeight: isNavbarVisible ? navbarHeight : "0",
+            transition: "height 300ms ease-in-out, min-height 300ms ease-in-out, max-height 300ms ease-in-out",
+            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 300ms ease-in-out, max-height 300ms ease-in-out",
+        opacity: isNavbarVisible || fullWidthNavbar ? 1 : 0,
     };
-    const navbarContentClasses = `
-    flex items-center pr-4 lg:px-4 h-16 gap-2
-    md:px-3
-  `;
-    const navbarDrawerClasses = `flex-1`;
+    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-300 ease-in-out
-    ${navBarDrawer && isNavbarVisible ? "pt-16" : ""}
-  `;
+    const mainClasses = `flex flex-1 overflow-hidden transition-all duration-300 ease-in-out`;
+    // Style for main content with dynamic navbar height padding
+    const mainStyle = fullWidthNavbar && shouldShowNavbar && isNavbarVisible
+        ? { paddingTop: navbarHeight }
+        : {};
+    // Clases del drawer izquierdo (contenedor principal)
+    // width se aplica como estilo inline para tener prioridad sobre className
     const leftDrawerClasses = `
-    w-64 bg-[var(--color-bg-default)]
-    overflow-y-auto flex-shrink-0 p-4
+    ${leftDrawerWidth ? "" : "w-64"} bg-[var(--color-bg-default)]
+    flex-shrink-0 flex flex-col
     transition-all duration-300 ease-in-out
-    ${navBarDrawer && isNavbarVisible ? "pt-20" : "pt-4"}
+    ${fullWidthNavbar && shouldShowNavbar && isNavbarVisible ? "pt-4" : "h-full"}
+    ${leftDrawerClassName}
+  `
+        .trim()
+        .replace(/\s+/g, " ");
+    // Style for left drawer with dynamic width
+    const leftDrawerStyle = leftDrawerWidth ? { width: leftDrawerWidth } : {};
+    // 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 px-2 py-4 lg:px-6
+    flex-1 overflow-y-auto px-2 pb-4 lg:px-6 pt-4
   `;
     // Clases del overlay móvil
     const overlayClasses = `
@@ -128,10 +196,15 @@ export const AppLayout = ({ navBarDrawer, leftDrawer, children, className = "",
     bg-[var(--color-bg-default)] shadow-[var(--shadow-xl)]
     transform -translate-x-full transition-transform duration-300 ease-in-out
     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 p-4
+    flex-1 overflow-y-auto scrollbar-hide
   `;
-    return (_jsxs("div", { className: layoutClasses, children: [navBarDrawer && (_jsx("nav", { className: navbarClasses, style: navbarStyle, children: _jsxs("div", { className: navbarContentClasses, children: [shouldShowMobileDrawer && leftDrawer && (_jsx(Button, { variant: "ghost", icon: "fa-bars", onClick: handleMobileDrawerToggle, "aria-label": "Abrir men\u00FA" })), _jsx("div", { className: navbarDrawerClasses, children: navBarDrawer })] }) })), _jsxs("div", { className: mainClasses, children: [shouldShowDesktopDrawer && (_jsx("aside", { className: leftDrawerClasses, children: leftDrawer })), _jsx("main", { ref: contentRef, className: contentClasses, children: children })] }), shouldShowMobileDrawer && leftDrawer && isMobileDrawerOpen && (_jsx("div", { className: overlayClasses, onClick: handleOverlayClick })), shouldShowMobileDrawer && leftDrawer && (_jsxs("aside", { className: `${mobileDrawerBaseClasses} ${isMobileDrawerOpen ? mobileDrawerOpenClasses : ""}`, children: [_jsx("div", { className: "text-right", children: _jsx(Button, { variant: "ghost", icon: "fa-times", onClick: handleMobileDrawerToggle, "aria-label": "Cerrar men\u00FA" }) }), _jsx("div", { className: mobileDrawerContentClasses, children: leftDrawer })] }))] }));
+    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 }))] })), _jsx("main", { ref: contentRef, className: contentClasses, children: children })] })] })) : (_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 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) }))] }) })), _jsx("main", { ref: contentRef, className: contentClasses, children: children })] })] }) })), 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: "p-4", 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.d.ts

@@ -4,7 +4,10 @@ export interface CardProps {
     subtitle?: string | React.ReactNode;
     children: React.ReactNode;
     className?: string;
-    headerActions?: React.ReactNode;
+    /**
+     * Acciones para el header de la tarjeta. Retorna un array de ReactNode que se mostrarán en un DropdownMenu.
+     */
+    headerActions?: () => Array<React.ReactNode>;
     footer?: React.ReactNode;
     variant?: "default" | "elevated" | "outlined";
 }

package/dist/components/layout/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;CAC/C;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAsEpC,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;CAC/C;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA6HpC,CAAC"}

package/dist/components/layout/Card.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { DropdownMenu } from "../utils/DropdownMenu";
 export const Card = ({ title, subtitle, children, className = "", headerActions, footer, variant = "default", }) => {
     // Separar clases de background del className
     const classArray = className.trim().split(/\s+/).filter(Boolean);
@@ -25,5 +26,33 @@ export const Card = ({ title, subtitle, children, className = "", headerActions,
         outlined: `border-[var(--color-gray-300)]`,
     };
     const classes = `${baseClasses} ${variantClasses[variant]} ${otherClasses.join(" ")}`;
-    return (_jsxs("div", { className: classes, children: [(title || subtitle || headerActions) && (_jsx("div", { className: "px-6 pt-4", 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("p", { className: "text-sm text-[var(--color-text-secondary)] mt-1", children: subtitle }))] }), headerActions && (_jsx("div", { className: "flex items-center space-x-2", children: headerActions }))] }) })), _jsx("div", { className: "px-6 py-4", children: children }), footer && _jsx("div", { className: "px-6 pb-4", children: footer })] }));
+    // 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 })),
+        }));
+    };
+    const headerActionsArray = headerActions?.();
+    const hasHeaderActions = headerActionsArray && headerActionsArray.length > 0;
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isLargeScreen, setIsLargeScreen] = React.useState(false);
+    React.useEffect(() => {
+        const checkScreenSize = () => {
+            setIsLargeScreen(window.innerWidth >= 1024);
+        };
+        checkScreenSize();
+        window.addEventListener("resize", checkScreenSize);
+        return () => {
+            window.removeEventListener("resize", checkScreenSize);
+        };
+    }, []);
+    return (_jsxs("div", { className: `${classes} relative`, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(title || subtitle || hasHeaderActions) && (_jsx("div", { className: "px-6 pt-4", children: _jsx("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("p", { className: "text-sm text-[var(--color-text-secondary)] mt-1", children: subtitle }))] }) }) })), hasHeaderActions && (_jsx("div", { className: "absolute top-2 right-2 transition-opacity", style: {
+                    opacity: isLargeScreen ? (isHovered ? 1 : 0) : 1,
+                }, children: _jsx(DropdownMenu, { options: convertActionsToOptions(headerActionsArray), onOptionSelected: () => {
+                        // Las acciones ya manejan sus propios eventos
+                    }, renderOption: (item) => item.content, replaceOnSingleOption: true }) })), _jsx("div", { className: "px-6 py-4", children: children }), footer && _jsx("div", { className: "px-6 pb-4", children: footer })] }));
 };

package/dist/components/layout/Collection.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-export const Collection = ({ children, gap = "0", direction = "column", wrap = false, className = "", }) => {
+export const Collection = ({ children, gap = "1rem", direction = "column", wrap = false, className = "", }) => {
     const baseClasses = `
     flex
     font-[var(--font-default)]

package/dist/components/layout/DataTable.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+export interface DataTableColumn<T> {
+    align?: "left" | "right" | "center";
+    width?: string;
+    header?: string | React.ReactNode;
+    footer?: string | React.ReactNode;
+    value?: string | number | ((row: T) => string | React.ReactNode);
+    tooltip?: (row: T) => string | React.ReactNode;
+    type?: "text" | "numeric" | "currency" | "date";
+    /**
+     * Acciones para cada fila. Retorna un array de ReactNode que se mostrarán en un DropdownMenu.
+     */
+    actions?: (row: T) => Array<React.ReactNode>;
+    /**
+     * Acciones para el header de la columna. Retorna un array de ReactNode que se mostrarán en un DropdownMenu.
+     */
+    headerActions?: () => Array<React.ReactNode>;
+}
+export interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    className?: string;
+    maxRows?: number;
+    locale?: string;
+    isLoading?: boolean;
+    loadingRows?: number;
+}
+export declare const DataTable: <T>({ columns, rows, className, maxRows, locale, isLoading, loadingRows, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/components/layout/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;IACjE,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,wEAQ3B,cAAc,CAAC,CAAC,CAAC,4CAgTnB,CAAC"}

package/dist/components/layout/DataTable.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { DropdownMenu } from "../utils/DropdownMenu";
+export const DataTable = ({ columns, rows, className = "", maxRows, locale = "es-AR", isLoading = false, loadingRows = 5, }) => {
+    // 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)
+    const rowHeight = 48;
+    const maxHeight = maxRows ? `${maxRows * rowHeight}px` : undefined;
+    // 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: "border-b border-[var(--color-border-default)]", children: columns.map((column, index) => {
+                                const headerActions = column.headerActions?.();
+                                const hasHeaderActions = headerActions && headerActions.length > 0;
+                                return (_jsx("th", { className: `
+                      px-4 py-3 text-sm font-semibold text-[var(--color-text-primary)]
+                      bg-[var(--color-bg-secondary)]
+                      ${getAlignmentClass(column.align, column.type)}
+                      ${hasHeaderActions ? "relative" : ""}
+                    `, 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)]", children: columns.map((column, colIndex) => (_jsx("td", { className: `
+                          px-4 py-3 text-sm text-[var(--color-text-primary)]
+                          ${getAlignmentClass(column.align, column.type)}
+                        `, style: {
+                                        ...(column.width ? { width: column.width } : {}),
+                                    }, children: _jsx(SkeletonCell, {}) }, colIndex))) }, `skeleton-${rowIndex}`)))
+                            : rows.map((row, rowIndex) => (_jsx("tr", { className: "group/row border-b border-[var(--color-border-default)] transition-colors hover:bg-[var(--color-bg-secondary)]", 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: `
+                            px-4 py-3 text-sm text-[var(--color-text-primary)]
+                            ${getAlignmentClass(column.align, column.type)}
+                          `, 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: "border-t border-[var(--color-border-default)]", children: columns.map((column, index) => (_jsx("td", { className: `
+                      px-4 py-3 text-sm font-semibold text-[var(--color-text-primary)]
+                      bg-[var(--color-bg-secondary)]
+                      ${getAlignmentClass(column.align, column.type)}
+                    `, style: {
+                                    ...(column.width ? { width: column.width } : {}),
+                                }, children: isLoading ? _jsx(SkeletonCell, {}) : column.footer || "" }, index))) }) }))] }) }) }));
+};

package/dist/components/layout/index.d.ts

@@ -10,4 +10,6 @@ export { TabsGroup } from "./TabsGroup";
 export type { TabsGroupProps, Tab } from "./TabsGroup";
 export { TabPanel } from "./TabPanel";
 export type { TabPanelProps } from "./TabPanel";
+export { DataTable } from "./DataTable";
+export type { DataTableProps, DataTableColumn } from "./DataTable";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/layout/index.js

@@ -4,3 +4,4 @@ export { Collection } from "./Collection";
 export { DataField } from "./DataField";
 export { TabsGroup } from "./TabsGroup";
 export { TabPanel } from "./TabPanel";
+export { DataTable } from "./DataTable";

package/dist/components/utils/Avatar.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+export interface AvatarProps {
+    /**
+     * Text to extract initials from
+     * The component will show the first letter of the first word
+     * and the first letter of the last word if there are multiple words
+     */
+    text: string;
+    /**
+     * Optional image URL to display instead of initials
+     */
+    image?: string;
+    /**
+     * Optional background color (hexadecimal, rgb, or color name)
+     * Default: gray-600 (#4b5563)
+     */
+    bgColor?: string;
+    /**
+     * Optional text color (hexadecimal, rgb, or color name)
+     * Default: white (#ffffff)
+     */
+    textColor?: string;
+    /**
+     * Optional size variant
+     * Default: md
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Optional additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Avatar component displays a circular avatar with initials or an image
+ *
+ * @example
+ * // Basic usage with text
+ * <Avatar text="John Doe" />
+ *
+ * @example
+ * // With image
+ * <Avatar text="John Doe" image="https://example.com/avatar.jpg" />
+ *
+ * @example
+ * // Custom colors
+ * <Avatar text="Jane Smith" bgColor="#3b82f6" textColor="#ffffff" />
+ */
+export declare const Avatar: React.FC<AvatarProps>;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/utils/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAuDxC,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2DxC,CAAC"}

package/dist/components/utils/Avatar.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+/**
+ * Helper function to convert color names to CSS values
+ */
+const getColorValue = (color) => {
+    if (!color)
+        return undefined;
+    // If already a valid CSS value (hex, rgb, rgba, hsl, etc.), return it
+    if (color.startsWith("#") ||
+        color.startsWith("rgb") ||
+        color.startsWith("hsl")) {
+        return color;
+    }
+    // Map common color names
+    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;
+};
+/**
+ * Helper function to extract initials from text
+ * Returns first letter of first word and first letter of last word (if multiple words)
+ */
+const getInitials = (text) => {
+    if (!text || text.trim().length === 0)
+        return "";
+    const words = text.trim().split(/\s+/);
+    if (words.length === 0)
+        return "";
+    const firstLetter = words[0].charAt(0).toUpperCase();
+    if (words.length === 1) {
+        return firstLetter;
+    }
+    const lastLetter = words[words.length - 1].charAt(0).toUpperCase();
+    return `${firstLetter}${lastLetter}`;
+};
+/**
+ * Avatar component displays a circular avatar with initials or an image
+ *
+ * @example
+ * // Basic usage with text
+ * <Avatar text="John Doe" />
+ *
+ * @example
+ * // With image
+ * <Avatar text="John Doe" image="https://example.com/avatar.jpg" />
+ *
+ * @example
+ * // Custom colors
+ * <Avatar text="Jane Smith" bgColor="#3b82f6" textColor="#ffffff" />
+ */
+export const Avatar = ({ text, image, bgColor = "gray-600", textColor = "white", size = "md", className = "", }) => {
+    const [imageError, setImageError] = useState(false);
+    const initials = getInitials(text);
+    const showImage = image && !imageError;
+    const sizeClasses = {
+        sm: "w-8 h-8 text-xs",
+        md: "w-10 h-10 text-sm",
+        lg: "w-12 h-12 text-base",
+    };
+    const baseClasses = `
+    rounded-full
+    flex
+    items-center
+    justify-center
+    font-semibold
+    font-[var(--font-default)]
+    overflow-hidden
+    flex-shrink-0
+    ${sizeClasses[size]}
+    ${className}
+  `;
+    // Inline styles for colors (only if no image or image failed to load)
+    const inlineStyles = showImage
+        ? {}
+        : {
+            backgroundColor: getColorValue(bgColor) || bgColor || "#4b5563",
+            color: getColorValue(textColor) || textColor || "#ffffff",
+        };
+    return (_jsx("div", { className: baseClasses, style: inlineStyles, title: text, role: "img", "aria-label": text, children: showImage ? (_jsx("img", { src: image, alt: text, className: "w-full h-full object-cover", onError: () => setImageError(true) })) : (_jsx("span", { children: initials })) }));
+};
+Avatar.displayName = "Avatar";

package/dist/components/utils/Badge.d.ts

@@ -8,6 +8,9 @@ export interface BadgeProps {
     icon?: string;
     iconPosition?: "left" | "right";
     iconLabel?: string;
+    bg?: string;
+    textColor?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 }
 export declare const Badge: React.FC<BadgeProps>;
 //# sourceMappingURL=Badge.d.ts.map