@ngrok/mantle 0.79.3 → 0.81.0

package/dist/field.d.ts

@@ -1,8 +1,10 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
-import { t as ButtonIntent } from "./intents-DdSKSj1c.js";
-import { n as IconButtonAppearance, r as IconButtonProps } from "./icon-button-BvQvT790.js";
-import { a as ValidationState, c as parseValidation, i as ValidationProp, l as resolveValidation, n as ParsedValidation, o as WithValidation, r as Validation, s as isAriaInvalid, t as AriaInvalid } from "./validation-7QeiTFwl.js";
-import { t as Slot } from "./index-Rv8RL7xy.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { t as ButtonIntent } from "./button-DdSKSj1c.js";
+import { n as IconButtonProps, r as IconButtonAppearance } from "./button-C7vAl6lS.js";
+import { a as ValidationState, c as parseValidation, i as ValidationProp, l as resolveValidation, n as ParsedValidation, o as WithValidation, r as Validation, s as isAriaInvalid, t as AriaInvalid } from "./field-7QeiTFwl.js";
+import { t as Label } from "./label-C6YH9skg.js";
+import { t as Popover } from "./popover-CE4OlWkd.js";
+import { t as Slot } from "./slot-BtwKJTLq.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";
 //#region src/components/field/field-context.d.ts
 /**
@@ -43,6 +45,333 @@ type FieldControlAriaProps = {
 type FieldErrorMessage = string | null | undefined | false;
 //#endregion
 //#region src/components/field/field.d.ts
+/**
+ * Renders a semantic `<fieldset>` for grouping related controls under a
+ * single accessible name. Resets the default browser fieldset chrome
+ * (border, padding, `min-width` quirk) so it composes cleanly with
+ * `Field.Legend` and `Field.Group`. Always renders a real `<fieldset>` so
+ * the grouping semantics cannot be accidentally removed.
+ *
+ * Reach for `Field.Set` when the grouping carries semantic weight — most
+ * commonly a `RadioGroup` (where the legend names the question the radios
+ * answer) or a set of related checkboxes. For laying out unrelated fields
+ * with consistent spacing, prefer `Field.Group` on its own.
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * <Field.Set>
+ *   <Field.Legend>Notification frequency</Field.Legend>
+ *   <RadioGroup.Root name="frequency" defaultValue="daily">
+ *     <RadioGroup.Item value="daily" id="freq-daily">…</RadioGroup.Item>
+ *     <RadioGroup.Item value="weekly" id="freq-weekly">…</RadioGroup.Item>
+ *   </RadioGroup.Root>
+ * </Field.Set>
+ * ```
+ */
+declare const FieldSet: ({ className, ref, ...props }: ComponentProps<"fieldset">) => import("react").JSX.Element;
+/**
+ * The caption for a `Field.Set`. Always renders a semantic `<legend>` styled
+ * to match the `Label` component so a fieldset reads like a section header,
+ * and gives screen readers an accessible name for the surrounding group
+ * (e.g. "Notification frequency, group, Daily").
+ *
+ * **Spacing.** Has a default `mb-1.5` so the legend sits 6px above the next
+ * sibling — matching the figma. We use a margin (not the parent `Field.Set`'s
+ * flex `gap`) because `<legend>` has special browser rendering inside a
+ * `<fieldset>` that ignores the parent's flex `gap`. Override the default
+ * with any `mb-*` utility on `Field.Legend`.
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * <Field.Set>
+ *   <Field.Legend>Notification frequency</Field.Legend>
+ *   <RadioGroup.Root name="frequency" defaultValue="daily">
+ *     <RadioGroup.Item value="daily" id="freq-daily">…</RadioGroup.Item>
+ *     <RadioGroup.Item value="weekly" id="freq-weekly">…</RadioGroup.Item>
+ *   </RadioGroup.Root>
+ * </Field.Set>
+ * ```
+ */
+declare const Legend: ({ className, ref, ...props }: ComponentProps<"legend">) => import("react").JSX.Element;
+/**
+ * Caption for a `Field.Item`. Renders the Mantle `Label` with the same
+ * `htmlFor`, click-to-focus, disabled, and typography behavior — but inside a
+ * `Field.Item`, the label-to-control association is automatic: `Field.Item`
+ * generates a stable control id, `Field.Control` splats that id onto its
+ * focusable child, and `Field.Label` consumes the same id as the default
+ * `htmlFor`. The required `name` on `Field.Item` is the single source of truth
+ * for the control's form name — no matching `htmlFor` / `id` pair, no separate
+ * `useId()` call.
+ *
+ * Pass an explicit `htmlFor` to opt out — for example when the focusable
+ * element is rendered outside of `Field.Control` and the auto-generated id
+ * never lands on it.
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * // htmlFor is wired automatically from Field.Item's name.
+ * <Field.Item name="apiKey">
+ *   <Field.Label>API key</Field.Label>
+ *   <Field.Control>
+ *     <Input />
+ *   </Field.Control>
+ * </Field.Item>
+ *
+ * // Opt out with an explicit htmlFor when needed.
+ * <Field.Item name="legacy">
+ *   <Field.Label htmlFor="legacy-control">Legacy field</Field.Label>
+ *   <input id="legacy-control" />
+ * </Field.Item>
+ * ```
+ */
+declare const FieldLabel: ({ htmlFor, ref, ...props }: ComponentProps<typeof Label>) => import("react").JSX.Element;
+/**
+ * Static, label-styled text for a `Field.Item` row that does **not** caption a
+ * focusable form control. Renders a `<p>` (not a `<label>`) with the same
+ * typography as `Field.Label`, so a read-only row inside a sheet or details
+ * panel composes cleanly next to real form fields without misrepresenting
+ * itself as a control caption.
+ *
+ * **When to use**
+ * - A `Field.Item` row that displays a derived or system-managed value
+ *   (owner, created-at, computed status) where there is no `<input>`,
+ *   `<select>`, `<button>`, or other focusable target to label.
+ * - Read-only summary rows inside a sheet or detail panel that should
+ *   visually align with sibling `Field.Item`s but have no editable control.
+ * - Anywhere you would otherwise hand-roll a `<p>` styled to mimic
+ *   `Field.Label` typography — prefer this so intent is explicit at the call site.
+ *
+ * **When not to use**
+ * - The row has a focusable control (input, select, checkbox, switch,
+ *   button trigger). Use `Field.Label` so the click-to-focus and
+ *   accessible-name association are wired correctly.
+ * - For body copy, section headings, or any text whose typography happens
+ *   to look similar by accident — use the appropriate heading or `<p>`
+ *   directly. `Field.LabelText` exists specifically to slot into the
+ *   `Field.Label` position of a `Field.Item`.
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * <Field.Item name="owner">
+ *   <Field.LabelText>Owner</Field.LabelText>
+ *   <CredentialOwnerCard owner={owner} />
+ *   <Field.Description>The user or service user that owns this API key.</Field.Description>
+ * </Field.Item>
+ * ```
+ */
+declare const LabelText: ({ asChild, className, ref, ...props }: ComponentProps<"p"> & WithAsChild) => import("react").JSX.Element;
+/**
+ * Horizontal layout container for the label area of a field. Aligns a
+ * `<Field.Label>` (which may contain `Field.Optional`) with adjacent affordances
+ * like a help-icon `Popover.Trigger` on a shared center line with a tight
+ * `gap-1`. Center-alignment is used (not baseline) so SVG icon buttons —
+ * which have no text baseline — sit visually centered next to the label
+ * text rather than dropping to the box bottom.
+ *
+ * Use this when the label needs sibling decorations that can't live inside
+ * the `<Field.Label>` itself (e.g. an interactive help button — clicking inside a
+ * `<label>` would forward focus to the associated control). For a label
+ * with only an `(Optional)` suffix, place `Field.Optional` directly inside
+ * the `<Field.Label>` instead — no `LabelRow` needed.
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * <Field.Group>
+ *   <Field.Item name="apiKey">
+ *     <Field.LabelRow>
+ *       <Field.Label>
+ *         API key <Field.Optional />
+ *       </Field.Label>
+ *       <Field.Help>
+ *         <Field.HelpTrigger label="What is an API key?" />
+ *         <Field.HelpContent>Copy this from the dashboard.</Field.HelpContent>
+ *       </Field.Help>
+ *     </Field.LabelRow>
+ *     <Field.Control>
+ *       <Input />
+ *     </Field.Control>
+ *     <Field.Errors messages={["API key is required."]} />
+ *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
+ *   </Field.Item>
+ * </Field.Group>
+ * ```
+ */
+declare const LabelRow: ({ asChild, className, ref, ...props }: ComponentProps<"div"> & WithAsChild) => import("react").JSX.Element;
+/**
+ * Props for the default help popover trigger. A contextual label is required
+ * so repeated help affordances do not all share the same accessible name.
+ */
+type FieldHelpTriggerProps = Partial<Omit<IconButtonProps, "appearance" | "icon" | "intent" | "label">> & Pick<IconButtonProps, "label"> & {
+  /**
+   * The visual style of the trigger button. Optional here —
+   * `Field.HelpTrigger` defaults to `"ghost"` so the help affordance reads
+   * as subtle metadata next to the label.
+   *
+   * @default "ghost"
+   */
+  appearance?: IconButtonAppearance;
+  /**
+   * The icon to render inside the trigger button. Defaults to a Phosphor
+   * `QuestionIcon` so the most common case only needs a contextual label.
+   */
+  icon?: ReactNode;
+  /**
+   * The tone of the trigger button. Optional here — `Field.HelpTrigger`
+   * defaults to `"neutral"` because opening contextual help is a routine
+   * action.
+   *
+   * @default "neutral"
+   */
+  intent?: ButtonIntent;
+};
+/**
+ * The trigger for a `Field.Help` popover — a `Popover.Trigger` wired to a
+ * ghost-appearance `IconButton` with a default Phosphor `QuestionIcon`.
+ * Requires a contextual screen-reader label, and accepts `icon` or other
+ * `IconButton` props for visual customization.
+ *
+ * Pre-styled with `text-body` (matching the figma) so the icon reads as
+ * subtle metadata at rest; `IconButton`'s ghost `hover:text-strong` still
+ * brightens it on interaction. Carries a default `-my-0.5` so the 24px
+ * `xs` button keeps a full click target while contributing only 20px to
+ * the `Field.LabelRow` flex line — matching the label's text line-height
+ * so the label text is not pushed off-center.
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * <Field.Group>
+ *   <Field.Item name="apiKey">
+ *     <Field.LabelRow>
+ *       <Field.Label>
+ *         API key <Field.Optional />
+ *       </Field.Label>
+ *       <Field.Help>
+ *         <Field.HelpTrigger label="What is an API key?" />
+ *         <Field.HelpContent>Copy this from the dashboard.</Field.HelpContent>
+ *       </Field.Help>
+ *     </Field.LabelRow>
+ *     <Field.Control>
+ *       <Input />
+ *     </Field.Control>
+ *     <Field.Errors messages={["API key is required."]} />
+ *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
+ *   </Field.Item>
+ * </Field.Group>
+ * ```
+ */
+declare const HelpTrigger: ({ appearance, className, icon, intent, label, ref, size, type, ...props }: FieldHelpTriggerProps) => import("react").JSX.Element;
+/**
+ * The popover body for a `Field.Help`. Wraps `Popover.Content` so all
+ * positioning / sizing options (`side`, `align`, `preferredWidth`, etc.)
+ * work as expected, and overrides the inherited `data-slot` to
+ * `field-help-content` so consumers can target it as part of a `Field`
+ * subtree without colliding with other popovers.
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * <Field.Group>
+ *   <Field.Item name="apiKey">
+ *     <Field.LabelRow>
+ *       <Field.Label>
+ *         API key <Field.Optional />
+ *       </Field.Label>
+ *       <Field.Help>
+ *         <Field.HelpTrigger label="What is an API key?" />
+ *         <Field.HelpContent>Copy this from the dashboard.</Field.HelpContent>
+ *       </Field.Help>
+ *     </Field.LabelRow>
+ *     <Field.Control>
+ *       <Input />
+ *     </Field.Control>
+ *     <Field.Errors messages={["API key is required."]} />
+ *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
+ *   </Field.Item>
+ * </Field.Group>
+ * ```
+ */
+declare const HelpContent: ({ ref, ...props }: ComponentProps<typeof Popover.Content>) => import("react").JSX.Element;
+/**
+ * Inline "(Optional)" suffix to mark a field as optional. Defaults to the
+ * literal string `(Optional)` so the common case is `<Field.Optional />` with
+ * no children — pass children to translate or replace the text. Renders a
+ * `<span>` in `text-muted` at `text-sm` / `font-normal` so it reads as
+ * secondary metadata next to the bolder Label text.
+ *
+ * Place inside the `<Field.Label>` so screen readers announce it as part of the
+ * accessible name (e.g. "Email, Optional, edit text"). Pair with a small
+ * `gap` on the label's flex layout, or rely on the natural inline spacing.
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * <Field.Group>
+ *   <Field.Item name="apiKey">
+ *     <Field.LabelRow>
+ *       <Field.Label>
+ *         API key <Field.Optional />
+ *       </Field.Label>
+ *       <Field.Help>
+ *         <Field.HelpTrigger label="What is an API key?" />
+ *         <Field.HelpContent>Copy this from the dashboard.</Field.HelpContent>
+ *       </Field.Help>
+ *     </Field.LabelRow>
+ *     <Field.Control>
+ *       <Input />
+ *     </Field.Control>
+ *     <Field.Errors messages={["API key is required."]} />
+ *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
+ *   </Field.Item>
+ * </Field.Group>
+ * ```
+ */
+declare const Optional: ({ asChild, children, className, ref, ...props }: ComponentProps<"span"> & WithAsChild) => import("react").JSX.Element;
+/**
+ * Layout container that stacks multiple `Field.Item`s vertically with
+ * `gap-4` between them. This is the default way to compose multiple fields
+ * — most forms only need a `Field.Group` of `Field.Item`s. Reach for
+ * `Field.Set` + `Field.Legend` only when the grouping carries semantic
+ * weight (e.g. a `RadioGroup` or related checkboxes).
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * <Field.Group>
+ *   <Field.Item name="apiKey">
+ *     <Field.LabelRow>
+ *       <Field.Label>
+ *         API key <Field.Optional />
+ *       </Field.Label>
+ *       <Field.Help>
+ *         <Field.HelpTrigger label="What is an API key?" />
+ *         <Field.HelpContent>Copy this from the dashboard.</Field.HelpContent>
+ *       </Field.Help>
+ *     </Field.LabelRow>
+ *     <Field.Control>
+ *       <Input />
+ *     </Field.Control>
+ *     <Field.Errors messages={["API key is required."]} />
+ *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
+ *   </Field.Item>
+ * </Field.Group>
+ * ```
+ */
+declare const Group: ({ asChild, className, ref, ...props }: ComponentProps<"div"> & WithAsChild) => import("react").JSX.Element;
 /**
  * A single form field — `Label`, a control (`Input`, `Select`, `Checkbox`,
  * etc.), and any `Field.Description`, `Field.Errors`, or `Field.ErrorList` siblings stacked
@@ -95,10 +424,11 @@ type FieldItemProps = ComponentProps<"div"> & WithAsChild & WithValidation & {
    */
   name: string;
 };
