{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tree", "title": "Tree", "description": "Branches open on a spring with their rows falling in, and the selected row's key glides.", "dependencies": [ "@ui-sdk/core@0.1.0-beta.2", "@ui-sdk/react@0.1.0-beta.2" ], "registryDependencies": [ "@keyframery/motion" ], "files": [ { "path": "registry/components/keyframery/primitives/tree.tsx", "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/tree`: same parts, same props. Swap the import and keep your code.\n This file adds motion only. Colours, radii, shadows and spacing stay yours.\n - Glide: the selected row's key springs from row to row when the selection moves. It is the tree's\n `::after`; give it a surface with `after:` classes. A lighter hover highlight glides under the\n pointer and keyboard focus as the tree's `::before`. Both default to a tint of the text colour.\n - The chevron turns on a spring.\n - Height and Cascade: a branch opens to its height and its rows fall in one after another. */\n\nimport {\n Tree as TreeRoot,\n TreeGroup as TreeGroupPart,\n TreeItemIndicator as TreeItemIndicatorPart,\n type TreeMode,\n type TreeProps,\n} from \"@ui-sdk/react/tree\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/tree\"\n\nconst ROW = '[data-slot=\"tree-label\"]'\nconst MARK = \"data-kf-tree-hl\"\n\n/* Moves the hover mark to `row`, or hides the highlight where it is (so it can glide on from there). */\nfunction mark(root: HTMLElement, row: Element | null) {\n if (!row || row.hasAttribute(\"data-disabled\")) {\n root.setAttribute(\"data-kf-idle\", \"\")\n return\n }\n for (const old of root.querySelectorAll(`[${MARK}]`)) if (old !== row) old.removeAttribute(MARK)\n row.setAttribute(MARK, \"\")\n root.removeAttribute(\"data-kf-idle\")\n if (!root.hasAttribute(\"data-kf-glide\")) setTimeout(() => root.setAttribute(\"data-kf-glide\", \"\"), 40)\n}\n\n/* The row under the pointer, or the row of the focused item (focus stays on the item). */\nfunction rowFrom(root: HTMLElement, target: EventTarget | null) {\n if (!(target instanceof Element)) return null\n const row =\n target.closest(ROW) ??\n (target.matches('[data-slot=\"tree-item\"]') ? target.querySelector(`:scope > ${ROW}`) : null)\n return row && root.contains(row) ? row : null\n}\n\nfunction Tree({\n className,\n onPointerOver,\n onPointerLeave,\n onFocus,\n onBlur,\n ...props\n}: TreeProps) {\n /* Hold the selection's glide until the rows are laid out, so the key is simply there on load. */\n const [ready, setReady] = React.useState(false)\n React.useEffect(() => {\n const timer = setTimeout(() => setReady(true), 150)\n return () => clearTimeout(timer)\n }, [])\n const hovering = React.useRef(false)\n\n return (\n {\n onPointerOver?.(event)\n hovering.current = true\n const row = rowFrom(event.currentTarget, event.target)\n if (row) mark(event.currentTarget, row)\n }}\n onPointerLeave={(event) => {\n onPointerLeave?.(event)\n hovering.current = false\n const root = event.currentTarget\n mark(root, rowFrom(root, root.querySelector(\":focus-visible\")))\n }}\n onFocus={(event) => {\n onFocus?.(event)\n const target = event.target as Element\n if (!hovering.current && target.matches(\":focus-visible\")) mark(event.currentTarget, rowFrom(event.currentTarget, target))\n }}\n onBlur={(event) => {\n onBlur?.(event)\n const root = event.currentTarget\n if (!hovering.current && !root.contains(event.relatedTarget as Node | null)) mark(root, null)\n }}\n {...props}\n />\n )\n}\n\nfunction TreeItemIndicator({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/* Opens to its height while its rows cascade in; closes a little faster, all at once. */\nfunction TreeGroup({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Tree, TreeGroup, TreeItemIndicator }\n", "type": "registry:component", "target": "components/keyframery/primitives/tree.tsx" }, { "path": "registry/components/keyframery/tree.tsx", "content": "\"use client\"\n\n/* Styled tree: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n Tree as TreeRoot,\n TreeGroup as TreeGroupPart,\n TreeItem as TreeItemPart,\n TreeItemCheckbox as TreeItemCheckboxPart,\n TreeItemIndicator as TreeItemIndicatorPart,\n TreeItemLabel as TreeItemLabelPart,\n treeFromPaths,\n type TreeItemData,\n type TreeMode,\n type TreeProps,\n} from \"@/components/keyframery/primitives/tree\"\nimport { cn } from \"@/lib/utils\"\n\nconst icon = {\n viewBox: \"0 0 16 16\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n} as const\n\n/* Lets rows rendered from data know whether the tree has checkboxes. */\nconst CheckableContext = React.createContext(false)\n\nfunction Tree({\n className,\n children,\n ...props\n}: TreeProps) {\n const { items, paths } = props\n const data = React.useMemo(\n () => items ?? (paths ? treeFromPaths(paths) : undefined),\n [items, paths],\n )\n return (\n \n \n {children ?? (data ? : null)}\n \n \n )\n}\n\n/* UI SDK calls an item a branch when it finds its own TreeGroup inside. Ours wraps that\n part, so the item looks for either one and says so itself. */\nfunction hasGroup(children: React.ReactNode): boolean {\n return React.Children.toArray(children).some(\n (child) =>\n React.isValidElement<{ children?: React.ReactNode }>(child) &&\n (child.type === TreeGroup ||\n child.type === TreeGroupPart ||\n hasGroup(child.props.children)),\n )\n}\n\nfunction TreeItem({\n className,\n branch,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n [data-slot=tree-label]]:ring-2 [&:focus-visible>[data-slot=tree-label]]:ring-ring\",\n \"[&:focus-visible>[data-slot=tree-label]]:ring-offset-2 [&:focus-visible>[data-slot=tree-label]]:ring-offset-background\",\n className,\n )}\n {...props}\n >\n {children}\n \n )\n}\n\n/* The row. A leaf is padded by one chevron so it lines up with the branches beside it. */\nfunction TreeItemLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/* The chevron. It turns as the branch opens, and gives way to a spinner while children load. */\nfunction TreeItemIndicator({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? (\n <>\n \n \n \n \n \n \n \n \n )}\n \n )\n}\n\n/* The check draws itself. A branch with only some of its items checked shows a dash. */\nfunction TreeItemCheckbox({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? (\n <>\n \n \n \n \n \n \n \n )}\n \n )\n}\n\n/* A branch's children, behind a hairline guide that drops from the chevron above.\n The clip reaches 4px past the box, so a focus ring on a row inside is never cut. */\nfunction TreeGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/* Rows from data: what `` renders when it has no children. */\nfunction TreeItems({ items }: { items: TreeItemData[] }) {\n const checkable = React.useContext(CheckableContext)\n return items.map((item) => (\n \n : undefined}>\n {item.children && }\n {checkable && }\n {item.label}\n \n {item.children && (\n \n \n \n )}\n \n ))\n}\n\nexport {\n Tree,\n TreeGroup,\n TreeItem,\n TreeItemCheckbox,\n TreeItemIndicator,\n TreeItemLabel,\n TreeItems,\n}\n", "type": "registry:component", "target": "components/keyframery/tree.tsx" } ], "type": "registry:component" }