{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"navigation-menu","type":"registry:block","title":"Navigation Menu","description":"Site navbar with a logo slot, plain links and mega-menu panels: a hover pill glides between items, the dropdown viewport morphs its size to each panel while content slides in the direction you move, panels open on hover intent or click/Enter, close on Escape or outside click, support arrow-key navigation, and collapse below md into a hamburger sheet with accordion sections.","author":"kara ","dependencies":["clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/navigation-menu.tsx","type":"registry:component","target":"@components/motion/navigation-menu.tsx","content":"\"use client\";\n// karaui.kamisama-v0.my.id/components/blocks/navigation-menu\n\nimport { ChevronDown, Menu, X } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n type KeyboardEvent,\n type PointerEvent,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { SPRING_LAYOUT, SPRING_PANEL, SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\n/* ------------------------------------------------------------------------ */\n/* Types */\n/* ------------------------------------------------------------------------ */\n\nexport type NavigationMenuLinkRenderProps = {\n href: string;\n className: string;\n children: ReactNode;\n onClick?: () => void;\n};\n\ntype RenderLink = (props: NavigationMenuLinkRenderProps) => ReactElement;\n\nexport type NavigationMenuLink = {\n label: ReactNode;\n href: string;\n description?: ReactNode;\n icon?: ReactNode;\n /** Route through your router: `(p) => `. */\n render?: RenderLink;\n};\n\nexport type NavigationMenuSection = {\n title?: ReactNode;\n links: NavigationMenuLink[];\n};\n\nexport type NavigationMenuItem =\n | {\n id: string;\n label: ReactNode;\n /** A plain top-level link. */\n href: string;\n render?: RenderLink;\n }\n | {\n id: string;\n label: ReactNode;\n /** Link columns. Also feed the mobile accordion. */\n sections: NavigationMenuSection[];\n /** Extra column on desktop, e.g. a featured card. */\n featured?: ReactNode;\n /** Replace the desktop panel body entirely (mobile still uses `sections`). */\n content?: ReactNode;\n };\n\nexport interface NavigationMenuProps {\n items: NavigationMenuItem[];\n /** Brand slot on the left of the bar. */\n logo?: ReactNode;\n /** Right-hand slot (CTA buttons); hidden below `md`, repeated in the sheet. */\n actions?: ReactNode;\n /** Open panel id, `\"\"` when closed. */\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n /** Hover-intent delay before the first panel opens (ms). */\n openDelay?: number;\n /** Grace period after the pointer leaves before closing (ms). */\n closeDelay?: number;\n \"aria-label\"?: string;\n className?: string;\n}\n\ntype Size = { w: number; h: number };\ntype Geom = Size & { x: number };\n\nconst SLIDE = 28;\n\nconst panelVariants = {\n enter: ({ dir, reduce }: { dir: number; reduce: boolean }) => ({\n opacity: 0,\n x: reduce ? 0 : dir * SLIDE,\n }),\n center: { opacity: 1, x: 0 },\n exit: ({ dir, reduce }: { dir: number; reduce: boolean }) => ({\n opacity: 0,\n x: reduce ? 0 : dir * -SLIDE,\n transition: { duration: 0.14 },\n }),\n};\n\nconst linkRowClass =\n \"group/link flex items-start gap-3 rounded-xl p-2.5 outline-none transition-colors hover:bg-muted focus-visible:bg-muted\";\n\nfunction defaultLink({ href, className, children, onClick }: NavigationMenuLinkRenderProps) {\n return (\n \n {children}\n \n );\n}\n\nconst sectionKey = (section: NavigationMenuSection) =>\n section.links.map((l) => l.href).join(\"|\");\n\nfunction hasPanel(\n item: NavigationMenuItem,\n): item is Extract {\n return \"sections\" in item;\n}\n\n/* ------------------------------------------------------------------------ */\n/* Panel body */\n/* ------------------------------------------------------------------------ */\n\nfunction LinkRow({ link, onNavigate }: { link: NavigationMenuLink; onNavigate: () => void }) {\n return (link.render ?? defaultLink)({\n href: link.href,\n className: linkRowClass,\n onClick: onNavigate,\n children: (\n <>\n {link.icon ? (\n svg]:size-4\"\n >\n {link.icon}\n \n ) : null}\n \n {link.label}\n {link.description ? (\n {link.description}\n ) : null}\n \n \n ),\n });\n}\n\nfunction PanelBody({\n item,\n onNavigate,\n}: {\n item: Extract;\n onNavigate: () => void;\n}) {\n if (item.content) return <>{item.content};\n return (\n
\n {item.sections.map((section) => (\n
\n {section.title ? (\n

\n {section.title}\n

\n ) : null}\n
    \n {section.links.map((link) => (\n
  • \n \n
    • \n ))}\n
\n
\n ))}\n {item.featured ?
{item.featured}
: null}\n
\n );\n}\n\n/** Reports its natural (untransformed) size so the viewport can morph to it. */\nfunction Measured({ onSize, children }: { onSize: (size: Size) => void; children: ReactNode }) {\n const ref = useRef(null);\n useLayoutEffect(() => {\n const el = ref.current;\n if (!el) return;\n const report = () => onSize({ w: el.offsetWidth, h: el.offsetHeight });\n report();\n if (typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(report);\n observer.observe(el);\n return () => observer.disconnect();\n }, [onSize]);\n return (\n
\n {children}\n
\n );\n}\n\nconst focusables = (root: HTMLElement | null) =>\n Array.from(\n root?.querySelectorAll(\"a[href],button:not([disabled]),[tabindex]:not([tabindex='-1'])\") ?? [],\n );\n\n/* ------------------------------------------------------------------------ */\n/* NavigationMenu */\n/* ------------------------------------------------------------------------ */\n\nexport function NavigationMenu({\n items,\n logo,\n actions,\n value,\n defaultValue = \"\",\n onValueChange,\n openDelay = 150,\n closeDelay = 250,\n \"aria-label\": ariaLabel = \"Main\",\n className,\n}: NavigationMenuProps) {\n const reduce = useReducedMotion() ?? false;\n const uid = useId();\n const [internal, setInternal] = useState(defaultValue);\n const controlled = value !== undefined;\n const open = controlled ? value : internal;\n\n const [hovered, setHovered] = useState(null);\n const [dir, setDir] = useState(1);\n const [geom, setGeom] = useState(null);\n const [mobileOpen, setMobileOpen] = useState(false);\n\n const navRef = useRef(null);\n const listRef = useRef(null);\n const viewportRef = useRef(null);\n const actionsRef = useRef(null);\n const triggerRefs = useRef>({});\n const openRef = useRef(open);\n openRef.current = open;\n const sizeRef = useRef(null);\n const timer = useRef | null>(null);\n const openedBy = useRef<\"hover\" | \"click\">(\"click\");\n const focusPanelOnOpen = useRef(false);\n // The first frame after opening snaps to size; later switches morph.\n const snap = useRef(true);\n\n const panelIds = items.filter(hasPanel).map((i) => i.id);\n const panelIdsRef = useRef(panelIds);\n panelIdsRef.current = panelIds;\n const panelId = (id: string) => `${uid}-panel-${id}`;\n\n const setOpen = useCallback(\n (next: string) => {\n if (next === openRef.current) return;\n const from = panelIdsRef.current.indexOf(openRef.current);\n const to = panelIdsRef.current.indexOf(next);\n if (from >= 0 && to >= 0) setDir(to > from ? 1 : -1);\n if (!controlled) setInternal(next);\n onValueChange?.(next);\n },\n [controlled, onValueChange],\n );\n\n const clearTimer = () => {\n if (timer.current) clearTimeout(timer.current);\n timer.current = null;\n };\n useEffect(\n () => () => {\n if (timer.current) clearTimeout(timer.current);\n },\n [],\n );\n\n const schedule = (fn: () => void, ms: number) => {\n clearTimer();\n timer.current = setTimeout(fn, ms);\n };\n\n /* -- geometry ---------------------------------------------------------- */\n\n const place = useCallback((size: Size) => {\n const nav = navRef.current;\n const trigger = triggerRefs.current[openRef.current];\n if (!nav || !trigger) return;\n const navRect = nav.getBoundingClientRect();\n const tRect = trigger.getBoundingClientRect();\n const max = Math.max(0, navRect.width - size.w);\n const x = Math.min(Math.max(0, tRect.left - navRect.left - 8), max);\n setGeom((g) => (g && g.x === x && g.w === size.w && g.h === size.h ? g : { x, ...size }));\n }, []);\n\n // Last measured size per panel. A panel revived mid-exit (A → B → A fast)\n // keeps its mounted node and never re-measures, so reuse its cached size.\n const sizes = useRef>({});\n const onPanelSize = useCallback(\n (id: string) => (size: Size) => {\n sizes.current[id] = size;\n if (id !== openRef.current) return; // an exiting panel; ignore it\n sizeRef.current = size;\n place(size);\n },\n [place],\n );\n useLayoutEffect(() => {\n const cached = open ? sizes.current[open] : undefined;\n if (cached) {\n sizeRef.current = cached;\n place(cached);\n }\n }, [open, place]);\n // Stable per-id callbacks so Measured's effect does not re-subscribe.\n const sizeCallbacks = useRef void>>({});\n const sizeCallback = (id: string) => {\n sizeCallbacks.current[id] ??= onPanelSize(id);\n return sizeCallbacks.current[id];\n };\n\n useEffect(() => {\n snap.current = geom === null;\n }, [geom]);\n\n useEffect(() => {\n if (!open) {\n setGeom(null);\n sizeRef.current = null;\n }\n }, [open]);\n\n useEffect(() => {\n if (!open) return;\n const onResize = () => sizeRef.current && place(sizeRef.current);\n window.addEventListener(\"resize\", onResize);\n return () => window.removeEventListener(\"resize\", onResize);\n }, [open, place]);\n\n /* -- dismissal --------------------------------------------------------- */\n\n useEffect(() => {\n if (!open && !mobileOpen) return;\n const onPointer = (event: globalThis.PointerEvent) => {\n if (navRef.current?.contains(event.target as Node)) return;\n setOpen(\"\");\n setMobileOpen(false);\n };\n document.addEventListener(\"pointerdown\", onPointer);\n return () => document.removeEventListener(\"pointerdown\", onPointer);\n }, [open, mobileOpen, setOpen]);\n\n useEffect(() => {\n if (!open || !focusPanelOnOpen.current || !geom) return;\n focusPanelOnOpen.current = false;\n focusables(viewportRef.current)[0]?.focus();\n }, [open, geom]);\n\n const close = (refocus: boolean) => {\n const current = openRef.current;\n clearTimer();\n setOpen(\"\");\n if (refocus && current) triggerRefs.current[current]?.focus();\n };\n\n /* -- pointer intent ---------------------------------------------------- */\n\n const onTriggerEnter = (event: PointerEvent, id: string) => {\n if (event.pointerType !== \"mouse\") return;\n setHovered(id);\n if (openRef.current) {\n clearTimer();\n openedBy.current = \"hover\";\n setOpen(id); // already open: switch instantly, no intent delay\n } else {\n schedule(() => {\n openedBy.current = \"hover\";\n setOpen(id);\n }, openDelay);\n }\n };\n\n const onLinkEnter = (event: PointerEvent, id: string) => {\n if (event.pointerType !== \"mouse\") return;\n setHovered(id);\n if (openRef.current) schedule(() => setOpen(\"\"), closeDelay);\n else clearTimer();\n };\n\n const onRegionLeave = (event: PointerEvent) => {\n if (event.pointerType !== \"mouse\") return;\n if (openRef.current) schedule(() => setOpen(\"\"), closeDelay);\n else clearTimer();\n };\n\n const onRegionEnter = (event: PointerEvent) => {\n if (event.pointerType !== \"mouse\") return;\n if (openRef.current) clearTimer();\n };\n\n const onTriggerClick = (id: string) => {\n clearTimer();\n if (openRef.current === id) {\n // A hover-opened panel stays put on the click that usually follows.\n if (openedBy.current === \"hover\") openedBy.current = \"click\";\n else setOpen(\"\");\n return;\n }\n openedBy.current = \"click\";\n setOpen(id);\n };\n\n /* -- keyboard ---------------------------------------------------------- */\n\n // Top-level controls are each
  • 's own /
    • \n );\n }\n return (\n onTriggerEnter(e, item.id)}\n >\n {pill}\n {\n triggerRefs.current[item.id] = el;\n }}\n type=\"button\"\n aria-expanded={isOpen}\n aria-controls={isOpen ? panelId(item.id) : undefined}\n onClick={() => onTriggerClick(item.id)}\n className={topClass}\n >\n {item.label}\n \n \n \n \n \n );\n })}\n \n\n \n\n setMobileOpen((o) => !o)}\n onKeyDown={(e) => {\n if (e.key === \"Escape\") setMobileOpen(false);\n }}\n className=\"relative ml-auto inline-flex size-9 items-center justify-center rounded-lg text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring md:hidden\"\n >\n \n \n {mobileOpen ? : }\n \n \n \n \n\n {/* Desktop viewport ------------------------------------------------ */}\n \n {openItem && hasPanel(openItem) ? (\n // biome-ignore lint/a11y/noStaticElementInteractions: hover-intent region and key delegation for the panel's links\n \n\n {/* Mobile sheet ----------------------------------------------------- */}\n \n {mobileOpen ? (\n {\n setMobileOpen(false);\n if (refocus) navRef.current?.querySelector(\"[aria-label='Close menu']\")?.focus();\n }}\n />\n ) : null}\n \n \n );\n}\n\n/* ------------------------------------------------------------------------ */\n/* Mobile */\n/* ------------------------------------------------------------------------ */\n\nfunction MobileSheet({\n items,\n actions,\n reduce,\n onClose,\n}: {\n items: NavigationMenuItem[];\n actions?: ReactNode;\n reduce: boolean;\n onClose: (refocus: boolean) => void;\n}) {\n const [section, setSection] = useState(null);\n const uid = useId();\n\n return (\n {\n if (e.key === \"Escape\") {\n e.preventDefault();\n onClose(true);\n }\n }}\n className=\"absolute inset-x-0 top-full mt-2 max-h-[70vh] overflow-y-auto rounded-2xl border border-border bg-popover p-2 text-popover-foreground shadow-xl [scrollbar-width:none] md:hidden [&::-webkit-scrollbar]:hidden\"\n >\n
      \n {items.map((item) => {\n if (!hasPanel(item)) {\n return (\n
    • \n {(item.render ?? defaultLink)({\n href: item.href,\n onClick: () => onClose(false),\n className:\n \"flex h-12 items-center rounded-xl px-3 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:bg-muted\",\n children: item.label,\n })}\n
      • \n );\n }\n const expanded = section === item.id;\n const regionId = `${uid}-${item.id}`;\n return (\n
    • \n setSection(expanded ? null : item.id)}\n className=\"flex h-12 w-full items-center justify-between rounded-xl px-3 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:bg-muted\"\n >\n {item.label}\n \n \n \n \n \n {expanded ? (\n \n
      \n {item.sections.map((s) => (\n
      \n {s.title ? (\n

      \n {s.title}\n

      \n ) : null}\n
        \n {s.links.map((link) => (\n
      • \n onClose(false)} />\n
        • \n ))}\n
      \n
      \n ))}\n
      \n \n ) : null}\n       \n
      • \n );\n })}\n
    \n {actions ? (\n
    \n {actions}\n
    \n ) : null}\n \n );\n}\n"},{"path":"lib/ease.ts","type":"registry:lib","target":"@lib/ease.ts","content":"// Shared motion tokens. Easing curves mirror the CSS custom properties in\n// globals.css; springs are the canonical physics used across components.\n// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.\n\nexport const EASE_OUT = [0.16, 1, 0.3, 1] as const;\nexport const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\nexport const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;\n\n/** CSS string form of EASE_OUT for inline style transitions. */\nexport const EASE_OUT_CSS = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/** Press feedback on buttons and other tappable surfaces. */\nexport const SPRING_PRESS = {\n type: \"spring\",\n stiffness: 500,\n damping: 30,\n mass: 0.6,\n} as const;\n\n/** Content swaps — label/icon slots trading places inside a control. */\nexport const SPRING_SWAP = {\n type: \"spring\",\n stiffness: 460,\n damping: 30,\n mass: 0.55,\n} as const;\n\n/** Overlay panel entrances — modals and sheets summoned by pointer. */\nexport const SPRING_PANEL = {\n type: \"spring\",\n stiffness: 420,\n damping: 40,\n mass: 0.5,\n} as const;\n\n/** Shared-layout glides — pills, indicators and panels morphing between positions. */\nexport const SPRING_LAYOUT = {\n type: \"spring\",\n stiffness: 360,\n damping: 32,\n mass: 0.6,\n} as const;\n\n/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */\nexport const SPRING_MOUSE = {\n stiffness: 200,\n damping: 15,\n mass: 0.3,\n} as const;\n\n/** Dragged handles and fills (sliders) — critically damped `useSpring` config,\n * so the value follows the pointer butterily and never rebounds off an end. */\nexport const SPRING_GLIDE = {\n stiffness: 700,\n damping: 50,\n mass: 0.5,\n} as const;\n"},{"path":"lib/utils.ts","type":"registry:lib","target":"@lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"}]}