+declare const Item: ({ asChild, children, className, name, ref, validation: validationProp, ...props }: FieldItemProps) => import("react").JSX.Element;
 type FieldControlSlotProps = Omit<ComponentProps<typeof Slot>, "aria-describedby" | "aria-errormessage" | "aria-invalid" | "children">;
 /**
  * Element-child form of `Field.Control`. Renders via `Slot`, so it accepts
- * any HTML/Slot props and a forwarded ref — those land on the single child
+ * any HTML/Slot props, including `ref` — those land on the single child
  * element along with the generated ARIA props.
  */
 type FieldControlElementProps = FieldControlSlotProps & {
@@ -122,6 +452,147 @@ type FieldControlRenderProps = {
    */
   children: (props: FieldControlAriaProps) => ReactNode;
 } & { [K in keyof FieldControlSlotProps]?: never; };
+/**
+ * Props for `Field.Control`. A discriminated union over how the caller
+ * supplies the focusable element:
+ *
+ * - `FieldControlElementProps` — pass a single React element child and
+ *   `Field.Control` clones the generated ARIA props onto it via `Slot`.
+ *   Accepts the full Slot prop surface, including `ref`.
+ * - `FieldControlRenderProps` — pass a render function that receives the
+ *   ARIA props and places them on a control of the caller's choosing. The
+ *   caller owns the rendered element, so DOM/Slot props and `ref` are
+ *   excluded from this variant at the type level.
+ *
+ * @example
+ * ```tsx
+ * // Element form — Slot splats id, name, and ARIA props onto <Input/>
+ * <Field.Item name="email">
+ *   <Field.Control>
+ *     <Input type="email" />
+ *   </Field.Control>
+ * </Field.Item>
+ *
+ * // Render-prop form — caller spreads the props onto its own element
+ * <Field.Item name="acceptTerms">
+ *   <Field.Control>
+ *     {(controlProps) => (
+ *       <label>
+ *         Accept terms
+ *         <input type="checkbox" {...controlProps} />
+ *       </label>
+ *     )}
+ *   </Field.Control>
+ * </Field.Item>
+ * ```
+ */
+type FieldControlProps = FieldControlElementProps | FieldControlRenderProps;
+/**
+ * Applies `Field.Item` description, error, and validation state to a single
+ * focusable control. It always behaves like an `asChild` slot: pass one child
+ * element to receive the generated ARIA props, or use a function child to
+ * place those props manually. Mantle compound controls that consume
+ * `FieldControlContext` can be wrapped at the root when their docs show that
+ * composition; otherwise use the render-prop form to place the generated props
+ * on the actual focusable element.
+ *
+ * `Field.Item` owns the full control contract — `id`, `name`, `aria-*`, and
+ * `validation` all flow down from the surrounding `Field.Item` and overwrite
+ * anything passed on the child. To override these values, set them on
+ * `Field.Item` itself (e.g. `<Field.Item validation="error">`); to opt out of
+ * the contract entirely, render your control without `Field.Control`.
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * <Field.Group>
+ *   <Field.Item name="apiKey">
+ *     <Field.LabelRow>
+ *       <Field.Label>
+ *         API key <Field.Optional />
+ *       </Field.Label>
+ *       <Field.Help>
+ *         <Field.HelpTrigger label="What is an API key?" />
+ *         <Field.HelpContent>Copy this from the dashboard.</Field.HelpContent>
+ *       </Field.Help>
+ *     </Field.LabelRow>
+ *     <Field.Control>
+ *       <Input />
+ *     </Field.Control>
+ *     <Field.Errors messages={["API key is required."]} />
+ *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
+ *   </Field.Item>
+ * </Field.Group>
+ * ```
+ */
+declare const Control: ({ children, ref, ...props }: FieldControlProps) => import("react").JSX.Element;
+/**
+ * Helper / hint text. Renders a `<p>` in the muted body color so it reads
+ * as secondary to the bolder content above it. Use inside `Field.Item`, below
+ * the control, to clarify expected format or constraints for that single field.
+ *
+ * **At most one per `Field.Item`.** `Field.Item` owns a single description
+ * slot ID and applies it via context, so a second `Field.Description` would
+ * duplicate that `id` in the DOM.
+ *
+ * **Auto-tighten.** When this description sits directly after rendered
+ * `Field.Errors` or `Field.ErrorList` output, the parent's `gap-1.5`
+ * collapses via a matching negative top margin so error list + helper read as
+ * one tight block. Pass any margin utility (`mt-1`, `mt-0`, etc.) to override
+ * — the rule's specificity is flattened to `(0,1,0)` so a single user class wins.
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * <Field.Group>
+ *   <Field.Item name="apiKey">
+ *     <Field.LabelRow>
+ *       <Field.Label>
+ *         API key <Field.Optional />
+ *       </Field.Label>
+ *       <Field.Help>
+ *         <Field.HelpTrigger label="What is an API key?" />
+ *         <Field.HelpContent>Copy this from the dashboard.</Field.HelpContent>
+ *       </Field.Help>
+ *     </Field.LabelRow>
+ *     <Field.Control>
+ *       <Input />
+ *     </Field.Control>
+ *     <Field.Errors messages={["API key is required."]} />
+ *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
+ *   </Field.Item>
+ * </Field.Group>
+ * ```
+ */
+declare const Description: ({ asChild, className, ref, ...props }: Omit<ComponentProps<"p">, "id"> & WithAsChild) => import("react").JSX.Element;
+/**
+ * A single error message list item for a field. Renders an `<li>` in
+ * `text-danger-600` so it stands out from a sibling `Field.Description`.
+ * Must be rendered inside a `Field.ErrorList`. Empty or blank children render
+ * nothing so message-less validator results do not produce empty list items.
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * <Field.Group>
+ *   <Field.Item name="username">
+ *     <Field.Label>Username</Field.Label>
+ *     <Field.Control>
+ *       <Input />
+ *     </Field.Control>
+ *     <Field.ErrorList>
+ *       <Field.ErrorItem>Must be at least 3 characters.</Field.ErrorItem>
+ *       <Field.ErrorItem>Use letters, numbers, hyphens, or underscores.</Field.ErrorItem>
+ *     </Field.ErrorList>
+ *     <Field.Description>Pick something memorable.</Field.Description>
+ *   </Field.Item>
+ * </Field.Group>
+ * ```
+ */
+declare const FieldErrorItem: ({ children, className, ref, ...props }: ComponentProps<"li">) => import("react").JSX.Element | null;
 /**
  * Props for the `Field.Errors` convenience renderer. It owns its generated
  * children, so use `Field.ErrorList` / `Field.ErrorItem` directly when custom
@@ -134,6 +605,82 @@ type FieldErrorsProps = Omit<ComponentProps<"ul">, "children" | "id"> & {
    */
   messages?: readonly FieldErrorMessage[];
 };
