@ngrok/mantle 0.79.3 → 0.81.0

package/dist/chart-BcOC6Qj0.d.ts

@@ -0,0 +1,275 @@
+import { t as SelfClosingWithAsChild } from "./as-child-D23mGo4f.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/chart/types.d.ts
+/**
+ * Shared types for the internal canvas chart engine.
+ *
+ * This module is internal shared implementation — it is not exported from the
+ * package. The public components built on it are `BarChart` (../bar-chart),
+ * `LineChart` (../line-chart), `AreaChart` (../area-chart), and
+ * `ScatterPlot` (../scatter-plot), mirroring how `dialog/primitive` backs
+ * the dialog family.
+ */
+/**
+ * The value of the x field in a chart datum: a category label, a number, or a
+ * point in time.
+ */
+type XValue = string | number | Date;
+/**
+ * A single row of chart data — any object shape. Series read one numeric key
+ * per row; the x key identifies the row's position on the x axis. Missing
+ * keys and `null` values are rendered as gaps. Typed as `object` (not an
+ * index signature) so interface-typed rows compose without ceremony; reads
+ * happen through `datumValue` at the data boundary.
+ */
+type ChartDatum = object;
+/**
+ * How x values map onto the x axis:
+ *
+ * - `"band"` — categorical bands with air between them (bar charts).
+ * - `"point"` — categorical positions with no band thickness (line/area over categories).
+ * - `"linear"` — continuous numeric axis.
+ * - `"time"` — continuous time axis with calendar-aware ticks.
+ */
+type XScaleKind = "band" | "point" | "linear" | "time";
+/**
+ * The x scale kinds a consumer may request on line/area charts. Bar charts are
+ * always `"band"`.
+ */
+type ContinuousXScale = Exclude<XScaleKind, "band">;
+/**
+ * The mark a registered series paints.
+ */
+type SeriesMark = "bar" | "line" | "area" | "scatter";
+/**
+ * The ordered chart color tokens. Slots are assigned to series in registration
+ * order and stick to their `dataKey` for the chart's lifetime; series past the
+ * eighth slot use `"chart-other"`.
+ */
+type ChartColorToken = "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-other";
+/**
+ * A series color: one of the validated chart tokens (preferred — they adapt to
+ * light/dark/high-contrast themes) or any CSS color string as an escape hatch.
+ * Static colors (e.g. raw hex) do not adapt across themes; custom palettes
+ * must be validated for colorblind-safe adjacency and surface contrast. A
+ * series that carries good/bad meaning (error rate, pass/fail) should wear the
+ * semantic status colors, never a categorical chart slot.
+ */
+type SeriesColor = ChartColorToken | (string & {});
+/**
+ * Line/area interpolation between points.
+ */
+type CurveKind = "linear" | "monotone" | "step";
+/**
+ * The glyph a series' points wear: scatter marks, line canvas markers, and
+ * the hover dot on line/area charts. Shape is a redundant encoding alongside
+ * color, so series stay distinguishable without color vision.
+ */
+type PointShape = "circle" | "square" | "triangle" | "diamond";
+/**
+ * The fill texture a bar series wears: solid color (the default), diagonal
+ * hatch lines at 45° (`"hatch"`), the 135° mirror (`"hatch-reverse"`), both
+ * (`"crosshatch"`), rungs perpendicular to the bar's length
+ * (`"perpendicular"` — horizontal lines on vertical bars), or an offset dot
+ * grid (`"dots"`). Texture is a redundant identity encoding alongside color —
+ * inked tone-on-tone at equal loudness across slots — so grouped and stacked
+ * series stay distinguishable without color vision, in grayscale print, and
+ * under forced colors.
+ */
+type BarTexture = "solid" | "hatch" | "hatch-reverse" | "crosshatch" | "perpendicular" | "dots";
+/**
+ * The direction a bar chart's bars run: vertical columns rising from a bottom
+ * baseline (the default), or horizontal bars growing rightward from a left
+ * baseline — the layout for long category labels, which move into the left
+ * gutter at full width instead of colliding under the plot.
+ */
+type BarOrientation = "vertical" | "horizontal";
+/**
+ * A series with its resolved presentation, exposed to the legend, tooltip, and
+ * data table.
+ */
+type SeriesMeta = {
+  dataKey: string;
+  label: string;
+  mark: SeriesMark;
+  /** The CSS color string the series paints with (token-resolved). */
+  color: string;
+  /** The color as authored (token name or custom string) before resolution. */
+  colorInput: SeriesColor;
+  /** The point glyph the series wears (scatter marks, legend keys, hover dots). */
+  shape: PointShape;
+  /** The fill texture the series wears (bar marks and their legend keys). */
+  texture: BarTexture;
+};
+/**
+ * Grid line orientation.
+ */
+type GridLines = "horizontal" | "vertical" | "both";
+/**
+ * The hover/keyboard snapshot published by the engine. One snapshot describes
+ * the active x position and every series' value at it — the tooltip, the
+ * aria-live announcement, and `onDatumActivate` all read from it.
+ */
+type HoverSnapshot = {
+  /** The active row's index in the consumer's `data` array. */
+  index: number;
+  /** The x value at the active index. */
+  xValue: XValue;
+  /** The original consumer datum at the active index. */
+  datum: ChartDatum;
+  /** Every registered series' value at the active index, in visual order. */
+  points: Array<{
+    dataKey: string;
+    label: string;
+    /** `null` renders as a gap (an em dash in the tooltip). */
+    value: number | null;
+    color: string;
+  }>;
+  /** The depth value at the active index (3D scatter plots only). */
+  zValue?: number | null;
+  /** Whether the snapshot came from keyboard stepping (vs pointer hover). */
+  viaKeyboard: boolean;
+};
+/**
+ * Payload for datum activation (click / Enter / Space).
+ */
+type ChartDatumEvent<TDatum extends ChartDatum = ChartDatum> = {
+  /** The activated row's index in the consumer's `data` array. */
+  index: number;
+  /** The x value of the activated row. */
+  xValue: XValue;
+  /** The activated row itself. */
+  datum: TDatum;
+  /** The series nearest the pointer when activated by mouse; `null` for keyboard/whole-band activation. */
+  dataKey: string | null;
+};
+/**
+ * The y domain for value axes. Bar and area charts anchor the baseline at
+ * zero, so their minimum is fixed at `0`; line charts may override both ends.
+ */
+type YDomain = [number | "auto", number | "auto"];
+//#endregion
+//#region src/components/chart/primitive.d.ts
+/**
+ * The shared React layer of the chart family. `BarChart`, `LineChart`,
+ * `AreaChart`, and `ScatterPlot` are thin public wrappers over these
+ * primitives, mirroring how `dialog/primitive` backs the dialog family and
+ * `list/primitive` backs the list family.
+ *
+ * Interaction is the Root's UNCONDITIONAL contract: the crosshair/hover band,
+ * tooltip, keyboard stepping (arrows / PageUp / PageDown / Home / End /
+ * Escape, Enter/Space to activate), aria-live announcements, and the sr-only
+ * data table all ship with Root itself. The composed Tooltip part customizes
+ * the readout; omitting it never removes the hover layer, and no part removal
+ * can strip keyboard access to the data.
+ *
+ * This module is internal shared implementation — it is not exported from the
+ * package.
+ */
+/**
+ * Every chart must have an accessible name: either a direct `aria-label` or
+ * an `aria-labelledby` reference to a visible title (preferred when the chart
+ * sits under a heading — no drift-prone duplicated text). Enforced at the
+ * type level; the name lands on the interaction overlay (the chart's single
+ * named element — the canvas itself is aria-hidden so AT never announces the
+ * chart twice).
+ */
+type ChartAccessibleName = {
+  "aria-label": string;
+  "aria-labelledby"?: never;
+} | {
+  "aria-labelledby": string;
+  "aria-label"?: never;
+};
+/**
+ * Root props shared by every chart kind, WITHOUT the accessible-name union or
+ * the data/x props. Public wrappers `Omit` from this base and re-intersect
+ * `ChartAccessibleName` — `Omit` over a union type flattens it, which would
+ * silently make the required accessible name optional.
+ */
+type ChartRootBaseProps = Omit<ComponentProps<"div">, "aria-label" | "aria-labelledby"> & WithDataSlot & {
+  /** Override the automatic y domain. */
+  yDomain?: YDomain;
+  /** Stack the composed series (bar/area charts). */
+  stacked?: boolean;
+  /** Animate enter/update transitions. `prefers-reduced-motion` always wins. */
+  animate?: boolean;
+  /**
+   * Hold the previous render at reduced opacity while fresh data loads —
+   * never swap a chart that has rendered once for a skeleton.
+   */
+  pending?: boolean;
+  /**
+   * Controlled active datum index — an index into `data` (`null` = none).
+   * Omit for uncontrolled hover.
+   */
+  activeIndex?: number | null;
+  /** Notified when hover/keyboard moves the active index (an index into `data`). */
+  onActiveIndexChange?: (index: number | null) => void;
+  /** Notified on datum activation: mark click, or Enter/Space on the focused chart. */
+  onDatumActivate?: (event: ChartDatumEvent) => void;
+};
+type GridPrimitiveProps = {
+  /** Which gridlines to draw. */
+  lines?: GridLines;
+};
+type XAxisPrimitiveProps = {
+  /**
+   * Format a tick label. Receives the chart's x values: the category value on
+   * band/point scales, a `Date` on time scales, and a number on linear scales.
+   */
+  tickFormat?: (value: XValue) => string;
+  /** Target tick count (continuous scales only; a density-derived default otherwise). */
+  tickCount?: number;
+};
+type YAxisPrimitiveProps = {
+  /** Format a tick label. Defaults to thousands-separated numbers. */
+  tickFormat?: (value: number) => string;
+  /** Target tick count. */
+  tickCount?: number;
+};
+type ReferenceLinePrimitiveProps = {
+  /** The y value the line marks (an SLO threshold, a budget, a limit). */
+  y: number;
+  /** A short label painted above the line's right end. */
+  label?: string;
+  /** Line color; defaults to the neutral reference color. */
+  color?: SeriesColor;
+};
+type TooltipPrimitiveProps = Omit<ComponentProps<"div">, "children"> & {
+  /** Format the x/label row of the readout. */
+  labelFormat?: (value: XValue) => ReactNode;
+  /** Format each series value. */
+  valueFormat?: (value: number, dataKey: string) => ReactNode;
+  /** The per-series color key: a short stroke (default) or nothing. */
+  indicator?: "line" | "none";
+  /** Extra content appended below the series rows (e.g. a "view logs" hint). */
+  footer?: ReactNode | ((snapshot: HoverSnapshot) => ReactNode);
+  /** Replace the entire readout. */
+  children?: (snapshot: HoverSnapshot) => ReactNode;
+};
+type LegendPrimitiveProps = Omit<ComponentProps<"div">, "children"> & {
+  /** Replace the default legend items; receives the registered series. */
+  children?: (series: SeriesMeta[]) => ReactNode;
+};
+type CopyButtonPrimitiveProps = Omit<ComponentProps<"button">, "children" | "type" | "onCopy"> & 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 data as Markdown"
+   */
+  label?: string;
+  /**
+   * Callback fired after a successful copy, passes the serialized markdown.
+   */
+  onCopy?: (value: string) => void;
+  /**
+   * Callback fired when an error occurs during copying.
+   */
+  onCopyError?: (error: unknown) => void;
+};
+//#endregion
+export { SeriesColor as _, LegendPrimitiveProps as a, XAxisPrimitiveProps as c, BarTexture as d, ChartDatum as f, PointShape as g, CurveKind as h, GridPrimitiveProps as i, YAxisPrimitiveProps as l, ContinuousXScale as m, ChartRootBaseProps as n, ReferenceLinePrimitiveProps as o, ChartDatumEvent as p, CopyButtonPrimitiveProps as r, TooltipPrimitiveProps as s, ChartAccessibleName as t, BarOrientation as u };

