shadcn/app/public/registry/styles/default/dock.json

{
  "name": "dock",
  "description": "macOS-style dock with animations",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "name": "dock.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface DockProps {\n  className?: string\n  children?: React.ReactNode\n  position?: \"bottom\" | \"left\" | \"right\"\n  magnification?: number\n  distance?: number\n}\n\ninterface DockItemProps {\n  className?: string\n  children?: React.ReactNode\n  onClick?: () => void\n  tooltip?: string\n  magnification?: number\n  distance?: number\n}\n\nconst DockContext = React.createContext<{\n  magnification: number\n  distance: number\n}>({\n  magnification: 60,\n  distance: 140,\n})\n\nconst Dock = React.forwardRef<HTMLDivElement, DockProps>(\n  (\n    {\n      className,\n      children,\n      position = \"bottom\",\n      magnification = 60,\n      distance = 140,\n    },\n    ref\n  ) => {\n    const positionClasses = {\n      bottom: \"bottom-0 left-1/2 -translate-x-1/2 flex-row\",\n      left: \"left-0 top-1/2 -translate-y-1/2 flex-col\",\n      right: \"right-0 top-1/2 -translate-y-1/2 flex-col\",\n    }\n\n    return (\n      <DockContext.Provider value={{ magnification, distance }}>\n        <div\n          ref={ref}\n          className={cn(\n            \"fixed z-50 flex items-end gap-1 rounded-2xl border border-white/10 bg-black/10 p-2 backdrop-blur-xl\",\n            \"shadow-2xl shadow-black/20\",\n            \"before:absolute before:inset-0 before:rounded-2xl before:bg-gradient-to-b before:from-white/10 before:to-transparent before:opacity-50\",\n            positionClasses[position],\n            className\n          )}\n        >\n          {children}\n        </div>\n      </DockContext.Provider>\n    )\n  }\n)\nDock.displayName = \"Dock\"\n\nconst DockItem = React.forwardRef<HTMLButtonElement, DockItemProps>(\n  (\n    {\n      className,\n      children,\n      onClick,\n      tooltip,\n      magnification: itemMagnification,\n      distance: itemDistance,\n    },\n    ref\n  ) => {\n    const buttonRef = React.useRef<HTMLButtonElement>(null)\n    const { magnification: contextMagnification, distance: contextDistance } =\n      React.useContext(DockContext)\n    const magnification = itemMagnification ?? contextMagnification\n    const distance = itemDistance ?? contextDistance\n\n    const [isHovered, setIsHovered] = React.useState(false)\n\n    const mouseX = useMotionValue(Infinity)\n\n    const springConfig = { mass: 0.1, stiffness: 150, damping: 12 }\n    const size = useSpring(\n      useTransform(\n        mouseX,\n        [-distance, 0, distance],\n        [48, 48 + magnification, 48]\n      ),\n      springConfig\n    )\n\n    const handleMouseMove = (e: React.MouseEvent) => {\n      if (!buttonRef.current) return\n      const rect = buttonRef.current.getBoundingClientRect()\n      const centerX = rect.left + rect.width / 2\n      mouseX.set(e.clientX - centerX)\n    }\n\n    const handleMouseLeave = () => {\n      mouseX.set(Infinity)\n      setIsHovered(false)\n    }\n\n    return (\n      <motion.div\n        className=\"relative\"\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        onMouseEnter={() => setIsHovered(true)}\n      >\n        {tooltip && isHovered && (\n          <motion.div\n            initial={{ opacity: 0, y: 10, scale: 0.9 }}\n            animate={{ opacity: 1, y: 0, scale: 1 }}\n            exit={{ opacity: 0, y: 5, scale: 0.95 }}\n            transition={{ duration: 0.15 }}\n            className=\"absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg bg-black/80 px-2 py-1 text-xs text-white backdrop-blur-md\"\n          >\n            {tooltip}\n            <div className=\"absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-black/80\" />\n          </motion.div>\n        )}\n        <motion.button\n          ref={buttonRef}\n          style={{\n            width: size,\n            height: size,\n          }}\n          whileTap={{ scale: 0.9 }}\n          onClick={onClick}\n          className={cn(\n            \"relative flex items-center justify-center rounded-xl bg-white/10 backdrop-blur-md transition-colors\",\n            \"hover:bg-white/20\",\n            \"focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50\",\n            className\n          )}\n        >\n          <motion.div\n            style={{\n              width: size,\n              height: size,\n            }}\n            className=\"flex items-center justify-center\"\n          >\n            {children}\n          </motion.div>\n          <motion.div\n            className=\"absolute inset-0 rounded-xl\"\n            style={{\n              background:\n                \"linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%)\",\n            }}\n          />\n        </motion.button>\n      </motion.div>\n    )\n  }\n)\nDockItem.displayName = \"DockItem\"\n\nexport { Dock, DockItem }\n"
    }
  ],
  "type": "components:ui"
}