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

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

@@ -0,0 +1,95 @@
+"use client";
+var T = Object.defineProperty, v = Object.defineProperties;
+var j = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var f = (e, t, o) => t in e ? T(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, h = (e, t) => {
+  for (var o in t || (t = {}))
+    g.call(t, o) && f(e, o, t[o]);
+  if (i)
+    for (var o of i(t))
+      b.call(t, o) && f(e, o, t[o]);
+  return e;
+}, u = (e, t) => v(e, j(t));
+var x = (e, t) => {
+  var o = {};
+  for (var l in e)
+    g.call(e, l) && t.indexOf(l) < 0 && (o[l] = e[l]);
+  if (e != null && i)
+    for (var l of i(e))
+      t.indexOf(l) < 0 && b.call(e, l) && (o[l] = e[l]);
+  return o;
+};
+import { jsxs as A, jsx as s } from "react/jsx-runtime";
+import { useTableContext as q } from "./TableContext.js";
+import { getSpacingClass as a } from "../../tokens/spacing.js";
+import z from "./TableCell.js";
+import B from "./TableActions.js";
+import D from "../../primitives/Checkbox/Checkbox.js";
+function M(E) {
+  var m = E, {
+    row: e,
+    rowIndex: t,
+    className: o = "",
+    onClick: l,
+    style: C
+  } = m, $ = x(m, [
+    "row",
+    "rowIndex",
+    "className",
+    "onClick",
+    "style"
+  ]);
+  const {
+    columns: S,
+    selectable: d,
+    selectionState: k,
+    toggleRowSelection: R,
+    getRowId: w,
+    actions: y,
+    onRowClick: p
+  } = q(), r = w(e, t), n = k.selectedRows.includes(r), N = (c) => {
+    l && l(c), p && p(e);
+  };
+  return /* @__PURE__ */ A(
+    "tr",
+    u(h({
+      role: "row",
+      "aria-selected": d ? n : void 0,
+      "aria-rowindex": t + 1,
+      className: `hover:bg-surface-hover ${n ? "bg-surface-selected" : ""} ${o}`,
+      onClick: N,
+      style: C
+    }, $), {
+      children: [
+        d && /* @__PURE__ */ s(
+          "td",
+          {
+            className: `${a("lg", "px")} ${a("base", "py")}`,
+            children: /* @__PURE__ */ s(
+              D,
+              {
+                checked: n,
+                onChange: () => R(r),
+                "aria-label": `Select row ${r}`,
+                className: a("none", "my")
+              }
+            )
+          }
+        ),
+        S.map((c) => /* @__PURE__ */ s(z, { column: c, row: e }, String(c.key))),
+        y && /* @__PURE__ */ s(
+          "td",
+          {
+            className: `${a("lg", "px")} ${a("base", "py")} text-right`,
+            children: /* @__PURE__ */ s(B, { row: e })
+          }
+        )
+      ]
+    })
+  );
+}
+export {
+  M as default
+};
+//# sourceMappingURL=TableRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sources":["../../../../../src/ui/components/Table/TableRow.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { useTableContext } from \"./TableContext\";\nimport { Checkbox } from \"../../primitives\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport TableCell from \"./TableCell\";\nimport TableActions from \"./TableActions\";\n\nexport interface TableRowProps<\n  T extends Record<string, unknown> = Record<string, unknown>,\n> extends Omit<HTMLAttributes<HTMLTableRowElement>, \"style\"> {\n  row: T;\n  rowIndex: number;\n  style?: React.CSSProperties;\n  className?: string;\n}\n\n/**\n * TableRow Component\n *\n * Renders a table row (tr) with cells.\n * Supports selection and row click.\n * Must be used within a Table component.\n */\nexport default function TableRow<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>({\n  row,\n  rowIndex,\n  className = \"\",\n  onClick,\n  style,\n  ...props\n}: TableRowProps<T>) {\n  const {\n    columns,\n    selectable,\n    selectionState,\n    toggleRowSelection,\n    getRowId,\n    actions,\n    onRowClick,\n  } = useTableContext<T>();\n\n  const id = getRowId(row, rowIndex);\n  const isSelected = selectionState.selectedRows.includes(id);\n\n  const handleClick = (e: React.MouseEvent<HTMLTableRowElement>) => {\n    if (onClick) {\n      onClick(e);\n    }\n    if (onRowClick) {\n      onRowClick(row);\n    }\n  };\n\n  return (\n    <tr\n      role=\"row\"\n      aria-selected={selectable ? isSelected : undefined}\n      aria-rowindex={rowIndex + 1}\n      className={`hover:bg-surface-hover ${isSelected ? \"bg-surface-selected\" : \"\"} ${className}`}\n      onClick={handleClick}\n      style={style}\n      {...props}\n    >\n      {selectable && (\n        <td\n          className={`${getSpacingClass(\"lg\", \"px\")} ${getSpacingClass(\"base\", \"py\")}`}\n        >\n          <Checkbox\n            checked={isSelected}\n            onChange={() => toggleRowSelection(id)}\n            aria-label={`Select row ${id}`}\n            className={getSpacingClass(\"none\", \"my\")}\n          />\n        </td>\n      )}\n\n      {columns.map((column) => (\n        <TableCell key={String(column.key)} column={column} row={row} />\n      ))}\n\n      {actions && (\n        <td\n          className={`${getSpacingClass(\"lg\", \"px\")} ${getSpacingClass(\"base\", \"py\")} text-right`}\n        >\n          <TableActions row={row} />\n        </td>\n      )}\n    </tr>\n  );\n}\n"],"names":["TableRow","_a","_b","row","rowIndex","className","onClick","style","props","__objRest","columns","selectable","selectionState","toggleRowSelection","getRowId","actions","onRowClick","useTableContext","id","isSelected","handleClick","e","jsxs","__spreadProps","__spreadValues","jsx","getSpacingClass","Checkbox","column","TableCell","TableActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAwBA,EAEtBC,GAOmB;AAPnB,MAAAC,IAAAD,GACA;AAAA,SAAAE;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,OAAAC;AAAA,MALAL,GAMGM,IAAAC,EANHP,GAMG;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM;AAAA,IACJ,SAAAQ;AAAA,IACA,YAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IAAKJ,EAASX,GAAKC,CAAQ,GAC3Be,IAAaP,EAAe,aAAa,SAASM,CAAE,GAEpDE,IAAc,CAACC,MAA6C;AAChE,IAAIf,KACFA,EAAQe,CAAC,GAEPL,KACFA,EAAWb,CAAG;AAAA,EAElB;AAEA,SACE,gBAAAmB;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAeb,IAAaQ,IAAa;AAAA,MACzC,iBAAef,IAAW;AAAA,MAC1B,WAAW,0BAA0Be,IAAa,wBAAwB,EAAE,IAAId,CAAS;AAAA,MACzF,SAASe;AAAA,MACT,OAAAb;AAAA,OACIC,IAPL;AAAA,MASE,UAAA;AAAA,QAAAG,KACC,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAGC,EAAgB,MAAM,IAAI,CAAC,IAAIA,EAAgB,QAAQ,IAAI,CAAC;AAAA,YAE1E,UAAA,gBAAAD;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,SAASR;AAAA,gBACT,UAAU,MAAMN,EAAmBK,CAAE;AAAA,gBACrC,cAAY,cAAcA,CAAE;AAAA,gBAC5B,WAAWQ,EAAgB,QAAQ,IAAI;AAAA,cAAA;AAAA,YAAA;AAAA,UACzC;AAAA,QAAA;AAAA,QAIHhB,EAAQ,IAAI,CAACkB,MACZ,gBAAAH,EAACI,GAAA,EAAmC,QAAAD,GAAgB,KAAAzB,EAAA,GAApC,OAAOyB,EAAO,GAAG,CAA6B,CAC/D;AAAA,QAEAb,KACC,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAGC,EAAgB,MAAM,IAAI,CAAC,IAAIA,EAAgB,QAAQ,IAAI,CAAC;AAAA,YAE1E,UAAA,gBAAAD,EAACK,KAAa,KAAA3B,EAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1,71 @@
+"use client";
+var k = Object.defineProperty, y = Object.defineProperties;
+var I = Object.getOwnPropertyDescriptors;
+var M = Object.getOwnPropertySymbols;
+var U = Object.prototype.hasOwnProperty, j = Object.prototype.propertyIsEnumerable;
+var E = (n, e, t) => e in n ? k(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, L = (n, e) => {
+  for (var t in e || (e = {}))
+    U.call(e, t) && E(n, t, e[t]);
+  if (M)
+    for (var t of M(e))
+      j.call(e, t) && E(n, t, e[t]);
+  return n;
+}, x = (n, e) => y(n, I(e));
+import { useState as h, useRef as v, useCallback as c } from "react";
+function B(n = {}) {
+  const {
+    defaultWidths: e = {},
+    minWidth: t = 50,
+    maxWidth: a,
+    resizable: R = !0
+  } = n, [X, z] = h(e), [r, W] = h(!1), [d, p] = h(null), i = v(
+    null
+  ), f = c(
+    (s, u) => {
+      const o = Math.max(
+        t,
+        a ? Math.min(u, a) : u
+      );
+      z((S) => x(L({}, S), {
+        [s]: o
+      }));
+    },
+    [t, a]
+  ), b = c(() => {
+    z(e);
+  }, [e]), w = c(
+    (s, u, o) => {
+      R && (W(!0), p(s), i.current = { startX: u, startWidth: o });
+    },
+    [R]
+  ), C = c(
+    (s) => {
+      if (!r || !d || !i.current) return;
+      const u = s - i.current.startX, o = i.current.startWidth + u;
+      f(d, o);
+    },
+    [r, d, f]
+  ), g = c(() => {
+    W(!1), p(null), i.current = null;
+  }, []), l = v(
+    void 0
+  ), m = v(void 0);
+  return typeof window != "undefined" && (l.current = (s) => {
+    r && C(s.clientX);
+  }, m.current = () => {
+    r && g();
+  }, r ? (document.addEventListener("mousemove", l.current), document.addEventListener("mouseup", m.current)) : (l.current && document.removeEventListener("mousemove", l.current), m.current && document.removeEventListener("mouseup", m.current))), {
+    columnWidths: X,
+    setColumnWidth: f,
+    resetColumnWidths: b,
+    isResizing: r,
+    resizingColumn: d,
+    startResize: w,
+    handleResize: C,
+    endResize: g
+  };
+}
+export {
+  B as useColumnResizing
+};
+//# sourceMappingURL=useColumnResizing.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnResizing.js","sources":["../../../../../src/ui/components/Table/useColumnResizing.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, useCallback, useRef } from \"react\";\n\nexport interface ColumnWidth {\n  [key: string]: number;\n}\n\nexport interface UseColumnResizingOptions {\n  defaultWidths?: ColumnWidth;\n  minWidth?: number;\n  maxWidth?: number;\n  resizable?: boolean;\n}\n\nexport interface UseColumnResizingResult {\n  columnWidths: ColumnWidth;\n  setColumnWidth: (columnKey: string, width: number) => void;\n  resetColumnWidths: () => void;\n  isResizing: boolean;\n  resizingColumn: string | null;\n  startResize: (columnKey: string, startX: number, startWidth: number) => void;\n  handleResize: (currentX: number) => void;\n  endResize: () => void;\n}\n\n/**\n * useColumnResizing Hook\n *\n * Hook for managing column resizing in tables.\n *\n * @example\n * ```tsx\n * const {\n *   columnWidths,\n *   setColumnWidth,\n *   startResize,\n *   handleResize,\n *   endResize,\n * } = useColumnResizing({\n *   defaultWidths: { name: 200, email: 250 },\n *   minWidth: 100,\n * });\n * ```\n */\nexport function useColumnResizing(\n  options: UseColumnResizingOptions = {},\n): UseColumnResizingResult {\n  const {\n    defaultWidths = {},\n    minWidth = 50,\n    maxWidth,\n    resizable = true,\n  } = options;\n\n  const [columnWidths, setColumnWidths] = useState<ColumnWidth>(defaultWidths);\n  const [isResizing, setIsResizing] = useState(false);\n  const [resizingColumn, setResizingColumn] = useState<string | null>(null);\n  const resizeStateRef = useRef<{ startX: number; startWidth: number } | null>(\n    null,\n  );\n\n  const setColumnWidth = useCallback(\n    (columnKey: string, width: number) => {\n      const clampedWidth = Math.max(\n        minWidth,\n        maxWidth ? Math.min(width, maxWidth) : width,\n      );\n      setColumnWidths((prev) => ({\n        ...prev,\n        [columnKey]: clampedWidth,\n      }));\n    },\n    [minWidth, maxWidth],\n  );\n\n  const resetColumnWidths = useCallback(() => {\n    setColumnWidths(defaultWidths);\n  }, [defaultWidths]);\n\n  const startResize = useCallback(\n    (columnKey: string, startX: number, startWidth: number) => {\n      if (!resizable) return;\n      setIsResizing(true);\n      setResizingColumn(columnKey);\n      resizeStateRef.current = { startX, startWidth };\n    },\n    [resizable],\n  );\n\n  const handleResize = useCallback(\n    (currentX: number) => {\n      if (!isResizing || !resizingColumn || !resizeStateRef.current) return;\n\n      const deltaX = currentX - resizeStateRef.current.startX;\n      const newWidth = resizeStateRef.current.startWidth + deltaX;\n      setColumnWidth(resizingColumn, newWidth);\n    },\n    [isResizing, resizingColumn, setColumnWidth],\n  );\n\n  const endResize = useCallback(() => {\n    setIsResizing(false);\n    setResizingColumn(null);\n    resizeStateRef.current = null;\n  }, []);\n\n  // Handle mouse move and mouse up globally during resize\n  const handleMouseMoveRef = useRef<((e: MouseEvent) => void) | undefined>(\n    undefined,\n  );\n  const handleMouseUpRef = useRef<(() => void) | undefined>(undefined);\n\n  if (typeof window !== \"undefined\") {\n    handleMouseMoveRef.current = (e: MouseEvent) => {\n      if (isResizing) {\n        handleResize(e.clientX);\n      }\n    };\n\n    handleMouseUpRef.current = () => {\n      if (isResizing) {\n        endResize();\n      }\n    };\n\n    if (isResizing) {\n      document.addEventListener(\"mousemove\", handleMouseMoveRef.current);\n      document.addEventListener(\"mouseup\", handleMouseUpRef.current);\n    } else {\n      if (handleMouseMoveRef.current) {\n        document.removeEventListener(\"mousemove\", handleMouseMoveRef.current);\n      }\n      if (handleMouseUpRef.current) {\n        document.removeEventListener(\"mouseup\", handleMouseUpRef.current);\n      }\n    }\n  }\n\n  return {\n    columnWidths,\n    setColumnWidth,\n    resetColumnWidths,\n    isResizing,\n    resizingColumn,\n    startResize,\n    handleResize,\n    endResize,\n  };\n}\n"],"names":["useColumnResizing","options","defaultWidths","minWidth","maxWidth","resizable","columnWidths","setColumnWidths","useState","isResizing","setIsResizing","resizingColumn","setResizingColumn","resizeStateRef","useRef","setColumnWidth","useCallback","columnKey","width","clampedWidth","prev","__spreadProps","__spreadValues","resetColumnWidths","startResize","startX","startWidth","handleResize","currentX","deltaX","newWidth","endResize","handleMouseMoveRef","handleMouseUpRef","e"],"mappings":";;;;;;;;;;;;;;AA6CO,SAASA,EACdC,IAAoC,IACX;AACzB,QAAM;AAAA,IACJ,eAAAC,IAAgB,CAAA;AAAA,IAChB,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,EAAA,IACVJ,GAEE,CAACK,GAAcC,CAAe,IAAIC,EAAsBN,CAAa,GACrE,CAACO,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5C,CAACG,GAAgBC,CAAiB,IAAIJ,EAAwB,IAAI,GAClEK,IAAiBC;AAAA,IACrB;AAAA,EAAA,GAGIC,IAAiBC;AAAA,IACrB,CAACC,GAAmBC,MAAkB;AACpC,YAAMC,IAAe,KAAK;AAAA,QACxBhB;AAAA,QACAC,IAAW,KAAK,IAAIc,GAAOd,CAAQ,IAAIc;AAAA,MAAA;AAEzC,MAAAX,EAAgB,CAACa,MAAUC,EAAAC,EAAA,IACtBF,IADsB;AAAA,QAEzB,CAACH,CAAS,GAAGE;AAAA,MAAA,EACb;AAAA,IACJ;AAAA,IACA,CAAChB,GAAUC,CAAQ;AAAA,EAAA,GAGfmB,IAAoBP,EAAY,MAAM;AAC1C,IAAAT,EAAgBL,CAAa;AAAA,EAC/B,GAAG,CAACA,CAAa,CAAC,GAEZsB,IAAcR;AAAA,IAClB,CAACC,GAAmBQ,GAAgBC,MAAuB;AACzD,MAAKrB,MACLK,EAAc,EAAI,GAClBE,EAAkBK,CAAS,GAC3BJ,EAAe,UAAU,EAAE,QAAAY,GAAQ,YAAAC,EAAA;AAAA,IACrC;AAAA,IACA,CAACrB,CAAS;AAAA,EAAA,GAGNsB,IAAeX;AAAA,IACnB,CAACY,MAAqB;AACpB,UAAI,CAACnB,KAAc,CAACE,KAAkB,CAACE,EAAe,QAAS;AAE/D,YAAMgB,IAASD,IAAWf,EAAe,QAAQ,QAC3CiB,IAAWjB,EAAe,QAAQ,aAAagB;AACrD,MAAAd,EAAeJ,GAAgBmB,CAAQ;AAAA,IACzC;AAAA,IACA,CAACrB,GAAYE,GAAgBI,CAAc;AAAA,EAAA,GAGvCgB,IAAYf,EAAY,MAAM;AAClC,IAAAN,EAAc,EAAK,GACnBE,EAAkB,IAAI,GACtBC,EAAe,UAAU;AAAA,EAC3B,GAAG,CAAA,CAAE,GAGCmB,IAAqBlB;AAAA,IACzB;AAAA,EAAA,GAEImB,IAAmBnB,EAAiC,MAAS;AAEnE,SAAI,OAAO,UAAW,gBACpBkB,EAAmB,UAAU,CAACE,MAAkB;AAC9C,IAAIzB,KACFkB,EAAaO,EAAE,OAAO;AAAA,EAE1B,GAEAD,EAAiB,UAAU,MAAM;AAC/B,IAAIxB,KACFsB,EAAA;AAAA,EAEJ,GAEItB,KACF,SAAS,iBAAiB,aAAauB,EAAmB,OAAO,GACjE,SAAS,iBAAiB,WAAWC,EAAiB,OAAO,MAEzDD,EAAmB,WACrB,SAAS,oBAAoB,aAAaA,EAAmB,OAAO,GAElEC,EAAiB,WACnB,SAAS,oBAAoB,WAAWA,EAAiB,OAAO,KAK/D;AAAA,IACL,cAAA3B;AAAA,IACA,gBAAAS;AAAA,IACA,mBAAAQ;AAAA,IACA,YAAAd;AAAA,IACA,gBAAAE;AAAA,IACA,aAAAa;AAAA,IACA,cAAAG;AAAA,IACA,WAAAI;AAAA,EAAA;AAEJ;"}

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

@@ -0,0 +1,50 @@
+"use client";
+import { useState as p, useRef as M, useMemo as S, useEffect as m } from "react";
+function b(n, d) {
+  const { itemHeight: t, containerHeight: u, overscan: i = 5, enabled: s = !0 } = d, [c, a] = p(0), l = M(null), g = S(() => {
+    if (!s || n.length === 0)
+      return n.map((o, f) => ({
+        index: f,
+        start: f * t,
+        end: (f + 1) * t,
+        size: t
+      }));
+    const e = Math.max(
+      0,
+      Math.floor(c / t) - i
+    ), r = u ? Math.min(
+      n.length,
+      Math.ceil((c + u) / t) + i
+    ) : n.length, h = [];
+    for (let o = e; o < r; o++)
+      h.push({
+        index: o,
+        start: o * t,
+        end: (o + 1) * t,
+        size: t
+      });
+    return h;
+  }, [n, t, c, u, i, s]), v = n.length * t;
+  return m(() => {
+    if (!s || !l.current) return;
+    const e = l.current, r = () => {
+      a(e.scrollTop);
+    };
+    return e.addEventListener("scroll", r, { passive: !0 }), () => e.removeEventListener("scroll", r);
+  }, [s]), {
+    virtualItems: g,
+    totalHeight: v,
+    scrollOffset: c,
+    setScrollOffset: a,
+    scrollToIndex: (e) => {
+      if (!l.current) return;
+      const r = e * t;
+      l.current.scrollTop = r, a(r);
+    },
+    containerRef: l
+  };
+}
+export {
+  b as useVirtualScrolling
+};
+//# sourceMappingURL=useVirtualScrolling.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualScrolling.js","sources":["../../../../../src/ui/components/Table/useVirtualScrolling.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, useRef, useMemo } from \"react\";\n\nexport interface UseVirtualScrollingOptions {\n  itemHeight: number; // Height of each row in pixels\n  containerHeight?: number; // Height of visible container\n  overscan?: number; // Number of items to render outside visible area\n  enabled?: boolean; // Whether virtual scrolling is enabled\n}\n\nexport interface VirtualScrollingResult {\n  virtualItems: Array<{\n    index: number;\n    start: number;\n    end: number;\n    size: number;\n  }>;\n  totalHeight: number;\n  scrollOffset: number;\n  setScrollOffset: (offset: number) => void;\n  scrollToIndex: (index: number) => void;\n  containerRef: React.RefObject<HTMLDivElement | null>;\n}\n\n/**\n * useVirtualScrolling Hook\n *\n * Hook for virtual scrolling to improve performance with large datasets.\n * Only renders visible items plus overscan buffer.\n *\n * @example\n * ```tsx\n * const { virtualItems, totalHeight, containerRef } = useVirtualScrolling({\n *   itemHeight: 50,\n *   containerHeight: 400,\n *   overscan: 5,\n * });\n * ```\n */\nexport function useVirtualScrolling<T>(\n  items: T[],\n  options: UseVirtualScrollingOptions,\n): VirtualScrollingResult {\n  const { itemHeight, containerHeight, overscan = 5, enabled = true } = options;\n\n  const [scrollOffset, setScrollOffset] = useState(0);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Calculate visible range\n  const virtualItems = useMemo(() => {\n    if (!enabled || items.length === 0) {\n      return items.map((_, index) => ({\n        index,\n        start: index * itemHeight,\n        end: (index + 1) * itemHeight,\n        size: itemHeight,\n      }));\n    }\n\n    const visibleStart = Math.max(\n      0,\n      Math.floor(scrollOffset / itemHeight) - overscan,\n    );\n    const visibleEnd = containerHeight\n      ? Math.min(\n          items.length,\n          Math.ceil((scrollOffset + containerHeight) / itemHeight) + overscan,\n        )\n      : items.length;\n\n    const result: Array<{\n      index: number;\n      start: number;\n      end: number;\n      size: number;\n    }> = [];\n    for (let i = visibleStart; i < visibleEnd; i++) {\n      result.push({\n        index: i,\n        start: i * itemHeight,\n        end: (i + 1) * itemHeight,\n        size: itemHeight,\n      });\n    }\n    return result;\n  }, [items, itemHeight, scrollOffset, containerHeight, overscan, enabled]);\n\n  const totalHeight = items.length * itemHeight;\n\n  // Handle scroll events\n  useEffect(() => {\n    if (!enabled || !containerRef.current) return;\n\n    const container = containerRef.current;\n    const handleScroll = () => {\n      setScrollOffset(container.scrollTop);\n    };\n\n    container.addEventListener(\"scroll\", handleScroll, { passive: true });\n    return () => container.removeEventListener(\"scroll\", handleScroll);\n  }, [enabled]);\n\n  const scrollToIndex = (index: number) => {\n    if (!containerRef.current) return;\n    const offset = index * itemHeight;\n    containerRef.current.scrollTop = offset;\n    setScrollOffset(offset);\n  };\n\n  return {\n    virtualItems,\n    totalHeight,\n    scrollOffset,\n    setScrollOffset,\n    scrollToIndex,\n    containerRef,\n  };\n}\n"],"names":["useVirtualScrolling","items","options","itemHeight","containerHeight","overscan","enabled","scrollOffset","setScrollOffset","useState","containerRef","useRef","virtualItems","useMemo","_","index","visibleStart","visibleEnd","result","i","totalHeight","useEffect","container","handleScroll","offset"],"mappings":";;AAwCO,SAASA,EACdC,GACAC,GACwB;AACxB,QAAM,EAAE,YAAAC,GAAY,iBAAAC,GAAiB,UAAAC,IAAW,GAAG,SAAAC,IAAU,OAASJ,GAEhE,CAACK,GAAcC,CAAe,IAAIC,EAAS,CAAC,GAC5CC,IAAeC,EAAuB,IAAI,GAG1CC,IAAeC,EAAQ,MAAM;AACjC,QAAI,CAACP,KAAWL,EAAM,WAAW;AAC/B,aAAOA,EAAM,IAAI,CAACa,GAAGC,OAAW;AAAA,QAC9B,OAAAA;AAAA,QACA,OAAOA,IAAQZ;AAAA,QACf,MAAMY,IAAQ,KAAKZ;AAAA,QACnB,MAAMA;AAAA,MAAA,EACN;AAGJ,UAAMa,IAAe,KAAK;AAAA,MACxB;AAAA,MACA,KAAK,MAAMT,IAAeJ,CAAU,IAAIE;AAAA,IAAA,GAEpCY,IAAab,IACf,KAAK;AAAA,MACHH,EAAM;AAAA,MACN,KAAK,MAAMM,IAAeH,KAAmBD,CAAU,IAAIE;AAAA,IAAA,IAE7DJ,EAAM,QAEJiB,IAKD,CAAA;AACL,aAASC,IAAIH,GAAcG,IAAIF,GAAYE;AACzC,MAAAD,EAAO,KAAK;AAAA,QACV,OAAOC;AAAA,QACP,OAAOA,IAAIhB;AAAA,QACX,MAAMgB,IAAI,KAAKhB;AAAA,QACf,MAAMA;AAAA,MAAA,CACP;AAEH,WAAOe;AAAA,EACT,GAAG,CAACjB,GAAOE,GAAYI,GAAcH,GAAiBC,GAAUC,CAAO,CAAC,GAElEc,IAAcnB,EAAM,SAASE;AAGnC,SAAAkB,EAAU,MAAM;AACd,QAAI,CAACf,KAAW,CAACI,EAAa,QAAS;AAEvC,UAAMY,IAAYZ,EAAa,SACzBa,IAAe,MAAM;AACzB,MAAAf,EAAgBc,EAAU,SAAS;AAAA,IACrC;AAEA,WAAAA,EAAU,iBAAiB,UAAUC,GAAc,EAAE,SAAS,IAAM,GAC7D,MAAMD,EAAU,oBAAoB,UAAUC,CAAY;AAAA,EACnE,GAAG,CAACjB,CAAO,CAAC,GASL;AAAA,IACL,cAAAM;AAAA,IACA,aAAAQ;AAAA,IACA,cAAAb;AAAA,IACA,iBAAAC;AAAA,IACA,eAZoB,CAACO,MAAkB;AACvC,UAAI,CAACL,EAAa,QAAS;AAC3B,YAAMc,IAAST,IAAQZ;AACvB,MAAAO,EAAa,QAAQ,YAAYc,GACjChB,EAAgBgB,CAAM;AAAA,IACxB;AAAA,IAQE,cAAAd;AAAA,EAAA;AAEJ;"}

package/dist/granular/ui/components/Tabs/Tabs.js

@@ -0,0 +1,39 @@
+"use client";
+var b = Object.defineProperty, g = Object.defineProperties;
+var u = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var n = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
+var m = (r, o, t) => o in r ? b(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t, T = (r, o) => {
+  for (var t in o || (o = {}))
+    n.call(o, t) && m(r, t, o[t]);
+  if (s)
+    for (var t of s(o))
+      a.call(o, t) && m(r, t, o[t]);
+  return r;
+}, f = (r, o) => g(r, u(o));
+var p = (r, o) => {
+  var t = {};
+  for (var i in r)
+    n.call(r, i) && o.indexOf(i) < 0 && (t[i] = r[i]);
+  if (r != null && s)
+    for (var i of s(r))
+      o.indexOf(i) < 0 && a.call(r, i) && (t[i] = r[i]);
+  return t;
+};
+import { jsx as c } from "react/jsx-runtime";
+import { TabsProvider as C } from "./TabsProvider.js";
+import { TabsList as d } from "./TabsList.js";
+import { TabsTrigger as l } from "./TabsTrigger.js";
+import { TabsContent as x } from "./TabsContent.js";
+function e(t) {
+  var i = t, { children: r } = i, o = p(i, ["children"]);
+  return /* @__PURE__ */ c(C, f(T({}, o), { children: r }));
+}
+e.List = d;
+e.Trigger = l;
+e.Content = x;
+const q = e;
+export {
+  q as default
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/granular/ui/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../../../src/ui/components/Tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { type ReactNode } from \"react\";\nimport { TabsProvider, type TabsProviderProps } from \"./TabsProvider\";\nimport { TabsList } from \"./TabsList\";\nimport { TabsTrigger } from \"./TabsTrigger\";\nimport { TabsContent } from \"./TabsContent\";\n\nexport interface TabsProps extends Omit<TabsProviderProps, \"children\"> {\n  children: ReactNode;\n}\n\n/**\n * Tabs Component\n *\n * A flexible tabs component with compound components pattern.\n * Supports horizontal and vertical orientations, automatic and manual activation modes.\n * Fully accessible with ARIA attributes and keyboard navigation.\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"tab1\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"tab1\">Tab 1</Tabs.Trigger>\n *     <Tabs.Trigger value=\"tab2\">Tab 2</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"tab1\">Content 1</Tabs.Content>\n *   <Tabs.Content value=\"tab2\">Content 2</Tabs.Content>\n * </Tabs>\n * ```\n */\nfunction TabsComponent({ children, ...providerProps }: TabsProps) {\n  return <TabsProvider {...providerProps}>{children}</TabsProvider>;\n}\n\n// Compound components\nTabsComponent.List = TabsList;\nTabsComponent.Trigger = TabsTrigger;\nTabsComponent.Content = TabsContent;\n\n// Type declaration for compound components\nexport interface TabsComponentType extends React.FC<TabsProps> {\n  List: typeof TabsList;\n  Trigger: typeof TabsTrigger;\n  Content: typeof TabsContent;\n}\n\n// Cast to include compound components\nconst Tabs: TabsComponentType = TabsComponent as TabsComponentType;\n\nexport default Tabs;\n"],"names":["TabsComponent","_a","_b","children","providerProps","__objRest","jsx","TabsProvider","__spreadProps","__spreadValues","TabsList","TabsTrigger","TabsContent","Tabs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAASA,EAAcC,GAA2C;AAA3C,MAAAC,IAAAD,GAAE,YAAAE,MAAFD,GAAeE,IAAAC,EAAfH,GAAe,CAAb;AACvB,SAAO,gBAAAI,EAACC,GAAAC,EAAAC,EAAA,IAAiBL,IAAjB,EAAiC,UAAAD,EAAA,EAAS;AACpD;AAGAH,EAAc,OAAOU;AACrBV,EAAc,UAAUW;AACxBX,EAAc,UAAUY;AAUxB,MAAMC,IAA0Bb;"}

package/dist/granular/ui/components/Tabs/TabsContent.js

@@ -0,0 +1,59 @@
+"use client";
+var d = Object.defineProperty, $ = Object.defineProperties;
+var x = Object.getOwnPropertyDescriptors;
+var o = Object.getOwnPropertySymbols;
+var r = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
+var l = (t, e, n) => e in t ? d(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, m = (t, e) => {
+  for (var n in e || (e = {}))
+    r.call(e, n) && l(t, n, e[n]);
+  if (o)
+    for (var n of o(e))
+      c.call(e, n) && l(t, n, e[n]);
+  return t;
+}, u = (t, e) => $(t, x(e));
+var b = (t, e) => {
+  var n = {};
+  for (var a in t)
+    r.call(t, a) && e.indexOf(a) < 0 && (n[a] = t[a]);
+  if (t != null && o)
+    for (var a of o(t))
+      e.indexOf(a) < 0 && c.call(t, a) && (n[a] = t[a]);
+  return n;
+};
+import { jsx as C } from "react/jsx-runtime";
+import { useTabsContext as g } from "./TabsContext.js";
+import { getSpacingClass as v } from "../../tokens/spacing.js";
+function N(T) {
+  var i = T, {
+    value: t,
+    children: e,
+    forceMount: n = !1,
+    className: a = ""
+  } = i, f = b(i, [
+    "value",
+    "children",
+    "forceMount",
+    "className"
+  ]);
+  const { value: p } = g(), s = p === t;
+  return !s && !n ? null : /* @__PURE__ */ C(
+    "div",
+    u(m({
+      role: "tabpanel",
+      id: `tabpanel-${t}`,
+      "aria-labelledby": `tab-${t}`,
+      hidden: !s,
+      className: `
+        ${v("sm", "mt")}
+        focus:outline-none
+        ${a}
+      `
+    }, f), {
+      children: e
+    })
+  );
+}
+export {
+  N as TabsContent
+};
+//# sourceMappingURL=TabsContent.js.map

package/dist/granular/ui/components/Tabs/TabsContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContent.js","sources":["../../../../../src/ui/components/Tabs/TabsContent.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTabsContext } from \"./TabsContext\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\n\nexport interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n  children: ReactNode;\n  forceMount?: boolean;\n}\n\n/**\n * TabsContent Component\n *\n * Content panel for a tab.\n * Only renders when the tab is active (unless forceMount is true).\n * Must be used within a Tabs component.\n */\nexport function TabsContent({\n  value,\n  children,\n  forceMount = false,\n  className = \"\",\n  ...props\n}: TabsContentProps) {\n  const { value: activeValue } = useTabsContext();\n\n  const isActive = activeValue === value;\n\n  if (!isActive && !forceMount) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"tabpanel\"\n      id={`tabpanel-${value}`}\n      aria-labelledby={`tab-${value}`}\n      hidden={!isActive}\n      className={`\n        ${getSpacingClass(\"sm\", \"mt\")}\n        focus:outline-none\n        ${className}\n      `}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["TabsContent","_a","_b","value","children","forceMount","className","props","__objRest","activeValue","useTabsContext","isActive","jsx","__spreadProps","__spreadValues","getSpacingClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,SAASA,EAAYC,GAMP;AANO,MAAAC,IAAAD,GAC1B;AAAA,WAAAE;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,WAAAC,IAAY;AAAA,MAJcJ,GAKvBK,IAAAC,EALuBN,GAKvB;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,OAAOO,EAAA,IAAgBC,EAAA,GAEzBC,IAAWF,MAAgBN;AAEjC,SAAI,CAACQ,KAAY,CAACN,IACT,OAIP,gBAAAO;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI,YAAYX,CAAK;AAAA,MACrB,mBAAiB,OAAOA,CAAK;AAAA,MAC7B,QAAQ,CAACQ;AAAA,MACT,WAAW;AAAA,UACPI,EAAgB,MAAM,IAAI,CAAC;AAAA;AAAA,UAE3BT,CAAS;AAAA;AAAA,OAETC,IAVL;AAAA,MAYE,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/Tabs/TabsContext.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext as o, useContext as e } from "react";
+const n = o(void 0);
+function r() {
+  const t = e(n);
+  if (t === void 0)
+    throw new Error("useTabsContext must be used within a Tabs component");
+  return t;
+}
+function u() {
+  return e(n);
+}
+export {
+  n as TabsContext,
+  r as useTabsContext,
+  u as useTabsContextOptional
+};
+//# sourceMappingURL=TabsContext.js.map

package/dist/granular/ui/components/Tabs/TabsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContext.js","sources":["../../../../../src/ui/components/Tabs/TabsContext.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-refresh/only-export-components */\nimport { createContext, useContext } from \"react\";\n\nexport interface TabsContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n  activationMode?: \"automatic\" | \"manual\";\n}\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\n/**\n * Hook to access Tabs context\n *\n * @throws Error if used outside of Tabs component\n */\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n\n  if (context === undefined) {\n    throw new Error(\"useTabsContext must be used within a Tabs component\");\n  }\n\n  return context;\n}\n\n/**\n * Hook to access Tabs context (optional, returns undefined if not in Tabs)\n */\nexport function useTabsContextOptional(): TabsContextValue | undefined {\n  return useContext(TabsContext);\n}\n\nexport { TabsContext };\n"],"names":["TabsContext","createContext","useTabsContext","context","useContext","useTabsContextOptional"],"mappings":";;AAYA,MAAMA,IAAcC,EAA4C,MAAS;AAOlE,SAASC,IAAmC;AACjD,QAAMC,IAAUC,EAAWJ,CAAW;AAEtC,MAAIG,MAAY;AACd,UAAM,IAAI,MAAM,qDAAqD;AAGvE,SAAOA;AACT;AAKO,SAASE,IAAuD;AACrE,SAAOD,EAAWJ,CAAW;AAC/B;"}

