{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dock",
  "type": "registry:ui",
  "title": "Dock",
  "description": "An implementation of the MacOS dock using react + tailwindcss + motion",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/magicui/dock.tsx",
      "content": "\"use client\"\n\nimport React, { useRef, type PropsWithChildren } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport {\n  motion,\n  MotionValue,\n  useMotionValue,\n  useSpring,\n  useTransform,\n} from \"motion/react\"\nimport type { MotionProps } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface DockProps extends VariantProps<typeof dockVariants> {\n  className?: string\n  iconSize?: number\n  iconMagnification?: number\n  disableMagnification?: boolean\n  iconDistance?: number\n  direction?: \"top\" | \"middle\" | \"bottom\"\n  children: React.ReactNode\n}\n\nconst DEFAULT_SIZE = 40\nconst DEFAULT_MAGNIFICATION = 60\nconst DEFAULT_DISTANCE = 140\nconst DEFAULT_DISABLEMAGNIFICATION = false\n\nconst dockVariants = cva(\n  \"supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max items-center justify-center gap-2 rounded-2xl border p-2 backdrop-blur-md\"\n)\n\nconst Dock = React.forwardRef<HTMLDivElement, DockProps>(\n  (\n    {\n      className,\n      children,\n      iconSize = DEFAULT_SIZE,\n      iconMagnification = DEFAULT_MAGNIFICATION,\n      disableMagnification = DEFAULT_DISABLEMAGNIFICATION,\n      iconDistance = DEFAULT_DISTANCE,\n      direction = \"middle\",\n      ...props\n    },\n    ref\n  ) => {\n    const mouseX = useMotionValue(Infinity)\n\n    const renderChildren = () => {\n      return React.Children.map(children, (child) => {\n        if (\n          React.isValidElement<DockIconProps>(child) &&\n          child.type === DockIcon\n        ) {\n          return React.cloneElement(child, {\n            ...child.props,\n            mouseX: mouseX,\n            size: iconSize,\n            magnification: iconMagnification,\n            disableMagnification: disableMagnification,\n            distance: iconDistance,\n          })\n        }\n        return child\n      })\n    }\n\n    return (\n      <motion.div\n        ref={ref}\n        onMouseMove={(e) => mouseX.set(e.pageX)}\n        onMouseLeave={() => mouseX.set(Infinity)}\n        {...props}\n        className={cn(dockVariants({ className }), {\n          \"items-start\": direction === \"top\",\n          \"items-center\": direction === \"middle\",\n          \"items-end\": direction === \"bottom\",\n        })}\n      >\n        {renderChildren()}\n      </motion.div>\n    )\n  }\n)\n\nDock.displayName = \"Dock\"\n\nexport interface DockIconProps extends Omit<\n  MotionProps & React.HTMLAttributes<HTMLDivElement>,\n  \"children\"\n> {\n  size?: number\n  magnification?: number\n  disableMagnification?: boolean\n  distance?: number\n  mouseX?: MotionValue<number>\n  className?: string\n  children?: React.ReactNode\n  props?: PropsWithChildren\n}\n\nconst DockIcon = ({\n  size = DEFAULT_SIZE,\n  magnification = DEFAULT_MAGNIFICATION,\n  disableMagnification,\n  distance = DEFAULT_DISTANCE,\n  mouseX,\n  className,\n  children,\n  ...props\n}: DockIconProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const padding = Math.max(6, size * 0.2)\n  const defaultMouseX = useMotionValue(Infinity)\n\n  const distanceCalc = useTransform(mouseX ?? defaultMouseX, (val: number) => {\n    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 }\n    return val - bounds.x - bounds.width / 2\n  })\n\n  const targetSize = disableMagnification ? size : magnification\n\n  const sizeTransform = useTransform(\n    distanceCalc,\n    [-distance, 0, distance],\n    [size, targetSize, size]\n  )\n\n  const scaleSize = useSpring(sizeTransform, {\n    mass: 0.1,\n    stiffness: 150,\n    damping: 12,\n  })\n\n  return (\n    <motion.div\n      ref={ref}\n      style={{ width: scaleSize, height: scaleSize, padding }}\n      className={cn(\n        \"flex aspect-square cursor-pointer items-center justify-center rounded-full\",\n        disableMagnification && \"hover:bg-muted-foreground transition-colors\",\n        className\n      )}\n      {...props}\n    >\n      <div>{children}</div>\n    </motion.div>\n  )\n}\n\nDockIcon.displayName = \"DockIcon\"\n\nexport { Dock, DockIcon, dockVariants }\n",
      "type": "registry:ui"
    }
  ]
}