@axzydev/axzy_ui_system 1.4.7 → 1.4.8

package/dist/index.js

@@ -4490,13 +4490,44 @@ function ITDataTable({
   virtualizedMaxHeight = 400,
   rowHeight,
   overscan = 5,
-  stickyHeader = false
+  stickyHeader = false,
+  showViewToggle = true,
+  design,
+  colors,
+  containerStyle,
+  cardClassName,
+  cardStyle,
+  toolbarClassName,
+  toolbarStyle,
+  headerClassName,
+  headerStyle,
+  headerCellClassName,
+  headerCellStyle,
+  rowClassName,
+  rowStyle,
+  cellClassName,
+  cellStyle,
+  cardsClassName,
+  cardsStyle,
+  footerClassName,
+  footerStyle
 }) {
   const [viewMode, setViewMode] = useState19(defaultView || "table");
   const { ref: rootRef, width: containerWidth } = useElementSize();
   const [data, setData] = useState19([]);
   const [totalItems, setTotalItems] = useState19(0);
   const [isLoading, setIsLoading] = useState19(fetchOnMount);
+  const colorVars = {
+    ...colors?.headerBg ? { "--color-table-headerBg": colors.headerBg } : {},
+    ...colors?.headerText ? { "--color-table-headerText": colors.headerText } : {},
+    ...colors?.rowBg ? { "--color-table-rowBg": colors.rowBg } : {},
+    ...colors?.rowText ? { "--color-table-rowText": colors.rowText } : {},
+    ...colors?.rowHover ? { "--color-table-rowHover": colors.rowHover } : {}
+  };
+  const mergeSlot = (slot, flatClassName, flatStyle) => ({
+    className: clsx23(slot?.className, flatClassName),
+    style: { ...slot?.style, ...flatStyle }
+  });
   const isFixed = layout === "fixed";
   const forcedCards = autoCardBreakpoint > 0 && containerWidth > 0 && containerWidth < autoCardBreakpoint;
   const effectiveView = forcedCards ? "cards" : viewMode;
@@ -4759,6 +4790,25 @@ function ITDataTable({
     event.preventDefault();
     onRowClick(row, event);
   };
+  const containerSlot = mergeSlot(design?.container, containerClassName, containerStyle);
+  const cardSlot = mergeSlot(design?.card, cardClassName, cardStyle);
+  const toolbarSlot = mergeSlot(design?.toolbar, toolbarClassName, toolbarStyle);
+  const headerSlot = mergeSlot(design?.header, headerClassName, headerStyle);
+  const headerCellSlot = mergeSlot(design?.headerCell, headerCellClassName, headerCellStyle);
+  const rowSlot = mergeSlot(design?.row, rowClassName, rowStyle);
+  const cellSlot = mergeSlot(design?.cell, cellClassName, cellStyle);
+  const cardsSlot = mergeSlot(design?.cards, cardsClassName, cardsStyle);
+  const footerSlot = mergeSlot(design?.footer, footerClassName, footerStyle);
+  const viewToggle = /* @__PURE__ */ jsxs20("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
+    /* @__PURE__ */ jsxs20("button", { onClick: () => setViewMode("table"), disabled: forcedCards, className: segCtrlClass("table"), children: [
+      /* @__PURE__ */ jsx23(FaTable, { size: 11 }),
+      "Table"
+    ] }),
+    /* @__PURE__ */ jsxs20("button", { onClick: () => setViewMode("cards"), className: segCtrlClass("cards"), children: [
+      /* @__PURE__ */ jsx23(FaThLarge, { size: 11 }),
+      "Cards"
+    ] })
+  ] });
   const tableEl = /* @__PURE__ */ jsxs20(
     "table",
     {
@@ -4784,7 +4834,8 @@ function ITDataTable({
         /* @__PURE__ */ jsx23("thead", { children: /* @__PURE__ */ jsx23(
           "tr",
           {
-            className: clsx23(tableHeaderRow, "dark:text-slate-200"),
+            className: clsx23(tableHeaderRow, "dark:text-slate-200", headerSlot.className),
+            style: headerSlot.style,
             "aria-rowindex": isTableVirtual ? 1 : void 0,
             children: columns.map((col) => {
               const pin = pinnedMeta[col.key];
@@ -4799,13 +4850,17 @@ function ITDataTable({
                     isPinned && "sticky",
                     isStickyHeader && "sticky top-0 bg-secondary-50",
                     isPinned ? "z-[15]" : isStickyHeader && "z-10",
-                    isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right")
+                    isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right"),
+                    headerCellSlot.className,
+                    col.headerClassName
                   ),
-                  style: col.minWidth != null || isStickyHeader || isPinned ? {
+                  style: {
                     ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
                     ...isStickyHeader || isPinned ? { backgroundColor: "var(--color-table-headerBg, #f8fafc)" } : {},
-                    ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {}
-                  } : void 0,
+                    ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {},
+                    ...headerCellSlot.style,
+                    ...col.headerStyle
+                  },
                   children: /* @__PURE__ */ jsxs20("div", { className: isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]", children: [
                     /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between gap-2", children: [
                       /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
@@ -4839,8 +4894,10 @@ function ITDataTable({
                 className: clsx23(
                   tableRow,
                   variant === "striped" && absoluteIndex % 2 === 0 && "bg-secondary-50/40 dark:bg-slate-800/20",
-                  onRowClick && !isLoading && tableRowClickable
+                  onRowClick && !isLoading && tableRowClickable,
+                  rowSlot.className
                 ),
+                style: rowSlot.style,
                 tabIndex: onRowClick && !isLoading ? 0 : void 0,
                 onClick: onRowClick && !isLoading ? handleRowClick(row) : void 0,
                 onKeyDown: onRowClick && !isLoading ? handleRowKeyDown(row) : void 0,
@@ -4857,12 +4914,16 @@ function ITDataTable({
                         col.align && tableAlignClasses[col.align],
                         isPinned && "sticky bg-[var(--color-table-rowBg,white)] group-hover:bg-[var(--color-table-rowHover,var(--color-secondary-50))]",
                         isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right"),
-                        isPinned && "z-[1]"
+                        isPinned && "z-[1]",
+                        cellSlot.className,
+                        col.cellClassName
                       ),
-                      style: col.minWidth != null || isPinned ? {
+                      style: {
                         ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
-                        ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {}
-                      } : void 0,
+                        ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {},
+                        ...cellSlot.style,
+                        ...col.cellStyle
+                      },
                       title: truncateTitle,
                       children: col.type === "actions" ? /* @__PURE__ */ jsx23("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx23("div", { className: clsx23(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
                     },
@@ -4881,78 +4942,89 @@ function ITDataTable({
       ]
     }
   );
-  return /* @__PURE__ */ jsxs20("div", { ref: rootRef, className: clsx23("space-y-4 w-full relative", containerClassName), children: [
-    /* @__PURE__ */ jsxs20("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
-      title && /* @__PURE__ */ jsxs20("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
-        /* @__PURE__ */ jsx23(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
-        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3", children: [
-          isLoading && /* @__PURE__ */ jsx23("div", { className: "text-secondary-400", children: loadingIndicator || /* @__PURE__ */ jsx23(FaSpinner, { className: "animate-spin text-primary-500 text-xl" }) }),
-          /* @__PURE__ */ jsxs20("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
-            /* @__PURE__ */ jsxs20("button", { onClick: () => setViewMode("table"), disabled: forcedCards, className: segCtrlClass("table"), children: [
-              /* @__PURE__ */ jsx23(FaTable, { size: 11 }),
-              "Table"
-            ] }),
-            /* @__PURE__ */ jsxs20("button", { onClick: () => setViewMode("cards"), className: segCtrlClass("cards"), children: [
-              /* @__PURE__ */ jsx23(FaThLarge, { size: 11 }),
-              "Cards"
-            ] })
-          ] })
-        ] })
-      ] }),
-      !title && /* @__PURE__ */ jsx23("div", { className: "flex justify-end px-4 pt-3", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
-        /* @__PURE__ */ jsxs20("button", { onClick: () => setViewMode("table"), disabled: forcedCards, className: segCtrlClass("table"), children: [
-          /* @__PURE__ */ jsx23(FaTable, { size: 11 }),
-          "Table"
-        ] }),
-        /* @__PURE__ */ jsxs20("button", { onClick: () => setViewMode("cards"), className: segCtrlClass("cards"), children: [
-          /* @__PURE__ */ jsx23(FaThLarge, { size: 11 }),
-          "Cards"
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxs20("div", { className: scrollOuterClass, children: [
-        isLoading && /* @__PURE__ */ jsx23("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-white/40 backdrop-blur-[2px] transition-all duration-300", children: /* @__PURE__ */ jsx23("div", { className: "flex flex-col items-center gap-3 p-6 rounded-2xl shadow-xl border border-secondary-100 animate-in fade-in zoom-in duration-300", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: loadingIndicator || /* @__PURE__ */ jsxs20(Fragment4, { children: [
-          /* @__PURE__ */ jsx23(FaSpinner, { className: "animate-spin text-primary-500 text-4xl" }),
-          /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-sm font-semibold text-secondary-600 animate-pulse", children: "Cargando datos..." })
-        ] }) }) }),
-        effectiveView === "cards" ? /* @__PURE__ */ jsx23("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: data.length > 0 ? data.map((row, i) => /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      ref: rootRef,
+      className: clsx23("space-y-4 w-full relative", containerSlot.className),
+      style: { ...colorVars, ...containerSlot.style },
+      children: [
+        /* @__PURE__ */ jsxs20(
           "div",
           {
-            className: clsx23(tableCardHover, onRowClick && !isLoading && tableCardClickable),
-            role: onRowClick && !isLoading ? "button" : void 0,
-            tabIndex: onRowClick && !isLoading ? 0 : void 0,
-            onClick: onRowClick && !isLoading ? handleRowClick(row) : void 0,
-            onKeyDown: onRowClick && !isLoading ? handleRowKeyDown(row) : void 0,
-            children: renderCard ? renderCard(row) : renderDefaultCard(row)
-          },
-          i
-        )) : !isLoading && /* @__PURE__ */ jsxs20("div", { className: clsx23(tableEmptyContent, "py-12"), children: [
-          /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
-          /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
-        ] }) }) : isTableVirtual ? /* @__PURE__ */ jsx23(
+            className: clsx23(tableContainer, cardSlot.className),
+            style: { backgroundColor: "var(--color-table-rowBg, #ffffff)", ...cardSlot.style },
+            children: [
+              title && /* @__PURE__ */ jsxs20(
+                "div",
+                {
+                  className: clsx23("px-6 py-5 flex items-center justify-between", toolbarSlot.className),
+                  style: { backgroundColor: "var(--color-table-rowBg, #ffffff)", ...toolbarSlot.style },
+                  children: [
+                    /* @__PURE__ */ jsx23(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
+                    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3", children: [
+                      isLoading && /* @__PURE__ */ jsx23("div", { className: "text-secondary-400", children: loadingIndicator || /* @__PURE__ */ jsx23(FaSpinner, { className: "animate-spin text-primary-500 text-xl" }) }),
+                      showViewToggle && viewToggle
+                    ] })
+                  ]
+                }
+              ),
+              !title && showViewToggle && /* @__PURE__ */ jsx23("div", { className: clsx23("flex justify-end px-4 pt-3", toolbarSlot.className), style: toolbarSlot.style, children: viewToggle }),
+              /* @__PURE__ */ jsxs20("div", { className: scrollOuterClass, children: [
+                isLoading && /* @__PURE__ */ jsx23("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-white/40 backdrop-blur-[2px] transition-all duration-300", children: /* @__PURE__ */ jsx23("div", { className: "flex flex-col items-center gap-3 p-6 rounded-2xl shadow-xl border border-secondary-100 animate-in fade-in zoom-in duration-300", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: loadingIndicator || /* @__PURE__ */ jsxs20(Fragment4, { children: [
+                  /* @__PURE__ */ jsx23(FaSpinner, { className: "animate-spin text-primary-500 text-4xl" }),
+                  /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-sm font-semibold text-secondary-600 animate-pulse", children: "Cargando datos..." })
+                ] }) }) }),
+                effectiveView === "cards" ? /* @__PURE__ */ jsx23("div", { className: clsx23("p-4 space-y-3 max-h-[400px] overflow-y-auto", cardsSlot.className), style: cardsSlot.style, children: data.length > 0 ? data.map((row, i) => /* @__PURE__ */ jsx23(
+                  "div",
+                  {
+                    className: clsx23(tableCardHover, onRowClick && !isLoading && tableCardClickable),
+                    role: onRowClick && !isLoading ? "button" : void 0,
+                    tabIndex: onRowClick && !isLoading ? 0 : void 0,
+                    onClick: onRowClick && !isLoading ? handleRowClick(row) : void 0,
+                    onKeyDown: onRowClick && !isLoading ? handleRowKeyDown(row) : void 0,
+                    children: renderCard ? renderCard(row) : renderDefaultCard(row)
+                  },
+                  i
+                )) : !isLoading && /* @__PURE__ */ jsxs20("div", { className: clsx23(tableEmptyContent, "py-12"), children: [
+                  /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
+                  /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
+                ] }) }) : isTableVirtual ? /* @__PURE__ */ jsx23(
+                  "div",
+                  {
+                    ref: scrollRef,
+                    className: "overflow-x-auto overflow-y-auto",
+                    style: { maxHeight: virtualizedMaxHeight },
+                    children: tableEl
+                  }
+                ) : tableEl
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx23(
           "div",
           {
-            ref: scrollRef,
-            className: "overflow-x-auto overflow-y-auto",
-            style: { maxHeight: virtualizedMaxHeight },
-            children: tableEl
+            className: clsx23("rounded-b-xl px-6 py-4", footerSlot.className),
+            style: { backgroundColor: "var(--color-table-rowBg, #ffffff)", ...footerSlot.style },
+            children: /* @__PURE__ */ jsx23(
+              ITPagination,
+              {
+                currentPage,
+                totalPages: computedTotalPages,
+                onPageChange: goToPage,
+                color: "primary",
+                itemsPerPageOptions,
+                itemsPerPage,
+                onItemsPerPageChange: handleItemsPerPageChange,
+                totalItems
+              }
+            )
           }
-        ) : tableEl
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx23("div", { className: "rounded-b-xl px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ jsx23(
-      ITPagination,
-      {
-        currentPage,
-        totalPages: computedTotalPages,
-        onPageChange: goToPage,
-        color: "primary",
-        itemsPerPageOptions,
-        itemsPerPage,
-        onItemsPerPageChange: handleItemsPerPageChange,
-        totalItems
-      }
-    ) })
-  ] });
+        )
+      ]
+    }
+  );
 }
 
 // src/components/organisms/dialog/dialog.tsx
@@ -8411,10 +8483,41 @@ function ITTable({
   virtualizedMaxHeight = 400,
   rowHeight,
   overscan = 5,
-  stickyHeader = false
+  stickyHeader = false,
+  showViewToggle = true,
+  design,
+  colors,
+  containerStyle,
+  cardClassName,
+  cardStyle,
+  toolbarClassName,
+  toolbarStyle,
+  headerClassName,
+  headerStyle,
+  headerCellClassName,
+  headerCellStyle,
+  rowClassName,
+  rowStyle,
+  cellClassName,
+  cellStyle,
+  cardsClassName,
+  cardsStyle,
+  footerClassName,
+  footerStyle
 }) {
   const [viewMode, setViewMode] = useState30(defaultView);
   const { ref: rootRef, width: containerWidth } = useElementSize();
+  const colorVars = {
+    ...colors?.headerBg ? { "--color-table-headerBg": colors.headerBg } : {},
+    ...colors?.headerText ? { "--color-table-headerText": colors.headerText } : {},
+    ...colors?.rowBg ? { "--color-table-rowBg": colors.rowBg } : {},
+    ...colors?.rowText ? { "--color-table-rowText": colors.rowText } : {},
+    ...colors?.rowHover ? { "--color-table-rowHover": colors.rowHover } : {}
+  };
+  const mergeSlot = (slot, flatClassName, flatStyle) => ({
+    className: clsx44(slot?.className, flatClassName),
+    style: { ...slot?.style, ...flatStyle }
+  });
   const isFixed = layout === "fixed";
   const forcedCards = autoCardBreakpoint > 0 && containerWidth > 0 && containerWidth < autoCardBreakpoint;
   const effectiveView = forcedCards ? "cards" : viewMode;
@@ -8746,215 +8849,241 @@ function ITTable({
     event.preventDefault();
     onRowClick(row, event);
   };
-  return /* @__PURE__ */ jsx61("div", { ref: rootRef, className: clsx44("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ jsxs47("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
-    title && /* @__PURE__ */ jsxs47("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
-      /* @__PURE__ */ jsx61(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
-      /* @__PURE__ */ jsxs47("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
-        /* @__PURE__ */ jsxs47(
-          "button",
-          {
-            onClick: () => setViewMode("table"),
-            disabled: forcedCards,
-            className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${effectiveView === "table" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
-            children: [
-              /* @__PURE__ */ jsx61(FaTable2, { size: 11 }),
-              "Table"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs47(
-          "button",
-          {
-            onClick: () => setViewMode("cards"),
-            className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${effectiveView === "cards" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
-            children: [
-              /* @__PURE__ */ jsx61(FaThLarge2, { size: 11 }),
-              "Cards"
-            ]
-          }
-        )
-      ] })
-    ] }),
-    !title && /* @__PURE__ */ jsx61("div", { className: "flex justify-end px-4 pt-3", children: /* @__PURE__ */ jsxs47("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
-      /* @__PURE__ */ jsxs47(
-        "button",
-        {
-          onClick: () => setViewMode("table"),
-          disabled: forcedCards,
-          className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${effectiveView === "table" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
-          children: [
-            /* @__PURE__ */ jsx61(FaTable2, { size: 11 }),
-            "Table"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs47(
-        "button",
-        {
-          onClick: () => setViewMode("cards"),
-          className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${effectiveView === "cards" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
-          children: [
-            /* @__PURE__ */ jsx61(FaThLarge2, { size: 11 }),
-            "Cards"
-          ]
-        }
-      )
-    ] }) }),
-    effectiveView === "cards" ? /* @__PURE__ */ jsx61("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: currentData.length > 0 ? currentData.map((row, i) => /* @__PURE__ */ jsx61(
-      "div",
-      {
-        className: clsx44(tableCardHover, onRowClick && tableCardClickable),
-        role: onRowClick ? "button" : void 0,
-        tabIndex: onRowClick ? 0 : void 0,
-        onClick: onRowClick ? handleRowClick(row) : void 0,
-        onKeyDown: onRowClick ? handleRowKeyDown(row) : void 0,
-        children: renderCard ? renderCard(row) : renderDefaultCard(row)
-      },
-      i
-    )) : /* @__PURE__ */ jsxs47("div", { className: clsx44(tableEmptyContent, "py-12"), children: [
-      /* @__PURE__ */ jsx61(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
-      /* @__PURE__ */ jsx61(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
-    ] }) }) : /* @__PURE__ */ jsx61(
-      "div",
+  const containerSlot = mergeSlot(design?.container, containerClassName, containerStyle);
+  const cardSlot = mergeSlot(design?.card, cardClassName, cardStyle);
+  const toolbarSlot = mergeSlot(design?.toolbar, toolbarClassName, toolbarStyle);
+  const headerSlot = mergeSlot(design?.header, headerClassName, headerStyle);
+  const headerCellSlot = mergeSlot(design?.headerCell, headerCellClassName, headerCellStyle);
+  const rowSlot = mergeSlot(design?.row, rowClassName, rowStyle);
+  const cellSlot = mergeSlot(design?.cell, cellClassName, cellStyle);
+  const cardsSlot = mergeSlot(design?.cards, cardsClassName, cardsStyle);
+  const footerSlot = mergeSlot(design?.footer, footerClassName, footerStyle);
+  const viewToggle = /* @__PURE__ */ jsxs47("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
+    /* @__PURE__ */ jsxs47(
+      "button",
       {
-        ref: isTableVirtual ? scrollRef : void 0,
-        className: isTableVirtual ? "overflow-x-auto overflow-y-auto" : "overflow-x-auto",
-        style: isTableVirtual ? { maxHeight: virtualizedMaxHeight } : void 0,
-        children: /* @__PURE__ */ jsxs47(
-          "table",
-          {
-            className: clsx44(
-              tableLayoutClass,
-              showVerticalBorder && "[&_th]:border-r [&_th:last-child]:border-r-0 [&_td]:border-r [&_td:last-child]:border-r-0",
-              showVerticalBorder && (verticalBorderClassname || "[&_th]:border-slate-100 dark:[&_th]:border-slate-700/30 [&_td]:border-slate-100 dark:[&_td]:border-slate-700/30"),
-              variantStyles[variant],
-              sizeStyles[size]
-            ),
-            style: isFixed ? { tableLayout: "fixed" } : void 0,
-            "aria-rowcount": isTableVirtual ? currentData.length + 1 : void 0,
-            children: [
-              hasColumnWidths && /* @__PURE__ */ jsx61("colgroup", { children: columns.map((col) => /* @__PURE__ */ jsx61(
-                "col",
-                {
-                  style: col.width != null ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0
-                },
-                col.key
-              )) }),
-              /* @__PURE__ */ jsx61("thead", { children: /* @__PURE__ */ jsx61(
-                "tr",
-                {
-                  className: clsx44(tableHeaderRow, "dark:text-slate-200"),
-                  "aria-rowindex": isTableVirtual ? 1 : void 0,
-                  children: columns.map((col) => {
-                    const pin = pinnedMeta[col.key];
-                    const isPinned = pin != null;
-                    return /* @__PURE__ */ jsx61(
-                      "th",
-                      {
-                        scope: "col",
-                        className: clsx44(
-                          tableHeaderCell(col.className, density),
-                          col.align && tableAlignClasses[col.align],
-                          isPinned && "sticky",
-                          isStickyHeader && "sticky top-0 bg-secondary-50",
-                          isPinned ? "z-[15]" : isStickyHeader && "z-10",
-                          isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right")
-                        ),
-                        style: col.minWidth != null || isStickyHeader || isPinned ? {
-                          ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
-                          ...isStickyHeader || isPinned ? { backgroundColor: "var(--color-table-headerBg, #f8fafc)" } : {},
-                          ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {}
-                        } : void 0,
-                        children: /* @__PURE__ */ jsxs47("div", { className: isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]", children: [
-                          /* @__PURE__ */ jsxs47("div", { className: "flex items-center justify-between gap-2", children: [
-                            /* @__PURE__ */ jsx61(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
-                            col.sortable && col.type !== "actions" && /* @__PURE__ */ jsx61(
-                              "button",
-                              {
-                                onClick: () => handleSort(col.key),
-                                className: `p-1 rounded-md transition-colors ${sortConfig?.key === col.key ? "bg-secondary-200 text-secondary-900" : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"}`,
-                                title: `Ordenar por ${col.label}`,
-                                children: /* @__PURE__ */ jsx61(MdOutlineSwapVert2, { className: "w-4 h-4", "aria-hidden": "true" })
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsx61("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
-                        ] })
-                      },
-                      col.key
-                    );
-                  })
-                }
-              ) }),
-              /* @__PURE__ */ jsx61("tbody", { className: clsx44(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? /* @__PURE__ */ jsxs47(Fragment9, { children: [
-                isTableVirtual && topSpacerHeight > 0 && /* @__PURE__ */ jsx61("tr", { "aria-hidden": "true", style: { height: topSpacerHeight }, children: /* @__PURE__ */ jsx61("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) }),
-                windowData.map((row, windowIndex) => {
-                  const absoluteIndex = isTableVirtual ? startIndex + windowIndex : windowIndex;
-                  return /* @__PURE__ */ jsx61(
-                    "tr",
-                    {
-                      "aria-rowindex": isTableVirtual ? absoluteIndex + 2 : void 0,
-                      className: clsx44(
-                        tableRow,
-                        variant === "striped" && absoluteIndex % 2 === 0 && "bg-secondary-50/40 dark:bg-slate-800/20",
-                        onRowClick && tableRowClickable
-                      ),
-                      tabIndex: onRowClick ? 0 : void 0,
-                      onClick: onRowClick ? handleRowClick(row) : void 0,
-                      onKeyDown: onRowClick ? handleRowKeyDown(row) : void 0,
-                      children: columns.map((col) => {
-                        const rawValue = getNestedValue(row, col.key);
-                        const truncateTitle = col.truncate && (typeof rawValue === "string" || typeof rawValue === "number") ? String(rawValue) : void 0;
-                        const pin = pinnedMeta[col.key];
-                        const isPinned = pin != null;
-                        return /* @__PURE__ */ jsx61(
-                          "td",
-                          {
-                            className: clsx44(
-                              tableCell(col.className, density),
-                              col.align && tableAlignClasses[col.align],
-                              isPinned && "sticky bg-[var(--color-table-rowBg,white)] group-hover:bg-[var(--color-table-rowHover,var(--color-secondary-50))]",
-                              isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right"),
-                              isPinned && "z-[1]"
-                            ),
-                            style: col.minWidth != null || isPinned ? {
-                              ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
-                              ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {}
-                            } : void 0,
-                            title: truncateTitle,
-                            children: col.type === "actions" ? /* @__PURE__ */ jsx61("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx61("div", { className: clsx44(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
-                          },
-                          `${absoluteIndex}-${col.key}`
-                        );
-                      })
-                    },
-                    absoluteIndex
-                  );
-                }),
-                isTableVirtual && bottomSpacerHeight > 0 && /* @__PURE__ */ jsx61("tr", { "aria-hidden": "true", style: { height: bottomSpacerHeight }, children: /* @__PURE__ */ jsx61("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) })
-              ] }) : /* @__PURE__ */ jsx61("tr", { children: /* @__PURE__ */ jsx61("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ jsxs47("div", { className: tableEmptyContent, children: [
-                /* @__PURE__ */ jsx61(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
-                /* @__PURE__ */ jsx61(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
-              ] }) }) }) })
-            ]
-          }
-        )
+        onClick: () => setViewMode("table"),
+        disabled: forcedCards,
+        className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${effectiveView === "table" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
+        children: [
+          /* @__PURE__ */ jsx61(FaTable2, { size: 11 }),
+          "Table"
+        ]
       }
     ),
-    /* @__PURE__ */ jsx61("div", { className: "rounded-b-xl px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ jsx61(
-      ITPagination,
+    /* @__PURE__ */ jsxs47(
+      "button",
       {
-        currentPage,
-        totalPages: computedTotalPages,
-        onPageChange: goToPage,
-        color: "primary",
-        itemsPerPageOptions,
-        itemsPerPage,
-        onItemsPerPageChange: handleItemsPerPageChange,
-        totalItems: filteredData.length
+        onClick: () => setViewMode("cards"),
+        className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${effectiveView === "cards" ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`,
+        children: [
+          /* @__PURE__ */ jsx61(FaThLarge2, { size: 11 }),
+          "Cards"
+        ]
       }
-    ) })
-  ] }) });
+    )
+  ] });
+  return /* @__PURE__ */ jsx61(
+    "div",
+    {
+      ref: rootRef,
+      className: clsx44("space-y-4 w-full", containerSlot.className),
+      style: { ...colorVars, ...containerSlot.style },
+      children: /* @__PURE__ */ jsxs47(
+        "div",
+        {
+          className: clsx44(tableContainer, cardSlot.className),
+          style: { backgroundColor: "var(--color-table-rowBg, #ffffff)", ...cardSlot.style },
+          children: [
+            title && /* @__PURE__ */ jsxs47(
+              "div",
+              {
+                className: clsx44("px-6 py-5 flex items-center justify-between", toolbarSlot.className),
+                style: { backgroundColor: "var(--color-table-rowBg, #ffffff)", ...toolbarSlot.style },
+                children: [
+                  /* @__PURE__ */ jsx61(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
+                  showViewToggle && viewToggle
+                ]
+              }
+            ),
+            !title && showViewToggle && /* @__PURE__ */ jsx61("div", { className: clsx44("flex justify-end px-4 pt-3", toolbarSlot.className), style: toolbarSlot.style, children: viewToggle }),
+            effectiveView === "cards" ? /* @__PURE__ */ jsx61("div", { className: clsx44("p-4 space-y-3 max-h-[400px] overflow-y-auto", cardsSlot.className), style: cardsSlot.style, children: currentData.length > 0 ? currentData.map((row, i) => /* @__PURE__ */ jsx61(
+              "div",
+              {
+                className: clsx44(tableCardHover, onRowClick && tableCardClickable),
+                role: onRowClick ? "button" : void 0,
+                tabIndex: onRowClick ? 0 : void 0,
+                onClick: onRowClick ? handleRowClick(row) : void 0,
+                onKeyDown: onRowClick ? handleRowKeyDown(row) : void 0,
+                children: renderCard ? renderCard(row) : renderDefaultCard(row)
+              },
+              i
+            )) : /* @__PURE__ */ jsxs47("div", { className: clsx44(tableEmptyContent, "py-12"), children: [
+              /* @__PURE__ */ jsx61(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
+              /* @__PURE__ */ jsx61(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
+            ] }) }) : /* @__PURE__ */ jsx61(
+              "div",
+              {
+                ref: isTableVirtual ? scrollRef : void 0,
+                className: isTableVirtual ? "overflow-x-auto overflow-y-auto" : "overflow-x-auto",
+                style: isTableVirtual ? { maxHeight: virtualizedMaxHeight } : void 0,
+                children: /* @__PURE__ */ jsxs47(
+                  "table",
+                  {
+                    className: clsx44(
+                      tableLayoutClass,
+                      showVerticalBorder && "[&_th]:border-r [&_th:last-child]:border-r-0 [&_td]:border-r [&_td:last-child]:border-r-0",
+                      showVerticalBorder && (verticalBorderClassname || "[&_th]:border-slate-100 dark:[&_th]:border-slate-700/30 [&_td]:border-slate-100 dark:[&_td]:border-slate-700/30"),
+                      variantStyles[variant],
+                      sizeStyles[size]
+                    ),
+                    style: isFixed ? { tableLayout: "fixed" } : void 0,
+                    "aria-rowcount": isTableVirtual ? currentData.length + 1 : void 0,
+                    children: [
+                      hasColumnWidths && /* @__PURE__ */ jsx61("colgroup", { children: columns.map((col) => /* @__PURE__ */ jsx61(
+                        "col",
+                        {
+                          style: col.width != null ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0
+                        },
+                        col.key
+                      )) }),
+                      /* @__PURE__ */ jsx61("thead", { children: /* @__PURE__ */ jsx61(
+                        "tr",
+                        {
+                          className: clsx44(tableHeaderRow, "dark:text-slate-200", headerSlot.className),
+                          style: headerSlot.style,
+                          "aria-rowindex": isTableVirtual ? 1 : void 0,
+                          children: columns.map((col) => {
+                            const pin = pinnedMeta[col.key];
+                            const isPinned = pin != null;
+                            return /* @__PURE__ */ jsx61(
+                              "th",
+                              {
+                                scope: "col",
+                                className: clsx44(
+                                  tableHeaderCell(col.className, density),
+                                  col.align && tableAlignClasses[col.align],
+                                  isPinned && "sticky",
+                                  isStickyHeader && "sticky top-0 bg-secondary-50",
+                                  isPinned ? "z-[15]" : isStickyHeader && "z-10",
+                                  isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right"),
+                                  headerCellSlot.className,
+                                  col.headerClassName
+                                ),
+                                style: {
+                                  ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
+                                  ...isStickyHeader || isPinned ? { backgroundColor: "var(--color-table-headerBg, #f8fafc)" } : {},
+                                  ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {},
+                                  ...headerCellSlot.style,
+                                  ...col.headerStyle
+                                },
+                                children: /* @__PURE__ */ jsxs47("div", { className: isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]", children: [
+                                  /* @__PURE__ */ jsxs47("div", { className: "flex items-center justify-between gap-2", children: [
+                                    /* @__PURE__ */ jsx61(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
+                                    col.sortable && col.type !== "actions" && /* @__PURE__ */ jsx61(
+                                      "button",
+                                      {
+                                        onClick: () => handleSort(col.key),
+                                        className: `p-1 rounded-md transition-colors ${sortConfig?.key === col.key ? "bg-secondary-200 text-secondary-900" : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"}`,
+                                        title: `Ordenar por ${col.label}`,
+                                        children: /* @__PURE__ */ jsx61(MdOutlineSwapVert2, { className: "w-4 h-4", "aria-hidden": "true" })
+                                      }
+                                    )
+                                  ] }),
+                                  /* @__PURE__ */ jsx61("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
+                                ] })
+                              },
+                              col.key
+                            );
+                          })
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx61("tbody", { className: clsx44(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? /* @__PURE__ */ jsxs47(Fragment9, { children: [
+                        isTableVirtual && topSpacerHeight > 0 && /* @__PURE__ */ jsx61("tr", { "aria-hidden": "true", style: { height: topSpacerHeight }, children: /* @__PURE__ */ jsx61("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) }),
+                        windowData.map((row, windowIndex) => {
+                          const absoluteIndex = isTableVirtual ? startIndex + windowIndex : windowIndex;
+                          return /* @__PURE__ */ jsx61(
+                            "tr",
+                            {
+                              "aria-rowindex": isTableVirtual ? absoluteIndex + 2 : void 0,
+                              className: clsx44(
+                                tableRow,
+                                variant === "striped" && absoluteIndex % 2 === 0 && "bg-secondary-50/40 dark:bg-slate-800/20",
+                                onRowClick && tableRowClickable,
+                                rowSlot.className
+                              ),
+                              style: rowSlot.style,
+                              tabIndex: onRowClick ? 0 : void 0,
+                              onClick: onRowClick ? handleRowClick(row) : void 0,
+                              onKeyDown: onRowClick ? handleRowKeyDown(row) : void 0,
+                              children: columns.map((col) => {
+                                const rawValue = getNestedValue(row, col.key);
+                                const truncateTitle = col.truncate && (typeof rawValue === "string" || typeof rawValue === "number") ? String(rawValue) : void 0;
+                                const pin = pinnedMeta[col.key];
+                                const isPinned = pin != null;
+                                return /* @__PURE__ */ jsx61(
+                                  "td",
+                                  {
+                                    className: clsx44(
+                                      tableCell(col.className, density),
+                                      col.align && tableAlignClasses[col.align],
+                                      isPinned && "sticky bg-[var(--color-table-rowBg,white)] group-hover:bg-[var(--color-table-rowHover,var(--color-secondary-50))]",
+                                      isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right"),
+                                      isPinned && "z-[1]",
+                                      cellSlot.className,
+                                      col.cellClassName
+                                    ),
+                                    style: {
+                                      ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
+                                      ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {},
+                                      ...cellSlot.style,
+                                      ...col.cellStyle
+                                    },
+                                    title: truncateTitle,
+                                    children: col.type === "actions" ? /* @__PURE__ */ jsx61("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx61("div", { className: clsx44(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
+                                  },
+                                  `${absoluteIndex}-${col.key}`
+                                );
+                              })
+                            },
+                            absoluteIndex
+                          );
+                        }),
+                        isTableVirtual && bottomSpacerHeight > 0 && /* @__PURE__ */ jsx61("tr", { "aria-hidden": "true", style: { height: bottomSpacerHeight }, children: /* @__PURE__ */ jsx61("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) })
+                      ] }) : /* @__PURE__ */ jsx61("tr", { children: /* @__PURE__ */ jsx61("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: /* @__PURE__ */ jsxs47("div", { className: tableEmptyContent, children: [
+                        /* @__PURE__ */ jsx61(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
+                        /* @__PURE__ */ jsx61(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
+                      ] }) }) }) })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx61(
+              "div",
+              {
+                className: clsx44("rounded-b-xl px-6 py-4", footerSlot.className),
+                style: { backgroundColor: "var(--color-table-rowBg, #ffffff)", ...footerSlot.style },
+                children: /* @__PURE__ */ jsx61(
+                  ITPagination,
+                  {
+                    currentPage,
+                    totalPages: computedTotalPages,
+                    onPageChange: goToPage,
+                    color: "primary",
+                    itemsPerPageOptions,
+                    itemsPerPage,
+                    onItemsPerPageChange: handleItemsPerPageChange,
+                    totalItems: filteredData.length
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
 }
 
 // src/components/atoms/textarea/textarea.tsx