+/**
+ * Convenience renderer for string validation messages. Trims each message,
+ * filters empty values, and renders a semantic `Field.ErrorList` containing
+ * one `Field.ErrorItem` per remaining message.
+ *
+ * Accepts strings directly so product code can map any validation library's
+ * error shape into messages without coupling Mantle to that library.
+ * Deliberately does not support `asChild` because it owns the generated list
+ * items; use `Field.ErrorList` with `asChild` for custom list markup.
+ *
+ * **At most one per `Field.Item`.** `Field.Errors` renders a `Field.ErrorList`
+ * under the hood, and `Field.Item` owns a single errors slot ID. Use either
+ * `Field.Errors` *or* `Field.ErrorList` per item, not both, and pass multiple
+ * messages to one `Field.Errors` instead of rendering it twice.
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * <Field.Group>
+ *   <Field.Item name="apiKey">
+ *     <Field.LabelRow>
+ *       <Field.Label>
+ *         API key <Field.Optional />
+ *       </Field.Label>
+ *       <Field.Help>
+ *         <Field.HelpTrigger label="What is an API key?" />
+ *         <Field.HelpContent>Copy this from the dashboard.</Field.HelpContent>
+ *       </Field.Help>
+ *     </Field.LabelRow>
+ *     <Field.Control>
+ *       <Input />
+ *     </Field.Control>
+ *     <Field.Errors messages={["API key is required."]} />
+ *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
+ *   </Field.Item>
+ * </Field.Group>
+ * ```
+ */
+declare const FieldErrors: ({ messages, ref, ...props }: FieldErrorsProps) => import("react").JSX.Element;
+/**
+ * Wraps one or more `Field.ErrorItem` children in a semantic `<ul>` with
+ * `role="list"` so a list of validation errors is announced as a list by
+ * screen readers, including Safari/VoiceOver combinations that drop list
+ * semantics when list styling is removed. Renders nothing when no children are
+ * passed, or when all `Field.ErrorItem` children are empty.
+ *
+ * The list strips its default browser styling (`list-none`, `p-0`, `m-0`) and
+ * stacks items as a flex column with no gap so consecutive errors read as a
+ * single tight block.
+ *
+ * **At most one per `Field.Item`.** `Field.Item` owns a single errors slot ID
+ * and applies it via context. Use either `Field.ErrorList` *or* `Field.Errors`
+ * per item, not both, and put multiple `Field.ErrorItem` children inside the
+ * single list instead of rendering two `Field.ErrorList`s.
+ *
+ * @see https://mantle.ngrok.com/components/forms/field
+ *
+ * @example
+ * ```tsx
+ * <Field.Group>
+ *   <Field.Item name="username">
+ *     <Field.Label>Username</Field.Label>
+ *     <Field.Control>
+ *       <Input />
+ *     </Field.Control>
+ *     <Field.ErrorList>
+ *       <Field.ErrorItem>Must be at least 3 characters.</Field.ErrorItem>
+ *       <Field.ErrorItem>Use letters, numbers, hyphens, or underscores.</Field.ErrorItem>
+ *     </Field.ErrorList>
+ *     <Field.Description>Pick something memorable.</Field.Description>
+ *   </Field.Item>
+ * </Field.Group>
+ * ```
+ */
+declare const FieldErrorList: ({ asChild, children, className, ref, ...props }: Omit<ComponentProps<"ul">, "id"> & WithAsChild) => import("react").JSX.Element | null;
 /**
  * Compound component for semantic, accessible form fields. Composes a
  * `Field.Label`, control (`Input`, `Select`, etc.), `Field.Description`, and
@@ -214,7 +761,7 @@ declare const Field: {
    * </Field.Group>
    * ```
    */
