@brycks/core-front 0.3.6 → 0.6.0

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

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

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"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),T=require("../../../utils/styles.cjs"),j=require("../../../design-system/tokens/spacing.cjs"),g=require("../../../design-system/primitives/sizing.cjs"),N=require("../../../design-system/tokens/typography.cjs"),P=require("../../../design-system/tokens/motion.cjs"),O={sm:{fontSize:N.fontSizes.sm,iconSize:g.iconSizes.xs,padding:g.componentPaddingY.xs,indent:j.spacing[4]},md:{fontSize:N.fontSizes.base,iconSize:g.iconSizes.sm,padding:g.componentPaddingY.sm,indent:j.spacing[5]},lg:{fontSize:N.fontSizes.md,iconSize:g.iconSizes.md,padding:g.componentPaddingY.md,indent:j.spacing[6]}};function B({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 ${P.durations.fast}ms ${P.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:p,config:u,isSelected:v,isExpanded:r,showLines:_,onToggle:f,onSelect:h,renderNode:y,selectedIds:k,expandedIds:x,multiSelect:z}){const l=e.children&&e.children.length>0,S=o.useCallback(s=>{e.disabled||h(e.id,s.ctrlKey||s.metaKey)},[e.id,e.disabled,h]),D=o.useCallback(s=>{s.stopPropagation(),l&&f(e.id)},[e.id,l,f]),I=o.useCallback(s=>{if(!e.disabled)switch(s.key){case"Enter":case" ":s.preventDefault(),h(e.id,s.ctrlKey||s.metaKey);break;case"ArrowRight":s.preventDefault(),l&&!r&&f(e.id);break;case"ArrowLeft":s.preventDefault(),l&&r&&f(e.id);break}},[e.id,e.disabled,l,r,f,h]),C={paddingLeft:j.spacing[2]+p*u.indent},K={left:j.spacing[2]+(p-1)*u.indent+u.iconSize/2};return a.jsxs("li",{role:"treeitem","aria-selected":v,"aria-expanded":l?r:void 0,children:[a.jsxs("div",{tabIndex:e.disabled?-1:0,className:T.cx("brycks-treeview__item",v&&"brycks-treeview__item--selected",e.disabled&&"brycks-treeview__item--disabled"),style:C,onClick:S,onKeyDown:I,children:[_&&p>0&&a.jsx("span",{className:"brycks-treeview__line",style:K,"aria-hidden":"true"}),a.jsx("span",{className:"brycks-treeview__toggle",onClick:D,children:l&&a.jsx(B,{expanded:r})}),e.icon&&a.jsx("span",{className:"brycks-treeview__icon",children:e.icon}),y?y(e,v,r):a.jsx("span",{className:"brycks-treeview__label",children:e.label})]}),l&&r&&a.jsx("ul",{role:"group",className:"brycks-treeview__group",children:e.children.map(s=>a.jsx(A,{node:s,level:p+1,config:u,isSelected:k.includes(s.id),isExpanded:x.includes(s.id),showLines:_,onToggle:f,onSelect:h,renderNode:y,selectedIds:k,expandedIds:x,multiSelect:z},s.id))})]})}const R=o.forwardRef(function({data:p,selectedIds:u,defaultSelectedIds:v=[],expandedIds:r,defaultExpandedIds:_=[],onSelectionChange:f,onExpansionChange:h,onNodeClick:y,multiSelect:k=!1,size:x="md",showLines:z=!1,renderNode:l,"aria-label":S="Tree",className:D,testId:I},C){const[K,s]=o.useState(v),[V,L]=o.useState(_),d=u!==void 0?u:K,m=r!==void 0?r:V,M=O[x],n=o.useMemo(()=>{const i=(c,t=[])=>(c.forEach(b=>{t.push(b),b.children&&m.includes(b.id)&&i(b.children,t)}),t);return i(p)},[p,m]),Y=o.useCallback(i=>{const c=m.includes(i)?m.filter(t=>t!==i):[...m,i];r===void 0&&L(c),h?.(c)},[m,r,h]),w=o.useCallback((i,c)=>{const t=n.find(q=>q.id===i);t&&y?.(t);let b;k&&c?b=d.includes(i)?d.filter(q=>q!==i):[...d,i]:b=d.includes(i)&&d.length===1?[]:[i],u===void 0&&s(b),f?.(b)},[n,k,d,u,f,y]),$=o.useCallback(i=>{const c=n.findIndex(t=>d.includes(t.id));switch(i.key){case"ArrowDown":{i.preventDefault();const t=c<n.length-1?c+1:0;w(n[t].id,!1);break}case"ArrowUp":{i.preventDefault();const t=c>0?c-1:n.length-1;w(n[t].id,!1);break}case"Home":i.preventDefault(),n.length>0&&w(n[0].id,!1);break;case"End":i.preventDefault(),n.length>0&&w(n[n.length-1].id,!1);break}},[n,d,w]);return a.jsx("ul",{ref:C,role:"tree","aria-label":S,"aria-multiselectable":k,tabIndex:0,className:T.cx("brycks-treeview",`brycks-treeview--${x}`,D),"data-testid":I,onKeyDown:$,children:p.map(i=>a.jsx(A,{node:i,level:0,config:M,isSelected:d.includes(i.id),isExpanded:m.includes(i.id),showLines:z,onToggle:Y,onSelect:w,renderNode:l,selectedIds:d,expandedIds:m,multiSelect:k},i.id))})});R.displayName="TreeView";exports.TreeView=R;
 //# sourceMappingURL=TreeView.cjs.map