@ngrok/mantle 0.73.1 → 0.73.3

package/dist/field.d.ts

@@ -1,14 +1,16 @@
-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 { t as WithAsChild } from "./as-child-CpZKMqTE.js";
+import { n as IconButtonProps } from "./icon-button-BDTb-lxs.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-CBSOmooP.js";
+import { t as Slot } from "./index-BhlxYL_y.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.
+ * ARIA and identity props that `Field.Control` applies to the field's
+ * focusable control. `id` and `name` come from the surrounding `Field.Item`
+ * so a caller only needs to declare `name` once.
  */
 type FieldControlAriaProps = {
   /**
@@ -23,6 +25,15 @@ type FieldControlAriaProps = {
    * The resolved ARIA invalid state for the focusable control.
    */
   "aria-invalid"?: ComponentProps<"input">["aria-invalid"];
+  /**
+   * Stable DOM id for the focusable control, generated by `Field.Item` and
+   * also used as `Field.Label`'s default `htmlFor`.
+   */
+  id?: string;
+  /**
+   * Form value identity from `Field.Item`'s required `name` prop.
+   */
+  name?: string;
 };
 /**
  * Context value owned by `Field.Item` and consumed by message/control parts.
@@ -46,16 +57,56 @@ type FieldErrorMessage = string | null | undefined | false;
 //#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.
+ * A single form field — `Label`, a control (`Input`, `Select`, `Checkbox`,
+ * etc.), and any `Field.Description`, `Field.Errors`, or `Field.ErrorList` siblings stacked
+ * vertically with a consistent `gap-1.5` so help and error messaging sit
+ * tightly under the input.
+ *
+ * Renders a plain `<div>` — the `<label htmlFor>` ↔ control association
+ * already provides the right semantics for a single field, so no implicit
+ * `role` is added. `Field.Item` owns the contextual description/error IDs
+ * that `Field.Control` applies to the focusable control. Rendered errors
+ * infer an `"error"` validation state unless `validation` is supplied as an
+ * explicit override.
+ *
+ * **Single-slot constraint.** A `Field.Item` owns one description ID and one
+ * errors ID, so render at most one `Field.Description` and one
+ * `Field.Errors` *or* `Field.ErrorList` (not both) per item. A second instance
+ * would duplicate the slot `id` in the DOM. Pass multiple messages to
+ * `Field.Errors`, or multiple `Field.ErrorItem` children to `Field.ErrorList`,
+ * instead.
+ *
+ * @see https://mantle.ngrok.com/components/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>
+ * ```
  */
