{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "editable-heading",
  "type": "registry:ui",
  "title": "Editable heading",
  "description": "Inline editable title that looks like a large heading but is a text input. Use it for document, page or project names; works controlled or uncontrolled.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/editable-heading.tsx",
      "type": "registry:ui",
      "target": "components/ui/editable-heading.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype EditableHeadingProps = {\n  value?: string\n  defaultValue?: string\n  onChange?: (value: string) => void\n  className?: string\n  placeholder?: string\n  \"aria-label\"?: string\n}\n\nfunction EditableHeading({\n  value,\n  defaultValue = \"\",\n  onChange,\n  className,\n  placeholder = \"Untitled\",\n  ...a11y\n}: EditableHeadingProps) {\n  const [internal, setInternal] = React.useState(defaultValue)\n  const current = value ?? internal\n  return (\n    <input\n      data-slot=\"editable-heading\"\n      aria-label={a11y[\"aria-label\"] ?? \"Title\"}\n      value={current}\n      placeholder={placeholder}\n      className={cn(\n        \"w-full bg-transparent text-2xl font-medium tracking-[-0.018em] text-fg outline-none\",\n        \"placeholder:text-fg-subtle focus-visible:ring-0\",\n        className\n      )}\n      onChange={(e) => {\n        if (value === undefined) setInternal(e.target.value)\n        onChange?.(e.target.value)\n      }}\n    />\n  )\n}\nexport { EditableHeading }\n"
    }
  ]
}