51: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"] 52: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"] 53:T1408,"use client"; import { useId, useRef, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; // Indicators move on every arrow key, so they settle fast with barely any overshoot. const INDICATOR_SPRING = { type: "spring", duration: 0.3, bounce: 0.1 } as const; export type MorphingNavItem = { value: string; label: React.ReactNode; icon?: React.ComponentType<{ className?: string }>; /** When set, the item renders as a link instead of a button. */ href?: string; disabled?: boolean; }; export type MorphingNavProps = Omit< React.ComponentProps<"div">, "defaultValue" | "onChange" > & { items: MorphingNavItem[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Element used for items with an `href`, e.g. Next.js `Link`. */ linkAs?: React.ElementType>; itemClassName?: string; indicatorClassName?: string; }; export function MorphingNav({ items, value, defaultValue, onValueChange, linkAs: LinkComponent = "a", className, itemClassName, indicatorClassName, ...props }: MorphingNavProps) { const indicatorId = useId(); const reduceMotion = useReducedMotion(); const itemRefs = useRef<(HTMLElement | null)[]>([]); const [uncontrolledValue, setUncontrolledValue] = useState( defaultValue ?? items[0]?.value ); const activeValue = value ?? uncontrolledValue; // Links navigate with Tab; buttons behave as a single-choice group with arrow keys. const isLinkGroup = items.some((item) => item.href); // A nav landmark only makes sense when the items are links. const Root = (isLinkGroup ? "nav" : "div") as "div"; const select = (next: string) => { if (value === undefined) setUncontrolledValue(next); onValueChange?.(next); }; const handleKeyDown = (event: React.KeyboardEvent, index: number) => { if (isLinkGroup) return; const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0; if (!step) return; event.preventDefault(); for (let offset = 1; offset <= items.length; offset++) { const nextIndex = (index + step * offset + items.length) % items.length; if (!items[nextIndex].disabled) { select(items[nextIndex].value); itemRefs.current[nextIndex]?.focus(); return; } } }; return (

{items.map((item, index) => { const isActive = item.value === activeValue; const Icon = item.icon; const content = ( <> {isActive && ( )} {Icon && } {item.label} ); const itemClasses = cn( "relative rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors outline-none", "focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", isActive ? "text-primary-foreground" : "text-muted-foreground hover:text-foreground", itemClassName ); if (item.href) { return ( { itemRefs.current[index] = node; }} href={item.href} aria-current={isActive ? "page" : undefined} aria-disabled={item.disabled || undefined} onClick={() => select(item.value)} className={itemClasses} > {content} ); } return ( ); })}

); } 50:["$","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","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@devsloka","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/registry/ui/morphing-nav.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]