"use client"; import * as React from "react"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/registry/primitives/core/collapsible"; import { ThemeIcon } from "@/components/registry/primitives/core/theme-icon"; import { cn } from "@/lib/registry/cn"; type TreeCaretSide = "left" | "right"; const TreeContext = React.createContext<{ caretSide: TreeCaretSide }>({ caretSide: "left", }); function TreeRoot({ className, caretSide = "left", ...props }: React.ComponentProps<"ul"> & { /** Side on which expand/collapse carets are shown. Default "left". */ caretSide?: TreeCaretSide; }) { return (

{children}

{ /** Whether this node is expanded. */ expanded?: boolean; /** Whether this node has children (shows expand icon). */ hasChildren?: boolean; } function TreeTrigger({ className, expanded = false, hasChildren = true, children, ...props }: TreeTriggerProps) { const { caretSide } = React.useContext(TreeContext); const caret = ( {hasChildren ? ( ) : ( )} ); return ( {caretSide === "right" ? ( <> {children} {caret} ) : ( <> {caret} {children} )} ); } TreeTrigger.displayName = "TreeTrigger"; function TreeContent({ className, ...props }: React.ComponentProps<"div">) { return (

); } TreeContent.displayName = "TreeContent"; function TreeChildren({ className, ...props }: React.ComponentProps<"ul">) { return ( // biome-ignore lint/a11y/useSemanticElements: WAI-ARIA tree pattern requires role="group" for nested treeitems;

implies form-field grouping that does not apply.

); } TreeItem.displayName = "TreeItem"; export interface TreeBranchProps { /** Label or trigger content. */ label: React.ReactNode; /** Child nodes (rendered inside CollapsibleContent). */ children?: React.ReactNode; /** Default open state. */ defaultOpen?: boolean; className?: string; } /** Expandable tree branch: label toggles children. */ function TreeBranch({ label, children, defaultOpen = false, className, }: TreeBranchProps) { const [open, setOpen] = React.useState(defaultOpen); const hasChildren = React.Children.count(children) > 0; return ( {label} {hasChildren && ( {children} )} ); } TreeBranch.displayName = "TreeBranch"; export type { TreeCaretSide }; export { TreeBranch, TreeChildren, TreeContent, TreeItem, TreeNode, TreeRoot as Tree, TreeTrigger, };

Tree

Showcase

Tree