@ngrok/mantle 0.72.0 → 0.73.1

package/dist/field.d.ts

@@ -0,0 +1,601 @@
+import { t as WithAsChild } from "./as-child-C2PttRwz.js";
+import { n as IconButtonProps } from "./icon-button-Dty-yfE2.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-DF1z7YDr.js";
+import { t as Slot } from "./index-j46YISoN.js";
+import * as _$react from "react";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import * as _$_radix_ui_react_popover0 from "@radix-ui/react-popover";
+
+//#region src/components/field/field-context.d.ts
+/**
+ * ARIA props that `Field.Control` applies to the field's focusable control.
+ */
+type FieldControlAriaProps = {
+  /**
+   * IDREFs for helper or error text that describe the focusable control.
+   */
+  "aria-describedby"?: string;
+  /**
+   * IDREFs for error text that represent the control's current error state.
+   */
+  "aria-errormessage"?: string;
+  /**
+   * The resolved ARIA invalid state for the focusable control.
+   */
+  "aria-invalid"?: ComponentProps<"input">["aria-invalid"];
+};
+/**
+ * Context value owned by `Field.Item` and consumed by message/control parts.
+ *
+ * `Field.Item` owns the two stable slot IDs (one for the description, one for
+ * the error list) so consumers don't manage ARIA wiring themselves. The IDs
+ * are emitted unconditionally; ARIA treats unresolved IDREFs as no-ops, so
+ * dangling IDs (when no description or error list is rendered) are harmless.
+ */
+//#endregion
+//#region src/components/field/error-helpers.d.ts
+/**
+ * A validation message accepted by `Field.Errors`. Non-string absence values
+ * are allowed so consumers can pass mapped validator output directly while
+ * still rendering only real strings.
+ */
+type FieldErrorMessage = string | null | undefined | false;
+/**
+ * Options for checking a manual `Field.ErrorList` subtree.
+ */
+//#endregion
+//#region src/components/field/field.d.ts
+/**
+ * Props for the `Field.Errors` convenience renderer. It owns its generated
+ * children, so use `Field.ErrorList` / `Field.ErrorItem` directly when custom
+ * list contents or polymorphic list markup are needed.
+ */
+type FieldErrorsProps = Omit<ComponentProps<"ul">, "children" | "id"> & {
+  /**
+   * Validation messages to render. Strings are trimmed, and empty, nullish,
+   * or false values are ignored before rendering the list.
+   */
+  messages?: readonly FieldErrorMessage[];
+};
+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
+ * element along with the generated ARIA props.
+ */
+type FieldControlElementProps = FieldControlSlotProps & WithValidation & {
+  /**
+   * A single control element to receive the field ARIA props.
+   */
+  children: ReactElement;
+};
+/**
+ * Render-prop form of `Field.Control`. The caller owns the rendered element,
+ * so `Field.Control` itself renders nothing — extra DOM props and `ref` have
+ * no element to attach to and are intentionally not part of this variant.
+ * Slot props are marked `never` so passing e.g. `className` alongside a
+ * render-prop child is a type error rather than a silently ignored prop.
+ */
+type FieldControlRenderProps = WithValidation & {
+  /**
+   * A render function that places the field ARIA props onto a control of
+   * the caller's choosing. Used for compound controls or wrappers where
+   * `Slot` cannot reach the focusable element.
+   */
+  children: (props: FieldControlAriaProps) => ReactNode;
+} & { [K in keyof FieldControlSlotProps]?: never };
+/**
+ * Compound component for semantic, accessible form fields. Composes a
+ * `Field.Label`, control (`Input`, `Select`, etc.), `Field.Description`, and
+ * validation errors (`Field.Errors` / `Field.ErrorList` + `Field.ErrorItem`)
+ * with consistent spacing and ARIA wiring. Stack multiple fields with
+ * `Field.Group`; use `Field.Set` + `Field.Legend` for radios / related
+ * checkboxes that share one accessible name.
+ *
+ * @see https://mantle.ngrok.com/components/field
+ *
+ * @example
+ * Composition:
+ * ```
+ * Field.Group
+ * └── Field.Item
+ *     ├── Field.LabelRow
+ *     │   ├── Field.Label
+ *     │   │   └── Field.Optional
+ *     │   └── Field.Help
+ *     │       ├── Field.HelpTrigger
+ *     │       └── Field.HelpContent
+ *     ├── Field.Control
+ *     │   └── (control)
+ *     ├── Field.Errors             (or)
+ *     ├── Field.ErrorList
+ *     │   └── Field.ErrorItem
+ *     └── Field.Description
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Field.Group>
+ *   <Field.Item>
+ *     <Field.LabelRow>
+ *       <Field.Label htmlFor="api-key">
+ *         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 id="api-key" name="apiKey" />
+ *     </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 Field: {
+  /**
+   * A single form field. Provides message IDs and validation state to
+   * `Field.Control`; rendered errors infer `"error"` validation.
+   *
+   * @see https://mantle.ngrok.com/components/field
+   *
+   * @example
+   * ```tsx
+   * <Field.Group>
+   *   <Field.Item>
+   *     <Field.LabelRow>
+   *       <Field.Label htmlFor="api-key">
+   *         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 id="api-key" name="apiKey" />
+   *     </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>
+   * ```
+   */
+  readonly Item: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild & WithValidation, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  /**
+   * Applies generated field ARIA props and validation state to a single
+   * focusable control. Accepts either a single React element child (cloned
+   * via `Slot`) or a render-prop child that receives the ARIA props for
+   * cases where `Slot` cannot reach the focusable element — for example a
+   * `<label>`-wrapped native checkbox, or a third-party component that
+   * needs the props placed manually on an inner input.
+   *
+   * @see https://mantle.ngrok.com/components/field
+   *
+   * @example
+   * ```tsx
+   * // Element child — Slot clones the generated ARIA props onto <Input/>.
+   * <Field.Item>
+   *   <Field.Label htmlFor="api-key">API key</Field.Label>
+   *   <Field.Control>
+   *     <Input id="api-key" name="apiKey" />
+   *   </Field.Control>
+   *   <Field.Errors messages={["API key is required."]} />
+   * </Field.Item>
+   * ```
+   *
+   * @example
+   * ```tsx
+   * // Render-prop child — caller spreads the ARIA props onto an inner
+   * // element when the focusable target is nested (e.g. inside a <label>).
+   * <Field.Item>
+   *   <Field.Control>
+   *     {(ariaProps) => (
+   *       <label>
+   *         Accept terms
+   *         <input type="checkbox" {...ariaProps} />
+   *       </label>
+   *     )}
+   *   </Field.Control>
+   *   <Field.Errors messages={["You must accept the terms."]} />
+   * </Field.Item>
+   * ```
+   */
+  readonly Control: _$react.ForwardRefExoticComponent<(Omit<FieldControlElementProps, "ref"> | Omit<FieldControlRenderProps, "ref">) & _$react.RefAttributes<HTMLElement>>;
+  /**
+   * Layout container that stacks multiple `Field.Item`s vertically.
+   *
+   * @see https://mantle.ngrok.com/components/field
+   *
+   * @example
+   * ```tsx
+   * <Field.Group>
+   *   <Field.Item>
+   *     <Field.LabelRow>
+   *       <Field.Label htmlFor="api-key">
+   *         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 id="api-key" name="apiKey" />
+   *     </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>
+   * ```
+   */
+  readonly Group: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  /**
+   * Semantic `<fieldset>` for related controls that share one accessible
+   * name from `Field.Legend`.
+   *
+   * @see https://mantle.ngrok.com/components/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>
+   * ```
+   */
+  readonly Set: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & _$react.RefAttributes<HTMLFieldSetElement>>;
+  /**
+   * Caption for `Field.Set`. Renders a semantic `<legend>`.
+   *
+   * @see https://mantle.ngrok.com/components/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>
+   * ```
+   */
+  readonly Legend: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, "ref"> & _$react.RefAttributes<HTMLLegendElement>>;
+  /**
+   * The Mantle `Label`, exposed on `Field` for field composition.
+   *
+   * @see https://mantle.ngrok.com/components/label
+   *
+   * @example
+   * ```tsx
+   * <Field.Group>
+   *   <Field.Item>
+   *     <Field.LabelRow>
+   *       <Field.Label htmlFor="api-key">
+   *         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 id="api-key" name="apiKey" />
+   *     </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>
+   * ```
+   */
+  readonly Label: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+    disabled?: boolean;
+  } & _$react.RefAttributes<HTMLLabelElement>>;
+  /**
+   * 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 `gap-1`.
+   *
+   * @see https://mantle.ngrok.com/components/field
+   *
+   * @example
+   * ```tsx
+   * <Field.Group>
+   *   <Field.Item>
+   *     <Field.LabelRow>
+   *       <Field.Label htmlFor="api-key">
+   *         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 id="api-key" name="apiKey" />
+   *     </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>
+   * ```
+   */
+  readonly LabelRow: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  /**
+   * `Popover.Root` re-export for the help-affordance pattern. Pair with
+   * `Field.HelpTrigger` and `Field.HelpContent` to drop a `?` button next to
+   * a label without manually composing Popover + IconButton + QuestionIcon.
+   *
+   * @see https://mantle.ngrok.com/components/field
+   *
+   * @example
+   * ```tsx
+   * <Field.Group>
+   *   <Field.Item>
+   *     <Field.LabelRow>
+   *       <Field.Label htmlFor="api-key">
+   *         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 id="api-key" name="apiKey" />
+   *     </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>
+   * ```
+   */
+  readonly Help: _$react.FC<_$_radix_ui_react_popover0.PopoverProps>;
+  /**
+   * Trigger for a `Field.Help` popover — a ghost `IconButton` with a default
+   * `QuestionIcon`. Requires a contextual `label`; pass `icon` to swap the
+   * glyph, or other `IconButton` props (`size`, `appearance`, etc.) to customize.
+   *
+   * @see https://mantle.ngrok.com/components/field
+   *
+   * @example
+   * ```tsx
+   * <Field.Group>
+   *   <Field.Item>
+   *     <Field.LabelRow>
+   *       <Field.Label htmlFor="api-key">
+   *         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 id="api-key" name="apiKey" />
+   *     </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>
+   * ```
+   */
+  readonly HelpTrigger: _$react.ForwardRefExoticComponent<Partial<Omit<IconButtonProps, "icon" | "label">> & Pick<IconButtonProps, "label"> & {
+    /**
+     * 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;
+  } & _$react.RefAttributes<HTMLButtonElement>>;
+  /**
+   * Body of a `Field.Help` popover. Re-exports `Popover.Content` so all
+   * positioning / sizing options (`side`, `align`, `preferredWidth`, etc.)
+   * work as expected.
+   *
+   * @see https://mantle.ngrok.com/components/field
+   *
+   * @example
+   * ```tsx
+   * <Field.Group>
+   *   <Field.Item>
+   *     <Field.LabelRow>
+   *       <Field.Label htmlFor="api-key">
+   *         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 id="api-key" name="apiKey" />
+   *     </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>
+   * ```
+   */
+  readonly HelpContent: _$react.ForwardRefExoticComponent<Omit<Omit<_$_radix_ui_react_popover0.PopoverContentProps & _$react.RefAttributes<HTMLDivElement>, "ref"> & {
+    preferredWidth?: `max-w-${string}`;
+  } & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  /**
+   * Inline "(Optional)" suffix to mark a field as optional. Default content
+   * is `(Optional)`; pass children to translate or replace it. Place inside
+   * the `<Field.Label>` so screen readers announce it as part of the accessible
+   * name.
+   *
+   * @see https://mantle.ngrok.com/components/field
+   *
+   * @example
+   * ```tsx
+   * <Field.Group>
+   *   <Field.Item>
+   *     <Field.LabelRow>
+   *       <Field.Label htmlFor="api-key">
+   *         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 id="api-key" name="apiKey" />
+   *     </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>
+   * ```
+   */
+  readonly Optional: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLSpanElement> & _$react.HTMLAttributes<HTMLSpanElement> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
+  /**
+   * Helper / hint text rendered below the control in the muted body color.
+   *
+   * @see https://mantle.ngrok.com/components/field
+   *
+   * @example
+   * ```tsx
+   * <Field.Group>
+   *   <Field.Item>
+   *     <Field.LabelRow>
+   *       <Field.Label htmlFor="api-key">
+   *         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 id="api-key" name="apiKey" />
+   *     </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>
+   * ```
+   */
+  readonly Description: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "id"> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLParagraphElement>>;
+  /**
+   * Convenience renderer for validation messages. Trims string messages,
+   * filters empty values, and renders a `Field.ErrorList` with one
+   * `Field.ErrorItem` for each remaining message.
+   *
+   * @see https://mantle.ngrok.com/components/field
+   *
+   * @example
+   * ```tsx
+   * <Field.Group>
+   *   <Field.Item>
+   *     <Field.LabelRow>
+   *       <Field.Label htmlFor="api-key">
+   *         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 id="api-key" name="apiKey" />
+   *     </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>
+   * ```
+   */
+  readonly Errors: _$react.ForwardRefExoticComponent<Omit<FieldErrorsProps, "ref"> & _$react.RefAttributes<HTMLUListElement>>;
+  /**
+   * Wraps one or more `Field.ErrorItem` children in a semantic `<ul>`.
+   * Renders nothing when given no renderable children.
+   *
+   * @see https://mantle.ngrok.com/components/field
+   *
+   * @example
+   * ```tsx
+   * <Field.Group>
+   *   <Field.Item>
+   *     <Field.Label htmlFor="username">Username</Field.Label>
+   *     <Field.Control>
+   *       <Input id="username" name="username" />
+   *     </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>
+   * ```
+   */
+  readonly ErrorList: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "id"> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLUListElement>>;
+  /**
+   * A single error message list item for a field. Renders an `<li>` in
+   * `text-danger-600` and must be nested inside a `Field.ErrorList`.
+   *
+   * @see https://mantle.ngrok.com/components/field
+   *
+   * @example
+   * ```tsx
+   * <Field.Group>
+   *   <Field.Item>
+   *     <Field.Label htmlFor="username">Username</Field.Label>
+   *     <Field.Control>
+   *       <Input id="username" name="username" />
+   *     </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>
+   * ```
+   */
+  readonly ErrorItem: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & _$react.RefAttributes<HTMLLIElement>>;
+};
+//#endregion
+//#region src/components/field/field-error-messages.d.ts
+/**
+ * Shapes commonly found in `field.state.meta.errors` from TanStack React Form
+ * across its built-in validators (Standard Schema / Zod issues, raw strings,
+ * thrown `Error` instances) plus the falsy slots Standard Schema can produce.
+ */
+type FieldError = {
+  readonly message?: string | undefined;
+} | string | null | undefined | false;
+/**
+ * Reduce a TanStack React Form field's `meta.errors` array (or any array of
+ * mixed string / `{ message }` / nullish error entries) to a clean `string[]`
+ * for passing directly to `Field.Errors`' `messages` prop.
+ *
+ * Handles the shapes TanStack form yields for Zod, Standard Schema, and
+ * thrown `Error` validators: items may be strings, objects with `.message`,
+ * `undefined`, `null`, or `false`. Empty / whitespace-only messages are
+ * dropped so callers don't have to filter again.
+ *
+ * @example
+ * ```tsx
+ * <Field.Item>
+ *   <Field.Label htmlFor={field.name}>Email</Field.Label>
+ *   <Field.Control>
+ *     <Input id={field.name} value={field.state.value} />
+ *   </Field.Control>
+ *   <Field.Errors messages={toErrorMessages(field.state.meta.errors)} />
+ * </Field.Item>
+ * ```
+ */
+declare const toErrorMessages: (errors: readonly FieldError[] | null | undefined) => string[];
+//#endregion
+export { type AriaInvalid, Field, type FieldError, type ParsedValidation, type Validation, type ValidationProp, type ValidationState, type WithValidation, isAriaInvalid, parseValidation, resolveValidation, toErrorMessages };
+//# sourceMappingURL=field.d.ts.map

