flysoft-react-ui 1.0.9 → 1.1.0

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,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,CA4GpC,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,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,CA6GpC,CAAC"}

package/dist/components/layout/Card.js

@@ -1,30 +1,27 @@
 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, }) => {
-    // Separar clases de background del className
-    const classArray = className.trim().split(/\s+/).filter(Boolean);
-    const bgClasses = [];
-    const otherClasses = [];
-    classArray.forEach((cls) => {
-        // Detectar clases de background (bg-*, bg-gradient-*, bg-[...])
-        if (cls.startsWith("bg-") || cls.startsWith("bg-gradient-")) {
-            bgClasses.push(cls);
-        }
-        else {
-            otherClasses.push(cls);
-        }
-    });
-    const backgroundClass = bgClasses.length > 0 ? bgClasses.join(" ") : "bg-[var(--color-bg-default)]";
-    const baseClasses = `
-    ${backgroundClass} rounded-lg border
-    font-[var(--font-default)]
-  `;
     const variantClasses = {
-        default: `border-[var(--color-border-default)]`,
-        elevated: `border-[var(--color-border-default)] shadow-[var(--shadow-lg)]`,
-        outlined: `border-[var(--color-gray-300)]`,
+        default: "border-[var(--color-border-default)]",
+        elevated: "border-[var(--color-border-default)] shadow-[var(--shadow-lg)]",
+        outlined: "border-[var(--color-gray-300)]",
     };
-    const classes = `${baseClasses} ${variantClasses[variant]} ${otherClasses.join(" ")}`;
+    // 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(() => {
@@ -53,5 +50,5 @@ export const Card = ({ title, subtitle, children, className = "", headerActions,
     };
     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 flex items-center justify-end", children: footer })] }));
+                            }, children: headerActions }))] }) })), children && _jsx("div", { className: "px-6 py-4", children: children }), footer && (_jsx("div", { className: "px-6 pb-4 flex items-center justify-end", children: footer }))] }));
 };

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

@@ -28,6 +28,12 @@ export interface DataTableProps<T> {
      * Función opcional para aplicar clases CSS a una fila específica basada en sus datos.
      */
     rowClassName?: (row: T) => string;
+    headerClassName?: string;
+    footerClassName?: string;
+    headerCellClassName?: string;
+    footerCellClassName?: string;
+    cellClassName?: string | ((row: T, column: DataTableColumn<T>) => string);
+    compact?: boolean;
 }
-export declare const DataTable: <T>({ columns, rows, className, maxRows, locale, isLoading, loadingRows, rowClassName, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <T>({ columns, rows, className, maxRows, locale, isLoading, loadingRows, rowClassName, headerClassName, footerClassName, headerCellClassName, footerCellClassName, cellClassName, compact, }: 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;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,sFAS3B,cAAc,CAAC,CAAC,CAAC,4CAkTnB,CAAC"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,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;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,0LAe3B,cAAc,CAAC,CAAC,CAAC,4CAmVnB,CAAC"}

package/dist/components/layout/DataTable.js

@@ -1,13 +1,15 @@
 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, }) => {
+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)
-    const rowHeight = 48;
+    // 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) => {
@@ -115,24 +117,20 @@ export const DataTable = ({ columns, rows, className = "", maxRows, locale = "es
     };
     // 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) => {
+    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)]", headerClassName), 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: {
+                                const headerBgClasses = headerClassName
+                                    .split(/\s+/)
+                                    .filter((cls) => cls.split(":").pop()?.startsWith("bg-"))
+                                    .join(" ");
+                                return (_jsx("th", { className: twMerge(cellPadding, "text-sm font-semibold text-[var(--color-text-primary)]", 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)]", 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: {
+                            ? Array.from({ length: loadingRows }).map((_, rowIndex) => (_jsx("tr", { className: "border-b border-[var(--color-border-default)]", children: columns.map((column, colIndex) => (_jsx("td", { className: twMerge(cellPadding, "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)] ${rowClassName ? rowClassName(row) : ""}`, children: columns.map((column, colIndex) => {
@@ -143,10 +141,9 @@ export const DataTable = ({ columns, rows, className = "", maxRows, locale = "es
                                         : 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: {
+                                    return (_jsx("td", { className: twMerge(cellPadding, "text-sm text-[var(--color-text-primary)]", getAlignmentClass(column.align, column.type), typeof cellClassName === "function"
+                                            ? cellClassName(row, column)
+                                            : cellClassName), style: {
                                             ...(column.width ? { width: column.width } : {}),
                                         }, title: tooltip
                                             ? typeof tooltip === "string"
@@ -155,11 +152,13 @@ export const DataTable = ({ columns, rows, className = "", maxRows, locale = "es
                                             : 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))) }) }))] }) }) }));
+                                }) }, rowIndex))) }), hasFooter && (_jsx("tfoot", { className: needsScroll ? "sticky bottom-0 z-10" : "", children: _jsx("tr", { className: twMerge("border-t border-[var(--color-border-default)]", 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 text-[var(--color-text-primary)]", 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));
+                            }) }) }))] }) }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAGtE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+L5C,CAAC"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAGtE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8M5C,CAAC"}

