{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-with-tags",
  "title": "Input With Tags",
  "description": "An input component that accepts and displays tags.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/ui/input-with-tags.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\" // Updated to point to registry button\nimport { X } from \"lucide-react\"\nimport { motion, AnimatePresence } from \"motion/react\" // Updated to motion/react\n\ninterface Tag {\n  text: string\n  onRemove: () => void\n}\n\nconst Tag = ({ text, onRemove }: Tag) => {\n  return (\n    <motion.span\n      initial={{ opacity: 0, scale: 0.8, y: -10, filter: \"blur(10px)\" }}\n      animate={{ opacity: 1, scale: 1, y: 0, filter: \"blur(0px)\" }}\n      exit={{ opacity: 0, scale: 0.8, y: -10, filter: \"blur(10px)\" }}\n      transition={{\n        duration: 0.4,\n        ease: \"circInOut\",\n        type: \"spring\",\n      }}\n      className=\"bg-accent text-accent-foreground flex items-center gap-1 rounded-xl px-2 py-1 text-sm shadow-sm backdrop-blur-sm\"\n    >\n      {text}\n      <motion.div\n        whileHover={{ scale: 1.1 }}\n        whileTap={{ scale: 0.9 }}\n      >\n        <Button\n          onClick={onRemove}\n          className=\"text-accent-foreground hover:bg-muted flex h-fit items-center justify-center rounded-full bg-transparent p-1 text-xs\"\n        >\n          <X className=\"h-4 w-4\" />\n        </Button>\n      </motion.div>\n    </motion.span>\n  )\n}\n\ninterface InputWithTagsProps {\n  placeholder?: string\n  className?: string\n  limit?: number\n}\n\nconst InputWithTags = ({\n  placeholder,\n  className,\n  limit = 10,\n}: InputWithTagsProps) => {\n  const [tags, setTags] = useState<string[]>([])\n  const [inputValue, setInputValue] = useState(\"\")\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\" && inputValue.trim()) {\n      e.preventDefault()\n      if (!limit || tags.length < limit) {\n        setTags([...tags, inputValue.trim()])\n        setInputValue(\"\")\n      }\n    }\n  }\n\n  const removeTag = (indexToRemove: number) => {\n    setTags(tags.filter((_, index) => index !== indexToRemove))\n  }\n\n  return (\n    <div className={cn(\"flex w-full max-w-xl flex-col gap-2\", className)}>\n      <motion.div\n        initial={{ opacity: 0, scale: 0.9, filter: \"blur(10px)\" }}\n        animate={{ opacity: 1, scale: 1, filter: \"blur(0px)\" }}\n        transition={{ duration: 0.5, type: \"spring\", stiffness: 200 }}\n      >\n        <motion.input\n          type=\"text\"\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder || \"Type something and press Enter...\"}\n          whileHover={{ scale: 1.01 }}\n          whileTap={{ scale: 0.99 }}\n          className=\"bg-card border-border text-card-foreground hover:bg-accent/50 focus:bg-accent/50 w-full rounded-xl border px-4 py-2 shadow-sm ring-0 backdrop-blur-sm transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n          disabled={limit ? tags.length >= limit : false}\n        />\n      </motion.div>\n      <div className=\"flex flex-wrap gap-2\">\n        <AnimatePresence>\n          {tags.map((tag, index) => (\n            <Tag\n              key={index.toString()}\n              text={tag}\n              onRemove={() => removeTag(index)}\n            />\n          ))}\n        </AnimatePresence>\n      </div>\n    </div>\n  )\n}\n\nexport default InputWithTags\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}