{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-block",
  "title": "Code Block",
  "description": "A block of code with an optional caption, a language label and a copy button.",
  "registryDependencies": [
    "@corsair-ui/utils",
    "@corsair-ui/copy-button"
  ],
  "files": [
    {
      "path": "registry/default/ui/code-block.tsx",
      "content": "import { useId, type ComponentProps, type ReactNode } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { CopyButton } from \"@/registry/default/ui/copy-button\";\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"figure\">, \"children\" | \"title\"> {\n  /** The source. Rendered as is unless `children` is given, and always what the copy button copies. */\n  code: string;\n  /** Shown as a small label in the corner and exposed as `data-language`. */\n  language?: string;\n  /** A caption above the code, such as a file name. */\n  title?: ReactNode;\n  showCopyButton?: boolean;\n  /** Accessible name of the copy button. */\n  copyLabel?: string;\n  /** Wrap long lines instead of scrolling sideways. */\n  wrap?: boolean;\n  /**\n   * Highlighted content to render inside `<code>` in place of the raw\n   * `code`, such as the token spans from a syntax highlighter.\n   */\n  children?: ReactNode;\n  /** Extra classes for the `<pre>`. */\n  preClassName?: string;\n}\n\n/**\n * A block of code with an optional caption, a language label and a copy\n * button. The code sits in a `<pre>` that takes keyboard focus, so a long\n * line can be scrolled with the arrow keys; the caption names the figure\n * for screen readers. The copy button announces\n * \"Copied\" once the text is on the clipboard. It animates nothing.\n *\n * @example\n * <CodeBlock title=\"Install\" language=\"bash\" code=\"pnpm dlx shadcn@latest add @corsair-ui/code-block\" />\n */\nfunction CodeBlock({\n  code,\n  language,\n  title,\n  showCopyButton = true,\n  copyLabel = \"Copy code\",\n  wrap = false,\n  children,\n  className,\n  preClassName,\n  ...props\n}: CodeBlockProps) {\n  const toolbar = showCopyButton || Boolean(language);\n  const titleId = useId();\n\n  return (\n    <figure\n      data-slot=\"code-block\"\n      data-language={language}\n      data-wrap={wrap}\n      aria-labelledby={title ? titleId : undefined}\n      className={cn(\n        \"bg-muted/50 text-foreground relative overflow-hidden rounded-lg border text-sm\",\n        className\n      )}\n      {...props}\n    >\n      {title ? (\n        <figcaption\n          id={titleId}\n          data-slot=\"code-block-title\"\n          className={cn(\n            \"text-muted-foreground border-b px-4 py-2.5 text-xs font-medium\",\n            toolbar && \"pr-24\"\n          )}\n        >\n          {title}\n        </figcaption>\n      ) : null}\n      {toolbar ? (\n        <div\n          data-slot=\"code-block-toolbar\"\n          className=\"absolute top-1 right-1 flex items-center gap-1\"\n        >\n          {language ? (\n            <span\n              data-slot=\"code-block-language\"\n              className=\"text-muted-foreground px-1.5 font-mono text-xs select-none\"\n            >\n              {language}\n            </span>\n          ) : null}\n          {showCopyButton ? <CopyButton size=\"sm\" value={code} label={copyLabel} /> : null}\n        </div>\n      ) : null}\n      <pre\n        data-slot=\"code-block-pre\"\n        // A scrolling region has to take focus so keyboard users can scroll\n        // it (WCAG 2.1.1, axe \"scrollable-region-focusable\"); a `<pre>` has no\n        // interactive role to give it, so the rule does not apply here.\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        className={cn(\n          \"overflow-x-auto p-4 font-mono text-sm leading-relaxed outline-none\",\n          \"focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:ring-inset\",\n          wrap ? \"break-words whitespace-pre-wrap\" : \"whitespace-pre\",\n          toolbar && !title && \"pr-24\",\n          preClassName\n        )}\n      >\n        <code data-slot=\"code-block-code\">{children ?? code}</code>\n      </pre>\n    </figure>\n  );\n}\n\nexport { CodeBlock, type CodeBlockProps };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}