4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T3559,"use client"; import { createTreeCollection, TreeView as TreeViewPrimitive, } from "@ark-ui/react/tree-view"; import { CheckIcon, ChevronRight, FileIcon, GlobeIcon, LayersIcon, MinusIcon, PlusIcon, TrashIcon, } from "lucide-react"; import { forwardRef } from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export type TreeViewProps = TreeViewPrimitive.RootProps; export const TreeView = ({ className, ...props }: TreeViewProps) => ( ); export type TreeViewLabelProps = TreeViewPrimitive.LabelProps; export const TreeViewLabel = ({ className, ...props }: TreeViewLabelProps) => ( ); export type TreeViewTreeProps = TreeViewPrimitive.TreeProps; export const TreeViewTree = forwardRef( ({ className, ...props }, ref) => ( ), ); export const TreeViewBranch = ({ className, ...props }: TreeViewPrimitive.BranchProps) => ( ); export const TreeViewBranchControl = ({ className, ...props }: TreeViewPrimitive.BranchControlProps) => ( ); export const TreeViewBranchIndicator = ({ className, ...props }: TreeViewPrimitive.BranchIndicatorProps) => ( ); export const TreeViewBranchText = ({ className, ...props }: TreeViewPrimitive.BranchTextProps) => ( ); export const TreeViewBranchContent = ({ className, ...props }: TreeViewPrimitive.BranchContentProps) => ( ); export const TreeViewBranchIndentGuide = ({ className, ...props }: TreeViewPrimitive.BranchIndentGuideProps) => ( ); export const TreeViewItem = ({ className, ...props }: TreeViewPrimitive.ItemProps) => ( ); export const TreeViewItemText = ({ className, ...props }: TreeViewPrimitive.ItemTextProps) => ( ); export const TreeViewNodeCheckbox = ({ className, ...props }: TreeViewPrimitive.NodeCheckboxProps) => ( ); export const TreeViewNodeCheckboxIndicator = ({ className, ...props }: TreeViewPrimitive.NodeCheckboxIndicatorProps) => ( ); export const TreeViewNodeRenameInput = ({ className, ...props }: TreeViewPrimitive.NodeRenameInputProps) => ( ); export const TreeViewNodeProvider = TreeViewPrimitive.NodeProvider; export const TreeViewNodeContext = TreeViewPrimitive.NodeContext; export const TreeViewRootProvider = TreeViewPrimitive.RootProvider; export type ShowcaseTreeNode = { id: string; name: string; href?: string; children?: ShowcaseTreeNode[]; }; export const TREE_VIEW_SHOWCASE_ROOT: ShowcaseTreeNode = { id: "ROOT", name: "", children: [ { id: "node_modules", name: "node_modules", children: [ { id: "node_modules/zag-js", name: "zag-js" }, { id: "node_modules/panda", name: "panda" }, { id: "node_modules/@types", name: "@types", children: [ { id: "node_modules/@types/react", name: "react" }, { id: "node_modules/@types/react-dom", name: "react-dom" }, ], }, ], }, { id: "src", name: "src", children: [ { id: "src/app.tsx", name: "app.tsx", href: "/docs/introduction" }, { id: "src/index.ts", name: "index.ts", href: "/docs/installation" }, ], }, { id: "package.json", name: "package.json" }, { id: "README.md", name: "README.md", href: "https://ark-ui.com/docs/components/tree-view", }, ], }; export const createShowcaseTreeCollection = () => createTreeCollection({ nodeToValue: (node) => node.id, nodeToString: (node) => node.name, rootNode: structuredClone(TREE_VIEW_SHOWCASE_ROOT), }); export const TreeViewShowcaseNodeCheckboxControl = () => ( } > ); type TreeViewShowcaseNodeActionsProps = { node: ShowcaseTreeNode; indexPath: number[]; onAdd?: (node: ShowcaseTreeNode, indexPath: number[]) => void; onRemove?: (indexPath: number[]) => void; }; export const TreeViewShowcaseNodeActions = ({ node, indexPath, onAdd, onRemove, }: TreeViewShowcaseNodeActionsProps) => { if (!onAdd && !onRemove) return null; return (

{onRemove ? ( ) : null} {onAdd && node.children ? ( ) : null}

); }; export type TreeViewShowcaseNodeRendererProps = { node: ShowcaseTreeNode; indexPath: number[]; checkbox?: boolean; links?: boolean; rename?: boolean; onAdd?: (node: ShowcaseTreeNode, indexPath: number[]) => void; onRemove?: (indexPath: number[]) => void; }; export const TreeViewShowcaseNodeRenderer = ({ node, indexPath, checkbox, links, rename, onAdd, onRemove, }: TreeViewShowcaseNodeRendererProps) => ( {(nodeState) => node.children ? ( {checkbox ? : null} {rename && nodeState.renaming ? ( ) : ( {node.name} )} {node.children.map((child, childIndex) => ( ))} ) : ( {links && node.href ? ( {checkbox ? : null} {rename && nodeState.renaming ? ( ) : ( {node.name} )} {node.href.startsWith("http") ? ( ) : null} ) : ( <> {checkbox ? : null} {rename && nodeState.renaming ? ( ) : ( {node.name} )} )} ) } ); export { createTreeCollection, useTreeView, useTreeViewContext, } from "@ark-ui/react/tree-view"; 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@ark-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40ark-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@ark-ui/react"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4c",null,{"namespace":"@ark-cn","registryDependencies":["button"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/components/ui/tree-view.tsx","content":"$4e","type":"registry:ui","target":"src/components/ui/tree-view.tsx"}],"className":"h-[70svh] min-h-80"}]]}]