{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inline-cell-edit",
  "type": "registry:ui",
  "title": "Inline cell edit",
  "description": "Click to edit table cell text: the value turns into an input on click, saves on Enter or blur and cancels on Escape. Built for editable React data grids.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/input.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/inline-cell-edit.tsx",
      "type": "registry:ui",
      "target": "components/ui/inline-cell-edit.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { Input } from \"@/components/ui/input\"\nimport { cn } from \"@/lib/utils\"\nfunction InlineCellEdit({ value, onChange, className }: { value: string; onChange?: (v: string) => void; className?: string }) {\n  const [editing, setEditing] = React.useState(false)\n  const [draft, setDraft] = React.useState(value)\n  React.useEffect(() => setDraft(value), [value])\n  if (!editing) {\n    return (\n      <button data-slot=\"inline-cell-edit\" type=\"button\" className={cn(\"rounded-md px-1 text-left text-sm hover:bg-sunken\", className)} onClick={() => setEditing(true)}>\n        {value || <span className=\"text-fg-subtle\">Edit</span>}\n      </button>\n    )\n  }\n  return (\n    <Input\n      autoFocus\n      className={cn(\"h-8\", className)}\n      value={draft}\n      aria-label=\"Edit cell\"\n      onChange={(e) => setDraft(e.target.value)}\n      onBlur={() => { setEditing(false); onChange?.(draft) }}\n      onKeyDown={(e) => { if (e.key === \"Enter\") { setEditing(false); onChange?.(draft) } if (e.key === \"Escape\") setEditing(false) }}\n    />\n  )\n}\nexport { InlineCellEdit }\n"
    }
  ]
}