@prototyperco/ui 0.5.0-alpha.0 → 0.5.0

package/dist/components/tree-view.js

@@ -0,0 +1,435 @@
+"use client";
+
+// src/components/tree-view.tsx
+import * as React from "react";
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+import { ChevronRightIcon } from "lucide-react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/tree-view.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var TreeViewContext = React.createContext(null);
+function useTreeView() {
+  const ctx = React.useContext(TreeViewContext);
+  if (!ctx)
+    throw new Error("TreeView components must be used within a <TreeView>");
+  return ctx;
+}
+var DepthContext = React.createContext(0);
+function useControllableSet(controlledValue, onChange, defaultValue) {
+  const [internal, setInternal] = React.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internal;
+  const setValue = React.useCallback(
+    (updater) => {
+      if (isControlled) {
+        onChange?.(updater(value));
+      } else {
+        setInternal((prev) => {
+          const next = updater(prev);
+          onChange?.(next);
+          return next;
+        });
+      }
+    },
+    [isControlled, onChange, value]
+  );
+  return [value, setValue];
+}
+function TreeView({
+  className,
+  expandedKeys: controlledExpandedKeys,
+  onExpandedKeysChange,
+  defaultExpandedKeys,
+  defaultExpandAll = false,
+  children,
+  ...props
+}) {
+  const itemsRef = React.useRef(/* @__PURE__ */ new Map());
+  const [allKeysCollected, setAllKeysCollected] = React.useState(false);
+  const pendingKeysRef = React.useRef(/* @__PURE__ */ new Set());
+  const resolvedDefault = React.useMemo(
+    () => defaultExpandedKeys ?? /* @__PURE__ */ new Set(),
+    []
+  );
+  const [expandedKeys, setExpandedKeys] = useControllableSet(
+    controlledExpandedKeys,
+    onExpandedKeysChange,
+    resolvedDefault
+  );
+  React.useEffect(() => {
+    if (defaultExpandAll && !allKeysCollected) {
+      setAllKeysCollected(true);
+      if (pendingKeysRef.current.size > 0) {
+        setExpandedKeys((prev) => {
+          const next = new Set(prev);
+          pendingKeysRef.current.forEach((k) => next.add(k));
+          return next;
+        });
+      }
+    }
+  }, [defaultExpandAll, allKeysCollected, setExpandedKeys]);
+  const toggle = React.useCallback(
+    (key) => {
+      setExpandedKeys((prev) => {
+        const next = new Set(prev);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          next.add(key);
+        }
+        return next;
+      });
+    },
+    [setExpandedKeys]
+  );
+  const expand = React.useCallback(
+    (key) => {
+      setExpandedKeys((prev) => {
+        if (prev.has(key)) return prev;
+        const next = new Set(prev);
+        next.add(key);
+        return next;
+      });
+    },
+    [setExpandedKeys]
+  );
+  const collapse = React.useCallback(
+    (key) => {
+      setExpandedKeys((prev) => {
+        if (!prev.has(key)) return prev;
+        const next = new Set(prev);
+        next.delete(key);
+        return next;
+      });
+    },
+    [setExpandedKeys]
+  );
+  const registerItem = React.useCallback(
+    (id, element, parentId) => {
+      itemsRef.current.set(id, { element, parentId });
+      if (defaultExpandAll && !allKeysCollected) {
+        pendingKeysRef.current.add(id);
+      }
+    },
+    [defaultExpandAll, allKeysCollected]
+  );
+  const unregisterItem = React.useCallback((id) => {
+    itemsRef.current.delete(id);
+  }, []);
+  const focusItem = React.useCallback((id) => {
+    const entry = itemsRef.current.get(id);
+    if (entry) {
+      entry.element.focus();
+    }
+  }, []);
+  const getParentId = React.useCallback((id) => {
+    const entry = itemsRef.current.get(id);
+    return entry?.parentId ?? null;
+  }, []);
+  const getFirstChildId = React.useCallback(
+    (id) => {
+      if (!expandedKeys.has(id)) return null;
+      for (const [childId, entry] of itemsRef.current) {
+        if (entry.parentId === id) return childId;
+      }
+      return null;
+    },
+    [expandedKeys]
+  );
+  const getVisibleItems = React.useCallback(() => {
+    const rootEl = rootRef.current;
+    if (!rootEl) return [];
+    const allEls = rootEl.querySelectorAll(
+      "[data-slot='tree-view-item'], [data-slot='tree-view-leaf']"
+    );
+    const visible = [];
+    allEls.forEach((el) => {
+      const id = el.dataset.treeId;
+      if (id && el.offsetParent !== null) {
+        visible.push(id);
+      }
+    });
+    return visible;
+  }, []);
+  const rootRef = React.useRef(null);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      const target = e.target;
+      const treeId = target.dataset.treeId;
+      if (!treeId) return;
+      const visible = getVisibleItems();
+      const currentIndex = visible.indexOf(treeId);
+      if (currentIndex === -1) return;
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const nextId = visible[currentIndex + 1];
+          if (nextId) focusItem(nextId);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const prevId = visible[currentIndex - 1];
+          if (prevId) focusItem(prevId);
+          break;
+        }
+        case "ArrowRight": {
+          e.preventDefault();
+          const slot = target.dataset.slot;
+          if (slot === "tree-view-item") {
+            if (!expandedKeys.has(treeId)) {
+              expand(treeId);
+            } else {
+              const firstChild = getFirstChildId(treeId);
+              if (firstChild) focusItem(firstChild);
+            }
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          e.preventDefault();
+          const slot = target.dataset.slot;
+          if (slot === "tree-view-item" && expandedKeys.has(treeId)) {
+            collapse(treeId);
+          } else {
+            const parentId = getParentId(treeId);
+            if (parentId) focusItem(parentId);
+          }
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          const firstId = visible[0];
+          if (firstId) focusItem(firstId);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const lastId = visible[visible.length - 1];
+          if (lastId) focusItem(lastId);
+          break;
+        }
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          const slot = target.dataset.slot;
+          if (slot === "tree-view-item") {
+            toggle(treeId);
+          }
+          break;
+        }
+      }
+    },
+    [
+      expandedKeys,
+      expand,
+      collapse,
+      toggle,
+      focusItem,
+      getFirstChildId,
+      getParentId,
+      getVisibleItems
+    ]
+  );
+  const ctxValue = React.useMemo(
+    () => ({
+      expandedKeys,
+      toggle,
+      expand,
+      collapse,
+      registerItem,
+      unregisterItem,
+      focusItem,
+      getParentId,
+      getFirstChildId,
+      getVisibleItems
+    }),
+    [
+      expandedKeys,
+      toggle,
+      expand,
+      collapse,
+      registerItem,
+      unregisterItem,
+      focusItem,
+      getParentId,
+      getFirstChildId,
+      getVisibleItems
+    ]
+  );
+  return /* @__PURE__ */ jsx(TreeViewContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      "data-slot": "tree-view",
+      role: "tree",
+      onKeyDown: handleKeyDown,
+      className: cn("flex flex-col", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(DepthContext.Provider, { value: 0, children })
+    }
+  ) });
+}
+var ItemParentContext = React.createContext(null);
+var depthPadding = {
+  0: "pl-0",
+  1: "pl-4",
+  2: "pl-8",
+  3: "pl-12",
+  4: "pl-16",
+  5: "pl-20",
+  6: "pl-24"
+};
+function getDepthClass(depth) {
+  return depthPadding[depth] ?? `pl-[${depth * 16}px]`;
+}
+function TreeViewItem({
+  className,
+  itemKey,
+  label,
+  depth: depthProp,
+  children,
+  ...props
+}) {
+  const { expandedKeys, toggle, registerItem, unregisterItem } = useTreeView();
+  const autoDepth = React.useContext(DepthContext);
+  const parentId = React.useContext(ItemParentContext);
+  const depth = depthProp ?? autoDepth;
+  const isExpanded = expandedKeys.has(itemKey);
+  const rowRef = React.useRef(null);
+  React.useEffect(() => {
+    const el = rowRef.current;
+    if (el) {
+      registerItem(itemKey, el, parentId);
+    }
+    return () => unregisterItem(itemKey);
+  }, [itemKey, parentId, registerItem, unregisterItem]);
+  return /* @__PURE__ */ jsxs(
+    CollapsiblePrimitive.Root,
+    {
+      open: isExpanded,
+      onOpenChange: () => toggle(itemKey),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: rowRef,
+            "data-slot": "tree-view-item",
+            "data-tree-id": itemKey,
+            role: "treeitem",
+            "aria-expanded": isExpanded,
+            tabIndex: -1,
+            onClick: () => toggle(itemKey),
+            className: cn(
+              // Layout
+              "flex cursor-pointer select-none items-center gap-1 rounded-md py-1 text-sm outline-none",
+              getDepthClass(depth),
+              // Transitions
+              "transition-[color,background-color,box-shadow] duration-150 ease-smooth",
+              "motion-reduce:transition-none",
+              // Hover & focus
+              "hover-only:hover:bg-surface-secondary",
+              "focus-visible:focus-ring",
+              className
+            ),
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx(
+                ChevronRightIcon,
+                {
+                  "data-slot": "tree-view-item-icon",
+                  className: cn(
+                    "pointer-events-none size-4 shrink-0 text-muted-foreground",
+                    "transition-transform duration-150 ease-smooth",
+                    "motion-reduce:transition-none",
+                    isExpanded && "rotate-90"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { "data-slot": "tree-view-item-label", className: "truncate", children: label })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ItemParentContext.Provider, { value: itemKey, children: /* @__PURE__ */ jsx(DepthContext.Provider, { value: depth + 1, children }) })
+      ]
+    }
+  );
+}
+function TreeViewLeaf({
+  className,
+  depth: depthProp,
+  children,
+  ...props
+}) {
+  const { registerItem, unregisterItem } = useTreeView();
+  const autoDepth = React.useContext(DepthContext);
+  const parentId = React.useContext(ItemParentContext);
+  const depth = depthProp ?? autoDepth;
+  const leafRef = React.useRef(null);
+  const idRef = React.useRef(React.useId());
+  React.useEffect(() => {
+    const el = leafRef.current;
+    const id = idRef.current;
+    if (el) {
+      registerItem(id, el, parentId);
+    }
+    return () => unregisterItem(id);
+  }, [parentId, registerItem, unregisterItem]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: leafRef,
+      "data-slot": "tree-view-leaf",
+      "data-tree-id": idRef.current,
+      role: "treeitem",
+      tabIndex: -1,
+      className: cn(
+        // Layout — extra pl-5 accounts for the missing chevron
+        "flex select-none items-center gap-1 rounded-md py-1 pl-5 text-sm outline-none",
+        getDepthClass(depth),
+        // Transitions
+        "transition-[color,background-color,box-shadow] duration-150 ease-smooth",
+        "motion-reduce:transition-none",
+        // Hover & focus
+        "hover-only:hover:bg-surface-secondary",
+        "focus-visible:focus-ring",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function TreeViewGroup({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.Panel,
+    {
+      "data-slot": "tree-view-group",
+      role: "group",
+      className: cn(
+        "overflow-hidden",
+        "h-(--collapsible-panel-height) data-ending-style:h-0 data-starting-style:h-0",
+        "transition-[height,opacity] duration-150 ease-smooth",
+        "data-ending-style:opacity-0 data-starting-style:opacity-0",
+        "motion-reduce:transition-none",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  TreeView,
+  TreeViewGroup,
+  TreeViewItem,
+  TreeViewLeaf
+};
+//# sourceMappingURL=tree-view.js.map

package/dist/components/tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/tree-view.tsx","../../src/lib/utils.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\nimport { ChevronRightIcon } from \"lucide-react\";\n\nimport { cn } from \"../lib/utils\";\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface TreeViewContextValue {\n  expandedKeys: Set<string>;\n  toggle: (key: string) => void;\n  expand: (key: string) => void;\n  collapse: (key: string) => void;\n  registerItem: (\n    id: string,\n    element: HTMLElement,\n    parentId: string | null,\n  ) => void;\n  unregisterItem: (id: string) => void;\n  focusItem: (id: string) => void;\n  getParentId: (id: string) => string | null;\n  getFirstChildId: (id: string) => string | null;\n  getVisibleItems: () => string[];\n}\n\nconst TreeViewContext = React.createContext<TreeViewContextValue | null>(null);\n\nfunction useTreeView() {\n  const ctx = React.useContext(TreeViewContext);\n  if (!ctx)\n    throw new Error(\"TreeView components must be used within a <TreeView>\");\n  return ctx;\n}\n\nconst DepthContext = React.createContext(0);\n\n// ---------------------------------------------------------------------------\n// useControllableState\n// ---------------------------------------------------------------------------\n\nfunction useControllableSet(\n  controlledValue: Set<string> | undefined,\n  onChange: ((keys: Set<string>) => void) | undefined,\n  defaultValue: Set<string>,\n): [Set<string>, (updater: (prev: Set<string>) => Set<string>) => void] {\n  const [internal, setInternal] = React.useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : internal;\n\n  const setValue = React.useCallback(\n    (updater: (prev: Set<string>) => Set<string>) => {\n      if (isControlled) {\n        onChange?.(updater(value));\n      } else {\n        setInternal((prev) => {\n          const next = updater(prev);\n          onChange?.(next);\n          return next;\n        });\n      }\n    },\n    [isControlled, onChange, value],\n  );\n\n  return [value, setValue];\n}\n\n// ---------------------------------------------------------------------------\n// TreeView\n// ---------------------------------------------------------------------------\n\ninterface TreeViewProps extends React.ComponentProps<\"div\"> {\n  /** Controlled expanded keys */\n  expandedKeys?: Set<string>;\n  /** Callback when expanded keys change */\n  onExpandedKeysChange?: (keys: Set<string>) => void;\n  /** Default expanded keys */\n  defaultExpandedKeys?: Set<string>;\n  /** Expand all by default */\n  defaultExpandAll?: boolean;\n}\n\nfunction TreeView({\n  className,\n  expandedKeys: controlledExpandedKeys,\n  onExpandedKeysChange,\n  defaultExpandedKeys,\n  defaultExpandAll = false,\n  children,\n  ...props\n}: TreeViewProps) {\n  // Item registry: id -> { element, parentId }\n  const itemsRef = React.useRef<\n    Map<string, { element: HTMLElement; parentId: string | null }>\n  >(new Map());\n\n  // Collect all keys on first render when defaultExpandAll is true\n  const [allKeysCollected, setAllKeysCollected] = React.useState(false);\n  const pendingKeysRef = React.useRef<Set<string>>(new Set());\n\n  const resolvedDefault = React.useMemo(\n    () => defaultExpandedKeys ?? new Set<string>(),\n    [],\n  );\n\n  const [expandedKeys, setExpandedKeys] = useControllableSet(\n    controlledExpandedKeys,\n    onExpandedKeysChange,\n    resolvedDefault,\n  );\n\n  // After first render with defaultExpandAll, expand everything that registered\n  React.useEffect(() => {\n    if (defaultExpandAll && !allKeysCollected) {\n      setAllKeysCollected(true);\n      if (pendingKeysRef.current.size > 0) {\n        setExpandedKeys((prev) => {\n          const next = new Set(prev);\n          pendingKeysRef.current.forEach((k) => next.add(k));\n          return next;\n        });\n      }\n    }\n  }, [defaultExpandAll, allKeysCollected, setExpandedKeys]);\n\n  const toggle = React.useCallback(\n    (key: string) => {\n      setExpandedKeys((prev) => {\n        const next = new Set(prev);\n        if (next.has(key)) {\n          next.delete(key);\n        } else {\n          next.add(key);\n        }\n        return next;\n      });\n    },\n    [setExpandedKeys],\n  );\n\n  const expand = React.useCallback(\n    (key: string) => {\n      setExpandedKeys((prev) => {\n        if (prev.has(key)) return prev;\n        const next = new Set(prev);\n        next.add(key);\n        return next;\n      });\n    },\n    [setExpandedKeys],\n  );\n\n  const collapse = React.useCallback(\n    (key: string) => {\n      setExpandedKeys((prev) => {\n        if (!prev.has(key)) return prev;\n        const next = new Set(prev);\n        next.delete(key);\n        return next;\n      });\n    },\n    [setExpandedKeys],\n  );\n\n  const registerItem = React.useCallback(\n    (id: string, element: HTMLElement, parentId: string | null) => {\n      itemsRef.current.set(id, { element, parentId });\n      if (defaultExpandAll && !allKeysCollected) {\n        pendingKeysRef.current.add(id);\n      }\n    },\n    [defaultExpandAll, allKeysCollected],\n  );\n\n  const unregisterItem = React.useCallback((id: string) => {\n    itemsRef.current.delete(id);\n  }, []);\n\n  const focusItem = React.useCallback((id: string) => {\n    const entry = itemsRef.current.get(id);\n    if (entry) {\n      entry.element.focus();\n    }\n  }, []);\n\n  const getParentId = React.useCallback((id: string) => {\n    const entry = itemsRef.current.get(id);\n    return entry?.parentId ?? null;\n  }, []);\n\n  const getFirstChildId = React.useCallback(\n    (id: string) => {\n      // Find the first registered item whose parentId matches this id\n      // and which is visible (its parent is expanded)\n      if (!expandedKeys.has(id)) return null;\n      for (const [childId, entry] of itemsRef.current) {\n        if (entry.parentId === id) return childId;\n      }\n      return null;\n    },\n    [expandedKeys],\n  );\n\n  const getVisibleItems = React.useCallback(() => {\n    // Walk the DOM tree to get items in visual order\n    const rootEl = rootRef.current;\n    if (!rootEl) return [];\n    const allEls = rootEl.querySelectorAll<HTMLElement>(\n      \"[data-slot='tree-view-item'], [data-slot='tree-view-leaf']\",\n    );\n    const visible: string[] = [];\n    allEls.forEach((el) => {\n      const id = el.dataset.treeId;\n      if (id && el.offsetParent !== null) {\n        visible.push(id);\n      }\n    });\n    return visible;\n  }, []);\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const target = e.target as HTMLElement;\n      const treeId = target.dataset.treeId;\n      if (!treeId) return;\n\n      const visible = getVisibleItems();\n      const currentIndex = visible.indexOf(treeId);\n      if (currentIndex === -1) return;\n\n      switch (e.key) {\n        case \"ArrowDown\": {\n          e.preventDefault();\n          const nextId = visible[currentIndex + 1];\n          if (nextId) focusItem(nextId);\n          break;\n        }\n        case \"ArrowUp\": {\n          e.preventDefault();\n          const prevId = visible[currentIndex - 1];\n          if (prevId) focusItem(prevId);\n          break;\n        }\n        case \"ArrowRight\": {\n          e.preventDefault();\n          const slot = target.dataset.slot;\n          if (slot === \"tree-view-item\") {\n            if (!expandedKeys.has(treeId)) {\n              expand(treeId);\n            } else {\n              const firstChild = getFirstChildId(treeId);\n              if (firstChild) focusItem(firstChild);\n            }\n          }\n          break;\n        }\n        case \"ArrowLeft\": {\n          e.preventDefault();\n          const slot = target.dataset.slot;\n          if (slot === \"tree-view-item\" && expandedKeys.has(treeId)) {\n            collapse(treeId);\n          } else {\n            const parentId = getParentId(treeId);\n            if (parentId) focusItem(parentId);\n          }\n          break;\n        }\n        case \"Home\": {\n          e.preventDefault();\n          const firstId = visible[0];\n          if (firstId) focusItem(firstId);\n          break;\n        }\n        case \"End\": {\n          e.preventDefault();\n          const lastId = visible[visible.length - 1];\n          if (lastId) focusItem(lastId);\n          break;\n        }\n        case \"Enter\":\n        case \" \": {\n          e.preventDefault();\n          const slot = target.dataset.slot;\n          if (slot === \"tree-view-item\") {\n            toggle(treeId);\n          }\n          break;\n        }\n      }\n    },\n    [\n      expandedKeys,\n      expand,\n      collapse,\n      toggle,\n      focusItem,\n      getFirstChildId,\n      getParentId,\n      getVisibleItems,\n    ],\n  );\n\n  const ctxValue = React.useMemo<TreeViewContextValue>(\n    () => ({\n      expandedKeys,\n      toggle,\n      expand,\n      collapse,\n      registerItem,\n      unregisterItem,\n      focusItem,\n      getParentId,\n      getFirstChildId,\n      getVisibleItems,\n    }),\n    [\n      expandedKeys,\n      toggle,\n      expand,\n      collapse,\n      registerItem,\n      unregisterItem,\n      focusItem,\n      getParentId,\n      getFirstChildId,\n      getVisibleItems,\n    ],\n  );\n\n  return (\n    <TreeViewContext.Provider value={ctxValue}>\n      <div\n        ref={rootRef}\n        data-slot=\"tree-view\"\n        role=\"tree\"\n        onKeyDown={handleKeyDown}\n        className={cn(\"flex flex-col\", className)}\n        {...props}\n      >\n        <DepthContext.Provider value={0}>{children}</DepthContext.Provider>\n      </div>\n    </TreeViewContext.Provider>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Item parent context (for registering children with correct parentId)\n// ---------------------------------------------------------------------------\n\nconst ItemParentContext = React.createContext<string | null>(null);\n\n// ---------------------------------------------------------------------------\n// Depth-based padding\n// ---------------------------------------------------------------------------\n\nconst depthPadding: Record<number, string> = {\n  0: \"pl-0\",\n  1: \"pl-4\",\n  2: \"pl-8\",\n  3: \"pl-12\",\n  4: \"pl-16\",\n  5: \"pl-20\",\n  6: \"pl-24\",\n};\n\nfunction getDepthClass(depth: number) {\n  return depthPadding[depth] ?? `pl-[${depth * 16}px]`;\n}\n\n// ---------------------------------------------------------------------------\n// TreeViewItem\n// ---------------------------------------------------------------------------\n\ninterface TreeViewItemProps extends React.ComponentProps<\"div\"> {\n  /** Unique key for this item */\n  itemKey: string;\n  /** Label content for the item */\n  label: React.ReactNode;\n  /** Depth level (auto-managed but can override) */\n  depth?: number;\n}\n\nfunction TreeViewItem({\n  className,\n  itemKey,\n  label,\n  depth: depthProp,\n  children,\n  ...props\n}: TreeViewItemProps) {\n  const { expandedKeys, toggle, registerItem, unregisterItem } = useTreeView();\n  const autoDepth = React.useContext(DepthContext);\n  const parentId = React.useContext(ItemParentContext);\n  const depth = depthProp ?? autoDepth;\n  const isExpanded = expandedKeys.has(itemKey);\n  const rowRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    const el = rowRef.current;\n    if (el) {\n      registerItem(itemKey, el, parentId);\n    }\n    return () => unregisterItem(itemKey);\n  }, [itemKey, parentId, registerItem, unregisterItem]);\n\n  return (\n    <CollapsiblePrimitive.Root\n      open={isExpanded}\n      onOpenChange={() => toggle(itemKey)}\n    >\n      <div\n        ref={rowRef}\n        data-slot=\"tree-view-item\"\n        data-tree-id={itemKey}\n        role=\"treeitem\"\n        aria-expanded={isExpanded}\n        tabIndex={-1}\n        onClick={() => toggle(itemKey)}\n        className={cn(\n          // Layout\n          \"flex cursor-pointer select-none items-center gap-1 rounded-md py-1 text-sm outline-none\",\n          getDepthClass(depth),\n          // Transitions\n          \"transition-[color,background-color,box-shadow] duration-150 ease-smooth\",\n          \"motion-reduce:transition-none\",\n          // Hover & focus\n          \"hover-only:hover:bg-surface-secondary\",\n          \"focus-visible:focus-ring\",\n          className,\n        )}\n        {...props}\n      >\n        <ChevronRightIcon\n          data-slot=\"tree-view-item-icon\"\n          className={cn(\n            \"pointer-events-none size-4 shrink-0 text-muted-foreground\",\n            \"transition-transform duration-150 ease-smooth\",\n            \"motion-reduce:transition-none\",\n            isExpanded && \"rotate-90\",\n          )}\n        />\n        <span data-slot=\"tree-view-item-label\" className=\"truncate\">\n          {label}\n        </span>\n      </div>\n      <ItemParentContext.Provider value={itemKey}>\n        <DepthContext.Provider value={depth + 1}>\n          {children}\n        </DepthContext.Provider>\n      </ItemParentContext.Provider>\n    </CollapsiblePrimitive.Root>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// TreeViewLeaf\n// ---------------------------------------------------------------------------\n\ninterface TreeViewLeafProps extends React.ComponentProps<\"div\"> {\n  /** Depth level */\n  depth?: number;\n}\n\nfunction TreeViewLeaf({\n  className,\n  depth: depthProp,\n  children,\n  ...props\n}: TreeViewLeafProps) {\n  const { registerItem, unregisterItem } = useTreeView();\n  const autoDepth = React.useContext(DepthContext);\n  const parentId = React.useContext(ItemParentContext);\n  const depth = depthProp ?? autoDepth;\n  const leafRef = React.useRef<HTMLDivElement>(null);\n  const idRef = React.useRef(React.useId());\n\n  React.useEffect(() => {\n    const el = leafRef.current;\n    const id = idRef.current;\n    if (el) {\n      registerItem(id, el, parentId);\n    }\n    return () => unregisterItem(id);\n  }, [parentId, registerItem, unregisterItem]);\n\n  return (\n    <div\n      ref={leafRef}\n      data-slot=\"tree-view-leaf\"\n      data-tree-id={idRef.current}\n      role=\"treeitem\"\n      tabIndex={-1}\n      className={cn(\n        // Layout — extra pl-5 accounts for the missing chevron\n        \"flex select-none items-center gap-1 rounded-md py-1 pl-5 text-sm outline-none\",\n        getDepthClass(depth),\n        // Transitions\n        \"transition-[color,background-color,box-shadow] duration-150 ease-smooth\",\n        \"motion-reduce:transition-none\",\n        // Hover & focus\n        \"hover-only:hover:bg-surface-secondary\",\n        \"focus-visible:focus-ring\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// TreeViewGroup\n// ---------------------------------------------------------------------------\n\ninterface TreeViewGroupProps extends React.ComponentProps<\"div\"> {}\n\nfunction TreeViewGroup({ className, children, ...props }: TreeViewGroupProps) {\n  return (\n    <CollapsiblePrimitive.Panel\n      data-slot=\"tree-view-group\"\n      role=\"group\"\n      className={cn(\n        \"overflow-hidden\",\n        \"h-(--collapsible-panel-height) data-ending-style:h-0 data-starting-style:h-0\",\n        \"transition-[height,opacity] duration-150 ease-smooth\",\n        \"data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        \"motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </CollapsiblePrimitive.Panel>\n  );\n}\n\nexport { TreeView, TreeViewItem, TreeViewGroup, TreeViewLeaf };\nexport type {\n  TreeViewProps,\n  TreeViewItemProps,\n  TreeViewGroupProps,\n  TreeViewLeafProps,\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":[]}

package/dist/index.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -3860,23 +3861,23 @@ var import_drawer = require("@base-ui/react/drawer");
 var import_class_variance_authority7 = require("class-variance-authority");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function Drawer({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_drawer.DrawerPreview.Root, { "data-slot": "drawer", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_drawer.Drawer.Root, { "data-slot": "drawer", ...props });
 }
 function DrawerTrigger({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_drawer.DrawerPreview.Trigger, { "data-slot": "drawer-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_drawer.Drawer.Trigger, { "data-slot": "drawer-trigger", ...props });
 }
 function DrawerPortal({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_drawer.DrawerPreview.Portal, { "data-slot": "drawer-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_drawer.Drawer.Portal, { "data-slot": "drawer-portal", ...props });
 }
 function DrawerClose({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_drawer.DrawerPreview.Close, { "data-slot": "drawer-close", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_drawer.Drawer.Close, { "data-slot": "drawer-close", ...props });
 }
 function DrawerOverlay({
   className,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_drawer.DrawerPreview.Backdrop,
+    import_drawer.Drawer.Backdrop,
     {
       "data-slot": "drawer-overlay",
       className: cn(
@@ -3916,7 +3917,7 @@ function DrawerContent({
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DrawerPortal, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DrawerOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-      import_drawer.DrawerPreview.Popup,
+      import_drawer.Drawer.Popup,
       {
         "data-slot": "drawer-content",
         "data-drawer-direction": direction,
@@ -3924,7 +3925,7 @@ function DrawerContent({
         ...props,
         children: [
           direction === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "bg-surface-tertiary mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_drawer.DrawerPreview.Content, { children })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_drawer.Drawer.Content, { children })
         ]
       }
     )
@@ -3960,7 +3961,7 @@ function DrawerFooter({ className, ...props }) {
 }
 function DrawerTitle({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_drawer.DrawerPreview.Title,
+    import_drawer.Drawer.Title,
     {
       "data-slot": "drawer-title",
       className: cn("text-foreground font-medium", className),
@@ -3973,7 +3974,7 @@ function DrawerDescription({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_drawer.DrawerPreview.Description,
+    import_drawer.Drawer.Description,
     {
       "data-slot": "drawer-description",
       className: cn("text-muted-foreground text-sm", className),
@@ -6125,11 +6126,7 @@ function Section({
         "div",
         {
           "data-slot": "section-content",
-          className: cn(
-            contentMaxWidth[maxWidth],
-            centered && "mx-auto",
-            "px-6"
-          ),
+          className: cn(contentMaxWidth[maxWidth], centered && "mx-auto", "px-6"),
           children
         }
       )