@axzydev/axzy_ui_system 1.4.6 → 1.4.8

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/components/molecules/line-bar-chart/line-bar-chart.tsx

@@ -58,8 +58,15 @@ export function ITLineBarChart({
 
   const active = hover !== null ? data[hover] : null;
 
+  /** Posición del tooltip en % del ancho, para que siga al punto sin salir del gráfico. */
+  const tooltipLeft = (() => {
+    if (hover === null) return 0;
+    const center = (x(hover) / width) * 100;
+    return Math.min(Math.max(center, 12), 88);
+  })();
+
   return (
-    <div className={`flex flex-col gap-3 ${className}`.trim()}>
+    <div className={`relative flex flex-col gap-3 ${className}`.trim()}>
       <svg
         role="img"
         aria-label={ariaLabel}
@@ -136,22 +143,24 @@ export function ITLineBarChart({
           </g>
         ))}
 
-        {active && hover !== null && (
-          <g transform={`translate(${Math.min(Math.max(x(hover) - 62, 4), width - 132)}, ${padding.top + 4})`}>
-            <rect width={128} height={46} rx={6} fill="#0f172a" opacity={0.9} />
-            <text x={10} y={18} fontSize={10} fill="#e2e8f0">
-              {active.label}
-            </text>
-            <text x={10} y={32} fontSize={10} fill={lineColor}>
-              {lineLabel}: {formatValue(active.line)}
-            </text>
-            <text x={10} y={44} fontSize={10} fill="#93c5fd">
-              {barLabel}: {formatValue(active.bar)}
-            </text>
-          </g>
-        )}
       </svg>
 
+      {active && (
+        <div
+          className="pointer-events-none absolute z-10 -translate-x-1/2 rounded-lg px-2.5 py-1.5 shadow-lg"
+          style={{ left: `${tooltipLeft}%`, top: 4, background: "#0f172a", opacity: 0.94, minWidth: 132 }}
+          role="status"
+        >
+          <p className="text-[10px] font-semibold" style={{ color: "#e2e8f0" }}>{active.label}</p>
+          <p className="text-[11px] tabular-nums" style={{ color: lineColor }}>
+            {lineLabel}: {formatValue(active.line)}
+          </p>
+          <p className="text-[11px] tabular-nums" style={{ color: "#93c5fd" }}>
+            {barLabel}: {formatValue(active.bar)}
+          </p>
+        </div>
+      )}
+
       <ul className="flex flex-wrap items-center gap-4 text-[11px]" style={{ color: "#475569" }}>
         <li>
           <span className="h-2.5 w-2.5 rounded-sm" style={{ background: lineColor }} aria-hidden />

package/src/components/molecules/table/table.doc.mdx

@@ -33,6 +33,20 @@ Basic data table with column definitions, sorting, and configurable visual varia
 | `rowHeight` | `number` | `getRowHeight(size, density)` | Assumed uniform row height (px). Size-aware: `size="md"` baseline is 33 / 45 / 53 for compact / normal / comfortable; `size` shifts it by the font-size line box (sm 16px / md 20px / lg 28px). |
 | `overscan` | `number` | `5` | Extra rows rendered above and below the viewport to avoid blank gaps. |
 | `stickyHeader` | `boolean` | `false` | Keeps header cells sticky while the virtualized body scrolls. Only effective when `virtualized` is true. |
+| `showViewToggle` | `boolean` | `true` | Renders the Table\|Cards switcher in the toolbar. Hiding it does not disable `defaultView` or `autoCardBreakpoint`. |
+| `colors` | `TableColors` | — | Per-instance color overrides (`headerBg`, `headerText`, `rowBg`, `rowText`, `rowHover`). Written as local `--color-table-*` variables, so they beat the global theme for this instance only. |
+| `design` | `TableDesign` | — | Per-region overrides. Each region (`container`, `card`, `toolbar`, `header`, `headerCell`, `row`, `cell`, `cards`, `footer`) accepts `className` and `style`. |
+| `containerStyle` | `CSSProperties` | — | Inline styles for the outermost wrapper. |
+| `cardClassName` / `cardStyle` | `string` / `CSSProperties` | — | The rounded card surface that wraps toolbar, table and footer. |
+| `toolbarClassName` / `toolbarStyle` | `string` / `CSSProperties` | — | The toolbar strip holding the title and/or the view toggle. |
+| `headerClassName` / `headerStyle` | `string` / `CSSProperties` | — | The `<thead>` row. |
+| `headerCellClassName` / `headerCellStyle` | `string` / `CSSProperties` | — | Every `<th>` header cell. |
+| `rowClassName` / `rowStyle` | `string` / `CSSProperties` | — | Every body `<tr>`. |
+| `cellClassName` / `cellStyle` | `string` / `CSSProperties` | — | Every body `<td>`. |
+| `cardsClassName` / `cardsStyle` | `string` / `CSSProperties` | — | The cards-view scroll wrapper. |
+| `footerClassName` / `footerStyle` | `string` / `CSSProperties` | — | The pagination footer strip. |
+
+> When both `design.<region>` and its flat shortcut are passed, the flat shortcut wins.
 
 ### Column fields
 
@@ -43,6 +57,8 @@ Basic data table with column definitions, sorting, and configurable visual varia
 | `align` | `"left" \| "center" \| "right"` | `"left"` | Horizontal alignment of the column's header and cells. |
 | `truncate` | `boolean` | `false` | Truncates overflowing cell content with an ellipsis and exposes the raw string/number via the native `title` attribute. |
 | `pinned` | `"left" \| "right"` | `undefined` | Freezes the column to the given horizontal edge while the table scrolls sideways. `"left"` keeps it flush to the left edge, `"right"` to the right edge. Omit to leave the column unpinned (identical to the previous behavior). Offsets accumulate from each preceding pinned column's pixel `width` / `minWidth`, so give every pinned column of a side a pixel `width`. The pinned cell gets an opaque background (row background + row hover) and a 1px separator shadow on its frozen edge. One pinned column per side is the supported contract. |
+| `headerClassName` / `headerStyle` | `string` / `CSSProperties` | — | Extra classes / inline styles for this column's `<th>` only (merged after `design.headerCell`). |
+| `cellClassName` / `cellStyle` | `string` / `CSSProperties` | — | Extra classes / inline styles for this column's `<td>` only (merged after `design.cell`). |
 | `filter` | `true \| "catalog" \| "search" \| "date" \| "date-range"` | `false` | Filter control rendered in the header. `true` = text/number input (or boolean toggle when `type: "boolean"`); `"catalog"` = `ITSelect` fed by `catalogOptions.data`; `"search"` = `ITSearchSelect` typeahead fed by `catalogOptions.data` (optional `catalogOptions.onSearch` for server-side search); `"date"` / `"date-range"` = `ITDatePicker` single/range, bounded by `dateFilterOptions`. |
 
 ## Usage
@@ -109,7 +125,8 @@ const pinnedColumns = [
 - **Anti horizontal scroll recipe:** `layout="fixed"` + a `width` on every column + `truncate` on long text + `density="compact"`. `width` accepts a `number` (px) or any CSS length string (`"20%"`, `"12rem"`). A `<colgroup>` is only emitted when at least one column defines a `width`.
 - **Pinned columns:** set `columns[].pinned: "left" | "right"` to freeze a column to that edge during horizontal scroll (`position: sticky`; the wrapper needs no `relative`). Omitting `pinned` renders exactly as before. Sticky offsets accumulate from each preceding pinned column's pixel `width` / `minWidth`; a non-px width contributes `minWidth ?? 0`, so give every pinned column of a side a pixel `width`. The pinned cell gets an opaque background (`--color-table-rowBg`, row hover `--color-table-rowHover`) and a 1px separator shadow on its frozen edge. Z-layering: pinned body cell `z-[1]` < sticky header `z-10` < pinned header `z-[15]`; it composes with `stickyHeader` and `virtualized`. One pinned column per side is the supported contract. Known limitation: with `variant="striped"` the opaque pinned background covers that column's stripe tint.
 - With the default `layout="auto"`, `min-w-max` stays active so column widths can still reflow as different cell content enters the window during vertical scroll. Use `layout="fixed"` + column `width` for stable widths.
-- `autoCardBreakpoint` swaps to the cards view when the container (not the viewport) is narrower than the given px value; the Table toggle is disabled while forced, the Cards toggle stays enabled.
+- `autoCardBreakpoint` swaps to the cards view when the container (not the viewport) is narrower than the given px value; the Table toggle is disabled while forced, the Cards toggle stays enabled. It is measured in px in both directions.
+- **Design props:** `design` (or the flat `<slot>ClassName` / `<slot>Style` shortcuts, which win when both are passed) styles `container`, `card`, `toolbar`, `header`, `headerCell`, `row`, `cell`, `cards` and `footer`; `columns[]` adds `headerClassName` / `cellClassName` (+ their `*Style`). `colors` writes local `--color-table-*` variables and overrides the global `ITThemeProvider` palette for that instance only. Because the theme pins its table colors with `!important` on `thead tr` / `tbody tr` / `th span` / `td div`, use `colors` (not `style`) to change colors, and `showViewToggle={false}` to hide the Table\|Cards switch.
 - **Virtualization** applies to the **table view only** — the cards view is never virtualized. It only pays off with a large page size: raise `defaultItemsPerPage` and `itemsPerPageOptions` (defaults are `10` and `[5, 10, 20]`). Rows are assumed to have a uniform `rowHeight`; use `truncate` + `layout="fixed"` for predictable heights.
 - Scroll resets to the top on page or items-per-page change, but **not** on filter change (known limitation). `aria-rowcount` reflects the current page (+1), not the whole dataset, because pagination is independent.
 - `virtualizedMaxHeight`, `rowHeight`, `overscan`, and `stickyHeader` only take effect when `virtualized` is true. `stickyHeader` makes each `<th>` sticky using the `--color-table-headerBg` token (fallback `#f8fafc`).

package/src/components/molecules/table/table.props.ts

@@ -1,4 +1,4 @@
-import { TableDensity, TableSize, TableVariants } from "@/types/table.types";
+import { TableDensity, TableDesignProps, TableSize, TableVariants } from "@/types/table.types";
 
 /** Data type of a table column, controls default rendering, filter UI, and sort comparison. */
 export type ColumnType = "string" | "date" | "number" | "boolean" | "actions" | "catalog";
@@ -31,6 +31,14 @@ export interface Column<T = any> {
   label: string;
   /** Additional CSS classes applied to both the header (`<th>`) and body (`<td>`) cells of this column. */
   className?: string;
+  /** Extra CSS classes applied only to this column's header (`<th>`), merged after `className`. */
+  headerClassName?: string;
+  /** Inline styles applied only to this column's header (`<th>`), merged after the table-level header-cell style. */
+  headerStyle?: React.CSSProperties;
+  /** Extra CSS classes applied only to this column's body cells (`<td>`), merged after `className`. */
+  cellClassName?: string;
+  /** Inline styles applied only to this column's body cells (`<td>`), merged after the table-level cell style. */
+  cellStyle?: React.CSSProperties;
   /** Formats numeric values as Mexican pesos (MXN) via `Intl`-based currency formatting. Only applies when `type` is `"number"`. @default false */
   currencyMX?: boolean;
   /** Custom action buttons/content rendered for a `"actions"`-type column. Receives the full row object. */
@@ -109,7 +117,7 @@ export interface Column<T = any> {
   pinned?: "left" | "right";
 }
 
-export interface ITTableProps<T> {
+export interface ITTableProps<T> extends TableDesignProps {
   /** Column definitions: key, label, type, sortable behavior, filters, and custom rendering. */
   columns: Column<T>[];
   /** Additional CSS classes for the outermost container. */

package/src/components/molecules/table/table.tsx

@@ -74,10 +74,51 @@ export default function ITTable<T extends Record<string, unknown>>({
   rowHeight,
   overscan = 5,
   stickyHeader = false,
+  showViewToggle = true,
+  design,
+  colors,
+  containerStyle,
+  cardClassName,
+  cardStyle,
+  toolbarClassName,
+  toolbarStyle,
+  headerClassName,
+  headerStyle,
+  headerCellClassName,
+  headerCellStyle,
+  rowClassName,
+  rowStyle,
+  cellClassName,
+  cellStyle,
+  cardsClassName,
+  cardsStyle,
+  footerClassName,
+  footerStyle,
 }: ITTableProps<T>) {
   const [viewMode, setViewMode] = useState<"table" | "cards">(defaultView);
   const { ref: rootRef, width: containerWidth } = useElementSize<HTMLDivElement>();
 
+  // Per-instance color overrides written as local `--color-table-*` variables.
+  // Declared on the wrapper (an ancestor), they beat the global theme's
+  // `:root` values for this subtree only.
+  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 } : {}),
+  } as React.CSSProperties;
+
+  /** Merge a `design` slot with its flat shortcut (flat wins) into className/style. */
+  const mergeSlot = (
+    slot: { className?: string; style?: React.CSSProperties } | undefined,
+    flatClassName?: string,
+    flatStyle?: React.CSSProperties
+  ) => ({
+    className: clsx(slot?.className, flatClassName),
+    style: { ...slot?.style, ...flatStyle } as React.CSSProperties,
+  });
+
   const isFixed = layout === "fixed";
   const forcedCards =
     autoCardBreakpoint > 0 && containerWidth > 0 && containerWidth < autoCardBreakpoint;
@@ -468,73 +509,73 @@ export default function ITTable<T extends Record<string, unknown>>({
     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 = (
+    <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">
+      <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"
+        }`}
+      >
+        <FaTable size={11} />
+        Table
+      </button>
+      <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"
+        }`}
+      >
+        <FaThLarge size={11} />
+        Cards
+      </button>
+    </div>
+  );
+
   return (
-    <div ref={rootRef} className={clsx("space-y-4 w-full", containerClassName)}>
-      <div className={tableContainer} style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+    <div
+      ref={rootRef}
+      className={clsx("space-y-4 w-full", containerSlot.className)}
+      style={{ ...colorVars, ...containerSlot.style }}
+    >
+      <div
+        className={clsx(tableContainer, cardSlot.className)}
+        style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)', ...cardSlot.style }}
+      >
         {/* Header outside overflow */}
         {title && (
-          <div className="px-6 py-5 flex items-center justify-between" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+          <div
+            className={clsx("px-6 py-5 flex items-center justify-between", toolbarSlot.className)}
+            style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)', ...toolbarSlot.style }}
+          >
             <ITText as="h2" className="text-xl font-bold text-secondary-900 leading-tight">{title}</ITText>
-            <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">
-              <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"
-                }`}
-              >
-                <FaTable size={11} />
-                Table
-              </button>
-              <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"
-                }`}
-              >
-                <FaThLarge size={11} />
-                Cards
-              </button>
-            </div>
+            {showViewToggle && viewToggle}
           </div>
         )}
 
-        {!title && (
-          <div className="flex justify-end px-4 pt-3">
-            <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">
-              <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"
-                }`}
-              >
-                <FaTable size={11} />
-                Table
-              </button>
-              <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"
-                }`}
-              >
-                <FaThLarge size={11} />
-                Cards
-              </button>
-            </div>
+        {!title && showViewToggle && (
+          <div className={clsx("flex justify-end px-4 pt-3", toolbarSlot.className)} style={toolbarSlot.style}>
+            {viewToggle}
           </div>
         )}
 
         {effectiveView === "cards" ? (
-          <div className="p-4 space-y-3 max-h-[400px] overflow-y-auto">
+          <div className={clsx("p-4 space-y-3 max-h-[400px] overflow-y-auto", cardsSlot.className)} style={cardsSlot.style}>
             {currentData.length > 0 ? (
               currentData.map((row, i) => (
                 <div
@@ -588,7 +629,8 @@ export default function ITTable<T extends Record<string, unknown>>({
               )}
               <thead>
                 <tr
-                  className={clsx(tableHeaderRow, "dark:text-slate-200")}
+                  className={clsx(tableHeaderRow, "dark:text-slate-200", headerSlot.className)}
+                  style={headerSlot.style}
                   aria-rowindex={isTableVirtual ? 1 : undefined}
                 >
                   {columns.map((col) => {
@@ -604,23 +646,23 @@ export default function ITTable<T extends Record<string, unknown>>({
                         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
-                          ? {
-                              ...(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 }
-                                : {}),
-                            }
-                          : undefined
-                      }
+                      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,
+                      }}
                     >
                       <div className={isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]"}>
                         <div className="flex items-center justify-between gap-2">
@@ -664,8 +706,10 @@ export default function ITTable<T extends Record<string, unknown>>({
                           className={clsx(
                             tableRow,
                             variant === "striped" && absoluteIndex % 2 === 0 && "bg-secondary-50/40 dark:bg-slate-800/20",
-                            onRowClick && tableRowClickable
+                            onRowClick && tableRowClickable,
+                            rowSlot.className
                           )}
+                          style={rowSlot.style}
                           tabIndex={onRowClick ? 0 : undefined}
                           onClick={onRowClick ? handleRowClick(row) : undefined}
                           onKeyDown={onRowClick ? handleRowKeyDown(row) : undefined}
@@ -687,20 +731,20 @@ export default function ITTable<T extends Record<string, unknown>>({
                                   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
-                                    ? {
-                                        ...(col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {}),
-                                        ...(isPinned
-                                          ? pin.side === "left"
-                                            ? { left: pin.offset }
-                                            : { right: pin.offset }
-                                          : {}),
-                                      }
-                                    : undefined
-                                }
+                                style={{
+                                  ...(col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {}),
+                                  ...(isPinned
+                                    ? pin.side === "left"
+                                      ? { left: pin.offset }
+                                      : { right: pin.offset }
+                                    : {}),
+                                  ...cellSlot.style,
+                                  ...col.cellStyle,
+                                }}
                                 title={truncateTitle}
                               >
                                 {col.type === "actions" ? (
@@ -740,7 +784,10 @@ export default function ITTable<T extends Record<string, unknown>>({
         )}
 
         {/* Pagination */}
-        <div className="rounded-b-xl px-6 py-4" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+        <div
+          className={clsx("rounded-b-xl px-6 py-4", footerSlot.className)}
+          style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)', ...footerSlot.style }}
+        >
           <ITPagination
             currentPage={currentPage}
             totalPages={computedTotalPages}

package/src/components/organisms/data-table/ITDataTable.doc.mdx

@@ -38,6 +38,22 @@ Advanced server-side data table with automatic pagination, column sorting, and f
 | `rowHeight` | `number` | `getRowHeight(size, density)` | Assumed uniform row height (px). Size-aware: `size="md"` baseline is 33 / 45 / 53 for compact / normal / comfortable; `size` shifts it by the font-size line box (sm 16px / md 20px / lg 28px). |
 | `overscan` | `number` | `5` | Extra rows rendered above and below the viewport to avoid blank gaps. |
 | `stickyHeader` | `boolean` | `false` | Keeps header cells sticky while the virtualized body scrolls. Only effective when `virtualized` is true. |
+| `showViewToggle` | `boolean` | `true` | Renders the Table\|Cards switcher in the toolbar. Hiding it does not disable `defaultView` or `autoCardBreakpoint`. |
+| `colors` | `TableColors` | — | Per-instance color overrides (`headerBg`, `headerText`, `rowBg`, `rowText`, `rowHover`). Written as local `--color-table-*` variables, so they beat the global theme for this instance only. |
+| `design` | `TableDesign` | — | Per-region overrides. Each region (`container`, `card`, `toolbar`, `header`, `headerCell`, `row`, `cell`, `cards`, `footer`) accepts `className` and `style`. |
+| `containerStyle` | `CSSProperties` | — | Inline styles for the outermost wrapper. |
+| `cardClassName` / `cardStyle` | `string` / `CSSProperties` | — | The rounded card surface that wraps toolbar, table and footer. |
+| `toolbarClassName` / `toolbarStyle` | `string` / `CSSProperties` | — | The toolbar strip holding the title and/or the view toggle. |
+| `headerClassName` / `headerStyle` | `string` / `CSSProperties` | — | The `<thead>` row. |
+| `headerCellClassName` / `headerCellStyle` | `string` / `CSSProperties` | — | Every `<th>` header cell. |
+| `rowClassName` / `rowStyle` | `string` / `CSSProperties` | — | Every body `<tr>`. |
+| `cellClassName` / `cellStyle` | `string` / `CSSProperties` | — | Every body `<td>`. |
+| `cardsClassName` / `cardsStyle` | `string` / `CSSProperties` | — | The cards-view scroll wrapper. |
+| `footerClassName` / `footerStyle` | `string` / `CSSProperties` | — | The pagination footer strip. |
+
+Columns also accept `headerClassName`, `headerStyle`, `cellClassName` and `cellStyle` for per-column design.
+
+> When both `design.<region>` and its flat shortcut are passed, the flat shortcut wins.
 
 ## Usage
 
@@ -102,7 +118,8 @@ import { ITDataTable } from '@axzydev/axzy_ui_system';
 - **Anti horizontal scroll recipe:** `layout="fixed"` + a `width` on every column + `truncate` on long text + `density="compact"`. `width` accepts a `number` (px) or any CSS length string (`"20%"`, `"12rem"`). A `<colgroup>` is only emitted when at least one column defines a `width`.
 - **Pinned columns:** set `columns[].pinned: "left" | "right"` to freeze a column to that edge during horizontal scroll (`position: sticky`; the wrapper needs no `relative`). Omitting `pinned` renders exactly as before. Sticky offsets accumulate from each preceding pinned column's pixel `width` / `minWidth`; a non-px width contributes `minWidth ?? 0`, so give every pinned column of a side a pixel `width`. The pinned cell gets an opaque background (`--color-table-rowBg`, row hover `--color-table-rowHover`) and a 1px separator shadow on its frozen edge. Z-layering: pinned body cell `z-[1]` < sticky header `z-10` < pinned header `z-[15]` < the loading overlay `z-20`; it composes with `stickyHeader` and `virtualized`. One pinned column per side is the supported contract. Known limitation: with `variant="striped"` the opaque pinned background covers that column's stripe tint.
 - With the default `layout="auto"`, `min-w-max` stays active so column widths can still reflow as different cell content enters the window during vertical scroll. Use `layout="fixed"` + column `width` for stable widths.
-- `autoCardBreakpoint` swaps to the cards view when the container (not the viewport) is narrower than the given px value; the Table toggle is disabled while forced, the Cards toggle stays enabled.
+- `autoCardBreakpoint` swaps to the cards view when the container (not the viewport) is narrower than the given px value; the Table toggle is disabled while forced, the Cards toggle stays enabled. It is measured in px in both directions.
+- **Design props:** `design` (or the flat `<slot>ClassName` / `<slot>Style` shortcuts, which win when both are passed) styles `container`, `card`, `toolbar`, `header`, `headerCell`, `row`, `cell`, `cards` and `footer`; `columns[]` adds `headerClassName` / `cellClassName` (+ their `*Style`). `colors` writes local `--color-table-*` variables and overrides the global `ITThemeProvider` palette for that instance only. Because the theme pins its table colors with `!important` on `thead tr` / `tbody tr` / `th span` / `td div`, use `colors` (not `style`) to change colors, and `showViewToggle={false}` to hide the Table\|Cards switch.
 - **Virtualization** applies to the **table view only** — the cards view is never virtualized. It only pays off with a large page size: raise `defaultItemsPerPage` and `itemsPerPageOptions` (defaults are `10` and `[5, 10, 20]`). Rows are assumed to have a uniform `rowHeight`; use `truncate` + `layout="fixed"` for predictable heights.
 - Scroll resets to the top on page or items-per-page change, but **not** on filter change (known limitation). `aria-rowcount` reflects the current page (+1), not the whole dataset, because pagination is independent.
 - `virtualizedMaxHeight`, `rowHeight`, `overscan`, and `stickyHeader` only take effect when `virtualized` is true. `stickyHeader` makes each `<th>` sticky using the `--color-table-headerBg` token (fallback `#f8fafc`).

package/src/components/organisms/data-table/dataTable.props.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { Column } from "@/components/molecules/table/table.props";
-import { ColumnFilters, TableDensity } from "@/types/table.types";
+import { ColumnFilters, TableDensity, TableDesignProps } from "@/types/table.types";
 
 /** Parameters passed to `fetchData` every time pagination, filters, or sorting change. */
 export interface ITDataTableFetchParams {
@@ -31,7 +31,8 @@ export interface ITDataTableResponse<T> {
   total: number;
 }
 
-export interface ITDataTableProps<T extends Record<string, unknown>> {
+export interface ITDataTableProps<T extends Record<string, unknown>>
+  extends TableDesignProps {
   /**
    * The column configuration array matching ITTable but adapted for Server-Side processing
    */