{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "quick-switcher-base",
  "type": "registry:component",
  "title": "Quick Switcher (base)",
  "description": "Theme-ready base variant of A premium, dual-mode action bar that enables fast switching between two distinct modes with fluid animations and spring physics..",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/quick-switcher.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState, type ChangeEvent } from 'react';\nimport { motion, AnimatePresence, type Transition } from 'motion/react';\nimport { ArrowRight, ChevronUp, ChevronDown } from 'lucide-react';\n\nexport type QuickSwitcherMode = 'ask' | 'generate';\n\nexport interface QuickSwitcherProps {\n  defaultMode?: QuickSwitcherMode;\n  askIcon: React.ReactNode;\n  generateIcon: React.ReactNode;\n  askLabel?: string;\n  generateLabel?: string;\n  onActionClick?: (mode: QuickSwitcherMode) => void;\n}\n\nconst transition: Transition = {\n  type: 'spring',\n  stiffness: 300,\n  damping: 30,\n  mass: 0.8,\n};\n\nexport const QuickSwitcher: React.FC<QuickSwitcherProps> = ({\n  defaultMode = 'ask',\n  askIcon,\n  generateIcon,\n  askLabel = 'Ask Anything',\n  generateLabel = 'Generate Image',\n  onActionClick,\n}) => {\n  const [mode, setMode] = useState<QuickSwitcherMode>(defaultMode);\n  const [value, setValue] = useState<string>('');\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setValue(e.target.value);\n  };\n\n  const onSubmit = () => {\n    onActionClick?.(mode);\n  };\n\n  const toggleMode = () => {\n    setMode((prev) => (prev === 'ask' ? 'generate' : 'ask'));\n  };\n\n  return (\n    <motion.div\n      layout\n      className=\"theme-injected border-border bg-muted flex h-[68px] min-w-[320px] items-center rounded-lg border p-1.5 shadow-sm sm:min-w-[380px]\"\n    >\n      <button\n        onClick={toggleMode}\n        className=\"group bg-background hover:bg-background/80 cursor-pointer dark:bg-foreground  flex h-full items-center rounded-lg pr-4 pl-2 shadow-sm transition-colors active:scale-95\"\n      >\n        <div className=\"relative flex h-12 w-12 items-center justify-center overflow-hidden\">\n          <AnimatePresence mode=\"popLayout\" initial={false}>\n            <motion.div\n              key={mode}\n              initial={{ opacity: 0, filter: 'blur(4px)', scale: 0.5 }}\n              animate={{ opacity: 1, filter: 'blur(0px)', scale: 1 }}\n              exit={{ opacity: 0, filter: 'blur(4px)', scale: 0.5 }}\n              transition={transition}\n              className=\"text-foreground dark:text-background flex items-center justify-center\"\n            >\n              {mode === 'ask' ? askIcon : generateIcon}\n            </motion.div>\n          </AnimatePresence>\n        </div>\n\n        <div className=\"ml-1 flex flex-col\">\n          <ChevronUp\n            size={14}\n            strokeWidth={4}\n            className=\"text-muted-foreground dark:text-background transition-colors\"\n          />\n          <ChevronDown\n            size={14}\n            strokeWidth={4}\n            className=\"text-muted-foreground dark:text-background transition-colors\"\n          />\n        </div>\n      </button>\n\n      <div className=\"relative flex h-full flex-grow items-center overflow-hidden px-4\">\n        <AnimatePresence mode=\"popLayout\" initial={false}>\n          {value.length <= 0 && (\n            <AnimatedText\n              text={mode === 'ask' ? askLabel : generateLabel}\n              className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-4 z-10 -translate-y-1/2 truncate text-[18px] font-semibold whitespace-nowrap sm:text-[20px]\"\n            />\n          )}\n        </AnimatePresence>\n\n        <input\n          type=\"text\"\n          value={value}\n          onChange={handleChange}\n          className=\"text-foreground w-full flex-1 border-none bg-transparent text-[18px] font-semibold placeholder-transparent ring-0 outline-none focus:ring-0 focus:outline-none sm:text-[20px]\"\n        />\n      </div>\n\n      <motion.button\n        \n        whileTap={{ scale: 0.9 }}\n        className=\"border-border bg-background dark:bg-foreground dark:text-background text-foreground hover:bg-accent active:bg-muted flex h-12 w-12 shrink-0 items-center justify-center rounded-lg border shadow-sm transition-colors\"\n        onClick={onSubmit}\n      >\n        <ArrowRight size={22} strokeWidth={2.5} />\n      </motion.button>\n    </motion.div>\n  );\n};\n\nfunction AnimatedText({\n  text,\n  className,\n  delayStep = 0.014,\n}: {\n  text: string;\n  className?: string;\n  delayStep?: number;\n}) {\n  const chars = text.split('');\n\n  return (\n    <span className={className} style={{ display: 'inline-flex' }}>\n      <AnimatePresence mode=\"popLayout\">\n        <motion.span\n          key={text}\n          style={{ display: 'inline-flex', willChange: 'transform' }}\n        >\n          {chars.map((char, i) => (\n            <motion.span\n              key={i}\n              initial={{\n                y: 10,\n                opacity: 0,\n                scale: 0.5,\n                filter: 'blur(2px)',\n              }}\n              animate={{\n                y: 0,\n                opacity: 1,\n                scale: 1,\n                filter: 'blur(0px)',\n              }}\n              exit={{\n                y: -10,\n                opacity: 0,\n                scale: 0.5,\n                filter: 'blur(2px)',\n              }}\n              transition={{\n                type: 'spring',\n                stiffness: 240,\n                damping: 16,\n                mass: 1.2,\n                delay: i * delayStep,\n              }}\n              style={{\n                display: 'inline-block',\n                whiteSpace: char === ' ' ? 'pre' : undefined,\n              }}\n            >\n              {char}\n            </motion.span>\n          ))}\n        </motion.span>\n      </AnimatePresence>\n    </span>\n  );\n}\n"
    }
  ]
}