package/dist/checkbox-0EoxOyMA.js

@@ -0,0 +1 @@
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./clsx-DUGZgXfJ.js";import{a as n,r}from"./field-Bpptk_9t.js";import{useEffect as i,useRef as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=e=>e===`indeterminate`,l=({"aria-invalid":l,className:u,checked:d,defaultChecked:f,defaultValue:p=`on`,onClick:m,readOnly:h,ref:g,validation:_,...v})=>{let y=a(null),[b]=o(f),x=n(),{ariaInvalid:S,validation:C}=r({"aria-invalid":l,validation:_??x}),w=d??b;i(()=>{y.current&&(y.current.indeterminate=c(w))},[w]);let T=d==null?{defaultChecked:c(b)?void 0:b}:{checked:!c(d)&&d};return s(`input`,{"aria-checked":c(d)?`mixed`:d,"aria-invalid":S,"data-slot":`checkbox`,className:t(`border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50`,`bg-center bg-no-repeat focus:outline-hidden`,`focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4`,`checked:border-accent-600 checked:bg-accent-600 checked:bg-checked-icon`,`indeterminate:border-accent-600 indeterminate:bg-accent-600 indeterminate:bg-indeterminate-icon`,`data-validation-success:border-success-600 data-validation-success:checked:bg-success-600 data-validation-success:indeterminate:bg-success-600 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-600 data-validation-warning:indeterminate:bg-warning-600 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-600 data-validation-error:indeterminate:bg-danger-600 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger`,`where:block where:size-4 where:p-0`,u),...T,"data-validation":C||void 0,defaultValue:p,onClick:e=>{if(h){e.preventDefault();return}m?.(e)},readOnly:h,ref:e(y,g),type:`checkbox`,...v})};function u({allSelected:e,someSelected:t}){return e?!0:t?`indeterminate`:!1}export{u as n,l as t};

