@hex-core/components 1.4.0 → 1.6.0

package/dist/tree.js

@@ -0,0 +1,275 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function flattenVisible(nodes, expanded) {
+  const out = [];
+  function walk(items, depth, parentId) {
+    for (const node of items) {
+      out.push({ node, depth, parentId });
+      if (node.children && expanded.has(node.id)) {
+        walk(node.children, depth + 1, node.id);
+      }
+    }
+  }
+  walk(nodes, 0, null);
+  return out;
+}
+function Tree({
+  data,
+  defaultExpanded,
+  expanded: expandedProp,
+  onExpandedChange,
+  selected: selectedProp,
+  onSelect,
+  "aria-label": ariaLabel,
+  className,
+  ref
+}) {
+  const [internalExpanded, setInternalExpanded] = React.useState(
+    () => new Set(defaultExpanded ?? [])
+  );
+  const expanded = React.useMemo(
+    () => expandedProp ? new Set(expandedProp) : internalExpanded,
+    [expandedProp, internalExpanded]
+  );
+  const [internalSelected, setInternalSelected] = React.useState(null);
+  const selected = selectedProp ?? internalSelected;
+  const visible = React.useMemo(() => flattenVisible(data, expanded), [data, expanded]);
+  const [focusedId, setFocusedId] = React.useState(
+    () => visible[0]?.node.id ?? null
+  );
+  React.useEffect(() => {
+    if (focusedId && !visible.some((row) => row.node.id === focusedId)) {
+      setFocusedId(visible[0]?.node.id ?? null);
+    }
+  }, [visible, focusedId]);
+  const setExpandedSet = React.useCallback(
+    (next) => {
+      if (expandedProp) {
+        onExpandedChange?.([...next]);
+      } else {
+        setInternalExpanded(next);
+        onExpandedChange?.([...next]);
+      }
+    },
+    [expandedProp, onExpandedChange]
+  );
+  const toggleExpand = React.useCallback(
+    (id) => {
+      const next = new Set(expanded);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      setExpandedSet(next);
+    },
+    [expanded, setExpandedSet]
+  );
+  const activate = React.useCallback(
+    (id) => {
+      if (selectedProp === void 0) setInternalSelected(id);
+      onSelect?.(id);
+    },
+    [selectedProp, onSelect]
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (!focusedId) return;
+      const idx = visible.findIndex((row2) => row2.node.id === focusedId);
+      if (idx < 0) return;
+      const row = visible[idx];
+      if (!row) return;
+      const node = row.node;
+      const isParent = !!node.children;
+      const isExpanded = expanded.has(node.id);
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const next = visible[idx + 1];
+          if (next) setFocusedId(next.node.id);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const prev = visible[idx - 1];
+          if (prev) setFocusedId(prev.node.id);
+          break;
+        }
+        case "ArrowRight": {
+          e.preventDefault();
+          if (isParent && !isExpanded) toggleExpand(node.id);
+          else if (isParent && isExpanded) {
+            const next = visible[idx + 1];
+            if (next) setFocusedId(next.node.id);
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          e.preventDefault();
+          if (isParent && isExpanded) toggleExpand(node.id);
+          else if (row.parentId) {
+            setFocusedId(row.parentId);
+          }
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          if (visible[0]) setFocusedId(visible[0].node.id);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const last = visible[visible.length - 1];
+          if (last) setFocusedId(last.node.id);
+          break;
+        }
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          if (node.disabled) return;
+          if (isParent) toggleExpand(node.id);
+          activate(node.id);
+          break;
+        }
+        default:
+          return;
+      }
+    },
+    [focusedId, visible, expanded, toggleExpand, activate]
+  );
+  const isSelectable = onSelect !== void 0 || selectedProp !== void 0;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref,
+      role: "tree",
+      "aria-label": ariaLabel,
+      className: cn("flex flex-col text-sm text-foreground", className),
+      onKeyDown: handleKeyDown,
+      children: data.map((node) => /* @__PURE__ */ jsx(
+        TreeItem,
+        {
+          node,
+          depth: 0,
+          expanded,
+          selected,
+          isSelectable,
+          focusedId,
+          onFocus: setFocusedId,
+          onToggleExpand: toggleExpand,
+          onActivate: activate
+        },
+        node.id
+      ))
+    }
+  );
+}
+function TreeItem({
+  node,
+  depth,
+  expanded,
+  selected,
+  isSelectable,
+  focusedId,
+  onFocus,
+  onToggleExpand,
+  onActivate
+}) {
+  const children = node.children;
+  const isParent = children !== void 0;
+  const isExpanded = expanded.has(node.id);
+  const isSelected = selected === node.id;
+  const isFocused = focusedId === node.id;
+  const handleClick = () => {
+    if (node.disabled) return;
+    onFocus(node.id);
+    if (isParent) onToggleExpand(node.id);
+    onActivate(node.id);
+  };
+  const labelId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      role: "treeitem",
+      "aria-labelledby": labelId,
+      "aria-level": depth + 1,
+      "aria-expanded": isParent ? isExpanded : void 0,
+      "aria-selected": isSelectable ? isSelected : void 0,
+      "aria-disabled": node.disabled || void 0,
+      tabIndex: isFocused ? 0 : -1,
+      onClick: (e) => {
+        e.stopPropagation();
+        handleClick();
+      },
+      onFocus: (e) => {
+        e.stopPropagation();
+        if (!node.disabled) onFocus(node.id);
+      },
+      className: cn(
+        "outline-none rounded-sm",
+        // H1: focus-visible-driven ring (NOT state-driven) — the ring
+        // only shows on keyboard focus, not on mouse clicks.
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex cursor-pointer select-none items-center gap-[var(--gap-xs,0.25rem)] rounded-sm px-[var(--space-2,0.5rem)] py-[var(--space-1,0.25rem)]",
+              "transition-colors duration-[var(--duration-normal,200ms)] ease-out",
+              "hover:bg-accent hover:text-accent-foreground",
+              isSelected && "bg-accent text-accent-foreground font-medium",
+              node.disabled && "cursor-not-allowed opacity-50"
+            ),
+            style: { paddingLeft: `calc(${depth} * var(--space-4, 1rem) + var(--space-2, 0.5rem))` },
+            children: [
+              isParent ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex h-4 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: cn(
+                    "h-3 w-3 transition-transform duration-[var(--duration-normal,200ms)] ease-out",
+                    isExpanded ? "rotate-90" : "rotate-0"
+                  ),
+                  children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+                }
+              ) }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-block h-4 w-4 shrink-0" }),
+              node.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex h-4 w-4 shrink-0 items-center justify-center [&_svg]:size-4", children: node.icon }) : null,
+              /* @__PURE__ */ jsx("span", { id: labelId, className: "truncate", children: node.label })
+            ]
+          }
+        ),
+        isParent && isExpanded && children ? /* @__PURE__ */ jsx("ul", { role: "group", "aria-labelledby": labelId, className: "flex flex-col", children: children.map((child) => /* @__PURE__ */ jsx(
+          TreeItem,
+          {
+            node: child,
+            depth: depth + 1,
+            expanded,
+            selected,
+            isSelectable,
+            focusedId,
+            onFocus,
+            onToggleExpand,
+            onActivate
+          },
+          child.id
+        )) }) : null
+      ]
+    }
+  );
+}
+
+export { Tree };
+//# sourceMappingURL=tree.js.map
+//# sourceMappingURL=tree.js.map