package/dist/components/utils/Snackbar.js

@@ -7,6 +7,7 @@ export const Snackbar = React.memo(({ id, message, variant, duration = 3000, ico
     const intervalRef = useRef(null);
     const startTimeRef = useRef(Date.now());
     const remainingTimeRef = useRef(duration);
+    const closingRef = useRef(false);
     // Mapeo de variantes a colores y clases
     const variantConfig = {
         primary: {
@@ -49,19 +50,27 @@ export const Snackbar = React.memo(({ id, message, variant, duration = 3000, ico
     const config = variantConfig[variant];
     // Función para cerrar el snackbar
     const handleClose = useCallback(() => {
+        if (closingRef.current)
+            return;
+        closingRef.current = true;
         setIsClosing(true);
-        // Esperar a que termine la animación antes de remover
+        // Limpiar intervalo inmediatamente
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+        // Esperar a que termine la animación antes de remover del estado global
         setTimeout(() => {
             onClose(id);
-        }, 300); // Duración de la animación de salida
+        }, 300);
     }, [id, onClose]);
     // Efecto para la barra de progreso
     useEffect(() => {
-        if (duration <= 0) {
-            // Si duration es 0 o negativo, no se cierra automáticamente
+        if (duration <= 0)
             return;
-        }
         const updateProgress = () => {
+            if (closingRef.current)
+                return;
             const elapsed = Date.now() - startTimeRef.current;
             const newProgress = Math.max(0, 100 - (elapsed / duration) * 100);
             setProgress(newProgress);
@@ -69,16 +78,17 @@ export const Snackbar = React.memo(({ id, message, variant, duration = 3000, ico
                 handleClose();
             }
         };
-        // Actualizar cada 50ms para una animación suave
-        intervalRef.current = setInterval(updateProgress, 50);
+        intervalRef.current = window.setInterval(updateProgress, 50);
         return () => {
             if (intervalRef.current) {
-                clearInterval(intervalRef.current);
+                window.clearInterval(intervalRef.current);
             }
         };
     }, [duration, handleClose]);
     // Pausar el progreso cuando el mouse está sobre el snackbar
     const handleMouseEnter = () => {
+        if (closingRef.current)
+            return;
         if (intervalRef.current) {
             clearInterval(intervalRef.current);
             intervalRef.current = null;
@@ -88,9 +98,13 @@ export const Snackbar = React.memo(({ id, message, variant, duration = 3000, ico
     };
     // Reanudar el progreso cuando el mouse sale del snackbar
     const handleMouseLeave = () => {
+        if (closingRef.current)
+            return;
         if (remainingTimeRef.current > 0) {
             startTimeRef.current = Date.now();
             const updateProgress = () => {
+                if (closingRef.current)
+                    return;
                 const elapsed = Date.now() - startTimeRef.current;
                 const newProgress = Math.max(0, ((remainingTimeRef.current - elapsed) / duration) * 100);
                 setProgress(newProgress);
@@ -98,7 +112,7 @@ export const Snackbar = React.memo(({ id, message, variant, duration = 3000, ico
                     handleClose();
                 }
             };
-            intervalRef.current = setInterval(updateProgress, 50);
+            intervalRef.current = window.setInterval(updateProgress, 50);
         }
     };
     // Íconos por defecto según la variante

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

@@ -1 +1 @@
-{"version":3,"file":"SnackbarContainer.d.ts","sourceRoot":"","sources":["../../../src/components/utils/SnackbarContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EACL,WAAW,GACX,UAAU,GACV,cAAc,GACd,aAAa,GACb,YAAY,GACZ,eAAe,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiD9D,CAAC"}
+{"version":3,"file":"SnackbarContainer.d.ts","sourceRoot":"","sources":["../../../src/components/utils/SnackbarContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EACL,WAAW,GACX,UAAU,GACV,cAAc,GACd,aAAa,GACb,YAAY,GACZ,eAAe,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiD9D,CAAC"}

package/dist/components/utils/SnackbarContainer.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { useSnackbarState, useSnackbarActions, } from "../../contexts/SnackbarContext";
+import { useSnackbarState, useSnackbar } from "../../contexts/SnackbarContext";
 import { Snackbar } from "./Snackbar";
 export const SnackbarContainer = ({ position = "top-right", maxSnackbars = 5, }) => {
     const snackbars = useSnackbarState();
-    const { removeSnackbar } = useSnackbarActions();
+    const { removeSnackbar } = useSnackbar();
     // Limitar el número de snackbars visibles
     const visibleSnackbars = snackbars.slice(-maxSnackbars);
     // Clases de posición

package/dist/contexts/SnackbarContext.d.ts

@@ -23,21 +23,7 @@ interface SnackbarProviderProps {
     children: ReactNode;
 }
 export declare const SnackbarProvider: React.FC<SnackbarProviderProps>;
-export declare const useSnackbarActions: () => SnackbarActionsType;
+export declare const useSnackbar: () => SnackbarActionsType;
 export declare const useSnackbarState: () => SnackbarMessage[];
-/**
- * Hook para acceder a todo el contexto de snackbars.
- * NOTA: El uso de este hook causará re-renders cada vez que la lista de snackbars cambie.
- * Si solo necesitas disparar snackbars, usa `useSnackbarActions`.
- */
-export declare const useSnackbar: () => {
-    snackbars: SnackbarMessage[];
-    showSnackbar: (message: string, variant?: SnackbarVariant, options?: {
-        duration?: number;
-        icon?: string;
-        iconLabel?: string;
-    }) => void;
-    removeSnackbar: (id: string) => void;
-};
 export {};
 //# sourceMappingURL=SnackbarContext.d.ts.map

package/dist/contexts/SnackbarContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarContext.d.ts","sourceRoot":"","sources":["../../src/contexts/SnackbarContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,CAAC;AAEX,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,CACZ,OAAO,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,eAAe,EACzB,OAAO,CAAC,EAAE;QACR,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,KACE,IAAI,CAAC;IACV,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,SAAS,EAAE,eAAe,EAAE,CAAC;CAC9B;AASD,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiD5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAO,mBAQrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,eAAe,EAMlD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW;;kBArGR,CACZ,OAAO,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,eAAe,EACzB,OAAO,CAAC,EAAE;QACR,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,KACE,IAAI;oBACO,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;CAuGrC,CAAC"}
+{"version":3,"file":"SnackbarContext.d.ts","sourceRoot":"","sources":["../../src/contexts/SnackbarContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,CAAC;AAEX,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,CACZ,OAAO,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,eAAe,EACzB,OAAO,CAAC,EAAE;QACR,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,KACE,IAAI,CAAC;IACV,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,SAAS,EAAE,eAAe,EAAE,CAAC;CAC9B;AASD,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiD5D,CAAC;AAEF,eAAO,MAAM,WAAW,QAAO,mBAM9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,eAAe,EAMlD,CAAC"}

package/dist/contexts/SnackbarContext.js

@@ -25,10 +25,10 @@ export const SnackbarProvider = ({ children, }) => {
     }), [showSnackbar, removeSnackbar]);
     return (_jsx(SnackbarActionsContext.Provider, { value: actions, children: _jsx(SnackbarStateContext.Provider, { value: snackbars, children: children }) }));
 };
-export const useSnackbarActions = () => {
+export const useSnackbar = () => {
     const context = useContext(SnackbarActionsContext);
     if (context === undefined) {
-        throw new Error("useSnackbarActions must be used within a SnackbarProvider");
+        throw new Error("useSnackbar must be used within a SnackbarProvider");
     }
     return context;
 };
@@ -39,16 +39,3 @@ export const useSnackbarState = () => {
     }
     return context;
 };
-/**
- * Hook para acceder a todo el contexto de snackbars.
- * NOTA: El uso de este hook causará re-renders cada vez que la lista de snackbars cambie.
- * Si solo necesitas disparar snackbars, usa `useSnackbarActions`.
- */
-export const useSnackbar = () => {
-    const state = useSnackbarState();
-    const actions = useSnackbarActions();
-    return useMemo(() => ({
-        ...actions,
-        snackbars: state,
-    }), [actions, state]);
-};

package/dist/contexts/index.d.ts

@@ -8,6 +8,6 @@ export { CrudProvider, CrudContext, useCrud } from "./CrudContext";
 export type { CrudContextType } from "./CrudContext";
 export { AppLayoutProvider, useAppLayout, useAppLayoutContext } from "./AppLayoutContext";
 export type { AppLayoutContextType, NavbarInterface, LeftDrawerInterface, } from "./AppLayoutContext";
-export { SnackbarProvider, useSnackbar, useSnackbarActions, useSnackbarState, } from "./SnackbarContext";
+export { SnackbarProvider, useSnackbar, useSnackbarState, } from "./SnackbarContext";
 export type { SnackbarContextType, SnackbarActionsType, SnackbarMessage, SnackbarVariant, } from "./SnackbarContext";
 //# sourceMappingURL=index.d.ts.map

package/dist/contexts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EACL,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGtE,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,MAAM,GACP,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,YAAY,EACV,eAAe,EACf,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,eAAe,GAChB,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EACL,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGtE,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,MAAM,GACP,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,YAAY,EACV,eAAe,EACf,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,eAAe,GAChB,MAAM,mBAAmB,CAAC"}

package/dist/contexts/index.js

@@ -10,4 +10,4 @@ export { CrudProvider, CrudContext, useCrud } from "./CrudContext";
 // AppLayout system exports
 export { AppLayoutProvider, useAppLayout, useAppLayoutContext } from "./AppLayoutContext";
 // Snackbar system exports
-export { SnackbarProvider, useSnackbar, useSnackbarActions, useSnackbarState, } from "./SnackbarContext";
+export { SnackbarProvider, useSnackbar, useSnackbarState, } from "./SnackbarContext";

package/dist/docs/DataTableDocs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DataTableDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAaxC,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAi1B1B,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DataTableDocs.d.ts","sourceRoot":"","sources":["../../src/docs/DataTableDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAaxC,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAy+B1B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/docs/DataTableDocs.js

@@ -239,6 +239,6 @@ const DataTableDocs = () => {
     return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DataTable - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla b\u00E1sica" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo b\u00E1sico de una tabla con columnas simples usando nombres de propiedades." }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla completa con tipos de datos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Tabla con diferentes tipos de datos: currency, numeric y date. Las columnas se formatean autom\u00E1ticamente seg\u00FAn su tipo." }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con contenido personalizado y acciones" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Ejemplo con valores personalizados usando funciones, tooltips y componentes React como Badges. La columna de acciones usa la propiedad ", _jsx("code", { children: "actions" }), " que muestra un DropdownMenu con las acciones disponibles para cada fila. Cuando hay una sola acci\u00F3n (como en la columna \"Ver\"), se muestra directamente gracias a", " ", _jsx("code", { children: "replaceOnSingleOption" }), ", sin necesidad de abrir un men\u00FA."] }), _jsx(Card, { children: _jsx(DataTable, { columns: customColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con headers personalizados y acciones en header" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Los headers pueden ser ReactNode, permitiendo incluir iconos u otros componentes personalizados. Tambi\u00E9n puedes usar", " ", _jsx("code", { children: "headerActions" }), " para agregar un DropdownMenu con acciones en el header de la columna."] }), _jsx(Card, { children: _jsx(DataTable, { columns: headerCustomColumns, rows: products }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con scroll limitado (maxRows) y footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "maxRows" }), " puedes limitar el n\u00FAmero de filas visibles. Si hay m\u00E1s filas que el m\u00E1ximo, la tabla mostrar\u00E1 scroll solo en las filas mientras el header y el footer permanecen fijos. El footer se muestra usando la propiedad", " ", _jsx("code", { children: "footer" }), " en las columnas."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: allProducts, maxRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con locale personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "locale" }), " puedes cambiar el formato de los n\u00FAmeros (separador de miles y decimales). Por defecto usa", " ", _jsx("code", { children: "'es-AR'" }), ". En este ejemplo se usa ", _jsx("code", { children: "'en-US'" }), " ", "que formatea los n\u00FAmeros con coma como separador de miles y punto como separador decimal."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, locale: "en-US" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estado de carga (Loading)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando las props ", _jsx("code", { children: "isLoading" }), " y ", _jsx("code", { children: "loadingRows" }), " ", "puedes mostrar un estado de carga con skeleton loaders. Cuando", " ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ", la tabla muestra las columnas pero reemplaza las filas de datos con filas skeleton que simulan el contenido. El n\u00FAmero de filas skeleton se controla con", " ", _jsx("code", { children: "loadingRows" }), " (por defecto 5)."] }), _jsx("div", { className: "mb-4", children: _jsx(Button, { variant: "primary", icon: "fa-sync-alt", onClick: () => {
                                         setIsLoading(true);
                                         setTimeout(() => setIsLoading(false), 3000);
-                                    }, disabled: isLoading, children: isLoading ? "Cargando..." : "Simular carga" }) }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, isLoading: isLoading, loadingRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estilos condicionales (rowClassName)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "rowClassName" }), " puedes aplicar clases CSS a filas espec\u00EDficas bas\u00E1ndote en sus datos. En este ejemplo, los productos sin stock se resaltan con un fondo rojo suave."] }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products, rowClassName: (row) => row.stock === 0 ? "bg-red-50 dark:bg-red-900/20" : "" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Tipos de datos:" }), " Soporta text, numeric, currency y date con formateo autom\u00E1tico"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones por fila:" }), " Usa la propiedad", " ", _jsx("code", { children: "actions" }), " para mostrar un DropdownMenu con acciones espec\u00EDficas para cada fila"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones en header:" }), " Usa la propiedad", " ", _jsx("code", { children: "headerActions" }), " para mostrar un DropdownMenu con acciones en el header de la columna"] }), _jsxs("li", { children: [_jsx("strong", { children: "Alineaci\u00F3n:" }), " Cada columna puede tener su propia alineaci\u00F3n (left, right, center)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Ancho personalizado:" }), " Puedes definir el ancho de cada columna usando la propiedad width"] }), _jsxs("li", { children: [_jsx("strong", { children: "Valores personalizados:" }), " El value puede ser una funci\u00F3n que recibe la fila completa y retorna ReactNode"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tooltips:" }), " Soporte para tooltips personalizados por celda"] }), _jsxs("li", { children: [_jsx("strong", { children: "Headers personalizados:" }), " Los headers pueden ser ReactNode para incluir iconos o componentes"] }), _jsxs("li", { children: [_jsx("strong", { children: "Hover effect:" }), " Las filas tienen un efecto hover para mejor UX"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " La tabla tiene scroll horizontal autom\u00E1tico en pantallas peque\u00F1as"] }), _jsxs("li", { children: [_jsx("strong", { children: "Scroll limitado:" }), " Con maxRows puedes limitar el n\u00FAmero de filas visibles, manteniendo el header fijo y permitiendo scroll solo en las filas"] }), _jsxs("li", { children: [_jsx("strong", { children: "Estilos condicionales:" }), " Usa", " ", _jsx("code", { children: "rowClassName" }), " para aplicar clases CSS a filas espec\u00EDficas seg\u00FAn sus datos"] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "columns" }) }), _jsx("td", { className: "p-3 text-sm", children: "DataTableColumn<T>[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de columnas que define la estructura de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rows" }) }), _jsx("td", { className: "p-3 text-sm", children: "T[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de objetos que representan las filas de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "className" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para el contenedor de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "maxRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsx("td", { className: "p-3 text-sm", children: "M\u00E1ximo n\u00FAmero de filas visibles. Si hay m\u00E1s filas, se activa scroll vertical manteniendo el header fijo" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "locale" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsxs("td", { className: "p-3 text-sm", children: ["Locale para formateo de n\u00FAmeros (currency y numeric). Por defecto es ", _jsx("code", { children: "'es-AR'" }), ". Ejemplos:", " ", _jsx("code", { children: "'en-US'" }), ", ", _jsx("code", { children: "'es-ES'" }), ",", " ", _jsx("code", { children: "'de-DE'" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "isLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsxs("td", { className: "p-3 text-sm", children: ["Estado de carga. Cuando es ", _jsx("code", { children: "true" }), ", muestra filas skeleton en lugar de los datos. Por defecto es", " ", _jsx("code", { children: "false" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "loadingRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsxs("td", { className: "p-3 text-sm", children: ["N\u00FAmero de filas skeleton a mostrar cuando", " ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ". Por defecto es ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ". Por defecto es ", _jsx("code", { children: "5" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rowClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n opcional para aplicar clases CSS a una fila espec\u00EDfica basada en sus datos" })] })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "DataTableColumn Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "align" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"left\" | \"right\" | \"center\"" }), _jsx("td", { className: "p-3 text-sm", children: "Alineaci\u00F3n del contenido de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "width" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Ancho de la columna (ej: \"100px\", \"20%\")" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "header" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Texto o componente React para el header de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "value" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | number | ((row: T) => string | ReactNode)" }), _jsx("td", { className: "p-3 text-sm", children: "Nombre de la propiedad del objeto, valor directo, o funci\u00F3n que retorna el valor a mostrar" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "tooltip" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna el tooltip a mostrar al hacer hover sobre la celda" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "type" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"text\" | \"numeric\" | \"currency\" | \"date\"" }), _jsx("td", { className: "p-3 text-sm", children: "Tipo de dato que determina el formateo autom\u00E1tico" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "actions" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu para cada fila. Las acciones deben manejar sus propios eventos onClick." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerActions" }) }), _jsx("td", { className: "p-3 text-sm", children: "() => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu en el header de la columna. Las acciones deben manejar sus propios eventos onClick." })] })] })] }) })] })] }) }) }));
+                                    }, disabled: isLoading, children: isLoading ? "Cargando..." : "Simular carga" }) }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, isLoading: isLoading, loadingRows: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estilos condicionales (rowClassName)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "rowClassName" }), " puedes aplicar clases CSS a filas espec\u00EDficas bas\u00E1ndote en sus datos. En este ejemplo, los productos sin stock se resaltan con un fondo rojo suave."] }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products, rowClassName: (row) => row.stock === 0 ? "bg-red-50 dark:bg-red-900/20" : "" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estilos de Header y Footer" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando las props ", _jsx("code", { children: "headerClassName" }), " y", " ", _jsx("code", { children: "footerClassName" }), " puedes aplicar clases CSS directamente a las filas del header y footer. En este ejemplo, se aplica un fondo azul suave al header y un borde superior m\u00E1s grueso al footer."] }), _jsx(Card, { children: _jsx(DataTable, { columns: fullColumns, rows: products, headerClassName: "bg-red-50/50 border-b-2 border-primary", footerClassName: "border-t-2 border-primary bg-green-500" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla con estilos de Celdas (Cell ClassNames)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Adem\u00E1s de las filas, puedes aplicar clases espec\u00EDficamente a las celdas del header, footer y body. El ", _jsx("code", { children: "cellClassName" }), " ", "del body puede ser un string o una funci\u00F3n que recibe la fila y la columna para un control total."] }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products, headerCellClassName: "text-primary italic uppercase tracking-wider", cellClassName: (_row, column) => column.value === "name" ? "font-bold text-blue-600" : "" }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabla Compacta" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando la prop ", _jsx("code", { children: "compact" }), " puedes reducir significativamente el espacio que ocupa la tabla. Este modo elimina los paddings superiores y reduce los horizontales, ideal para mostrar grandes cantidades de datos en espacios reducidos."] }), _jsx(Card, { children: _jsx(DataTable, { columns: basicColumns, rows: products, compact: true }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Tipos de datos:" }), " Soporta text, numeric, currency y date con formateo autom\u00E1tico"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones por fila:" }), " Usa la propiedad", " ", _jsx("code", { children: "actions" }), " para mostrar un DropdownMenu con acciones espec\u00EDficas para cada fila"] }), _jsxs("li", { children: [_jsx("strong", { children: "Acciones en header:" }), " Usa la propiedad", " ", _jsx("code", { children: "headerActions" }), " para mostrar un DropdownMenu con acciones en el header de la columna"] }), _jsxs("li", { children: [_jsx("strong", { children: "Alineaci\u00F3n:" }), " Cada columna puede tener su propia alineaci\u00F3n (left, right, center)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Ancho personalizado:" }), " Puedes definir el ancho de cada columna usando la propiedad width"] }), _jsxs("li", { children: [_jsx("strong", { children: "Valores personalizados:" }), " El value puede ser una funci\u00F3n que recibe la fila completa y retorna ReactNode"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tooltips:" }), " Soporte para tooltips personalizados por celda"] }), _jsxs("li", { children: [_jsx("strong", { children: "Headers personalizados:" }), " Los headers pueden ser ReactNode para incluir iconos o componentes"] }), _jsxs("li", { children: [_jsx("strong", { children: "Hover effect:" }), " Las filas tienen un efecto hover para mejor UX"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " La tabla tiene scroll horizontal autom\u00E1tico en pantallas peque\u00F1as"] }), _jsxs("li", { children: [_jsx("strong", { children: "Scroll limitado:" }), " Con maxRows puedes limitar el n\u00FAmero de filas visibles, manteniendo el header fijo y permitiendo scroll solo en las filas"] }), _jsxs("li", { children: [_jsx("strong", { children: "Estilos condicionales:" }), " Usa", " ", _jsx("code", { children: "rowClassName" }), " para aplicar clases CSS a filas espec\u00EDficas seg\u00FAn sus datos"] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "columns" }) }), _jsx("td", { className: "p-3 text-sm", children: "DataTableColumn<T>[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de columnas que define la estructura de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rows" }) }), _jsx("td", { className: "p-3 text-sm", children: "T[]" }), _jsx("td", { className: "p-3 text-sm", children: "Array de objetos que representan las filas de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "className" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para el contenedor de la tabla" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "maxRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsx("td", { className: "p-3 text-sm", children: "M\u00E1ximo n\u00FAmero de filas visibles. Si hay m\u00E1s filas, se activa scroll vertical manteniendo el header fijo" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "locale" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsxs("td", { className: "p-3 text-sm", children: ["Locale para formateo de n\u00FAmeros (currency y numeric). Por defecto es ", _jsx("code", { children: "'es-AR'" }), ". Ejemplos:", " ", _jsx("code", { children: "'en-US'" }), ", ", _jsx("code", { children: "'es-ES'" }), ",", " ", _jsx("code", { children: "'de-DE'" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "isLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsxs("td", { className: "p-3 text-sm", children: ["Estado de carga. Cuando es ", _jsx("code", { children: "true" }), ", muestra filas skeleton en lugar de los datos. Por defecto es", " ", _jsx("code", { children: "false" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "loadingRows" }) }), _jsx("td", { className: "p-3 text-sm", children: "number" }), _jsxs("td", { className: "p-3 text-sm", children: ["N\u00FAmero de filas skeleton a mostrar cuando", " ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ". Por defecto es ", _jsx("code", { children: "isLoading" }), " es ", _jsx("code", { children: "true" }), ". Por defecto es ", _jsx("code", { children: "5" })] })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "rowClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n opcional para aplicar clases CSS a una fila espec\u00EDfica basada en sus datos" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para la fila del header (tr)" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "footerClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para la fila del footer (tr)" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerCellClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para todas las celdas del header (th)" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "footerCellClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS adicionales para todas las celdas del footer (td)" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "cellClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | ((row: T, col: Col) => string)" }), _jsx("td", { className: "p-3 text-sm", children: "Clases CSS para celdas del body. Puede ser una funci\u00F3n para l\u00F3gica condicional por celda" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "compact" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsx("td", { className: "p-3 text-sm", children: "Si es true, reduce el padding de todas las celdas para una visualizaci\u00F3n m\u00E1s densa. Por defecto es false." })] })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "DataTableColumn Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "align" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"left\" | \"right\" | \"center\"" }), _jsx("td", { className: "p-3 text-sm", children: "Alineaci\u00F3n del contenido de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "width" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "Ancho de la columna (ej: \"100px\", \"20%\")" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "header" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Texto o componente React para el header de la columna" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "value" }) }), _jsx("td", { className: "p-3 text-sm", children: "string | number | ((row: T) => string | ReactNode)" }), _jsx("td", { className: "p-3 text-sm", children: "Nombre de la propiedad del objeto, valor directo, o funci\u00F3n que retorna el valor a mostrar" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "tooltip" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => string | ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna el tooltip a mostrar al hacer hover sobre la celda" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "type" }) }), _jsx("td", { className: "p-3 text-sm", children: "\"text\" | \"numeric\" | \"currency\" | \"date\"" }), _jsx("td", { className: "p-3 text-sm", children: "Tipo de dato que determina el formateo autom\u00E1tico" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "actions" }) }), _jsx("td", { className: "p-3 text-sm", children: "(row: T) => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu para cada fila. Las acciones deben manejar sus propios eventos onClick." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "headerActions" }) }), _jsx("td", { className: "p-3 text-sm", children: "() => Array<ReactNode>" }), _jsx("td", { className: "p-3 text-sm", children: "Funci\u00F3n que retorna un array de ReactNode que se mostrar\u00E1n en un DropdownMenu en el header de la columna. Las acciones deben manejar sus propios eventos onClick." })] })] })] }) })] })] }) }) }));
 };
 export default DataTableDocs;