package/dist/checkbox.d.ts

@@ -1,6 +1,17 @@
-import { o as WithValidation } from "./validation-7QeiTFwl.js";
+import { o as WithValidation } from "./field-7QeiTFwl.js";
+import { ComponentProps } from "react";
 //#region src/components/checkbox/checkbox.d.ts
 type CheckedState = boolean | "indeterminate";
+type Props = Omit<ComponentProps<"input">, "type" | "checked" | "defaultChecked"> & WithValidation & {
+  /**
+   * The controlled checked state of the checkbox. Must be used in conjunction with onChange.
+   */
+  checked?: CheckedState;
+  /**
+   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+   */
+  defaultChecked?: CheckedState;
+};
 /**
  * A form control that allows the user to toggle between checked and not checked.
  * Supports indeterminate state.
@@ -21,16 +32,7 @@ type CheckedState = boolean | "indeterminate";
  * </form>
  * ```
  */
-declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "checked" | "defaultChecked" | "type"> & WithValidation & {
-  /**
-   * The controlled checked state of the checkbox. Must be used in conjunction with onChange.
-   */
-  checked?: CheckedState;
-  /**
-   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
-   */
-  defaultChecked?: CheckedState;
-} & import("react").RefAttributes<HTMLInputElement>>;
+declare const Checkbox: ({ "aria-invalid": _ariaInvalid, className, checked: _checked, defaultChecked: _defaultChecked, defaultValue, onClick, readOnly, ref, validation: _validation, ...props }: Props) => import("react").JSX.Element;
 /**
  * Resolve the tri-state `checked` value for a "select all" checkbox from the
  * current selection counts: `true` when everything is selected,

package/dist/checkbox.js

@@ -1 +1 @@
-import{n as e,t}from"./checkbox-DJ2xl7Rc.js";export{t as Checkbox,e as selectAllChecked};
+import{n as e,t}from"./checkbox-0EoxOyMA.js";export{t as Checkbox,e as selectAllChecked};

package/dist/choice-BHwFSSyv.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{t as n}from"./field-B1wqeZr4.js";import{t as r}from"./label-D-D11mlp.js";import{cloneElement as i,createContext as a,isValidElement as o,useContext as s,useId as c,useMemo as l}from"react";import u from"tiny-invariant";import{jsx as d}from"react/jsx-runtime";const f=a(null);function p(e){let t=s(f);return u(t,`Choice.${e} must be rendered inside Choice.Root.`),t}const m={Root:({"aria-describedby":t,"aria-errormessage":r,"aria-invalid":i,children:a,className:o,disabled:u=!1,id:p,name:m,ref:h,...g})=>{let _=s(n),v=_?.id,y=_?.name,b=_?.[`aria-describedby`],x=_?.[`aria-invalid`],S=_?.[`aria-errormessage`],C=c(),w=c(),T=v??p??C,E=[b??t,w].filter(Boolean).join(` `)||void 0,D=l(()=>({controlId:T,descriptionId:w,disabled:u,controlProps:{id:T,name:y??m,disabled:u,"aria-describedby":E,"aria-invalid":x??i,"aria-errormessage":S??r}}),[T,w,u,E,y,m,x,i,S,r]);return d(f.Provider,{value:D,children:d(`div`,{ref:h,"data-slot":`choice`,className:e(`flex w-full items-start gap-2`,o),...g,children:a})})},Indicator:({children:t,className:n,ref:r,...a})=>{let{controlProps:s}=p(`Indicator`),c=o(t)?i(t,{...s,disabled:s.disabled||t.props.disabled===!0,name:s.name??t.props.name,"aria-invalid":s[`aria-invalid`]??t.props[`aria-invalid`],"aria-errormessage":s[`aria-errormessage`]??t.props[`aria-errormessage`]}):t;return d(`span`,{ref:r,"data-slot":`choice-indicator`,className:e(`flex h-lh shrink-0 items-center text-sm`,n),...a,children:c})},Content:({asChild:n,className:r,ref:i,...a})=>d(n?t:`div`,{ref:i,"data-slot":`choice-content`,className:e(`flex min-w-0 flex-1 flex-col gap-0.5`,r),...a}),Label:({className:t,ref:n,...i})=>{let{controlId:a,disabled:o}=p(`Label`);return d(r,{ref:n,"data-slot":`choice-label`,className:e(o&&`opacity-50`,t),...i,htmlFor:a,disabled:o})},Title:({asChild:n,className:r,ref:i,...a})=>{let{disabled:o}=p(`Title`);return d(n?t:`p`,{ref:i,"data-slot":`choice-title`,className:e(`text-strong text-sm font-medium font-sans`,o&&`opacity-50`,r),...a})},Description:({asChild:n,className:r,ref:i,...a})=>{let{descriptionId:o,disabled:s}=p(`Description`);return d(n?t:`p`,{ref:i,id:o,"data-slot":`choice-description`,className:e(`text-body text-sm leading-4`,s&&`opacity-50`,r),...a})}};export{m as t};

package/dist/choice-BNRQXszu.d.ts

@@ -0,0 +1,254 @@
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { t as Label } from "./label-C6YH9skg.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: ({ "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, children, className, disabled, id, name, ref, ...props }: ChoiceRootProps) => import("react").JSX.Element;
+type ChoiceIndicatorProps = ComponentProps<"span">;
+/**
+ * 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: ({ children, className, ref, ...props }: ChoiceIndicatorProps) => import("react").JSX.Element;
+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: ({ asChild, className, ref, ...props }: ChoiceContentProps) => import("react").JSX.Element;
+/**
+ * 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: ({ className, ref, ...props }: ChoiceLabelProps) => import("react").JSX.Element;
+/**
+ * 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: ({ asChild, className, ref, ...props }: ComponentProps<"p"> & WithAsChild) => import("react").JSX.Element;
+/**
+ * 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: ({ asChild, className, ref, ...props }: ComponentProps<"p"> & WithAsChild) => import("react").JSX.Element;
+/**
+ * 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
+export { ChoiceRootProps as n, Choice as t };