@ngrok/mantle 0.79.3 → 0.81.0

package/dist/choice.d.ts

@@ -1,253 +1,2 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
-import { t as Label } from "./label-v2-bv98k.js";
-import { ComponentProps, ReactNode } from "react";
-//#region src/components/choice/choice.d.ts
-/**
- * Props for `Choice.Root`. Extends `<div>` props (minus `id`, narrowed below)
- * with the disabled / id / name controls. Inside a `Field.Control`, the field's
- * `id` / `name` / `aria-*` take precedence over these.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-type ChoiceRootProps = Omit<ComponentProps<"div">, "id"> & {
-  /** Marks the choice disabled — dims the text and is injected onto the control. */
-  disabled?: boolean;
-  /**
-   * Explicit control id. Defaults to a generated id, or — when composed inside a
-   * `Field.Control` — the field's id, so `Field.Label` and `Choice.Label` resolve
-   * to the same control.
-   */
-  id?: string;
-  /** Form value name for the control. Inherited from `Field` when composed within one. */
-  name?: string;
-  /** `Choice.Indicator`, a `Choice.Content` (with `Label` / `Title` + `Description`). */
-  children: ReactNode;
-};
-/**
- * Root of a `Choice`: the indicator-left / content-right layout for pairing a
- * checkbox or radio with a titled, multi-line label. Owns the control's `id` and the
- * description's `id`, and — when rendered inside a `Field.Control` — reads the
- * field's `id` / `name` / `aria-*` from `FieldControlContext` and merges them
- * into the props `Indicator` injects onto the control (the field's
- * `aria-describedby` is concatenated with this `Choice`'s own description id).
- * Outside a `Field` it falls back to its own generated ids, so the two compose
- * but neither requires the other.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const Root: import("react").ForwardRefExoticComponent<Omit<ChoiceRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/**
- * The left control slot of a `Choice` — drop the control here (a `Checkbox`, a
- * radio indicator, a `Switch`, …). Its single element child is cloned with the
- * shared `id` / `name` / `aria-*` / `disabled` from `Root`, so a control placed
- * here is wired to `Choice.Label` and the description without the caller
- * threading ids. A non-element child (or none) is rendered untouched.
- *
- * The slot is one line tall (`h-lh`) using the same `text-sm` line box as the
- * title, and centers its child — so the control sits centered on the title's
- * first line and stays put when the title wraps.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const Indicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-type ChoiceContentProps = ComponentProps<"div"> & WithAsChild;
-/**
- * The right column of a `Choice` — stacks a `Choice.Label` / `Choice.Title` over
- * an optional `Choice.Description`. `min-w-0` so long titles truncate instead of
- * pushing the row wide.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const Content: import("react").ForwardRefExoticComponent<Omit<ChoiceContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/**
- * Props for `Choice.Label`. The mantle `Label` props, minus `htmlFor` and
- * `disabled` — those are owned by `Choice.Root` (the control id and the choice's
- * disabled state) and are not part of the public surface, so consumer props can
- * never override the label-to-control wiring.
- */
-type ChoiceLabelProps = Omit<ComponentProps<typeof Label>, "htmlFor" | "disabled">;
-/**
- * The emphasized title of a `Choice`, rendered as a real `<label>` wired to the
- * control by `htmlFor`, so clicking it toggles the control and it supplies the
- * control's accessible name. Use this when the `Choice` owns the labeling (a
- * standalone checkbox, a raw `<form>`, React-state-only).
- *
- * It is the mantle {@link Label} (not a re-implementation), so it keeps every
- * base-label behavior — cursor, the double-click text-selection guard, and the
- * auto `font-medium` — and mirrors how `Field.Label` reuses `Label`. When an
- * ancestor already owns the labeling and click target (a fully-clickable list
- * row or a Headless radio item), use `Choice.Title` instead — a label-less `<p>`
- * (it accepts `asChild`) — so labels never nest or compete.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const ChoiceLabel: import("react").ForwardRefExoticComponent<Omit<ChoiceLabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-/**
- * The emphasized title of a `Choice`, label-styled but **not** a `<label>` —
- * renders a `<p>`. Mirrors `Field.LabelText`. Use this when something else owns
- * the control's labeling and click target: a fully-clickable list row or a
- * Headless radio item. It avoids nesting two `<label>`s or splitting
- * the click target. Pass `asChild` to supply your own element. For a standalone
- * control — or inside a `Field` — where the title can be the label, use
- * `Choice.Label`.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root id="onboarding-key">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Title>Onboarding Key</Choice.Title>
- *     <Choice.Description>ng-3FaThZL***8xiA</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const Title: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
-/**
- * The de-emphasized supplementary line of a `Choice`, in the muted body color
- * and wired to the control via `aria-describedby` (never a second label).
- * Renders a `<p>`; pass `asChild` to supply your own element.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
-/**
- * A reusable indicator-left / content-right layout for a single choice: a
- * control (checkbox, radio, switch) beside an emphasized title and an optional
- * de-emphasized description. Use it to pair a checkbox or radio with a rich,
- * titled label, or reach for it directly to build your own choice-like rows.
- *
- * It is a pure layout + association primitive: it owns the control's `id` and
- * the description's `id` and wires them together, but does **not** own the
- * control's value — drop your own control into `Choice.Indicator`. Pick
- * `Choice.Label` (a real `<label>`) when the `Choice` owns the labeling, or
- * `Choice.Title` (label-less text) when an ancestor (a clickable row or a
- * Headless radio item) already does.
- *
- * **Use it for choice-like layouts** — a checkbox or radio input that needs an
- * associated label and an optional supplementary description. It is not a
- * general-purpose layout primitive; for laying out non-control content, reach
- * for a plain flex/grid or `MediaObject` instead.
- *
- * **Field interop.** Inside a `Field.Control`, `Choice.Root` reads the field's
- * `id` / `name` / `aria-*` and merges its description into the control's
- * `aria-describedby`. Outside a `Field` it uses its own generated ids — the two
- * are aware of each other but neither is required.
- *
- * @see https://mantle.ngrok.com/components/forms/choice
- *
- * @example
- * Composition:
- * ```
- * Choice.Root
- * ├── Choice.Indicator
- * └── Choice.Content
- *     ├── Choice.Label        (or Choice.Title — pick one)
- *     └── Choice.Description
- * ```
- *
- * @example
- * ```tsx
- * <Choice.Root name="notify">
- *   <Choice.Indicator>
- *     <Checkbox />
- *   </Choice.Indicator>
- *   <Choice.Content>
- *     <Choice.Label>Email</Choice.Label>
- *     <Choice.Description>Get notified by email.</Choice.Description>
- *   </Choice.Content>
- * </Choice.Root>
- * ```
- */
-declare const Choice: {
-  Root: typeof Root;
-  Indicator: typeof Indicator;
-  Content: typeof Content;
-  Label: typeof ChoiceLabel;
-  Title: typeof Title;
-  Description: typeof Description;
-};
-//#endregion
+import { n as ChoiceRootProps, t as Choice } from "./choice-BNRQXszu.js";
 export { Choice, type ChoiceRootProps };

