@ariakit/react-core 0.3.14 → 0.4.0

package/cjs/focusable/focusable.d.cts

@@ -1,6 +1,8 @@
-import type { SyntheticEvent } from "react";
+import type { ElementType, SyntheticEvent } from "react";
 import type { BivariantCallback } from "@ariakit/core/utils/types";
-import type { As, Options, Props } from "../utils/types.js";
+import type { Options, Props } from "../utils/types.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Focusable` component.
  * @see https://ariakit.org/components/focusable
@@ -10,7 +12,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * <Role {...props}>Focusable</Role>
  * ```
  */
-export declare const useFocusable: import("../utils/types.js").Hook<FocusableOptions<"div">>;
+export declare const useFocusable: import("../utils/types.js").Hook<"div", FocusableOptions<"div">>;
 /**
  * Renders a focusable element. When this element gains keyboard focus, it gets
  * a
@@ -32,8 +34,8 @@ export declare const useFocusable: import("../utils/types.js").Hook<FocusableOpt
  * <Focusable>Focusable</Focusable>
  * ```
  */
-export declare const Focusable: import("../utils/types.js").Component<FocusableOptions<"div">>;
-export interface FocusableOptions<T extends As = "div"> extends Options<T> {
+export declare const Focusable: (props: FocusableProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FocusableOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Determines if the element is disabled. This sets the `aria-disabled`
      * attribute accordingly, enabling support for all elements, including those
@@ -75,10 +77,10 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
      * 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
+     * [`Focusable`](https://ariakit.org/reference/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),
@@ -121,4 +123,5 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
      */
     onFocusVisible?: BivariantCallback<(event: SyntheticEvent<HTMLElement>) => void>;
 }
-export type FocusableProps<T extends As = "div"> = Props<FocusableOptions<T>>;
+export type FocusableProps<T extends ElementType = TagName> = Props<T, FocusableOptions<T>>;
+export {};

package/cjs/focusable/focusable.d.ts

@@ -1,6 +1,8 @@
-import type { SyntheticEvent } from "react";
+import type { ElementType, SyntheticEvent } from "react";
 import type { BivariantCallback } from "@ariakit/core/utils/types";
-import type { As, Options, Props } from "../utils/types.js";
+import type { Options, Props } from "../utils/types.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Focusable` component.
  * @see https://ariakit.org/components/focusable
@@ -10,7 +12,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * <Role {...props}>Focusable</Role>
  * ```
  */
-export declare const useFocusable: import("../utils/types.js").Hook<FocusableOptions<"div">>;
+export declare const useFocusable: import("../utils/types.js").Hook<"div", FocusableOptions<"div">>;
 /**
  * Renders a focusable element. When this element gains keyboard focus, it gets
  * a
@@ -32,8 +34,8 @@ export declare const useFocusable: import("../utils/types.js").Hook<FocusableOpt
  * <Focusable>Focusable</Focusable>
  * ```
  */
-export declare const Focusable: import("../utils/types.js").Component<FocusableOptions<"div">>;
-export interface FocusableOptions<T extends As = "div"> extends Options<T> {
+export declare const Focusable: (props: FocusableProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FocusableOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Determines if the element is disabled. This sets the `aria-disabled`
      * attribute accordingly, enabling support for all elements, including those
@@ -75,10 +77,10 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
      * 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
+     * [`Focusable`](https://ariakit.org/reference/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),
@@ -121,4 +123,5 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
      */
     onFocusVisible?: BivariantCallback<(event: SyntheticEvent<HTMLElement>) => void>;
 }
-export type FocusableProps<T extends As = "div"> = Props<FocusableOptions<T>>;
+export type FocusableProps<T extends ElementType = TagName> = Props<T, FocusableOptions<T>>;
+export {};

package/cjs/form/form-checkbox.cjs

@@ -1,28 +1,29 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _N3XK7EAHcjs = require('../__chunks/N3XK7EAH.cjs');
+var _PTCYSU6Gcjs = require('../__chunks/PTCYSU6G.cjs');
 
 
-var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
+var _F6NX4XH2cjs = require('../__chunks/F6NX4XH2.cjs');
 
 
 var _VPQQSYH7cjs = require('../__chunks/VPQQSYH7.cjs');
 
 
-var _BBS4RP44cjs = require('../__chunks/BBS4RP44.cjs');
-require('../__chunks/63UPRTFZ.cjs');
+var _OUTZPTLJcjs = require('../__chunks/OUTZPTLJ.cjs');
+require('../__chunks/OIGGI6DI.cjs');
 require('../__chunks/ERFHNHON.cjs');
-require('../__chunks/DAJUUBUI.cjs');
-require('../__chunks/R5A2WTWB.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/ZMTZTMRS.cjs');
+require('../__chunks/XWCNZ2IP.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/5QD55NKL.cjs');
 require('../__chunks/75KXQZJX.cjs');
 
 
 
 
-var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+
+var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
@@ -33,10 +34,23 @@ var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/form/form-checkbox.ts
 var _misc = require('@ariakit/core/utils/misc');
-var useFormCheckbox = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
-    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, );
+var TagName = "input";
+var useFormCheckbox = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useFormCheckbox2(_a) {
+    var _b = _a, {
+      store,
+      name: nameProp,
+      value,
+      checked,
+      defaultChecked
+    } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
+      "store",
+      "name",
+      "value",
+      "checked",
+      "defaultChecked"
+    ]);
+    const context = _F6NX4XH2cjs.useFormContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -47,8 +61,8 @@ var useFormCheckbox = _RNZNGEL4cjs.createHook.call(void 0,
       value: store.useValue(name),
       setValue: (value2) => store == null ? void 0 : store.setValue(name, value2)
     });
-    props = _BBS4RP44cjs.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, {
+    props = _OUTZPTLJcjs.useCheckbox.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store: checkboxStore, value, checked }, props));
+    props = _PTCYSU6Gcjs.useFormControl.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       name,
       "aria-labelledby": void 0
