{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "editable-chip",
  "type": "registry:component",
  "title": "Editable Chip",
  "description": "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            `relative flex cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-full border border-zinc-200 py-1 pr-1 transition-all duration-300 ease-in-out select-none dark:border-zinc-700 dark:bg-zinc-900`,\n            isEditing && 'gap-8 ring-2 ring-black dark:ring-white',\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\n            onClick={(e: MouseEvent) => e.stopPropagation()}\n            className=\"ml-4 w-32 border-none bg-transparent text-lg font-medium text-[#262626] capitalize outline-none selection:bg-[#B6B6B6] dark:text-zinc-100 dark:selection:bg-zinc-700\"\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=\"rounded-full bg-black p-1 text-white transition-colors dark:bg-zinc-100 dark:text-zinc-950\"\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=\"rounded-full bg-[#F0EFF6] p-1 text-[#696871] transition-colors dark:bg-zinc-800 dark:text-zinc-400 hover:dark:bg-zinc-700\"\n              >\n                <BiSolidPencil size={26} />\n              </motion.button>\n            )}\n          </AnimatePresence>\n        </div>\n      </motion.div>\n  );\n};\n"
    }
  ]
}