@brycks/core-front 0.3.5 → 0.5.0

package/dist/components/data/Table/Table.js

@@ -1,251 +1,281 @@
-import { jsx as r, jsxs as w } from "react/jsx-runtime";
-import { forwardRef as b, createContext as P, useContext as z } from "react";
-import { cx as p } from "../../../utils/styles.js";
-import { durations as v, easings as T } from "../../../design-system/tokens/motion.js";
-import { componentPaddingX as c, componentPaddingY as S, componentGap as L } from "../../../design-system/primitives/sizing.js";
-import { spacing as h } from "../../../design-system/tokens/spacing.js";
-import { fontSizes as m } from "../../../design-system/tokens/typography.js";
-const N = P({ size: "md", variant: "default" });
-function x() {
-  return z(N);
+import { jsx as o, jsxs as $, Fragment as X } from "react/jsx-runtime";
+import { forwardRef as m, createContext as Y, useContext as M } from "react";
+import { cx as b } from "../../../utils/styles.js";
+import { EmptyState as B } from "../../utility/EmptyState/EmptyState.js";
+import { Skeleton as A } from "../../utility/Skeleton/Skeleton.js";
+import { durations as T, easings as S } from "../../../design-system/tokens/motion.js";
+import { componentPaddingX as p, componentPaddingY as C, componentGap as E } from "../../../design-system/primitives/sizing.js";
+import { spacing as v } from "../../../design-system/tokens/spacing.js";
+import { fontSizes as f } from "../../../design-system/tokens/typography.js";
+const H = Y({ size: "md", variant: "default", stickyHeader: !1 });
+function g() {
+  return M(H);
 }
-const C = {
-  sm: { fontSize: m.base - 1, paddingY: S.md, paddingX: c.sm, headerPaddingY: S.md, headerPaddingX: c.sm },
-  md: { fontSize: m.base, paddingY: c.sm, paddingX: c.md, headerPaddingY: c.sm, headerPaddingX: c.md },
-  lg: { fontSize: m.base + 1, paddingY: c.md, paddingX: c.lg, headerPaddingY: h[3.5], headerPaddingX: c.lg }
-}, X = b(function({
-  size: e = "md",
-  variant: t = "default",
-  stickyHeader: n = !1,
-  loading: o = !1,
-  className: a,
-  style: l,
+const x = {
+  sm: { fontSize: f.base - 1, paddingY: C.md, paddingX: p.sm, headerPaddingY: C.md, headerPaddingX: p.sm },
+  md: { fontSize: f.base, paddingY: p.sm, paddingX: p.md, headerPaddingY: p.sm, headerPaddingX: p.md },
+  lg: { fontSize: f.base + 1, paddingY: p.md, paddingX: p.lg, headerPaddingY: v[3.5], headerPaddingX: p.lg }
+}, W = m(function({
+  size: t = "md",
+  variant: e = "default",
+  stickyHeader: l = !1,
+  loading: a = !1,
+  className: r,
+  style: n,
   children: d,
-  testId: y,
-  ...f
-}, i) {
+  testId: s,
+  ...y
+}, c) {
   const u = {
     position: "relative",
     width: "100%",
     overflow: "auto",
-    ...l
-  }, g = {
+    ...n
+  }, h = {
     width: "100%",
-    borderCollapse: t === "bordered" ? "separate" : "collapse",
+    borderCollapse: e === "bordered" ? "separate" : "collapse",
     borderSpacing: 0,
-    fontSize: C[e].fontSize,
-    opacity: o ? 0.6 : 1,
-    transition: `opacity ${v.quick}ms ${T.easeOut}`
+    fontSize: x[t].fontSize,
+    fontVariantNumeric: "tabular-nums",
+    opacity: a ? 0.6 : 1,
+    transition: `opacity ${T.quick}ms ${S.easeOut}`
   };
-  return /* @__PURE__ */ r(N.Provider, { value: { size: e, variant: t }, children: /* @__PURE__ */ r("div", { className: "brycks-table-container", style: u, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(H.Provider, { value: { size: t, variant: e, stickyHeader: l }, children: /* @__PURE__ */ o("div", { className: "brycks-table-container", style: u, children: /* @__PURE__ */ o(
     "table",
     {
-      ref: i,
-      className: p("brycks-table", `brycks-table--${e}`, `brycks-table--${t}`, a),
-      style: g,
-      "data-testid": y,
-      ...f,
+      ref: c,
+      className: b("brycks-table", `brycks-table--${t}`, `brycks-table--${e}`, r),
+      style: h,
+      "aria-busy": a || void 0,
+      "data-testid": s,
+      ...y,
       children: d
     }
   ) }) });
 });
-X.displayName = "Table";
-const Y = b(function({ sticky: e = !1, className: t, style: n, children: o, ...a }, l) {
-  const d = {
+W.displayName = "Table";
+const F = m(function({ sticky: t = !1, className: e, style: l, children: a, ...r }, n) {
+  const { stickyHeader: d } = g(), s = t || d, y = {
     backgroundColor: "var(--brycks-background-muted)",
-    position: e ? "sticky" : void 0,
-    top: e ? 0 : void 0,
-    zIndex: e ? 1 : void 0,
-    ...n
+    position: s ? "sticky" : void 0,
+    top: s ? 0 : void 0,
+    zIndex: s ? 1 : void 0,
+    ...l
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "thead",
     {
-      ref: l,
-      className: p("brycks-table-head", e && "brycks-table-head--sticky", t),
-      style: d,
-      ...a,
-      children: o
+      ref: n,
+      className: b("brycks-table-head", s && "brycks-table-head--sticky", e),
+      style: y,
+      ...r,
+      children: a
     }
   );
 });
-Y.displayName = "TableHead";
-const M = b(function({ className: e, style: t, children: n, ...o }, a) {
-  const l = {
-    ...t
+F.displayName = "TableHead";
+const O = m(function({ className: t, style: e, children: l, ...a }, r) {
+  const n = {
+    ...e
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "tbody",
     {
-      ref: a,
-      className: p("brycks-table-body", e),
-      style: l,
-      ...o,
-      children: n
+      ref: r,
+      className: b("brycks-table-body", t),
+      style: n,
+      ...a,
+      children: l
     }
   );
 });
-M.displayName = "TableBody";
-const B = b(function({ selected: e = !1, clickable: t = !1, className: n, style: o, children: a, ...l }, d) {
-  const { variant: y } = x(), f = {
-    backgroundColor: e ? "var(--brycks-primary-50)" : "transparent",
-    borderBottom: y !== "bordered" ? "1px solid var(--brycks-border-muted)" : void 0,
-    cursor: t ? "pointer" : void 0,
-    transition: `background-color ${v.quick}ms ${T.easeOut}`,
-    ...o
+O.displayName = "TableBody";
+const P = m(function({ selected: t = !1, clickable: e = !1, className: l, style: a, children: r, ...n }, d) {
+  const { variant: s } = g(), y = {
+    backgroundColor: t ? "var(--brycks-primary-muted)" : "transparent",
+    borderBottom: s !== "bordered" ? "1px solid var(--brycks-border-muted)" : void 0,
+    cursor: e ? "pointer" : void 0,
+    transition: `background-color ${T.quick}ms ${S.easeOut}`,
+    ...a
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "tr",
     {
       ref: d,
-      className: p(
+      className: b(
         "brycks-table-row",
-        e && "brycks-table-row--selected",
-        t && "brycks-table-row--clickable",
-        n
+        t && "brycks-table-row--selected",
+        e && "brycks-table-row--clickable",
+        l
       ),
-      style: f,
-      onMouseEnter: (i) => {
-        t && !e && (i.currentTarget.style.backgroundColor = "var(--brycks-background-muted)");
+      style: y,
+      onMouseEnter: (c) => {
+        e && !t && (c.currentTarget.style.backgroundColor = "var(--brycks-background-muted)");
       },
-      onMouseLeave: (i) => {
-        e || (i.currentTarget.style.backgroundColor = "transparent");
+      onMouseLeave: (c) => {
+        t || (c.currentTarget.style.backgroundColor = "transparent");
       },
-      ...l,
-      children: a
+      ...n,
+      children: r
     }
   );
 });
-B.displayName = "TableRow";
-function A({ direction: s }) {
-  return s ? /* @__PURE__ */ r("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: s === "asc" ? /* @__PURE__ */ r("path", { d: "M7 3L10 6H4L7 3Z", fill: "currentColor" }) : /* @__PURE__ */ r("path", { d: "M7 11L4 8H10L7 11Z", fill: "currentColor" }) }) : /* @__PURE__ */ w("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", style: { opacity: 0.4 }, children: [
-    /* @__PURE__ */ r("path", { d: "M7 3L10 6H4L7 3Z", fill: "currentColor" }),
-    /* @__PURE__ */ r("path", { d: "M7 11L4 8H10L7 11Z", fill: "currentColor" })
+P.displayName = "TableRow";
+function R({ direction: i }) {
+  return i ? /* @__PURE__ */ o("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: i === "asc" ? /* @__PURE__ */ o("path", { d: "M7 3L10 6H4L7 3Z", fill: "currentColor" }) : /* @__PURE__ */ o("path", { d: "M7 11L4 8H10L7 11Z", fill: "currentColor" }) }) : /* @__PURE__ */ $("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", style: { opacity: 0.4 }, "aria-hidden": "true", children: [
+    /* @__PURE__ */ o("path", { d: "M7 3L10 6H4L7 3Z", fill: "currentColor" }),
+    /* @__PURE__ */ o("path", { d: "M7 11L4 8H10L7 11Z", fill: "currentColor" })
   ] });
 }
-const O = b(function({
-  sortable: e = !1,
-  sortDirection: t = null,
-  onSort: n,
-  align: o = "left",
-  className: a,
-  style: l,
+const Z = m(function({
+  sortable: t = !1,
+  sortDirection: e = null,
+  onSort: l,
+  align: a = "left",
+  className: r,
+  style: n,
   children: d,
-  ...y
-}, f) {
-  const { size: i } = x(), u = C[i], g = {
+  ...s
+}, y) {
+  const { size: c } = g(), u = x[c], h = {
     padding: `${u.headerPaddingY}px ${u.headerPaddingX}px`,
     fontWeight: 600,
     color: "var(--brycks-foreground-muted)",
-    textAlign: o,
+    textAlign: a,
     whiteSpace: "nowrap",
-    cursor: e ? "pointer" : void 0,
-    userSelect: e ? "none" : void 0,
-    transition: `color ${v.quick}ms ${T.easeOut}`,
-    ...l
-  }, $ = {
+    transition: `color ${T.quick}ms ${S.easeOut}`,
+    ...n
+  }, w = {
     display: "flex",
     alignItems: "center",
-    gap: L.sm,
-    justifyContent: o === "right" ? "flex-end" : o === "center" ? "center" : "flex-start"
-  }, H = () => {
-    e && n && n();
+    gap: E.sm,
+    justifyContent: a === "right" ? "flex-end" : a === "center" ? "center" : "flex-start"
+  }, L = {
+    ...w,
+    width: "100%",
+    padding: 0,
+    background: "transparent",
+    border: "none",
+    font: "inherit",
+    fontWeight: "inherit",
+    color: "inherit",
+    cursor: "pointer",
+    userSelect: "none"
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "th",
     {
-      ref: f,
-      className: p("brycks-table-header", e && "brycks-table-header--sortable", a),
-      style: g,
-      onClick: H,
-      onMouseEnter: (k) => {
-        e && (k.currentTarget.style.color = "var(--brycks-foreground-default)");
-      },
-      onMouseLeave: (k) => {
-        k.currentTarget.style.color = "var(--brycks-foreground-muted)";
-      },
-      ...y,
-      children: /* @__PURE__ */ w("span", { style: $, children: [
-        d,
-        e && /* @__PURE__ */ r(A, { direction: t })
-      ] })
+      ref: y,
+      "aria-sort": t ? e === "asc" ? "ascending" : e === "desc" ? "descending" : "none" : void 0,
+      className: b("brycks-table-header", t && "brycks-table-header--sortable", r),
+      style: h,
+      ...s,
+      children: t ? /* @__PURE__ */ $(
+        "button",
+        {
+          type: "button",
+          style: L,
+          onClick: () => l?.(),
+          onMouseEnter: (k) => {
+            k.currentTarget.style.color = "var(--brycks-foreground-default)";
+          },
+          onMouseLeave: (k) => {
+            k.currentTarget.style.color = "inherit";
+          },
+          children: [
+            d,
+            /* @__PURE__ */ o(R, { direction: e })
+          ]
+        }
+      ) : /* @__PURE__ */ o("span", { style: w, children: d })
     }
   );
 });
-O.displayName = "TableHeader";
-const R = b(function({ align: e = "left", truncate: t = !1, className: n, style: o, children: a, ...l }, d) {
-  const { size: y, variant: f } = x(), i = C[y], u = {
-    padding: `${i.paddingY}px ${i.paddingX}px`,
+Z.displayName = "TableHeader";
+const z = m(function({ align: t = "left", truncate: e = !1, className: l, style: a, children: r, ...n }, d) {
+  const { size: s, variant: y } = g(), c = x[s], u = {
+    padding: `${c.paddingY}px ${c.paddingX}px`,
     color: "var(--brycks-foreground-default)",
-    textAlign: e,
+    textAlign: t,
     verticalAlign: "middle",
-    border: f === "bordered" ? "1px solid var(--brycks-border-muted)" : void 0,
-    maxWidth: t ? 200 : void 0,
-    overflow: t ? "hidden" : void 0,
-    textOverflow: t ? "ellipsis" : void 0,
-    whiteSpace: t ? "nowrap" : void 0,
-    ...o
+    border: y === "bordered" ? "1px solid var(--brycks-border-muted)" : void 0,
+    maxWidth: e ? 200 : void 0,
+    overflow: e ? "hidden" : void 0,
+    textOverflow: e ? "ellipsis" : void 0,
+    whiteSpace: e ? "nowrap" : void 0,
+    ...a
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "td",
     {
       ref: d,
-      className: p("brycks-table-cell", t && "brycks-table-cell--truncate", n),
+      className: b("brycks-table-cell", e && "brycks-table-cell--truncate", l),
       style: u,
-      title: t && typeof a == "string" ? a : void 0,
-      ...l,
-      children: a
+      title: e && typeof r == "string" ? r : void 0,
+      ...n,
+      children: r
     }
   );
 });
-R.displayName = "TableCell";
-const Z = b(function({ className: e, style: t, children: n, ...o }, a) {
-  const l = {
+z.displayName = "TableCell";
+const j = m(function({ className: t, style: e, children: l, ...a }, r) {
+  const n = {
     backgroundColor: "var(--brycks-background-muted)",
     fontWeight: 500,
-    ...t
+    ...e
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "tfoot",
     {
-      ref: a,
-      className: p("brycks-table-foot", e),
-      style: l,
-      ...o,
-      children: n
+      ref: r,
+      className: b("brycks-table-foot", t),
+      style: n,
+      ...a,
+      children: l
     }
   );
 });
-Z.displayName = "TableFoot";
-const j = b(function({ placement: e = "bottom", className: t, style: n, children: o, ...a }, l) {
+j.displayName = "TableFoot";
+const q = m(function({ placement: t = "bottom", className: e, style: l, children: a, ...r }, n) {
   const d = {
-    captionSide: e,
-    padding: `${h[3]}px ${h[4]}px`,
-    fontSize: m.base - 1,
+    captionSide: t,
+    padding: `${v[3]}px ${v[4]}px`,
+    fontSize: f.base - 1,
     color: "var(--brycks-foreground-muted)",
     textAlign: "left",
-    ...n
+    ...l
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ o(
     "caption",
     {
-      ref: l,
-      className: p("brycks-table-caption", t),
+      ref: n,
+      className: b("brycks-table-caption", e),
       style: d,
-      ...a,
-      children: o
+      ...r,
+      children: a
     }
   );
 });
-j.displayName = "TableCaption";
+q.displayName = "TableCaption";
+const I = m(function({ colSpan: t, icon: e, title: l, description: a, action: r, className: n }, d) {
+  return /* @__PURE__ */ o("tr", { ref: d, className: b("brycks-table-empty", n), children: /* @__PURE__ */ o("td", { colSpan: t, style: { padding: 0 }, children: /* @__PURE__ */ o(B, { icon: e, title: l, description: a, action: r }) }) });
+});
+I.displayName = "TableEmpty";
+const N = ["70%", "45%", "85%", "55%", "60%", "40%"];
+function _({ rows: i = 5, columns: t, className: e }) {
+  return /* @__PURE__ */ o(X, { children: Array.from({ length: i }).map((l, a) => /* @__PURE__ */ o(P, { className: b("brycks-table-skeleton-row", e), "aria-hidden": "true", children: Array.from({ length: t }).map((r, n) => /* @__PURE__ */ o(z, { children: /* @__PURE__ */ o(A, { variant: "text", width: N[n % N.length] }) }, n)) }, a)) });
+}
+_.displayName = "TableSkeleton";
 export {
-  X as Table,
-  M as TableBody,
-  j as TableCaption,
-  R as TableCell,
-  Z as TableFoot,
-  Y as TableHead,
-  O as TableHeader,
-  B as TableRow
+  W as Table,
+  O as TableBody,
+  q as TableCaption,
+  z as TableCell,
+  I as TableEmpty,
+  j as TableFoot,
+  F as TableHead,
+  Z as TableHeader,
+  P as TableRow,
+  _ as TableSkeleton
 };
 //# sourceMappingURL=Table.js.map

package/dist/components/data/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../src/components/data/Table/Table.tsx"],"sourcesContent":["/**\n * Table Component\n *\n * A flexible table component with sorting, selection, and responsive support.\n * Follows design system patterns for consistent styling.\n */\n\nimport {\n  forwardRef,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ThHTMLAttributes,\n  type TdHTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentGap, componentPaddingX, componentPaddingY } from '../../../design-system/primitives'\n\nexport type TableSize = 'sm' | 'md' | 'lg'\nexport type TableVariant = 'default' | 'striped' | 'bordered'\n\ninterface TableContextValue {\n  size: TableSize\n  variant: TableVariant\n}\n\nconst TableContext = createContext<TableContextValue>({ size: 'md', variant: 'default' })\n\nfunction useTableContext() {\n  return useContext(TableContext)\n}\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n  /** Table size */\n  size?: TableSize\n  /** Table variant */\n  variant?: TableVariant\n  /** Whether the table has a sticky header */\n  stickyHeader?: boolean\n  /** Whether the table is in a loading state */\n  loading?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<TableSize, { fontSize: number; paddingY: number; paddingX: number; headerPaddingY: number; headerPaddingX: number }> = {\n  sm: { fontSize: fontSizes.base - 1, paddingY: componentPaddingY.md, paddingX: componentPaddingX.sm, headerPaddingY: componentPaddingY.md, headerPaddingX: componentPaddingX.sm },\n  md: { fontSize: fontSizes.base, paddingY: componentPaddingX.sm, paddingX: componentPaddingX.md, headerPaddingY: componentPaddingX.sm, headerPaddingX: componentPaddingX.md },\n  lg: { fontSize: fontSizes.base + 1, paddingY: componentPaddingX.md, paddingX: componentPaddingX.lg, headerPaddingY: spacing[3.5], headerPaddingX: componentPaddingX.lg },\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(function Table(\n  {\n    size = 'md',\n    variant = 'default',\n    stickyHeader: _stickyHeader = false,\n    loading = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    width: '100%',\n    overflow: 'auto',\n    ...style,\n  }\n\n  const tableStyle: CSSProperties = {\n    width: '100%',\n    borderCollapse: variant === 'bordered' ? 'separate' : 'collapse',\n    borderSpacing: 0,\n    fontSize: sizeConfig[size].fontSize,\n    opacity: loading ? 0.6 : 1,\n    transition: `opacity ${durations.quick}ms ${easings.easeOut}`,\n  }\n\n  return (\n    <TableContext.Provider value={{ size, variant }}>\n      <div className=\"brycks-table-container\" style={containerStyle}>\n        <table\n          ref={ref}\n          className={cx('brycks-table', `brycks-table--${size}`, `brycks-table--${variant}`, className)}\n          style={tableStyle}\n          data-testid={testId}\n          {...props}\n        >\n          {children}\n        </table>\n      </div>\n    </TableContext.Provider>\n  )\n})\n\nTable.displayName = 'Table'\n\n// TableHead\nexport interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {\n  /** Whether the header is sticky */\n  sticky?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(function TableHead(\n  { sticky = false, className, style, children, ...props },\n  ref\n) {\n  const headStyle: CSSProperties = {\n    backgroundColor: 'var(--brycks-background-muted)',\n    position: sticky ? 'sticky' : undefined,\n    top: sticky ? 0 : undefined,\n    zIndex: sticky ? 1 : undefined,\n    ...style,\n  }\n\n  return (\n    <thead\n      ref={ref}\n      className={cx('brycks-table-head', sticky && 'brycks-table-head--sticky', className)}\n      style={headStyle}\n      {...props}\n    >\n      {children}\n    </thead>\n  )\n})\n\nTableHead.displayName = 'TableHead'\n\n// TableBody\nexport interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(function TableBody(\n  { className, style, children, ...props },\n  ref\n) {\n  const bodyStyle: CSSProperties = {\n    ...style,\n  }\n\n  return (\n    <tbody\n      ref={ref}\n      className={cx('brycks-table-body', className)}\n      style={bodyStyle}\n      {...props}\n    >\n      {children}\n    </tbody>\n  )\n})\n\nTableBody.displayName = 'TableBody'\n\n// TableRow\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  /** Whether the row is selected */\n  selected?: boolean\n  /** Whether the row is clickable */\n  clickable?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(\n  { selected = false, clickable = false, className, style, children, ...props },\n  ref\n) {\n  const { variant } = useTableContext()\n\n  const rowStyle: CSSProperties = {\n    backgroundColor: selected\n      ? 'var(--brycks-primary-50)'\n      : 'transparent',\n    borderBottom: variant !== 'bordered' ? '1px solid var(--brycks-border-muted)' : undefined,\n    cursor: clickable ? 'pointer' : undefined,\n    transition: `background-color ${durations.quick}ms ${easings.easeOut}`,\n    ...style,\n  }\n\n  return (\n    <tr\n      ref={ref}\n      className={cx(\n        'brycks-table-row',\n        selected && 'brycks-table-row--selected',\n        clickable && 'brycks-table-row--clickable',\n        className\n      )}\n      style={rowStyle}\n      onMouseEnter={(e) => {\n        if (clickable && !selected) {\n          e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!selected) {\n          e.currentTarget.style.backgroundColor = 'transparent'\n        }\n      }}\n      {...props}\n    >\n      {children}\n    </tr>\n  )\n})\n\nTableRow.displayName = 'TableRow'\n\n// TableHeader (th)\nexport interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  /** Whether the column is sortable */\n  sortable?: boolean\n  /** Sort direction */\n  sortDirection?: 'asc' | 'desc' | null\n  /** Callback when sort is requested */\n  onSort?: () => void\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n  /** Custom class name */\n  className?: string\n}\n\nfunction SortIcon({ direction }: { direction: 'asc' | 'desc' | null }) {\n  if (!direction) {\n    return (\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" style={{ opacity: 0.4 }}>\n        <path d=\"M7 3L10 6H4L7 3Z\" fill=\"currentColor\" />\n        <path d=\"M7 11L4 8H10L7 11Z\" fill=\"currentColor\" />\n      </svg>\n    )\n  }\n\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n      {direction === 'asc' ? (\n        <path d=\"M7 3L10 6H4L7 3Z\" fill=\"currentColor\" />\n      ) : (\n        <path d=\"M7 11L4 8H10L7 11Z\" fill=\"currentColor\" />\n      )}\n    </svg>\n  )\n}\n\nexport const TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(function TableHeader(\n  {\n    sortable = false,\n    sortDirection = null,\n    onSort,\n    align = 'left',\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref\n) {\n  const { size } = useTableContext()\n  const config = sizeConfig[size]\n\n  const headerStyle: CSSProperties = {\n    padding: `${config.headerPaddingY}px ${config.headerPaddingX}px`,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textAlign: align,\n    whiteSpace: 'nowrap',\n    cursor: sortable ? 'pointer' : undefined,\n    userSelect: sortable ? 'none' : undefined,\n    transition: `color ${durations.quick}ms ${easings.easeOut}`,\n    ...style,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: componentGap.sm,\n    justifyContent: align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start',\n  }\n\n  const handleClick = () => {\n    if (sortable && onSort) {\n      onSort()\n    }\n  }\n\n  return (\n    <th\n      ref={ref}\n      className={cx('brycks-table-header', sortable && 'brycks-table-header--sortable', className)}\n      style={headerStyle}\n      onClick={handleClick}\n      onMouseEnter={(e) => {\n        if (sortable) {\n          e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n        }\n      }}\n      onMouseLeave={(e) => {\n        e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n      }}\n      {...props}\n    >\n      <span style={contentStyle}>\n        {children}\n        {sortable && <SortIcon direction={sortDirection} />}\n      </span>\n    </th>\n  )\n})\n\nTableHeader.displayName = 'TableHeader'\n\n// TableCell (td)\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n  /** Whether to truncate text */\n  truncate?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { align = 'left', truncate = false, className, style, children, ...props },\n  ref\n) {\n  const { size, variant } = useTableContext()\n  const config = sizeConfig[size]\n\n  const cellStyle: CSSProperties = {\n    padding: `${config.paddingY}px ${config.paddingX}px`,\n    color: 'var(--brycks-foreground-default)',\n    textAlign: align,\n    verticalAlign: 'middle',\n    border: variant === 'bordered' ? '1px solid var(--brycks-border-muted)' : undefined,\n    maxWidth: truncate ? 200 : undefined,\n    overflow: truncate ? 'hidden' : undefined,\n    textOverflow: truncate ? 'ellipsis' : undefined,\n    whiteSpace: truncate ? 'nowrap' : undefined,\n    ...style,\n  }\n\n  return (\n    <td\n      ref={ref}\n      className={cx('brycks-table-cell', truncate && 'brycks-table-cell--truncate', className)}\n      style={cellStyle}\n      title={truncate && typeof children === 'string' ? children : undefined}\n      {...props}\n    >\n      {children}\n    </td>\n  )\n})\n\nTableCell.displayName = 'TableCell'\n\n// TableFoot\nexport interface TableFootProps extends HTMLAttributes<HTMLTableSectionElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableFoot = forwardRef<HTMLTableSectionElement, TableFootProps>(function TableFoot(\n  { className, style, children, ...props },\n  ref\n) {\n  const footStyle: CSSProperties = {\n    backgroundColor: 'var(--brycks-background-muted)',\n    fontWeight: 500,\n    ...style,\n  }\n\n  return (\n    <tfoot\n      ref={ref}\n      className={cx('brycks-table-foot', className)}\n      style={footStyle}\n      {...props}\n    >\n      {children}\n    </tfoot>\n  )\n})\n\nTableFoot.displayName = 'TableFoot'\n\n// TableCaption\nexport interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {\n  /** Caption placement */\n  placement?: 'top' | 'bottom'\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(function TableCaption(\n  { placement = 'bottom', className, style, children, ...props },\n  ref\n) {\n  const captionStyle: CSSProperties = {\n    captionSide: placement,\n    padding: `${spacing[3]}px ${spacing[4]}px`,\n    fontSize: fontSizes.base - 1,\n    color: 'var(--brycks-foreground-muted)',\n    textAlign: 'left',\n    ...style,\n  }\n\n  return (\n    <caption\n      ref={ref}\n      className={cx('brycks-table-caption', className)}\n      style={captionStyle}\n      {...props}\n    >\n      {children}\n    </caption>\n  )\n})\n\nTableCaption.displayName = 'TableCaption'\n"],"names":["TableContext","createContext","useTableContext","useContext","sizeConfig","fontSizes","componentPaddingY","componentPaddingX","spacing","Table","forwardRef","size","variant","_stickyHeader","loading","className","style","children","testId","props","ref","containerStyle","tableStyle","durations","easings","jsx","cx","TableHead","sticky","headStyle","TableBody","bodyStyle","TableRow","selected","clickable","rowStyle","e","SortIcon","direction","jsxs","TableHeader","sortable","sortDirection","onSort","align","config","headerStyle","contentStyle","componentGap","handleClick","TableCell","truncate","cellStyle","TableFoot","footStyle","TableCaption","placement","captionStyle"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../src/components/data/Table/Table.tsx"],"sourcesContent":["/**\n * Table Component\n *\n * A flexible table component with sorting, selection, and responsive support.\n * Follows design system patterns for consistent styling.\n */\n\nimport {\n  forwardRef,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ThHTMLAttributes,\n  type TdHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentGap, componentPaddingX, componentPaddingY } from '../../../design-system/primitives'\nimport { EmptyState } from '../../utility/EmptyState'\nimport { Skeleton } from '../../utility/Skeleton'\n\nexport type TableSize = 'sm' | 'md' | 'lg'\n// `striped` was dead API (no CSS, incompatible with inline row styling) — removed in 0.5.0.\nexport type TableVariant = 'default' | 'bordered'\n\ninterface TableContextValue {\n  size: TableSize\n  variant: TableVariant\n  stickyHeader: boolean\n}\n\nconst TableContext = createContext<TableContextValue>({ size: 'md', variant: 'default', stickyHeader: false })\n\nfunction useTableContext() {\n  return useContext(TableContext)\n}\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n  /** Table size */\n  size?: TableSize\n  /** Table variant */\n  variant?: TableVariant\n  /** Whether the table has a sticky header */\n  stickyHeader?: boolean\n  /** Whether the table is in a loading state */\n  loading?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<TableSize, { fontSize: number; paddingY: number; paddingX: number; headerPaddingY: number; headerPaddingX: number }> = {\n  sm: { fontSize: fontSizes.base - 1, paddingY: componentPaddingY.md, paddingX: componentPaddingX.sm, headerPaddingY: componentPaddingY.md, headerPaddingX: componentPaddingX.sm },\n  md: { fontSize: fontSizes.base, paddingY: componentPaddingX.sm, paddingX: componentPaddingX.md, headerPaddingY: componentPaddingX.sm, headerPaddingX: componentPaddingX.md },\n  lg: { fontSize: fontSizes.base + 1, paddingY: componentPaddingX.md, paddingX: componentPaddingX.lg, headerPaddingY: spacing[3.5], headerPaddingX: componentPaddingX.lg },\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(function Table(\n  {\n    size = 'md',\n    variant = 'default',\n    stickyHeader = false,\n    loading = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    width: '100%',\n    overflow: 'auto',\n    ...style,\n  }\n\n  const tableStyle: CSSProperties = {\n    width: '100%',\n    borderCollapse: variant === 'bordered' ? 'separate' : 'collapse',\n    borderSpacing: 0,\n    fontSize: sizeConfig[size].fontSize,\n    fontVariantNumeric: 'tabular-nums',\n    opacity: loading ? 0.6 : 1,\n    transition: `opacity ${durations.quick}ms ${easings.easeOut}`,\n  }\n\n  return (\n    <TableContext.Provider value={{ size, variant, stickyHeader }}>\n      <div className=\"brycks-table-container\" style={containerStyle}>\n        <table\n          ref={ref}\n          className={cx('brycks-table', `brycks-table--${size}`, `brycks-table--${variant}`, className)}\n          style={tableStyle}\n          aria-busy={loading || undefined}\n          data-testid={testId}\n          {...props}\n        >\n          {children}\n        </table>\n      </div>\n    </TableContext.Provider>\n  )\n})\n\nTable.displayName = 'Table'\n\n// TableHead\nexport interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {\n  /** Whether the header is sticky */\n  sticky?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(function TableHead(\n  { sticky = false, className, style, children, ...props },\n  ref\n) {\n  const { stickyHeader } = useTableContext()\n  const isSticky = sticky || stickyHeader\n\n  const headStyle: CSSProperties = {\n    backgroundColor: 'var(--brycks-background-muted)',\n    position: isSticky ? 'sticky' : undefined,\n    top: isSticky ? 0 : undefined,\n    zIndex: isSticky ? 1 : undefined,\n    ...style,\n  }\n\n  return (\n    <thead\n      ref={ref}\n      className={cx('brycks-table-head', isSticky && 'brycks-table-head--sticky', className)}\n      style={headStyle}\n      {...props}\n    >\n      {children}\n    </thead>\n  )\n})\n\nTableHead.displayName = 'TableHead'\n\n// TableBody\nexport interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(function TableBody(\n  { className, style, children, ...props },\n  ref\n) {\n  const bodyStyle: CSSProperties = {\n    ...style,\n  }\n\n  return (\n    <tbody\n      ref={ref}\n      className={cx('brycks-table-body', className)}\n      style={bodyStyle}\n      {...props}\n    >\n      {children}\n    </tbody>\n  )\n})\n\nTableBody.displayName = 'TableBody'\n\n// TableRow\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  /** Whether the row is selected */\n  selected?: boolean\n  /** Whether the row is clickable */\n  clickable?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(\n  { selected = false, clickable = false, className, style, children, ...props },\n  ref\n) {\n  const { variant } = useTableContext()\n\n  const rowStyle: CSSProperties = {\n    backgroundColor: selected\n      ? 'var(--brycks-primary-muted)'\n      : 'transparent',\n    borderBottom: variant !== 'bordered' ? '1px solid var(--brycks-border-muted)' : undefined,\n    cursor: clickable ? 'pointer' : undefined,\n    transition: `background-color ${durations.quick}ms ${easings.easeOut}`,\n    ...style,\n  }\n\n  return (\n    <tr\n      ref={ref}\n      className={cx(\n        'brycks-table-row',\n        selected && 'brycks-table-row--selected',\n        clickable && 'brycks-table-row--clickable',\n        className\n      )}\n      style={rowStyle}\n      onMouseEnter={(e) => {\n        if (clickable && !selected) {\n          e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!selected) {\n          e.currentTarget.style.backgroundColor = 'transparent'\n        }\n      }}\n      {...props}\n    >\n      {children}\n    </tr>\n  )\n})\n\nTableRow.displayName = 'TableRow'\n\n// TableHeader (th)\nexport interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  /** Whether the column is sortable */\n  sortable?: boolean\n  /** Sort direction */\n  sortDirection?: 'asc' | 'desc' | null\n  /** Callback when sort is requested */\n  onSort?: () => void\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n  /** Custom class name */\n  className?: string\n}\n\nfunction SortIcon({ direction }: { direction: 'asc' | 'desc' | null }) {\n  if (!direction) {\n    return (\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" style={{ opacity: 0.4 }} aria-hidden=\"true\">\n        <path d=\"M7 3L10 6H4L7 3Z\" fill=\"currentColor\" />\n        <path d=\"M7 11L4 8H10L7 11Z\" fill=\"currentColor\" />\n      </svg>\n    )\n  }\n\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n      {direction === 'asc' ? (\n        <path d=\"M7 3L10 6H4L7 3Z\" fill=\"currentColor\" />\n      ) : (\n        <path d=\"M7 11L4 8H10L7 11Z\" fill=\"currentColor\" />\n      )}\n    </svg>\n  )\n}\n\nexport const TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(function TableHeader(\n  {\n    sortable = false,\n    sortDirection = null,\n    onSort,\n    align = 'left',\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref\n) {\n  const { size } = useTableContext()\n  const config = sizeConfig[size]\n\n  const headerStyle: CSSProperties = {\n    padding: `${config.headerPaddingY}px ${config.headerPaddingX}px`,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textAlign: align,\n    whiteSpace: 'nowrap',\n    transition: `color ${durations.quick}ms ${easings.easeOut}`,\n    ...style,\n  }\n\n  const contentStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: componentGap.sm,\n    justifyContent: align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start',\n  }\n\n  // Sorting happens through a real button so it is reachable by keyboard\n  const sortButtonStyle: CSSProperties = {\n    ...contentStyle,\n    width: '100%',\n    padding: 0,\n    background: 'transparent',\n    border: 'none',\n    font: 'inherit',\n    fontWeight: 'inherit',\n    color: 'inherit',\n    cursor: 'pointer',\n    userSelect: 'none',\n  }\n\n  return (\n    <th\n      ref={ref}\n      aria-sort={\n        sortable\n          ? sortDirection === 'asc'\n            ? 'ascending'\n            : sortDirection === 'desc'\n            ? 'descending'\n            : 'none'\n          : undefined\n      }\n      className={cx('brycks-table-header', sortable && 'brycks-table-header--sortable', className)}\n      style={headerStyle}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          style={sortButtonStyle}\n          onClick={() => onSort?.()}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.color = 'inherit'\n          }}\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        <span style={contentStyle}>{children}</span>\n      )}\n    </th>\n  )\n})\n\nTableHeader.displayName = 'TableHeader'\n\n// TableCell (td)\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n  /** Whether to truncate text */\n  truncate?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { align = 'left', truncate = false, className, style, children, ...props },\n  ref\n) {\n  const { size, variant } = useTableContext()\n  const config = sizeConfig[size]\n\n  const cellStyle: CSSProperties = {\n    padding: `${config.paddingY}px ${config.paddingX}px`,\n    color: 'var(--brycks-foreground-default)',\n    textAlign: align,\n    verticalAlign: 'middle',\n    border: variant === 'bordered' ? '1px solid var(--brycks-border-muted)' : undefined,\n    maxWidth: truncate ? 200 : undefined,\n    overflow: truncate ? 'hidden' : undefined,\n    textOverflow: truncate ? 'ellipsis' : undefined,\n    whiteSpace: truncate ? 'nowrap' : undefined,\n    ...style,\n  }\n\n  return (\n    <td\n      ref={ref}\n      className={cx('brycks-table-cell', truncate && 'brycks-table-cell--truncate', className)}\n      style={cellStyle}\n      title={truncate && typeof children === 'string' ? children : undefined}\n      {...props}\n    >\n      {children}\n    </td>\n  )\n})\n\nTableCell.displayName = 'TableCell'\n\n// TableFoot\nexport interface TableFootProps extends HTMLAttributes<HTMLTableSectionElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableFoot = forwardRef<HTMLTableSectionElement, TableFootProps>(function TableFoot(\n  { className, style, children, ...props },\n  ref\n) {\n  const footStyle: CSSProperties = {\n    backgroundColor: 'var(--brycks-background-muted)',\n    fontWeight: 500,\n    ...style,\n  }\n\n  return (\n    <tfoot\n      ref={ref}\n      className={cx('brycks-table-foot', className)}\n      style={footStyle}\n      {...props}\n    >\n      {children}\n    </tfoot>\n  )\n})\n\nTableFoot.displayName = 'TableFoot'\n\n// TableCaption\nexport interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {\n  /** Caption placement */\n  placement?: 'top' | 'bottom'\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(function TableCaption(\n  { placement = 'bottom', className, style, children, ...props },\n  ref\n) {\n  const captionStyle: CSSProperties = {\n    captionSide: placement,\n    padding: `${spacing[3]}px ${spacing[4]}px`,\n    fontSize: fontSizes.base - 1,\n    color: 'var(--brycks-foreground-muted)',\n    textAlign: 'left',\n    ...style,\n  }\n\n  return (\n    <caption\n      ref={ref}\n      className={cx('brycks-table-caption', className)}\n      style={captionStyle}\n      {...props}\n    >\n      {children}\n    </caption>\n  )\n})\n\nTableCaption.displayName = 'TableCaption'\n\n// TableEmpty — a full-width empty state row, drop inside <TableBody>\nexport interface TableEmptyProps {\n  /** Number of columns to span (match the table's column count) */\n  colSpan: number\n  /** Icon or illustration */\n  icon?: ReactNode\n  /** Title text */\n  title?: ReactNode\n  /** Description text */\n  description?: ReactNode\n  /** Action element (button, link) */\n  action?: ReactNode\n  /** Custom class name */\n  className?: string\n}\n\nexport const TableEmpty = forwardRef<HTMLTableRowElement, TableEmptyProps>(function TableEmpty(\n  { colSpan, icon, title, description, action, className },\n  ref\n) {\n  return (\n    <tr ref={ref} className={cx('brycks-table-empty', className)}>\n      <td colSpan={colSpan} style={{ padding: 0 }}>\n        <EmptyState icon={icon} title={title} description={description} action={action} />\n      </td>\n    </tr>\n  )\n})\n\nTableEmpty.displayName = 'TableEmpty'\n\n// TableSkeleton — placeholder rows shown while data loads, drop inside <TableBody>\nexport interface TableSkeletonProps {\n  /** Number of skeleton rows */\n  rows?: number\n  /** Number of columns per row (match the table's column count) */\n  columns: number\n  /** Custom class name applied to each row */\n  className?: string\n}\n\n// Deterministic per-column widths so the placeholder reads like real data\nconst skeletonWidths = ['70%', '45%', '85%', '55%', '60%', '40%']\n\nexport function TableSkeleton({ rows = 5, columns, className }: TableSkeletonProps) {\n  return (\n    <>\n      {Array.from({ length: rows }).map((_, rowIndex) => (\n        <TableRow key={rowIndex} className={cx('brycks-table-skeleton-row', className)} aria-hidden=\"true\">\n          {Array.from({ length: columns }).map((_, colIndex) => (\n            <TableCell key={colIndex}>\n              <Skeleton variant=\"text\" width={skeletonWidths[colIndex % skeletonWidths.length]} />\n            </TableCell>\n          ))}\n        </TableRow>\n      ))}\n    </>\n  )\n}\n\nTableSkeleton.displayName = 'TableSkeleton'\n"],"names":["TableContext","createContext","useTableContext","useContext","sizeConfig","fontSizes","componentPaddingY","componentPaddingX","spacing","Table","forwardRef","size","variant","stickyHeader","loading","className","style","children","testId","props","ref","containerStyle","tableStyle","durations","easings","jsx","cx","TableHead","sticky","isSticky","headStyle","TableBody","bodyStyle","TableRow","selected","clickable","rowStyle","e","SortIcon","direction","TableHeader","sortable","sortDirection","onSort","align","config","headerStyle","contentStyle","componentGap","sortButtonStyle","jsxs","TableCell","truncate","cellStyle","TableFoot","footStyle","TableCaption","placement","captionStyle","TableEmpty","colSpan","icon","title","description","action","EmptyState","skeletonWidths","TableSkeleton","rows","columns","Fragment","_","rowIndex","colIndex","Skeleton"],"mappings":";;;;;;;;;AAiCA,MAAMA,IAAeC,EAAiC,EAAE,MAAM,MAAM,SAAS,WAAW,cAAc,IAAO;AAE7G,SAASC,IAAkB;AACzB,SAAOC,EAAWH,CAAY;AAChC;AAiBA,MAAMI,IAA0I;AAAA,EAC9I,IAAI,EAAE,UAAUC,EAAU,OAAO,GAAG,UAAUC,EAAkB,IAAI,UAAUC,EAAkB,IAAI,gBAAgBD,EAAkB,IAAI,gBAAgBC,EAAkB,GAAA;AAAA,EAC5K,IAAI,EAAE,UAAUF,EAAU,MAAM,UAAUE,EAAkB,IAAI,UAAUA,EAAkB,IAAI,gBAAgBA,EAAkB,IAAI,gBAAgBA,EAAkB,GAAA;AAAA,EACxK,IAAI,EAAE,UAAUF,EAAU,OAAO,GAAG,UAAUE,EAAkB,IAAI,UAAUA,EAAkB,IAAI,gBAAgBC,EAAQ,GAAG,GAAG,gBAAgBD,EAAkB,GAAA;AACtK,GAEaE,IAAQC,EAAyC,SAC5D;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,cAAAC,IAAe;AAAA,EACf,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAgC;AAAA,IACpC,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAGL;AAAA,EAAA,GAGCM,IAA4B;AAAA,IAChC,OAAO;AAAA,IACP,gBAAgBV,MAAY,aAAa,aAAa;AAAA,IACtD,eAAe;AAAA,IACf,UAAUR,EAAWO,CAAI,EAAE;AAAA,IAC3B,oBAAoB;AAAA,IACpB,SAASG,IAAU,MAAM;AAAA,IACzB,YAAY,WAAWS,EAAU,KAAK,MAAMC,EAAQ,OAAO;AAAA,EAAA;AAG7D,SACE,gBAAAC,EAACzB,EAAa,UAAb,EAAsB,OAAO,EAAE,MAAAW,GAAM,SAAAC,GAAS,cAAAC,EAAA,GAC7C,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,0BAAyB,OAAOJ,GAC7C,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM,EAAG,gBAAgB,iBAAiBf,CAAI,IAAI,iBAAiBC,CAAO,IAAIG,CAAS;AAAA,MAC5F,OAAOO;AAAA,MACP,aAAWR,KAAW;AAAA,MACtB,eAAaI;AAAA,MACZ,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ,CAAC;AAEDR,EAAM,cAAc;AAUb,MAAMkB,IAAYjB,EAAoD,SAC3E,EAAE,QAAAkB,IAAS,IAAO,WAAAb,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGE,EAAA,GACjDC,GACA;AACA,QAAM,EAAE,cAAAP,EAAA,IAAiBX,EAAA,GACnB2B,IAAWD,KAAUf,GAErBiB,IAA2B;AAAA,IAC/B,iBAAiB;AAAA,IACjB,UAAUD,IAAW,WAAW;AAAA,IAChC,KAAKA,IAAW,IAAI;AAAA,IACpB,QAAQA,IAAW,IAAI;AAAA,IACvB,GAAGb;AAAA,EAAA;AAGL,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM,EAAG,qBAAqBG,KAAY,6BAA6Bd,CAAS;AAAA,MACrF,OAAOe;AAAA,MACN,GAAGX;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDU,EAAU,cAAc;AAQjB,MAAMI,IAAYrB,EAAoD,SAC3E,EAAE,WAAAK,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGE,EAAA,GACjCC,GACA;AACA,QAAMY,IAA2B;AAAA,IAC/B,GAAGhB;AAAA,EAAA;AAGL,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM,EAAG,qBAAqBX,CAAS;AAAA,MAC5C,OAAOiB;AAAA,MACN,GAAGb;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDc,EAAU,cAAc;AAYjB,MAAME,IAAWvB,EAA+C,SACrE,EAAE,UAAAwB,IAAW,IAAO,WAAAC,IAAY,IAAO,WAAApB,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGE,EAAA,GACtEC,GACA;AACA,QAAM,EAAE,SAAAR,EAAA,IAAYV,EAAA,GAEdkC,IAA0B;AAAA,IAC9B,iBAAiBF,IACb,gCACA;AAAA,IACJ,cAActB,MAAY,aAAa,yCAAyC;AAAA,IAChF,QAAQuB,IAAY,YAAY;AAAA,IAChC,YAAY,oBAAoBZ,EAAU,KAAK,MAAMC,EAAQ,OAAO;AAAA,IACpE,GAAGR;AAAA,EAAA;AAGL,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM;AAAA,QACT;AAAA,QACAQ,KAAY;AAAA,QACZC,KAAa;AAAA,QACbpB;AAAA,MAAA;AAAA,MAEF,OAAOqB;AAAA,MACP,cAAc,CAACC,MAAM;AACnB,QAAIF,KAAa,CAACD,MAChBG,EAAE,cAAc,MAAM,kBAAkB;AAAA,MAE5C;AAAA,MACA,cAAc,CAACA,MAAM;AACnB,QAAKH,MACHG,EAAE,cAAc,MAAM,kBAAkB;AAAA,MAE5C;AAAA,MACC,GAAGlB;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDgB,EAAS,cAAc;AAgBvB,SAASK,EAAS,EAAE,WAAAC,KAAmD;AACrE,SAAKA,IAUH,gBAAAd,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACrE,UAAAc,MAAc,QACb,gBAAAd,EAAC,QAAA,EAAK,GAAE,oBAAmB,MAAK,eAAA,CAAe,IAE/C,gBAAAA,EAAC,QAAA,EAAK,GAAE,sBAAqB,MAAK,eAAA,CAAe,GAErD,sBAdG,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,OAAO,EAAE,SAAS,IAAA,GAAO,eAAY,QAC/F,UAAA;AAAA,IAAA,gBAAAA,EAAC,QAAA,EAAK,GAAE,oBAAmB,MAAK,gBAAe;AAAA,IAC/C,gBAAAA,EAAC,QAAA,EAAK,GAAE,sBAAqB,MAAK,eAAA,CAAe;AAAA,EAAA,GACnD;AAaN;AAEO,MAAMe,IAAc9B,EAAmD,SAC5E;AAAA,EACE,UAAA+B,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,QAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAA7B;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGE;AACL,GACAC,GACA;AACA,QAAM,EAAE,MAAAT,EAAA,IAAST,EAAA,GACX2C,IAASzC,EAAWO,CAAI,GAExBmC,IAA6B;AAAA,IACjC,SAAS,GAAGD,EAAO,cAAc,MAAMA,EAAO,cAAc;AAAA,IAC5D,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,WAAWD;AAAA,IACX,YAAY;AAAA,IACZ,YAAY,SAASrB,EAAU,KAAK,MAAMC,EAAQ,OAAO;AAAA,IACzD,GAAGR;AAAA,EAAA,GAGC+B,IAA8B;AAAA,IAClC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAKC,EAAa;AAAA,IAClB,gBAAgBJ,MAAU,UAAU,aAAaA,MAAU,WAAW,WAAW;AAAA,EAAA,GAI7EK,IAAiC;AAAA,IACrC,GAAGF;AAAA,IACH,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EAAA;AAGd,SACE,gBAAAtB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,aACEqB,IACIC,MAAkB,QAChB,cACAA,MAAkB,SAClB,eACA,SACF;AAAA,MAEN,WAAWhB,EAAG,uBAAuBe,KAAY,iCAAiC1B,CAAS;AAAA,MAC3F,OAAO+B;AAAA,MACN,GAAG3B;AAAA,MAEH,UAAAsB,IACC,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOD;AAAA,UACP,SAAS,MAAMN,IAAA;AAAA,UACf,cAAc,CAACN,MAAM;AACnB,YAAAA,EAAE,cAAc,MAAM,QAAQ;AAAA,UAChC;AAAA,UACA,cAAc,CAACA,MAAM;AACnB,YAAAA,EAAE,cAAc,MAAM,QAAQ;AAAA,UAChC;AAAA,UAEC,UAAA;AAAA,YAAApB;AAAA,YACD,gBAAAQ,EAACa,GAAA,EAAS,WAAWI,EAAA,CAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,IAGtC,gBAAAjB,EAAC,QAAA,EAAK,OAAOsB,GAAe,UAAA9B,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAI7C,CAAC;AAEDuB,EAAY,cAAc;AAYnB,MAAMW,IAAYzC,EAAiD,SACxE,EAAE,OAAAkC,IAAQ,QAAQ,UAAAQ,IAAW,IAAO,WAAArC,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGE,EAAA,GACnEC,GACA;AACA,QAAM,EAAE,MAAAT,GAAM,SAAAC,EAAA,IAAYV,EAAA,GACpB2C,IAASzC,EAAWO,CAAI,GAExB0C,IAA2B;AAAA,IAC/B,SAAS,GAAGR,EAAO,QAAQ,MAAMA,EAAO,QAAQ;AAAA,IAChD,OAAO;AAAA,IACP,WAAWD;AAAA,IACX,eAAe;AAAA,IACf,QAAQhC,MAAY,aAAa,yCAAyC;AAAA,IAC1E,UAAUwC,IAAW,MAAM;AAAA,IAC3B,UAAUA,IAAW,WAAW;AAAA,IAChC,cAAcA,IAAW,aAAa;AAAA,IACtC,YAAYA,IAAW,WAAW;AAAA,IAClC,GAAGpC;AAAA,EAAA;AAGL,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM,EAAG,qBAAqB0B,KAAY,+BAA+BrC,CAAS;AAAA,MACvF,OAAOsC;AAAA,MACP,OAAOD,KAAY,OAAOnC,KAAa,WAAWA,IAAW;AAAA,MAC5D,GAAGE;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDkC,EAAU,cAAc;AAQjB,MAAMG,IAAY5C,EAAoD,SAC3E,EAAE,WAAAK,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGE,EAAA,GACjCC,GACA;AACA,QAAMmC,IAA2B;AAAA,IAC/B,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,GAAGvC;AAAA,EAAA;AAGL,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM,EAAG,qBAAqBX,CAAS;AAAA,MAC5C,OAAOwC;AAAA,MACN,GAAGpC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDqC,EAAU,cAAc;AAUjB,MAAME,IAAe9C,EAAuD,SACjF,EAAE,WAAA+C,IAAY,UAAU,WAAA1C,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGE,EAAA,GACvDC,GACA;AACA,QAAMsC,IAA8B;AAAA,IAClC,aAAaD;AAAA,IACb,SAAS,GAAGjD,EAAQ,CAAC,CAAC,MAAMA,EAAQ,CAAC,CAAC;AAAA,IACtC,UAAUH,EAAU,OAAO;AAAA,IAC3B,OAAO;AAAA,IACP,WAAW;AAAA,IACX,GAAGW;AAAA,EAAA;AAGL,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM,EAAG,wBAAwBX,CAAS;AAAA,MAC/C,OAAO2C;AAAA,MACN,GAAGvC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDuC,EAAa,cAAc;AAkBpB,MAAMG,IAAajD,EAAiD,SACzE,EAAE,SAAAkD,GAAS,MAAAC,GAAM,OAAAC,GAAO,aAAAC,GAAa,QAAAC,GAAQ,WAAAjD,EAAA,GAC7CK,GACA;AACA,SACE,gBAAAK,EAAC,QAAG,KAAAL,GAAU,WAAWM,EAAG,sBAAsBX,CAAS,GACzD,UAAA,gBAAAU,EAAC,MAAA,EAAG,SAAAmC,GAAkB,OAAO,EAAE,SAAS,EAAA,GACtC,UAAA,gBAAAnC,EAACwC,GAAA,EAAW,MAAAJ,GAAY,OAAAC,GAAc,aAAAC,GAA0B,QAAAC,EAAA,CAAgB,EAAA,CAClF,EAAA,CACF;AAEJ,CAAC;AAEDL,EAAW,cAAc;AAazB,MAAMO,IAAiB,CAAC,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;AAEzD,SAASC,EAAc,EAAE,MAAAC,IAAO,GAAG,SAAAC,GAAS,WAAAtD,KAAiC;AAClF,SACE,gBAAAU,EAAA6C,GAAA,EACG,gBAAM,KAAK,EAAE,QAAQF,EAAA,CAAM,EAAE,IAAI,CAACG,GAAGC,MACpC,gBAAA/C,EAACQ,GAAA,EAAwB,WAAWP,EAAG,6BAA6BX,CAAS,GAAG,eAAY,QACzF,UAAA,MAAM,KAAK,EAAE,QAAQsD,GAAS,EAAE,IAAI,CAACE,GAAGE,MACvC,gBAAAhD,EAAC0B,GAAA,EACC,UAAA,gBAAA1B,EAACiD,GAAA,EAAS,SAAQ,QAAO,OAAOR,EAAeO,IAAWP,EAAe,MAAM,EAAA,CAAG,EAAA,GADpEO,CAEhB,CACD,EAAA,GALYD,CAMf,CACD,EAAA,CACH;AAEJ;AAEAL,EAAc,cAAc;"}

package/dist/components/data/TreeView/TreeView.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),u=require("react"),H=require("../../../utils/styles.cjs"),k=require("../../../design-system/tokens/spacing.cjs"),w=require("../../../design-system/primitives/sizing.cjs"),R=require("../../../design-system/tokens/typography.cjs"),j=require("../../../design-system/tokens/motion.cjs"),N={sm:{fontSize:R.fontSizes.sm,iconSize:w.iconSizes.xs,padding:w.componentPaddingY.xs,indent:k.spacing[4]},md:{fontSize:R.fontSizes.base,iconSize:w.iconSizes.sm,padding:w.componentPaddingY.sm,indent:k.spacing[5]},lg:{fontSize:R.fontSizes.md,iconSize:w.iconSizes.md,padding:w.componentPaddingY.md,indent:k.spacing[6]}};function U({expanded:e}){return a.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",style:{transform:e?"rotate(90deg)":"rotate(0)",transition:`transform ${j.durations.fast}ms ${j.easings.easeOut}`},children:a.jsx("path",{d:"M6 4l4 4-4 4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function A({node:e,level:f,config:i,isSelected:y,isExpanded:l,showLines:S,onToggle:p,onSelect:g,renderNode:x,selectedIds:m,expandedIds:z,multiSelect:C}){const o=e.children&&e.children.length>0,I=u.useCallback(n=>{e.disabled||g(e.id,n.ctrlKey||n.metaKey)},[e.id,e.disabled,g]),D=u.useCallback(n=>{n.stopPropagation(),o&&p(e.id)},[e.id,o,p]),K=u.useCallback(n=>{if(!e.disabled)switch(n.key){case"Enter":case" ":n.preventDefault(),g(e.id,n.ctrlKey||n.metaKey);break;case"ArrowRight":n.preventDefault(),o&&!l&&p(e.id);break;case"ArrowLeft":n.preventDefault(),o&&l&&p(e.id);break}},[e.id,e.disabled,o,l,p,g]),q={display:"flex",alignItems:"center",gap:k.spacing[1.5],padding:`${i.padding}px ${k.spacing[2]}px`,paddingLeft:k.spacing[2]+f*i.indent,fontSize:i.fontSize,color:e.disabled?"var(--brycks-foreground-disabled)":"var(--brycks-foreground-default)",backgroundColor:y?"var(--brycks-primary-50)":"transparent",borderRadius:"var(--brycks-radius-md)",cursor:e.disabled?"not-allowed":"pointer",userSelect:"none",transition:`background-color ${j.durations.fast}ms ${j.easings.easeOut}`,position:"relative"},T={display:"flex",alignItems:"center",justifyContent:"center",width:i.iconSize,height:i.iconSize,color:"var(--brycks-foreground-muted)",cursor:"pointer",flexShrink:0},$={display:"flex",alignItems:"center",justifyContent:"center",width:i.iconSize,height:i.iconSize,color:y?"var(--brycks-primary-default)":"var(--brycks-foreground-muted)",flexShrink:0},M=S&&f>0?{position:"absolute",left:k.spacing[2]+(f-1)*i.indent+i.iconSize/2,top:0,bottom:0,width:1,backgroundColor:"var(--brycks-border-default)"}:{};return a.jsxs("li",{role:"treeitem","aria-selected":y,"aria-expanded":o?l:void 0,children:[a.jsxs("div",{tabIndex:e.disabled?-1:0,style:q,onClick:I,onKeyDown:K,onMouseEnter:n=>{!e.disabled&&!y&&(n.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:n=>{y||(n.currentTarget.style.backgroundColor="transparent")},children:[S&&f>0&&a.jsx("span",{style:M,"aria-hidden":"true"}),a.jsx("span",{style:T,onClick:D,children:o&&a.jsx(U,{expanded:l})}),e.icon&&a.jsx("span",{style:$,children:e.icon}),x?x(e,y,l):a.jsx("span",{style:{flex:1},children:e.label})]}),o&&l&&a.jsx("ul",{role:"group",style:{listStyle:"none",margin:0,padding:0},children:e.children.map(n=>a.jsx(A,{node:n,level:f+1,config:i,isSelected:m.includes(n.id),isExpanded:z.includes(n.id),showLines:S,onToggle:p,onSelect:g,renderNode:x,selectedIds:m,expandedIds:z,multiSelect:C},n.id))})]})}const V=u.forwardRef(function({data:f,selectedIds:i,defaultSelectedIds:y=[],expandedIds:l,defaultExpandedIds:S=[],onSelectionChange:p,onExpansionChange:g,onNodeClick:x,multiSelect:m=!1,size:z="md",showLines:C=!1,renderNode:o,"aria-label":I="Tree",className:D,testId:K},q){const[T,$]=u.useState(y),[M,n]=u.useState(S),d=i!==void 0?i:T,h=l!==void 0?l:M,L=N[z],s=u.useMemo(()=>{const t=(c,r=[])=>(c.forEach(b=>{r.push(b),b.children&&h.includes(b.id)&&t(b.children,r)}),r);return t(f)},[f,h]),O=u.useCallback(t=>{const c=h.includes(t)?h.filter(r=>r!==t):[...h,t];l===void 0&&n(c),g?.(c)},[h,l,g]),v=u.useCallback((t,c)=>{const r=s.find(P=>P.id===t);r&&x?.(r);let b;m&&c?b=d.includes(t)?d.filter(P=>P!==t):[...d,t]:b=d.includes(t)&&d.length===1?[]:[t],i===void 0&&$(b),p?.(b)},[s,m,d,i,p,x]),Y=u.useCallback(t=>{const c=s.findIndex(r=>d.includes(r.id));switch(t.key){case"ArrowDown":{t.preventDefault();const r=c<s.length-1?c+1:0;v(s[r].id,!1);break}case"ArrowUp":{t.preventDefault();const r=c>0?c-1:s.length-1;v(s[r].id,!1);break}case"Home":t.preventDefault(),s.length>0&&v(s[0].id,!1);break;case"End":t.preventDefault(),s.length>0&&v(s[s.length-1].id,!1);break}},[s,d,v]),B={listStyle:"none",margin:0,padding:k.spacing[1],outline:"none"};return a.jsx("ul",{ref:q,role:"tree","aria-label":I,"aria-multiselectable":m,tabIndex:0,className:H.cx("brycks-treeview",`brycks-treeview--${z}`,D),style:B,"data-testid":K,onKeyDown:Y,children:f.map(t=>a.jsx(A,{node:t,level:0,config:L,isSelected:d.includes(t.id),isExpanded:h.includes(t.id),showLines:C,onToggle:O,onSelect:v,renderNode:o,selectedIds:d,expandedIds:h,multiSelect:m},t.id))})});V.displayName="TreeView";exports.TreeView=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),u=require("react"),H=require("../../../utils/styles.cjs"),m=require("../../../design-system/tokens/spacing.cjs"),w=require("../../../design-system/primitives/sizing.cjs"),R=require("../../../design-system/tokens/typography.cjs"),j=require("../../../design-system/tokens/motion.cjs"),N={sm:{fontSize:R.fontSizes.sm,iconSize:w.iconSizes.xs,padding:w.componentPaddingY.xs,indent:m.spacing[4]},md:{fontSize:R.fontSizes.base,iconSize:w.iconSizes.sm,padding:w.componentPaddingY.sm,indent:m.spacing[5]},lg:{fontSize:R.fontSizes.md,iconSize:w.iconSizes.md,padding:w.componentPaddingY.md,indent:m.spacing[6]}};function U({expanded:e}){return a.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",style:{transform:e?"rotate(90deg)":"rotate(0)",transition:`transform ${j.durations.fast}ms ${j.easings.easeOut}`},children:a.jsx("path",{d:"M6 4l4 4-4 4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function A({node:e,level:f,config:i,isSelected:y,isExpanded:l,showLines:S,onToggle:p,onSelect:g,renderNode:x,selectedIds:k,expandedIds:z,multiSelect:C}){const o=e.children&&e.children.length>0,I=u.useCallback(n=>{e.disabled||g(e.id,n.ctrlKey||n.metaKey)},[e.id,e.disabled,g]),D=u.useCallback(n=>{n.stopPropagation(),o&&p(e.id)},[e.id,o,p]),K=u.useCallback(n=>{if(!e.disabled)switch(n.key){case"Enter":case" ":n.preventDefault(),g(e.id,n.ctrlKey||n.metaKey);break;case"ArrowRight":n.preventDefault(),o&&!l&&p(e.id);break;case"ArrowLeft":n.preventDefault(),o&&l&&p(e.id);break}},[e.id,e.disabled,o,l,p,g]),q={display:"flex",alignItems:"center",gap:m.spacing[1.5],padding:`${i.padding}px ${m.spacing[2]}px`,paddingLeft:m.spacing[2]+f*i.indent,fontSize:i.fontSize,color:e.disabled?"var(--brycks-foreground-disabled)":"var(--brycks-foreground-default)",backgroundColor:y?"var(--brycks-primary-muted)":"transparent",borderRadius:"var(--brycks-radius-md)",cursor:e.disabled?"not-allowed":"pointer",userSelect:"none",transition:`background-color ${j.durations.fast}ms ${j.easings.easeOut}`,position:"relative"},T={display:"flex",alignItems:"center",justifyContent:"center",width:i.iconSize,height:i.iconSize,color:"var(--brycks-foreground-muted)",cursor:"pointer",flexShrink:0},$={display:"flex",alignItems:"center",justifyContent:"center",width:i.iconSize,height:i.iconSize,color:y?"var(--brycks-primary-default)":"var(--brycks-foreground-muted)",flexShrink:0},M=S&&f>0?{position:"absolute",left:m.spacing[2]+(f-1)*i.indent+i.iconSize/2,top:0,bottom:0,width:1,backgroundColor:"var(--brycks-border-default)"}:{};return a.jsxs("li",{role:"treeitem","aria-selected":y,"aria-expanded":o?l:void 0,children:[a.jsxs("div",{tabIndex:e.disabled?-1:0,style:q,onClick:I,onKeyDown:K,onMouseEnter:n=>{!e.disabled&&!y&&(n.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:n=>{y||(n.currentTarget.style.backgroundColor="transparent")},children:[S&&f>0&&a.jsx("span",{style:M,"aria-hidden":"true"}),a.jsx("span",{style:T,onClick:D,children:o&&a.jsx(U,{expanded:l})}),e.icon&&a.jsx("span",{style:$,children:e.icon}),x?x(e,y,l):a.jsx("span",{style:{flex:1},children:e.label})]}),o&&l&&a.jsx("ul",{role:"group",style:{listStyle:"none",margin:0,padding:0},children:e.children.map(n=>a.jsx(A,{node:n,level:f+1,config:i,isSelected:k.includes(n.id),isExpanded:z.includes(n.id),showLines:S,onToggle:p,onSelect:g,renderNode:x,selectedIds:k,expandedIds:z,multiSelect:C},n.id))})]})}const V=u.forwardRef(function({data:f,selectedIds:i,defaultSelectedIds:y=[],expandedIds:l,defaultExpandedIds:S=[],onSelectionChange:p,onExpansionChange:g,onNodeClick:x,multiSelect:k=!1,size:z="md",showLines:C=!1,renderNode:o,"aria-label":I="Tree",className:D,testId:K},q){const[T,$]=u.useState(y),[M,n]=u.useState(S),d=i!==void 0?i:T,h=l!==void 0?l:M,L=N[z],s=u.useMemo(()=>{const t=(c,r=[])=>(c.forEach(b=>{r.push(b),b.children&&h.includes(b.id)&&t(b.children,r)}),r);return t(f)},[f,h]),O=u.useCallback(t=>{const c=h.includes(t)?h.filter(r=>r!==t):[...h,t];l===void 0&&n(c),g?.(c)},[h,l,g]),v=u.useCallback((t,c)=>{const r=s.find(P=>P.id===t);r&&x?.(r);let b;k&&c?b=d.includes(t)?d.filter(P=>P!==t):[...d,t]:b=d.includes(t)&&d.length===1?[]:[t],i===void 0&&$(b),p?.(b)},[s,k,d,i,p,x]),Y=u.useCallback(t=>{const c=s.findIndex(r=>d.includes(r.id));switch(t.key){case"ArrowDown":{t.preventDefault();const r=c<s.length-1?c+1:0;v(s[r].id,!1);break}case"ArrowUp":{t.preventDefault();const r=c>0?c-1:s.length-1;v(s[r].id,!1);break}case"Home":t.preventDefault(),s.length>0&&v(s[0].id,!1);break;case"End":t.preventDefault(),s.length>0&&v(s[s.length-1].id,!1);break}},[s,d,v]),B={listStyle:"none",margin:0,padding:m.spacing[1],outline:"none"};return a.jsx("ul",{ref:q,role:"tree","aria-label":I,"aria-multiselectable":k,tabIndex:0,className:H.cx("brycks-treeview",`brycks-treeview--${z}`,D),style:B,"data-testid":K,onKeyDown:Y,children:f.map(t=>a.jsx(A,{node:t,level:0,config:L,isSelected:d.includes(t.id),isExpanded:h.includes(t.id),showLines:C,onToggle:O,onSelect:v,renderNode:o,selectedIds:d,expandedIds:h,multiSelect:k},t.id))})});V.displayName="TreeView";exports.TreeView=V;
 //# sourceMappingURL=TreeView.cjs.map