@ariakit/react-core 0.3.14 → 0.4.1

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/WAZE6NXP.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/VYNLQCY5.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/KSZPJCUA.js";
+import "../__chunks/7YKLTEOQ.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/WAZE6NXP.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 {};

package/esm/form/form-error.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-error.ts
 import { useCallback, useRef } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
+var TagName = "div";
 var useFormError = createHook(
-  (_a) => {
-    var _b = _a, { store, name: nameProp, getItem: getItemProp } = _b, props = __objRest(_b, ["store", "name", "getItem"]);
+  function useFormError2(_a) {
+    var _b = _a, {
+      store,
+      name: nameProp,
+      getItem: getItemProp
+    } = _b, props = __objRest(_b, [
+      "store",
+      "name",
+      "getItem"
+    ]);
     const context = useFormContext();
     store = store || context;
     invariant(
@@ -66,13 +76,12 @@ var useFormError = createHook(
     return props;
   }
 );
-var FormError = createMemoComponent((props) => {
-  const htmlProps = useFormError(props);
-  return createElement("div", htmlProps);
-});
-if (process.env.NODE_ENV !== "production") {
-  FormError.displayName = "FormError";
-}
+var FormError = memo(
+  forwardRef(function FormError2(props) {
+    const htmlProps = useFormError(props);
+    return createElement(TagName, htmlProps);
+  })
+);
 export {
   FormError,
   useFormError

package/esm/form/form-field.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 { FormControlOptions } from "./form-control.js";
+declare const TagName = "input";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormField` component. Unlike `useFormInput`, this
  * hook doesn't automatically returns the `value` and `onChange` props. This is
@@ -24,7 +27,7 @@ import type { FormControlOptions } from "./form-control.js";
  * </Form>
  * ```
  */
-export declare const useFormField: import("../utils/types.js").Hook<FormFieldOptions<"input">>;
+export declare const useFormField: import("../utils/types.js").Hook<"input", FormFieldOptions<"input">>;
 /**
  * Abstract component that renders a form field. Unlike
  * [`FormInput`](https://ariakit.org/reference/form-input), this component
@@ -60,7 +63,8 @@ export declare const useFormField: import("../utils/types.js").Hook<FormFieldOpt
  * </Form>
  * ```
  */
-export declare const FormField: import("../utils/types.js").Component<FormFieldOptions<"input">>;
-export interface FormFieldOptions<T extends As = "input"> extends FormControlOptions<T> {
+export declare const FormField: (props: FormFieldProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormFieldOptions<T extends ElementType = TagName> extends FormControlOptions<T> {
 }
-export type FormFieldProps<T extends As = "input"> = Props<FormFieldOptions<T>>;
+export type FormFieldProps<T extends ElementType = TagName> = Props<T, FormFieldOptions<T>>;
+export {};

package/esm/form/form-field.js

@@ -1,30 +1,33 @@
 "use client";
 import {
   useFormControl
-} from "../__chunks/4GO43MST.js";
-import "../__chunks/V4ZFXDFK.js";
-import "../__chunks/UH3I23HL.js";
-import "../__chunks/4UUKJZ4V.js";
+} from "../__chunks/SP3GKE3F.js";
+import "../__chunks/GEIG6TES.js";
+import "../__chunks/7YKLTEOQ.js";
+import "../__chunks/MADQZZRL.js";
 import {
   createElement,
   createHook,
-  createMemoComponent
-} from "../__chunks/3ORBWXWF.js";
+  forwardRef,
+  memo
+} from "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";
 
 // src/form/form-field.ts
-var useFormField = createHook((props) => {
-  return useFormControl(props);
-});
-var FormField = createMemoComponent((props) => {
-  const htmlProps = useFormField(props);
-  return createElement("input", htmlProps);
-});
-if (process.env.NODE_ENV !== "production") {
-  FormField.displayName = "FormField";
-}
+var TagName = "input";
+var useFormField = createHook(
+  function useFormField2(props) {
+    return useFormControl(props);
+  }
+);
+var FormField = memo(
+  forwardRef(function FormField2(props) {
+    const htmlProps = useFormField(props);
+    return createElement(TagName, htmlProps);
+  })
+);
 export {
   FormField,
   useFormField

package/esm/form/form-group-label.d.ts

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { GroupLabelOptions } from "../group/group-label.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 `FormGroupLabel` component. This hook must be used
  * in a component that's wrapped with `FormGroup` so the `aria-labelledby` prop
@@ -13,7 +16,7 @@ import type { FormStore } from "./form-store.js";
  * <Role {...props}>Label</Role>
  * ```
  */
-export declare const useFormGroupLabel: import("../utils/types.js").Hook<FormGroupLabelOptions<"div">>;
+export declare const useFormGroupLabel: import("../utils/types.js").Hook<"div", FormGroupLabelOptions<"div">>;
 /**
  * Renders a label in a form group. This component must be wrapped with the
  * [`FormGroup`](https://ariakit.org/reference/form-group) or
@@ -40,8 +43,8 @@ export declare const useFormGroupLabel: import("../utils/types.js").Hook<FormGro
  * </Form>
  * ```
  */
-export declare const FormGroupLabel: import("../utils/types.js").Component<FormGroupLabelOptions<"div">>;
-export interface FormGroupLabelOptions<T extends As = "div"> extends GroupLabelOptions<T> {
+export declare const FormGroupLabel: (props: FormGroupLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormGroupLabelOptions<T extends ElementType = TagName> extends GroupLabelOptions<T> {
     /**
      * Object returned by the
      * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
@@ -51,4 +54,5 @@ export interface FormGroupLabelOptions<T extends As = "div"> extends GroupLabelO
      */
     store?: FormStore;
 }
-export type FormGroupLabelProps<T extends As = "div"> = Props<FormGroupLabelOptions<T>>;
+export type FormGroupLabelProps<T extends ElementType = TagName> = Props<T, FormGroupLabelOptions<T>>;
+export {};