package/dist/granular/ui/components/Tabs/TabsList.js

@@ -0,0 +1,84 @@
+"use client";
+var I = Object.defineProperty, z = Object.defineProperties;
+var S = Object.getOwnPropertyDescriptors;
+var c = Object.getOwnPropertySymbols;
+var h = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
+var y = (e, t, n) => t in e ? I(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, k = (e, t) => {
+  for (var n in t || (t = {}))
+    h.call(t, n) && y(e, n, t[n]);
+  if (c)
+    for (var n of c(t))
+      w.call(t, n) && y(e, n, t[n]);
+  return e;
+}, D = (e, t) => z(e, S(t));
+var b = (e, t) => {
+  var n = {};
+  for (var r in e)
+    h.call(e, r) && t.indexOf(r) < 0 && (n[r] = e[r]);
+  if (e != null && c)
+    for (var r of c(e))
+      t.indexOf(r) < 0 && w.call(e, r) && (n[r] = e[r]);
+  return n;
+};
+import { jsx as T } from "react/jsx-runtime";
+import { useTabsContext as j } from "./TabsContext.js";
+import { useRef as q, useEffect as H } from "react";
+import { cn as u } from "../../utils/cn.js";
+import { getSpacingClass as m } from "../../tokens/spacing.js";
+import { getRadiusClass as K } from "../../tokens/radius.js";
+function Q(N) {
+  var d = N, {
+    children: e,
+    className: t = "",
+    variant: n = "default",
+    orientation: r
+  } = d, A = b(d, [
+    "children",
+    "className",
+    "variant",
+    "orientation"
+  ]);
+  var p;
+  const { orientation: C } = j(), f = (p = r != null ? r : C) != null ? p : "horizontal", g = q(null);
+  H(() => {
+    const a = g.current;
+    if (!a) return;
+    const x = (l) => {
+      var v;
+      const o = Array.from(
+        a.querySelectorAll(
+          '[role="tab"]:not([disabled])'
+        )
+      ), i = o.findIndex(
+        (R) => R === document.activeElement
+      );
+      if (i === -1) return;
+      let s = i;
+      f === "horizontal" ? l.key === "ArrowRight" ? (l.preventDefault(), s = (i + 1) % o.length) : l.key === "ArrowLeft" && (l.preventDefault(), s = (i - 1 + o.length) % o.length) : l.key === "ArrowDown" ? (l.preventDefault(), s = (i + 1) % o.length) : l.key === "ArrowUp" && (l.preventDefault(), s = (i - 1 + o.length) % o.length), l.key === "Home" ? (l.preventDefault(), s = 0) : l.key === "End" && (l.preventDefault(), s = o.length - 1), s !== i && ((v = o[s]) == null || v.focus());
+    };
+    return a.addEventListener("keydown", x), () => a.removeEventListener("keydown", x);
+  }, [f]);
+  const E = n === "compact" && f === "vertical" ? "flex" : "inline-flex", L = f === "vertical" ? u("flex-col", m("xs", "gap")) : u("flex-row", m("xs", "gap"));
+  return /* @__PURE__ */ T(
+    "div",
+    D(k({
+      ref: g,
+      role: "tablist",
+      "aria-orientation": f,
+      className: u(
+        E,
+        L,
+        m("xs", "p"),
+        "bg-surface-muted",
+        K("md"),
+        t
+      )
+    }, A), {
+      children: e
+    })
+  );
+}
+export {
+  Q as TabsList
+};
+//# sourceMappingURL=TabsList.js.map

package/dist/granular/ui/components/Tabs/TabsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.js","sources":["../../../../../src/ui/components/Tabs/TabsList.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTabsContext } from \"./TabsContext\";\nimport { useRef, useEffect, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils\";\nimport { getRadiusClass, getSpacingClass } from \"../../tokens\";\n\nexport interface TabsListProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"orientation\"\n> {\n  children: ReactNode;\n  variant?: \"default\" | \"compact\";\n  /**\n   * Override orientation set on the `Tabs` provider. When omitted,\n   * inherits from context (default \"horizontal\"). Controls keyboard\n   * navigation axis (ArrowLeft/Right vs ArrowUp/Down), flex direction,\n   * and `aria-orientation`.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\n/**\n * TabsList Component\n *\n * Container for tab triggers.\n * Manages keyboard navigation between tabs.\n * Must be used within a Tabs component.\n *\n * Orientation precedence: local `orientation` prop > Tabs context > \"horizontal\".\n */\nexport function TabsList({\n  children,\n  className = \"\",\n  variant = \"default\",\n  orientation: orientationProp,\n  ...props\n}: TabsListProps) {\n  const { orientation: contextOrientation } = useTabsContext();\n  const orientation = orientationProp ?? contextOrientation ?? \"horizontal\";\n  const listRef = useRef<HTMLDivElement>(null);\n\n  // Handle keyboard navigation at list level\n  useEffect(() => {\n    const list = listRef.current;\n    if (!list) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const triggers = Array.from(\n        list.querySelectorAll<HTMLButtonElement>(\n          '[role=\"tab\"]:not([disabled])',\n        ),\n      );\n      const currentIndex = triggers.findIndex(\n        (trigger) => trigger === document.activeElement,\n      );\n\n      if (currentIndex === -1) return;\n\n      let nextIndex = currentIndex;\n\n      if (orientation === \"horizontal\") {\n        if (e.key === \"ArrowRight\") {\n          e.preventDefault();\n          nextIndex = (currentIndex + 1) % triggers.length;\n        } else if (e.key === \"ArrowLeft\") {\n          e.preventDefault();\n          nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;\n        }\n      } else {\n        if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          nextIndex = (currentIndex + 1) % triggers.length;\n        } else if (e.key === \"ArrowUp\") {\n          e.preventDefault();\n          nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;\n        }\n      }\n\n      if (e.key === \"Home\") {\n        e.preventDefault();\n        nextIndex = 0;\n      } else if (e.key === \"End\") {\n        e.preventDefault();\n        nextIndex = triggers.length - 1;\n      }\n\n      if (nextIndex !== currentIndex) {\n        triggers[nextIndex]?.focus();\n      }\n    };\n\n    list.addEventListener(\"keydown\", handleKeyDown);\n    return () => list.removeEventListener(\"keydown\", handleKeyDown);\n  }, [orientation]);\n\n  // Determine display class based on variant and orientation\n  // For compact vertical, use 'flex' instead of 'inline-flex' to allow full width\n  const displayClass =\n    variant === \"compact\" && orientation === \"vertical\"\n      ? \"flex\"\n      : \"inline-flex\";\n\n  const orientationClasses =\n    orientation === \"vertical\"\n      ? cn(\"flex-col\", getSpacingClass(\"xs\", \"gap\"))\n      : cn(\"flex-row\", getSpacingClass(\"xs\", \"gap\"));\n\n  return (\n    <div\n      ref={listRef}\n      role=\"tablist\"\n      aria-orientation={orientation}\n      className={cn(\n        displayClass,\n        orientationClasses,\n        getSpacingClass(\"xs\", \"p\"),\n        \"bg-surface-muted\",\n        getRadiusClass(\"md\"),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["TabsList","_a","_b","children","className","variant","orientationProp","props","__objRest","contextOrientation","useTabsContext","orientation","listRef","useRef","useEffect","list","handleKeyDown","e","triggers","currentIndex","trigger","nextIndex","displayClass","orientationClasses","cn","getSpacingClass","jsx","__spreadProps","__spreadValues","getRadiusClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BO,SAASA,EAASC,GAMP;AANO,MAAAC,IAAAD,GACvB;AAAA,cAAAE;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,aAAaC;AAAA,MAJUJ,GAKpBK,IAAAC,EALoBN,GAKpB;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;;AAGA,QAAM,EAAE,aAAaO,EAAA,IAAuBC,EAAA,GACtCC,KAAcV,IAAAK,KAAA,OAAAA,IAAmBG,MAAnB,OAAAR,IAAyC,cACvDW,IAAUC,EAAuB,IAAI;AAG3C,EAAAC,EAAU,MAAM;AACd,UAAMC,IAAOH,EAAQ;AACrB,QAAI,CAACG,EAAM;AAEX,UAAMC,IAAgB,CAACC,MAAqB;;AAC1C,YAAMC,IAAW,MAAM;AAAA,QACrBH,EAAK;AAAA,UACH;AAAA,QAAA;AAAA,MACF,GAEII,IAAeD,EAAS;AAAA,QAC5B,CAACE,MAAYA,MAAY,SAAS;AAAA,MAAA;AAGpC,UAAID,MAAiB,GAAI;AAEzB,UAAIE,IAAYF;AAEhB,MAAIR,MAAgB,eACdM,EAAE,QAAQ,gBACZA,EAAE,eAAA,GACFI,KAAaF,IAAe,KAAKD,EAAS,UACjCD,EAAE,QAAQ,gBACnBA,EAAE,eAAA,GACFI,KAAaF,IAAe,IAAID,EAAS,UAAUA,EAAS,UAG1DD,EAAE,QAAQ,eACZA,EAAE,eAAA,GACFI,KAAaF,IAAe,KAAKD,EAAS,UACjCD,EAAE,QAAQ,cACnBA,EAAE,eAAA,GACFI,KAAaF,IAAe,IAAID,EAAS,UAAUA,EAAS,SAI5DD,EAAE,QAAQ,UACZA,EAAE,eAAA,GACFI,IAAY,KACHJ,EAAE,QAAQ,UACnBA,EAAE,eAAA,GACFI,IAAYH,EAAS,SAAS,IAG5BG,MAAcF,OAChBlB,IAAAiB,EAASG,CAAS,MAAlB,QAAApB,EAAqB;AAAA,IAEzB;AAEA,WAAAc,EAAK,iBAAiB,WAAWC,CAAa,GACvC,MAAMD,EAAK,oBAAoB,WAAWC,CAAa;AAAA,EAChE,GAAG,CAACL,CAAW,CAAC;AAIhB,QAAMW,IACJjB,MAAY,aAAaM,MAAgB,aACrC,SACA,eAEAY,IACJZ,MAAgB,aACZa,EAAG,YAAYC,EAAgB,MAAM,KAAK,CAAC,IAC3CD,EAAG,YAAYC,EAAgB,MAAM,KAAK,CAAC;AAEjD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,KAAKhB;AAAA,MACL,MAAK;AAAA,MACL,oBAAkBD;AAAA,MAClB,WAAWa;AAAA,QACTF;AAAA,QACAC;AAAA,QACAE,EAAgB,MAAM,GAAG;AAAA,QACzB;AAAA,QACAI,EAAe,IAAI;AAAA,QACnBzB;AAAA,MAAA;AAAA,OAEEG,IAZL;AAAA,MAcE,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/Tabs/TabsProvider.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as v } from "react/jsx-runtime";
+import { useState as f, useCallback as p } from "react";
+import { TabsContext as x } from "./TabsContext.js";
+function j({
+  defaultValue: e,
+  value: r,
+  onValueChange: t,
+  orientation: i = "horizontal",
+  activationMode: c = "automatic",
+  children: l
+}) {
+  const [n, u] = f(
+    e || ""
+  ), o = r !== void 0, a = o ? r : n, m = p(
+    (s) => {
+      o || u(s), t == null || t(s);
+    },
+    [o, t]
+  ), d = {
+    value: a,
+    onValueChange: m,
+    orientation: i,
+    activationMode: c
+  };
+  return /* @__PURE__ */ v(x.Provider, { value: d, children: l });
+}
+export {
+  j as TabsProvider
+};
+//# sourceMappingURL=TabsProvider.js.map

