@fabio.caffarello/react-design-system 3.8.0 → 3.9.0

package/dist/granular/ui/components/Table/TableHeaderCell.js

@@ -0,0 +1,117 @@
+"use client";
+var A = Object.defineProperty, I = Object.defineProperties;
+var O = Object.getOwnPropertyDescriptors;
+var l = Object.getOwnPropertySymbols;
+var $ = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
+var S = (e, n, t) => n in e ? A(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t, D = (e, n) => {
+  for (var t in n || (n = {}))
+    $.call(n, t) && S(e, t, n[t]);
+  if (l)
+    for (var t of l(n))
+      w.call(n, t) && S(e, t, n[t]);
+  return e;
+}, M = (e, n) => I(e, O(n));
+var E = (e, n) => {
+  var t = {};
+  for (var r in e)
+    $.call(e, r) && n.indexOf(r) < 0 && (t[r] = e[r]);
+  if (e != null && l)
+    for (var r of l(e))
+      n.indexOf(r) < 0 && w.call(e, r) && (t[r] = e[r]);
+  return t;
+};
+import { jsx as d, jsxs as P } from "react/jsx-runtime";
+import { useRef as p } from "react";
+import { useTableContext as U } from "./TableContext.js";
+import { getSpacingClass as v } from "../../tokens/spacing.js";
+function V(q) {
+  var g = q, {
+    column: e,
+    resizable: n = !1,
+    width: t,
+    onResize: r,
+    minWidth: C = 50,
+    maxWidth: h,
+    className: L = ""
+  } = g, N = E(g, [
+    "column",
+    "resizable",
+    "width",
+    "onResize",
+    "minWidth",
+    "maxWidth",
+    "className"
+  ]);
+  const { sortState: i, setSorting: u, onSort: c } = U(), R = p(null), f = p(null), a = p(null), b = () => {
+    if (!e.sortable || !c && !u) return;
+    const o = i.column === e.key && i.direction === "asc" ? "desc" : "asc";
+    c ? c(e.key, o) : u(e.key, o);
+  }, W = (o) => {
+    s && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), b());
+  }, z = (o) => {
+    if (o.preventDefault(), o.stopPropagation(), !f.current || !r) return;
+    const j = t || f.current.offsetWidth;
+    a.current = {
+      x: o.clientX,
+      width: j
+    };
+    const x = (H) => {
+      if (!a.current) return;
+      const K = H.clientX - a.current.x, k = a.current.width + K, T = Math.max(
+        C,
+        h ? Math.min(k, h) : k
+      );
+      r(e.key, T);
+    }, y = () => {
+      document.removeEventListener(
+        "mousemove",
+        x
+      ), document.removeEventListener("mouseup", y), a.current = null;
+    };
+    document.addEventListener(
+      "mousemove",
+      x
+    ), document.addEventListener("mouseup", y);
+  }, m = i.column === e.key, s = e.sortable && (c || u), X = m ? i.direction : void 0;
+  return /* @__PURE__ */ d(
+    "th",
+    M(D({
+      ref: f,
+      scope: "col",
+      role: "columnheader",
+      "aria-sort": m ? X === "asc" ? "ascending" : "descending" : s ? "none" : void 0,
+      className: `${v("lg", "px")} ${v("md", "py")} text-left text-xs font-medium text-fg-tertiary uppercase tracking-wider ${s ? "cursor-pointer hover:bg-surface-active focus:bg-surface-active focus:outline-none focus:ring-2 focus:ring-line-focus focus:ring-offset-2 select-none" : ""} ${e.hiddenOnMobile ? "hidden md:table-cell" : ""} ${L}`,
+      onClick: s ? b : void 0,
+      onKeyDown: s ? W : void 0,
+      tabIndex: s ? 0 : void 0,
+      style: t ? { width: `${t}px`, minWidth: `${t}px` } : void 0
+    }, N), {
+      children: /* @__PURE__ */ P(
+        "div",
+        {
+          className: `flex items-center ${v("sm", "gap")} relative`,
+          children: [
+            /* @__PURE__ */ d("span", { children: e.label }),
+            m && /* @__PURE__ */ d("span", { className: "text-fg-tertiary", "aria-hidden": "true", children: i.direction === "asc" ? "↑" : "↓" }),
+            n && r && /* @__PURE__ */ d(
+              "div",
+              {
+                ref: R,
+                className: "absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-surface-brand transition-colors",
+                onMouseDown: z,
+                role: "separator",
+                "aria-orientation": "vertical",
+                "aria-label": `Resize ${e.label} column`,
+                style: { touchAction: "none" }
+              }
+            )
+          ]
+        }
+      )
+    })
+  );
+}
+export {
+  V as default
+};
+//# sourceMappingURL=TableHeaderCell.js.map

