4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T24ac,import { Children, useEffect, useLayoutEffect, useRef, useState, type ComponentProps, type CSSProperties, type KeyboardEvent, type MouseEvent, type ReactNode } from "react" import { cn } from "@/lib/utils" import { NavigationContext, useNavigation, type NavigationItemLayout } from "./navigation-context" import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip" type NavigationOrientation = "horizontal" | "vertical" /** * Material 3 navigation bar. * * Kit geometry (`Navigation Bar: Vertical items` / `Horizontal items` on the * Navigation page): a 64dp Surface Container bar. Each destination is 64dp * tall with a 56×32 Secondary Container indicator pill around the 24dp icon * and a label-medium caption 4dp beneath it; the inline variant puts icon and * caption together inside a 40dp pill. Hover/focus/press state layers paint on * the indicator, not the whole destination, and the selected caption uses the * Secondary role. * * The vertical orientation is the compact navigation rail's destination * column: 96dp wide with 4dp between destinations. */ type NavigationBarProps = ComponentProps<"nav"> & { itemLayout?: NavigationItemLayout onValueChange: (value: string) => void orientation?: NavigationOrientation value: string } function NavigationBar({ "aria-label": ariaLabel = "Primary navigation", children, className, itemLayout = "stacked", onKeyDown, onValueChange, orientation = "horizontal", ref, value, ...props }: NavigationBarProps) { const [focusValue, setFocusValue] = useState(null) const rootRef = useRef(null) const ensureTabStop = () => { const items = Array.from( rootRef.current?.querySelectorAll('[data-slot="navigation-bar-item"]:not(:disabled):not([aria-disabled="true"])') ?? [], ) if (!items.length) return const active = items.find((item) => item.tabIndex === 0) ?? items[0] items.forEach((item) => { item.tabIndex = item === active ? 0 : -1 }) } useLayoutEffect(ensureTabStop) useEffect(() => { if (!rootRef.current) return const observer = new MutationObserver(ensureTabStop) observer.observe(rootRef.current, { attributeFilter: ["aria-disabled", "disabled"], attributes: true, childList: true, subtree: true, }) return () => observer.disconnect() }, []) const handleKeyDown = (event: KeyboardEvent) => { onKeyDown?.(event) if (event.defaultPrevented) return const forward = orientation === "horizontal" ? "ArrowRight" : "ArrowDown" const backward = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp" if (![forward, backward, "Home", "End"].includes(event.key)) return const items = Array.from( event.currentTarget.querySelectorAll('[data-slot="navigation-bar-item"]:not(:disabled):not([aria-disabled="true"])'), ) if (!items.length) return event.preventDefault() const index = items.indexOf(document.activeElement as HTMLElement) const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : event.key === forward ? (index + 1) % items.length : (index - 1 + items.length) % items.length items[next]?.focus() } return (

{ rootRef.current = node if (typeof ref === "function") ref(node) else if (ref) ref.current = node }} aria-label={ariaLabel} aria-orientation={orientation} data-slot="navigation-bar" data-orientation={orientation} data-item-layout={itemLayout} data-count={Children.count(children)} className={cn( "flex bg-m3-surface-container text-foreground", "data-[orientation=horizontal]:h-16 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:items-stretch", "data-[orientation=horizontal]:data-[item-layout=inline]:justify-center data-[orientation=horizontal]:data-[item-layout=inline]:gap-5", "data-[orientation=vertical]:w-24 data-[orientation=vertical]:flex-col data-[orientation=vertical]:gap-1", className, )} onKeyDown={handleKeyDown} > {children}

) } type NavigationBarItemProps = { badge?: ReactNode className?: string disabled?: boolean href?: string id?: string icon: ReactNode label: string onClick?: (event: MouseEvent) => void showLabel?: boolean style?: CSSProperties title?: string tooltip?: ReactNode tooltipDisabled?: boolean value: string } function NavigationBarItem({ badge, className, disabled, href, id, icon, label, onClick, showLabel = true, style, title, tooltip, tooltipDisabled = false, value, }: NavigationBarItemProps) { const navigation = useNavigation() const layout = navigation.itemLayout ?? "stacked" const stacked = layout === "stacked" const selected = navigation.value === value const tabbable = !disabled && (navigation.focusValue ?? navigation.value) === value const itemClassName = cn( "group/navigation-item relative flex min-w-0 flex-col items-center justify-center gap-1 text-m3-label-md text-muted-foreground outline-none", "focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-m3-secondary", "disabled:pointer-events-none disabled:text-m3-on-surface/38 aria-disabled:pointer-events-none aria-disabled:text-m3-on-surface/38", "in-data-[orientation=horizontal]:flex-1", "in-data-[orientation=vertical]:w-full in-data-[orientation=vertical]:flex-none", layout === "row" ? "min-h-14 rounded-full" : cn("min-h-16 rounded-m3-md", stacked && showLabel ? "py-1.5" : "py-1"), layout === "inline" && "in-data-[orientation=horizontal]:flex-none", className, ) const handleClick = (event: MouseEvent) => { if (disabled) { event.preventDefault() return } onClick?.(event) if (!event.defaultPrevented) navigation.onValueChange(value) } const content = ( <> {icon} {badge && {badge}} {!stacked && showLabel && {label}} {stacked && showLabel && ( {label} )} ) const item = href ? ( navigation.setFocusValue?.(value)} > {content} ) : ( ) if (!tooltip) return item return ( {!tooltipDisabled && {tooltip}} ) } export { NavigationBar, NavigationBarItem, type NavigationBarItemProps, type NavigationBarProps, type NavigationOrientation, } 4c:["$","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":[null,["$","$L4d",null,{"namespace":"@materialcn","registryDependencies":["https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json","https://guillermo-rebolledo.github.io/materialcn/r/navigation-context.json","https://guillermo-rebolledo.github.io/materialcn/r/tooltip.json","https://guillermo-rebolledo.github.io/materialcn/r/utils.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/components/ui/navigation-bar.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]