50: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"] 51: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"] 52:T1e64,'use client' import * as React from 'react' import { useControllableState } from '@radix-ui/react-use-controllable-state' import { motion, useReducedMotion } from 'motion/react' import { cn } from '@/lib/utils' export type RailNavItem = { label: React.ReactNode href: string /** Optional selector to observe when it differs from href. */ target?: string className?: string onClick?: React.MouseEventHandler } /** @deprecated Use RailNavItem instead. */ export type RailNavItems = RailNavItem export type RailNavProps = Omit, 'defaultValue'> & { items: readonly RailNavItem[] value?: string defaultValue?: string onValueChange?: (value: string) => void expanded?: boolean defaultExpanded?: boolean onExpandedChange?: (expanded: boolean) => void trackActive?: boolean observerOptions?: IntersectionObserverInit preventNavigation?: boolean label?: string } export function RailNav({ items, value: valueProp, defaultValue, onValueChange, expanded: expandedProp, defaultExpanded = false, onExpandedChange, trackActive = true, observerOptions, preventNavigation = false, label = 'On this page', className, onMouseEnter, onMouseLeave, onFocusCapture, onBlurCapture, ...props }: RailNavProps) { const shouldReduceMotion = useReducedMotion() const [activeValue = '', setActiveValue] = useControllableState({ prop: valueProp, defaultProp: defaultValue ?? items[0]?.href ?? '', onChange: onValueChange, }) const [expanded = false, setExpanded] = useControllableState({ prop: expandedProp, defaultProp: defaultExpanded, onChange: onExpandedChange, }) const [hoveredValue, setHoveredValue] = React.useState(null) React.useEffect(() => { if (!trackActive || typeof IntersectionObserver === 'undefined') { return } const observedItems = items.flatMap((item) => { const selector = item.target ?? (item.href.startsWith('#') ? item.href : null) if (!selector) { return [] } try { const element = document.querySelector(selector) return element ? [ { element, value: item.href, }, ] : [] } catch { return [] } }) if (!observedItems.length) { return } const valueByElement = new Map(observedItems.map((item) => [item.element, item.value])) const observer = new IntersectionObserver( (entries) => { const visibleEntry = entries .filter((entry) => entry.isIntersecting) .sort( (first, second) => Math.abs(first.boundingClientRect.top) - Math.abs(second.boundingClientRect.top), )[0] const nextValue = visibleEntry ? valueByElement.get(visibleEntry.target) : undefined if (nextValue) { setActiveValue(nextValue) } }, observerOptions ?? { rootMargin: '-30% 0px -60% 0px', threshold: 0, }, ) observedItems.forEach(({ element }) => { observer.observe(element) }) return () => { observer.disconnect() } }, [items, observerOptions, setActiveValue, trackActive]) function handleMouseEnter(event: React.MouseEvent) { onMouseEnter?.(event) if (!event.defaultPrevented) { setExpanded(true) } } function handleMouseLeave(event: React.MouseEvent) { onMouseLeave?.(event) if (!event.defaultPrevented) { setExpanded(false) setHoveredValue(null) } } function handleFocusCapture(event: React.FocusEvent) { onFocusCapture?.(event) if (!event.defaultPrevented) { setExpanded(true) } } function handleBlurCapture(event: React.FocusEvent) { onBlurCapture?.(event) if (!event.defaultPrevented && !event.currentTarget.contains(event.relatedTarget)) { setExpanded(false) setHoveredValue(null) } } return (

{items.map((item, index) => { const isActive = activeValue === item.href const isHovered = hoveredValue === item.href return ( { item.onClick?.(event) if (preventNavigation) event.preventDefault() if (preventNavigation || !event.defaultPrevented) { setActiveValue(item.href) } }} onMouseEnter={() => setHoveredValue(item.href)} onMouseLeave={() => setHoveredValue(null)} className={cn( 'text-right text-sm leading-5 font-medium tracking-tight transition-colors duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring', isActive ? 'text-neutral-950 dark:text-white' : isHovered ? 'text-neutral-800 dark:text-neutral-200' : 'text-neutral-500 dark:text-neutral-500', item.className, )} > {item.label} ) })}

) } 4f:["$","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","@radix-ui/react-use-controllable-state",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-use-controllable-state","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":"@radix-ui/react-use-controllable-state"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@navui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/components/rail-nav/rail-nav.tsx","content":"$52","type":"registry:ui","target":"@components/rail-nav.tsx"}],"className":"h-[70svh] min-h-80"}]]}]