package/dist/field.js

@@ -0,0 +1,2 @@
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{t as n}from"./icon-button-ZKN0sRIJ.js";import{i as r,n as i,r as a,t as o}from"./validation-BYME8rWN.js";import{t as s}from"./use-isomorphic-layout-effect-CNSD0lhi.js";import{t as c}from"./label-x6FcOpxc.js";import{t as l}from"./popover-CoZxokw_.js";import{Children as u,Fragment as d,cloneElement as f,createContext as p,forwardRef as m,isValidElement as h,useCallback as g,useContext as _,useId as v,useMemo as y,useState as b}from"react";import x from"tiny-invariant";import{jsx as S}from"react/jsx-runtime";import{QuestionIcon as C}from"@phosphor-icons/react/Question";const w=p(null),T=({"aria-invalid":e,context:t,validation:n})=>{let r=a({"aria-invalid":e,defaultAriaInvalid:!1,validation:n??t?.validation});return{ariaProps:{"aria-describedby":t?`${t.descriptionId} ${t.errorId}`:void 0,"aria-errormessage":r.isInvalid&&t?t.errorId:void 0,"aria-invalid":r.ariaInvalid},validation:r.validation}},E=e=>e?.map(e=>typeof e==`string`?e.trim():``).filter(e=>e.length>0)??[],D=e=>!(e==null||typeof e==`boolean`||typeof e==`string`&&e.trim().length===0),O=({children:e,errorItemType:t})=>{let n=!1;return u.forEach(e,e=>{if(!(n||e==null||typeof e==`boolean`)){if(typeof e==`string`){e.trim().length>0&&(n=!0);return}if(!h(e)){n=!0;return}if(e.type===t){n=D(e.props.children);return}if(e.type===d){n=O({children:e.props.children,errorItemType:t});return}n=!0}}),n},k=m(({className:t,...n},r)=>S(`fieldset`,{ref:r,"data-slot":`field-set`,className:e(`flex w-full min-w-0 flex-col gap-4 border-0 p-0`,t),...n}));k.displayName=`FieldSet`;const A=m(({className:t,...n},r)=>S(`legend`,{ref:r,"data-slot":`field-legend`,className:e(`text-strong mb-1.5 text-sm font-medium font-sans`,t),...n}));A.displayName=`FieldLegend`;const j=m(({asChild:n,className:r,...i},a)=>S(n?t:`div`,{ref:a,"data-slot":`field-label-row`,className:e(`flex items-center gap-1`,r),...i}));j.displayName=`FieldLabelRow`;const M=l.Root,N=m(({appearance:t=`ghost`,className:r,icon:i=S(C,{}),label:a,size:o=`xs`,type:s=`button`,...c},u)=>S(l.Trigger,{asChild:!0,children:S(n,{ref:u,appearance:t,className:e(`text-body -my-0.5`,r),icon:i,label:a,size:o,type:s,...c})}));N.displayName=`FieldHelpTrigger`;const P=m((e,t)=>S(l.Content,{ref:t,"data-slot":`field-help-content`,...e}));P.displayName=`FieldHelpContent`;const F=m(({asChild:n,children:r,className:i,...a},o)=>S(n?t:`span`,{ref:o,"data-slot":`field-optional`,className:e(`text-muted text-sm font-normal font-sans`,i),...a,children:r??`(Optional)`}));F.displayName=`FieldOptional`;const I=m(({asChild:n,className:r,...i},a)=>S(n?t:`div`,{ref:a,"data-slot":`field-group`,className:e(`flex w-full flex-col gap-4`,r),...i}));I.displayName=`FieldGroup`;const L=m(({asChild:n,children:i,className:a,validation:s,...c},l)=>{let u=n?t:`div`,d=v(),f=v(),[p,m]=b(!1),h=r(s??(p?`error`:void 0)),_=g(()=>(m(!0),()=>{m(!1)}),[]),x=y(()=>({descriptionId:d,errorId:f,hasErrors:p,registerError:_,validation:h}),[d,f,p,_,h]);return S(w.Provider,{value:x,children:S(o,{validation:h,children:S(u,{ref:l,"data-slot":`field-item`,"data-validation":h,className:e(`flex w-full flex-col gap-1.5`,a),...c,children:i})})})});L.displayName=`FieldItem`;const R=m(({children:e,validation:n,...r},i)=>{let a=_(w);if(typeof e==`function`){let t=T({context:a,validation:n});return S(o,{validation:t.validation,children:e(t.ariaProps)})}x(h(e),`Field.Control expects a single React element child (or a render-prop function). Got a non-element value (string, array, fragment, null, or undefined). Wrap the control in a single element, or use the function child form: <Field.Control>{(props) => <YourControl {...props} />}</Field.Control>.`);let s=T({"aria-invalid":e.props[`aria-invalid`],context:a,validation:n});return S(o,{validation:s.validation,children:S(t,{ref:i,...r,children:f(e,s.ariaProps)})})});R.displayName=`FieldControl`;const z=m(({asChild:n,className:r,...i},a)=>S(n?t:`p`,{ref:a,"data-slot":`field-description`,id:_(w)?.descriptionId,className:e(`text-body text-sm leading-4`,`[:where([data-slot=field-error-list]+&)]:-mt-1.5`,r),...i}));z.displayName=`FieldDescription`;const B=m(({children:t,className:n,...r},i)=>D(t)?S(`li`,{ref:i,"data-slot":`field-error`,className:e(`text-danger-600 text-sm leading-4`,n),...r,children:t}):null);B.displayName=`FieldErrorItem`;const V=m(({messages:e,...t},n)=>S(H,{ref:n,...t,children:E(e).map((e,t)=>S(B,{children:e},t))}));V.displayName=`FieldErrors`;const H=m(({asChild:n,children:r,className:i,...a},o)=>{let c=O({children:r,errorItemType:B}),l=_(w),u=l?.registerError;return s(()=>{if(!(!c||u==null))return u()},[c,u]),c?S(n?t:`ul`,{ref:o,"data-slot":`field-error-list`,id:l?.errorId,role:`list`,className:e(`m-0 flex w-full flex-col list-none p-0`,i),...a,children:r}):null});H.displayName=`FieldErrorList`;const U={Item:L,Control:R,Group:I,Set:k,Legend:A,Label:c,LabelRow:j,Help:M,HelpTrigger:N,HelpContent:P,Optional:F,Description:z,Errors:V,ErrorList:H,ErrorItem:B},W=e=>E(e?.map(e=>typeof e==`string`||!e?e:e.message));export{U as Field,i as isAriaInvalid,a as parseValidation,r as resolveValidation,W as toErrorMessages};
+//# sourceMappingURL=field.js.map