"use client"; import * as React from "react"; import { motion, useMotionValue, useSpring, useTransform, type MotionValue } from "motion/react"; import { cn, useReducedMotion } from "@kineticui/core"; type DockContextValue = { mouseX: MotionValue; base: number; magnification: number; distance: number; reduced: boolean }; const DockContext = React.createContext(null); export type DockProps = { children: React.ReactNode; /** Icon size at rest, px. */ baseSize?: number; /** Icon size directly under the cursor, px. */ magnification?: number; /** How far (px) the magnification reaches. */ distance?: number; className?: string; "aria-label"?: string; }; /** macOS-style dock: icons grow as the pointer passes over them. */ export function Dock({ children, baseSize = 44, magnification = 72, distance = 140, className, ...rest }: DockProps) { const mouseX = useMotionValue(Infinity); const reduced = useReducedMotion(); return ( ); } export type DockItemProps = { icon: React.ReactNode; label: string; onClick?: () => void; href?: string; active?: boolean; }; export function DockItem({ icon, label, onClick, href, active }: DockItemProps) { const ctx = React.useContext(DockContext); if (!ctx) throw new Error("DockItem must be used inside "); const ref = React.useRef(null); const [hover, setHover] = React.useState(false); const dist = useTransform(ctx.mouseX, (x) => { const r = ref.current?.getBoundingClientRect(); return r ? x - (r.left + window.scrollX) - r.width / 2 : Infinity; }); const sizeRaw = useTransform(dist, [-ctx.distance, 0, ctx.distance], [ctx.base, ctx.magnification, ctx.base]); const size = useSpring(sizeRaw, { mass: 0.1, stiffness: 160, damping: 13 }); const inner = ( {icon} {hover ? ( {label} ) : null} {active ? : null} ); const common = { "aria-label": label, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onFocus: () => setHover(true), onBlur: () => setHover(false), className: "rounded-[14px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground", }; return href ? ( {inner} ) : ( ); }

Dock

Installation

Exports