{
  "name": "dock",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "ui/dock.tsx",
      "content": "import { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DockProps {\n  /** Distance threshold for magnification effect */\n  magnification?: number;\n  /** Maximum scale factor when hovered */\n  maxScale?: number;\n  /** Base size of dock items in pixels */\n  iconSize?: number;\n  /** Distance from mouse to apply magnification */\n  distance?: number;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nconst DockContext = React.createContext<{\n  mouseX: ReturnType<typeof useMotionValue<number>>;\n  magnification: number;\n  maxScale: number;\n  iconSize: number;\n  distance: number;\n} | null>(null);\n\nconst Dock = React.forwardRef<HTMLDivElement, DockProps>(\n  (\n    {\n      className,\n      children,\n      magnification = 60,\n      maxScale = 1.5,\n      iconSize = 48,\n      distance = 140,\n    },\n    ref,\n  ) => {\n    const mouseX = useMotionValue(Infinity);\n\n    return (\n      <DockContext.Provider\n        value={{ mouseX, magnification, maxScale, iconSize, distance }}\n      >\n        <motion.div\n          ref={ref}\n          onMouseMove={(e) => mouseX.set(e.pageX)}\n          onMouseLeave={() => mouseX.set(Infinity)}\n          className={cn(\n            \"dock mx-auto flex h-16 items-end gap-2 rounded-2xl border bg-background/80 px-3 pb-2 backdrop-blur-md\",\n            \"shadow-foreground/5 shadow-lg\",\n            className,\n          )}\n        >\n          {children}\n        </motion.div>\n      </DockContext.Provider>\n    );\n  },\n);\nDock.displayName = \"Dock\";\n\ninterface DockItemProps {\n  className?: string;\n  children?: React.ReactNode;\n  onClick?: () => void;\n}\n\nconst DockItem = React.forwardRef<HTMLDivElement, DockItemProps>(\n  ({ className, children, onClick }, _ref) => {\n    const context = React.useContext(DockContext);\n    const itemRef = React.useRef<HTMLDivElement>(null);\n\n    if (!context) {\n      throw new Error(\"DockItem must be used within a Dock\");\n    }\n\n    const { mouseX, maxScale, iconSize, distance } = context;\n\n    const distanceCalc = useTransform(mouseX, (val: number) => {\n      const bounds = itemRef.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      [iconSize, iconSize * maxScale, iconSize],\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        ref={itemRef}\n        style={{ width, height: width }}\n        onClick={onClick}\n        className={cn(\n          \"dock-item group relative flex aspect-square cursor-pointer items-center justify-center rounded-xl bg-muted transition-colors hover:bg-muted/80\",\n          className,\n        )}\n      >\n        {children}\n      </motion.div>\n    );\n  },\n);\nDockItem.displayName = \"DockItem\";\n\ninterface DockIconProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nconst DockIcon = React.forwardRef<HTMLDivElement, DockIconProps>(\n  ({ className, children }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"dock-icon flex h-full w-full items-center justify-center text-foreground\",\n          \"[&>svg]:h-1/2 [&>svg]:w-1/2\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nDockIcon.displayName = \"DockIcon\";\n\ninterface DockLabelProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nconst DockLabel = React.forwardRef<HTMLDivElement, DockLabelProps>(\n  ({ className, children }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"dock-label pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-2 py-1 text-background text-xs opacity-0 transition-opacity group-hover:opacity-100\",\n          className,\n        )}\n      >\n        {children}\n        {/* Tooltip arrow */}\n        <div className=\"absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-foreground\" />\n      </div>\n    );\n  },\n);\nDockLabel.displayName = \"DockLabel\";\n\ninterface DockSeparatorProps {\n  className?: string;\n}\n\nconst DockSeparator = React.forwardRef<HTMLDivElement, DockSeparatorProps>(\n  ({ className }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"dock-separator mx-1 h-10 w-px self-center bg-border\",\n          className,\n        )}\n      />\n    );\n  },\n);\nDockSeparator.displayName = \"DockSeparator\";\n\nexport {\n  Dock,\n  DockIcon,\n  DockItem,\n  DockLabel,\n  DockSeparator,\n  type DockIconProps,\n  type DockItemProps,\n  type DockLabelProps,\n  type DockProps,\n  type DockSeparatorProps,\n};\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}