package/dist/granular/ui/components/Tabs/TabsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsProvider.js","sources":["../../../../../src/ui/components/Tabs/TabsProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useCallback, type ReactNode } from \"react\";\nimport { TabsContext, type TabsContextValue } from \"./TabsContext\";\n\nexport interface TabsProviderProps {\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n  activationMode?: \"automatic\" | \"manual\";\n  children: ReactNode;\n}\n\n/**\n * TabsProvider Component\n *\n * Provides Tabs context to children.\n * Manages active tab state and handles controlled/uncontrolled modes.\n */\nexport function TabsProvider({\n  defaultValue,\n  value: controlledValue,\n  onValueChange,\n  orientation = \"horizontal\",\n  activationMode = \"automatic\",\n  children,\n}: TabsProviderProps) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<string>(\n    defaultValue || \"\",\n  );\n\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const handleValueChange = useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange],\n  );\n\n  const contextValue: TabsContextValue = {\n    value,\n    onValueChange: handleValueChange,\n    orientation,\n    activationMode,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>{children}</TabsContext.Provider>\n  );\n}\n"],"names":["TabsProvider","defaultValue","controlledValue","onValueChange","orientation","activationMode","children","uncontrolledValue","setUncontrolledValue","useState","isControlled","value","handleValueChange","useCallback","newValue","contextValue","TabsContext"],"mappings":";;;;AAoBO,SAASA,EAAa;AAAA,EAC3B,cAAAC;AAAA,EACA,OAAOC;AAAA,EACP,eAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AACF,GAAsB;AACpB,QAAM,CAACC,GAAmBC,CAAoB,IAAIC;AAAA,IAChDR,KAAgB;AAAA,EAAA,GAGZS,IAAeR,MAAoB,QACnCS,IAAQD,IAAeR,IAAkBK,GAEzCK,IAAoBC;AAAA,IACxB,CAACC,MAAqB;AACpB,MAAKJ,KACHF,EAAqBM,CAAQ,GAE/BX,KAAA,QAAAA,EAAgBW;AAAA,IAClB;AAAA,IACA,CAACJ,GAAcP,CAAa;AAAA,EAAA,GAGxBY,IAAiC;AAAA,IACrC,OAAAJ;AAAA,IACA,eAAeC;AAAA,IACf,aAAAR;AAAA,IACA,gBAAAC;AAAA,EAAA;AAGF,2BACGW,EAAY,UAAZ,EAAqB,OAAOD,GAAe,UAAAT,GAAS;AAEzD;"}

