4c: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"] 4d: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"] 4e:T26be,"use client"; import { type MotionStyle, type MotionValue, motion, useAnimationFrame, useMotionValue, useReducedMotion, useSpring, useTransform, useVelocity, } from "motion/react"; import type { ReactNode } from "react"; import { useCallback, useEffect, useRef } from "react"; import { cn } from "@/lib/utils"; export interface DockItem { id: string; label: string; icon: ReactNode; onClick?: () => void; } export interface DockProps { items: readonly DockItem[]; ariaLabel?: string; baseSize?: number; className?: string; colors?: DockColors; influence?: number; layout?: DockLayout; maxSize?: number; motion?: DockMotion; } export type DockSpring = { bounce?: number; damping?: number; mass?: number; stiffness?: number; visualDuration?: number; }; export type DockColors = { focusRing?: string; highlight?: string; icon?: string; item?: string; surface?: string; }; export type DockLayout = { gap?: number; height?: number; iconScale?: number; itemRadius?: number; padding?: number; radius?: number; }; export type DockMotion = { highlightSpring?: DockSpring; jelly?: number; sizeSpring?: DockSpring; tapScale?: number; visibilitySpring?: DockSpring; }; type PhysicalSpring = Required>; type DockButtonStyle = MotionStyle & { "--tw-ring-color"?: string }; const DEFAULT_SIZE_SPRING = { mass: 0.1, stiffness: 170, damping: 14, } satisfies PhysicalSpring; const DEFAULT_HIGHLIGHT_SPRING = { mass: 0.22, stiffness: 200, damping: 20, } satisfies PhysicalSpring; const DEFAULT_VISIBILITY_SPRING = { mass: 1, stiffness: 200, damping: 25, } satisfies PhysicalSpring; const DEFAULT_LAYOUT = { gap: 12, height: 40, iconScale: 0.55, itemRadius: 12, padding: 8, radius: 16, } satisfies Required; function resolveSpring(spring: DockSpring | undefined, fallback: PhysicalSpring) { if (spring?.visualDuration !== undefined || spring?.bounce !== undefined) { return { bounce: spring.bounce ?? 0, visualDuration: spring.visualDuration ?? 0.35, }; } return { damping: spring?.damping ?? fallback.damping, mass: spring?.mass ?? fallback.mass, stiffness: spring?.stiffness ?? fallback.stiffness, }; } export function Dock({ items, ariaLabel = "Dock", baseSize = 44, className = "", colors, influence = 140, layout, maxSize = 80, motion: motionConfig, }: DockProps) { const reduceMotion = useReducedMotion(); const containerRef = useRef(null); // The DOM node of the currently hovered/focused button. A ref, not state, // so sweeping the mouse never triggers a React re-render. const activeRef = useRef(null); const mouseX = useMotionValue(Infinity); const targetX = useMotionValue(0); const targetY = useMotionValue(0); const targetW = useMotionValue(baseSize); const targetH = useMotionValue(baseSize); const targetOpacity = useMotionValue(0); const resolvedLayout = { ...DEFAULT_LAYOUT, ...layout }; const highlightSpringConfig = resolveSpring( motionConfig?.highlightSpring, DEFAULT_HIGHLIGHT_SPRING, ); const visibilitySpringConfig = resolveSpring( motionConfig?.visibilitySpring, DEFAULT_VISIBILITY_SPRING, ); const xSpring = useSpring(targetX, highlightSpringConfig); const ySpring = useSpring(targetY, highlightSpringConfig); const wSpring = useSpring(targetW, highlightSpringConfig); const hSpring = useSpring(targetH, highlightSpringConfig); const opacitySpring = useSpring(targetOpacity, visibilitySpringConfig); const x = reduceMotion ? targetX : xSpring; const y = reduceMotion ? targetY : ySpring; const width = reduceMotion ? targetW : wSpring; const height = reduceMotion ? targetH : hSpring; const opacity = reduceMotion ? targetOpacity : opacitySpring; const handleActivate = useCallback((element: HTMLButtonElement | null) => { activeRef.current = element; }, []); useAnimationFrame(() => { const el = activeRef.current; const container = containerRef.current; if (!el || !container || !el.isConnected) { activeRef.current = null; targetOpacity.set(0); return; } const cb = container.getBoundingClientRect(); const b = el.getBoundingClientRect(); targetX.set(b.left - cb.left); targetY.set(b.top - cb.top); targetW.set(b.width); targetH.set(b.height); targetOpacity.set(1); }); return ( ); } function DockButton({ item, mouseX, baseSize, maxSize, influence, colors, iconScale, itemRadius, jelly, onActivate, sizeSpring, tapScale, }: { item: DockItem; mouseX: MotionValue; baseSize: number; maxSize: number; influence: number; colors?: DockColors; iconScale: number; itemRadius: number; jelly: number; onActivate: (el: HTMLButtonElement | null) => void; sizeSpring?: DockSpring; tapScale: number; }) { const ref = useRef(null); const reduceMotion = useReducedMotion(); const restingSize = useMotionValue(baseSize); const expandedSize = useMotionValue(maxSize); const influenceDistance = useMotionValue(influence); const distance = useTransform(mouseX, (x) => { const bounds = ref.current?.getBoundingClientRect(); if (!bounds) return Infinity; return x - (bounds.x + bounds.width / 2); }); const targetSize = useTransform( [distance, restingSize, expandedSize, influenceDistance], ([latestDistance, latestBaseSize, latestMaxSize, latestInfluence]: number[]) => { const proximity = 1 - Math.min(Math.abs(latestDistance) / latestInfluence, 1); return latestBaseSize + (latestMaxSize - latestBaseSize) * proximity; }, ); useEffect(() => { restingSize.set(baseSize); expandedSize.set(maxSize); influenceDistance.set(Math.max(influence, 1)); }, [baseSize, expandedSize, influence, influenceDistance, maxSize, restingSize]); const sizeSpringConfig = resolveSpring(sizeSpring, DEFAULT_SIZE_SPRING); // Size is owned solely by this spring — nothing competes with it. const size = useSpring(reduceMotion ? restingSize : targetSize, sizeSpringConfig); // Subtle "jelly" squish from how fast the icon is growing/shrinking. const sizeVelocity = useVelocity(size); const iconScaleX = useTransform( sizeVelocity, [-500, 0, 500], reduceMotion ? [1, 1, 1] : [1 - jelly, 1, 1 + jelly], ); const iconScaleY = useTransform( sizeVelocity, [-500, 0, 500], reduceMotion ? [1, 1, 1] : [1 + jelly * 0.75, 1, 1 - jelly * 0.5], ); const buttonStyle: DockButtonStyle = { width: size, height: size, backgroundColor: colors?.item, borderRadius: itemRadius, color: colors?.icon, "--tw-ring-color": colors?.focusRing, }; return ( onActivate(ref.current)} onFocus={() => onActivate(ref.current)} whileTap={reduceMotion ? undefined : { scale: tapScale }} // Transparent + z-10 so the shared highlight shows through behind it. className="group relative grid place-items-center bg-neutral-400 text-zinc-200 outline-none ring-cyan-400/70 transition-colors focus-visible:ring-2 dark:bg-neutral-800" aria-label={item.label} > {item.icon} ); } 4b:["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ui-components/dock.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]