{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "morphing-input",
  "title": "Morphing Input",
  "description": "An input field that morphs between different states.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "input"
  ],
  "files": [
    {
      "path": "registry/default/example/morphing-input.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { Input } from \"../../../components/ui/input\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport {\n  ArrowRight02Icon,\n  UnfoldMoreIcon,\n  Album02Icon,\n  SparklesIcon,\n} from \"@hugeicons/core-free-icons\";\n\ninterface PlaceholderConfig {\n  id: number;\n  placeholder: string;\n  icon: any;\n}\n\n// Change Here\nconst placeholderOptions: PlaceholderConfig[] = [\n  { id: 1, placeholder: \"Search anything...\", icon: SparklesIcon },\n  { id: 2, placeholder: \"Generate Image\", icon: Album02Icon },\n];\n\nconst AnimatedPlaceholder = ({ text }: { text: string }) => {\n  const letters = text.split(\"\");\n\n  return (\n    <motion.span className=\"inline-flex overflow-hidden\">\n      {letters.map((letter, index) => (\n        <motion.span\n          key={`${text}-${index}`}\n          initial={{\n            opacity: 0,\n            rotateX: \"80deg\",\n            y: 8,\n            filter: \"blur(3px)\",\n          }}\n          exit={{\n            opacity: 0,\n            rotateX: \"-80deg\",\n            filter: \"blur(3px)\",\n            y: -8,\n          }}\n          animate={{\n            opacity: 1,\n            rotateX: \"0deg\",\n            y: 0,\n            filter: \"blur(0px)\",\n          }}\n          transition={{\n            delay: 0.015 * index,\n\n            type: \"spring\",\n            damping: 16,\n            stiffness: 240,\n            mass: 1.2,\n          }}\n          style={{\n            willChange: \"transform\",\n          }}\n          className=\"inline-block\"\n        >\n          {letter === \" \" ? \"\\u00A0\" : letter}\n        </motion.span>\n      ))}\n    </motion.span>\n  );\n};\n\nconst InputSwitch = () => {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [inputValue, setInputValue] = useState(\"\");\n  const currentConfig = placeholderOptions[activeIndex];\n\n  const handleIconClick = () => {\n    setActiveIndex((prev) => (prev + 1) % placeholderOptions.length);\n  };\n\n  const IconComponent = currentConfig.icon;\n\n  return (\n    <div className=\"bg-muted w-full max-w-sm py-1 flex justify-center items-center rounded-full px-1\">\n      <motion.button\n        className=\"bg-background p-2.5 px-2.5 rounded-full flex items-center justify-center gap-1.5 transition-colors overflow-hidden cursor-default shadow-sm\"\n        onClick={handleIconClick}\n        whileTap={{ scale: 0.9 }}\n      >\n        <AnimatePresence mode=\"popLayout\" initial={false}>\n          <motion.div\n            key={currentConfig.id}\n            exit={{\n              filter: \"blur(5px)\",\n              opacity: 0,\n            }}\n            initial={{\n              opacity: 0,\n              filter: \"blur(5px)\",\n            }}\n            animate={{\n              filter: \"blur(0px)\",\n              opacity: 1,\n            }}\n            transition={{\n              ease: \"easeInOut\",\n\n              duration: 0.35,\n            }}\n            className=\"flex items-center justify-center gap-1\"\n          >\n            <HugeiconsIcon\n              icon={IconComponent}\n              className=\"w-5 h-5 text-foreground\"\n            />\n          </motion.div>\n        </AnimatePresence>\n        <HugeiconsIcon\n          icon={UnfoldMoreIcon}\n          className=\"w-3 h-3 text-muted-foreground\"\n        />\n      </motion.button>\n      <div className=\"flex-1 relative min-w-0\">\n        {!inputValue && (\n          <div className=\"absolute left-0 top-0 w-full h-full flex items-center pointer-events-none pl-1.5 bg-transparent overflow-hidden\">\n            <AnimatePresence mode=\"popLayout\" initial={false}>\n              <motion.div\n                key={currentConfig.id}\n                className=\"text-sm text-muted-foreground whitespace-nowrap\"\n              >\n                <AnimatedPlaceholder text={currentConfig.placeholder} />\n              </motion.div>\n            </AnimatePresence>\n          </div>\n        )}\n        <Input\n          type=\"text\"\n          value={inputValue}\n          onChange={(e: any) => setInputValue(e.target.value)}\n          className=\"!border-0 outline-none border-none bg-transparent! m-0 !pl-1.5 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 text-foreground\"\n        />\n      </div>\n      <button className=\"bg-background py-2.5 px-3 rounded-full flex shadow-sm items-center justify-center self-stretch cursor-pointer active:scale-95 transition-transform ease-in-out duration-150\">\n        <HugeiconsIcon\n          icon={ArrowRight02Icon}\n          className=\"h-4 w-4 text-foreground\"\n        />\n      </button>\n    </div>\n  );\n};\n\nexport default InputSwitch;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}