{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "split-actions-base",
  "type": "registry:component",
  "title": "Split Actions (base)",
  "description": "Theme-ready base variant of Interactive micro-interaction component for split actions..",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/watermelon/split-actions.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { type LucideIcon, Plus } from 'lucide-react';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\ninterface Action {\n  icon: LucideIcon;\n  label: string;\n}\n\ninterface SplitActionsProps {\n  actions: Action[];\n  triggerIcon?: LucideIcon;\n}\n\nexport default function SplitActions({\n  actions,\n  triggerIcon: TriggerIcon = Plus,\n}: SplitActionsProps) {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const [positions, setPositions] = useState<number[]>([]);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    const GAP = 8;\n\n    const calculatePositions = () => {\n      const widths = buttonRefs.current.map(\n        (button) => button?.offsetWidth ?? 0,\n      );\n\n      const totalWidth =\n        widths.reduce((sum, width) => sum + width, 0) +\n        GAP * (widths.length - 1);\n\n      let cursor = -totalWidth / 2;\n\n      const newPositions = widths.map((width) => {\n        const center = cursor + width / 2;\n        cursor += width + GAP;\n        return center;\n      });\n\n      setPositions(newPositions);\n    };\n\n    requestAnimationFrame(calculatePositions);\n\n    window.addEventListener('resize', calculatePositions);\n\n    return () => {\n      window.removeEventListener('resize', calculatePositions);\n    };\n  }, [actions, isOpen]);\n\n  return (\n    <div className=\"theme-injected flex h-screen w-full items-center justify-center\">\n      <div\n        className=\"relative flex min-h-14 min-w-14 items-center justify-center\"\n        onClick={() => setIsOpen((prev) => !prev)}\n      >\n        <AnimatePresence mode=\"wait\">\n          {!isOpen && (\n            <motion.button\n              key=\"trigger\"\n              whileTap={{ scale: 1.15 }}\n              initial={{\n                scale: 0.5,\n                opacity: 0,\n                filter: 'blur(8px)',\n              }}\n              animate={{\n                scale: 1,\n                opacity: 1,\n                filter: 'blur(0px)',\n              }}\n              exit={{\n                scale: 0.5,\n                opacity: 0,\n                filter: 'blur(8px)',\n              }}\n              transition={{\n                type: 'spring',\n                stiffness: 220,\n                damping: 24,\n              }}\n              className=\"bg-primary text-primary-foreground rounded-full p-2\"\n            >\n              <TriggerIcon className=\"size-8 stroke-[3]\" />\n            </motion.button>\n          )}\n        </AnimatePresence>\n\n        <AnimatePresence mode=\"wait\">\n          {isOpen &&\n            actions.map((action, index) => (\n              <motion.button\n                key={action.label}\n                ref={(el) => {\n                  buttonRefs.current[index] = el;\n                }}\n                initial={{\n                  x: 0,\n                  scale: 0,\n                  opacity: 0,\n                  filter: 'blur(8px)',\n                }}\n                animate={{\n                  x: positions[index] ?? 0,\n                  scale: 1,\n                  opacity: 1,\n                  filter: 'blur(0px)',\n                }}\n                exit={{\n                  x: 0,\n                  scale: 0.5,\n                  opacity: 0,\n                  filter: 'blur(8px)',\n                }}\n                transition={{\n                  type: 'spring',\n                  stiffness: 220,\n                  damping: 24,\n                }}\n                className={cn(\n                  'border-border bg-card text-card-foreground absolute flex items-center gap-2 rounded-full border px-4 py-2',\n                  (positions[index] ?? 0) < 0 ? 'origin-right' : 'origin-left',\n                )}\n              >\n                <action.icon className=\"size-4 stroke-2\" />\n                <span className=\"text-lg font-medium\">{action.label}</span>\n              </motion.button>\n            ))}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}