package/dist/choice.js

@@ -1 +1 @@
-import{t as e}from"./choice-DOdyNzFC.js";export{e as Choice};
+import{t as e}from"./choice-BHwFSSyv.js";export{e as Choice};

package/dist/code-block.d.ts

@@ -1,7 +1,7 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
-import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
-import { A as FoldStrategy, B as computeJsonFoldRanges, C as Indentation, D as FoldExplanation, E as ComputeFoldRangesInput, F as isSupportedLanguage, H as finalizeFoldRanges, I as parseLanguage, L as supportedLanguages, M as computeFoldRanges, N as foldStrategyFor, O as FoldLine, P as SupportedLanguage, S as normalizeIndentation, T as isIndentation, U as LineRange, V as FoldableRange, _ as MantleCodeBlockValue, a as Mode, c as ResolvedPreRenderedCodeBlockProps, d as parseMetastring, f as resolvePreRenderedCodeBlockProps, g as parseCodeBlockShowLineNumbers, h as parseCodeBlockLineNumberStart, i as MetaInput, j as FoldToken, k as FoldScope, l as defaultMeta, m as parseCodeBlockHighlightLines, n as DefaultMeta, o as ResolvePreRenderedCodeBlockPropsInput, p as tokenizeMetastring, r as Meta, s as ResolvePreRenderedCodeBlockPropsResult, t as CodeBlockPreElementInput, u as normalizeValue, v as MantleCodeOptions, w as inferIndentation, x as mantleCode, y as createMantleCodeBlockValue, z as decorateHighlightedHtml } from "./resolve-pre-rendered-props-B6OlZrSI.js";
-import { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import { n as WithAsChild, t as SelfClosingWithAsChild } from "./as-child-D23mGo4f.js";
+import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
+import { A as FoldStrategy, B as computeJsonFoldRanges, C as Indentation, D as FoldExplanation, E as ComputeFoldRangesInput, F as isSupportedLanguage, H as finalizeFoldRanges, I as parseLanguage, L as supportedLanguages, M as computeFoldRanges, N as foldStrategyFor, O as FoldLine, P as SupportedLanguage, S as normalizeIndentation, T as isIndentation, U as LineRange, V as FoldableRange, _ as MantleCodeBlockValue, a as Mode, c as ResolvedPreRenderedCodeBlockProps, d as parseMetastring, f as resolvePreRenderedCodeBlockProps, g as parseCodeBlockShowLineNumbers, h as parseCodeBlockLineNumberStart, i as MetaInput, j as FoldToken, k as FoldScope, l as defaultMeta, m as parseCodeBlockHighlightLines, n as DefaultMeta, o as ResolvePreRenderedCodeBlockPropsInput, p as tokenizeMetastring, r as Meta, s as ResolvePreRenderedCodeBlockPropsResult, t as CodeBlockPreElementInput, u as normalizeValue, v as MantleCodeOptions, w as inferIndentation, x as mantleCode, y as createMantleCodeBlockValue, z as decorateHighlightedHtml } from "./code-block-B6OlZrSI.js";
+import { ComponentProps, ReactNode } from "react";
 import { Content, List, Trigger } from "@radix-ui/react-tabs";
 //#region src/components/code-block/code-block.d.ts
 type CodeBlockRootProps = Omit<ComponentProps<"div">, "align"> & WithAsChild & {
@@ -21,6 +21,49 @@ type CodeBlockRootProps = Omit<ComponentProps<"div">, "align"> & WithAsChild & {
    */
   onActiveTabChange?: (value: string) => void;
 };
+/**
+ * Shiki-powered code blocks with build-time syntax highlighting and zero browser bundle.
+ * This is the root component for all CodeBlock components.
+ *
+ * For tabbed code blocks, pass `defaultTab` (uncontrolled) or `activeTab` / `onActiveTabChange`
+ * (controlled) to enable tab switching with `CodeBlock.TabList` and `CodeBlock.TabContent`.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock.Root>
+ *   <CodeBlock.Header>
+ *     <CodeBlock.Icon preset="file" />
+ *     <CodeBlock.Title>example.ts</CodeBlock.Title>
+ *   </CodeBlock.Header>
+ *   <CodeBlock.Body>
+ *     <CodeBlock.CopyButton />
+ *     <CodeBlock.Code value={mantleCode("typescript")`const x = "hello";`} />
+ *   </CodeBlock.Body>
+ *   <CodeBlock.ExpanderButton />
+ * </CodeBlock.Root>
+ * ```
+ */
+declare const Root$1: ({ asChild, className, defaultTab, activeTab, onActiveTabChange, ref, ...props }: CodeBlockRootProps) => import("react").JSX.Element;
+/**
+ * The body of the `CodeBlock`. This is where `CodeBlock.Code` and
+ * the optional `CodeBlock.CopyButton` are rendered.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock.Root>
+ *   <CodeBlock.Header>
+ *     <CodeBlock.Icon preset="file" />
+ *     <CodeBlock.Title>example.ts</CodeBlock.Title>
+ *   </CodeBlock.Header>
+ *   <CodeBlock.Body>
+ *     <CodeBlock.CopyButton />
+ *     <CodeBlock.Code value={mantleCode("typescript")`const x = "hello";`} />
+ *   </CodeBlock.Body>
+ *   <CodeBlock.ExpanderButton />
+ * </CodeBlock.Root>
+ * ```
+ */
+declare const Body: ({ asChild, className, ref, ...props }: ComponentProps<"div"> & WithAsChild) => import("react").JSX.Element;
 type CodeBlockCodeProps = Omit<ComponentProps<"pre">, "children"> & {
   /**
    * The code value produced by `mantleCode("lang")` tagged template.
@@ -29,7 +72,127 @@ type CodeBlockCodeProps = Omit<ComponentProps<"pre">, "children"> & {
    */
   value: MantleCodeBlockValue;
 };
+/**
+ * The `CodeBlock` content. Renders pre-highlighted code from `mantleCode()`.
+ *
+ * `value["~preHtml"]` must be provided by Mantle's Vite plugin or server highlighter.
+ * Runtime highlighting and runtime line decoration are intentionally unsupported.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock.Root>
+ *   <CodeBlock.Header>
+ *     <CodeBlock.Icon preset="file" />
+ *     <CodeBlock.Title>example.ts</CodeBlock.Title>
+ *   </CodeBlock.Header>
+ *   <CodeBlock.Body>
+ *     <CodeBlock.CopyButton />
+ *     <CodeBlock.Code value={mantleCode("typescript")`const x = "hello";`} />
+ *   </CodeBlock.Body>
+ *   <CodeBlock.ExpanderButton />
+ * </CodeBlock.Root>
+ * ```
+ */
+declare const Code: ({ className, style, value, ref, ...props }: CodeBlockCodeProps) => import("react").JSX.Element;
+/**
+ * The (optional) header slot of the `CodeBlock`. This is where
+ * `CodeBlock.Icon` and `CodeBlock.Title` are rendered.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock.Root>
+ *   <CodeBlock.Header>
+ *     <CodeBlock.Icon preset="file" />
+ *     <CodeBlock.Title>example.ts</CodeBlock.Title>
+ *   </CodeBlock.Header>
+ *   <CodeBlock.Body>
+ *     <CodeBlock.CopyButton />
+ *     <CodeBlock.Code value={mantleCode("typescript")`const x = "hello";`} />
+ *   </CodeBlock.Body>
+ *   <CodeBlock.ExpanderButton />
+ * </CodeBlock.Root>
+ * ```
+ */
+declare const Header: ({ asChild, className, ref, ...props }: ComponentProps<"div"> & WithAsChild) => import("react").JSX.Element;
+/**
+ * The (optional) title of the `CodeBlock`. Renders as `h3` by default;
+ * use `asChild` to render a different element.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock.Root>
+ *   <CodeBlock.Header>
+ *     <CodeBlock.Icon preset="file" />
+ *     <CodeBlock.Title>example.ts</CodeBlock.Title>
+ *   </CodeBlock.Header>
+ *   <CodeBlock.Body>
+ *     <CodeBlock.CopyButton />
+ *     <CodeBlock.Code value={mantleCode("typescript")`const x = "hello";`} />
+ *   </CodeBlock.Body>
+ *   <CodeBlock.ExpanderButton />
+ * </CodeBlock.Root>
+ * ```
+ */
+declare const Title: ({ asChild, className, ref, ...props }: ComponentProps<"h3"> & {
+  asChild?: boolean;
+}) => import("react").JSX.Element;
+type CodeBlockCopyButtonProps = Omit<ComponentProps<"button">, "children" | "type"> & SelfClosingWithAsChild & {
+  /**
+   * The accessible label for the copy button. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.
+   *
+   * @default "Copy code"
+   */
+  label?: string;
+  /**
+   * Callback fired when the copy button is clicked, passes the copied text as an argument.
+   */
+  onCopy?: (value: string) => void;
+  /**
+   * Callback fired when an error occurs during copying.
+   */
+  onCopyError?: (error: unknown) => void;
+};
+/**
+ * The (optional) copy button of the `CodeBlock`. Copies the code content
+ * to the clipboard when clicked.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock.Root>
+ *   <CodeBlock.Header>
+ *     <CodeBlock.Icon preset="file" />
+ *     <CodeBlock.Title>example.ts</CodeBlock.Title>
+ *   </CodeBlock.Header>
+ *   <CodeBlock.Body>
+ *     <CodeBlock.CopyButton />
+ *     <CodeBlock.Code value={mantleCode("typescript")`const x = "hello";`} />
+ *   </CodeBlock.Body>
+ *   <CodeBlock.ExpanderButton />
+ * </CodeBlock.Root>
+ * ```
+ */
+declare const CopyButton: ({ className, label, onCopy, onCopyError, onClick, ref, ...props }: CodeBlockCopyButtonProps) => import("react").JSX.Element;
 type CodeBlockExpanderButtonProps = Omit<ComponentProps<"button">, "children" | "aria-controls" | "aria-expanded"> & WithAsChild;
+/**
+ * The (optional) expander button of the `CodeBlock`. Toggles the expanded
+ * state of the code block. When present, the code block is collapsible.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock.Root>
+ *   <CodeBlock.Header>
+ *     <CodeBlock.Icon preset="file" />
+ *     <CodeBlock.Title>example.ts</CodeBlock.Title>
+ *   </CodeBlock.Header>
+ *   <CodeBlock.Body>
+ *     <CodeBlock.CopyButton />
+ *     <CodeBlock.Code value={mantleCode("typescript")`const x = "hello";`} />
+ *   </CodeBlock.Body>
+ *   <CodeBlock.ExpanderButton />
+ * </CodeBlock.Root>
+ * ```
+ */
+declare const ExpanderButton: ({ asChild, className, onClick, ref, ...props }: CodeBlockExpanderButtonProps) => import("react").JSX.Element;
 type CodeBlockIconProps = Omit<SvgAttributes, "children"> & ({
   /**
    * A custom icon SVG to display in the code block header.
@@ -74,8 +237,73 @@ type CodeBlockIconProps = Omit<SvgAttributes, "children"> & ({
  */
 declare function CodeBlockIconComponent({ className, preset, svg: _svgProp, ...props }: CodeBlockIconProps): import("react").JSX.Element;
 type CodeBlockTabListProps = Omit<ComponentProps<typeof List>, "asChild" | "loop">;
+/**
+ * A tab list for the `CodeBlock` header. Renders pill-styled tab triggers
+ * that switch which code is displayed. Built on Radix Tabs primitives.
+ *
+ * Place this inside `CodeBlock.Header` and pair with `CodeBlock.TabContent`
+ * in `CodeBlock.Body` to conditionally render code based on the active tab.
+ * Tab state is managed by `CodeBlock.Root` via `defaultTab` / `activeTab` / `onActiveTabChange`.
+ *
+ * When the tabs exceed the available width they scroll horizontally with an edge
+ * fade (`scroll-fade-x`) instead of wrapping to a second row.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock.Root defaultTab="yml">
+ *   <CodeBlock.Header>
+ *     <CodeBlock.TabList>
+ *       <CodeBlock.TabTrigger value="yml">policy.yml</CodeBlock.TabTrigger>
+ *       <CodeBlock.TabTrigger value="json">policy.json</CodeBlock.TabTrigger>
+ *     </CodeBlock.TabList>
+ *   </CodeBlock.Header>
+ *   <CodeBlock.Body>
+ *     <CodeBlock.CopyButton />
+ *     <CodeBlock.TabContent value="yml">
+ *       <CodeBlock.Code value={ymlValue} />
+ *     </CodeBlock.TabContent>
+ *     <CodeBlock.TabContent value="json">
+ *       <CodeBlock.Code value={jsonValue} />
+ *     </CodeBlock.TabContent>
+ *   </CodeBlock.Body>
+ * </CodeBlock.Root>
+ * ```
+ */
+declare const TabList: ({ className, ref, ...props }: CodeBlockTabListProps) => import("react").JSX.Element;
 type CodeBlockTabTriggerProps = Omit<ComponentProps<typeof Trigger>, "asChild">;
+/**
+ * A pill-styled tab trigger for the `CodeBlock` header.
+ * Must be rendered within a `CodeBlock.TabList`.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock.TabList>
+ *   <CodeBlock.TabTrigger value="yml">policy.yml</CodeBlock.TabTrigger>
+ *   <CodeBlock.TabTrigger value="json">policy.json</CodeBlock.TabTrigger>
+ * </CodeBlock.TabList>
+ * ```
+ */
+declare const TabTrigger: ({ className, ref, ...props }: CodeBlockTabTriggerProps) => import("react").JSX.Element;
 type CodeBlockTabContentProps = Omit<ComponentProps<typeof Content>, "asChild" | "forceMount">;
+/**
+ * Conditionally renders its children when the associated tab is active.
+ * Pair with `CodeBlock.TabList` and `CodeBlock.TabTrigger` in the header,
+ * and set `defaultTab` / `activeTab` on `CodeBlock.Root`.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock.Body>
+ *   <CodeBlock.CopyButton />
+ *   <CodeBlock.TabContent value="yml">
+ *     <CodeBlock.Code value={ymlValue} />
+ *   </CodeBlock.TabContent>
+ *   <CodeBlock.TabContent value="json">
+ *     <CodeBlock.Code value={jsonValue} />
+ *   </CodeBlock.TabContent>
+ * </CodeBlock.Body>
+ * ```
+ */
+declare const TabContent: (props: CodeBlockTabContentProps) => import("react").JSX.Element;
 /**
  * Shiki-powered code blocks with build-time syntax highlighting and zero browser bundle.
  *
@@ -158,7 +386,7 @@ declare const CodeBlock: {
    * </CodeBlock.Root>
    * ```
    */
-  readonly Root: import("react").ForwardRefExoticComponent<Omit<CodeBlockRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Root: typeof Root$1;
   /**
    * The body of the `CodeBlock`. Contains `Code` and optional `CopyButton`.
    *
@@ -177,7 +405,7 @@ declare const CodeBlock: {
    * </CodeBlock.Root>
    * ```
    */
-  readonly Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Body: typeof Body;
   /**
    * The code content. Renders pre-highlighted Shiki HTML when the Vite plugin is active.
    *
@@ -196,7 +424,7 @@ declare const CodeBlock: {
    * </CodeBlock.Root>
    * ```
    */
-  readonly Code: import("react").ForwardRefExoticComponent<Omit<CodeBlockCodeProps, "ref"> & import("react").RefAttributes<HTMLPreElement>>;
+  readonly Code: typeof Code;
   /**
    * The optional copy button.
    *
@@ -215,43 +443,7 @@ declare const CodeBlock: {
    * </CodeBlock.Root>
    * ```
    */
-  readonly CopyButton: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "type"> & {
-    asChild: true;
-    children: ReactNode;
-  } & {
-    /**
-     * The accessible label for the copy button. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.
-     *
-     * @default "Copy code"
-     */
-    label?: string;
-    /**
-     * Callback fired when the copy button is clicked, passes the copied text as an argument.
-     */
-    onCopy?: (value: string) => void;
-    /**
-     * Callback fired when an error occurs during copying.
-     */
-    onCopyError?: (error: unknown) => void;
-  }, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "type"> & {
-    asChild?: false | undefined;
-    children?: undefined;
-  } & {
-    /**
-     * The accessible label for the copy button. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.
-     *
-     * @default "Copy code"
-     */
-    label?: string;
-    /**
-     * Callback fired when the copy button is clicked, passes the copied text as an argument.
-     */
-    onCopy?: (value: string) => void;
-    /**
-     * Callback fired when an error occurs during copying.
-     */
-    onCopyError?: (error: unknown) => void;
-  }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly CopyButton: typeof CopyButton;
   /**
    * The optional expander button for collapsible code blocks.
    *
@@ -270,7 +462,7 @@ declare const CodeBlock: {
    * </CodeBlock.Root>
    * ```
    */
-  readonly ExpanderButton: import("react").ForwardRefExoticComponent<Omit<CodeBlockExpanderButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly ExpanderButton: typeof ExpanderButton;
   /**
    * The optional header slot for icon and title.
    *
@@ -289,7 +481,7 @@ declare const CodeBlock: {
    * </CodeBlock.Root>
    * ```
    */
-  readonly Header: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Header: typeof Header;
   /**
    * A small icon for the code block header. Use `preset` or `svg`.
    *
@@ -333,7 +525,7 @@ declare const CodeBlock: {
    * </CodeBlock.Root>
    * ```
    */
-  readonly TabContent: import("react").ForwardRefExoticComponent<Omit<CodeBlockTabContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly TabContent: typeof TabContent;
   /**
    * A tab list for the code block header. Renders pill-styled tabs for switching code.
    *
@@ -358,7 +550,7 @@ declare const CodeBlock: {
    * </CodeBlock.Root>
    * ```
    */
-  readonly TabList: import("react").ForwardRefExoticComponent<Omit<CodeBlockTabListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly TabList: typeof TabList;
   /**
    * A pill-styled tab trigger for the code block header. Must be inside `TabList`.
    *
@@ -383,7 +575,7 @@ declare const CodeBlock: {
    * </CodeBlock.Root>
    * ```
    */
-  readonly TabTrigger: import("react").ForwardRefExoticComponent<Omit<CodeBlockTabTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly TabTrigger: typeof TabTrigger;
   /**
    * The optional title rendered in the header.
    *
@@ -402,9 +594,7 @@ declare const CodeBlock: {
    * </CodeBlock.Root>
    * ```
    */
-  readonly Title: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
-    asChild?: boolean;
-  } & import("react").RefAttributes<HTMLHeadingElement>>;
+  readonly Title: typeof Title;
 };
 //#endregion
 //#region src/components/code-block/json-highlight.d.ts