@ariakit/react-core 0.3.11 → 0.3.13

package/cjs/focusable/focusable-container.d.ts

@@ -10,8 +10,9 @@ import type { As, Options, Props } from "../utils/types.js";
  */
 export declare const useFocusableContainer: import("../utils/types.js").Hook<FocusableContainerOptions<"div">>;
 /**
- * Renders a div that wraps `Focusable` components and controls whether they
- * can be auto focused.
+ * Renders a div that wraps
+ * [`Focusable`](https://ariakit.org/reference/focusable) components and
+ * controls whether they can be auto-focused.
  * @see https://ariakit.org/components/focusable
  * @example
  * ```jsx
@@ -23,9 +24,10 @@ export declare const useFocusableContainer: import("../utils/types.js").Hook<Foc
 export declare const FocusableContainer: import("../utils/types.js").Component<FocusableContainerOptions<"div">>;
 export type FocusableContainerOptions<T extends As = "div"> = Options<T> & {
     /**
-     * Determines whether focusable elements inside the container should be
-     * automatically focused when the container is shown and they have the
-     * `autoFocus` prop.
+     * Determines whether [`Focusable`](https://ariakit.org/reference/focusable)
+     * elements inside the container should be automatically focused when the
+     * container is shown and they have the
+     * [`autoFocus`](https://ariakit.org/reference/focusable#autofocus) prop.
      * @default true
      */
     autoFocusOnShow?: boolean;

package/cjs/focusable/focusable.cjs

@@ -2,7 +2,7 @@
 
 
 
-var _Z3GCTNW4cjs = require('../__chunks/Z3GCTNW4.cjs');
+var _VUEWHLYHcjs = require('../__chunks/VUEWHLYH.cjs');
 require('../__chunks/75KXQZJX.cjs');
 require('../__chunks/RNZNGEL4.cjs');
 require('../__chunks/EO6LS72H.cjs');
@@ -11,4 +11,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.Focusable = _Z3GCTNW4cjs.Focusable; exports.useFocusable = _Z3GCTNW4cjs.useFocusable;
+exports.Focusable = _VUEWHLYHcjs.Focusable; exports.useFocusable = _VUEWHLYHcjs.useFocusable;

package/cjs/focusable/focusable.d.cts

