{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "split-button",
  "type": "registry:component",
  "title": "Split Button",
  "description": "A premium split button component with spring-driven layout transitions and tactile expansion behavior for quick multi-action workflows.",
  "dependencies": [
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/split-button.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { type JSX, useState } from 'react';\nimport { motion, type Transition } from 'motion/react';\nimport { ArrowLeft01Icon } from '@hugeicons/core-free-icons';\nimport { HugeiconsIcon } from '@hugeicons/react';\n\nconst SPRING: Transition = {\n  type: 'spring',\n  bounce: 0.55,\n  duration: 1,\n};\n\nexport interface SplitButtonProps {\n  mainButton?: string;\n  buttons?: string[];\n}\n\nexport default function SplitButton({\n  mainButton = 'New Project',\n  buttons = ['iOS', 'macOS', 'tvOS'],\n}: SplitButtonProps = {}): JSX.Element {\n  const [open, setOpen] = useState<boolean>(false);\n\n  return (\n    <div className=\"relative flex min-h-[60px] w-full items-center justify-center font-semibold\">\n      {/* MAIN BUTTON */}\n      <motion.button\n        layout\n        transition={SPRING}\n        onClick={() => setOpen(true)}\n        className=\"absolute z-10 rounded-full bg-neutral-200 whitespace-nowrap px-8 py-3 tracking-tight text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200\"\n        initial={false}\n        animate={{\n          scaleX: open ? 1.5 : 1,\n          scaleY: open ? 0.9 : 1,\n          opacity: open ? 0 : 1,\n          filter: open ? 'blur(8px)' : 'blur(0px)',\n          pointerEvents: open ? 'none' : 'auto',\n        }}\n        whileHover={{ scale: 1 }}\n        whileTap={{ scale: 1.15 }}\n      >\n        {mainButton}\n      </motion.button>\n\n      {/* SPLIT ROW */}\n      <motion.div\n        layout\n        transition={SPRING}\n        className=\"absolute z-0 flex items-center justify-center gap-2\"\n        initial={false}\n        animate={{\n          scaleX: open ? 1 : 0.2,\n          scaleY: open ? 1 : 0.9,\n          opacity: open ? 1 : 0,\n          filter: open ? 'blur(0px)' : 'blur(8px)',\n          pointerEvents: open ? 'auto' : 'none',\n        }}\n      >\n        {/* BACK BUTTON */}\n        <motion.button\n          onClick={() => setOpen(false)}\n          className=\"flex items-center justify-center rounded-full bg-neutral-200 p-3 tracking-tight text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200\"\n          whileHover={{ scale: 1 }}\n          whileTap={{ scale: 1.15 }}\n        >\n          <HugeiconsIcon icon={ArrowLeft01Icon} />\n        </motion.button>\n\n        {buttons.map((name, index) => {\n          return (\n            <motion.button\n              key={index}\n              onClick={() => {\n                setOpen(false);\n              }}\n              className=\"rounded-full bg-neutral-200 px-6 py-3 tracking-tight text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200\"\n              whileHover={{ scale: 1 }}\n              whileTap={{ scale: 1.05 }}\n            >\n              {name}\n            </motion.button>\n          );\n        })}\n      </motion.div>\n    </div>\n  );\n}\n"
    }
  ]
}