{
  "$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\";\r\n\r\nimport { AnimatePresence, motion } from \"motion/react\";\r\nimport { useRef, useState } from \"react\";\r\nimport { Edit01Icon, Tick02Icon } from \"@hugeicons/core-free-icons\";\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { cn } from \"@/lib/cn\";\r\n\r\nfunction SaveInput() {\r\n  const [isEditing, setIsEditing] = useState(false);\r\n  const [value, setValue] = useState(\"this.urvish\");\r\n\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n  return (\r\n    <div className=\"w-full flex justify-center items-center text-xl\">\r\n      <motion.div\r\n        layout\r\n        initial={{\r\n          boxShadow: \"0px 0px 2px hsl(var(--foreground) / 0.1)\",\r\n        }}\r\n        animate={{\r\n          boxShadow: isEditing\r\n            ? \" none border border-foreground\"\r\n            : \"0px 0px 2px hsl(var(--foreground) / 0.1)\",\r\n        }}\r\n        className={cn(\r\n          \"flex items-center relative  overflow-hidden border-2 bg-background\",\r\n          isEditing &&\r\n            \"outline-none ring-2 ring-ring ring-offset-2 ring-offset-background\"\r\n        )}\r\n        style={{ borderRadius: 60 }}\r\n      >\r\n        <Input\r\n          ref={inputRef}\r\n          value={value}\r\n          onChange={(e) => setValue(e.target.value)}\r\n          readOnly={!isEditing}\r\n          className={cn(\r\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\",\r\n            isEditing ? \"text-foreground\" : \"text-muted-foreground\"\r\n          )}\r\n          placeholder=\"username\"\r\n        />\r\n        <AnimatePresence initial={false}>\r\n          {!isEditing ? (\r\n            <motion.span\r\n              key=\"pen\"\r\n              layout=\"position\"\r\n              initial={{ x: 50 }}\r\n              animate={{ x: 0 }}\r\n              exit={{ x: 50 }}\r\n              transition={{ type: \"spring\", bounce: 0.1 }}\r\n              onClick={() => {\r\n                setIsEditing(true);\r\n\r\n                if (inputRef.current) inputRef.current.select();\r\n              }}\r\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\"\r\n            >\r\n              <HugeiconsIcon icon={Edit01Icon} size={20} />\r\n            </motion.span>\r\n          ) : (\r\n            <motion.span\r\n              key=\"check\"\r\n              layout=\"position\"\r\n              initial={{ x: 50 }}\r\n              animate={{ x: 0 }}\r\n              exit={{ x: 50 }}\r\n              transition={{ type: \"spring\", bounce: 0.1 }}\r\n              onClick={() => setIsEditing(false)}\r\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\"\r\n            >\r\n              <HugeiconsIcon icon={Tick02Icon} size={20} />\r\n            </motion.span>\r\n          )}\r\n        </AnimatePresence>\r\n      </motion.div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default SaveInput;\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}