{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "editable-chip-base",
  "type": "registry:component",
  "title": "Editable Chip (base)",
  "description": "Theme-ready base variant of An interactive editable chip component with smooth animations for editing..",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/watermelon/editable-chip.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport {\n  useState,\n  useRef,\n  useEffect,\n  type FC,\n  type ChangeEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n} from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\nimport { BiSolidPencil } from 'react-icons/bi';\nimport { Check } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\ninterface EditableChipProps {\n  defaultLabel?: string;\n  showThemeToggle?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport const EditableChip: FC<EditableChipProps> = ({\n  defaultLabel = 'Watchlist',\n  onChange,\n}) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [label, setLabel] = useState<string>(defaultLabel);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (isEditing && inputRef.current) {\n      requestAnimationFrame(() => {\n        inputRef.current?.focus();\n        inputRef.current?.select();\n      });\n    }\n  }, [isEditing]);\n\n  const handleSave = (e: MouseEvent | KeyboardEvent) => {\n    e.stopPropagation();\n    const finalValue = label.trim() === '' ? 'Untitled' : label;\n    setLabel(finalValue);\n    setIsEditing(false);\n    onChange?.(finalValue);\n  };\n\n  const handleEdit = () => {\n    setIsEditing(true);\n  };\n\n  return (\n    <motion.div layout>\n      <div\n        className={cn(\n          `theme-injected border-border bg-card relative flex cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-4xl border py-1 pr-1 transition-all duration-300 ease-in-out select-none`,\n          isEditing && 'ring-ring gap-8 ring-2',\n        )}\n      >\n        <motion.input\n          layout=\"position\"\n          key=\"input\"\n          ref={inputRef}\n          type=\"text\"\n          value={label}\n          readOnly={!isEditing}\n          onChange={(e: ChangeEvent<HTMLInputElement>) =>\n            setLabel(e.target.value)\n          }\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) =>\n            e.key === 'Enter' && handleSave(e)\n          }\n          onClick={(e: MouseEvent) => e.stopPropagation()}\n          className=\"text-foreground selection:bg-primary/20 ml-4 w-32 border-none bg-transparent text-lg font-medium capitalize outline-none\"\n        />\n\n        <AnimatePresence mode=\"popLayout\">\n          {isEditing ? (\n            <motion.button\n              key=\"done\"\n              initial={{ opacity: 0, filter: 'blur(4px)', scale: 0 }}\n              animate={{ opacity: 1, filter: 'blur(0px)', scale: 1 }}\n              exit={{ opacity: 0, filter: 'blur(4px)', scale: 0 }}\n              layout=\"position\"\n              onClick={handleSave}\n              transition={{\n                type: 'spring',\n                bounce: 0,\n                duration: 0.4,\n              }}\n              className=\"bg-primary text-primary-foreground rounded-4xl p-1 transition-colors\"\n            >\n              <Check size={26} />\n            </motion.button>\n          ) : (\n            <motion.button\n              key=\"edit\"\n              initial={{ opacity: 0, filter: 'blur(4px)', scale: 0 }}\n              animate={{ opacity: 1, filter: 'blur(0px)', scale: 1 }}\n              exit={{ opacity: 0, filter: 'blur(4px)', scale: 0 }}\n              layout=\"position\"\n              onClick={handleEdit}\n              transition={{\n                type: 'spring',\n                bounce: 0,\n                duration: 0.4,\n              }}\n              className=\"bg-muted text-muted-foreground hover:bg-background rounded-4xl p-1 transition-colors\"\n            >\n              <BiSolidPencil size={26} />\n            </motion.button>\n          )}\n        </AnimatePresence>\n      </div>\n    </motion.div>\n  );\n};\n"
    }
  ]
}