50: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:T1a49,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; export type RailListEdge = "top" | "bottom"; export type RailListItem = { value: string; label: React.ReactNode; disabled?: boolean; id?: string; ariaControls?: string; }; export type RailListProps = Omit< React.ComponentProps<"div">, "defaultValue" | "onChange" > & { items: RailListItem[]; /** Controlled active value. Pass null to render without an active item. */ value?: string | null; /** Initial active value. Omit or pass null to start without an active item. */ defaultValue?: string | null; onValueChange?: (value: string, item: RailListItem) => void; /** Which edge of the active item carries the indicator bar. */ edge?: RailListEdge; listClassName?: string; itemClassName?: string; labelClassName?: string; indicatorClassName?: string; onItemPointerEnter?: (item: RailListItem) => void; onItemFocus?: (item: RailListItem) => void; "aria-label"?: string; }; function getEnabledItems(items: RailListItem[]) { return items.filter((item) => !item.disabled); } function getSelectableValue( items: RailListItem[], value: string | null | undefined, ) { const enabledItems = getEnabledItems(items); if (value == null) return null; return enabledItems.some((item) => item.value === value) ? value : null; } export function RailList({ items, value, defaultValue, onValueChange, edge = "bottom", className, listClassName, itemClassName, labelClassName, indicatorClassName, onItemPointerEnter, onItemFocus, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: RailListProps) { const isControlled = value !== undefined; const itemRefs = React.useRef(new Map()); const [uncontrolledValue, setUncontrolledValue] = React.useState(() => getSelectableValue(items, defaultValue), ); const enabledItems = React.useMemo(() => getEnabledItems(items), [items]); const selectedValue = getSelectableValue( items, isControlled ? value : uncontrolledValue, ); const focusableValue = selectedValue ?? enabledItems[0]?.value ?? null; const setSelectedValue = React.useCallback( (nextValue: string) => { const nextItem = items.find((item) => item.value === nextValue); if (!nextItem || nextItem.disabled || nextValue === selectedValue) { return; } if (!isControlled) { setUncontrolledValue(nextValue); } onValueChange?.(nextValue, nextItem); }, [isControlled, items, onValueChange, selectedValue], ); const focusItem = React.useCallback((nextValue: string) => { itemRefs.current.get(nextValue)?.focus(); }, []); const handleKeyDown = React.useCallback( ( event: React.KeyboardEvent, currentValue: string, ) => { if (enabledItems.length === 0) return; const currentIndex = Math.max( enabledItems.findIndex((item) => item.value === currentValue), 0, ); const lastIndex = enabledItems.length - 1; let nextIndex = currentIndex; if (event.key === "ArrowRight" || event.key === "ArrowDown") { nextIndex = currentIndex >= lastIndex ? 0 : currentIndex + 1; } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") { nextIndex = currentIndex <= 0 ? lastIndex : currentIndex - 1; } else if (event.key === "Home") { nextIndex = 0; } else if (event.key === "End") { nextIndex = lastIndex; } else { return; } event.preventDefault(); const nextItem = enabledItems[nextIndex]; if (!nextItem) return; setSelectedValue(nextItem.value); focusItem(nextItem.value); }, [enabledItems, focusItem, setSelectedValue], ); return (

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"registry/base/ui/rail-list.tsx","content":"$51","type":"registry:ui","target":"@ui/rail-list.tsx"}],"className":"h-[70svh] min-h-80"}]]}]