{
  "name": "InlineHeadline",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/InlineHeadline.tsx",
  "chapterTag": "02 Typography",
  "chapter": "02-typography.html",
  "sectionId": "inline-headline",
  "elName": "Resting display · with value and placeholder",
  "demoUrl": "https://brand.magicblocks.ai/components/02-typography#inline-headline",
  "hasLiveDemo": false,
  "description": "Inline edit-in-place headline. Click the resting heading to swap to a\ntext input styled to match; Enter / blur commits, Escape cancels.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "InlineHeadline",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "InlineHeadlineProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { InlineHeadline } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": false,
      "type": "string",
      "doc": "Current headline text. Required — pass an empty string to render the placeholder."
    },
    {
      "name": "onSave",
      "optional": false,
      "type": "(next: string) => void | Promise<void>",
      "doc": "Fires when the user commits a change (Enter or blur with a different value). Receives the new string. May be async — the kit doesn't manage an in-flight loading state, so consumers wrap with their own optimistic UI if needed."
    },
    {
      "name": "placeholder",
      "optional": true,
      "type": "ReactNode",
      "doc": "Shown in the input when `value` is empty AND in the resting display when `value` is empty. Default `\"Untitled\"`."
    },
    {
      "name": "display",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the resting display render. Default — render `value` as plain text inside the headline shell. Pass to inject icons, badges, or any other resting-state chrome (the input mode always shows a bare text input)."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable editing. Display still renders, click does nothing."
    },
    {
      "name": "level",
      "optional": true,
      "type": "1 | 2 | 3",
      "doc": "Heading level for the rendered text. Default `1`. Pairs with `<PageHeader level>` — pass the same level when nesting inside a custom `<PageHeader>`."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Class on the outer wrapper."
    },
    {
      "name": "style",
      "optional": true,
      "type": "CSSProperties",
      "doc": "Inline style on the outer wrapper."
    },
    {
      "name": "id",
      "optional": true,
      "type": "string",
      "doc": "Optional `id` on the underlying `<input>` (for label association)."
    },
    {
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
      "doc": "Accessible label when no `<label>` is paired. Default `\"Edit headline\"`."
    },
    {
      "name": "inputProps",
      "optional": true,
      "type": "Omit< InputHTMLAttributes<HTMLInputElement>, \"value\" | \"onChange\" | \"onBlur\" | \"onKeyDown\" | \"autoFocus\" | \"aria-label\" | \"id\" >",
      "doc": "Escape hatch — extra props on the underlying `<input>` element during edit mode (e.g. `maxLength`, `spellCheck`, `autoComplete`). The kit owns `value`, `onChange`, `onBlur`, `onKeyDown`, `autoFocus`, and `aria-label`; passing those via `inputProps` will silently lose them to the kit's own handlers."
    }
  ],
  "classesUsed": [
    "inline-headline",
    "inline-headline-display",
    "inline-headline-input",
    "inline-headline-placeholder",
    "inline-headline-text"
  ],
  "examples": {
    "react": "const [subject, setSubject] = useState(ticket.subject);",
    "html": "<div class=\"inline-headline-demo\">\n          <div>\n            <p class=\"inline-headline-demo-label\">With value</p>\n            <div class=\"inline-headline\">\n              <button type=\"button\" class=\"inline-headline-display\" aria-label=\"Edit headline\">\n                <h1 class=\"inline-headline-text\">BlueRock renewal &mdash; Q2</h1>\n              </button>\n            </div>\n          </div>\n          <div>\n            <p class=\"inline-headline-demo-label\">Empty &middot; placeholder</p>\n            <div class=\"inline-headline\">\n              <button type=\"button\" class=\"inline-headline-display\" aria-label=\"Edit headline\">\n                <h1 class=\"inline-headline-text\"><span class=\"inline-headline-placeholder\">Untitled ticket</span></h1>\n              </button>\n            </div>\n          </div>\n        </div>",
    "css": ".inline-headline {\n  display: inline-block;\n  position: relative;\n  width: 100%;\n}\n\n.inline-headline-display {\n  appearance: none;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--r-sm, 6px);\n  padding: 2px 6px;\n  margin: -2px -6px; /* keep external geometry identical to a non-editable headline */\n  cursor: text;\n  text-align: left;\n  width: 100%;\n  color: inherit;\n  font: inherit;\n  transition: background var(--dur-1, 80ms) var(--ease, ease),\n              border-color var(--dur-1, 80ms) var(--ease, ease);\n}\n\n.inline-headline-input {\n  display: block;\n  width: 100%;\n  appearance: none;\n  background: var(--bg-paper);\n  border: 1px solid var(--accent);\n  border-radius: var(--r-sm, 6px);\n  padding: 2px 6px;\n  margin: -2px -6px;\n  font: 600 28px/1.2 var(--f-display);\n  letter-spacing: -0.015em;\n  color: var(--fg);\n  outline: 0;\n  box-shadow: var(--sh-focus, 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent));\n}\n\n.inline-headline-placeholder {\n  color: var(--fg-faint);\n  font-style: italic;\n}\n\n.inline-headline-text {\n  display: inline-block;\n  margin: 0;\n  font: 600 28px/1.2 var(--f-display);\n  letter-spacing: -0.015em;\n  color: var(--fg);\n  word-break: break-word;\n}"
  }
}