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

{
  "name": "macos-dock",
  "description": "macOS dock with hover magnification",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "name": "macos-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  magnification?: number\n  distance?: number\n}\n\ninterface DockItemProps {\n  className?: string\n  children?: React.ReactNode\n  onClick?: () => void\n  tooltip?: string\n}\n\nconst DockContext = React.createContext<{\n  magnification: number\n  distance: number\n  mouseX: any\n}>({\n  magnification: 60,\n  distance: 140,\n  mouseX: null,\n})\n\nconst Dock = React.forwardRef<HTMLDivElement, DockProps>(\n  ({ className, children, magnification = 60, distance = 140 }, ref) => {\n    const mouseX = useMotionValue(Infinity)\n\n    return (\n      <DockContext.Provider value={{ magnification, distance, mouseX }}>\n        <motion.div\n          ref={ref}\n          onMouseMove={(e) => mouseX.set(e.pageX)}\n          onMouseLeave={() => mouseX.set(Infinity)}\n          className={cn(\n            \"mx-auto flex h-16 items-end gap-2 rounded-2xl border border-white/10 bg-black/10 px-3 pb-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            className\n          )}\n        >\n          {children}\n        </motion.div>\n      </DockContext.Provider>\n    )\n  }\n)\nDock.displayName = \"Dock\"\n\nconst DockItem = React.forwardRef<HTMLButtonElement, DockItemProps>(\n  ({ className, children, onClick, tooltip }, ref) => {\n    const buttonRef = React.useRef<HTMLButtonElement>(null)\n    const { magnification, distance, mouseX } = React.useContext(DockContext)\n    const [isHovered, setIsHovered] = React.useState(false)\n\n    const distanceCalc = useTransform(mouseX, (val: number) => {\n      const bounds = buttonRef.current?.getBoundingClientRect() ?? {\n        x: 0,\n        width: 0,\n      }\n      return val - bounds.x - bounds.width / 2\n    })\n\n    const widthSync = useTransform(\n      distanceCalc,\n      [-distance, 0, distance],\n      [48, 48 + magnification, 48]\n    )\n\n    const width = useSpring(widthSync, {\n      mass: 0.1,\n      stiffness: 150,\n      damping: 12,\n    })\n\n    return (\n      <motion.div\n        className=\"relative\"\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\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={{ width }}\n          whileTap={{ scale: 0.95 }}\n          onClick={onClick}\n          className={cn(\n            \"aspect-square w-12 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            \"relative overflow-hidden\",\n            className\n          )}\n        >\n          <div className=\"flex h-full w-full items-center justify-center\">\n            {children}\n          </div>\n          <div\n            className=\"pointer-events-none 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"
}