@pibit.ai/cure-design-system 0.3.6 → 0.3.8

package/dist/patterns/table/table.js

@@ -1,95 +1,104 @@
-import { jsx as o, jsxs as u, Fragment as W } from "react/jsx-runtime";
-import { forwardRef as F, useContext as v, createContext as G, useState as N, isValidElement as O, useRef as L, useEffect as M, Children as q, cloneElement as I } from "react";
-import { Table as k, useTableOptions as x, Cell as T, TableBody as J, Column as z, Group as Q, TableHeader as X, Collection as A, Row as B } from "react-aria-components";
-import { cn as d } from "../../utils/cn.js";
+import { jsx as o, jsxs as x, Fragment as V } from "react/jsx-runtime";
+import { forwardRef as W, useContext as g, createContext as F, useState as T, isValidElement as A, useRef as G, useEffect as L, Children as M, cloneElement as I } from "react";
+import { Table as B, useTableOptions as C, Cell as S, TableBody as J, Column as z, Group as Q, TableHeader as X, Collection as P, Row as O } from "react-aria-components";
+import { cn as c } from "../../utils/cn.js";
 import { Badge as Y } from "../../primitives/badge/badge.js";
-import { Icon as S } from "../../primitives/icon/icon.js";
-import { Checkbox as P } from "../../primitives/checkbox/checkbox.js";
-const y = G({
+import { Icon as w } from "../../primitives/icon/icon.js";
+import { Checkbox as D } from "../../primitives/checkbox/checkbox.js";
+const b = F({
   size: "md",
   expandedRows: /* @__PURE__ */ new Set(),
   toggleRow: () => {
   }
-}), D = F(
-  ({ children: s, className: l, size: n = "md", ...c }, e) => {
-    const a = L(null), [i, f] = N(!1), [h, t] = N(/* @__PURE__ */ new Set());
-    M(() => {
-      const r = a.current;
-      if (!r) return;
-      const p = () => {
-        const { scrollWidth: R, clientWidth: C } = r;
-        f(R > C);
+}), E = W(
+  ({ children: r, className: n, size: i = "md", ...d }, e) => {
+    const s = G(null), [a, f] = T(!1), [p, l] = T(/* @__PURE__ */ new Set());
+    L(() => {
+      const t = s.current;
+      if (!t) return;
+      const u = () => {
+        const { scrollWidth: R, clientWidth: N } = t;
+        f(R > N);
       };
-      p();
-      const m = new ResizeObserver(p);
-      return m.observe(r), () => {
-        m.disconnect();
+      u();
+      const h = new ResizeObserver(u);
+      return h.observe(t), () => {
+        h.disconnect();
       };
     }, []);
-    const b = (r) => {
-      t((p) => {
-        const m = new Set(p);
-        return m.has(r) ? m.delete(r) : m.add(r), m;
+    const m = (t) => {
+      l((u) => {
+        const h = new Set(u);
+        return h.has(t) ? h.delete(t) : h.add(t), h;
       });
     };
-    return /* @__PURE__ */ o(y.Provider, { value: { size: n, hasOverflow: i, expandedRows: h, toggleRow: b }, children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ o(b.Provider, { value: { size: i, hasOverflow: a, expandedRows: p, toggleRow: m }, children: /* @__PURE__ */ o(
       "div",
       {
-        ref: (r) => {
-          a.current = r, typeof e == "function" ? e(r) : e && (e.current = r);
+        ref: (t) => {
+          s.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
         },
-        ...c,
-        className: d("overflow-hidden rounded-lg bg-primary", l),
-        children: s
+        ...d,
+        className: c("overflow-hidden rounded-lg bg-primary", n),
+        children: r
       }
     ) });
   }
 );
-D.displayName = "TableCardRoot";
-const E = ({ title: s, badge: l, description: n, contentTrailing: c, className: e }) => {
-  const { size: a } = v(y);
-  return /* @__PURE__ */ u(
+E.displayName = "TableCardRoot";
+const _ = ({ title: r, badge: n, description: i, contentTrailing: d, className: e }) => {
+  const { size: s } = g(b);
+  return /* @__PURE__ */ x(
     "div",
     {
-      className: d(
-        "relative flex flex-col items-start gap-4 border-b border-border-secondary bg-primary px-4 md:flex-row",
-        a === "sm" ? "py-2 md:px-4" : "py-3 md:px-6",
+      className: c(
+        "relative flex flex-col items-start gap-4 border-b border-tertiary bg-primary px-4 md:flex-row",
+        s === "sm" ? "py-2 md:px-4" : s === "xs" ? "py-0 md:px-3" : "py-3 md:px-6",
         e
       ),
       children: [
-        /* @__PURE__ */ u("div", { className: "flex flex-1 flex-col gap-0.5", children: [
-          /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ o("h2", { className: d("font-semibold text-primary", a === "sm" ? "text-md" : "text-lg"), children: s }),
-            l ? O(l) ? l : /* @__PURE__ */ o(Y, { variant: "primary", size: "sm", children: l }) : null
+        /* @__PURE__ */ x("div", { className: "flex flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ x("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ o(
+              "h2",
+              {
+                className: c(
+                  "font-semibold text-primary",
+                  s === "sm" ? "text-md" : s === "xs" ? "text-sm" : "text-lg"
+                ),
+                children: r
+              }
+            ),
+            n ? A(n) ? n : /* @__PURE__ */ o(Y, { color: "brand", size: "sm", children: n }) : null
           ] }),
-          n && /* @__PURE__ */ o("p", { className: "text-sm text-tertiary", children: n })
+          i && /* @__PURE__ */ o("p", { className: c("text-tertiary", s === "xs" ? "text-xs" : "text-sm"), children: i })
         ] }),
-        c
+        d
       ]
     }
   );
 };
-E.displayName = "TableCardHeader";
-const j = ({ className: s, size: l = "md", isEditable: n = !1, ...c }) => {
-  const e = v(y), [a, i] = N(/* @__PURE__ */ new Set()), f = (e == null ? void 0 : e.expandedRows) ?? a, h = (e == null ? void 0 : e.toggleRow) ?? ((t) => {
-    i((b) => {
-      const r = new Set(b);
-      return r.has(t) ? r.delete(t) : r.add(t), r;
+_.displayName = "TableCardHeader";
+const j = ({ className: r, size: n = "md", isEditable: i = !1, ...d }) => {
+  const e = g(b), [s, a] = T(/* @__PURE__ */ new Set()), f = (e == null ? void 0 : e.expandedRows) ?? s, p = (e == null ? void 0 : e.toggleRow) ?? ((l) => {
+    a((m) => {
+      const t = new Set(m);
+      return t.has(l) ? t.delete(l) : t.add(l), t;
     });
   });
   return /* @__PURE__ */ o(
-    y.Provider,
+    b.Provider,
     {
       value: {
-        size: (e == null ? void 0 : e.size) ?? l,
+        size: (e == null ? void 0 : e.size) ?? n,
         hasOverflow: e == null ? void 0 : e.hasOverflow,
         expandedRows: f,
-        toggleRow: h
+        toggleRow: p
       },
-      children: n ? /* @__PURE__ */ o(
+      children: i ? /* @__PURE__ */ o(
         "div",
         {
-          onKeyDownCapture: (t) => {
+          onKeyDownCapture: (l) => {
             if ((/* @__PURE__ */ new Set([
               "ArrowLeft",
               "ArrowRight",
@@ -101,219 +110,232 @@ const j = ({ className: s, size: l = "md", isEditable: n = !1, ...c }) => {
               "PageDown",
               " "
               // space
-            ])).has(t.key)) {
-              const r = t.target;
-              r && (r.closest('[contenteditable]:not([contenteditable="false"])') || r.closest("input, textarea") || r.closest('[role="textbox"]')) && t.stopPropagation();
+            ])).has(l.key)) {
+              const t = l.target;
+              t && (t.closest('[contenteditable]:not([contenteditable="false"])') || t.closest("input, textarea") || t.closest('[role="textbox"]')) && l.stopPropagation();
             }
           },
           children: /* @__PURE__ */ o(
-            k,
+            B,
             {
-              className: (t) => d("w-full overflow-x-hidden", typeof s == "function" ? s(t) : s),
-              ...c
+              className: (l) => c(
+                "w-full overflow-x-hidden",
+                n === "xs" && "px-3 py-0",
+                typeof r == "function" ? r(l) : r
+              ),
+              ...d
             }
           )
         }
       ) : /* @__PURE__ */ o(
-        k,
+        B,
         {
-          className: (t) => d("w-full overflow-x-hidden", typeof s == "function" ? s(t) : s),
-          ...c
+          className: (l) => c(
+            "w-full overflow-x-hidden",
+            n === "xs" && "px-3 py-0",
+            typeof r == "function" ? r(l) : r
+          ),
+          ...d
         }
       )
     }
   );
 };
 j.displayName = "Table";
-const K = ({
-  columns: s,
-  children: l,
-  bordered: n = !1,
-  hasExpandableRows: c = !1,
+const q = ({
+  columns: r,
+  children: n,
+  bordered: i = !1,
+  hasExpandableRows: d = !1,
   className: e,
-  ...a
+  ...s
 }) => {
-  const { size: i } = v(y), { selectionBehavior: f, selectionMode: h } = x();
-  return /* @__PURE__ */ u(
+  const { size: a } = g(b), { selectionBehavior: f, selectionMode: p } = C();
+  return /* @__PURE__ */ x(
     X,
     {
-      ...a,
-      className: (t) => d(
+      ...s,
+      className: (l) => c(
         "sticky top-0 z-30 bg-secondary_subtle rounded-lg h-9",
         // Row border—using an "after" pseudo-element to avoid the border taking up space.
-        n && "[&>tr>th]:after:pointer-events-none [&>tr>th]:after:absolute [&>tr>th]:after:inset-x-0 [&>tr>th]:after:bottom-0 [&>tr>th]:after:h-px [&>tr>th]:after:bg-border-tertiary [&>tr>th]:focus-visible:after:bg-transparent",
-        typeof e == "function" ? e(t) : e
+        i && "[&>tr>th]:after:pointer-events-none [&>tr>th]:after:absolute [&>tr>th]:after:inset-x-0 [&>tr>th]:after:bottom-0 [&>tr>th]:after:h-px [&>tr>th]:after:bg-border-tertiary [&>tr>th]:focus-visible:after:bg-transparent",
+        typeof e == "function" ? e(l) : e
       ),
       children: [
-        c && /* @__PURE__ */ o(z, { className: d("relative p-0", i === "sm" ? "w-9" : "w-11") }),
-        f === "toggle" && /* @__PURE__ */ o(z, { className: d("relative p-0", i === "sm" ? "w-9" : "w-11"), children: h === "multiple" && /* @__PURE__ */ o("div", { className: "flex items-start", children: /* @__PURE__ */ o(P, { slot: "selection" }) }) }),
-        /* @__PURE__ */ o(A, { items: s, children: l })
+        d && /* @__PURE__ */ o(z, { className: c("relative p-0", a === "sm" || a === "xs" ? "w-9" : "w-11") }),
+        f === "toggle" && /* @__PURE__ */ o(z, { className: c("relative p-0", a === "sm" || a === "xs" ? "w-9" : "w-11"), children: p === "multiple" && /* @__PURE__ */ o("div", { className: "flex items-start", children: /* @__PURE__ */ o(D, { slot: "selection" }) }) }),
+        /* @__PURE__ */ o(P, { items: r, children: n })
       ]
     }
   );
 };
-K.displayName = "TableHeader";
-const $ = ({
-  className: s,
-  label: l,
-  children: n,
-  sticky: c,
-  stickyOffset: e = 0,
+q.displayName = "TableHeader";
+const K = ({
+  className: r,
+  tooltip: n,
+  label: i,
+  children: d,
+  sticky: e,
+  stickyOffset: s = 0,
   headerCellClass: a,
-  ...i
+  tooltipHeader: f = !1,
+  ...p
 }) => {
-  const { selectionBehavior: f } = x(), { size: h } = v(y);
+  const { selectionBehavior: l } = C(), { size: m } = g(b);
   return /* @__PURE__ */ o(
     z,
     {
-      ...i,
+      ...p,
       style: (t) => {
-        const b = c ? {
+        const u = e ? {
           position: "sticky",
-          [c]: e,
+          [e]: s,
           zIndex: 30
         } : {};
-        return { ...typeof i.style == "function" ? i.style(t) : i.style || {}, ...b };
+        return { ...typeof p.style == "function" ? p.style(t) : p.style || {}, ...u };
       },
-      className: (t) => d(
+      className: (t) => c(
         "relative p-0 outline-hidden focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-bg-primary focus-visible:ring-inset",
-        h === "sm" && "px-4 py-2",
-        h === "md" && "px-6 py-2",
-        f === "toggle" && "nth-2:pl-3",
-        c && "bg-secondary_subtle",
+        m === "xs" && "px-3 py-0",
+        m === "sm" && "px-4 py-2",
+        m === "md" && "px-6 py-2",
+        l === "toggle" && "nth-2:pl-3",
+        e && "bg-secondary",
         t.allowsSorting && "cursor-pointer",
-        typeof s == "function" ? s(t) : s
+        typeof r == "function" ? r(t) : r
       ),
-      children: (t) => /* @__PURE__ */ u(Q, { className: d("flex items-center gap-1", a), children: [
-        /* @__PURE__ */ u("div", { className: "flex items-center gap-1 overflow-hidden", children: [
-          l && /* @__PURE__ */ o("span", { className: "text-xs font-semibold whitespace-nowrap overflow-hidden text-ellipsis text-secondary", children: l }),
-          typeof n == "function" ? n(t) : n
+      children: (t) => /* @__PURE__ */ x(Q, { className: c("flex items-center gap-1", a), children: [
+        /* @__PURE__ */ x("div", { className: "flex items-center gap-1 overflow-hidden", children: [
+          i && /* @__PURE__ */ o("span", { className: "text-xs font-medium whitespace-nowrap overflow-hidden text-ellipsis text-secondary", children: i }),
+          typeof d == "function" ? d(t) : d
         ] }),
+        n && /* @__PURE__ */ o(w, { name: "HelpCircle", size: 16, className: "text-fg-quaternary" }),
         t.allowsSorting && (t.sortDirection ? /* @__PURE__ */ o(
-          S,
+          w,
           {
             name: "ArrowDown",
             size: 12,
-            className: d(
-              "stroke-[3px] text-secondary",
+            className: c(
+              "stroke-[3px] text-fg-quaternary",
               t.sortDirection === "ascending" && "rotate-180"
             )
           }
-        ) : /* @__PURE__ */ o(S, { name: "ChevronSelectorVertical", size: 12, className: "text-secondary" }))
+        ) : /* @__PURE__ */ o(w, { name: "ChevronSelectorVertical", size: 12, className: "text-fg-quaternary" }))
       ] })
     }
   );
 };
-$.displayName = "TableHead";
-const U = ({
-  columns: s,
-  children: l,
-  className: n,
-  highlightSelectedRow: c = !0,
+K.displayName = "TableHead";
+const $ = ({
+  columns: r,
+  children: n,
+  className: i,
+  highlightSelectedRow: d = !0,
   isExpandable: e = !1,
-  renderExpandedContent: a,
-  ...i
+  renderExpandedContent: s,
+  ...a
 }) => {
-  const { size: f, expandedRows: h, toggleRow: t } = v(y), { selectionBehavior: b } = x(), r = typeof i.id == "string" ? i.id : String(i.id), p = h.has(r), R = e ? /* @__PURE__ */ o(
+  const { size: f, expandedRows: p, toggleRow: l } = g(b), { selectionBehavior: m } = C(), t = typeof a.id == "string" ? a.id : String(a.id), u = p.has(t), R = e ? /* @__PURE__ */ o(
     "button",
     {
       type: "button",
-      onClick: (g) => {
-        g.stopPropagation(), t(r);
+      onClick: (y) => {
+        y.stopPropagation(), l(t);
       },
-      className: d(
+      className: c(
         "flex items-center justify-center transition-transform duration-200 ease-in-out cursor-pointer hover:bg-secondary_subtle rounded p-1 flex-shrink-0 -ml-1 mr-2",
-        p && "rotate-90"
+        u && "rotate-90"
       ),
-      "aria-label": p ? "Collapse row" : "Expand row",
-      children: /* @__PURE__ */ o(S, { name: "ChevronRight", size: 16, className: "text-secondary" })
+      "aria-label": u ? "Collapse row" : "Expand row",
+      children: /* @__PURE__ */ o(w, { name: "ChevronRight", size: 16, className: "text-secondary" })
     }
-  ) : null, C = e ? (() => {
-    const g = q.toArray(l);
-    if (g.length > 0 && O(g[0])) {
-      const H = g[0], _ = H.props;
+  ) : null, N = e ? (() => {
+    const y = M.toArray(n);
+    if (y.length > 0 && A(y[0])) {
+      const H = y[0], k = H.props;
       return [
         I(H, {
-          ..._,
-          children: /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+          ...k,
+          children: /* @__PURE__ */ x("div", { className: "flex items-center gap-2", children: [
             R,
-            _.children
+            k.children
           ] })
         }),
-        ...g.slice(1)
+        ...y.slice(1)
       ];
     }
-    return l;
-  })() : l;
-  return /* @__PURE__ */ u(W, { children: [
-    /* @__PURE__ */ u(
-      B,
+    return n;
+  })() : n;
+  return /* @__PURE__ */ x(V, { children: [
+    /* @__PURE__ */ x(
+      O,
       {
-        ...i,
-        className: (g) => d(
+        ...a,
+        className: (y) => c(
           "relative outline-focus-ring transition-colors after:pointer-events-none hover:bg-secondary_subtle focus-visible:outline-2 focus-visible:-outline-offset-2",
-          f === "sm" ? "h-12" : "h-18",
-          c && "selected:bg-secondary",
+          f === "xs" ? "h-10" : f === "sm" ? "h-12" : f === "md" ? "h-18" : "h-10",
+          d && "selected:bg-secondary",
           // Row border—using an "after" pseudo-element to avoid the border taking up space.
-          !p && "[&>td]:after:absolute [&>td]:after:inset-x-0 [&>td]:after:bottom-0 [&>td]:after:h-px [&>td]:after:w-full [&>td]:after:bg-border-tertiary last:[&>td]:after:hidden [&>td]:focus-visible:after:opacity-0 focus-visible:[&>td]:after:opacity-0",
-          typeof n == "function" ? n(g) : n
+          !u && "[&>td]:after:absolute [&>td]:after:inset-x-0 [&>td]:after:bottom-0 [&>td]:after:h-px [&>td]:after:w-full [&>td]:after:bg-border-tertiary last:[&>td]:after:hidden [&>td]:focus-visible:after:opacity-0 focus-visible:[&>td]:after:opacity-0",
+          typeof i == "function" ? i(y) : i
         ),
         children: [
-          b === "toggle" && /* @__PURE__ */ o(T, { className: d("relative p-0", f === "sm" ? "w-9" : "w-11"), children: /* @__PURE__ */ o("div", { className: "flex items-end", children: /* @__PURE__ */ o(P, { className: "hidden", slot: "selection" }) }) }),
-          /* @__PURE__ */ o(A, { items: s, children: C })
+          m === "toggle" && /* @__PURE__ */ o(S, { className: c("relative p-0", f === "sm" || f === "xs" ? "w-9" : "w-11"), children: /* @__PURE__ */ o("div", { className: "flex items-end", children: /* @__PURE__ */ o(D, { className: "hidden", slot: "selection" }) }) }),
+          /* @__PURE__ */ o(P, { items: r, children: N })
         ]
       }
     ),
-    e && p && a && /* @__PURE__ */ o(B, { id: `${r}-expanded`, className: "relative bg-secondary_hover", children: /* @__PURE__ */ o(
-      T,
+    e && u && s && /* @__PURE__ */ o(O, { id: `${t}-expanded`, className: "relative bg-secondary_subtle", children: /* @__PURE__ */ o(
+      S,
       {
         className: "p-0",
-        colSpan: (s == null ? void 0 : s.length) || 0,
-        children: /* @__PURE__ */ o("div", { className: d("w-full"), children: a(i.value) })
+        colSpan: (r == null ? void 0 : r.length) || 0,
+        children: /* @__PURE__ */ o("div", { className: c("w-full"), children: s(a.value) })
       }
     ) })
   ] });
 };
-U.displayName = "TableRow";
-const V = ({ className: s, children: l, sticky: n, stickyOffset: c = 0, ...e }) => {
-  const { size: a } = v(y), { selectionBehavior: i } = x();
+$.displayName = "TableRow";
+const U = ({ className: r, children: n, sticky: i, stickyOffset: d = 0, ...e }) => {
+  const { size: s } = g(b), { selectionBehavior: a } = C();
   return /* @__PURE__ */ o(
-    T,
+    S,
     {
       ...e,
       style: (f) => {
-        const h = n ? {
+        const p = i ? {
           position: "sticky",
-          [n]: c,
-          zIndex: 20
+          [i]: d,
+          zIndex: 20,
+          backgroundColor: "white",
+          boxShadow: i === "right" ? "inset 2px 0 0px 0px var(--color-border-tertiary)" : "inset -2px 0 0px 0px var(--color-border-tertiary)"
         } : {};
-        return { ...typeof e.style == "function" ? e.style(f) : e.style || {}, ...h };
+        return { ...typeof e.style == "function" ? e.style(f) : e.style || {}, ...p };
       },
-      className: (f) => d(
-        "relative text-sm text-secondary outline-focus-ring focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2",
-        a === "sm" && "p-0 px-4 py-2",
-        a === "md" && "p-0 px-6 py-2",
-        i === "toggle" && "nth-2:pl-3",
-        n === "left" && "before:absolute before:top-0 before:right-0 before:h-full before:shadow-[4px_0_8px_2px_rgba(0,0,0,0.15)]",
-        n === "right" && "z-[2000] bg-white hover:bg-inherit before:absolute before:top-0 before:left-0 before:h-full before:shadow-[-4px_0_8px_2px_rgba(0,0,0,0.15)]",
-        typeof s == "function" ? s(f) : s
+      className: (f) => c(
+        "relative text-secondary outline-focus-ring focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2",
+        s === "xs" && "p-0 px-3 py-0 text-xs",
+        s === "sm" && "p-0 px-4 py-2 text-sm",
+        s === "md" && "p-0 px-6 py-2 text-base",
+        a === "toggle" && "nth-2:pl-3",
+        typeof r == "function" ? r(f) : r
       ),
-      children: l
+      children: n
     }
   );
 };
-V.displayName = "TableCell";
+U.displayName = "TableCell";
 const le = {
-  Root: D,
-  Header: E
-}, w = j;
-w.Body = J;
-w.Cell = V;
-w.Head = $;
-w.Header = K;
-w.Row = U;
+  Root: E,
+  Header: _
+}, v = j;
+v.Body = J;
+v.Cell = U;
+v.Head = K;
+v.Header = q;
+v.Row = $;
 export {
-  w as Table,
+  v as Table,
   le as TableCard,
-  V as TableCell
+  U as TableCell
 };

package/dist/patterns/tree-view/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeView, buildTreeViewNodes, type TreeViewNode, type TreeViewProps, type TreeViewBuildConfig } from './tree-view';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/tree-view/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,aAAa,CAAC"}

package/dist/patterns/tree-view/tree-view.d.ts

@@ -0,0 +1,61 @@
+export interface TreeViewNode {
+    id: string;
+    label: string;
+    type: string;
+    children: TreeViewNode[];
+    metadata?: any;
+    isOpen?: boolean;
+    [key: string]: any;
+}
+export interface TreeViewProps {
+    /** Raw data array. The component converts it internally using `config`. */
+    data: Record<string, any>[];
+    /** Config that tells the component how to read your raw data. */
+    config: TreeViewBuildConfig;
+    /** Component to render the content area of each row (icon, label, etc.) */
+    CustomNode: React.FC<{
+        node: TreeViewNode;
+        isSelected: boolean;
+    }>;
+    /** Called when a parent row (with children) is clicked */
+    onNodeClick?: (node: TreeViewNode) => void;
+    /** ID of the currently selected node */
+    selectedNodeId?: string | null;
+    /** Show search input above the tree */
+    showSearch?: boolean;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Class name(s) for the search wrapper (container around the input) */
+    searchClassName?: string;
+    /** Class name(s) for the search input element */
+    searchInputClassName?: string;
+}
+/**
+ * Config for building TreeViewNode[] from arbitrary data.
+ * Tells the build function which keys to use for label, children, and where to store the original node data.
+ */
+export interface TreeViewBuildConfig {
+    /** Key in each source item that holds the node label */
+    labelKey: string;
+    /** Key in each source item that holds the children array */
+    childrenKey: string;
+    /** Key on the built node where the original source item is stored (default: "metadata") */
+    dataKey?: string;
+    /** Key in each source item for type (default: "type") */
+    typeKey?: string;
+    /** Key in each source item for id; if missing, a path-based id is generated */
+    idKey?: string;
+    /** Optional max depth to traverse (default: no limit) */
+    maxDepth?: number;
+}
+/**
+ * Converts any array of items into TreeViewNode[] using the given config.
+ * Uses config.labelKey for the label, config.childrenKey for the children array,
+ * and stores the original item on each node under config.dataKey (default "metadata").
+ */
+export declare function buildTreeViewNodes<T extends Record<string, any>>(data: T[], config: TreeViewBuildConfig, parentPath?: string): TreeViewNode[];
+export declare const TreeView: {
+    ({ data, config, CustomNode, onNodeClick, selectedNodeId, showSearch, searchPlaceholder, searchClassName, searchInputClassName, }: TreeViewProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=tree-view.d.ts.map

package/dist/patterns/tree-view/tree-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree-view/tree-view.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC1B,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC5B,iEAAiE;IACjE,MAAM,EAAE,mBAAmB,CAAC;IAC5B,2EAA2E;IAC3E,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,YAAY,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAClE,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,wCAAwC;IACxC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wEAAwE;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iDAAiD;IACjD,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAChC,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,WAAW,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAID;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC5D,IAAI,EAAE,CAAC,EAAE,EACT,MAAM,EAAE,mBAAmB,EAC3B,UAAU,GAAE,MAAW,GACxB,YAAY,EAAE,CAuChB;AAqBD,eAAO,MAAM,QAAQ;uIAUlB,aAAa;;CAuDf,CAAC"}