package/dist/docs/SnackbarDocs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarDocs.d.ts","sourceRoot":"","sources":["../../src/docs/SnackbarDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA+c1B,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAWzB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SnackbarDocs.d.ts","sourceRoot":"","sources":["../../src/docs/SnackbarDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgiB1B,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAWzB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/docs/SnackbarDocs.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Card, Button, SnackbarProvider, SnackbarContainer, useSnackbar } from "../index";
+import { Card, Button, SnackbarProvider, SnackbarContainer, useSnackbar, } from "../index";
 // Componente wrapper para usar el hook dentro del provider
 const SnackbarExamples = () => {
     const { showSnackbar } = useSnackbar();
@@ -42,8 +42,20 @@ const SnackbarExamples = () => {
                                         }), children: "Validar formulario" })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Informaci\u00F3n importante" }), _jsx(Button, { variant: "primary", icon: "fa-info-circle", onClick: () => showSnackbar("Tu sesión expirará en 5 minutos. Guarda tu trabajo.", "warning", {
                                             icon: "fa-clock",
                                             duration: 8000,
-                                        }), children: "Mostrar advertencia" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Posiciones del contenedor" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El ", _jsx("code", { children: "SnackbarContainer" }), " puede posicionarse en diferentes lugares de la pantalla. En esta documentaci\u00F3n est\u00E1 configurado en", " ", _jsx("code", { children: "top-right" }), ". Las opciones disponibles son:"] }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-sm mb-4", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("code", { children: "top-right" }), " - Esquina superior derecha (por defecto)"] }), _jsxs("li", { children: [_jsx("code", { children: "top-left" }), " - Esquina superior izquierda"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-right" }), " - Esquina inferior derecha"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-left" }), " - Esquina inferior izquierda"] }), _jsxs("li", { children: [_jsx("code", { children: "top-center" }), " - Centro superior"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-center" }), " - Centro inferior"] })] }), _jsx("div", { className: "bg-gray-100 dark:bg-gray-800 p-4 rounded-md", children: _jsx("code", { className: "text-sm", children: `<SnackbarContainer position="top-right" />` }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Ancho fijo:" }), " 18rem (288px)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Barra de progreso:" }), " Muestra el tiempo restante en el borde inferior con el color de la variante"] }), _jsxs("li", { children: [_jsx("strong", { children: "Auto-cierre:" }), " Se cierra autom\u00E1ticamente despu\u00E9s de la duraci\u00F3n especificada (default: 3 segundos)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Pausa al hover:" }), " La barra de progreso se pausa cuando pasas el mouse sobre el snackbar"] }), _jsxs("li", { children: [_jsx("strong", { children: "Cierre manual:" }), " Bot\u00F3n X en la esquina superior derecha"] }), _jsxs("li", { children: [_jsx("strong", { children: "\u00CDconos:" }), " Soporte para \u00EDconos FontAwesome 5 con \u00EDconos por defecto seg\u00FAn la variante"] }), _jsxs("li", { children: [_jsx("strong", { children: "Mensajes largos:" }), " El texto se ajusta autom\u00E1ticamente en m\u00FAltiples l\u00EDneas"] }), _jsxs("li", { children: [_jsx("strong", { children: "M\u00FAltiples snackbars:" }), " Soporte para mostrar varios snackbars apilados verticalmente"] }), _jsxs("li", { children: [_jsx("strong", { children: "Posiciones:" }), " Configurable en el SnackbarContainer (top-right, top-left, bottom-right, bottom-left, top-center, bottom-center)"] })] })] })] }));
+                                        }), children: "Mostrar advertencia" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Posiciones del contenedor" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El ", _jsx("code", { children: "SnackbarContainer" }), " puede posicionarse en diferentes lugares de la pantalla. En esta documentaci\u00F3n est\u00E1 configurado en", " ", _jsx("code", { children: "top-right" }), ". Las opciones disponibles son:"] }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-sm mb-4", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("code", { children: "top-right" }), " - Esquina superior derecha (por defecto)"] }), _jsxs("li", { children: [_jsx("code", { children: "top-left" }), " - Esquina superior izquierda"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-right" }), " - Esquina inferior derecha"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-left" }), " - Esquina inferior izquierda"] }), _jsxs("li", { children: [_jsx("code", { children: "top-center" }), " - Centro superior"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-center" }), " - Centro inferior"] })] }), _jsx("div", { className: "bg-gray-100 dark:bg-gray-800 p-4 rounded-md", children: _jsx("code", { className: "text-sm", children: `<SnackbarContainer position="top-right" />` }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Ancho fijo:" }), " 18rem (288px)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Barra de progreso:" }), " Muestra el tiempo restante en el borde inferior con el color de la variante"] }), _jsxs("li", { children: [_jsx("strong", { children: "Auto-cierre:" }), " Se cierra autom\u00E1ticamente despu\u00E9s de la duraci\u00F3n especificada (default: 3 segundos)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Pausa al hover:" }), " La barra de progreso se pausa cuando pasas el mouse sobre el snackbar"] }), _jsxs("li", { children: [_jsx("strong", { children: "Cierre manual:" }), " Bot\u00F3n X en la esquina superior derecha"] }), _jsxs("li", { children: [_jsx("strong", { children: "\u00CDconos:" }), " Soporte para \u00EDconos FontAwesome 5 con \u00EDconos por defecto seg\u00FAn la variante"] }), _jsxs("li", { children: [_jsx("strong", { children: "Mensajes largos:" }), " El texto se ajusta autom\u00E1ticamente en m\u00FAltiples l\u00EDneas"] }), _jsxs("li", { children: [_jsx("strong", { children: "M\u00FAltiples snackbars:" }), " Soporte para mostrar varios snackbars apilados verticalmente"] }), _jsxs("li", { children: [_jsx("strong", { children: "Posiciones:" }), " Configurable en el SnackbarContainer (top-right, top-left, bottom-right, bottom-left, top-center, bottom-center)"] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Mejor Pr\u00E1ctica: Rendimiento" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Para un rendimiento \u00F3ptimo, utiliza el hook", " ", _jsx("code", { children: "useSnackbarActions" }), ". Este hook solo proporciona las funciones para disparar notificaciones, evitando que tu componente se re-renderice innecesariamente cuando la lista de snackbars cambie o se actualice su progreso."] }), _jsx("div", { className: "max-w-md mx-auto", children: _jsxs(Card, { className: "p-4 border-dashed", children: [_jsx("h4", { className: "font-medium mb-2 text-green-600", children: "Componente Optimizado" }), _jsxs("p", { className: "text-xs mb-3 text-gray-500", children: ["Este componente utiliza ", _jsx("code", { children: "useSnackbarActions" }), ". Observa c\u00F3mo el contador no aumenta mientras el snackbar est\u00E1 en pantalla."] }), _jsx(OptimizedComponent, {})] }) })] })] }));
 };
+// --- Componentes de Prueba de Rendimiento ---
+const OptimizedComponent = React.memo(() => {
+    const { showSnackbar } = useSnackbar();
+    // Para detectar renders
+    const renderRef = React.useRef(0);
+    renderRef.current++;
+    // Log para consola
+    React.useEffect(() => {
+        console.log("%c[Optimized] Renderizado #" + renderRef.current, "color: green");
+    });
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex justify-between items-center bg-gray-50 p-2 rounded", children: [_jsx("span", { className: "text-sm", children: "Contador de Renders:" }), _jsx("span", { className: "font-bold text-green-600 px-2 py-0.5 bg-green-50 rounded", children: renderRef.current })] }), _jsx(Button, { variant: "primary", className: "w-full", onClick: () => showSnackbar("Este componente es eficiente", "success"), children: "Disparar Snackbar" }), _jsx("p", { className: "text-[10px] text-gray-400 italic text-center", children: "El contador NO aumenta con los cambios de estado de otros snackbars." })] }));
+});
 const SnackbarDocs = () => {
     return (_jsxs(SnackbarProvider, { children: [_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Snackbar - Notificaciones y Mensajes", children: _jsx(SnackbarExamples, {}) }) }), _jsx(SnackbarContainer, { position: "top-right" })] }));
 };