{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inline-edit",
  "title": "Inline Edit",
  "description": "An input that switches between read and edit modes.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "input"
  ],
  "files": [
    {
      "path": "registry/default/example/inline-edit.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useRef, useState } from \"react\";\nimport { Edit01Icon, Tick02Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/cn\";\n\nfunction SaveInput() {\n  const [isEditing, setIsEditing] = useState(false);\n  const [value, setValue] = useState(\"this.urvish\");\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <div className=\"w-full flex justify-center items-center text-xl\">\n      <motion.div\n        layout\n        initial={{\n          boxShadow: \"0px 0px 2px hsl(var(--foreground) / 0.1)\",\n        }}\n        animate={{\n          boxShadow: isEditing\n            ? \" none border border-foreground\"\n            : \"0px 0px 2px hsl(var(--foreground) / 0.1)\",\n        }}\n        className={cn(\n          \"flex items-center relative  overflow-hidden border-2 bg-background\",\n          isEditing &&\n            \"outline-none ring-2 ring-ring ring-offset-2 ring-offset-background\"\n        )}\n        style={{ borderRadius: 60 }}\n      >\n        <Input\n          ref={inputRef}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          readOnly={!isEditing}\n          className={cn(\n            \"h-12 border-0 shadow-none focus-visible:ring-0 bg-transparent p-0 text-base w-full min-w-32 pl-4 pr-12\",\n            isEditing ? \"text-foreground\" : \"text-muted-foreground\"\n          )}\n          placeholder=\"username\"\n        />\n        <AnimatePresence initial={false}>\n          {!isEditing ? (\n            <motion.span\n              key=\"pen\"\n              layout=\"position\"\n              initial={{ x: 50 }}\n              animate={{ x: 0 }}\n              exit={{ x: 50 }}\n              transition={{ type: \"spring\", bounce: 0.1 }}\n              onClick={() => {\n                setIsEditing(true);\n\n                if (inputRef.current) inputRef.current.select();\n              }}\n              className=\"absolute right-1 flex items-center justify-center h-10 w-10 rounded-full bg-card/80 border border-[0.2px] hover:bg-card cursor-pointer text-muted-foreground\"\n            >\n              <HugeiconsIcon icon={Edit01Icon} size={20} />\n            </motion.span>\n          ) : (\n            <motion.span\n              key=\"check\"\n              layout=\"position\"\n              initial={{ x: 50 }}\n              animate={{ x: 0 }}\n              exit={{ x: 50 }}\n              transition={{ type: \"spring\", bounce: 0.1 }}\n              onClick={() => setIsEditing(false)}\n              className=\"absolute z-20 right-1 flex items-center justify-center h-10 w-10 rounded-full border-[0.2px]  bg-primary hover:bg-primary/90 cursor-pointer text-primary-foreground\"\n            >\n              <HugeiconsIcon icon={Tick02Icon} size={20} />\n            </motion.span>\n          )}\n        </AnimatePresence>\n      </motion.div>\n    </div>\n  );\n}\n\nexport default SaveInput;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}