-  readonly Item: import("react").ForwardRefExoticComponent<Omit<FieldItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Item: typeof Item;
   /**
    * Applies generated field ARIA props and validation state to a single
    * focusable control. Accepts either a single React element child (cloned
@@ -254,7 +801,7 @@ declare const Field: {
    * </Field.Item>
    * ```
    */
-  readonly Control: import("react").ForwardRefExoticComponent<(Omit<FieldControlElementProps, "ref"> | Omit<FieldControlRenderProps, "ref">) & import("react").RefAttributes<HTMLElement>>;
+  readonly Control: typeof Control;
   /**
    * Layout container that stacks multiple `Field.Item`s vertically.
    *
@@ -282,7 +829,7 @@ declare const Field: {
    * </Field.Group>
    * ```
    */
-  readonly Group: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Group: typeof Group;
   /**
    * Semantic `<fieldset>` for related controls that share one accessible
    * name from `Field.Legend`.
@@ -300,7 +847,7 @@ declare const Field: {
    * </Field.Set>
    * ```
    */
-  readonly Set: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import("react").RefAttributes<HTMLFieldSetElement>>;
+  readonly Set: typeof FieldSet;
   /**
    * Caption for `Field.Set`. Renders a semantic `<legend>`.
    *
@@ -317,7 +864,7 @@ declare const Field: {
    * </Field.Set>
    * ```
    */
