56: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 57:I[544296,["/_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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 58:I[34002,["/_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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 59: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwindcss-react-aria-components"}] 52:["$","li","tw-animate-css",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tw-animate-css","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":"tw-animate-css"}]]}]}] 53:["$","$L56",null,{"namespace":"@react-aria","registryDependencies":["https://react-aria.adobe.com/registry/tailwind-utils.json"]}] 54:["$","$L57",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L58",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@plugin \"tailwindcss-react-aria-components\" {\n\n}\n\n@import \"tw-animate-css\" {\n\n}"}]}]]}]]}]}]}] 5a:T1b80,'use client'; import { Button, Link, type LinkProps, NavigationTree as AriaNavigationTree, NavigationTreeHeader as AriaNavigationTreeHeader, type NavigationTreeHeaderProps, NavigationTreeItem as AriaNavigationTreeItem, NavigationTreeItemContent as AriaNavigationTreeItemContent, type NavigationTreeItemProps as AriaNavigationTreeItemProps, type NavigationTreeProps, NavigationTreeSection as AriaNavigationTreeSection, type NavigationTreeSectionProps } from 'react-aria-components/NavigationTree'; import {ChevronRight} from 'lucide-react'; import React from 'react'; import {tv} from 'tailwind-variants'; import {composeTailwindRenderProps, focusRing} from '@/registry/react-aria/lib/react-aria-utils'; export function NavigationTree({ renderLink, children, ...props }: NavigationTreeProps & {renderLink?: LinkProps['render']}) { return ( {children} ); } // The focus ring lives on the row (not the link) so it spans the whole item. Hover/current/ancestor // state is surfaced as a leading-edge indicator (see indicatorStyles) rather than a full-row // background. The row is a `group` so the indicator can react to the row's data-* attributes. isFocusVisible // comes from the render props; RAC's isFocusVisible already follows the link (it is not true when // another child, e.g. a button, is focused). const itemStyles = tv({ extend: focusRing, base: 'group relative font-sans flex items-center rounded-md cursor-default select-none text-neutral-800 dark:text-neutral-200 -outline-offset-2 [-webkit-tap-highlight-color:transparent]', variants: { isDisabled: { true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]' } } }); const linkStyles = tv({ base: 'relative flex-1 min-w-0 flex items-center gap-2 py-1.5 px-2 text-sm no-underline text-current cursor-pointer outline-none ' + // A row without an href renders its label as a non-interactive span, so it should not look clickable. 'group-[:not([data-href])]:cursor-default', variants: { isDisabled: { true: 'cursor-default' } } }); // The leading-edge indicator is a real, presentational element (aria-hidden). Its variant is chosen in // JS (see NavigationTreeItemContent) and surfaced as a single `data-indicator` attribute, so the styles // stay flat and precedence lives in one place instead of relying on CSS specificity: // - current (blue pill): the selected row. Because the variant is picked in JS, it keeps this color // even while hovered. // - ancestor (neutral dot): a collapsed ancestor of the current route. // - hover (neutral pill): any actionable row on hover. const indicatorStyles = tv({ base: 'absolute start-0.5 top-1/2 -translate-y-1/2 w-0.5 h-[1lh] rounded-full forced-color-adjust-none ' + // Only real link rows (the group row has data-href) get the hover pill. 'group-[[data-href]]:data-[indicator=hover]:bg-neutral-400 dark:group-[[data-href]]:data-[indicator=hover]:bg-neutral-500 ' + 'data-[indicator=current]:bg-blue-600 dark:data-[indicator=current]:bg-blue-400 ' + 'data-[indicator=ancestor]:h-1 data-[indicator=ancestor]:w-1 data-[indicator=ancestor]:bg-neutral-400 dark:data-[indicator=ancestor]:bg-neutral-500 ' + // In forced-colors mode authored backgrounds are dropped, so render any visible state as Highlight. 'forced-colors:data-[indicator]:bg-[Highlight]' }); const expandButton = tv({ extend: focusRing, base: 'shrink-0 w-6 h-6 flex items-center justify-center rounded-md border-0 p-0 bg-transparent cursor-default [-webkit-tap-highlight-color:transparent] -outline-offset-2' }); const chevron = tv({ base: 'w-4 h-4 text-neutral-500 dark:text-neutral-400 transition-transform duration-200 ease-in-out', variants: { isExpanded: { true: 'rotate-90' } } }); const NavTreeLinkContext = React.createContext<{ indicator: 'current' | 'ancestor' | undefined; }>({indicator: undefined}); const RenderLinkContext = React.createContext(undefined); export function NavigationTreeItemContent(props: {children?: React.ReactNode}) { return ( {({level, hasChildItems, isExpanded, isCurrent, isCurrentAncestor}) => { let indicator: 'current' | 'ancestor' | undefined; if (isCurrent) { indicator = 'current'; } else if (isCurrentAncestor && !isExpanded) { indicator = 'ancestor'; } return ( <> {level > 1 && (

)} {props.children} ); }} ); } export function NavigationTreeItem(props: AriaNavigationTreeItemProps) { return ; } export function NavigationTreeSection(props: NavigationTreeSectionProps) { return ; } export function NavigationTreeHeader(props: NavigationTreeHeaderProps) { return ( ); } export interface NavigationTreeItemLinkProps extends Omit { children?: React.ReactNode; } export function NavigationTreeItemLink({ render: renderProp, ...props }: NavigationTreeItemLinkProps) { let {indicator} = React.useContext(NavTreeLinkContext); let contextRender = React.useContext(RenderLinkContext); return ( linkStyles({isDisabled})}> {({isHovered}) => ( <> {props.children} )} ); } 55:["$","$L59",null,{"files":[{"path":"components/ui/NavigationTree.tsx","content":"$5a","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]