feat(core): add renderCopyButton render prop to CodeBlock

[freddymeta]

What this does

Adds a renderCopyButton render prop to CodeBlock, letting a consumer supply its own copy control while CodeBlock keeps ownership of everything that isn't the button's appearance.

Why

CodeBlock's copy control is a bare <button> with no tooltip, and there's no seam to restyle or replace it: hasCopyButton is a plain boolean, and the component exposes a single theme target on the root <pre>. A design system consuming Astryx that wants its own copy control (e.g. its standard icon button with a "Copy" tooltip — a tooltip is DOM, so it can't be added via theming or CSS) is forced to set hasCopyButton={false} and then re-implement placement, the clipboard write, the copied-state timer, and the copy announcement, plus position the replacement with structural CSS against internal DOM. That's the "reach for an unsupported structural selector" signal that a sanctioned seam is missing.

A paint/theme target is the wrong tier here (the need is a different control, not different paint on the same one), and an imperative copy() ref was considered previously and set aside. A render prop is the right shape — it mirrors the existing renderOption / renderItem / renderToken convention and hands back exactly the state a copy control needs.

The seam

renderCopyButton?: (props: {
  isCopied: boolean;   // reflects the block's copied-state timer
  copy: () => void;    // runs the clipboard write + confirmation flow
  label: string;       // localized, state-aware accessible label
}) => React.ReactNode

CodeBlock still owns:

• Placement — the control renders as the header's trailing child, or (headerless) in the floating corner, so the consumer supplies no positioning.
• Clipboard write, the copied-state timer, the polite live-region announcement, and onCopy.

The render prop only supplies the visual control. Ignored when hasCopyButton is false.

<CodeBlock
  code={code}
  renderCopyButton={({isCopied, copy, label}) => (
    <IconButton
      label={label}
      icon={<Icon icon={isCopied ? 'check' : 'copy'} />}
      onClick={copy}
    />
  )}
/>

Scope

Additive and backward-compatible — the built-in button path is unchanged when renderCopyButton is omitted. No new theme target, no DOM change to existing usage.

Tests

Extended CodeBlock.test.tsx with a renderCopyButton block: custom control replaces the built-in button, copy/isCopied/label drive the block's clipboard + copied flow, the announcement and onCopy still fire, hasCopyButton={false} suppresses it, and the custom control stays out of the collapsible header's role="button". 22/22 CodeBlock tests, core typecheck, storybook typecheck, docsite (324), and strict lint all green. Added a CustomCopyButton Storybook story.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Aug 7, 2026 2:36pm

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

CodeBlock _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	1604	-
Complexity	N/A	Very High (90)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.7KB	1.2KB

Accessibility Audit

Status: No accessibility violations detected.

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}