var Component=(()=>{var T=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var C=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),x=(l,e)=>{for(var r in e)i(l,r,{get:e[r],enumerable:!0})},D=(l,e,r,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of A(e))!I.call(l,a)&&a!==r&&i(l,a,{get:()=>e[a],enumerable:!(c=g(e,a))||c.enumerable});return l};var _=(l,e,r)=>(r=l!=null?T(b(l)):{},D(e||!l||!l.__esModule?i(r,"default",{value:l,enumerable:!0}):r,l)),v=l=>D(i({},"__esModule",{value:!0}),l);var u=C((w,m)=>{m.exports=_jsx_runtime});var N={};x(N,{default:()=>B,frontmatter:()=>k});var n=_(u()),k={title:"Tree",description:"A tree provides users with a way to navigate nested hierarchical information, with support for keyboard navigation and selection.",featured:!0,component:!0,links:{doc:"https://react-spectrum.adobe.com/react-aria/Tree.html"}};function f(l){let e={a:"a",code:"code",figure:"figure",h2:"h2",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...l.components},{Callout:r,ComponentPreview:c,ComponentSource:a,PackageManagerContent:o,PackageManagerTabs:h,Step:t,Steps:F,Tabs:y,TabsContent:d,TabsList:E,TabsTrigger:p}=e;return r||s("Callout",!0),c||s("ComponentPreview",!0),a||s("ComponentSource",!0),o||s("PackageManagerContent",!0),h||s("PackageManagerTabs",!0),t||s("Step",!0),F||s("Steps",!0),y||s("Tabs",!0),d||s("TabsContent",!0),E||s("TabsList",!0),p||s("TabsTrigger",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r,{children:(0,n.jsx)(e.p,{children:`\u{1F6A7} This component is in beta by React Aria Components. Will update with more examples and uses when RAC documentation includes them.`})}),` `,(0,n.jsxs)(c,{name:"tree-demo",children:[(0,n.jsx)(e.figure,{__src__:"src/registry/default/example/tree/tree-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`"use client" import { Collection } from "react-aria-components" import { Checkbox } from "@/components/ui/checkbox" import { Tree, TreeItem, TreeItemContent, TreeItemExpandButton, TreeItemInfoButton, } from "@/components/ui/tree" let items = [ { id: 1, title: "Documents", children: [ { id: 2, title: "Project", children: [{ id: 3, title: "Weekly Report", children: [] }], }, ], }, { id: 4, title: "Photos", children: [ { id: 5, title: "Image 1", children: [] }, { id: 6, title: "Image 2", children: [] }, ], }, ] export function TreeDemo() { return ( {function renderItem(item) { return ( {item.children.length ? : null} {item.title} {renderItem} ) }} ) } `,__src__:"src/registry/default/example/tree/tree-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Collection } "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "react-aria-components"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Checkbox } "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/checkbox"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" Tree,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItem,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemContent,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemExpandButton,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemInfoButton,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/tree"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"let"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" items "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ["})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" id: "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" title: "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Documents"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" children: ["})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" id: "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"2"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" title: "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Project"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" children: [{ id: "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"3"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", title: "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Weekly Report"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", children: [] }],"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ],"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" id: "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"4"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" title: "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Photos"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" children: ["})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { id: "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"5"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", title: "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Image 1"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", children: [] },"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { id: "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"6"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", title: "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Image 2"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", children: [] },"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ],"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"]"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:" TreeDemo"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Tree"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"w-[250px]"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Files"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" selectionMode"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"multiple"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" items"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"items"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" >"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {function"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:" renderItem"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"item"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"TreeItem"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" textValue"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"item.title"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"TreeItemContent"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"item.children."}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"length"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" ?"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"TreeItemExpandButton"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" /> "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Checkbox"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" slot"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"selection"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"item.title"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"TreeItemInfoButton"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Collection"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" items"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"item.children"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"renderItem"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,n.jsx)(e.figure,{__src__:"src/registry/new-york/example/tree/tree-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`"use client" import { Collection } from "react-aria-components" import { Checkbox } from "@/components/ui/checkbox" import { Tree, TreeItem, TreeItemContent, TreeItemExpandButton, TreeItemInfoButton, } from "@/components/ui/tree" let items = [ { id: 1, title: "Documents", children: [ { id: 2, title: "Project", children: [{ id: 3, title: "Weekly Report", children: [] }], }, ], }, { id: 4, title: "Photos", children: [ { id: 5, title: "Image 1", children: [] }, { id: 6, title: "Image 2", children: [] }, ], }, ] export function TreeDemo() { return ( {function renderItem(item) { return ( {item.children.length ? : null} {item.title} {renderItem} ) }} ) } `,__src__:"src/registry/new-york/example/tree/tree-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Collection } "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "react-aria-components"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Checkbox } "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/checkbox"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" Tree,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItem,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemContent,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemExpandButton,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemInfoButton,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/tree"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"let"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" items "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ["})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" id: "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" title: "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Documents"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" children: ["})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" id: "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"2"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" title: "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Project"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" children: [{ id: "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"3"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", title: "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Weekly Report"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", children: [] }],"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ],"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" id: "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"4"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" title: "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Photos"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" children: ["})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { id: "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"5"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", title: "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Image 1"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", children: [] },"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { id: "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"6"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", title: "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Image 2"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", children: [] },"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ],"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"]"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:" TreeDemo"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Tree"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"w-[250px]"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Files"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" selectionMode"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"multiple"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" items"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"items"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" >"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {function"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:" renderItem"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"item"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"TreeItem"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" textValue"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"item.title"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"TreeItemContent"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"item.children."}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"length"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" ?"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"TreeItemExpandButton"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" /> "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Checkbox"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" slot"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"selection"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"item.title"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"TreeItemInfoButton"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Collection"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" items"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"item.children"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"renderItem"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(e.h2,{id:"installation",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(y,{defaultValue:"cli",children:[(0,n.jsxs)(E,{children:[(0,n.jsx)(p,{value:"cli",children:"CLI"}),(0,n.jsx)(p,{value:"manual",children:"Copy & Paste"})]}),(0,n.jsx)(d,{value:"cli",children:(0,n.jsxs)(h,{children:[(0,n.jsx)(o,{value:"npm",children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-default",__rawString__:`npx shadcn@latest add https://backchanel.com/[[STYLE]]/tree `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark-default",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:" shadcn@latest"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:" https://backchanel.com/[[STYLE]]/tree"})]})})})})}),(0,n.jsx)(o,{value:"pnpm",children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-default",__rawString__:`pnpm dlx shadcn@latest add https://backchanel.com/[[STYLE]]/tree `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark-default",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"pnpm"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:" dlx"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:" shadcn@latest"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:" https://backchanel.com/[[STYLE]]/tree"})]})})})})}),(0,n.jsx)(o,{value:"bun",children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-default",__rawString__:`bunx --bun shadcn@latest add https://backchanel.com/[[STYLE]]/tree `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark-default",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"bunx"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" --bun"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:" shadcn@latest"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:" https://backchanel.com/[[STYLE]]/tree"})]})})})})}),(0,n.jsx)(o,{value:"yarn",children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-default",__rawString__:`npx shadcn@latest add https://backchanel.com/[[STYLE]]/tree `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark-default",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:" shadcn@latest"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:" https://backchanel.com/[[STYLE]]/tree"})]})})})})})]})}),(0,n.jsx)(d,{value:"manual",children:(0,n.jsxs)(F,{children:[(0,n.jsxs)(t,{children:[(0,n.jsx)(e.p,{children:"This components uses the following components, which you also need to install:"}),(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"../../../docs/components/checkbox",children:"Checkbox (checkbox.tsx)"})}),` `]})]}),(0,n.jsx)(t,{children:"Copy and paste the following code into your project: tree.tsx"}),(0,n.jsxs)(a,{name:"tree",children:[(0,n.jsx)(e.figure,{__src__:"src/registry/default/ui/tree.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`"use client" import { ChevronRightIcon, InfoIcon } from "lucide-react" import { UNSTABLE_Tree as AriaTree, UNSTABLE_TreeItem as AriaTreeItem, UNSTABLE_TreeItemContent as AriaTreeItemContent, TreeItemProps as AriaTreeItemProps, TreeProps as AriaTreeProps, Button, ButtonProps, } from "react-aria-components" import { cn } from "@/lib/utils" const TreeItemContent = AriaTreeItemContent function Tree({ className, ...props }: AriaTreeProps) { return ( ) } function TreeItemExpandButton({ className, children, ...props }: ButtonProps) { return ( ) } function TreeItemInfoButton({ className, children, ...props }: ButtonProps) { return ( ) } function TreeItem({ className, ...props }: AriaTreeItemProps) { return ( ) } export { Tree, TreeItem, TreeItemContent, TreeItemExpandButton, TreeItemInfoButton, } `,__src__:"src/registry/default/ui/tree.tsx",__style__:"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { ChevronRightIcon, InfoIcon } "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" UNSTABLE_Tree "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" AriaTree,"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" UNSTABLE_TreeItem "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" AriaTreeItem,"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" UNSTABLE_TreeItemContent "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" AriaTreeItemContent,"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemProps "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" AriaTreeItemProps,"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeProps "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" AriaTreeProps,"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" Button,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ButtonProps,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "react-aria-components"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { cn } "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/lib/utils"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" TreeItemContent"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" AriaTreeItemContent"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:" Tree"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" extends"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" object"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">({ "}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:" AriaTreeProps"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">) {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"AriaTree"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "flex flex-col gap-1 overflow-auto p-1 outline-none"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:" TreeItemExpandButton"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:" ButtonProps"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" slot"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"chevron"'}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"outline-none"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", className)"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"ChevronRightIcon"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"size-4 shrink-0 transition-transform duration-200 group-data-[expanded]:rotate-90"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:" TreeItemInfoButton"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:" ButtonProps"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Button"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Info"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "ml-auto flex items-center justify-center rounded-md ring-offset-background"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#8B949E"},children:" /* Disabled */"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 "'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#8B949E"},children:" /* Focus Visible */"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#8B949E"},children:" /* Resets */"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "focus-visible:outline-none"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" >"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"InfoIcon"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"size-4 shrink-0"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:" TreeItem"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" extends"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" object"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">({"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"props"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:" AriaTreeItemProps"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">) {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"AriaTreeItem"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "group relative flex items-center gap-2 rounded-md p-1 pl-[calc((var(--tree-item-level)_-_1)_*_2.25rem)] font-medium outline-none ring-offset-background data-[has-child-rows]:pl-[calc((var(--tree-item-level)_-_1)_*_1.5rem)]"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#8B949E"},children:" /* Disabled */"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 "'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#8B949E"},children:" /* Focus Visible */"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#8B949E"},children:" /* Resets */"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "focus-visible:outline-none"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" Tree,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItem,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemContent,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemExpandButton,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemInfoButton,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,n.jsx)(e.figure,{__src__:"src/registry/new-york/ui/tree.tsx",__style__:"new-york","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#0d1117",color:"#e6edf3"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-default",__rawString__:`"use client" import { ChevronRightIcon, InfoCircledIcon } from "@radix-ui/react-icons" import { UNSTABLE_Tree as AriaTree, UNSTABLE_TreeItem as AriaTreeItem, UNSTABLE_TreeItemContent as AriaTreeItemContent, TreeItemProps as AriaTreeItemProps, TreeProps as AriaTreeProps, Button, ButtonProps, } from "react-aria-components" import { cn } from "@/lib/utils" const TreeItemContent = AriaTreeItemContent function Tree({ className, ...props }: AriaTreeProps) { return ( ) } function TreeItemExpandButton({ className, children, ...props }: ButtonProps) { return ( ) } function TreeItemInfoButton({ className, children, ...props }: ButtonProps) { return ( ) } function TreeItem({ className, ...props }: AriaTreeItemProps) { return ( ) } export { Tree, TreeItem, TreeItemContent, TreeItemExpandButton, TreeItemInfoButton, } `,__src__:"src/registry/new-york/ui/tree.tsx",__style__:"new-york",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-default",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { ChevronRightIcon, InfoCircledIcon } "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@radix-ui/react-icons"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" UNSTABLE_Tree "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" AriaTree,"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" UNSTABLE_TreeItem "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" AriaTreeItem,"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" UNSTABLE_TreeItemContent "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" AriaTreeItemContent,"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemProps "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" AriaTreeItemProps,"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeProps "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" AriaTreeProps,"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" Button,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ButtonProps,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "react-aria-components"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { cn } "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/lib/utils"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" TreeItemContent"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" AriaTreeItemContent"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:" Tree"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" extends"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" object"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">({ "}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:" AriaTreeProps"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">) {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"AriaTree"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "flex flex-col gap-1 overflow-auto p-1 text-sm outline-none"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:" TreeItemExpandButton"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:" ButtonProps"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" slot"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"chevron"'}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"outline-none"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", className)"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"ChevronRightIcon"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[expanded]:rotate-90"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:" TreeItemInfoButton"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:" ButtonProps"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Button"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Info"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "ml-auto flex items-center justify-center rounded-md ring-offset-background"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#8B949E"},children:" /* Disabled */"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 "'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#8B949E"},children:" /* Focus Visible */"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#8B949E"},children:" /* Resets */"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "focus-visible:outline-none"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" >"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"InfoCircledIcon"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"size-4 shrink-0 text-muted-foreground"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:" TreeItem"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" extends"}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" object"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">({"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"props"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:" AriaTreeItemProps"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#FFA657"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:">) {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"AriaTreeItem"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "group relative flex items-center gap-2 rounded-md p-1 pl-[calc((var(--tree-item-level)_-_1)_*_2.25rem)] font-medium outline-none ring-offset-background data-[has-child-rows]:pl-[calc((var(--tree-item-level)_-_1)_*_1.5rem)]"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#8B949E"},children:" /* Disabled */"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 "'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#8B949E"},children:" /* Focus Visible */"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#8B949E"},children:" /* Resets */"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "focus-visible:outline-none"'}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" Tree,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItem,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemContent,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemExpandButton,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TreeItemInfoButton,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),(0,n.jsx)(t,{children:"Update the import paths to match your project setup."})]})})]})]})}function B(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(f,{...l})}):f(l)}function s(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(N);})(); ;return Component;