{
  "example": "import { CodeBlock } from \"@godxjp/ui/data-display\";\n\n<CodeBlock maxHeight=\"sm\" language=\"json\" aria-label=\"Response body\">{body}</CodeBlock>\n<CodeBlock size=\"xs\" maxHeight=\"md\" aria-label=\"Console\">{consoleText}</CodeBlock>\n<CodeBlock copyable language=\"bash\">pnpm add @godxjp/ui</CodeBlock>",
  "group": "data-display",
  "importPath": "@godxjp/ui/data-display",
  "name": "CodeBlock",
  "props": [
    {
      "description": "The text. Pass a string, or a highlighter's spans tagged `data-code-token` (the twelve Shiki createCssVariablesTheme token names) — the package colours them from the `--code-block-token-*` knobs, so the consumer never writes a colour.",
      "name": "children",
      "type": "ReactNode"
    },
    {
      "defaultValue": "true",
      "description": "Soft-wrap long lines (`white-space: pre-wrap; overflow-wrap: anywhere`). `false` keeps lines intact and scrolls horizontally.",
      "name": "wrap",
      "type": "boolean"
    },
    {
      "description": "Token presets, or one explicit CSS length such as {value:\"16rem\"}. Still keyboard scrollable.",
      "name": "maxHeight",
      "type": "\"sm\" | \"md\" | \"lg\" | \"none\" | { value: string }"
    },
    {
      "defaultValue": "\"sm\"",
      "description": "Type size: `sm` for bodies and snippets, `xs` for dense logs.",
      "name": "size",
      "type": "\"xs\" | \"sm\""
    },
    {
      "description": "Lands on `data-language`. No highlighter is bundled — bring your own and tag its output with `data-code-token` (gh#784).",
      "name": "language",
      "type": "string"
    },
    {
      "description": "antd Typography's `copyable`, same name and semantics (gh#1032): a copy button in the block's inline-end corner. `true` copies the block's text content (highlighter spans included); `text` overrides it. The block reserves the button's column, the confirmed state is announced politely, and `onCopy` fires only after the clipboard write succeeds.",
      "name": "copyable",
      "type": "boolean | { text?: string | (() => string | Promise<string>); onCopy?: (event) => void; tooltips?: ReactNode | [ReactNode, ReactNode] | false; icon?: ReactNode | [ReactNode, ReactNode]; format?: \"text/plain\" | \"text/html\"; tabIndex?: number }"
    },
    {
      "description": "Extra classes on the `pre`.",
      "name": "className",
      "type": "string"
    }
  ],
  "related": [
    "Prose - renders whole documents (Markdown, CMS bodies) and delegates its `pre` treatment to the same tokens; use Prose when the block sits inside rendered content, CodeBlock for a standalone block.",
    "Text - `as=\"code\"` is inline monospace for an identifier in a sentence, not a block.",
    "Descriptions - `Descriptions.Item mono` is a mono VALUE in a label/value row.",
    "CredentialReveal - a masked secret with copy; not for arbitrary text."
  ],
  "rules": [],
  "storyPath": "data-display/code-block.tsx",
  "tagline": "A block of preformatted text (request and response bodies, console output, snippets): mono, muted surface, soft-wrapped long lines by default, and an optional height cap that scrolls inside the block instead of pushing the page.",
  "usage": [
    "DO import from `@godxjp/ui/data-display`: `import { CodeBlock } from \"@godxjp/ui/data-display\";`",
    "DO give a block that can scroll (`maxHeight` or `wrap={false}`) an `aria-label`: it becomes a keyboard tab stop so the content is reachable without a mouse.",
    "DO cap the height of anything that can be large (a 64 KB response body, a console dump) with `maxHeight`; the page keeps its rhythm and the block scrolls.",
    "DON'T hand-roll `<pre className=\"max-h-64 overflow-auto rounded bg-muted p-2 whitespace-pre-wrap\">`: every one of those values is a copy of a token this component reads.",
    "DON'T reach for `Text as=\"code\"` for a block: that is inline monospace with no wrapping axis. Use `Text as=\"code\"` for an identifier inside a sentence, CodeBlock for a block.",
    "DO use `copyable` for a command or snippet the reader will paste (gh#1032). DON'T hand-roll a copy Button next to or over a CodeBlock: `copyable` owns the clipboard call, the confirmed state, the placement and the polite announcement.",
    "DON'T use CodeBlock for a single value in a Descriptions row: `Descriptions.Item mono` owns that (it breaks the value, not the row).",
    "SYNTAX COLOUR (gh#784): CodeBlock does not highlight, but it DOES own the palette. Tag each span from your highlighter with `data-code-token` — the twelve names are Shiki createCssVariablesTheme's verbatim (comment, keyword, string, string-expression, function, constant, parameter, punctuation, link, inserted, deleted, changed, plus the block foreground) — and the package colours them. DON'T put `style={{ color }}` or a palette `className` on the spans: both are visual overrides, and the colour is not the consumer's to choose. Retheme with the `--code-block-token-*-color` knobs, which are role-mirrors, so light and dark follow the theme with no second palette."
  ],
  "useCases": [
    "Request and response bodies of an HTTP trace (HAR) in a bug-report inbox: JSON up to 64 KB, lines up to 240 characters, wrapped and capped at `maxHeight=\"sm\"`.",
    "Console output attached to a bug report: `size=\"xs\"` for density, `maxHeight=\"md\"`.",
    "An API example in developer documentation: `language=\"bash\"` or `\"json\"`, no height cap.",
    "A stack trace in an error detail sheet: `wrap={false}` so frames stay on one line, scrolled horizontally."
  ]
}