@aircall/blocks 0.9.0 → 0.10.1

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as React$1 from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import * as _tanstack_react_form0 from "@tanstack/react-form";
-import { DeepKeys, DeepKeysOfType, FieldAsyncValidateOrFn, FieldValidateOrFn } from "@tanstack/react-form";
+import { DeepKeys, DeepKeysOfType, DeepValue, FieldAsyncValidateOrFn, FieldListeners, FieldValidateOrFn, FieldValidators } from "@tanstack/react-form";
 import { useRender } from "@base-ui/react/use-render";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
 
@@ -1284,17 +1284,33 @@ declare const useForm: <TFormData, TOnMount extends _tanstack_react_form0.FormVa
   readonly CardSaveBar: typeof CardSaveBar;
 }>;
 declare const withForm: <TFormData, TOnMount extends _tanstack_react_form0.FormValidateOrFn<TFormData> | undefined, TOnChange extends _tanstack_react_form0.FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends _tanstack_react_form0.FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends _tanstack_react_form0.FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends _tanstack_react_form0.FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends _tanstack_react_form0.FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends _tanstack_react_form0.FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends _tanstack_react_form0.FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends _tanstack_react_form0.FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends _tanstack_react_form0.FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta, TRenderProps extends object = {}>({
-  render,
-  props
-}: _tanstack_react_form0.WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {}, {
-  readonly SubmitButton: typeof SubmitButton;
-  readonly CardSaveBar: typeof CardSaveBar;
-}, TRenderProps>) => React$1.FunctionComponent<React$1.PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
-  form: _tanstack_react_form0.AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, {}, {
+    render,
+    props
+  }: _tanstack_react_form0.WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {}, {
     readonly SubmitButton: typeof SubmitButton;
     readonly CardSaveBar: typeof CardSaveBar;
-  }>;
-}>>;
+  }, TRenderProps>) => React$1.FunctionComponent<React$1.PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
+    form: _tanstack_react_form0.AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (_tanstack_react_form0.FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, {}, {
+      readonly SubmitButton: typeof SubmitButton;
+      readonly CardSaveBar: typeof CardSaveBar;
+    }>;
+  }>>, withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps extends object = {}>({
+    render,
+    props,
+    defaultValues
+  }: _tanstack_react_form0.WithFieldGroupProps<TFieldGroupData, {}, {
+    readonly SubmitButton: typeof SubmitButton;
+    readonly CardSaveBar: typeof CardSaveBar;
+  }, TSubmitMeta, TRenderProps>) => <TFormData, TFields extends _tanstack_react_form0.DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | _tanstack_react_form0.FieldsMap<TFormData, TFieldGroupData>, TOnMount extends _tanstack_react_form0.FormValidateOrFn<TFormData> | undefined, TOnChange extends _tanstack_react_form0.FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends _tanstack_react_form0.FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends _tanstack_react_form0.FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends _tanstack_react_form0.FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends _tanstack_react_form0.FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends _tanstack_react_form0.FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends _tanstack_react_form0.FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends _tanstack_react_form0.FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends _tanstack_react_form0.FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta>(params: React$1.PropsWithChildren<NoInfer<TRenderProps> & {
+    form: _tanstack_react_form0.AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {}, {
+      readonly SubmitButton: typeof SubmitButton;
+      readonly CardSaveBar: typeof CardSaveBar;
+    }> | _tanstack_react_form0.AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | _tanstack_react_form0.FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {}, {
+      readonly SubmitButton: typeof SubmitButton;
+      readonly CardSaveBar: typeof CardSaveBar;
+    }>;
+    fields: TFields;
+  }>) => ReturnType<React$1.FunctionComponent>;
 //#endregion
 //#region src/form/form-context.d.ts
 /**
@@ -1311,6 +1327,18 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form0.FormV
 declare const fieldContext: React$1.Context<_tanstack_react_form0.AnyFieldApi>, formContext: React$1.Context<_tanstack_react_form0.AnyFormApi>, useFieldContext: <TData>() => _tanstack_react_form0.FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useFormContext: () => _tanstack_react_form0.ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
 //#endregion
 //#region src/components/form-field.d.ts
+type FormFieldShellProps = {
+  label?: string;
+  description?: string;
+  necessityIndicator?: 'required' | 'optional';
+  children: React$1.ReactNode;
+};
+declare function FormFieldShell({
+  label,
+  description,
+  necessityIndicator,
+  children
+}: FormFieldShellProps): react_jsx_runtime0.JSX.Element;
 /**
  * Precisely-typed view of the bound field handed to a wrapper's `children`.
  * `TData` is `DeepValue<TFormData, TName>` — so `value` and `handleChange` are the field's
@@ -1344,26 +1372,60 @@ type BoundForm = {
   };
   AppField: (...args: never[]) => unknown;
 };
-type FieldValidator<TFormData, TName> = TName extends DeepKeys<TFormData> ? FieldValidateOrFn<TFormData, TName> : never;
-type FieldAsyncValidator<TFormData, TName> = TName extends DeepKeys<TFormData> ? FieldAsyncValidateOrFn<TFormData, TName> : never;
-/** Field validators typed against the field's value — the `validators` prop of every wrapper. */
-type FormFieldValidators<TFormData, TName> = {
-  onMount?: FieldValidator<TFormData, TName>;
-  onChange?: FieldValidator<TFormData, TName>;
-  onChangeAsync?: FieldAsyncValidator<TFormData, TName>;
-  onChangeAsyncDebounceMs?: number;
-  onBlur?: FieldValidator<TFormData, TName>;
-  onBlurAsync?: FieldAsyncValidator<TFormData, TName>;
-  onBlurAsyncDebounceMs?: number;
-  onSubmit?: FieldValidator<TFormData, TName>;
-  onSubmitAsync?: FieldAsyncValidator<TFormData, TName>;
+/**
+ * Field validators typed against the field's value — the `validators` prop of every wrapper.
+ *
+ * Reuses TanStack's own `FieldValidators` (the exact interface `AppField` accepts) instead of a
+ * hand-rolled mirror, so every slot AppField supports is exposed with identical typing:
+ * `onMount`, `onChange`/`onChangeAsync`/`onChangeListenTo`, `onBlur`/`onBlurAsync`/`onBlurListenTo`,
+ * `onSubmit`/`onSubmitAsync`, `onDynamic`/`onDynamicAsync`, plus the `*DebounceMs` knobs.
+ *
+ * The per-slot validator generics can't be inferred here (the wrapper is generic over `TForm`/
+ * `TName`, not a generic *function* like `AppField`), so each is instantiated to its widest
+ * `FieldValidateOrFn`/`FieldAsyncValidateOrFn`. `value` still infers as the field's real type
+ * because `TData` (`DeepValue<TFormData, TName>`) is concrete. The outer conditional keeps `TName`
+ * unconstrained at the boundary so `DeepKeysOfType` subsets (e.g. the string-only Select keys)
+ * resolve without a constraint clash, exactly like the previous guard.
+ */
+type FormFieldValidators<TFormData, TName> = TName extends DeepKeys<TFormData> ? FieldValidators<TFormData, TName, DeepValue<TFormData, TName>, FieldValidateOrFn<TFormData, TName>, FieldValidateOrFn<TFormData, TName>, FieldAsyncValidateOrFn<TFormData, TName>, FieldValidateOrFn<TFormData, TName>, FieldAsyncValidateOrFn<TFormData, TName>, FieldValidateOrFn<TFormData, TName>, FieldAsyncValidateOrFn<TFormData, TName>, FieldValidateOrFn<TFormData, TName>, FieldAsyncValidateOrFn<TFormData, TName>> : never;
+/**
+ * The full `AppField` binding surface every wrapper forwards, typed against the field's value.
+ *
+ * This is the **single source of truth** for which `form.AppField` props the `Form*Field` wrappers
+ * pass through — spread it into each wrapper's props so the set can't drift per-wrapper.
+ *
+ * Forwarded: `validators`, `listeners`, `defaultValue`, `asyncDebounceMs`, `asyncAlways`.
+ * Deliberately omitted: `name`/`children` (owned by the wrapper), `mode` (owned by `FormArrayField`,
+ * which is the only wrapper that drives an `AppField` in `mode="array"`), and
+ * `defaultMeta`/`disableErrorFlat` (advanced escape hatches that fight the shared shell).
+ */
+type FieldBindingProps<TFormData, TName> = TName extends DeepKeys<TFormData> ? {
+  validators?: FormFieldValidators<TFormData, TName>;
+  listeners?: FieldListeners<TFormData, TName>;
+  defaultValue?: DeepValue<TFormData, TName>;
+  asyncDebounceMs?: number;
+  asyncAlways?: boolean;
+} : never;
+/**
+ * Presentational necessity prop every wrapper exposes, forwarded to the DS `FieldLabel`. Follows
+ * the "mark the exceptions" convention: tag only the minority necessity in a form (`'optional'` in
+ * a mostly-mandatory form, `'required'` in a mostly-optional one), never both. Label-only —
+ * enforcement stays in `validators`. Shared so the set can't drift per-wrapper.
+ */
+type NecessityProps = {
+  necessityIndicator?: 'required' | 'optional';
 };
 type FormFieldBaseProps<TData, TControl> = {
   form: Pick<BoundForm, 'AppField'>;
   name: string;
   validators?: unknown;
-  label: string;
-  description?: string; /** Builds the primitive-specific wiring bundle handed to `children`. */
+  listeners?: unknown;
+  defaultValue?: unknown;
+  asyncDebounceMs?: number;
+  asyncAlways?: boolean;
+  label?: string;
+  description?: string;
+  necessityIndicator?: 'required' | 'optional'; /** Builds the primitive-specific wiring bundle handed to `children`. */
   buildControl: (field: TypedField<TData>) => TControl;
   children: (field: TypedField<TData>, control: TControl) => React$1.ReactNode;
 };
@@ -1393,11 +1455,10 @@ type SelectControl = {
 type FormSelectFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
   /** The form instance from `useForm()` — threaded as a prop so `name`/`validators` are typed. */form: TForm;
   name: TName;
-  label: string;
-  description?: string;
-  validators?: FormFieldValidators<TForm['state']['values'], TName>; /** Compose the Select yourself; spread the bundles. Trigger/content stay fully customizable. */
+  label?: string;
+  description?: string; /** Compose the Select yourself; spread the bundles. Trigger/content stay fully customizable. */
   children: (field: TypedField<string>, control: SelectControl) => React$1.ReactNode;
-};
+} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps;
 /**
  * Select field wrapper. Owns the binding + shared `Field/Label/Error` shell, and hands the
  * consumer pre-wired `selectProps` / `selectTriggerProps` to spread onto `@aircall/ds` Select
@@ -1434,11 +1495,10 @@ type InputControl = {
 type FormInputFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
   form: TForm;
   name: TName;
-  label: string;
+  label?: string;
   description?: string;
-  validators?: FormFieldValidators<TForm['state']['values'], TName>;
   children: (field: TypedField<string>, control: InputControl) => React$1.ReactNode;
-};
+} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps;
 /**
  * Text-input field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
  * with an `inputProps` bundle. Compose the input yourself (add adornments, counters, prefixes).
@@ -1470,11 +1530,10 @@ type ComboboxControl = {
 type FormComboboxFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
   form: TForm;
   name: TName;
-  label: string;
+  label?: string;
   description?: string;
-  validators?: FormFieldValidators<TForm['state']['values'], TName>;
   children: (field: TypedField<string>, control: ComboboxControl) => React$1.ReactNode;
-};
+} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps;
 /**
  * Combobox (searchable single-select) field wrapper for **string-valued** fields. Same threaded-
  * `form` typing and shared shell as the other wrappers; the render-prop hands you `comboboxProps`
@@ -1515,11 +1574,10 @@ type MultiComboboxControl = {
 type FormMultiComboboxFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string[]>> = {
   form: TForm;
   name: TName;
-  label: string;
+  label?: string;
   description?: string;
-  validators?: FormFieldValidators<TForm['state']['values'], TName>;
   children: (field: TypedField<string[]>, control: MultiComboboxControl) => React$1.ReactNode;
-};
+} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps;
 /**
  * Multi-select combobox field wrapper — same threaded-`form` typing and shared shell as
  * `FormSelectField`, with `comboboxProps` / `comboboxInputProps` bundles. `name` is restricted
@@ -1536,6 +1594,80 @@ type FormMultiComboboxFieldProps<TForm extends BoundForm, TName extends DeepKeys
  */
 declare function FormMultiComboboxField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string[]>>(props: FormMultiComboboxFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/form-array-field.d.ts
+/**
+ * The element type of the bound array field — `DeepValue<TFormData, TName>` unwrapped one level.
+ * `contacts: { label: string; value: string }[]` ⇒ `{ label: string; value: string }`.
+ */
+type ArrayItem<TFormData, TName> = DeepValue<TFormData, TName> extends ReadonlyArray<infer TItem> ? TItem : never;
+/**
+ * Precisely-typed view of an array-mode field handed to a `FormArrayField` child.
+ *
+ * Unlike the single-control `TypedField`, this exposes TanStack's array mutators (kept under their
+ * native names so it's a transparent pass-through of `form.AppField` in `mode="array"`). The
+ * `options?` argument each mutator also accepts upstream is intentionally elided — the common path
+ * is index/value only; reach for `form.AppField` directly if you need it.
+ *
+ * Children read `state.value` to map over the rows and render nested `Form*Field`s with **indexed**
+ * names (`contacts[${i}].label`), and call the mutators from add/remove/reorder controls.
+ */
+type ArrayField<TItem> = {
+  state: {
+    value: TItem[];
+    meta: {
+      errors: readonly unknown[];
+      isTouched: boolean;
+    };
+  }; /** Append `value` to the end of the array. */
+  pushValue: (value: TItem) => void; /** Insert `value` at `index`, shifting later items right. */
+  insertValue: (index: number, value: TItem) => void; /** Replace the item at `index` in place. */
+  replaceValue: (index: number, value: TItem) => void; /** Remove the item at `index`, shifting later items left. */
+  removeValue: (index: number) => void; /** Swap the items at `aIndex` and `bIndex`. */
+  swapValues: (aIndex: number, bIndex: number) => void; /** Move the item at `aIndex` to `bIndex`, shifting the rest to fill. */
+  moveValue: (aIndex: number, bIndex: number) => void; /** Remove every item. */
+  clearValues: () => void; /** Mark the array field touched (e.g. on blur of the whole group). */
+  handleBlur: () => void;
+};
+type FormArrayFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], unknown[]>> = {
+  /** The form instance from `useForm()` — threaded as a prop so `name`/`validators` are typed. */form: TForm;
+  name: TName;
+  label?: string;
+  description?: string;
+  /**
+   * Render the list. Map over `field.state.value`, render a nested `Form*Field` per row (same
+   * `form`, indexed `name`), and wire add/remove/reorder controls to the array mutators.
+   */
+  children: (field: ArrayField<ArrayItem<TForm['state']['values'], TName>>) => React$1.ReactNode;
+} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps;
+/**
+ * Array field wrapper — drives a `form.AppField` in `mode="array"` and owns the shared
+ * `Field/Label/Description/Error` shell, so an array-level validator (e.g. "add at least one")
+ * surfaces under the list. `name` is restricted to the form's **array** fields, and the child's
+ * `field` is typed to the element type, with TanStack's array mutators (`pushValue`, `removeValue`,
+ * `moveValue`, …) exposed for add/remove/reorder.
+ *
+ * It deliberately has **no control bundle**: an array is a container of rows, not a single input.
+ * Each row is composed from the existing single-control wrappers with an indexed `name`.
+ *
+ * @example
+ * <FormArrayField form={form} name="webhooks" label="Webhooks" description="Endpoints to notify">
+ *   {field => (
+ *     <>
+ *       {field.state.value.map((_row, i) => (
+ *         <div key={i} className="flex items-end gap-2">
+ *           <FormInputField form={form} name={`webhooks[${i}].url`} label="URL">
+ *             {(_f, { inputProps }) => <Input {...inputProps} placeholder="https://…" />}
+ *           </FormInputField>
+ *           <Button variant="ghost" onClick={() => field.removeValue(i)}>Remove</Button>
+ *         </div>
+ *       ))}
+ *       <Button variant="outline" onClick={() => field.pushValue({ url: '' })}>Add webhook</Button>
+ *     </>
+ *   )}
+ * </FormArrayField>
+ */
+declare function FormArrayField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], unknown[]>>(props: FormArrayFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/components/form-textarea-field.d.ts
 /**
  * Wiring bundle handed to a `FormTextareaField` child. Spread `textareaProps` onto a DS
@@ -1552,11 +1684,10 @@ type TextareaControl = {
 type FormTextareaFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
   form: TForm;
   name: TName;
-  label: string;
+  label?: string;
   description?: string;
-  validators?: FormFieldValidators<TForm['state']['values'], TName>;
   children: (field: TypedField<string>, control: TextareaControl) => React$1.ReactNode;
-};
+} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps;
 /**
  * Multiline text-input field wrapper — same threaded-`form` typing and shared shell as
  * `FormSelectField`, with a `textareaProps` bundle. Compose the textarea yourself (rows,
@@ -1586,11 +1717,10 @@ type RadioGroupControl = {
 type FormRadioGroupFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
   form: TForm;
   name: TName;
-  label: string;
+  label?: string;
   description?: string;
-  validators?: FormFieldValidators<TForm['state']['values'], TName>;
   children: (field: TypedField<string>, control: RadioGroupControl) => React$1.ReactNode;
-};
+} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps;
 /**
  * Radio-group field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
  * with a `radioGroupProps` bundle. Compose the items yourself. `name` is restricted to the
@@ -1623,11 +1753,10 @@ type OTPControl = {
 type FormOTPFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
   form: TForm;
   name: TName;
-  label: string;
+  label?: string;
   description?: string;
-  validators?: FormFieldValidators<TForm['state']['values'], TName>;
   children: (field: TypedField<string>, control: OTPControl) => React$1.ReactNode;
-};
+} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps;
 /**
  * One-time-code field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
  * with an `otpProps` bundle. Compose the slots yourself. `name` is restricted to the form's
@@ -1656,11 +1785,10 @@ type SwitchControl = {
 type FormSwitchFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], boolean>> = {
   form: TForm;
   name: TName;
-  label: string;
+  label?: string;
   description?: string;
-  validators?: FormFieldValidators<TForm['state']['values'], TName>;
   children: (field: TypedField<boolean>, control: SwitchControl) => React$1.ReactNode;
-};
+} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps;
 /**
  * Toggle field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
  * with a `switchProps` bundle. `name` is restricted to the form's **boolean** fields — a
@@ -1673,38 +1801,37 @@ type FormSwitchFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<
  */
 declare function FormSwitchField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], boolean>>(props: FormSwitchFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/form-number-field.d.ts
+//#region src/components/form-numeric-field.d.ts
 /**
- * Wiring bundle handed to a `FormNumberField` child. Spread `numberProps` onto a DS `Input`
- * with `type="number"` — value/onChange/onBlur/aria are pre-wired (empty input coerces to `0`).
+ * Wiring bundle handed to a `FormNumericField` child. Spread `numericProps` onto a DS
+ * `NumericInput` — value/onValueChange/onBlur/aria are pre-wired (a cleared input coerces to `0`).
  */
-type NumberControl = {
-  numberProps: {
+type NumericControl = {
+  numericProps: {
     value: number;
-    onChange: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onValueChange: (value: number | null) => void;
     onBlur: () => void;
     'aria-invalid': true | undefined;
   };
 };
-type FormNumberFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], number>> = {
+type FormNumericFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], number>> = {
   form: TForm;
   name: TName;
-  label: string;
+  label?: string;
   description?: string;
-  validators?: FormFieldValidators<TForm['state']['values'], TName>;
-  children: (field: TypedField<number>, control: NumberControl) => React$1.ReactNode;
-};
+  children: (field: TypedField<number>, control: NumericControl) => React$1.ReactNode;
+} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps;
 /**
- * Numeric-input field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
- * with a `numberProps` bundle. `name` is restricted to the form's **number** fields — a
- * string/boolean `name` is a type error.
+ * Numeric field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
+ * with a `numericProps` bundle for the DS `NumericInput` (prefer it over `Input type="number"`).
+ * `name` is restricted to the form's **number** fields — a string/boolean `name` is a type error.
  *
  * @example
- * <FormNumberField form={form} name="age" label="Age" validators={{ onChange }}>
- *   {(field, { numberProps }) => <Input type="number" {...numberProps} />}
- * </FormNumberField>
+ * <FormNumericField form={form} name="age" label="Age" validators={{ onChange }}>
+ *   {(field, { numericProps }) => <NumericInput {...numericProps} />}
+ * </FormNumericField>
  */
-declare function FormNumberField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], number>>(props: FormNumberFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
+declare function FormNumericField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], number>>(props: FormNumericFieldProps<TForm, TName>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form-slider-field.d.ts
 /**
@@ -1721,11 +1848,10 @@ type SliderControl = {
 type FormSliderFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], number>> = {
   form: TForm;
   name: TName;
-  label: string;
+  label?: string;
   description?: string;
-  validators?: FormFieldValidators<TForm['state']['values'], TName>;
   children: (field: TypedField<number>, control: SliderControl) => React$1.ReactNode;
-};
+} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps;
 /**
  * Slider field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
  * with a `sliderProps` bundle. `name` is restricted to the form's **number** fields; the bundle
@@ -1754,11 +1880,10 @@ type ToggleGroupControl = {
 type FormToggleGroupFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string | null>> = {
   form: TForm;
   name: TName;
-  label: string;
+  label?: string;
   description?: string;
-  validators?: FormFieldValidators<TForm['state']['values'], TName>;
   children: (field: TypedField<string | null>, control: ToggleGroupControl) => React$1.ReactNode;
-};
+} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps;
 /**
  * Single-select toggle-group field wrapper — same threaded-`form` typing and shared shell as
  * `FormSelectField`, with a `toggleGroupProps` bundle. `name` is restricted to the form's
@@ -2006,4 +2131,4 @@ declare namespace DashboardSidebarSubmenuSeparator {
   type Props = DashboardSidebarSubmenuSeparatorProps;
 }
 //#endregion
-export { BetaBadge, type BoundForm, CardSaveBar, type CardSaveBarProps, ChatbotExpandSuggestion, type ChatbotExpandSuggestionProps, ChatbotInput, type ChatbotInputProps, ChatbotPage, ChatbotPageBody, type ChatbotPageBodyProps, ChatbotPageContent, type ChatbotPageContentProps, ChatbotPageConversation, type ChatbotPageConversationProps, ChatbotPageFooter, type ChatbotPageFooterProps, ChatbotPageHeading, type ChatbotPageHeadingProps, ChatbotPageInputBar, type ChatbotPageInputBarProps, type ChatbotPageProps, ChatbotPanel, ChatbotPanelHeader, type ChatbotPanelHeaderProps, type ChatbotPanelProps, ChatbotPanelSuggestion, type ChatbotPanelSuggestionItem, type ChatbotPanelSuggestionProps, ChatbotPanelTrigger, type ChatbotPanelTriggerProps, ChatbotResponseBlock, type ChatbotResponseBlockFeedback, type ChatbotResponseBlockProps, ChatbotSidebar, type ChatbotSidebarConversation, ChatbotUserMessage, type ChatbotUserMessageProps, type ComboboxControl, ComingSoonDescription, ComingSoonEmptyState, ComingSoonMedia, ComingSoonTitle, CommonForm, CopyButton, CopyButtonIcon, CopyButtonLabel, DashboardPage, DashboardPageBanner, DashboardPageContent, DashboardPageHeader, DashboardPageHeaderAction, DashboardPageHeaderActions, DashboardPageHeaderDescription, DashboardPageHeaderNav, DashboardPageHeaderNavBack, DashboardPageHeaderPrefix, DashboardPageHeaderSubtitle, DashboardPageHeaderTitle, DashboardPageHeaderTitleGroup, DashboardPageMain, DashboardPageTabs, DashboardSidebar, DashboardSidebarContent, DashboardSidebarFooter, DashboardSidebarGroup, DashboardSidebarGroupLabel, DashboardSidebarHeader, DashboardSidebarMenu, DashboardSidebarMenuBadge, DashboardSidebarMenuButton, DashboardSidebarMenuItem, DashboardSidebarNav, type DashboardSidebarNavGroup, type DashboardSidebarNavItem, type DashboardSidebarNavItemAction, type DashboardSidebarNavItemLink, type DashboardSidebarNavItemSubmenu, type DashboardSidebarNavSubmenuItem, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DashboardStandalonePage, DashboardStandalonePageAction, DashboardStandalonePageActions, DashboardStandalonePageContent, DashboardStandalonePageHeader, DashboardStandalonePageTitle, DeprecatedBadge, EmptyState, EmptyStateActions, EmptyStateButton, EmptyStateDescription, EmptyStateExternalLink, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle, FormComboboxField, type FormComboboxFieldProps, FormFieldBase, type FormFieldValidators, FormInputField, type FormInputFieldProps, FormMultiComboboxField, type FormMultiComboboxFieldProps, FormNumberField, type FormNumberFieldProps, FormOTPField, type FormOTPFieldProps, FormRadioGroupField, type FormRadioGroupFieldProps, FormSelectField, type FormSelectFieldProps, FormSliderField, type FormSliderFieldProps, FormSwitchField, type FormSwitchFieldProps, FormTextareaField, type FormTextareaFieldProps, FormToggleGroupField, type FormToggleGroupFieldProps, type InputControl, type MultiComboboxControl, NewBadge, NoDataDescription, NoDataEmptyState, NoDataMedia, NoDataTitle, NoSupportDescription, NoSupportEmptyState, NoSupportMedia, NoSupportTitle, NotFoundDescription, NotFoundEmptyState, NotFoundMedia, NotFoundTitle, type NumberControl, type OTPControl, ProfessionalBadge, type RadioGroupControl, RestrictedAccessDescription, RestrictedAccessEmptyState, RestrictedAccessMedia, RestrictedAccessTitle, RoleBadge, type RoleBadgeRole, SaveBar, type SaveBarProps, type SelectControl, type SliderControl, SubmitButton, type SubmitButtonProps, type SwitchControl, type TextareaControl, type ToggleGroupControl, TrialBadge, type TypedField, UnknownErrorDescription, UnknownErrorEmptyState, UnknownErrorMedia, UnknownErrorTitle, fieldContext, formContext, toFieldErrors, useCopyToClipboard, useSidebar as useDashboardSidebar, useFieldContext, useForm, useFormContext, withForm };
+export { type ArrayField, type ArrayItem, BetaBadge, type BoundForm, CardSaveBar, type CardSaveBarProps, ChatbotExpandSuggestion, type ChatbotExpandSuggestionProps, ChatbotInput, type ChatbotInputProps, ChatbotPage, ChatbotPageBody, type ChatbotPageBodyProps, ChatbotPageContent, type ChatbotPageContentProps, ChatbotPageConversation, type ChatbotPageConversationProps, ChatbotPageFooter, type ChatbotPageFooterProps, ChatbotPageHeading, type ChatbotPageHeadingProps, ChatbotPageInputBar, type ChatbotPageInputBarProps, type ChatbotPageProps, ChatbotPanel, ChatbotPanelHeader, type ChatbotPanelHeaderProps, type ChatbotPanelProps, ChatbotPanelSuggestion, type ChatbotPanelSuggestionItem, type ChatbotPanelSuggestionProps, ChatbotPanelTrigger, type ChatbotPanelTriggerProps, ChatbotResponseBlock, type ChatbotResponseBlockFeedback, type ChatbotResponseBlockProps, ChatbotSidebar, type ChatbotSidebarConversation, ChatbotUserMessage, type ChatbotUserMessageProps, type ComboboxControl, ComingSoonDescription, ComingSoonEmptyState, ComingSoonMedia, ComingSoonTitle, CommonForm, CopyButton, CopyButtonIcon, CopyButtonLabel, DashboardPage, DashboardPageBanner, DashboardPageContent, DashboardPageHeader, DashboardPageHeaderAction, DashboardPageHeaderActions, DashboardPageHeaderDescription, DashboardPageHeaderNav, DashboardPageHeaderNavBack, DashboardPageHeaderPrefix, DashboardPageHeaderSubtitle, DashboardPageHeaderTitle, DashboardPageHeaderTitleGroup, DashboardPageMain, DashboardPageTabs, DashboardSidebar, DashboardSidebarContent, DashboardSidebarFooter, DashboardSidebarGroup, DashboardSidebarGroupLabel, DashboardSidebarHeader, DashboardSidebarMenu, DashboardSidebarMenuBadge, DashboardSidebarMenuButton, DashboardSidebarMenuItem, DashboardSidebarNav, type DashboardSidebarNavGroup, type DashboardSidebarNavItem, type DashboardSidebarNavItemAction, type DashboardSidebarNavItemLink, type DashboardSidebarNavItemSubmenu, type DashboardSidebarNavSubmenuItem, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DashboardStandalonePage, DashboardStandalonePageAction, DashboardStandalonePageActions, DashboardStandalonePageContent, DashboardStandalonePageHeader, DashboardStandalonePageTitle, DeprecatedBadge, EmptyState, EmptyStateActions, EmptyStateButton, EmptyStateDescription, EmptyStateExternalLink, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle, type FieldBindingProps, FormArrayField, type FormArrayFieldProps, FormComboboxField, type FormComboboxFieldProps, FormFieldBase, FormFieldShell, type FormFieldShellProps, type FormFieldValidators, FormInputField, type FormInputFieldProps, FormMultiComboboxField, type FormMultiComboboxFieldProps, FormNumericField, type FormNumericFieldProps, FormOTPField, type FormOTPFieldProps, FormRadioGroupField, type FormRadioGroupFieldProps, FormSelectField, type FormSelectFieldProps, FormSliderField, type FormSliderFieldProps, FormSwitchField, type FormSwitchFieldProps, FormTextareaField, type FormTextareaFieldProps, FormToggleGroupField, type FormToggleGroupFieldProps, type InputControl, type MultiComboboxControl, type NecessityProps, NewBadge, NoDataDescription, NoDataEmptyState, NoDataMedia, NoDataTitle, NoSupportDescription, NoSupportEmptyState, NoSupportMedia, NoSupportTitle, NotFoundDescription, NotFoundEmptyState, NotFoundMedia, NotFoundTitle, type NumericControl, type OTPControl, ProfessionalBadge, type RadioGroupControl, RestrictedAccessDescription, RestrictedAccessEmptyState, RestrictedAccessMedia, RestrictedAccessTitle, RoleBadge, type RoleBadgeRole, SaveBar, type SaveBarProps, type SelectControl, type SliderControl, SubmitButton, type SubmitButtonProps, type SwitchControl, type TextareaControl, type ToggleGroupControl, TrialBadge, type TypedField, UnknownErrorDescription, UnknownErrorEmptyState, UnknownErrorMedia, UnknownErrorTitle, fieldContext, formContext, toFieldErrors, useCopyToClipboard, useSidebar as useDashboardSidebar, useFieldContext, useForm, useFormContext, withFieldGroup, withForm };

package/dist/index.js

@@ -1930,7 +1930,7 @@ const CommonForm = createFormHook({
 	}
 });
 const useForm = CommonForm.useAppForm;
-const { withForm } = CommonForm;
+const { withForm, withFieldGroup } = CommonForm;
 
 //#endregion
 //#region src/form/field-errors.ts
@@ -1950,12 +1950,15 @@ function toFieldErrors(errors) {
 
 //#endregion
 //#region src/components/form-field.tsx
-function FormFieldShell({ label, description, children }) {
+function FormFieldShell({ label, description, necessityIndicator, children }) {
 	const errors = useFieldContext().state.meta.errors;
 	return /* @__PURE__ */ jsxs(Field, {
 		"data-invalid": errors.length > 0 ? true : void 0,
 		children: [
-			/* @__PURE__ */ jsx(FieldLabel, { children: label }),
+			label && /* @__PURE__ */ jsx(FieldLabel, {
+				necessityIndicator,
+				children: label
+			}),
 			description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
 			children,
 			/* @__PURE__ */ jsx(FieldError, { errors: toFieldErrors(errors) })
@@ -1968,14 +1971,19 @@ function FormFieldShell({ label, description, children }) {
 * the AppField + shared shell. `TData`/`TControl` carry the precise field + bundle shapes through.
 */
 function FormFieldBase(props) {
-	const { form, name, validators, label, description, buildControl, children } = props;
+	const { form, name, validators, listeners, defaultValue, asyncDebounceMs, asyncAlways, label, description, necessityIndicator, buildControl, children } = props;
 	const AppField = form.AppField;
 	return /* @__PURE__ */ jsx(AppField, {
 		name,
 		validators,
+		listeners,
+		defaultValue,
+		asyncDebounceMs,
+		asyncAlways,
 		children: (field) => /* @__PURE__ */ jsx(FormFieldShell, {
 			label,
 			description,
+			necessityIndicator,
 			children: children(field, buildControl(field))
 		})
 	});
@@ -2122,6 +2130,55 @@ function FormMultiComboboxField(props) {
 	});
 }
 
+//#endregion
+//#region src/components/form-array-field.tsx
+/**
+* Array field wrapper — drives a `form.AppField` in `mode="array"` and owns the shared
+* `Field/Label/Description/Error` shell, so an array-level validator (e.g. "add at least one")
+* surfaces under the list. `name` is restricted to the form's **array** fields, and the child's
+* `field` is typed to the element type, with TanStack's array mutators (`pushValue`, `removeValue`,
+* `moveValue`, …) exposed for add/remove/reorder.
+*
+* It deliberately has **no control bundle**: an array is a container of rows, not a single input.
+* Each row is composed from the existing single-control wrappers with an indexed `name`.
+*
+* @example
+* <FormArrayField form={form} name="webhooks" label="Webhooks" description="Endpoints to notify">
+*   {field => (
+*     <>
+*       {field.state.value.map((_row, i) => (
+*         <div key={i} className="flex items-end gap-2">
+*           <FormInputField form={form} name={`webhooks[${i}].url`} label="URL">
+*             {(_f, { inputProps }) => <Input {...inputProps} placeholder="https://…" />}
+*           </FormInputField>
+*           <Button variant="ghost" onClick={() => field.removeValue(i)}>Remove</Button>
+*         </div>
+*       ))}
+*       <Button variant="outline" onClick={() => field.pushValue({ url: '' })}>Add webhook</Button>
+*     </>
+*   )}
+* </FormArrayField>
+*/
+function FormArrayField(props) {
+	const { form, name, validators, listeners, defaultValue, asyncDebounceMs, asyncAlways, label, description, necessityIndicator, children } = props;
+	const AppField = form.AppField;
+	return /* @__PURE__ */ jsx(AppField, {
+		name,
+		mode: "array",
+		validators,
+		listeners,
+		defaultValue,
+		asyncDebounceMs,
+		asyncAlways,
+		children: (field) => /* @__PURE__ */ jsx(FormFieldShell, {
+			label,
+			description,
+			necessityIndicator,
+			children: children(field)
+		})
+	});
+}
+
 //#endregion
 //#region src/components/form-textarea-field.tsx
 function textareaControl(field) {
@@ -2235,29 +2292,29 @@ function FormSwitchField(props) {
 }
 
 //#endregion
-//#region src/components/form-number-field.tsx
-function numberControl(field) {
-	return { numberProps: {
+//#region src/components/form-numeric-field.tsx
+function numericControl(field) {
+	return { numericProps: {
 		value: field.state.value,
-		onChange: (event) => field.handleChange(event.target.value === "" ? 0 : event.target.valueAsNumber),
+		onValueChange: (value) => field.handleChange(value ?? 0),
 		onBlur: field.handleBlur,
 		"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
 	} };
 }
 /**
-* Numeric-input field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
-* with a `numberProps` bundle. `name` is restricted to the form's **number** fields — a
-* string/boolean `name` is a type error.
+* Numeric field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
+* with a `numericProps` bundle for the DS `NumericInput` (prefer it over `Input type="number"`).
+* `name` is restricted to the form's **number** fields — a string/boolean `name` is a type error.
 *
 * @example
-* <FormNumberField form={form} name="age" label="Age" validators={{ onChange }}>
-*   {(field, { numberProps }) => <Input type="number" {...numberProps} />}
-* </FormNumberField>
+* <FormNumericField form={form} name="age" label="Age" validators={{ onChange }}>
+*   {(field, { numericProps }) => <NumericInput {...numericProps} />}
+* </FormNumericField>
 */
-function FormNumberField(props) {
+function FormNumericField(props) {
 	return /* @__PURE__ */ jsx(FormFieldBase, {
 		...props,
-		buildControl: numberControl
+		buildControl: numericControl
 	});
 }
 
@@ -2651,4 +2708,4 @@ function DashboardSidebarNav({ groups, renderLink }) {
 }
 
 //#endregion
-export { BetaBadge, CardSaveBar, ChatbotExpandSuggestion, ChatbotInput, ChatbotPage, ChatbotPageBody, ChatbotPageContent, ChatbotPageConversation, ChatbotPageFooter, ChatbotPageHeading, ChatbotPageInputBar, ChatbotPanel, ChatbotPanelHeader, ChatbotPanelSuggestion, ChatbotPanelTrigger, ChatbotResponseBlock, ChatbotSidebar, ChatbotUserMessage, ComingSoonDescription, ComingSoonEmptyState, ComingSoonMedia, ComingSoonTitle, CommonForm, CopyButton, CopyButtonIcon, CopyButtonLabel, DashboardPage, DashboardPageBanner, DashboardPageContent, DashboardPageHeader, DashboardPageHeaderAction, DashboardPageHeaderActions, DashboardPageHeaderDescription, DashboardPageHeaderNav, DashboardPageHeaderNavBack, DashboardPageHeaderPrefix, DashboardPageHeaderSubtitle, DashboardPageHeaderTitle, DashboardPageHeaderTitleGroup, DashboardPageMain, DashboardPageTabs, DashboardSidebar, DashboardSidebarContent, DashboardSidebarFooter, DashboardSidebarGroup, DashboardSidebarGroupLabel, DashboardSidebarHeader, DashboardSidebarMenu, DashboardSidebarMenuBadge, DashboardSidebarMenuButton, DashboardSidebarMenuItem, DashboardSidebarNav, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DashboardStandalonePage, DashboardStandalonePageAction, DashboardStandalonePageActions, DashboardStandalonePageContent, DashboardStandalonePageHeader, DashboardStandalonePageTitle, DeprecatedBadge, EmptyState, EmptyStateActions, EmptyStateButton, EmptyStateDescription, EmptyStateExternalLink, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle, FormComboboxField, FormFieldBase, FormInputField, FormMultiComboboxField, FormNumberField, FormOTPField, FormRadioGroupField, FormSelectField, FormSliderField, FormSwitchField, FormTextareaField, FormToggleGroupField, NewBadge, NoDataDescription, NoDataEmptyState, NoDataMedia, NoDataTitle, NoSupportDescription, NoSupportEmptyState, NoSupportMedia, NoSupportTitle, NotFoundDescription, NotFoundEmptyState, NotFoundMedia, NotFoundTitle, ProfessionalBadge, RestrictedAccessDescription, RestrictedAccessEmptyState, RestrictedAccessMedia, RestrictedAccessTitle, RoleBadge, SaveBar, SubmitButton, TrialBadge, UnknownErrorDescription, UnknownErrorEmptyState, UnknownErrorMedia, UnknownErrorTitle, fieldContext, formContext, toFieldErrors, useCopyToClipboard, useSidebar as useDashboardSidebar, useFieldContext, useForm, useFormContext, withForm };
+export { BetaBadge, CardSaveBar, ChatbotExpandSuggestion, ChatbotInput, ChatbotPage, ChatbotPageBody, ChatbotPageContent, ChatbotPageConversation, ChatbotPageFooter, ChatbotPageHeading, ChatbotPageInputBar, ChatbotPanel, ChatbotPanelHeader, ChatbotPanelSuggestion, ChatbotPanelTrigger, ChatbotResponseBlock, ChatbotSidebar, ChatbotUserMessage, ComingSoonDescription, ComingSoonEmptyState, ComingSoonMedia, ComingSoonTitle, CommonForm, CopyButton, CopyButtonIcon, CopyButtonLabel, DashboardPage, DashboardPageBanner, DashboardPageContent, DashboardPageHeader, DashboardPageHeaderAction, DashboardPageHeaderActions, DashboardPageHeaderDescription, DashboardPageHeaderNav, DashboardPageHeaderNavBack, DashboardPageHeaderPrefix, DashboardPageHeaderSubtitle, DashboardPageHeaderTitle, DashboardPageHeaderTitleGroup, DashboardPageMain, DashboardPageTabs, DashboardSidebar, DashboardSidebarContent, DashboardSidebarFooter, DashboardSidebarGroup, DashboardSidebarGroupLabel, DashboardSidebarHeader, DashboardSidebarMenu, DashboardSidebarMenuBadge, DashboardSidebarMenuButton, DashboardSidebarMenuItem, DashboardSidebarNav, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DashboardStandalonePage, DashboardStandalonePageAction, DashboardStandalonePageActions, DashboardStandalonePageContent, DashboardStandalonePageHeader, DashboardStandalonePageTitle, DeprecatedBadge, EmptyState, EmptyStateActions, EmptyStateButton, EmptyStateDescription, EmptyStateExternalLink, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle, FormArrayField, FormComboboxField, FormFieldBase, FormFieldShell, FormInputField, FormMultiComboboxField, FormNumericField, FormOTPField, FormRadioGroupField, FormSelectField, FormSliderField, FormSwitchField, FormTextareaField, FormToggleGroupField, NewBadge, NoDataDescription, NoDataEmptyState, NoDataMedia, NoDataTitle, NoSupportDescription, NoSupportEmptyState, NoSupportMedia, NoSupportTitle, NotFoundDescription, NotFoundEmptyState, NotFoundMedia, NotFoundTitle, ProfessionalBadge, RestrictedAccessDescription, RestrictedAccessEmptyState, RestrictedAccessMedia, RestrictedAccessTitle, RoleBadge, SaveBar, SubmitButton, TrialBadge, UnknownErrorDescription, UnknownErrorEmptyState, UnknownErrorMedia, UnknownErrorTitle, fieldContext, formContext, toFieldErrors, useCopyToClipboard, useSidebar as useDashboardSidebar, useFieldContext, useForm, useFormContext, withFieldGroup, withForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aircall/blocks",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "type": "module",
   "private": false,
   "sideEffects": [
@@ -81,7 +81,7 @@
     "vite": "7.3.1",
     "vitest": "4.0.17",
     "zod": "4.4.3",
-    "@aircall/ds": "0.16.1",
+    "@aircall/ds": "0.17.1",
     "@aircall/hooks": "0.5.1"
   },
   "keywords": [
@@ -102,6 +102,7 @@
     "sb:dev": "storybook dev -p 6009",
     "sb:build": "storybook build",
     "sb:build:chromatic": "storybook build --test --stats-json",
+    "test": "vitest --project=unit",
     "sb:test": "vitest --project=storybook",
     "chromatic": "chromatic --storybook-build-dir=./storybook-static"
   },