@@ -56,15 +70,12 @@ var useFormCheckbox = _RNZNGEL4cjs.createHook.call(void 0,
     return props;
   }
 );
-var FormCheckbox = _RNZNGEL4cjs.createMemoComponent.call(void 0, 
-  (props) => {
+var FormCheckbox = _Q67LZMDTcjs.memo.call(void 0, 
+  _Q67LZMDTcjs.forwardRef.call(void 0, function FormCheckbox2(props) {
     const htmlProps = useFormCheckbox(props);
-    return _RNZNGEL4cjs.createElement.call(void 0, "input", htmlProps);
-  }
+    return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+  })
 );
-if (process.env.NODE_ENV !== "production") {
-  FormCheckbox.displayName = "FormCheckbox";
-}
 
 
 

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { CheckboxOptions } from "../checkbox/checkbox.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { FormControlOptions } from "./form-control.js";
+declare const TagName = "input";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormCheckbox` component.
  * @see https://ariakit.org/components/form
@@ -16,7 +19,7 @@ import type { FormControlOptions } from "./form-control.js";
  * </Form>
  * ```
  */
-export declare const useFormCheckbox: import("../utils/types.js").Hook<FormCheckboxOptions<"input">>;
+export declare const useFormCheckbox: import("../utils/types.js").Hook<"input", FormCheckboxOptions<"input">>;
 /**
  * Renders a checkbox input as a form control, representing a boolean, string,
  * number, or array value.
@@ -37,7 +40,8 @@ export declare const useFormCheckbox: import("../utils/types.js").Hook<FormCheck
  * </Form>
  * ```
  */
-export declare const FormCheckbox: import("../utils/types.js").Component<FormCheckboxOptions<"input">>;
-export interface FormCheckboxOptions<T extends As = "input"> extends FormControlOptions<T>, Omit<CheckboxOptions<T>, "store" | "name"> {
+export declare const FormCheckbox: (props: FormCheckboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormCheckboxOptions<T extends ElementType = TagName> extends FormControlOptions<T>, Omit<CheckboxOptions<T>, "store" | "name"> {
 }
-export type FormCheckboxProps<T extends As = "input"> = Props<FormCheckboxOptions<T>>;
+export type FormCheckboxProps<T extends ElementType = TagName> = Props<T, FormCheckboxOptions<T>>;
+export {};

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { CheckboxOptions } from "../checkbox/checkbox.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { FormControlOptions } from "./form-control.js";
+declare const TagName = "input";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormCheckbox` component.
  * @see https://ariakit.org/components/form
@@ -16,7 +19,7 @@ import type { FormControlOptions } from "./form-control.js";
  * </Form>
  * ```
  */
-export declare const useFormCheckbox: import("../utils/types.js").Hook<FormCheckboxOptions<"input">>;
+export declare const useFormCheckbox: import("../utils/types.js").Hook<"input", FormCheckboxOptions<"input">>;
 /**
  * Renders a checkbox input as a form control, representing a boolean, string,
  * number, or array value.
@@ -37,7 +40,8 @@ export declare const useFormCheckbox: import("../utils/types.js").Hook<FormCheck
  * </Form>
  * ```
  */
-export declare const FormCheckbox: import("../utils/types.js").Component<FormCheckboxOptions<"input">>;
-export interface FormCheckboxOptions<T extends As = "input"> extends FormControlOptions<T>, Omit<CheckboxOptions<T>, "store" | "name"> {
+export declare const FormCheckbox: (props: FormCheckboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormCheckboxOptions<T extends ElementType = TagName> extends FormControlOptions<T>, Omit<CheckboxOptions<T>, "store" | "name"> {
 }
-export type FormCheckboxProps<T extends As = "input"> = Props<FormCheckboxOptions<T>>;
+export type FormCheckboxProps<T extends ElementType = TagName> = Props<T, FormCheckboxOptions<T>>;
+export {};

package/cjs/form/form-context.cjs

@@ -5,9 +5,9 @@
 
 
 
-var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _F6NX4XH2cjs = require('../__chunks/F6NX4XH2.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
@@ -17,4 +17,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.FormContextProvider = _FROYTN4Bcjs.FormContextProvider; exports.FormScopedContextProvider = _FROYTN4Bcjs.FormScopedContextProvider; exports.useFormContext = _FROYTN4Bcjs.useFormContext; exports.useFormProviderContext = _FROYTN4Bcjs.useFormProviderContext; exports.useFormScopedContext = _FROYTN4Bcjs.useFormScopedContext;
+exports.FormContextProvider = _F6NX4XH2cjs.FormContextProvider; exports.FormScopedContextProvider = _F6NX4XH2cjs.FormScopedContextProvider; exports.useFormContext = _F6NX4XH2cjs.useFormContext; exports.useFormProviderContext = _F6NX4XH2cjs.useFormProviderContext; exports.useFormScopedContext = _F6NX4XH2cjs.useFormScopedContext;

package/cjs/form/form-control.cjs

@@ -2,15 +2,15 @@
 
 
 
-var _N3XK7EAHcjs = require('../__chunks/N3XK7EAH.cjs');
-require('../__chunks/FROYTN4B.cjs');
-require('../__chunks/R5A2WTWB.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _PTCYSU6Gcjs = require('../__chunks/PTCYSU6G.cjs');
+require('../__chunks/F6NX4XH2.cjs');
+require('../__chunks/XWCNZ2IP.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.FormControl = _N3XK7EAHcjs.FormControl; exports.useFormControl = _N3XK7EAHcjs.useFormControl;
+exports.FormControl = _PTCYSU6Gcjs.FormControl; exports.useFormControl = _PTCYSU6Gcjs.useFormControl;

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

@@ -1,9 +1,11 @@
-import type { FocusEvent } from "react";
+import type { ElementType, 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 { Props } from "../utils/types.js";
 import type { FormStore } from "./form-store.js";
+declare const TagName = "input";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormControl` component. Unlike `useFormInput`,
  * this hook doesn't automatically returns the `value` and `onChange` props.
@@ -28,7 +30,7 @@ import type { FormStore } from "./form-store.js";
  * </Form>
  * ```
  */
-export declare const useFormControl: import("../utils/types.js").Hook<FormControlOptions<"input">>;
+export declare const useFormControl: import("../utils/types.js").Hook<"input", FormControlOptions<"input">>;
 /**
  * Abstract component that renders a form control. Unlike
  * [`FormInput`](https://ariakit.org/reference/form-input), this component
@@ -61,8 +63,8 @@ export declare const useFormControl: import("../utils/types.js").Hook<FormContro
  * </Form>
  * ```
  */
-export declare const FormControl: import("../utils/types.js").Component<FormControlOptions<"input">>;
-export interface FormControlOptions<T extends As = "input"> extends CollectionItemOptions<T> {
+export declare const FormControl: (props: FormControlProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormControlOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
     /**
      * Object returned by the
      * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
@@ -90,4 +92,5 @@ export interface FormControlOptions<T extends As = "input"> extends CollectionIt
      */
     touchOnBlur?: BooleanOrCallback<FocusEvent>;
 }
-export type FormControlProps<T extends As = "input"> = Props<FormControlOptions<T>>;
+export type FormControlProps<T extends ElementType = TagName> = Props<T, FormControlOptions<T>>;
+export {};

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

@@ -1,9 +1,11 @@
-import type { FocusEvent } from "react";
+import type { ElementType, 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 { Props } from "../utils/types.js";
 import type { FormStore } from "./form-store.js";
+declare const TagName = "input";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormControl` component. Unlike `useFormInput`,
  * this hook doesn't automatically returns the `value` and `onChange` props.
@@ -28,7 +30,7 @@ import type { FormStore } from "./form-store.js";
  * </Form>
  * ```
  */
-export declare const useFormControl: import("../utils/types.js").Hook<FormControlOptions<"input">>;
+export declare const useFormControl: import("../utils/types.js").Hook<"input", FormControlOptions<"input">>;
 /**
  * Abstract component that renders a form control. Unlike
  * [`FormInput`](https://ariakit.org/reference/form-input), this component
@@ -61,8 +63,8 @@ export declare const useFormControl: import("../utils/types.js").Hook<FormContro
  * </Form>
  * ```
  */
-export declare const FormControl: import("../utils/types.js").Component<FormControlOptions<"input">>;
-export interface FormControlOptions<T extends As = "input"> extends CollectionItemOptions<T> {
+export declare const FormControl: (props: FormControlProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormControlOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
     /**
      * Object returned by the
      * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
@@ -90,4 +92,5 @@ export interface FormControlOptions<T extends As = "input"> extends CollectionIt
      */
     touchOnBlur?: BooleanOrCallback<FocusEvent>;
 }
-export type FormControlProps<T extends As = "input"> = Props<FormControlOptions<T>>;
+export type FormControlProps<T extends ElementType = TagName> = Props<T, FormControlOptions<T>>;
+export {};

package/cjs/form/form-description.cjs

@@ -1,16 +1,17 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
+var _F6NX4XH2cjs = require('../__chunks/F6NX4XH2.cjs');
 
 
-var _R5A2WTWBcjs = require('../__chunks/R5A2WTWB.cjs');
-require('../__chunks/BZTDJIVT.cjs');
+var _XWCNZ2IPcjs = require('../__chunks/XWCNZ2IP.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
 
 
 
 
-var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+
+var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
 
 
 
@@ -25,10 +26,19 @@ var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 // src/form/form-description.ts
 var _react = require('react');
 var _misc = require('@ariakit/core/utils/misc');
-var useFormDescription = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
-    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, );
+var TagName = "div";
+var useFormDescription = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useFormDescription2(_a) {
+    var _b = _a, {
+      store,
+      name: nameProp,
+      getItem: getItemProp
+    } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
+      "store",
+      "name",
+      "getItem"
+    ]);
+    const context = _F6NX4XH2cjs.useFormContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -56,19 +66,16 @@ var useFormDescription = _RNZNGEL4cjs.createHook.call(void 0,
     }, props), {
       ref: _EO6LS72Hcjs.useMergeRefs.call(void 0, ref, props.ref)
     });
-    props = _R5A2WTWBcjs.useCollectionItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props), { getItem }));
+    props = _XWCNZ2IPcjs.useCollectionItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props), { getItem }));
     return props;
   }
 );
-var FormDescription = _RNZNGEL4cjs.createMemoComponent.call(void 0, 
-  (props) => {
+var FormDescription = _Q67LZMDTcjs.memo.call(void 0, 
+  _Q67LZMDTcjs.forwardRef.call(void 0, function FormDescription2(props) {
     const htmlProps = useFormDescription(props);
-    return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
-  }
+    return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+  })
 );
-if (process.env.NODE_ENV !== "production") {
-  FormDescription.displayName = "FormDescription";
-}
 
 
 

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

@@ -1,7 +1,10 @@
+import type { ElementType } from "react";
 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 { Props } from "../utils/types.js";
 import type { FormStore } from "./form-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormDescription` component.
  * @see https://ariakit.org/components/form
@@ -16,7 +19,7 @@ import type { FormStore } from "./form-store.js";
  * </Form>
  * ```
  */
-export declare const useFormDescription: import("../utils/types.js").Hook<FormDescriptionOptions<"div">>;
+export declare const useFormDescription: import("../utils/types.js").Hook<"div", FormDescriptionOptions<"div">>;
 /**
  * Renders a description element for a form field, which will automatically
  * receive an `aria-describedby` attribute pointing to this element.
@@ -38,8 +41,8 @@ export declare const useFormDescription: import("../utils/types.js").Hook<FormDe
  * </Form>
  * ```
  */
-export declare const FormDescription: import("../utils/types.js").Component<FormDescriptionOptions<"div">>;
-export interface FormDescriptionOptions<T extends As = "div"> extends CollectionItemOptions<T> {
+export declare const FormDescription: (props: FormDescriptionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormDescriptionOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
     /**
      * Object returned by the
      * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
@@ -62,4 +65,5 @@ export interface FormDescriptionOptions<T extends As = "div"> extends Collection
      */
     name: StringLike;
 }
-export type FormDescriptionProps<T extends As = "div"> = Props<FormDescriptionOptions<T>>;
+export type FormDescriptionProps<T extends ElementType = TagName> = Props<T, FormDescriptionOptions<T>>;
+export {};

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

@@ -1,7 +1,10 @@
+import type { ElementType } from "react";
 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 { Props } from "../utils/types.js";
 import type { FormStore } from "./form-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormDescription` component.
  * @see https://ariakit.org/components/form
@@ -16,7 +19,7 @@ import type { FormStore } from "./form-store.js";
  * </Form>
  * ```
  */
-export declare const useFormDescription: import("../utils/types.js").Hook<FormDescriptionOptions<"div">>;
+export declare const useFormDescription: import("../utils/types.js").Hook<"div", FormDescriptionOptions<"div">>;
 /**
  * Renders a description element for a form field, which will automatically
  * receive an `aria-describedby` attribute pointing to this element.
@@ -38,8 +41,8 @@ export declare const useFormDescription: import("../utils/types.js").Hook<FormDe
  * </Form>
  * ```
  */
-export declare const FormDescription: import("../utils/types.js").Component<FormDescriptionOptions<"div">>;
-export interface FormDescriptionOptions<T extends As = "div"> extends CollectionItemOptions<T> {
+export declare const FormDescription: (props: FormDescriptionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormDescriptionOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
     /**
      * Object returned by the
      * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
@@ -62,4 +65,5 @@ export interface FormDescriptionOptions<T extends As = "div"> extends Collection
      */
     name: StringLike;
 }
-export type FormDescriptionProps<T extends As = "div"> = Props<FormDescriptionOptions<T>>;
+export type FormDescriptionProps<T extends ElementType = TagName> = Props<T, FormDescriptionOptions<T>>;
+export {};

package/cjs/form/form-error.cjs

@@ -1,16 +1,17 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
+var _F6NX4XH2cjs = require('../__chunks/F6NX4XH2.cjs');
 
 
-var _R5A2WTWBcjs = require('../__chunks/R5A2WTWB.cjs');
-require('../__chunks/BZTDJIVT.cjs');
+var _XWCNZ2IPcjs = require('../__chunks/XWCNZ2IP.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
 
 
 
 
-var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+
+var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
 
 
 
@@ -25,10 +26,19 @@ var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 // src/form/form-error.ts
 var _react = require('react');
 var _misc = require('@ariakit/core/utils/misc');
-var useFormError = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
-    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, );
+var TagName = "div";
+var useFormError = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useFormError2(_a) {
+    var _b = _a, {
+      store,
+      name: nameProp,
+      getItem: getItemProp
+    } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
+      "store",
+      "name",
+      "getItem"
+    ]);
+    const context = _F6NX4XH2cjs.useFormContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -62,17 +72,16 @@ var useFormError = _RNZNGEL4cjs.createHook.call(void 0,
     }, props), {
       ref: _EO6LS72Hcjs.useMergeRefs.call(void 0, ref, props.ref)
     });
-    props = _R5A2WTWBcjs.useCollectionItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props), { getItem }));
+    props = _XWCNZ2IPcjs.useCollectionItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props), { getItem }));
     return props;
   }
 );
-var FormError = _RNZNGEL4cjs.createMemoComponent.call(void 0, (props) => {
-  const htmlProps = useFormError(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
-});
-if (process.env.NODE_ENV !== "production") {
-  FormError.displayName = "FormError";
-}
+var FormError = _Q67LZMDTcjs.memo.call(void 0, 
+  _Q67LZMDTcjs.forwardRef.call(void 0, function FormError2(props) {
+    const htmlProps = useFormError(props);
+    return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+  })
+);