-type FieldErrorsProps = Omit<ComponentProps<"ul">, "children" | "id"> & {
+type FieldItemProps = ComponentProps<"div"> & WithAsChild & WithValidation & {
   /**
-   * Validation messages to render. Strings are trimmed, and empty, nullish,
-   * or false values are ignored before rendering the list.
+   * Form-value name for the field. Required so `Field.Control` can splat
+   * it onto the focusable child while `Field.Item` owns the stable
+   * generated control id used by `Field.Label`'s `htmlFor`.
    */
-  messages?: readonly FieldErrorMessage[];
+  name: string;
 };
 type FieldControlSlotProps = Omit<ComponentProps<typeof Slot>, "aria-describedby" | "aria-errormessage" | "aria-invalid" | "children">;
 /**
@@ -63,7 +114,7 @@ type FieldControlSlotProps = Omit<ComponentProps<typeof Slot>, "aria-describedby
  * 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 & {
+type FieldControlElementProps = FieldControlSlotProps & {
   /**
    * A single control element to receive the field ARIA props.
    */
@@ -76,7 +127,7 @@ type FieldControlElementProps = FieldControlSlotProps & WithValidation & {
  * 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 & {
+type FieldControlRenderProps = {
   /**
    * A render function that places the field ARIA props onto a control of
    * the caller's choosing. Used for compound controls or wrappers where
@@ -84,6 +135,18 @@ type FieldControlRenderProps = WithValidation & {
    */
   children: (props: FieldControlAriaProps) => ReactNode;
 } & { [K in keyof FieldControlSlotProps]?: never };
+/**
+ * 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[];
+};
 /**
  * Compound component for semantic, accessible form fields. Composes a
  * `Field.Label`, control (`Input`, `Select`, etc.), `Field.Description`, and
@@ -100,7 +163,7 @@ type FieldControlRenderProps = WithValidation & {
  * Field.Group
  * └── Field.Item
  *     ├── Field.LabelRow
- *     │   ├── Field.Label
+ *     │   ├── Field.Label            (or Field.LabelText for control-less rows)
  *     │   │   └── Field.Optional
  *     │   └── Field.Help
  *     │       ├── Field.HelpTrigger
@@ -116,9 +179,9 @@ type FieldControlRenderProps = WithValidation & {
  * @example
  * ```tsx
  * <Field.Group>
- *   <Field.Item>
+ *   <Field.Item name="apiKey">
  *     <Field.LabelRow>
- *       <Field.Label htmlFor="api-key">
+ *       <Field.Label>
  *         API key <Field.Optional />
  *       </Field.Label>
  *       <Field.Help>
@@ -127,7 +190,7 @@ type FieldControlRenderProps = WithValidation & {
  *       </Field.Help>
  *     </Field.LabelRow>
  *     <Field.Control>
- *       <Input id="api-key" name="apiKey" />
+ *       <Input />
  *     </Field.Control>
  *     <Field.Errors messages={["API key is required."]} />
  *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
@@ -145,9 +208,9 @@ declare const Field: {
    * @example
    * ```tsx
    * <Field.Group>
-   *   <Field.Item>
+   *   <Field.Item name="apiKey">
    *     <Field.LabelRow>
-   *       <Field.Label htmlFor="api-key">
+   *       <Field.Label>
    *         API key <Field.Optional />
    *       </Field.Label>
    *       <Field.Help>
@@ -156,7 +219,7 @@ declare const Field: {
    *       </Field.Help>
    *     </Field.LabelRow>
    *     <Field.Control>
-   *       <Input id="api-key" name="apiKey" />
+   *       <Input />
    *     </Field.Control>
    *     <Field.Errors messages={["API key is required."]} />
    *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
@@ -164,7 +227,7 @@ declare const Field: {
    * </Field.Group>
    * ```
    */
-  readonly Item: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild & WithValidation, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Item: _$react.ForwardRefExoticComponent<Omit<FieldItemProps, "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
@@ -177,11 +240,11 @@ declare const Field: {
    *
    * @example
    * ```tsx
-   * // Element child — Slot clones the generated ARIA props onto <Input/>.
-   * <Field.Item>
-   *   <Field.Label htmlFor="api-key">API key</Field.Label>
+   * // Element child — Slot splats id, name, and ARIA props onto <Input/>.
+   * <Field.Item name="apiKey">
+   *   <Field.Label>API key</Field.Label>
    *   <Field.Control>
-   *     <Input id="api-key" name="apiKey" />
+   *     <Input />
    *   </Field.Control>
    *   <Field.Errors messages={["API key is required."]} />
    * </Field.Item>
@@ -189,14 +252,14 @@ declare const Field: {
    *
    * @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>
+   * // Render-prop child — caller spreads the props onto an inner element
+   * // when the focusable target is nested (e.g. inside a <label>).
+   * <Field.Item name="acceptTerms">
    *   <Field.Control>
-   *     {(ariaProps) => (
+   *     {(controlProps) => (
    *       <label>
    *         Accept terms
-   *         <input type="checkbox" {...ariaProps} />
+   *         <input type="checkbox" {...controlProps} />
    *       </label>
    *     )}
    *   </Field.Control>
@@ -213,9 +276,9 @@ declare const Field: {
    * @example
    * ```tsx
    * <Field.Group>
-   *   <Field.Item>
+   *   <Field.Item name="apiKey">
    *     <Field.LabelRow>
-   *       <Field.Label htmlFor="api-key">
+   *       <Field.Label>
    *         API key <Field.Optional />
    *       </Field.Label>
    *       <Field.Help>
@@ -224,7 +287,7 @@ declare const Field: {
    *       </Field.Help>
    *     </Field.LabelRow>
    *     <Field.Control>
-   *       <Input id="api-key" name="apiKey" />
+   *       <Input />
    *     </Field.Control>
    *     <Field.Errors messages={["API key is required."]} />
    *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
@@ -269,16 +332,23 @@ declare const Field: {
    */
   readonly Legend: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, "ref"> & _$react.RefAttributes<HTMLLegendElement>>;
   /**
-   * The Mantle `Label`, exposed on `Field` for field composition.
+   * The Mantle `Label`, exposed on `Field` for field composition. Inside a
+   * `Field.Item`, `htmlFor` defaults to the same stable id that `Field.Control`
+   * splats onto its focusable child — so the label-to-control association is
+   * automatic from `Field.Item`'s required `name` and you don't need to thread
+   * a matching `htmlFor` / `id` pair by hand. Pass an explicit `htmlFor` to
+   * opt out (e.g. when the focusable element is rendered outside of
+   * `Field.Control`).
    *
    * @see https://mantle.ngrok.com/components/label
    *
    * @example
    * ```tsx
+   * // htmlFor is wired automatically from Field.Item's name.
    * <Field.Group>
-   *   <Field.Item>
+   *   <Field.Item name="apiKey">
    *     <Field.LabelRow>
-   *       <Field.Label htmlFor="api-key">
+   *       <Field.Label>
    *         API key <Field.Optional />
    *       </Field.Label>
    *       <Field.Help>
@@ -287,7 +357,7 @@ declare const Field: {
    *       </Field.Help>
    *     </Field.LabelRow>
    *     <Field.Control>
-   *       <Input id="api-key" name="apiKey" />
+   *       <Input />
    *     </Field.Control>
    *     <Field.Errors messages={["API key is required."]} />
    *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
@@ -295,9 +365,31 @@ declare const Field: {
    * </Field.Group>
    * ```
    */
-  readonly Label: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+  readonly Label: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     disabled?: boolean;
-  } & _$react.RefAttributes<HTMLLabelElement>>;
+  } & _$react.RefAttributes<HTMLLabelElement>, "ref"> & _$react.RefAttributes<HTMLLabelElement>>;
+  /**
+   * Static, label-styled text for a `Field.Item` row that has no focusable
+   * control to caption. Renders a `<p>` with the same typography as
+   * `Field.Label`, so a read-only row composes cleanly alongside real form
+   * fields without misrepresenting itself as a control caption.
+   *
+   * Use for derived / system-managed values (owner, created-at, computed
+   * status) inside sheets or detail panels. For rows with a real control,
+   * use `Field.Label` instead so the label-to-control association is wired.
+   *
+   * @see https://mantle.ngrok.com/components/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>
+   * ```
+   */
+  readonly LabelText: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLParagraphElement> & _$react.HTMLAttributes<HTMLParagraphElement> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLParagraphElement>>;
   /**
    * Horizontal layout container for the label area of a field. Aligns a
    * `<Field.Label>` (which may contain `Field.Optional`) with adjacent affordances
@@ -308,9 +400,9 @@ declare const Field: {
    * @example
    * ```tsx
    * <Field.Group>
-   *   <Field.Item>
+   *   <Field.Item name="apiKey">
    *     <Field.LabelRow>
-   *       <Field.Label htmlFor="api-key">
+   *       <Field.Label>
    *         API key <Field.Optional />
    *       </Field.Label>
    *       <Field.Help>
@@ -319,7 +411,7 @@ declare const Field: {
    *       </Field.Help>
    *     </Field.LabelRow>
    *     <Field.Control>
-   *       <Input id="api-key" name="apiKey" />
+   *       <Input />
    *     </Field.Control>
    *     <Field.Errors messages={["API key is required."]} />
    *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
@@ -338,9 +430,9 @@ declare const Field: {
    * @example
    * ```tsx
    * <Field.Group>
-   *   <Field.Item>
+   *   <Field.Item name="apiKey">
    *     <Field.LabelRow>
-   *       <Field.Label htmlFor="api-key">
+   *       <Field.Label>
    *         API key <Field.Optional />
    *       </Field.Label>
    *       <Field.Help>
@@ -349,7 +441,7 @@ declare const Field: {
    *       </Field.Help>
    *     </Field.LabelRow>
    *     <Field.Control>
-   *       <Input id="api-key" name="apiKey" />
+   *       <Input />
    *     </Field.Control>
    *     <Field.Errors messages={["API key is required."]} />
    *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
@@ -368,9 +460,9 @@ declare const Field: {
    * @example
    * ```tsx
    * <Field.Group>
-   *   <Field.Item>
+   *   <Field.Item name="apiKey">
    *     <Field.LabelRow>
-   *       <Field.Label htmlFor="api-key">
+   *       <Field.Label>
    *         API key <Field.Optional />
    *       </Field.Label>
    *       <Field.Help>
@@ -379,7 +471,7 @@ declare const Field: {
    *       </Field.Help>
    *     </Field.LabelRow>
    *     <Field.Control>
-   *       <Input id="api-key" name="apiKey" />
+   *       <Input />
    *     </Field.Control>
    *     <Field.Errors messages={["API key is required."]} />
    *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
@@ -404,9 +496,9 @@ declare const Field: {
    * @example
    * ```tsx
    * <Field.Group>
-   *   <Field.Item>
+   *   <Field.Item name="apiKey">
    *     <Field.LabelRow>
-   *       <Field.Label htmlFor="api-key">
+   *       <Field.Label>
    *         API key <Field.Optional />
    *       </Field.Label>
    *       <Field.Help>
@@ -415,7 +507,7 @@ declare const Field: {
    *       </Field.Help>
    *     </Field.LabelRow>
    *     <Field.Control>
-   *       <Input id="api-key" name="apiKey" />
+   *       <Input />
    *     </Field.Control>
    *     <Field.Errors messages={["API key is required."]} />
    *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
@@ -437,9 +529,9 @@ declare const Field: {
    * @example
    * ```tsx
    * <Field.Group>
-   *   <Field.Item>
+   *   <Field.Item name="apiKey">
    *     <Field.LabelRow>
-   *       <Field.Label htmlFor="api-key">
+   *       <Field.Label>
    *         API key <Field.Optional />
    *       </Field.Label>
    *       <Field.Help>
@@ -448,7 +540,7 @@ declare const Field: {
    *       </Field.Help>
    *     </Field.LabelRow>
    *     <Field.Control>
-   *       <Input id="api-key" name="apiKey" />
+   *       <Input />
    *     </Field.Control>
    *     <Field.Errors messages={["API key is required."]} />
    *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
@@ -465,9 +557,9 @@ declare const Field: {
    * @example
    * ```tsx
    * <Field.Group>
-   *   <Field.Item>
+   *   <Field.Item name="apiKey">
    *     <Field.LabelRow>
-   *       <Field.Label htmlFor="api-key">
+   *       <Field.Label>
    *         API key <Field.Optional />
    *       </Field.Label>
    *       <Field.Help>
@@ -476,7 +568,7 @@ declare const Field: {
    *       </Field.Help>
    *     </Field.LabelRow>
    *     <Field.Control>
-   *       <Input id="api-key" name="apiKey" />
+   *       <Input />
    *     </Field.Control>
    *     <Field.Errors messages={["API key is required."]} />
    *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
@@ -495,9 +587,9 @@ declare const Field: {
    * @example
    * ```tsx
    * <Field.Group>
-   *   <Field.Item>
+   *   <Field.Item name="apiKey">
    *     <Field.LabelRow>
-   *       <Field.Label htmlFor="api-key">
+   *       <Field.Label>
    *         API key <Field.Optional />
    *       </Field.Label>
    *       <Field.Help>
@@ -506,7 +598,7 @@ declare const Field: {
    *       </Field.Help>
    *     </Field.LabelRow>
    *     <Field.Control>
-   *       <Input id="api-key" name="apiKey" />
+   *       <Input />
    *     </Field.Control>
    *     <Field.Errors messages={["API key is required."]} />
    *     <Field.Description>You can find this in the ngrok dashboard.</Field.Description>
@@ -524,10 +616,10 @@ declare const Field: {
    * @example
    * ```tsx
    * <Field.Group>
-   *   <Field.Item>
-   *     <Field.Label htmlFor="username">Username</Field.Label>
+   *   <Field.Item name="username">
+   *     <Field.Label>Username</Field.Label>
    *     <Field.Control>
-   *       <Input id="username" name="username" />
+   *       <Input />
    *     </Field.Control>
    *     <Field.ErrorList>
    *       <Field.ErrorItem>Must be at least 3 characters.</Field.ErrorItem>
@@ -548,10 +640,10 @@ declare const Field: {
    * @example
    * ```tsx
    * <Field.Group>
-   *   <Field.Item>
-   *     <Field.Label htmlFor="username">Username</Field.Label>
+   *   <Field.Item name="username">
+   *     <Field.Label>Username</Field.Label>
    *     <Field.Control>
-   *       <Input id="username" name="username" />
+   *       <Input />
    *     </Field.Control>
    *     <Field.ErrorList>
    *       <Field.ErrorItem>Must be at least 3 characters.</Field.ErrorItem>
@@ -582,7 +674,8 @@ type FieldError = {
  * 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.
+ * dropped and duplicate messages are collapsed so callers don't have to filter
+ * again.
  *
  * @example
  * ```tsx

package/dist/field.js

@@ -1,2 +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};
+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{n as u,r as d,t as f}from"./field-context-B7Z1cmZW.js";import{Children as p,Fragment as m,cloneElement as h,forwardRef as g,isValidElement as _,useCallback as v,useContext as y,useId as b,useMemo as x,useState as S}from"react";import C from"tiny-invariant";import{jsx as w}from"react/jsx-runtime";import{QuestionIcon as T}from"@phosphor-icons/react/Question";const E=e=>{let t=[],n=new Set;for(let r of e??[]){if(typeof r!=`string`)continue;let e=r.trim();e.length===0||n.has(e)||(n.add(e),t.push(e))}return t},D=e=>!(e==null||typeof e==`boolean`||typeof e==`string`&&e.trim().length===0),O=({children:e,errorItemType:t})=>{let n=!1;return p.forEach(e,e=>{if(!(n||e==null||typeof e==`boolean`)){if(typeof e==`string`){e.trim().length>0&&(n=!0);return}if(!_(e)){n=!0;return}if(e.type===t){n=D(e.props.children);return}if(e.type===m){n=O({children:e.props.children,errorItemType:t});return}n=!0}}),n},k=g(({className:t,...n},r)=>w(`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=g(({className:t,...n},r)=>w(`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=g(({htmlFor:e,...t},n)=>{let r=y(u);return w(c,{ref:n,htmlFor:e??r?.controlId,...t})});j.displayName=`FieldLabel`;const M=g(({asChild:n,className:r,...i},a)=>w(n?t:`p`,{ref:a,"data-slot":`field-label-text`,className:e(`text-strong text-sm font-medium font-sans`,r),...i}));M.displayName=`FieldLabelText`;const N=g(({asChild:n,className:r,...i},a)=>w(n?t:`div`,{ref:a,"data-slot":`field-label-row`,className:e(`flex items-center gap-1`,r),...i}));N.displayName=`FieldLabelRow`;const P=l.Root,F=g(({appearance:t=`ghost`,className:r,icon:i=w(T,{}),label:a,size:o=`xs`,type:s=`button`,...c},u)=>w(l.Trigger,{asChild:!0,children:w(n,{ref:u,appearance:t,className:e(`text-body -my-0.5`,r),icon:i,label:a,size:o,type:s,...c})}));F.displayName=`FieldHelpTrigger`;const I=g((e,t)=>w(l.Content,{ref:t,"data-slot":`field-help-content`,...e}));I.displayName=`FieldHelpContent`;const L=g(({asChild:n,children:r,className:i,...a},o)=>w(n?t:`span`,{ref:o,"data-slot":`field-optional`,className:e(`text-muted text-sm font-normal font-sans`,i),...a,children:r??`(Optional)`}));L.displayName=`FieldOptional`;const R=g(({asChild:n,className:r,...i},a)=>w(n?t:`div`,{ref:a,"data-slot":`field-group`,className:e(`flex w-full flex-col gap-4`,r),...i}));R.displayName=`FieldGroup`;const z=g(({asChild:n,children:i,className:a,name:s,validation:c,...l},d)=>{let f=n?t:`div`,p=b(),m=b(),h=b(),[g,_]=S(!1),y=r(c??(g?`error`:void 0)),C=v(()=>(_(!0),()=>{_(!1)}),[]),T=x(()=>({controlId:p,descriptionId:m,errorId:h,hasErrors:g,name:s,registerError:C,validation:y}),[p,m,h,g,s,C,y]);return w(u.Provider,{value:T,children:w(o,{validation:y,children:w(f,{ref:d,"data-slot":`field-item`,"data-validation":y,className:e(`flex w-full flex-col gap-1.5`,a),...l,children:i})})})});z.displayName=`FieldItem`;const B=g(({children:e,...n},r)=>{let i=y(u),a=d({context:i});return typeof e==`function`?w(o,{validation:a.validation,children:w(f.Provider,{value:i?a.ariaProps:null,children:e(a.ariaProps)})}):(C(_(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>.`),w(o,{validation:a.validation,children:w(f.Provider,{value:i?a.ariaProps:null,children:w(t,{ref:r,...n,children:h(e,a.ariaProps)})})}))});B.displayName=`FieldControl`;const V=g(({asChild:n,className:r,...i},a)=>w(n?t:`p`,{ref:a,"data-slot":`field-description`,id:y(u)?.descriptionId,className:e(`text-body text-sm leading-4`,`[:where([data-slot=field-error-list]+&)]:-mt-1.5`,r),...i}));V.displayName=`FieldDescription`;const H=g(({children:t,className:n,...r},i)=>D(t)?w(`li`,{ref:i,"data-slot":`field-error`,className:e(`text-danger-600 text-sm leading-4`,n),...r,children:t}):null);H.displayName=`FieldErrorItem`;const U=g(({messages:e,...t},n)=>w(W,{ref:n,...t,children:E(e).map((e,t)=>w(H,{children:e},t))}));U.displayName=`FieldErrors`;const W=g(({asChild:n,children:r,className:i,...a},o)=>{let c=O({children:r,errorItemType:H}),l=y(u),d=l?.registerError;return s(()=>{if(!(!c||d==null))return d()},[c,d]),c?w(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});W.displayName=`FieldErrorList`;const G={Item:z,Control:B,Group:R,Set:k,Legend:A,Label:j,LabelText:M,LabelRow:N,Help:P,HelpTrigger:F,HelpContent:I,Optional:L,Description:V,Errors:U,ErrorList:W,ErrorItem:H},K=e=>E(e?.map(e=>typeof e==`string`||!e?e:e.message));export{G as Field,i as isAriaInvalid,a as parseValidation,r as resolveValidation,K as toErrorMessages};
 //# sourceMappingURL=field.js.map