package/dist/granular/ui/components/Table/TableHeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCell.js","sources":["../../../../../src/ui/components/Table/TableHeaderCell.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useRef,\n  type HTMLAttributes,\n  type MouseEvent,\n  type KeyboardEvent,\n} from \"react\";\nimport { useTableContext } from \"./TableContext\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport type { TableColumn } from \"./TableTypes\";\n\nexport interface TableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {\n  column: TableColumn;\n  resizable?: boolean;\n  width?: number;\n  onResize?: (columnKey: string, width: number) => void;\n  minWidth?: number;\n  maxWidth?: number;\n}\n\n/**\n * TableHeaderCell Component\n *\n * Renders a header cell (th) for a column.\n * Supports sorting if column is sortable.\n * Must be used within a Table component.\n */\nexport default function TableHeaderCell({\n  column,\n  resizable = false,\n  width,\n  onResize,\n  minWidth = 50,\n  maxWidth,\n  className = \"\",\n  ...props\n}: TableHeaderCellProps) {\n  const { sortState, setSorting, onSort } = useTableContext();\n  const resizeHandleRef = useRef<HTMLDivElement>(null);\n  const cellRef = useRef<HTMLTableCellElement>(null);\n  const resizeStartRef = useRef<{ x: number; width: number } | null>(null);\n\n  const handleSort = () => {\n    if (!column.sortable || (!onSort && !setSorting)) return;\n\n    const newDirection =\n      sortState.column === column.key && sortState.direction === \"asc\"\n        ? \"desc\"\n        : \"asc\";\n\n    if (onSort) {\n      onSort(column.key, newDirection);\n    } else {\n      setSorting(column.key, newDirection);\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLTableCellElement>) => {\n    if (!isSortable) return;\n\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      handleSort();\n    }\n  };\n\n  const handleResizeStart = (e: MouseEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (!cellRef.current || !onResize) return;\n\n    const currentWidth = width || cellRef.current.offsetWidth;\n    resizeStartRef.current = {\n      x: e.clientX,\n      width: currentWidth,\n    };\n\n    const handleMouseMove = (moveEvent: MouseEvent) => {\n      if (!resizeStartRef.current) return;\n\n      const deltaX = moveEvent.clientX - resizeStartRef.current.x;\n      const newWidth = resizeStartRef.current.width + deltaX;\n      const clampedWidth = Math.max(\n        minWidth,\n        maxWidth ? Math.min(newWidth, maxWidth) : newWidth,\n      );\n\n      onResize(column.key, clampedWidth);\n    };\n\n    const handleMouseUp = () => {\n      document.removeEventListener(\n        \"mousemove\",\n        handleMouseMove as unknown as EventListener,\n      );\n      document.removeEventListener(\"mouseup\", handleMouseUp);\n      resizeStartRef.current = null;\n    };\n\n    document.addEventListener(\n      \"mousemove\",\n      handleMouseMove as unknown as EventListener,\n    );\n    document.addEventListener(\"mouseup\", handleMouseUp);\n  };\n\n  const isSorted = sortState.column === column.key;\n  const isSortable = column.sortable && (onSort || setSorting);\n  const sortDirection = isSorted ? sortState.direction : undefined;\n\n  return (\n    <th\n      ref={cellRef}\n      scope=\"col\"\n      role=\"columnheader\"\n      aria-sort={\n        isSorted\n          ? sortDirection === \"asc\"\n            ? \"ascending\"\n            : \"descending\"\n          : isSortable\n            ? \"none\"\n            : undefined\n      }\n      className={`${getSpacingClass(\"lg\", \"px\")} ${getSpacingClass(\"md\", \"py\")} text-left text-xs font-medium text-fg-tertiary uppercase tracking-wider ${\n        isSortable\n          ? \"cursor-pointer hover:bg-surface-active focus:bg-surface-active focus:outline-none focus:ring-2 focus:ring-line-focus focus:ring-offset-2 select-none\"\n          : \"\"\n      } ${column.hiddenOnMobile ? \"hidden md:table-cell\" : \"\"} ${className}`}\n      onClick={isSortable ? handleSort : undefined}\n      onKeyDown={isSortable ? handleKeyDown : undefined}\n      tabIndex={isSortable ? 0 : undefined}\n      style={\n        width ? { width: `${width}px`, minWidth: `${width}px` } : undefined\n      }\n      {...props}\n    >\n      <div\n        className={`flex items-center ${getSpacingClass(\"sm\", \"gap\")} relative`}\n      >\n        <span>{column.label}</span>\n        {isSorted && (\n          <span className=\"text-fg-tertiary\" aria-hidden=\"true\">\n            {sortState.direction === \"asc\" ? \"↑\" : \"↓\"}\n          </span>\n        )}\n        {resizable && onResize && (\n          <div\n            ref={resizeHandleRef}\n            className=\"absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-surface-brand transition-colors\"\n            onMouseDown={handleResizeStart}\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            aria-label={`Resize ${column.label} column`}\n            style={{ touchAction: \"none\" }}\n          />\n        )}\n      </div>\n    </th>\n  );\n}\n"],"names":["TableHeaderCell","_a","_b","column","resizable","width","onResize","minWidth","maxWidth","className","props","__objRest","sortState","setSorting","onSort","useTableContext","resizeHandleRef","useRef","cellRef","resizeStartRef","handleSort","newDirection","handleKeyDown","e","isSortable","handleResizeStart","currentWidth","handleMouseMove","moveEvent","deltaX","newWidth","clampedWidth","handleMouseUp","isSorted","sortDirection","jsx","__spreadProps","__spreadValues","getSpacingClass","jsxs"],"mappings":"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"}