-  readonly Legend: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, "ref"> & import("react").RefAttributes<HTMLLegendElement>>;
+  readonly Legend: typeof Legend;
   /**
    * The Mantle `Label`, exposed on `Field` for field composition. Inside a
    * `Field.Item`, `htmlFor` defaults to the same stable id that `Field.Control`
@@ -352,9 +899,7 @@ declare const Field: {
    * </Field.Group>
    * ```
    */
-  readonly Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    disabled?: boolean;
-  } & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  readonly Label: typeof FieldLabel;
   /**
    * Static, label-styled text for a `Field.Item` row that has no focusable
    * control to caption. Renders a `<p>` with the same typography as
@@ -376,7 +921,7 @@ declare const Field: {
    * </Field.Item>
    * ```
    */
-  readonly LabelText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  readonly LabelText: typeof LabelText;
   /**
    * Horizontal layout container for the label area of a field. Aligns a
    * `<Field.Label>` (which may contain `Field.Optional`) with adjacent affordances
@@ -406,7 +951,7 @@ declare const Field: {
    * </Field.Group>
    * ```
    */
-  readonly LabelRow: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly LabelRow: typeof LabelRow;
   /**
    * `Popover.Root` re-export for the help-affordance pattern. Pair with
    * `Field.HelpTrigger` and `Field.HelpContent` to drop a `?` button next to
@@ -466,29 +1011,7 @@ declare const Field: {
    * </Field.Group>
    * ```
    */