@@ -45,6 +45,8 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
      *
      * Live examples:
      * - [Submenu](https://ariakit.org/examples/menu-nested)
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     * - [Context Menu](https://ariakit.org/examples/menu-context-menu)
      * @default false
      */
     disabled?: boolean;
@@ -81,6 +83,9 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
      * [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled),
      * [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible),
      * etc.
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @default true
      */
     focusable?: boolean;
@@ -98,12 +103,17 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
      *
      * Learn more on [Focusability of disabled
      * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     accessibleWhenDisabled?: boolean;
     /**
      * Custom event handler invoked when the element gains focus through keyboard
-     * interaction or a key press occurs while the element is in focus. This is a
-     * programmatic equivalent of the `data-focus-visible` attribute.
+     * interaction or a key press occurs while the element is in focus. This is
+     * the programmatic equivalent of the
+     * [`data-focus-visible`](https://ariakit.org/guide/styling#data-focus-visible)
+     * attribute.
      *
      * Live examples:
      * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)

package/cjs/focusable/focusable.d.ts

@@ -45,6 +45,8 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
      *
      * Live examples:
      * - [Submenu](https://ariakit.org/examples/menu-nested)
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     * - [Context Menu](https://ariakit.org/examples/menu-context-menu)
      * @default false
      */
     disabled?: boolean;
@@ -81,6 +83,9 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
      * [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled),
      * [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible),
      * etc.
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @default true
      */
     focusable?: boolean;
@@ -98,12 +103,17 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
      *
      * Learn more on [Focusability of disabled
      * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     accessibleWhenDisabled?: boolean;
     /**
      * Custom event handler invoked when the element gains focus through keyboard
-     * interaction or a key press occurs while the element is in focus. This is a
-     * programmatic equivalent of the `data-focus-visible` attribute.
+     * interaction or a key press occurs while the element is in focus. This is
+     * the programmatic equivalent of the
+     * [`data-focus-visible`](https://ariakit.org/guide/styling#data-focus-visible)
+     * attribute.
      *
      * Live examples:
      * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)

package/cjs/form/form-checkbox.cjs

@@ -1,29 +1,29 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _VCDQISP7cjs = require('../__chunks/VCDQISP7.cjs');
+var _N3XK7EAHcjs = require('../__chunks/N3XK7EAH.cjs');
 
 
 var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
 
 
-var _KQUC6RXTcjs = require('../__chunks/KQUC6RXT.cjs');
-require('../__chunks/63UPRTFZ.cjs');
+var _VPQQSYH7cjs = require('../__chunks/VPQQSYH7.cjs');
 
 
-var _VSDH37LIcjs = require('../__chunks/VSDH37LI.cjs');
+var _2UEWAQWGcjs = require('../__chunks/2UEWAQWG.cjs');
+require('../__chunks/63UPRTFZ.cjs');
 require('../__chunks/ERFHNHON.cjs');
-require('../__chunks/DAJUUBUI.cjs');
+require('../__chunks/OSTQZD2E.cjs');
 require('../__chunks/R5A2WTWB.cjs');
 require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/VUEWHLYH.cjs');
 require('../__chunks/75KXQZJX.cjs');
 
 
 
 
 var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
-require('../__chunks/B233QVZE.cjs');
+require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 
@@ -43,12 +43,12 @@ var useFormCheckbox = _RNZNGEL4cjs.createHook.call(void 0,
       process.env.NODE_ENV !== "production" && "FormCheckbox must be wrapped in a Form component."
     );
     const name = `${nameProp}`;
-    const checkboxStore = _VSDH37LIcjs.useCheckboxStore.call(void 0, {
+    const checkboxStore = _VPQQSYH7cjs.useCheckboxStore.call(void 0, {
       value: store.useValue(name),
       setValue: (value2) => store == null ? void 0 : store.setValue(name, value2)
     });
-    props = _KQUC6RXTcjs.useCheckbox.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store: checkboxStore, value, checked }, props));
-    props = _VCDQISP7cjs.useFormField.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _2UEWAQWGcjs.useCheckbox.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store: checkboxStore, value, checked }, props));
+    props = _N3XK7EAHcjs.useFormControl.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       name,
       "aria-labelledby": void 0

package/cjs/form/form-checkbox.d.cts

@@ -1,6 +1,6 @@
 import type { CheckboxOptions } from "../checkbox/checkbox.js";
 import type { As, Props } from "../utils/types.js";
-import type { FormFieldOptions } from "./form-field.js";
+import type { FormControlOptions } from "./form-control.js";
 /**
  * Returns props to create a `FormCheckbox` component.
  * @see https://ariakit.org/components/form
@@ -18,15 +18,17 @@ import type { FormFieldOptions } from "./form-field.js";
  */
 export declare const useFormCheckbox: import("../utils/types.js").Hook<FormCheckboxOptions<"input">>;
 /**
- * Renders a checkbox as a form field.
+ * Renders a checkbox input as a form control, representing a boolean, string,
+ * number, or array value.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {9}
  * const form = useFormStore({
  *   defaultValues: {
  *     acceptTerms: false,
  *   },
  * });
+ *
  * <Form store={form}>
  *   <label>
  *     <FormCheckbox name={form.names.acceptTerms} />
@@ -36,6 +38,6 @@ export declare const useFormCheckbox: import("../utils/types.js").Hook<FormCheck
  * ```
  */
 export declare const FormCheckbox: import("../utils/types.js").Component<FormCheckboxOptions<"input">>;
-export interface FormCheckboxOptions<T extends As = "input"> extends FormFieldOptions<T>, Omit<CheckboxOptions<T>, "store" | "name"> {
+export interface FormCheckboxOptions<T extends As = "input"> extends FormControlOptions<T>, Omit<CheckboxOptions<T>, "store" | "name"> {
 }
 export type FormCheckboxProps<T extends As = "input"> = Props<FormCheckboxOptions<T>>;

package/cjs/form/form-checkbox.d.ts

@@ -1,6 +1,6 @@
 import type { CheckboxOptions } from "../checkbox/checkbox.js";
 import type { As, Props } from "../utils/types.js";
-import type { FormFieldOptions } from "./form-field.js";
+import type { FormControlOptions } from "./form-control.js";
 /**
  * Returns props to create a `FormCheckbox` component.
  * @see https://ariakit.org/components/form
@@ -18,15 +18,17 @@ import type { FormFieldOptions } from "./form-field.js";
  */
 export declare const useFormCheckbox: import("../utils/types.js").Hook<FormCheckboxOptions<"input">>;
 /**
- * Renders a checkbox as a form field.
+ * Renders a checkbox input as a form control, representing a boolean, string,
+ * number, or array value.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {9}
  * const form = useFormStore({
  *   defaultValues: {
  *     acceptTerms: false,
  *   },
  * });
+ *
  * <Form store={form}>
  *   <label>
  *     <FormCheckbox name={form.names.acceptTerms} />
@@ -36,6 +38,6 @@ export declare const useFormCheckbox: import("../utils/types.js").Hook<FormCheck
  * ```
  */
 export declare const FormCheckbox: import("../utils/types.js").Component<FormCheckboxOptions<"input">>;
-export interface FormCheckboxOptions<T extends As = "input"> extends FormFieldOptions<T>, Omit<CheckboxOptions<T>, "store" | "name"> {
+export interface FormCheckboxOptions<T extends As = "input"> extends FormControlOptions<T>, Omit<CheckboxOptions<T>, "store" | "name"> {
 }
 export type FormCheckboxProps<T extends As = "input"> = Props<FormCheckboxOptions<T>>;

package/cjs/form/form-control.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+
+var _N3XK7EAHcjs = require('../__chunks/N3XK7EAH.cjs');
+require('../__chunks/FROYTN4B.cjs');
+require('../__chunks/R5A2WTWB.cjs');
+require('../__chunks/BZTDJIVT.cjs');
+require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+require('../__chunks/AV6KTKLE.cjs');
+
+
+
+exports.FormControl = _N3XK7EAHcjs.FormControl; exports.useFormControl = _N3XK7EAHcjs.useFormControl;

package/cjs/form/form-control.d.cts

@@ -0,0 +1,93 @@
+import type { FocusEvent } from "react";
+import type { StringLike } from "@ariakit/core/form/types";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { CollectionItemOptions } from "../collection/collection-item.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormStore } from "./form-store.js";
+/**
+ * Returns props to create a `FormControl` component. Unlike `useFormInput`,
+ * this hook doesn't automatically returns the `value` and `onChange` props.
+ * This is so we can use it not only for native form elements but also for
+ * custom components whose value is not controlled by the native `value` and
+ * `onChange` props.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { content: "" } });
+ * const props = useFormControl({ store, name: store.names.content });
+ * const value = store.useValue(store.names.content);
+ *
+ * <Form store={store}>
+ *   <FormLabel name={store.names.content}>Content</FormLabel>
+ *   <Role
+ *     {...props}
+ *     value={value}
+ *     onChange={(value) => store.setValue(store.names.content, value)}
+ *     render={<Editor />}
+ *   />
+ * </Form>
+ * ```
+ */
+export declare const useFormControl: import("../utils/types.js").Hook<FormControlOptions<"input">>;
+/**
+ * Abstract component that renders a form control. Unlike
+ * [`FormInput`](https://ariakit.org/reference/form-input), this component
+ * doesn't automatically pass the `value` and `onChange` props down to the
+ * underlying element. This is so we can use it not only for native form
+ * elements but also for custom components whose value is not controlled by the
+ * native `value` and `onChange` props.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx {11-19}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     content: "",
+ *   },
+ * });
+ *
+ * const value = form.useValue(form.names.content);
+ *
+ * <Form store={form}>
+ *   <FormLabel name={form.names.content}>Content</FormLabel>
+ *   <FormControl
+ *     name={form.names.content}
+ *     render={
+ *       <Editor
+ *         value={value}
+ *         onChange={(value) => form.setValue(form.names.content, value)}
+ *       />
+ *     }
+ *   />
+ * </Form>
+ * ```
+ */
+export declare const FormControl: import("../utils/types.js").Component<FormControlOptions<"input">>;
+export interface FormControlOptions<T extends As = "input"> extends CollectionItemOptions<T> {
+    /**
+     * Object returned by the
+     * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
+     * provided, the closest [`Form`](https://ariakit.org/reference/form) or
+     * [`FormProvider`](https://ariakit.org/reference/form-provider) components'
+     * context will be used.
+     */
+    store?: FormStore;
+    /**
+     * Field name. This can either be a string corresponding to an existing
+     * property name in the
+     * [`values`](https://ariakit.org/reference/use-form-store#values) state of
+     * the store, or a reference to a field name from the
+     * [`names`](https://ariakit.org/reference/use-form-store#names) object in the
+     * store, ensuring type safety.
+     *
+     * Live examples:
+     * - [FormRadio](https://ariakit.org/examples/form-radio)
+     * - [Form with Select](https://ariakit.org/examples/form-select)
+     */
+    name: StringLike;
+    /**
+     * Whether the field should be marked touched on blur.
+     * @default true
+     */
+    touchOnBlur?: BooleanOrCallback<FocusEvent>;
+}
+export type FormControlProps<T extends As = "input"> = Props<FormControlOptions<T>>;

package/cjs/form/form-control.d.ts

@@ -0,0 +1,93 @@
+import type { FocusEvent } from "react";
+import type { StringLike } from "@ariakit/core/form/types";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { CollectionItemOptions } from "../collection/collection-item.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormStore } from "./form-store.js";
+/**
+ * Returns props to create a `FormControl` component. Unlike `useFormInput`,
+ * this hook doesn't automatically returns the `value` and `onChange` props.
+ * This is so we can use it not only for native form elements but also for
+ * custom components whose value is not controlled by the native `value` and
+ * `onChange` props.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { content: "" } });
+ * const props = useFormControl({ store, name: store.names.content });
+ * const value = store.useValue(store.names.content);
+ *
+ * <Form store={store}>
+ *   <FormLabel name={store.names.content}>Content</FormLabel>
+ *   <Role
+ *     {...props}
+ *     value={value}
+ *     onChange={(value) => store.setValue(store.names.content, value)}
+ *     render={<Editor />}
+ *   />
+ * </Form>
+ * ```
+ */
+export declare const useFormControl: import("../utils/types.js").Hook<FormControlOptions<"input">>;
+/**
+ * Abstract component that renders a form control. Unlike
+ * [`FormInput`](https://ariakit.org/reference/form-input), this component
+ * doesn't automatically pass the `value` and `onChange` props down to the
+ * underlying element. This is so we can use it not only for native form
+ * elements but also for custom components whose value is not controlled by the
+ * native `value` and `onChange` props.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx {11-19}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     content: "",
+ *   },
+ * });
+ *
+ * const value = form.useValue(form.names.content);
+ *
+ * <Form store={form}>
+ *   <FormLabel name={form.names.content}>Content</FormLabel>
+ *   <FormControl
+ *     name={form.names.content}
+ *     render={
+ *       <Editor
+ *         value={value}
+ *         onChange={(value) => form.setValue(form.names.content, value)}
+ *       />
+ *     }
+ *   />
+ * </Form>
+ * ```
+ */
+export declare const FormControl: import("../utils/types.js").Component<FormControlOptions<"input">>;
+export interface FormControlOptions<T extends As = "input"> extends CollectionItemOptions<T> {
+    /**
+     * Object returned by the
+     * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
+     * provided, the closest [`Form`](https://ariakit.org/reference/form) or
+     * [`FormProvider`](https://ariakit.org/reference/form-provider) components'
+     * context will be used.
+     */
+    store?: FormStore;
+    /**
+     * Field name. This can either be a string corresponding to an existing
+     * property name in the
+     * [`values`](https://ariakit.org/reference/use-form-store#values) state of
+     * the store, or a reference to a field name from the
+     * [`names`](https://ariakit.org/reference/use-form-store#names) object in the
+     * store, ensuring type safety.
+     *
+     * Live examples:
+     * - [FormRadio](https://ariakit.org/examples/form-radio)
+     * - [Form with Select](https://ariakit.org/examples/form-select)
+     */
+    name: StringLike;
+    /**
+     * Whether the field should be marked touched on blur.
+     * @default true
+     */
+    touchOnBlur?: BooleanOrCallback<FocusEvent>;
+}
+export type FormControlProps<T extends As = "input"> = Props<FormControlOptions<T>>;

package/cjs/form/form-description.d.cts

@@ -18,15 +18,17 @@ import type { FormStore } from "./form-store.js";
  */
 export declare const useFormDescription: import("../utils/types.js").Hook<FormDescriptionOptions<"div">>;
 /**
- * Renders a description element for a form field.
+ * Renders a description element for a form field, which will automatically
+ * receive an `aria-describedby` attribute pointing to this element.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {10-12}
  * const form = useFormStore({
  *   defaultValues: {
  *     password: "",
  *   },
  * });
+ *
  * <Form store={form}>
  *   <FormLabel name={form.names.password}>Password</FormLabel>
  *   <FormInput name={form.names.password} type="password" />
@@ -47,7 +49,16 @@ export interface FormDescriptionOptions<T extends As = "div"> extends Collection
      */
     store?: FormStore;
     /**
-     * Name of the field.
+     * Name of the field described by this element. This can either be a string or
+     * a reference to a field name from the
+     * [`names`](https://ariakit.org/reference/use-form-store#names) object in the
+     * store, for type safety.
+     * @example
+     * ```jsx
+     * <FormDescription name="password">
+     *   Password with at least 8 characters.
+     * </FormDescription>
+     * ```
      */
     name: StringLike;
 }

package/cjs/form/form-description.d.ts

@@ -18,15 +18,17 @@ import type { FormStore } from "./form-store.js";
  */
 export declare const useFormDescription: import("../utils/types.js").Hook<FormDescriptionOptions<"div">>;
 /**
- * Renders a description element for a form field.
+ * Renders a description element for a form field, which will automatically
+ * receive an `aria-describedby` attribute pointing to this element.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {10-12}
  * const form = useFormStore({
  *   defaultValues: {
  *     password: "",
  *   },
  * });
+ *
  * <Form store={form}>
  *   <FormLabel name={form.names.password}>Password</FormLabel>
  *   <FormInput name={form.names.password} type="password" />
@@ -47,7 +49,16 @@ export interface FormDescriptionOptions<T extends As = "div"> extends Collection
      */
     store?: FormStore;
     /**
-     * Name of the field.
+     * Name of the field described by this element. This can either be a string or
+     * a reference to a field name from the
+     * [`names`](https://ariakit.org/reference/use-form-store#names) object in the
+     * store, for type safety.
+     * @example
+     * ```jsx
+     * <FormDescription name="password">
+     *   Password with at least 8 characters.
+     * </FormDescription>
+     * ```
      */
     name: StringLike;
 }

package/cjs/form/form-error.d.cts

@@ -25,11 +25,11 @@ import type { FormStore } from "./form-store.js";
  */
 export declare const useFormError: import("../utils/types.js").Hook<FormErrorOptions<"div">>;
 /**
- * Renders an element that displays an error message. The `children` will be
- * automatically set to the error message set on the store.
+ * Renders an element that shows an error message. The `children` will
+ * automatically display the error message defined in the store.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {16}
  * const form = useFormStore({
  *   defaultValues: {
  *     email: "",
@@ -60,7 +60,14 @@ export interface FormErrorOptions<T extends As = "div"> extends CollectionItemOp
      */
     store?: FormStore;
     /**
-     * Name of the field.
+     * Name of the field associated with this error. This can either be a string
+     * or a reference to a field name from the
+     * [`names`](https://ariakit.org/reference/use-form-store#names) object in the
+     * store, for type safety.
+     * @example
+     * ```jsx
+     * <FormError name="password" />
+     * ```
      */
     name: StringLike;
 }

package/cjs/form/form-error.d.ts

@@ -25,11 +25,11 @@ import type { FormStore } from "./form-store.js";
  */
 export declare const useFormError: import("../utils/types.js").Hook<FormErrorOptions<"div">>;
 /**
- * Renders an element that displays an error message. The `children` will be
- * automatically set to the error message set on the store.
+ * Renders an element that shows an error message. The `children` will
+ * automatically display the error message defined in the store.
  * @see https://ariakit.org/components/form
  * @example
- * ```jsx
+ * ```jsx {16}
  * const form = useFormStore({
  *   defaultValues: {
  *     email: "",
@@ -60,7 +60,14 @@ export interface FormErrorOptions<T extends As = "div"> extends CollectionItemOp
      */
     store?: FormStore;
     /**
-     * Name of the field.
+     * Name of the field associated with this error. This can either be a string
+     * or a reference to a field name from the
+     * [`names`](https://ariakit.org/reference/use-form-store#names) object in the
+     * store, for type safety.
+     * @example
+     * ```jsx
+     * <FormError name="password" />
+     * ```
      */
     name: StringLike;
 }

package/cjs/form/form-field.cjs

@@ -1,16 +1,31 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-
-var _VCDQISP7cjs = require('../__chunks/VCDQISP7.cjs');
+var _N3XK7EAHcjs = require('../__chunks/N3XK7EAH.cjs');
 require('../__chunks/FROYTN4B.cjs');
 require('../__chunks/R5A2WTWB.cjs');
 require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+
+
+
+
+var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
+// src/form/form-field.ts
+var useFormField = _RNZNGEL4cjs.createHook.call(void 0, (props) => {
+  return _N3XK7EAHcjs.useFormControl.call(void 0, props);
+});
+var FormField = _RNZNGEL4cjs.createMemoComponent.call(void 0, (props) => {
+  const htmlProps = useFormField(props);
+  return _RNZNGEL4cjs.createElement.call(void 0, "input", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  FormField.displayName = "FormField";
+}
+
 
 
-exports.FormField = _VCDQISP7cjs.FormField; exports.useFormField = _VCDQISP7cjs.useFormField;
+exports.FormField = FormField; exports.useFormField = useFormField;