test.json

{
    "name": "dock",
    "type": "registry:ui",
    "dependencies": ["framer-motion"],
    "files": [
        {
            "path": "magicui/dock.tsx",
            "content": "\"use client\";\n\nimport React, { PropsWithChildren, useRef } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"framer-motion\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface DockProps extends VariantProps<typeof dockVariants> {\n className?: string;\n magnification?: number;\n distance?: number;\n direction?: \"top\" | \"middle\" | \"bottom\";\n children: React.ReactNode;\n}\n\nconst DEFAULT_MAGNIFICATION = 60;\nconst DEFAULT_DISTANCE = 140;\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 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 magnification = DEFAULT_MAGNIFICATION,\n distance = DEFAULT_DISTANCE,\n direction = \"bottom\",\n ...props\n },\n ref,\n ) => {\n const mouseX = useMotionValue(Infinity);\n\n const renderChildren = () => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.type === DockIcon) {\n return React.cloneElement(child, {\n ...child.props,\n mouseX: mouseX,\n magnification: magnification,\n distance: distance,\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 {\n size?: number;\n magnification?: number;\n distance?: number;\n mouseX?: any;\n className?: string;\n children?: React.ReactNode;\n props?: PropsWithChildren;\n}\n\nconst DockIcon = ({\n size,\n magnification = DEFAULT_MAGNIFICATION,\n distance = DEFAULT_DISTANCE,\n mouseX,\n className,\n children,\n ...props\n}: DockIconProps) => {\n const ref = useRef<HTMLDivElement>(null);\n\n const distanceCalc = useTransform(mouseX, (val: number) => {\n const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };\n\n return val - bounds.x - bounds.width / 2;\n });\n\n let widthSync = useTransform(\n distanceCalc,\n [-distance, 0, distance],\n [40, magnification, 40],\n );\n\n let width = useSpring(widthSync, {\n mass: 0.1,\n stiffness: 150,\n damping: 12,\n });\n\n return (\n <motion.div\n ref={ref}\n style={{ width }}\n className={cn(\n \"flex aspect-square cursor-pointer items-center justify-center rounded-full\",\n className,\n )}\n {...props}\n >\n {children}\n </motion.div>\n );\n};\n\nDockIcon.displayName = \"DockIcon\";\n\nexport { Dock, DockIcon, dockVariants };\n",
            "type": "registry:ui",
            "target": ""
        }
    ]
}