-  readonly HelpTrigger: import("react").ForwardRefExoticComponent<Partial<Omit<IconButtonProps, "appearance" | "icon" | "intent" | "label">> & Pick<IconButtonProps, "label"> & {
-    /**
-     * The visual style of the trigger button. Optional here —
-     * `Field.HelpTrigger` defaults to `"ghost"` so the help affordance reads
-     * as subtle metadata next to the label.
-     *
-     * @default "ghost"
-     */
-    appearance?: IconButtonAppearance;
-    /**
-     * The icon to render inside the trigger button. Defaults to a Phosphor
-     * `QuestionIcon` so the most common case only needs a contextual label.
-     */
-    icon?: ReactNode;
-    /**
-     * The tone of the trigger button. Optional here — `Field.HelpTrigger`
-     * defaults to `"neutral"` because opening contextual help is a routine
-     * action.
-     *
-     * @default "neutral"
-     */
-    intent?: ButtonIntent;
-  } & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly HelpTrigger: typeof HelpTrigger;
   /**
    * Body of a `Field.Help` popover. Re-exports `Popover.Content` so all
    * positioning / sizing options (`side`, `align`, `preferredWidth`, etc.)
@@ -518,9 +1041,7 @@ declare const Field: {
    * </Field.Group>
    * ```
    */
