{
  "$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\";\r\n\r\nimport { useState } from \"react\";\r\nimport { motion, AnimatePresence } from \"motion/react\";\r\nimport { Input } from \"../../../components/ui/input\";\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\nimport {\r\n  ArrowRight02Icon,\r\n  UnfoldMoreIcon,\r\n  Album02Icon,\r\n  SparklesIcon,\r\n} from \"@hugeicons/core-free-icons\";\r\n\r\ninterface PlaceholderConfig {\r\n  id: number;\r\n  placeholder: string;\r\n  icon: any;\r\n}\r\n\r\n// Change Here\r\nconst placeholderOptions: PlaceholderConfig[] = [\r\n  { id: 1, placeholder: \"Search anything...\", icon: SparklesIcon },\r\n  { id: 2, placeholder: \"Generate Image\", icon: Album02Icon },\r\n];\r\n\r\nconst AnimatedPlaceholder = ({ text }: { text: string }) => {\r\n  const letters = text.split(\"\");\r\n\r\n  return (\r\n    <motion.span className=\"inline-flex overflow-hidden\">\r\n      {letters.map((letter, index) => (\r\n        <motion.span\r\n          key={`${text}-${index}`}\r\n          initial={{\r\n            opacity: 0,\r\n            rotateX: \"80deg\",\r\n            y: 8,\r\n            filter: \"blur(3px)\",\r\n          }}\r\n          exit={{\r\n            opacity: 0,\r\n            rotateX: \"-80deg\",\r\n            filter: \"blur(3px)\",\r\n            y: -8,\r\n          }}\r\n          animate={{\r\n            opacity: 1,\r\n            rotateX: \"0deg\",\r\n            y: 0,\r\n            filter: \"blur(0px)\",\r\n          }}\r\n          transition={{\r\n            delay: 0.015 * index,\r\n\r\n            type: \"spring\",\r\n            damping: 16,\r\n            stiffness: 240,\r\n            mass: 1.2,\r\n          }}\r\n          style={{\r\n            willChange: \"transform\",\r\n          }}\r\n          className=\"inline-block\"\r\n        >\r\n          {letter === \" \" ? \"\\u00A0\" : letter}\r\n        </motion.span>\r\n      ))}\r\n    </motion.span>\r\n  );\r\n};\r\n\r\nconst InputSwitch = () => {\r\n  const [activeIndex, setActiveIndex] = useState(0);\r\n  const [inputValue, setInputValue] = useState(\"\");\r\n  const currentConfig = placeholderOptions[activeIndex];\r\n\r\n  const handleIconClick = () => {\r\n    setActiveIndex((prev) => (prev + 1) % placeholderOptions.length);\r\n  };\r\n\r\n  const IconComponent = currentConfig.icon;\r\n\r\n  return (\r\n    <div className=\"bg-muted w-full max-w-sm py-1 flex justify-center items-center rounded-full px-1\">\r\n      <motion.button\r\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\"\r\n        onClick={handleIconClick}\r\n        whileTap={{ scale: 0.9 }}\r\n      >\r\n        <AnimatePresence mode=\"popLayout\" initial={false}>\r\n          <motion.div\r\n            key={currentConfig.id}\r\n            exit={{\r\n              filter: \"blur(5px)\",\r\n              opacity: 0,\r\n            }}\r\n            initial={{\r\n              opacity: 0,\r\n              filter: \"blur(5px)\",\r\n            }}\r\n            animate={{\r\n              filter: \"blur(0px)\",\r\n              opacity: 1,\r\n            }}\r\n            transition={{\r\n              ease: \"easeInOut\",\r\n\r\n              duration: 0.35,\r\n            }}\r\n            className=\"flex items-center justify-center gap-1\"\r\n          >\r\n            <HugeiconsIcon\r\n              icon={IconComponent}\r\n              className=\"w-5 h-5 text-foreground\"\r\n            />\r\n          </motion.div>\r\n        </AnimatePresence>\r\n        <HugeiconsIcon\r\n          icon={UnfoldMoreIcon}\r\n          className=\"w-3 h-3 text-muted-foreground\"\r\n        />\r\n      </motion.button>\r\n      <div className=\"flex-1 relative min-w-0\">\r\n        {!inputValue && (\r\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\">\r\n            <AnimatePresence mode=\"popLayout\" initial={false}>\r\n              <motion.div\r\n                key={currentConfig.id}\r\n                className=\"text-sm text-muted-foreground whitespace-nowrap\"\r\n              >\r\n                <AnimatedPlaceholder text={currentConfig.placeholder} />\r\n              </motion.div>\r\n            </AnimatePresence>\r\n          </div>\r\n        )}\r\n        <Input\r\n          type=\"text\"\r\n          value={inputValue}\r\n          onChange={(e: any) => setInputValue(e.target.value)}\r\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\"\r\n        />\r\n      </div>\r\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\">\r\n        <HugeiconsIcon\r\n          icon={ArrowRight02Icon}\r\n          className=\"h-4 w-4 text-foreground\"\r\n        />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default InputSwitch;\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}