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:T1e59,"use client"; import * as React from "react"; import { motion, useMotionValue, useSpring, useTransform, type SpringOptions, AnimatePresence, } from "motion/react"; import { cn } from "@/lib/utils"; export interface DockItem { icon: React.ReactNode; label: string; /** if provided, item renders as an `` */ href?: string; onClick?: () => void; /** renders a visual separator after this item */ separator?: boolean; } export interface DockProps { items: DockItem[]; /** @default 1.8 */ magnification?: number; /** cursor radius (px) within which neighbors are magnified — @default 120 */ distance?: number; /** @default 40 */ iconSize?: number; /** @default 4 */ gap?: number; /** @default 16 */ borderRadius?: number; /** show labels permanently instead of on hover — @default false */ alwaysShowLabels?: boolean; springOptions?: SpringOptions; className?: string; } const DEFAULT_SPRING: SpringOptions = { stiffness: 400, damping: 25, mass: 0.4, }; function DockSeparator() { return (

); } function DockIcon({ item, mouseX, magnification, distance, iconSize, borderRadius, alwaysShowLabels, springOptions, onHover, iconRef: externalIconRef, }: { item: DockItem; mouseX: ReturnType>; magnification: number; distance: number; iconSize: number; borderRadius: number; alwaysShowLabels: boolean; springOptions: SpringOptions; onHover: (ref: React.RefObject | null) => void; iconRef: React.RefObject; }) { const wrapperRef = React.useRef(null); const distanceFromMouse = useTransform(mouseX, (val) => { const el = wrapperRef.current; if (!el) return distance * 100; const rect = el.getBoundingClientRect(); return Math.abs(val - (rect.left + rect.width / 2)); }); const gaussian = (d: number) => (magnification - 1) * Math.exp(-(d * d) / (2 * distance * distance)) + 1; const widthRaw = useTransform( distanceFromMouse, (d) => iconSize * gaussian(d), ); const heightRaw = useTransform( distanceFromMouse, (d) => iconSize * gaussian(d), ); const width = useSpring(widthRaw, springOptions); const height = useSpring(heightRaw, springOptions); const Tag = item.href ? "a" : "button"; return ( // fixed height in-flow; width animates to push neighbors {/* absolute, anchored bottom so icon grows upward */} onHover(externalIconRef)} onMouseLeave={() => onHover(null)} aria-label={item.label} style={{ borderRadius }} className={cn( "flex h-full w-full items-center justify-center", "text-foreground/70 transition-colors duration-150", "hover:bg-foreground/[0.06] hover:text-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/20", "[&_svg]:size-[55%]", )} > {item.icon} {alwaysShowLabels && ( {item.label} )} ); } export function Dock({ items, magnification = 1.8, distance = 120, iconSize = 40, gap = 4, borderRadius = 16, alwaysShowLabels = false, springOptions = DEFAULT_SPRING, className, }: DockProps) { const mouseX = useMotionValue(Infinity); const dockRef = React.useRef(null); const iconRefs = React.useRef[]>( items.map(() => React.createRef()), ); const [hoveredIndex, setHoveredIndex] = React.useState(null); const [tooltipX, setTooltipX] = React.useState(0); const [tooltipBottomOffset, setTooltipBottomOffset] = React.useState(0); React.useEffect(() => { if (hoveredIndex === null) return; let raf: number; const update = () => { const iconEl = iconRefs.current[hoveredIndex]?.current; const dockEl = dockRef.current; if (iconEl && dockEl) { const iconRect = iconEl.getBoundingClientRect(); const dockRect = dockEl.getBoundingClientRect(); setTooltipX(iconRect.left - dockRect.left + iconRect.width / 2); setTooltipBottomOffset(dockRect.bottom - iconRect.top); } raf = requestAnimationFrame(update); }; raf = requestAnimationFrame(update); return () => cancelAnimationFrame(raf); }, [hoveredIndex]); const handleHover = React.useCallback( (ref: React.RefObject | null) => { if (ref === null) { setHoveredIndex(null); return; } const idx = iconRefs.current.findIndex((r) => r === ref); setHoveredIndex(idx >= 0 ? idx : null); }, [], ); return ( mouseX.set(e.clientX)} onMouseLeave={() => mouseX.set(Infinity)} > {items.map((item, i) => ( {item.separator && } ))} {!alwaysShowLabels && ( {hoveredIndex !== null && ( {items[hoveredIndex].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","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":"@unlumen-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/components/unlumen/dock/index.tsx","content":"$52","type":"registry:ui","target":"components/unlumen-ui/dock.tsx"}],"className":"h-[70svh] min-h-80"}]]}]