{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inline-action",
  "type": "registry:component",
  "title": "Inline Action",
  "description": "Inline actions enabling quick edits without leaving current context view.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/watermelon/inline-action.tsx",
      "type": "registry:component",
      "content": "import React, { useState, useEffect } from 'react';\nimport {\n  motion,\n  AnimatePresence,\n  MotionConfig,\n  type Transition,\n} from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport { Check } from 'lucide-react';\n\ninterface InlineActionProps {\n  label: string;\n  icon: React.ReactNode;\n  actionText: string;\n  onAction: () => Promise<void>;\n  theme?: 'light' | 'dark' | 'system';\n  className?: string;\n}\n\nexport const InlineAction: React.FC<InlineActionProps> = ({\n  label,\n  icon,\n  actionText,\n  onAction,\n  theme = 'system',\n  className,\n}) => {\n  const [status, setStatus] = useState<'idle' | 'loading' | 'success'>('idle');\n\n  const handleTrigger = async () => {\n    if (status !== 'idle') return;\n    setStatus('loading');\n    try {\n      await onAction();\n      setStatus('success');\n    } catch (error) {\n      setStatus('idle');\n    }\n  };\n\n  useEffect(() => {\n    if (status === 'success') {\n      const timer = setTimeout(() => setStatus('idle'), 2000);\n      return () => clearTimeout(timer);\n    }\n  }, [status]);\n\n  const springTransition: Transition = {\n    type: 'spring',\n    stiffness: 400,\n    damping: 35,\n    mass: 1,\n  };\n\n  const forcedTheme =\n    theme === 'dark' ? 'dark' : theme === 'light' ? 'light' : '';\n\n  return (\n    <div\n      className={cn(\n        'flex w-full items-center justify-center px-4',\n        forcedTheme,\n        className,\n      )}\n    >\n      <div className=\"flex w-full w-xs items-center justify-between overflow-hidden rounded-full border-[1.5px] border-[#F0F0F0] bg-white p-3 shadow-sm transition-colors duration-300 md:w-sm dark:border-zinc-800 dark:bg-zinc-900\">\n        <div className=\"flex min-w-0 items-center gap-2 sm:gap-3\">\n          <div className=\"flex shrink-0 items-center justify-center rounded-full bg-[#F0F0F0] p-2.5 text-[#1F1F1F] transition-colors sm:p-3.5 dark:bg-zinc-800 dark:text-zinc-100\">\n            <div className=\"scale-90 sm:scale-100\">{icon}</div>\n          </div>\n          <span className=\"truncate text-[15px] font-bold text-[#000000] transition-colors sm:text-[18px] dark:text-white\">\n            {label}\n          </span>\n        </div>\n        <MotionConfig transition={springTransition}>\n          <motion.div\n            className={cn(\n              'relative flex h-12 items-center overflow-hidden rounded-full bg-[#F0F0F0] px-2 py-2 dark:bg-zinc-800',\n            )}\n            animate={{\n              width:\n                status === 'success' ? 48 : status === 'loading' ? 120 : 120,\n            }}\n          >\n            <AnimatePresence mode=\"popLayout\" initial={false}>\n              {status === 'idle' && (\n                <motion.button\n                  key=\"idle\"\n                  initial={{ opacity: 0, filter: 'blur(4px)' }}\n                  animate={{ opacity: 1, filter: 'blur(0px)' }}\n                  exit={{ opacity: 0, filter: 'blur(4px)' }}\n                  onClick={handleTrigger}\n                  className=\"w-full rounded-full text-[13px] font-bold whitespace-nowrap text-[#000000] transition-colors sm:text-[15px] dark:text-white\"\n                >\n                  {actionText}\n                </motion.button>\n              )}\n\n              {status === 'loading' && (\n                <motion.div\n                  key=\"loading\"\n                  initial={{ opacity: 0, filter: 'blur(4px)' }}\n                  animate={{ opacity: 1, filter: 'blur(0px)' }}\n                  exit={{ opacity: 0, filter: 'blur(4px)' }}\n                  className=\"w-full\"\n                >\n                  <div className=\"relative h-1.5 flex-1 rounded-full bg-zinc-300 dark:bg-zinc-600\">\n                    <motion.div\n                      className=\"absolute top-0 bottom-0 w-[30%] rounded-full bg-[#212121] dark:bg-zinc-300\"\n                      initial={{ left: '0%' }}\n                      animate={{ left: '70%' }}\n                      transition={{\n                        duration: 0.8,\n                        repeat: Infinity,\n                        repeatType: 'reverse',\n                        ease: 'easeInOut',\n                      }}\n                    />\n                  </div>\n                </motion.div>\n              )}\n\n              {status === 'success' && (\n                <motion.div\n                  key=\"success\"\n                  initial={{ filter: 'blur(4px)', opacity: 0 }}\n                  animate={{ filter: 'blur(0px)', opacity: 1 }}\n                  exit={{ filter: 'blur(4px)', opacity: 0 }}\n                  className=\"relative flex h-full w-full items-center justify-center overflow-hidden rounded-full bg-[#050505] transition-colors dark:bg-white\"\n                >\n                  <motion.div\n                    initial={{ x: '0%' }}\n                    animate={{ x: '100%' }}\n                    transition={{ duration: 0.7, delay: 0.1, ease: 'easeOut' }}\n                    className=\"absolute inset-0 z-10 h-full w-full skew-x-[-40deg] bg-linear-to-r from-transparent via-white/50 to-transparent dark:via-black/20\"\n                  />\n\n                  <Check className=\"size-6 stroke-2 text-white dark:text-black\" />\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </motion.div>\n        </MotionConfig>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}