-  readonly HelpContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    preferredWidth?: `max-w-${string}`;
-  } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly HelpContent: typeof HelpContent;
   /**
    * Inline "(Optional)" suffix to mark a field as optional. Default content
    * is `(Optional)`; pass children to translate or replace it. Place inside
@@ -551,7 +1072,7 @@ declare const Field: {
    * </Field.Group>
    * ```
    */
-  readonly Optional: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  readonly Optional: typeof Optional;
   /**
    * Helper / hint text rendered below the control in the muted body color.
    *
@@ -579,7 +1100,7 @@ declare const Field: {
    * </Field.Group>
    * ```
    */
-  readonly Description: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "id"> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  readonly Description: typeof Description;
   /**
    * Convenience renderer for validation messages. Trims string messages,
    * filters empty values, and renders a `Field.ErrorList` with one
@@ -609,7 +1130,7 @@ declare const Field: {
    * </Field.Group>
    * ```
    */
-  readonly Errors: import("react").ForwardRefExoticComponent<Omit<FieldErrorsProps, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+  readonly Errors: typeof FieldErrors;
   /**
    * Wraps one or more `Field.ErrorItem` children in a semantic `<ul>`.
    * Renders nothing when given no renderable children.
@@ -633,7 +1154,7 @@ declare const Field: {
    * </Field.Group>
    * ```
    */
-  readonly ErrorList: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "id"> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+  readonly ErrorList: typeof FieldErrorList;
   /**
    * A single error message list item for a field. Renders an `<li>` in
    * `text-danger-600` and must be nested inside a `Field.ErrorList`.
@@ -657,7 +1178,7 @@ declare const Field: {
    * </Field.Group>
    * ```
    */
-  readonly ErrorItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+  readonly ErrorItem: typeof FieldErrorItem;
 };
 //#endregion
 //#region src/components/field/field-error-messages.d.ts