package/dist/granular/ui/components/Table/TableHeaderRow.js

@@ -0,0 +1,89 @@
+"use client";
+var S = Object.defineProperty, k = Object.defineProperties;
+var A = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var m = (e, l, t) => l in e ? S(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, h = (e, l) => {
+  for (var t in l || (l = {}))
+    d.call(l, t) && m(e, t, l[t]);
+  if (s)
+    for (var t of s(l))
+      p.call(l, t) && m(e, t, l[t]);
+  return e;
+}, x = (e, l) => k(e, A(l));
+var g = (e, l) => {
+  var t = {};
+  for (var a in e)
+    d.call(e, a) && l.indexOf(a) < 0 && (t[a] = e[a]);
+  if (e != null && s)
+    for (var a of s(e))
+      l.indexOf(a) < 0 && p.call(e, a) && (t[a] = e[a]);
+  return t;
+};
+import { jsxs as N, jsx as r } from "react/jsx-runtime";
+import { useTableContext as $ } from "./TableContext.js";
+import { getSpacingClass as o } from "../../tokens/spacing.js";
+import T from "./TableHeaderCell.js";
+import j from "../../primitives/Checkbox/Checkbox.js";
+function B(t) {
+  var a = t, {
+    className: e = ""
+  } = a, l = g(a, [
+    "className"
+  ]);
+  const {
+    columns: b,
+    selectable: f,
+    selectionState: n,
+    toggleSelectAll: u,
+    actions: w,
+    resizable: y,
+    columnWidths: i,
+    setColumnWidth: C
+  } = $();
+  return /* @__PURE__ */ N("tr", x(h({ role: "row", className: e }, l), { children: [
+    f && /* @__PURE__ */ r(
+      "th",
+      {
+        scope: "col",
+        role: "columnheader",
+        className: `${o("lg", "px")} ${o("md", "py")} w-12`,
+        "aria-label": "Select all",
+        children: /* @__PURE__ */ r(
+          j,
+          {
+            checked: n.isAllSelected,
+            onChange: u,
+            "aria-label": "Select all rows",
+            className: o("none", "my"),
+            indeterminate: n.isIndeterminate
+          }
+        )
+      }
+    ),
+    b.map((c) => /* @__PURE__ */ r(
+      T,
+      {
+        column: c,
+        resizable: y,
+        width: i == null ? void 0 : i[c.key],
+        onResize: C
+      },
+      c.key
+    )),
+    w && /* @__PURE__ */ r(
+      "th",
+      {
+        scope: "col",
+        role: "columnheader",
+        className: `${o("lg", "px")} ${o("md", "py")} text-right text-xs font-medium text-fg-tertiary uppercase tracking-wider w-12`,
+        "aria-label": "Actions",
+        children: /* @__PURE__ */ r("span", { className: "sr-only", children: "Actions" })
+      }
+    )
+  ] }));
+}
+export {
+  B as default
+};
+//# sourceMappingURL=TableHeaderRow.js.map

package/dist/granular/ui/components/Table/TableHeaderRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderRow.js","sources":["../../../../../src/ui/components/Table/TableHeaderRow.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { useTableContext } from \"./TableContext\";\nimport { Checkbox } from \"../../primitives\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport TableHeaderCell from \"./TableHeaderCell\";\n\nexport type TableHeaderRowProps = HTMLAttributes<HTMLTableRowElement>;\n\n/**\n * TableHeaderRow Component\n *\n * Renders a header row (tr) with header cells.\n * Must be used within a Table component.\n */\nexport default function TableHeaderRow({\n  className = \"\",\n  ...props\n}: TableHeaderRowProps) {\n  const {\n    columns,\n    selectable,\n    selectionState,\n    toggleSelectAll,\n    actions,\n    resizable,\n    columnWidths,\n    setColumnWidth,\n  } = useTableContext();\n\n  return (\n    <tr role=\"row\" className={className} {...props}>\n      {selectable && (\n        <th\n          scope=\"col\"\n          role=\"columnheader\"\n          className={`${getSpacingClass(\"lg\", \"px\")} ${getSpacingClass(\"md\", \"py\")} w-12`}\n          aria-label=\"Select all\"\n        >\n          <Checkbox\n            checked={selectionState.isAllSelected}\n            onChange={toggleSelectAll}\n            aria-label=\"Select all rows\"\n            className={getSpacingClass(\"none\", \"my\")}\n            indeterminate={selectionState.isIndeterminate}\n          />\n        </th>\n      )}\n\n      {columns.map((column) => (\n        <TableHeaderCell\n          key={column.key}\n          column={column}\n          resizable={resizable}\n          width={columnWidths?.[column.key]}\n          onResize={setColumnWidth}\n        />\n      ))}\n\n      {actions && (\n        <th\n          scope=\"col\"\n          role=\"columnheader\"\n          className={`${getSpacingClass(\"lg\", \"px\")} ${getSpacingClass(\"md\", \"py\")} text-right text-xs font-medium text-fg-tertiary uppercase tracking-wider w-12`}\n          aria-label=\"Actions\"\n        >\n          <span className=\"sr-only\">Actions</span>\n        </th>\n      )}\n    </tr>\n  );\n}\n"],"names":["TableHeaderRow","_a","_b","className","props","__objRest","columns","selectable","selectionState","toggleSelectAll","actions","resizable","columnWidths","setColumnWidth","useTableContext","__spreadProps","__spreadValues","jsx","getSpacingClass","Checkbox","column","TableHeaderCell"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,SAAwBA,EAAeC,GAGf;AAHe,MAAAC,IAAAD,GACrC;AAAA,eAAAE,IAAY;AAAA,MADyBD,GAElCE,IAAAC,EAFkCH,GAElC;AAAA,IADH;AAAA;AAGA,QAAM;AAAA,IACJ,SAAAI;AAAA,IACA,YAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,IACEC,EAAA;AAEJ,2BACG,MAAAC,EAAAC,EAAA,EAAG,MAAK,OAAM,WAAAb,KAA0BC,IAAxC,EACE,UAAA;AAAA,IAAAG,KACC,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QACL,WAAW,GAAGC,EAAgB,MAAM,IAAI,CAAC,IAAIA,EAAgB,MAAM,IAAI,CAAC;AAAA,QACxE,cAAW;AAAA,QAEX,UAAA,gBAAAD;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,SAASX,EAAe;AAAA,YACxB,UAAUC;AAAA,YACV,cAAW;AAAA,YACX,WAAWS,EAAgB,QAAQ,IAAI;AAAA,YACvC,eAAeV,EAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,IAIHF,EAAQ,IAAI,CAACc,MACZ,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QAEC,QAAAD;AAAA,QACA,WAAAT;AAAA,QACA,OAAOC,KAAA,gBAAAA,EAAeQ,EAAO;AAAA,QAC7B,UAAUP;AAAA,MAAA;AAAA,MAJLO,EAAO;AAAA,IAAA,CAMf;AAAA,IAEAV,KACC,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QACL,WAAW,GAAGC,EAAgB,MAAM,IAAI,CAAC,IAAIA,EAAgB,MAAM,IAAI,CAAC;AAAA,QACxE,cAAW;AAAA,QAEX,UAAA,gBAAAD,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,UAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC,IAEJ;AAEJ;"}

package/dist/granular/ui/components/Table/TablePagination/TablePagination.js

@@ -0,0 +1,216 @@
+"use client";
+var A = Object.defineProperty, B = Object.defineProperties;
+var R = Object.getOwnPropertyDescriptors;
+var h = Object.getOwnPropertySymbols;
+var w = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var N = (e, s, i) => s in e ? A(e, s, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[s] = i, $ = (e, s) => {
+  for (var i in s || (s = {}))
+    w.call(s, i) && N(e, i, s[i]);
+  if (h)
+    for (var i of h(s))
+      p.call(s, i) && N(e, i, s[i]);
+  return e;
+}, y = (e, s) => B(e, R(s));
+var k = (e, s) => {
+  var i = {};
+  for (var l in e)
+    w.call(e, l) && s.indexOf(l) < 0 && (i[l] = e[l]);
+  if (e != null && h)
+    for (var l of h(e))
+      s.indexOf(l) < 0 && p.call(e, l) && (i[l] = e[l]);
+  return i;
+};
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { ChevronLeft as f, ChevronRight as u } from "lucide-react";
+import { getSpacingClass as m } from "../../../tokens/spacing.js";
+import { Button as c } from "../../../primitives/Button/Button.js";
+import C from "../../../primitives/Text/Text.js";
+import _ from "../../../primitives/Select/Select.js";
+function Q(q) {
+  var b = q, {
+    page: e,
+    pageSize: s,
+    total: i,
+    onPageChange: l,
+    onPageSizeChange: j,
+    pageSizeOptions: S = [10, 25, 50, 100],
+    showPageSizeSelector: z = !0,
+    showPageInfo: I = !0,
+    className: g = ""
+  } = b, L = k(b, [
+    "page",
+    "pageSize",
+    "total",
+    "onPageChange",
+    "onPageSizeChange",
+    "pageSizeOptions",
+    "showPageSizeSelector",
+    "showPageInfo",
+    "className"
+  ]);
+  const t = Math.ceil(i / s), M = i === 0 ? 0 : (e - 1) * s + 1, F = Math.min(e * s, i), v = () => {
+    e > 1 && l(e - 1);
+  }, x = () => {
+    e < t && l(e + 1);
+  }, P = () => {
+    e > 1 && l(1);
+  }, T = () => {
+    e < t && l(t);
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    y($({
+      className: `flex items-center justify-between ${m("base", "px")} ${m("md", "py")} bg-surface-base border-t border-line-default sm:${m("lg", "px")} ${g}`
+    }, L), {
+      children: [
+        /* @__PURE__ */ n("div", { className: "flex flex-1 justify-between sm:hidden", children: [
+          /* @__PURE__ */ a(
+            c,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: v,
+              disabled: e === 1,
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ a(
+            c,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: x,
+              disabled: e >= t,
+              children: "Next"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n("div", { className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between", children: [
+          I && /* @__PURE__ */ a("div", { children: /* @__PURE__ */ n(C, { as: "p", className: "text-sm text-fg-secondary", children: [
+            "Showing ",
+            /* @__PURE__ */ a("span", { className: "font-medium", children: M }),
+            " to",
+            " ",
+            /* @__PURE__ */ a("span", { className: "font-medium", children: F }),
+            " of",
+            " ",
+            /* @__PURE__ */ a("span", { className: "font-medium", children: i }),
+            " results"
+          ] }) }),
+          /* @__PURE__ */ n("div", { className: `flex items-center ${m("base", "gap")}`, children: [
+            z && /* @__PURE__ */ n(
+              "div",
+              {
+                className: `flex items-center ${m("sm", "gap")}`,
+                children: [
+                  /* @__PURE__ */ a(C, { as: "span", className: "text-sm text-fg-secondary", children: "Show:" }),
+                  /* @__PURE__ */ a(
+                    _,
+                    {
+                      "aria-label": "Items per page",
+                      options: S.map((o) => ({
+                        value: o.toString(),
+                        label: o.toString()
+                      })),
+                      value: s.toString(),
+                      onChange: (o) => {
+                        const d = parseInt(o.target.value);
+                        j(d), l(1);
+                      },
+                      className: "w-20"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ n(
+              "nav",
+              {
+                className: `flex items-center ${m("xs", "gap")}`,
+                "aria-label": "Pagination",
+                children: [
+                  /* @__PURE__ */ n(
+                    c,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      onClick: P,
+                      disabled: e === 1,
+                      "aria-label": "First page",
+                      children: [
+                        /* @__PURE__ */ a(f, { className: "h-4 w-4" }),
+                        /* @__PURE__ */ a(f, { className: "h-4 w-4 -ml-2" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    c,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      onClick: v,
+                      disabled: e === 1,
+                      "aria-label": "Previous page",
+                      children: /* @__PURE__ */ a(f, { className: "h-4 w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    "div",
+                    {
+                      className: `flex items-center ${m("xs", "gap")}`,
+                      children: Array.from({ length: Math.min(5, t) }, (o, d) => {
+                        let r;
+                        return t <= 5 || e <= 3 ? r = d + 1 : e >= t - 2 ? r = t - 4 + d : r = e - 2 + d, /* @__PURE__ */ a(
+                          c,
+                          {
+                            variant: e === r ? "primary" : "ghost",
+                            size: "sm",
+                            onClick: () => l(r),
+                            className: "min-w-10",
+                            "aria-label": `Page ${r}`,
+                            "aria-current": e === r ? "page" : void 0,
+                            children: r
+                          },
+                          r
+                        );
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    c,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      onClick: x,
+                      disabled: e >= t,
+                      "aria-label": "Next page",
+                      children: /* @__PURE__ */ a(u, { className: "h-4 w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ n(
+                    c,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      onClick: T,
+                      disabled: e >= t,
+                      "aria-label": "Last page",
+                      children: [
+                        /* @__PURE__ */ a(u, { className: "h-4 w-4" }),
+                        /* @__PURE__ */ a(u, { className: "h-4 w-4 -ml-2" })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    })
+  );
+}
+export {
+  Q as default
+};
+//# sourceMappingURL=TablePagination.js.map

package/dist/granular/ui/components/Table/TablePagination/TablePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.js","sources":["../../../../../../src/ui/components/Table/TablePagination/TablePagination.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { Button, Select, Text } from \"../../../primitives\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { getSpacingClass } from \"../../../tokens/spacing\";\n\nexport interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {\n  page: number;\n  pageSize: number;\n  total: number;\n  onPageChange: (page: number) => void;\n  onPageSizeChange: (size: number) => void;\n  pageSizeOptions?: number[];\n  showPageSizeSelector?: boolean;\n  showPageInfo?: boolean;\n}\n\n/**\n * TablePagination Component\n *\n * Pagination controls for tables with page navigation and page size selection.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <TablePagination\n *   page={1}\n *   pageSize={10}\n *   total={100}\n *   onPageChange={(page) => setPage(page)}\n *   onPageSizeChange={(size) => setPageSize(size)}\n * />\n * ```\n */\nexport default function TablePagination({\n  page,\n  pageSize,\n  total,\n  onPageChange,\n  onPageSizeChange,\n  pageSizeOptions = [10, 25, 50, 100],\n  showPageSizeSelector = true,\n  showPageInfo = true,\n  className = \"\",\n  ...props\n}: TablePaginationProps) {\n  const totalPages = Math.ceil(total / pageSize);\n  const startItem = total === 0 ? 0 : (page - 1) * pageSize + 1;\n  const endItem = Math.min(page * pageSize, total);\n\n  const handlePrevious = () => {\n    if (page > 1) {\n      onPageChange(page - 1);\n    }\n  };\n\n  const handleNext = () => {\n    if (page < totalPages) {\n      onPageChange(page + 1);\n    }\n  };\n\n  const handleFirst = () => {\n    if (page > 1) {\n      onPageChange(1);\n    }\n  };\n\n  const handleLast = () => {\n    if (page < totalPages) {\n      onPageChange(totalPages);\n    }\n  };\n\n  return (\n    <div\n      className={`flex items-center justify-between ${getSpacingClass(\"base\", \"px\")} ${getSpacingClass(\"md\", \"py\")} bg-surface-base border-t border-line-default sm:${getSpacingClass(\"lg\", \"px\")} ${className}`}\n      {...props}\n    >\n      <div className=\"flex flex-1 justify-between sm:hidden\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={handlePrevious}\n          disabled={page === 1}\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={handleNext}\n          disabled={page >= totalPages}\n        >\n          Next\n        </Button>\n      </div>\n\n      <div className=\"hidden sm:flex sm:flex-1 sm:items-center sm:justify-between\">\n        {showPageInfo && (\n          <div>\n            <Text as=\"p\" className=\"text-sm text-fg-secondary\">\n              Showing <span className=\"font-medium\">{startItem}</span> to{\" \"}\n              <span className=\"font-medium\">{endItem}</span> of{\" \"}\n              <span className=\"font-medium\">{total}</span> results\n            </Text>\n          </div>\n        )}\n\n        <div className={`flex items-center ${getSpacingClass(\"base\", \"gap\")}`}>\n          {showPageSizeSelector && (\n            <div\n              className={`flex items-center ${getSpacingClass(\"sm\", \"gap\")}`}\n            >\n              <Text as=\"span\" className=\"text-sm text-fg-secondary\">\n                Show:\n              </Text>\n              <Select\n                aria-label=\"Items per page\"\n                options={pageSizeOptions.map((size) => ({\n                  value: size.toString(),\n                  label: size.toString(),\n                }))}\n                value={pageSize.toString()}\n                onChange={(e) => {\n                  const newSize = parseInt(e.target.value);\n                  onPageSizeChange(newSize);\n                  // Reset to first page when changing page size\n                  onPageChange(1);\n                }}\n                className=\"w-20\"\n              />\n            </div>\n          )}\n\n          <nav\n            className={`flex items-center ${getSpacingClass(\"xs\", \"gap\")}`}\n            aria-label=\"Pagination\"\n          >\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={handleFirst}\n              disabled={page === 1}\n              aria-label=\"First page\"\n            >\n              <ChevronLeft className=\"h-4 w-4\" />\n              <ChevronLeft className=\"h-4 w-4 -ml-2\" />\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={handlePrevious}\n              disabled={page === 1}\n              aria-label=\"Previous page\"\n            >\n              <ChevronLeft className=\"h-4 w-4\" />\n            </Button>\n\n            <div\n              className={`flex items-center ${getSpacingClass(\"xs\", \"gap\")}`}\n            >\n              {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {\n                let pageNum: number;\n                if (totalPages <= 5) {\n                  pageNum = i + 1;\n                } else if (page <= 3) {\n                  pageNum = i + 1;\n                } else if (page >= totalPages - 2) {\n                  pageNum = totalPages - 4 + i;\n                } else {\n                  pageNum = page - 2 + i;\n                }\n\n                return (\n                  <Button\n                    key={pageNum}\n                    variant={page === pageNum ? \"primary\" : \"ghost\"}\n                    size=\"sm\"\n                    onClick={() => onPageChange(pageNum)}\n                    className=\"min-w-10\"\n                    aria-label={`Page ${pageNum}`}\n                    aria-current={page === pageNum ? \"page\" : undefined}\n                  >\n                    {pageNum}\n                  </Button>\n                );\n              })}\n            </div>\n\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={handleNext}\n              disabled={page >= totalPages}\n              aria-label=\"Next page\"\n            >\n              <ChevronRight className=\"h-4 w-4\" />\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={handleLast}\n              disabled={page >= totalPages}\n              aria-label=\"Last page\"\n            >\n              <ChevronRight className=\"h-4 w-4\" />\n              <ChevronRight className=\"h-4 w-4 -ml-2\" />\n            </Button>\n          </nav>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["TablePagination","_a","_b","page","pageSize","total","onPageChange","onPageSizeChange","pageSizeOptions","showPageSizeSelector","showPageInfo","className","props","__objRest","totalPages","startItem","endItem","handlePrevious","handleNext","handleFirst","handleLast","jsxs","__spreadProps","__spreadValues","getSpacingClass","jsx","Button","Text","Select","size","e","newSize","ChevronLeft","_","i","pageNum","ChevronRight"],"mappings":"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"}

package/dist/granular/ui/components/Table/TablePagination.js

@@ -0,0 +1,56 @@
+"use client";
+var c = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var r = (e, a, t) => a in e ? c(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, u = (e, a) => {
+  for (var t in a || (a = {}))
+    l.call(a, t) && r(e, t, a[t]);
+  if (i)
+    for (var t of i(a))
+      p.call(a, t) && r(e, t, a[t]);
+  return e;
+};
+var s = (e, a) => {
+  var t = {};
+  for (var n in e)
+    l.call(e, n) && a.indexOf(n) < 0 && (t[n] = e[n]);
+  if (e != null && i)
+    for (var n of i(e))
+      a.indexOf(n) < 0 && p.call(e, n) && (t[n] = e[n]);
+  return t;
+};
+import { jsx as z } from "react/jsx-runtime";
+import { useTableContext as b } from "./TableContext.js";
+import x from "./TablePagination/TablePagination.js";
+function M(C) {
+  var g = C, {
+    showPageSizeSelector: e = !0,
+    showPageInfo: a = !0,
+    pageSizeOptions: t,
+    className: n = ""
+  } = g, P = s(g, [
+    "showPageSizeSelector",
+    "showPageInfo",
+    "pageSizeOptions",
+    "className"
+  ]);
+  const { paginationState: o, setPage: f, setPageSize: m, paginationMode: S } = b();
+  return S === "client" && o.totalPages <= 1 ? null : /* @__PURE__ */ z(
+    x,
+    u({
+      page: o.page,
+      pageSize: o.pageSize,
+      total: o.total,
+      onPageChange: f,
+      onPageSizeChange: m,
+      pageSizeOptions: t,
+      showPageSizeSelector: e,
+      showPageInfo: a,
+      className: n
+    }, P)
+  );
+}
+export {
+  M as default
+};
+//# sourceMappingURL=TablePagination.js.map

package/dist/granular/ui/components/Table/TablePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.js","sources":["../../../../../src/ui/components/Table/TablePagination.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { useTableContext } from \"./TableContext\";\nimport TablePaginationComponent from \"./TablePagination/TablePagination\";\n\nexport interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {\n  showPageSizeSelector?: boolean;\n  showPageInfo?: boolean;\n  pageSizeOptions?: number[];\n}\n\n/**\n * TablePagination Component\n *\n * Renders pagination controls for the table.\n * Uses pagination state from Table context.\n * Must be used within a Table component.\n */\nexport default function TablePagination({\n  showPageSizeSelector = true,\n  showPageInfo = true,\n  pageSizeOptions,\n  className = \"\",\n  ...props\n}: TablePaginationProps) {\n  const { paginationState, setPage, setPageSize, paginationMode } =\n    useTableContext();\n\n  // Only show pagination if there's more than one page or if in server mode\n  if (paginationMode === \"client\" && paginationState.totalPages <= 1) {\n    return null;\n  }\n\n  return (\n    <TablePaginationComponent\n      page={paginationState.page}\n      pageSize={paginationState.pageSize}\n      total={paginationState.total}\n      onPageChange={setPage}\n      onPageSizeChange={setPageSize}\n      pageSizeOptions={pageSizeOptions}\n      showPageSizeSelector={showPageSizeSelector}\n      showPageInfo={showPageInfo}\n      className={className}\n      {...props}\n    />\n  );\n}\n"],"names":["TablePagination","_a","_b","showPageSizeSelector","showPageInfo","pageSizeOptions","className","props","__objRest","paginationState","setPage","setPageSize","paginationMode","useTableContext","jsx","TablePaginationComponent","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmBA,SAAwBA,EAAgBC,GAMf;AANe,MAAAC,IAAAD,GACtC;AAAA,0BAAAE,IAAuB;AAAA,IACvB,cAAAC,IAAe;AAAA,IACf,iBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,MAJ0BJ,GAKnCK,IAAAC,EALmCN,GAKnC;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,iBAAAO,GAAiB,SAAAC,GAAS,aAAAC,GAAa,gBAAAC,EAAA,IAC7CC,EAAA;AAGF,SAAID,MAAmB,YAAYH,EAAgB,cAAc,IACxD,OAIP,gBAAAK;AAAA,IAACC;AAAAA,IAAAC,EAAA;AAAA,MACC,MAAMP,EAAgB;AAAA,MACtB,UAAUA,EAAgB;AAAA,MAC1B,OAAOA,EAAgB;AAAA,MACvB,cAAcC;AAAA,MACd,kBAAkBC;AAAA,MAClB,iBAAAN;AAAA,MACA,sBAAAF;AAAA,MACA,cAAAC;AAAA,MACA,WAAAE;AAAA,OACIC;AAAA,EAAA;AAGV;"}