@ariakit/react-core 0.3.4 → 0.3.6

package/cjs/focus-trap/focus-trap-region.d.cts

@@ -0,0 +1,32 @@
+import type { As, Options, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `FocusTrapRegion` component.
+ * @see https://ariakit.org/components/focus-trap-region
+ * @example
+ * ```jsx
+ * const props = useFocusTrapRegion();
+ * <Role {...props} />
+ * ```
+ */
+export declare const useFocusTrapRegion: import("../utils/types.js").Hook<FocusTrapRegionOptions<"div">>;
+/**
+ * Renders a focus trap region element.
+ * @see https://ariakit.org/components/focus-trap-region
+ * @example
+ * ```jsx
+ * <FocusTrapRegion>
+ *  <Button>click me</Button>
+ *  <Button>trap focus</Button>
+ *  <Button disabled>disabled Button</Button>
+ * </FocusTrapRegion>
+ * ```
+ */
+export declare const FocusTrapRegion: import("../utils/types.js").Component<FocusTrapRegionOptions<"div">>;
+export interface FocusTrapRegionOptions<T extends As = "div"> extends Options<T> {
+    /**
+     * If true, it will trap the focus in the region.
+     * @default false
+     */
+    enabled?: boolean;
+}
+export type FocusTrapRegionProps<T extends As = "div"> = Props<FocusTrapRegionOptions<T>>;

package/cjs/focus-trap/focus-trap.cjs

@@ -1,13 +1,14 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _CKEXTQ2Scjs = require('../__chunks/CKEXTQ2S.cjs');
-require('../__chunks/KSFAO77E.cjs');
-require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
 
+var _XB3G2EO2cjs = require('../__chunks/XB3G2EO2.cjs');
+require('../__chunks/R66IWXK6.cjs');
+require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+require('../__chunks/AV6KTKLE.cjs');
 
 
-exports.FocusTrap = _CKEXTQ2Scjs.FocusTrap; exports.useFocusTrap = _CKEXTQ2Scjs.useFocusTrap;
+
+exports.FocusTrap = _XB3G2EO2cjs.FocusTrap; exports.useFocusTrap = _XB3G2EO2cjs.useFocusTrap;

package/cjs/focus-trap/focus-trap.d.cts

@@ -0,0 +1,23 @@
+import type { As, Props } from "../utils/types.js";
+import type { VisuallyHiddenOptions } from "../visually-hidden/visually-hidden.js";
+/**
+ * Returns props to create a `FocusTrap` component.
+ * @see https://ariakit.org/components/focus-trap
+ * @example
+ * ```jsx
+ * const props = useFocusTrap();
+ * <Role {...props} />
+ * ```
+ */
+export declare const useFocusTrap: import("../utils/types.js").Hook<FocusTrapOptions<"span">>;
+/**
+ * Renders a focus trap element.
+ * @see https://ariakit.org/components/focus-trap
+ * @example
+ * ```jsx
+ * <FocusTrap onFocus={focusSomethingElse} />
+ * ```
+ */
+export declare const FocusTrap: import("../utils/types.js").Component<FocusTrapOptions<"span">>;
+export type FocusTrapOptions<T extends As = "span"> = VisuallyHiddenOptions<T>;
+export type FocusTrapProps<T extends As = "span"> = Props<FocusTrapOptions<T>>;

package/cjs/focusable/focusable-container.cjs

@@ -1,13 +1,14 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _A6H7IIHJcjs = require('../__chunks/A6H7IIHJ.cjs');
-require('../__chunks/LHHW5ZQP.cjs');
-require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
 
+var _7566TIRWcjs = require('../__chunks/7566TIRW.cjs');
+require('../__chunks/75KXQZJX.cjs');
+require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+require('../__chunks/AV6KTKLE.cjs');
 
 
-exports.FocusableContainer = _A6H7IIHJcjs.FocusableContainer; exports.useFocusableContainer = _A6H7IIHJcjs.useFocusableContainer;
+
+exports.FocusableContainer = _7566TIRWcjs.FocusableContainer; exports.useFocusableContainer = _7566TIRWcjs.useFocusableContainer;

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

@@ -0,0 +1,33 @@
+import type { As, Options, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `FocusableContainer` component.
+ * @see https://ariakit.org/components/focusable
+ * @example
+ * ```jsx
+ * const props = useFocusableContainer();
+ * <Role {...props} />
+ * ```
+ */
+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.
+ * @see https://ariakit.org/components/focusable
+ * @example
+ * ```jsx
+ * <FocusableContainer autoFocusOnShow={false}>
+ *   <Focusable autoFocus />
+ * </FocusableContainer>
+ * ```
+ */
+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.
+     * @default true
+     */
+    autoFocusOnShow?: boolean;
+};
+export type FocusableContainerProps<T extends As = "div"> = Props<FocusableContainerOptions<T>>;

package/cjs/focusable/focusable-context.cjs

@@ -1,7 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-var _LHHW5ZQPcjs = require('../__chunks/LHHW5ZQP.cjs');
-require('../__chunks/72I2GWXF.cjs');
 
+var _75KXQZJXcjs = require('../__chunks/75KXQZJX.cjs');
+require('../__chunks/AV6KTKLE.cjs');
 
-exports.FocusableContext = _LHHW5ZQPcjs.FocusableContext;
+
+exports.FocusableContext = _75KXQZJXcjs.FocusableContext;

package/cjs/focusable/focusable-context.d.cts

@@ -0,0 +1 @@
+export declare const FocusableContext: import("react").Context<boolean>;

package/cjs/focusable/focusable.cjs

@@ -1,13 +1,14 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _GQAB4M3Bcjs = require('../__chunks/GQAB4M3B.cjs');
-require('../__chunks/LHHW5ZQP.cjs');
-require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
 
+var _Z3GCTNW4cjs = require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/75KXQZJX.cjs');
+require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+require('../__chunks/AV6KTKLE.cjs');
 
 
-exports.Focusable = _GQAB4M3Bcjs.Focusable; exports.useFocusable = _GQAB4M3Bcjs.useFocusable;
+
+exports.Focusable = _Z3GCTNW4cjs.Focusable; exports.useFocusable = _Z3GCTNW4cjs.useFocusable;

package/cjs/focusable/focusable.d.cts

@@ -0,0 +1,113 @@
+import type { SyntheticEvent } from "react";
+import type { BivariantCallback } from "@ariakit/core/utils/types";
+import type { As, Options, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `Focusable` component.
+ * @see https://ariakit.org/components/focusable
+ * @example
+ * ```jsx
+ * const props = useFocusable();
+ * <Role {...props}>Focusable</Role>
+ * ```
+ */
+export declare const useFocusable: import("../utils/types.js").Hook<FocusableOptions<"div">>;
+/**
+ * Renders a focusable element. When this element gains keyboard focus, it gets
+ * a
+ * [`data-focus-visible`](https://ariakit.org/guide/styling#data-focus-visible)
+ * attribute and triggers the
+ * [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible)
+ * prop.
+ *
+ * The `Focusable` component supports the
+ * [`disabled`](https://ariakit.org/reference/focusable#disabled) prop for all
+ * elements, even those not supporting the native `disabled` attribute. Disabled
+ * elements using the `Focusable` component may be still accessible via keyboard
+ * by using the the
+ * [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled)
+ * prop.
+ * @see https://ariakit.org/components/focusable
+ * @example
+ * ```jsx
+ * <Focusable>Focusable</Focusable>
+ * ```
+ */
+export declare const Focusable: import("../utils/types.js").Component<FocusableOptions<"div">>;
+export interface FocusableOptions<T extends As = "div"> extends Options<T> {
+    /**
+     * Determines if the element is disabled. This sets the `aria-disabled`
+     * attribute accordingly, enabling support for all elements, including those
+     * that don't support the native `disabled` attribute.
+     *
+     * This feature can be combined with the
+     * [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled)
+     * prop to make disabled elements still accessible via keyboard.
+     *
+     * Live examples:
+     * - [Submenu](https://ariakit.org/examples/menu-nested)
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Automatically focuses the element upon mounting, similar to the native
+     * `autoFocus` prop. This addresses an issue where the element with the native
+     * `autoFocus` attribute might receive focus before React effects are
+     * executed.
+     *
+     * The `autoFocus` prop can also be used with
+     * [Focusable](https://ariakit.org/components/focusable) elements within a
+     * [Dialog](https://ariakit.org/components/dialog) component, establishing the
+     * initial focus as the dialog opens.
+     *
+     * Live examples:
+     * - [Warning on Dialog
+     *   hide](https://ariakit.org/examples/dialog-hide-warning)
+     * - [Dialog with React
+     *   Router](https://ariakit.org/examples/dialog-react-router)
+     * - [Nested Dialog](https://ariakit.org/examples/dialog-nested)
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Determines if [Focusable](https://ariakit.org/components/focusable)
+     * features should be active on non-native focusable elements.
+     *
+     * **Note**: This prop only turns off the additional features provided by the
+     * [Focusable](https://ariakit.org/components/focusable) component. Non-native
+     * focusable elements will lose their focusability entirely. However, native
+     * focusable elements will retain their inherent focusability, but without
+     * added features such as improved
+     * [`autoFocus`](https://ariakit.org/reference/focusable#autofocus),
+     * [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled),
+     * [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible),
+     * etc.
+     * @default true
+     */
+    focusable?: boolean;
+    /**
+     * Indicates whether the element should be focusable even when it is
+     * [`disabled`](https://ariakit.org/reference/focusable#disabled).
+     *
+     * This is important when discoverability is a concern. For example:
+     *
+     * > A toolbar in an editor contains a set of special smart paste functions
+     * that are disabled when the clipboard is empty or when the function is not
+     * applicable to the current content of the clipboard. It could be helpful to
+     * keep the disabled buttons focusable if the ability to discover their
+     * functionality is primarily via their presence on the toolbar.
+     *
+     * Learn more on [Focusability of disabled
+     * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+     */
+    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.
+     *
+     * Live examples:
+     * - [Custom Checkbox](https://ariakit.org/examples/checkbox-custom)
+     */
+    onFocusVisible?: BivariantCallback<(event: SyntheticEvent) => void>;
+}
+export type FocusableProps<T extends As = "div"> = Props<FocusableOptions<T>>;

package/cjs/form/form-checkbox.cjs

@@ -1,53 +1,54 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-var _JJ22W2WScjs = require('../__chunks/JJ22W2WS.cjs');
 
+var _VCDQISP7cjs = require('../__chunks/VCDQISP7.cjs');
 
-var _VLI66TFLcjs = require('../__chunks/VLI66TFL.cjs');
 
+var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
 
-var _2H4Y2NEYcjs = require('../__chunks/2H4Y2NEY.cjs');
 
+var _BY6ER73Ucjs = require('../__chunks/BY6ER73U.cjs');
 
-var _ZIEW4CQOcjs = require('../__chunks/ZIEW4CQO.cjs');
-require('../__chunks/NER6RNCQ.cjs');
-require('../__chunks/FO6MB5HF.cjs');
-require('../__chunks/HWZH54NB.cjs');
-require('../__chunks/FMI5QF7N.cjs');
-require('../__chunks/NHZBX2RS.cjs');
-require('../__chunks/GQAB4M3B.cjs');
-require('../__chunks/LHHW5ZQP.cjs');
 
+var _5GQV7KPQcjs = require('../__chunks/5GQV7KPQ.cjs');
+require('../__chunks/63UPRTFZ.cjs');
+require('../__chunks/ERFHNHON.cjs');
+require('../__chunks/DAJUUBUI.cjs');
+require('../__chunks/R5A2WTWB.cjs');
+require('../__chunks/BZTDJIVT.cjs');
+require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/75KXQZJX.cjs');
 
 
 
-var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/EVNF7KMT.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
 
+var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/OALXXRFM.cjs');
+require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
 
 
-var _72I2GWXFcjs = require('../__chunks/72I2GWXF.cjs');
+
+var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/form/form-checkbox.ts
 var _misc = require('@ariakit/core/utils/misc');
-var useFormCheckbox = _Z5PUIG6Acjs.createHook.call(void 0, 
+var useFormCheckbox = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
-    var _b = _a, { store, name: nameProp, value, checked, defaultChecked } = _b, props = _72I2GWXFcjs.__objRest.call(void 0, _b, ["store", "name", "value", "checked", "defaultChecked"]);
-    const context = _VLI66TFLcjs.useFormContext.call(void 0, );
+    var _b = _a, { store, name: nameProp, value, checked, defaultChecked } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "name", "value", "checked", "defaultChecked"]);
+    const context = _FROYTN4Bcjs.useFormContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
       process.env.NODE_ENV !== "production" && "FormCheckbox must be wrapped in a Form component."
     );
     const name = `${nameProp}`;
-    const checkboxStore = _ZIEW4CQOcjs.useCheckboxStore.call(void 0, {
+    const checkboxStore = _5GQV7KPQcjs.useCheckboxStore.call(void 0, {
       value: store.useValue(name),
       setValue: (value2) => store == null ? void 0 : store.setValue(name, value2)
     });
-    props = _2H4Y2NEYcjs.useCheckbox.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, { store: checkboxStore, value, checked }, props));
-    props = _JJ22W2WScjs.useFormField.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {
+    props = _BY6ER73Ucjs.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, {
       store,
       name,
       "aria-labelledby": void 0
@@ -55,10 +56,10 @@ var useFormCheckbox = _Z5PUIG6Acjs.createHook.call(void 0,
     return props;
   }
 );
-var FormCheckbox = _Z5PUIG6Acjs.createMemoComponent.call(void 0, 
+var FormCheckbox = _RNZNGEL4cjs.createMemoComponent.call(void 0, 
   (props) => {
     const htmlProps = useFormCheckbox(props);
-    return _Z5PUIG6Acjs.createElement.call(void 0, "input", htmlProps);
+    return _RNZNGEL4cjs.createElement.call(void 0, "input", htmlProps);
   }
 );
 if (process.env.NODE_ENV !== "production") {

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

@@ -0,0 +1,41 @@
+import type { CheckboxOptions } from "../checkbox/checkbox.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormFieldOptions } from "./form-field.js";
+/**
+ * Returns props to create a `FormCheckbox` component.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { acceptTerms: false } });
+ * const props = useFormCheckbox({ store, name: store.names.acceptTerms });
+ * <Form store={store}>
+ *   <label>
+ *     <Role {...props} />
+ *     Accept terms
+ *   </label>
+ * </Form>
+ * ```
+ */
+export declare const useFormCheckbox: import("../utils/types.js").Hook<FormCheckboxOptions<"input">>;
+/**
+ * Renders a checkbox as a form field.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     acceptTerms: false,
+ *   },
+ * });
+ * <Form store={form}>
+ *   <label>
+ *     <FormCheckbox name={form.names.acceptTerms} />
+ *     Accept terms
+ *   </label>
+ * </Form>
+ * ```
+ */
+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 type FormCheckboxProps<T extends As = "input"> = Props<FormCheckboxOptions<T>>;

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

@@ -36,6 +36,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"> {
+export interface FormCheckboxOptions<T extends As = "input"> extends FormFieldOptions<T>, Omit<CheckboxOptions<T>, "store" | "name"> {
 }
 export type FormCheckboxProps<T extends As = "input"> = Props<FormCheckboxOptions<T>>;

package/cjs/form/form-context.cjs

@@ -1,19 +1,20 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
 
 
 
-var _VLI66TFLcjs = require('../__chunks/VLI66TFL.cjs');
-require('../__chunks/NHZBX2RS.cjs');
-require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
 
+var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
+require('../__chunks/BZTDJIVT.cjs');
+require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+require('../__chunks/AV6KTKLE.cjs');
 
 
 
 
 
-exports.FormContextProvider = _VLI66TFLcjs.FormContextProvider; exports.FormScopedContextProvider = _VLI66TFLcjs.FormScopedContextProvider; exports.useFormContext = _VLI66TFLcjs.useFormContext; exports.useFormProviderContext = _VLI66TFLcjs.useFormProviderContext; exports.useFormScopedContext = _VLI66TFLcjs.useFormScopedContext;
+
+exports.FormContextProvider = _FROYTN4Bcjs.FormContextProvider; exports.FormScopedContextProvider = _FROYTN4Bcjs.FormScopedContextProvider; exports.useFormContext = _FROYTN4Bcjs.useFormContext; exports.useFormProviderContext = _FROYTN4Bcjs.useFormProviderContext; exports.useFormScopedContext = _FROYTN4Bcjs.useFormScopedContext;

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

@@ -0,0 +1,19 @@
+import type { FormStore } from "./form-store.js";
+/**
+ * Returns the form store from the nearest form container.
+ * @example
+ * function FormInput() {
+ *   const store = useFormContext();
+ *
+ *   if (!store) {
+ *     throw new Error("FormInput must be wrapped in FormProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+export declare const useFormContext: () => FormStore | undefined;
+export declare const useFormScopedContext: (onlyScoped?: boolean) => FormStore | undefined;
+export declare const useFormProviderContext: () => FormStore | undefined;
+export declare const FormContextProvider: (props: import("react").ProviderProps<FormStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormScopedContextProvider: (props: import("react").ProviderProps<FormStore | undefined>) => import("react/jsx-runtime").JSX.Element;

package/cjs/form/form-description.cjs

@@ -1,44 +1,45 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-var _VLI66TFLcjs = require('../__chunks/VLI66TFL.cjs');
 
+var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
 
-var _FMI5QF7Ncjs = require('../__chunks/FMI5QF7N.cjs');
-require('../__chunks/NHZBX2RS.cjs');
 
+var _R5A2WTWBcjs = require('../__chunks/R5A2WTWB.cjs');
+require('../__chunks/BZTDJIVT.cjs');
 
 
 
-var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
 
+var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
 
 
-var _5WLTMVVQcjs = require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
 
+var _EO6LS72Hcjs = require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
 
 
 
-var _72I2GWXFcjs = require('../__chunks/72I2GWXF.cjs');
+
+var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/form/form-description.ts
 var _react = require('react');
 var _misc = require('@ariakit/core/utils/misc');
-var useFormDescription = _Z5PUIG6Acjs.createHook.call(void 0, 
+var useFormDescription = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
-    var _b = _a, { store, name: nameProp, getItem: getItemProp } = _b, props = _72I2GWXFcjs.__objRest.call(void 0, _b, ["store", "name", "getItem"]);
-    const context = _VLI66TFLcjs.useFormContext.call(void 0, );
+    var _b = _a, { store, name: nameProp, getItem: getItemProp } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "name", "getItem"]);
+    const context = _FROYTN4Bcjs.useFormContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
       process.env.NODE_ENV !== "production" && "FormDescription must be wrapped in a Form component."
     );
-    const id = _5WLTMVVQcjs.useId.call(void 0, props.id);
+    const id = _EO6LS72Hcjs.useId.call(void 0, props.id);
     const ref = _react.useRef.call(void 0, null);
     const name = `${nameProp}`;
     const getItem = _react.useCallback.call(void 0, 
       (item) => {
-        const nextItem = _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {}, item), {
+        const nextItem = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, item), {
           id: id || item.id,
           name,
           type: "description"
@@ -50,19 +51,19 @@ var useFormDescription = _Z5PUIG6Acjs.createHook.call(void 0,
       },
       [id, name, getItemProp]
     );
-    props = _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {
+    props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       id
     }, props), {
-      ref: _5WLTMVVQcjs.useMergeRefs.call(void 0, ref, props.ref)
+      ref: _EO6LS72Hcjs.useMergeRefs.call(void 0, ref, props.ref)
     });
-    props = _FMI5QF7Ncjs.useCollectionItem.call(void 0, _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, { store }, props), { getItem }));
+    props = _R5A2WTWBcjs.useCollectionItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props), { getItem }));
     return props;
   }
 );
-var FormDescription = _Z5PUIG6Acjs.createMemoComponent.call(void 0, 
+var FormDescription = _RNZNGEL4cjs.createMemoComponent.call(void 0, 
   (props) => {
     const htmlProps = useFormDescription(props);
-    return _Z5PUIG6Acjs.createElement.call(void 0, "div", htmlProps);
+    return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
   }
 );
 if (process.env.NODE_ENV !== "production") {

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

@@ -0,0 +1,54 @@
+import type { StringLike } from "@ariakit/core/form/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 `FormDescription` component.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { password: "" } });
+ * const props = useFormDescription({ store, name: store.names.password });
+ * <Form store={store}>
+ *   <FormLabel name={store.names.password}>Password</FormLabel>
+ *   <FormInput name={store.names.password} type="password" />
+ *   <Role {...props}>Password with at least 8 characters.</Role>
+ * </Form>
+ * ```
+ */
+export declare const useFormDescription: import("../utils/types.js").Hook<FormDescriptionOptions<"div">>;
+/**
+ * Renders a description element for a form field.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     password: "",
+ *   },
+ * });
+ * <Form store={form}>
+ *   <FormLabel name={form.names.password}>Password</FormLabel>
+ *   <FormInput name={form.names.password} type="password" />
+ *   <FormDescription name={form.names.password}>
+ *     Password with at least 8 characters.
+ *   </FormDescription>
+ * </Form>
+ * ```
+ */
+export declare const FormDescription: import("../utils/types.js").Component<FormDescriptionOptions<"div">>;
+export interface FormDescriptionOptions<T extends As = "div"> 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;
+    /**
+     * Name of the field.
+     */
+    name: StringLike;
+}
+export type FormDescriptionProps<T extends As = "div"> = Props<FormDescriptionOptions<T>>;