flysoft-react-ui 0.5.0 → 0.5.3

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: "absolute top-0 right-0 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 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) }))] }) })), _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: "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.d.ts

@@ -2,14 +2,19 @@ import React from "react";
 export interface CardProps {
     title?: string | React.ReactNode;
     subtitle?: string | React.ReactNode;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     className?: string;
     /**
-     * Acciones para el header de la tarjeta. Retorna un array de ReactNode que se mostrarán en un DropdownMenu.
+     * Acciones para el header de la tarjeta. Se muestra directamente el ReactNode proporcionado.
      */
-    headerActions?: () => Array<React.ReactNode>;
+    headerActions?: React.ReactNode;
     footer?: React.ReactNode;
     variant?: "default" | "elevated" | "outlined";
+    /**
+     * Si es true, las headerActions siempre se muestran. Si es false, solo se muestran al hacer hover (en pantallas grandes).
+     * En resoluciones md e inferiores, siempre se muestran sin importar este valor.
+     */
+    alwaysDisplayHeaderActions?: boolean;
 }
 export declare const Card: React.FC<CardProps>;
 //# sourceMappingURL=Card.d.ts.map

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;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"}
+{"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,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,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;IAC9C;;;OAGG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA8GpC,CAAC"}

package/dist/components/layout/Card.js

@@ -1,7 +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", }) => {
+export const Card = ({ title, subtitle, children, className = "", headerActions, footer, variant = "default", alwaysDisplayHeaderActions = false, }) => {
     // Separar clases de background del className
     const classArray = className.trim().split(/\s+/).filter(Boolean);
     const bgClasses = [];
@@ -26,22 +25,11 @@ export const Card = ({ title, subtitle, children, className = "", headerActions,
         outlined: `border-[var(--color-gray-300)]`,
     };
     const classes = `${baseClasses} ${variantClasses[variant]} ${otherClasses.join(" ")}`;
-    // 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 = () => {
+            // md breakpoint en Tailwind es 768px, así que lg es 1024px
             setIsLargeScreen(window.innerWidth >= 1024);
         };
         checkScreenSize();
@@ -50,9 +38,20 @@ export const Card = ({ title, subtitle, children, className = "", headerActions,
             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 })] }));
+    // 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: "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("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: "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

@@ -22,6 +22,8 @@ export interface DataTableProps<T> {
     className?: string;
     maxRows?: number;
     locale?: string;
+    isLoading?: boolean;
+    loadingRows?: number;
 }
-export declare const DataTable: <T>({ columns, rows, className, maxRows, locale, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1 +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;CACjB;AAED,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,gDAM3B,cAAc,CAAC,CAAC,CAAC,4CAwRnB,CAAC"}
+{"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

@@ -1,9 +1,10 @@
 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", }) => {
+export const DataTable = ({ columns, rows, className = "", maxRows, locale = "es-AR", isLoading = false, loadingRows = 5, }) => {
     // Calcular si necesitamos scroll
-    const needsScroll = maxRows !== undefined && rows.length > maxRows;
+    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;
@@ -112,6 +113,8 @@ export const DataTable = ({ columns, rows, className = "", maxRows, locale = "es
                 }, 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;
@@ -122,39 +125,41 @@ export const DataTable = ({ columns, rows, className = "", maxRows, locale = "es
                       ${hasHeaderActions ? "relative" : ""}
                     `, style: {
                                         ...(column.width ? { width: column.width } : {}),
-                                        fontStretch: "75%",
-                                    }, children: hasHeaderActions ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { children: column.header || "" }), _jsx(DropdownMenu, { options: convertActionsToOptions(headerActions), onOptionSelected: () => {
+                                    }, 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: rows.map((row, rowIndex) => (_jsx("tr", { className: "group/row border-b border-[var(--color-border-default)] transition-colors hover:bg-[var(--color-bg-secondary)]", style: {
-                                fontStretch: "75%",
-                            }, 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: {
+                            }) }) }), _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 } : {}),
-                                        fontVariationSettings: '"wdth" 75',
-                                    }, 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: `
+                                    }, 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 } : {}),
-                                    fontStretch: "75%",
-                                }, children: column.footer || "" }, index))) }) }))] }) }) }));
+                                }, children: isLoading ? _jsx(SkeletonCell, {}) : column.footer || "" }, index))) }) }))] }) }) }));
 };

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

@@ -12,4 +12,6 @@ export { TabPanel } from "./TabPanel";
 export type { TabPanelProps } from "./TabPanel";
 export { DataTable } from "./DataTable";
 export type { DataTableProps, DataTableColumn } from "./DataTable";
+export { Accordion } from "./Accordion";
+export type { AccordionProps } from "./Accordion";
 //# 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;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,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;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/layout/index.js

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyEtC,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkC1B,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA2KtC,CAAC"}