{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dock-base",
  "type": "registry:component",
  "title": "Dock Component (base)",
  "description": "Theme-ready base variant of An animated dock component inspired by the macOS dock with smooth scaling and hover interactions. Icons respond dynamically to cursor movement, creating a lively and responsive feel..",
  "dependencies": [
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/watermelon/dock.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState, type FC } from 'react';\nimport { motion, type Transition } from 'motion/react';\nimport { HugeiconsIcon } from '@hugeicons/react';\n\nimport {\n  AddSquareIcon,\n  MessageNotification01Icon,\n  NoteIcon,\n  Search01Icon,\n  Settings01Icon,\n} from '@hugeicons/core-free-icons';\nimport { cn } from '@/lib/utils';\n\nexport interface DockItem {\n  id: number;\n  Icon: React.ElementType;\n}\n\ninterface DockProps {\n  items?: DockItem[];\n}\n\nconst DEFAULT_DOCK_ITEMS: DockItem[] = [\n  { id: 1, Icon: () => <HugeiconsIcon icon={Search01Icon} size={26} /> },\n  { id: 2, Icon: () => <HugeiconsIcon icon={NoteIcon} size={26} /> },\n  { id: 3, Icon: () => <HugeiconsIcon icon={AddSquareIcon} size={26} /> },\n  {\n    id: 4,\n    Icon: () => <HugeiconsIcon icon={MessageNotification01Icon} size={26} />,\n  },\n  { id: 5, Icon: () => <HugeiconsIcon icon={Settings01Icon} size={26} /> },\n];\n\nconst dockSpring: Transition = {\n  stiffness: 300,\n  damping: 22,\n  mass: 0.7,\n};\n\nexport const Dock: FC<DockProps> = ({ items }) => {\n  const dockItems = items ?? DEFAULT_DOCK_ITEMS;\n  const [selected, setSelected] = useState<number | null>(null);\n  const [animateSelected, setAnimateSelected] = useState<number | null>(null);\n\n  const handleClick = (id: number) => {\n    setSelected(id);\n    setAnimateSelected(id);\n    setTimeout(() => {\n      setAnimateSelected(null);\n    }, 200);\n  };\n\n  return (\n    <div className=\"theme-injected flex w-full flex-col items-center justify-center bg-transparent font-sans transition-colors duration-500\">\n      <motion.div\n        layout\n        transition={dockSpring}\n        className=\"relative flex items-end gap-3.5 rounded-3xl border border-border bg-card px-3 py-2 shadow-sm\"\n      >\n        {dockItems.map((item) => (\n          <motion.div\n            className=\"relative\"\n            onClick={() => handleClick(item.id)}\n            style={{\n              transformOrigin: 'bottom',\n            }}\n            initial={{\n              scale: 1,\n            }}\n            whileHover={{\n              y: -4,\n            }}\n            animate={{\n              scale: animateSelected === item.id ? 1.3 : 1,\n              y: animateSelected === item.id ? -6 : 0,\n            }}\n            transition={{\n              type: 'spring',\n              stiffness: 550,\n              damping: 15,\n              mass: 1.1,\n            }}\n          >\n            <motion.div className=\"cursor-pointer rounded-md bg-muted p-2 transition-colors hover:bg-background\">\n              <item.Icon\n                className={cn(\n                  'size-4 text-muted-foreground transition-all duration-200',\n                  selected === item.id && 'text-foreground',\n                )}\n              />\n            </motion.div>\n\n            <motion.div\n              className={cn(\n                'absolute mt-px flex w-full items-center justify-center opacity-0 transition-opacity duration-400 will-change-transform',\n                selected === item.id && 'opacity-100',\n              )}\n            >\n              <div\n                className=\"rounded-full bg-primary\"\n                style={{\n                  width: 4,\n                  height: 4,\n                }}\n              />\n            </motion.div>\n          </motion.div>\n        ))}\n      </motion.div>\n    </div>\n  );\n};\n"
    }
  ]
}