{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"inline-edit","type":"registry:component","title":"Inline edit","description":"Edits your name and bio in place without moving a pixel.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/inline-edit.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\nconst ICON_SWAP = { type: \"spring\", duration: 0.3, bounce: 0 } as const;\n// Long enough to notice after the field settles, short enough that the\n// pencil is back before the next edit.\nconst SAVED_FOR = 1600;\n\nexport function InlineEdit({\n label,\n value,\n onSave,\n placeholder,\n multiline = false,\n className,\n}: {\n label: string;\n value: string;\n onSave: (value: string) => void;\n placeholder: string;\n multiline?: boolean;\n // Typography goes here; the display and the editor share it exactly.\n className?: string;\n}) {\n const reduceMotion = useReducedMotion();\n const [editing, setEditing] = useState(false);\n const [draft, setDraft] = useState(value);\n const [saved, setSaved] = useState(false);\n const fieldRef = useRef(null);\n const buttonRef = useRef(null);\n const savedTimer = useRef>(undefined);\n // Keyboard exits hand focus back to the text; a click elsewhere keeps\n // focus wherever the click put it.\n const refocus = useRef(false);\n\n useEffect(() => () => clearTimeout(savedTimer.current), []);\n\n useEffect(() => {\n if (editing) {\n const field = fieldRef.current;\n field?.focus();\n // Caret at the end, where most edits start.\n field?.setSelectionRange(field.value.length, field.value.length);\n } else if (refocus.current) {\n refocus.current = false;\n buttonRef.current?.focus();\n }\n }, [editing]);\n\n const start = () => {\n setDraft(value);\n setEditing(true);\n };\n\n const finish = (commit: boolean, keyboard: boolean) => {\n if (!editing) return;\n refocus.current = keyboard;\n setEditing(false);\n const next = multiline ? draft.trim() : draft.replace(/\\s+/g, \" \").trim();\n if (!commit || next === value) return;\n onSave(next);\n setSaved(true);\n clearTimeout(savedTimer.current);\n savedTimer.current = setTimeout(() => setSaved(false), SAVED_FOR);\n };\n\n // Identical box, padding, font and line-height for the display and the\n // editor, so the swap doesn't move a single glyph.\n const box = cn(\n \"col-start-1 row-start-1 block w-full rounded-lg py-1 pr-9 pl-2 text-left\",\n multiline ? \"whitespace-pre-wrap break-words\" : \"truncate whitespace-pre\",\n className,\n );\n const empty = value.trim() === \"\";\n\n return (\n // Pulled out by its own padding, so the text lines up with the\n // surrounding content while the tint still has room to breathe.\n
\n
\n );\n}\n\nfunction SwapIcon({\n visible,\n reduceMotion,\n className,\n children,\n}: {\n visible: boolean;\n reduceMotion: boolean | null;\n className?: string;\n children: React.ReactNode;\n}) {\n const hidden = reduceMotion\n ? { opacity: 0 }\n : { scale: 0.25, opacity: 0, filter: \"blur(4px)\" };\n // The motion layer owns the swap; the wrapper owns the hover fade, so\n // the two never fight over one opacity.\n return (\n \n \n {children}\n \n \n );\n}\n\nexport default function InlineEditDemo() {\n const [name, setName] = useState(\"Ava Moreno\");\n const [bio, setBio] = useState(\n \"Design engineer. Builds the small interactions nobody notices until they are missing.\",\n );\n const timer = useRef>(undefined);\n const [showSaved, setShowSaved] = useState(false);\n\n useEffect(() => () => clearTimeout(timer.current), []);\n\n const saved = (apply: () => void) => {\n apply();\n setShowSaved(true);\n clearTimeout(timer.current);\n timer.current = setTimeout(() => setShowSaved(false), SAVED_FOR);\n };\n\n return (\n \n
\n {/* eslint-disable-next-line @next/next/no-img-element -- a tiny local SVG gains nothing from next/image. */}\n \n \n \n \n \n Saved\n \n \n {showSaved ? \"Saved\" : \"\"}\n \n
\n saved(() => setName(v))}\n className=\"text-lg leading-7 font-semibold text-foreground\"\n />\n

@ava ยท Lisbon

\n saved(() => setBio(v))}\n className=\"text-[15px] leading-6 text-foreground\"\n />\n \n );\n}\n"},{"path":"hooks/use-reduced-motion.ts","type":"registry:hook","target":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n"}],"cssVars":{"light":{"shadow-raised":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"},"dark":{"shadow-raised":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"},"theme":{"shadow-raised":"var(--shadow-raised)"}},"categories":["inputs"],"docs":"From ui lab: https://lab.xevrion.dev/lab/inline-edit"}