package/dist/granular/ui/components/Tabs/TabsTrigger.js

@@ -0,0 +1,103 @@
+"use client";
+var S = Object.defineProperty, j = Object.defineProperties;
+var C = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var h = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
+var p = (t, o, r) => o in t ? S(t, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[o] = r, b = (t, o) => {
+  for (var r in o || (o = {}))
+    h.call(o, r) && p(t, r, o[r]);
+  if (s)
+    for (var r of s(o))
+      x.call(o, r) && p(t, r, o[r]);
+  return t;
+}, k = (t, o) => j(t, C(o));
+var A = (t, o) => {
+  var r = {};
+  for (var n in t)
+    h.call(t, n) && o.indexOf(n) < 0 && (r[n] = t[n]);
+  if (t != null && s)
+    for (var n of s(t))
+      o.indexOf(n) < 0 && x.call(t, n) && (r[n] = t[n]);
+  return r;
+};
+import { jsx as E } from "react/jsx-runtime";
+import { useTabsContext as R } from "./TabsContext.js";
+import { cn as g } from "../../utils/cn.js";
+import { getRadiusClass as V } from "../../tokens/radius.js";
+import { getTypographyWeight as $, getTypographySize as z } from "../../tokens/typography.js";
+import { getSpacingClass as T } from "../../tokens/spacing.js";
+function B(H) {
+  var l = H, {
+    value: t,
+    children: o,
+    disabled: r = !1,
+    className: n = "",
+    onClick: c,
+    onKeyDown: f
+  } = l, a = A(l, [
+    "value",
+    "children",
+    "disabled",
+    "className",
+    "onClick",
+    "onKeyDown"
+  ]);
+  const {
+    value: w,
+    onValueChange: u,
+    orientation: I,
+    activationMode: m
+  } = R(), i = w === t, d = (e) => {
+    r || ((m === "automatic" || i) && u(t), c == null || c(e));
+  }, v = (e) => {
+    var y;
+    m === "automatic" && !r && !i && u(t), (y = a.onFocus) == null || y.call(a, e);
+  }, F = (e) => {
+    if (!r && !(e.key === "ArrowRight" || e.key === "ArrowLeft" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End")) {
+      if (m === "manual" && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault(), u(t);
+        return;
+      }
+      f == null || f(e);
+    }
+  };
+  return /* @__PURE__ */ E(
+    "button",
+    k(b({
+      type: "button",
+      role: "tab",
+      "aria-selected": i,
+      "aria-controls": `tabpanel-${t}`,
+      id: `tab-${t}`,
+      tabIndex: r ? -1 : i ? 0 : -1,
+      disabled: r,
+      onClick: d,
+      onFocus: v,
+      onKeyDown: F,
+      className: g(
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        T("sm", "px"),
+        T("xs", "py"),
+        z("bodySmall"),
+        $("label"),
+        "transition-colors",
+        "focus:outline-none",
+        "focus:ring-2",
+        "focus:ring-line-focus",
+        "focus:ring-offset-2",
+        V("sm"),
+        i ? g("bg-surface-brand-strong", "text-fg-inverse") : g("text-fg-secondary", "hover:bg-surface-active"),
+        r ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        n
+      )
+    }, a), {
+      children: o
+    })
+  );
+}
+export {
+  B as TabsTrigger
+};
+//# sourceMappingURL=TabsTrigger.js.map