package/dist/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/tree/tree.tsx"],"names":["row"],"mappings":"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","file":"tree.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/**\n * One node in a Tree. Generic — the shape is content-agnostic so consumers\n * can render org charts, taxonomy pickers, navigation trees, etc.\n *\n * For filesystem-shaped data (with file-extension icon logic baked in),\n * prefer {@link FileTree} instead.\n */\nexport interface TreeNode {\n\t/** Stable unique id used as React key + ARIA target. */\n\tid: string;\n\t/** Display name. */\n\tlabel: React.ReactNode;\n\t/** Nested children. Presence (even empty array) marks the node as a parent. */\n\tchildren?: TreeNode[];\n\t/** Optional icon (default: a chevron + dot). */\n\ticon?: React.ReactNode;\n\t/** Disable selection + expand toggle. */\n\tdisabled?: boolean;\n}\n\nexport interface TreeProps {\n\t/** Forwarded ref onto the root `<ul role=\"tree\">`. */\n\tref?: React.Ref<HTMLUListElement>;\n\t/** Root nodes. */\n\tdata: TreeNode[];\n\t/** Uncontrolled initial expanded ids. */\n\tdefaultExpanded?: string[];\n\t/** Controlled expanded ids. */\n\texpanded?: string[];\n\t/** Fired when expanded set changes (array of ids). */\n\tonExpandedChange?: (ids: string[]) => void;\n\t/** Controlled selected node id. */\n\tselected?: string;\n\t/** Fired when the user activates a node (click, Enter, or Space). */\n\tonSelect?: (id: string) => void;\n\t/** Required accessible name. */\n\t\"aria-label\": string;\n\t/** Optional additional class names. */\n\tclassName?: string;\n}\n\n/** Recursively flatten a tree into the visible-row order (respecting collapsed parents). */\nfunction flattenVisible(nodes: TreeNode[], expanded: Set<string>): Array<{ node: TreeNode; depth: number; parentId: string | null }> {\n\tconst out: Array<{ node: TreeNode; depth: number; parentId: string | null }> = [];\n\tfunction walk(items: TreeNode[], depth: number, parentId: string | null) {\n\t\tfor (const node of items) {\n\t\t\tout.push({ node, depth, parentId });\n\t\t\tif (node.children && expanded.has(node.id)) {\n\t\t\t\twalk(node.children, depth + 1, node.id);\n\t\t\t}\n\t\t}\n\t}\n\twalk(nodes, 0, null);\n\treturn out;\n}\n\n/**\n * Generic hierarchical list with roving-tabindex keyboard navigation —\n * arrow keys move focus, → expands, ← collapses, Home / End jump to\n * first / last visible row, Enter / Space activates the focused node.\n *\n * Distinct from {@link FileTree} (which adds folder/file icon-by-extension\n * logic baked in) and {@link Accordion} (two-level groupings without\n * item-selection semantics).\n *\n * @example\n * ```tsx\n * <Tree\n *   aria-label=\"Org chart\"\n *   data={[\n *     { id: \"ceo\", label: \"CEO\", children: [\n *       { id: \"cto\", label: \"CTO\", children: [\n *         { id: \"eng-lead\", label: \"Eng Lead\" },\n *       ]},\n *       { id: \"cmo\", label: \"CMO\" },\n *     ]},\n *   ]}\n *   defaultExpanded={[\"ceo\"]}\n *   onSelect={(id) => console.log(id)}\n * />\n * ```\n */\nfunction Tree({\n\tdata,\n\tdefaultExpanded,\n\texpanded: expandedProp,\n\tonExpandedChange,\n\tselected: selectedProp,\n\tonSelect,\n\t\"aria-label\": ariaLabel,\n\tclassName,\n\tref,\n}: TreeProps) {\n\tconst [internalExpanded, setInternalExpanded] = React.useState<Set<string>>(\n\t\t() => new Set(defaultExpanded ?? []),\n\t);\n\tconst expanded = React.useMemo(\n\t\t() => (expandedProp ? new Set(expandedProp) : internalExpanded),\n\t\t[expandedProp, internalExpanded],\n\t);\n\n\t\tconst [internalSelected, setInternalSelected] = React.useState<string | null>(null);\n\t\tconst selected = selectedProp ?? internalSelected;\n\n\t\tconst visible = React.useMemo(() => flattenVisible(data, expanded), [data, expanded]);\n\n\t\tconst [focusedId, setFocusedId] = React.useState<string | null>(\n\t\t\t() => visible[0]?.node.id ?? null,\n\t\t);\n\n\t\t// If the focused node disappeared (parent collapsed), retarget to the parent.\n\t\tReact.useEffect(() => {\n\t\t\tif (focusedId && !visible.some((row) => row.node.id === focusedId)) {\n\t\t\t\tsetFocusedId(visible[0]?.node.id ?? null);\n\t\t\t}\n\t\t}, [visible, focusedId]);\n\n\t\tconst setExpandedSet = React.useCallback(\n\t\t\t(next: Set<string>) => {\n\t\t\t\tif (expandedProp) {\n\t\t\t\t\tonExpandedChange?.([...next]);\n\t\t\t\t} else {\n\t\t\t\t\tsetInternalExpanded(next);\n\t\t\t\t\tonExpandedChange?.([...next]);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[expandedProp, onExpandedChange],\n\t\t);\n\n\t\tconst toggleExpand = React.useCallback(\n\t\t\t(id: string) => {\n\t\t\t\tconst next = new Set(expanded);\n\t\t\t\tif (next.has(id)) next.delete(id);\n\t\t\t\telse next.add(id);\n\t\t\t\tsetExpandedSet(next);\n\t\t\t},\n\t\t\t[expanded, setExpandedSet],\n\t\t);\n\n\t\tconst activate = React.useCallback(\n\t\t\t(id: string) => {\n\t\t\t\tif (selectedProp === undefined) setInternalSelected(id);\n\t\t\t\tonSelect?.(id);\n\t\t\t},\n\t\t\t[selectedProp, onSelect],\n\t\t);\n\n\t\tconst handleKeyDown = React.useCallback(\n\t\t\t(e: React.KeyboardEvent<HTMLUListElement>) => {\n\t\t\t\tif (!focusedId) return;\n\t\t\t\tconst idx = visible.findIndex((row) => row.node.id === focusedId);\n\t\t\t\tif (idx < 0) return;\n\t\t\t\tconst row = visible[idx];\n\t\t\t\tif (!row) return;\n\t\t\t\tconst node = row.node;\n\t\t\t\tconst isParent = !!node.children;\n\t\t\t\tconst isExpanded = expanded.has(node.id);\n\n\t\t\t\tswitch (e.key) {\n\t\t\t\t\tcase \"ArrowDown\": {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tconst next = visible[idx + 1];\n\t\t\t\t\t\tif (next) setFocusedId(next.node.id);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\tcase \"ArrowUp\": {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tconst prev = visible[idx - 1];\n\t\t\t\t\t\tif (prev) setFocusedId(prev.node.id);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\tcase \"ArrowRight\": {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tif (isParent && !isExpanded) toggleExpand(node.id);\n\t\t\t\t\t\telse if (isParent && isExpanded) {\n\t\t\t\t\t\t\tconst next = visible[idx + 1];\n\t\t\t\t\t\t\tif (next) setFocusedId(next.node.id);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\tcase \"ArrowLeft\": {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tif (isParent && isExpanded) toggleExpand(node.id);\n\t\t\t\t\t\telse if (row.parentId) {\n\t\t\t\t\t\t\tsetFocusedId(row.parentId);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\tcase \"Home\": {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tif (visible[0]) setFocusedId(visible[0].node.id);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\tcase \"End\": {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tconst last = visible[visible.length - 1];\n\t\t\t\t\t\tif (last) setFocusedId(last.node.id);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\tcase \" \": {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tif (node.disabled) return;\n\t\t\t\t\t\tif (isParent) toggleExpand(node.id);\n\t\t\t\t\t\tactivate(node.id);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\tdefault:\n\t\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t},\n\t\t\t[focusedId, visible, expanded, toggleExpand, activate],\n\t\t);\n\n\t// H3: emit boolean aria-selected when selection is wired (so AT can\n\t// announce \"1 of N, not selected\" on non-selected items); leave it\n\t// undefined entirely when nothing on the tree is selectable.\n\tconst isSelectable = onSelect !== undefined || selectedProp !== undefined;\n\n\treturn (\n\t\t<ul\n\t\t\tref={ref}\n\t\t\trole=\"tree\"\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={cn(\"flex flex-col text-sm text-foreground\", className)}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t>\n\t\t\t{data.map((node) => (\n\t\t\t\t<TreeItem\n\t\t\t\t\tkey={node.id}\n\t\t\t\t\tnode={node}\n\t\t\t\t\tdepth={0}\n\t\t\t\t\texpanded={expanded}\n\t\t\t\t\tselected={selected}\n\t\t\t\t\tisSelectable={isSelectable}\n\t\t\t\t\tfocusedId={focusedId}\n\t\t\t\t\tonFocus={setFocusedId}\n\t\t\t\t\tonToggleExpand={toggleExpand}\n\t\t\t\t\tonActivate={activate}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</ul>\n\t);\n}\n\ninterface TreeItemProps {\n\tnode: TreeNode;\n\tdepth: number;\n\texpanded: Set<string>;\n\tselected: string | null;\n\tisSelectable: boolean;\n\tfocusedId: string | null;\n\tonFocus: (id: string) => void;\n\tonToggleExpand: (id: string) => void;\n\tonActivate: (id: string) => void;\n}\n\n/** One row inside a Tree. Recurses through children when expanded. */\nfunction TreeItem({\n\tnode,\n\tdepth,\n\texpanded,\n\tselected,\n\tisSelectable,\n\tfocusedId,\n\tonFocus,\n\tonToggleExpand,\n\tonActivate,\n}: TreeItemProps) {\n\tconst children = node.children;\n\tconst isParent = children !== undefined;\n\tconst isExpanded = expanded.has(node.id);\n\tconst isSelected = selected === node.id;\n\tconst isFocused = focusedId === node.id;\n\n\tconst handleClick = () => {\n\t\tif (node.disabled) return;\n\t\tonFocus(node.id);\n\t\tif (isParent) onToggleExpand(node.id);\n\t\tonActivate(node.id);\n\t};\n\n\tconst labelId = React.useId();\n\treturn (\n\t\t<li\n\t\t\trole=\"treeitem\"\n\t\t\taria-labelledby={labelId}\n\t\t\taria-level={depth + 1}\n\t\t\taria-expanded={isParent ? isExpanded : undefined}\n\t\t\t// H3: when the tree is selectable (caller wired onSelect or\n\t\t\t// selected), emit boolean aria-selected on every item — AT\n\t\t\t// announces \"1 of N, not selected\" instead of dropping the\n\t\t\t// attribute entirely. When nothing is selectable, leave it off.\n\t\t\taria-selected={isSelectable ? isSelected : undefined}\n\t\t\taria-disabled={node.disabled || undefined}\n\t\t\ttabIndex={isFocused ? 0 : -1}\n\t\t\tonClick={(e) => {\n\t\t\t\t// Stop bubbling so a parent treeitem doesn't refire on a\n\t\t\t\t// nested-child click — each li carries its own click handler.\n\t\t\t\te.stopPropagation();\n\t\t\t\thandleClick();\n\t\t\t}}\n\t\t\tonFocus={(e) => {\n\t\t\t\t// stopPropagation prevents the parent treeitem's onFocus from\n\t\t\t\t// also firing when a deeper child gains focus, racing the\n\t\t\t\t// focusedId state. Side effect: focus-trap libraries listening\n\t\t\t\t// at a wrapping container don't see nested-tree focus events.\n\t\t\t\t// In practice tree-inside-Drawer / Dialog still works because\n\t\t\t\t// those focus traps activate on outer focusin, not inner.\n\t\t\t\te.stopPropagation();\n\t\t\t\tif (!node.disabled) onFocus(node.id);\n\t\t\t}}\n\t\t\tclassName={cn(\n\t\t\t\t\"outline-none rounded-sm\",\n\t\t\t\t// H1: focus-visible-driven ring (NOT state-driven) — the ring\n\t\t\t\t// only shows on keyboard focus, not on mouse clicks.\n\t\t\t\t\"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n\t\t\t)}\n\t\t>\n\t\t\t{/*\n\t\t\t  Row element — visible surface. Style only; the li carries the\n\t\t\t  interactivity + focus + ARIA. aria-hidden on chevron + icon\n\t\t\t  spans keeps the accessible name pinned to the labelled\n\t\t\t  <span id={labelId}>.\n\t\t\t*/}\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex cursor-pointer select-none items-center gap-[var(--gap-xs,0.25rem)] rounded-sm px-[var(--space-2,0.5rem)] py-[var(--space-1,0.25rem)]\",\n\t\t\t\t\t\"transition-colors duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\t\"hover:bg-accent hover:text-accent-foreground\",\n\t\t\t\t\tisSelected && \"bg-accent text-accent-foreground font-medium\",\n\t\t\t\t\tnode.disabled && \"cursor-not-allowed opacity-50\",\n\t\t\t\t)}\n\t\t\t\tstyle={{ paddingLeft: `calc(${depth} * var(--space-4, 1rem) + var(--space-2, 0.5rem))` }}\n\t\t\t>\n\t\t\t\t{isParent ? (\n\t\t\t\t\t<span aria-hidden=\"true\" className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"h-3 w-3 transition-transform duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\t\t\t\tisExpanded ? \"rotate-90\" : \"rotate-0\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<polyline points=\"9 18 15 12 9 6\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<span aria-hidden=\"true\" className=\"inline-block h-4 w-4 shrink-0\" />\n\t\t\t\t)}\n\t\t\t\t{node.icon ? (\n\t\t\t\t\t<span aria-hidden=\"true\" className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center [&_svg]:size-4\">\n\t\t\t\t\t\t{node.icon}\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t\t<span id={labelId} className=\"truncate\">\n\t\t\t\t\t{node.label}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t{isParent && isExpanded && children ? (\n\t\t\t\t<ul role=\"group\" aria-labelledby={labelId} className=\"flex flex-col\">\n\t\t\t\t\t{children.map((child) => (\n\t\t\t\t\t\t<TreeItem\n\t\t\t\t\t\t\tkey={child.id}\n\t\t\t\t\t\t\tnode={child}\n\t\t\t\t\t\t\tdepth={depth + 1}\n\t\t\t\t\t\t\texpanded={expanded}\n\t\t\t\t\t\t\tselected={selected}\n\t\t\t\t\t\t\tisSelectable={isSelectable}\n\t\t\t\t\t\t\tfocusedId={focusedId}\n\t\t\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\t\t\tonToggleExpand={onToggleExpand}\n\t\t\t\t\t\t\tonActivate={onActivate}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t) : null}\n\t\t</li>\n\t);\n}\n\nexport { Tree };\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hex-core/components",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "AI-native React components for Hex UI — Radix UI + Tailwind CSS with machine-readable schemas. RSC-aware per-component bundles + tree-shakable.",
   "keywords": [
     "react",
@@ -77,12 +77,16 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-toolbar": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "shiki": "^4.0.2",
+    "streamdown": "^2.5.0",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
+    "@microsoft/api-extractor": "^7.58.7",
     "@tanstack/react-table": "^8.21.3",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

package/dist/button-variants-Bx6gCUFp.d.ts

@@ -1,19 +0,0 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-
-/**
- * CVA variants for the Button component.
- *
- * Lives in its own module so RSC-safe consumers (`Pagination`, future
- * link-styled buttons in static layouts) can import variants without
- * pulling in the full `Button` runtime — `Button` itself is client-only
- * because of `Slot` + `forwardRef` + the loading spinner. Splitting the
- * variants out keeps `dist/pagination.js` free of `@radix-ui/react-slot`.
- */
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "link" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
-
-export { type ButtonVariantsProps as B, buttonVariants as b };