@ariakit/react-core 0.3.14 → 0.4.0

package/esm/disclosure/disclosure.d.ts

@@ -1,8 +1,10 @@
-import type { MouseEvent } from "react";
+import type { ElementType, MouseEvent } from "react";
 import type { BooleanOrCallback } from "@ariakit/core/utils/types";
 import type { ButtonOptions } from "../button/button.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { DisclosureStore } from "./disclosure-store.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Disclosure` component.
  * @see https://ariakit.org/components/disclosure
@@ -14,7 +16,7 @@ import type { DisclosureStore } from "./disclosure-store.js";
  * <DisclosureContent store={store}>Content</DisclosureContent>
  * ```
  */
-export declare const useDisclosure: import("../utils/types.js").Hook<DisclosureOptions<"button">>;
+export declare const useDisclosure: import("../utils/types.js").Hook<"button", DisclosureOptions<"button">>;
 /**
  * Renders an element that controls the visibility of a
  * [`DisclosureContent`](https://ariakit.org/reference/disclosure-content)
@@ -28,8 +30,8 @@ export declare const useDisclosure: import("../utils/types.js").Hook<DisclosureO
  * </DisclosureProvider>
  * ```
  */
-export declare const Disclosure: import("../utils/types.js").Component<DisclosureOptions<"button">>;
-export interface DisclosureOptions<T extends As = "button"> extends ButtonOptions<T> {
+export declare const Disclosure: (props: DisclosureProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface DisclosureOptions<T extends ElementType = TagName> extends ButtonOptions<T> {
     /**
      * Object returned by the
      * [`useDisclosureStore`](https://ariakit.org/reference/use-disclosure-store)
@@ -50,4 +52,5 @@ export interface DisclosureOptions<T extends As = "button"> extends ButtonOption
      */
     toggleOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
 }
-export type DisclosureProps<T extends As = "button"> = Props<DisclosureOptions<T>>;
+export type DisclosureProps<T extends ElementType = TagName> = Props<T, DisclosureOptions<T>>;
+export {};

package/esm/disclosure/disclosure.js

@@ -2,13 +2,13 @@
 import {
   Disclosure,
   useDisclosure
-} from "../__chunks/BHEJ6NUH.js";
-import "../__chunks/VDNZBO4W.js";
-import "../__chunks/NWCBQ4CV.js";
-import "../__chunks/OAYFXAQ2.js";
-import "../__chunks/KK7H3W2B.js";
+} from "../__chunks/TNUQLYBS.js";
+import "../__chunks/ID4VKXL5.js";
+import "../__chunks/ZF6ZK5BT.js";
+import "../__chunks/J55AVALY.js";
+import "../__chunks/VA234QKF.js";
 import "../__chunks/SHA3WOPI.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/focus-trap/focus-trap-region.d.ts

@@ -1,4 +1,7 @@
-import type { As, Options, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Options, Props } from "../utils/types.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FocusTrapRegion` component.
  * @see https://ariakit.org/components/focus-trap-region
@@ -8,7 +11,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * <Role {...props} />
  * ```
  */
-export declare const useFocusTrapRegion: import("../utils/types.js").Hook<FocusTrapRegionOptions<"div">>;
+export declare const useFocusTrapRegion: import("../utils/types.js").Hook<"div", FocusTrapRegionOptions<"div">>;
 /**
  * Renders a wrapper element that traps the focus inside it when the
  * [`enabled`](https://ariakit.org/reference/focus-trap-region#enabled) prop is
@@ -23,12 +26,13 @@ export declare const useFocusTrapRegion: import("../utils/types.js").Hook<FocusT
  * </FocusTrapRegion>
  * ```
  */
-export declare const FocusTrapRegion: import("../utils/types.js").Component<FocusTrapRegionOptions<"div">>;
-export interface FocusTrapRegionOptions<T extends As = "div"> extends Options<T> {
+export declare const FocusTrapRegion: (props: FocusTrapRegionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FocusTrapRegionOptions<_T extends ElementType = TagName> extends Options {
     /**
      * If true, it will trap the focus in the region.
      * @default false
      */
     enabled?: boolean;
 }
-export type FocusTrapRegionProps<T extends As = "div"> = Props<FocusTrapRegionOptions<T>>;
+export type FocusTrapRegionProps<T extends ElementType = TagName> = Props<T, FocusTrapRegionOptions<T>>;
+export {};

package/esm/focus-trap/focus-trap-region.js

@@ -1,13 +1,13 @@
 "use client";
 import {
   FocusTrap
-} from "../__chunks/CHKJ74UC.js";
-import "../__chunks/BG6HZDS7.js";
+} from "../__chunks/WKWX2XLD.js";
+import "../__chunks/IFT5JEUU.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import {
   useMergeRefs,
   useWrapElement
@@ -22,9 +22,11 @@ import {
 // src/focus-trap/focus-trap-region.tsx
 import { useRef } from "react";
 import { getAllTabbableIn } from "@ariakit/core/utils/focus";
+import { removeUndefinedValues } from "@ariakit/core/utils/misc";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TagName = "div";
 var useFocusTrapRegion = createHook(
-  (_a) => {
+  function useFocusTrapRegion2(_a) {
     var _b = _a, { enabled = false } = _b, props = __objRest(_b, ["enabled"]);
     const ref = useRef(null);
     props = useWrapElement(
@@ -67,18 +69,13 @@ var useFocusTrapRegion = createHook(
     props = __spreadProps(__spreadValues({}, props), {
       ref: useMergeRefs(ref, props.ref)
     });
-    return props;
+    return removeUndefinedValues(props);
   }
 );
-var FocusTrapRegion = createComponent(
-  (props) => {
-    const htmlProps = useFocusTrapRegion(props);
-    return createElement("div", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  FocusTrapRegion.displayName = "FocusTrapRegion";
-}
+var FocusTrapRegion = forwardRef(function FocusTrapRegion2(props) {
+  const htmlProps = useFocusTrapRegion(props);
+  return createElement(TagName, htmlProps);
+});
 export {
   FocusTrapRegion,
   useFocusTrapRegion

package/esm/focus-trap/focus-trap.d.ts

@@ -1,5 +1,8 @@
-import type { As, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Props } from "../utils/types.js";
 import type { VisuallyHiddenOptions } from "../visually-hidden/visually-hidden.js";
+declare const TagName = "span";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FocusTrap` component.
  * @see https://ariakit.org/components/focus-trap
@@ -9,7 +12,7 @@ import type { VisuallyHiddenOptions } from "../visually-hidden/visually-hidden.j
  * <Role {...props} />
  * ```
  */
-export declare const useFocusTrap: import("../utils/types.js").Hook<FocusTrapOptions<"span">>;
+export declare const useFocusTrap: import("../utils/types.js").Hook<"span", FocusTrapOptions<"span">>;
 /**
  * Renders a focus trap element.
  * @see https://ariakit.org/components/focus-trap
@@ -18,6 +21,7 @@ export declare const useFocusTrap: import("../utils/types.js").Hook<FocusTrapOpt
  * <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>>;
+export declare const FocusTrap: (props: FocusTrapProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export type FocusTrapOptions<T extends ElementType = TagName> = VisuallyHiddenOptions<T>;
+export type FocusTrapProps<T extends ElementType = TagName> = Props<T, FocusTrapOptions<T>>;
+export {};

package/esm/focus-trap/focus-trap.js

@@ -2,9 +2,9 @@
 import {
   FocusTrap,
   useFocusTrap
-} from "../__chunks/CHKJ74UC.js";
-import "../__chunks/BG6HZDS7.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/WKWX2XLD.js";
+import "../__chunks/IFT5JEUU.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

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

@@ -1,4 +1,7 @@
-import type { As, Options, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Options, Props } from "../utils/types.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FocusableContainer` component.
  * @see https://ariakit.org/components/focusable
@@ -8,7 +11,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * <Role {...props} />
  * ```
  */
-export declare const useFocusableContainer: import("../utils/types.js").Hook<FocusableContainerOptions<"div">>;
+export declare const useFocusableContainer: import("../utils/types.js").Hook<"div", FocusableContainerOptions<"div">>;
 /**
  * Renders a div that wraps
  * [`Focusable`](https://ariakit.org/reference/focusable) components and
@@ -21,8 +24,8 @@ export declare const useFocusableContainer: import("../utils/types.js").Hook<Foc
  * </FocusableContainer>
  * ```
  */
-export declare const FocusableContainer: import("../utils/types.js").Component<FocusableContainerOptions<"div">>;
-export type FocusableContainerOptions<T extends As = "div"> = Options<T> & {
+export declare const FocusableContainer: (props: FocusableContainerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FocusableContainerOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Determines whether [`Focusable`](https://ariakit.org/reference/focusable)
      * elements inside the container should be automatically focused when the
@@ -31,5 +34,6 @@ export type FocusableContainerOptions<T extends As = "div"> = Options<T> & {
      * @default true
      */
     autoFocusOnShow?: boolean;
-};
-export type FocusableContainerProps<T extends As = "div"> = Props<FocusableContainerOptions<T>>;
+}
+export type FocusableContainerProps<T extends ElementType = TagName> = Props<T, FocusableContainerOptions<T>>;
+export {};

package/esm/focusable/focusable-container.js

@@ -2,9 +2,9 @@
 import {
   FocusableContainer,
   useFocusableContainer
-} from "../__chunks/HPP6CWMY.js";
+} from "../__chunks/WCIYB4YS.js";
 import "../__chunks/SHA3WOPI.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/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/esm/focusable/focusable.js

@@ -2,9 +2,9 @@
 import {
   Focusable,
   useFocusable
-} from "../__chunks/KK7H3W2B.js";
+} from "../__chunks/VA234QKF.js";
 import "../__chunks/SHA3WOPI.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/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/esm/form/form-checkbox.js

@@ -1,28 +1,29 @@
 "use client";
 import {
   useFormControl
-} from "../__chunks/4GO43MST.js";
+} from "../__chunks/SP3GKE3F.js";
 import {
   useFormContext
-} from "../__chunks/V4ZFXDFK.js";
+} from "../__chunks/GEIG6TES.js";
 import {
   useCheckboxStore
 } from "../__chunks/JIZ5C2JK.js";
 import {
   useCheckbox
-} from "../__chunks/3AHQ6JCP.js";
-import "../__chunks/VPR2WHQV.js";
+} from "../__chunks/3PDOEITM.js";
+import "../__chunks/EUN6HFWO.js";
 import "../__chunks/6XBVQI3K.js";
-import "../__chunks/NWCBQ4CV.js";
-import "../__chunks/UH3I23HL.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/KK7H3W2B.js";
+import "../__chunks/ZF6ZK5BT.js";
+import "../__chunks/7YKLTEOQ.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/VA234QKF.js";
 import "../__chunks/SHA3WOPI.js";
 import {
   createElement,
   createHook,
-  createMemoComponent
-} from "../__chunks/3ORBWXWF.js";
+  forwardRef,
+  memo
+} from "../__chunks/5M6RSQEC.js";
 import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
@@ -33,9 +34,22 @@ import {
 
 // src/form/form-checkbox.ts
 import { invariant } from "@ariakit/core/utils/misc";
+var TagName = "input";
 var useFormCheckbox = createHook(
-  (_a) => {
-    var _b = _a, { store, name: nameProp, value, checked, defaultChecked } = _b, props = __objRest(_b, ["store", "name", "value", "checked", "defaultChecked"]);
+  function useFormCheckbox2(_a) {
+    var _b = _a, {
+      store,
+      name: nameProp,
+      value,
+      checked,
+      defaultChecked
+    } = _b, props = __objRest(_b, [
+      "store",
+      "name",
+      "value",
+      "checked",
+      "defaultChecked"
+    ]);
     const context = useFormContext();
     store = store || context;
     invariant(
@@ -56,15 +70,12 @@ var useFormCheckbox = createHook(
     return props;
   }
 );
-var FormCheckbox = createMemoComponent(
-  (props) => {
+var FormCheckbox = memo(
+  forwardRef(function FormCheckbox2(props) {
     const htmlProps = useFormCheckbox(props);
-    return createElement("input", htmlProps);
-  }
+    return createElement(TagName, htmlProps);
+  })
 );
-if (process.env.NODE_ENV !== "production") {
-  FormCheckbox.displayName = "FormCheckbox";
-}
 export {
   FormCheckbox,
   useFormCheckbox

package/esm/form/form-context.js

@@ -5,9 +5,9 @@ import {
   useFormContext,
   useFormProviderContext,
   useFormScopedContext
-} from "../__chunks/V4ZFXDFK.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/GEIG6TES.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/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/esm/form/form-control.js

@@ -2,11 +2,11 @@
 import {
   FormControl,
   useFormControl
-} from "../__chunks/4GO43MST.js";
-import "../__chunks/V4ZFXDFK.js";
-import "../__chunks/UH3I23HL.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/SP3GKE3F.js";
+import "../__chunks/GEIG6TES.js";
+import "../__chunks/7YKLTEOQ.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/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/esm/form/form-description.js

@@ -1,16 +1,17 @@
 "use client";
 import {
   useFormContext
-} from "../__chunks/V4ZFXDFK.js";
+} from "../__chunks/GEIG6TES.js";
 import {
   useCollectionItem
-} from "../__chunks/UH3I23HL.js";
-import "../__chunks/4UUKJZ4V.js";
+} from "../__chunks/7YKLTEOQ.js";
+import "../__chunks/MADQZZRL.js";
 import {
   createElement,
   createHook,
-  createMemoComponent
-} from "../__chunks/3ORBWXWF.js";
+  forwardRef,
+  memo
+} from "../__chunks/5M6RSQEC.js";
 import {
   useId,
   useMergeRefs
@@ -25,9 +26,18 @@ import {
 // src/form/form-description.ts
 import { useCallback, useRef } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
+var TagName = "div";
 var useFormDescription = createHook(
-  (_a) => {
-    var _b = _a, { store, name: nameProp, getItem: getItemProp } = _b, props = __objRest(_b, ["store", "name", "getItem"]);
+  function useFormDescription2(_a) {
+    var _b = _a, {
+      store,
+      name: nameProp,
+      getItem: getItemProp
+    } = _b, props = __objRest(_b, [
+      "store",
+      "name",
+      "getItem"
+    ]);
     const context = useFormContext();
     store = store || context;
     invariant(
@@ -60,15 +70,12 @@ var useFormDescription = createHook(
     return props;
   }
 );
-var FormDescription = createMemoComponent(
-  (props) => {
+var FormDescription = memo(
+  forwardRef(function FormDescription2(props) {
     const htmlProps = useFormDescription(props);
-    return createElement("div", htmlProps);
-  }
+    return createElement(TagName, htmlProps);
+  })
 );
-if (process.env.NODE_ENV !== "production") {
-  FormDescription.displayName = "FormDescription";
-}
 export {
   FormDescription,
   useFormDescription

package/esm/form/form-error.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
@@ -23,7 +26,7 @@ import type { FormStore } from "./form-store.js";
  * </Form>
  * ```
  */
-export declare const useFormError: import("../utils/types.js").Hook<FormErrorOptions<"div">>;
+export declare const useFormError: import("../utils/types.js").Hook<"div", FormErrorOptions<"div">>;
 /**
  * Renders an element that shows an error message. The `children` will
  * automatically display the error message defined in the store.
@@ -49,8 +52,8 @@ export declare const useFormError: import("../utils/types.js").Hook<FormErrorOpt
  * </Form>
  * ```
  */
-export declare const FormError: import("../utils/types.js").Component<FormErrorOptions<"div">>;
-export interface FormErrorOptions<T extends As = "div"> extends CollectionItemOptions<T> {
+export declare const FormError: (props: FormErrorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormErrorOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
     /**
      * Object returned by the
      * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
@@ -71,4 +74,5 @@ export interface FormErrorOptions<T extends As = "div"> extends CollectionItemOp
      */
     name: StringLike;
 }
-export type FormErrorProps<T extends As = "div"> = Props<FormErrorOptions<T>>;
+export type FormErrorProps<T extends ElementType = TagName> = Props<T, FormErrorOptions<T>>;
+export {};