{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inline-overflow",
  "type": "registry:component",
  "title": "Inline Overflow",
  "description": "An interactive inline overflow menu that reveals additional actions with spring animations.",
  "dependencies": [
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/inline-overflow.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { HiOutlineDotsHorizontal } from 'react-icons/hi';\nimport { IoClose } from 'react-icons/io5';\n\nexport interface InlineOverflowAction {\n  label: string;\n}\n\nexport interface InlineOverflowProps {\n  visibleActions: InlineOverflowAction[];\n  hiddenActions: InlineOverflowAction[];\n  showThemeToggle?: boolean;\n}\n\nconst Action: FC<{ label: string }> = ({ label }) => {\n  return (\n    <motion.button\n      layout=\"position\"\n      initial={{ opacity: 0, scale: 0, filter: 'blur(4px)' }}\n      animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.96 }}\n      transition={{ type: 'spring', bounce: 0.35, duration: 0.7 }}\n      className=\"curosr-pointer h-9 shrink-0 cursor-pointer rounded-full border border-black/5 bg-white px-3.5 text-sm font-bold whitespace-nowrap text-neutral-950 transition-colors sm:h-12 sm:px-6 sm:text-base dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100\"\n    >\n      {label}\n    </motion.button>\n  );\n};\n\nexport const InlineOverflow: FC<InlineOverflowProps> = ({\n  visibleActions,\n  hiddenActions,\n}) => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <motion.div\n      layout\n      className=\"no-scrollbar relative flex max-w-[calc(100vw-1.5rem)] items-center gap-1.5 overflow-hidden border border-black/5 bg-[#F6F5EE] px-1.5 py-1.5 shadow-sm sm:gap-2 sm:px-2 sm:py-2 dark:border-neutral-800 dark:bg-neutral-900\"\n      style={{\n        borderRadius: 32,\n      }}\n      transition={{ type: 'spring', bounce: 0.35, duration: 0.7 }}\n    >\n      {visibleActions.map((action, i) => (\n        <Action key={i} label={action.label} />\n      ))}\n\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        {open &&\n          hiddenActions.map((action) => (\n            <motion.div\n              key={action.label}\n              exit={{ opacity: 0, scale: 0, filter: 'blur(4px)' }}\n              transition={{ type: 'spring', bounce: 0.35, duration: 0.7 }}\n            >\n              <Action label={action.label} />\n            </motion.div>\n          ))}\n      </AnimatePresence>\n      <motion.button\n        layout\n        onClick={() => setOpen(!open)}\n        whileTap={{ scale: 0.9 }}\n        className=\"flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-black/5 bg-white text-neutral-600 hover:opacity-70 sm:h-12 sm:w-12 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-400\"\n        transition={{ type: 'spring', bounce: 0.35, duration: 0.7 }}\n      >\n        <AnimatePresence mode=\"popLayout\" initial={false}>\n          {open ? (\n            <motion.div\n              key=\"close\"\n              initial={{ opacity: 0, scale: 0, filter: 'blur(4px)' }}\n              animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}\n              exit={{ opacity: 0, scale: 0, filter: 'blur(4px)' }}\n              transition={{ type: 'spring', bounce: 0.35, duration: 0.7 }}\n            >\n              <IoClose className=\"size-5 sm:size-6\" />\n            </motion.div>\n          ) : (\n            <motion.div\n              key=\"dots\"\n              initial={{ opacity: 0, scale: 0, filter: 'blur(4px)' }}\n              animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}\n              exit={{ opacity: 0, scale: 0, filter: 'blur(4px)' }}\n              transition={{ type: 'spring', bounce: 0.35, duration: 0.7 }}\n              className=\"font-mono text-base tracking-wider\"\n            >\n              <HiOutlineDotsHorizontal className=\"size-5 sm:size-7\" />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </motion.button>\n    </motion.div>\n  );\n};\n"
    }
  ]
}