@ariakit/react-core 0.3.14 → 0.4.0

package/cjs/form/form-error.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
@@ -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/cjs/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/cjs/form/form-field.cjs

@@ -1,30 +1,33 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _N3XK7EAHcjs = require('../__chunks/N3XK7EAH.cjs');
-require('../__chunks/FROYTN4B.cjs');
-require('../__chunks/R5A2WTWB.cjs');
-require('../__chunks/BZTDJIVT.cjs');
+var _PTCYSU6Gcjs = require('../__chunks/PTCYSU6G.cjs');
+require('../__chunks/F6NX4XH2.cjs');
+require('../__chunks/XWCNZ2IP.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
 
 
 
 
-var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+
+var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 // src/form/form-field.ts
-var useFormField = _RNZNGEL4cjs.createHook.call(void 0, (props) => {
-  return _N3XK7EAHcjs.useFormControl.call(void 0, props);
-});
-var FormField = _RNZNGEL4cjs.createMemoComponent.call(void 0, (props) => {
-  const htmlProps = useFormField(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "input", htmlProps);
-});
-if (process.env.NODE_ENV !== "production") {
-  FormField.displayName = "FormField";
-}
+var TagName = "input";
+var useFormField = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useFormField2(props) {
+    return _PTCYSU6Gcjs.useFormControl.call(void 0, props);
+  }
+);
+var FormField = _Q67LZMDTcjs.memo.call(void 0, 
+  _Q67LZMDTcjs.forwardRef.call(void 0, function FormField2(props) {
+    const htmlProps = useFormField(props);
+    return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+  })
+);
 
 
 

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

@@ -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/cjs/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/cjs/form/form-group-label.cjs

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _QQCFY3MBcjs = require('../__chunks/QQCFY3MB.cjs');
+var _GMXGH5P5cjs = require('../__chunks/GMXGH5P5.cjs');
 require('../__chunks/FE3YCURH.cjs');
 
 
 
 
-var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 
@@ -15,22 +15,18 @@ require('../__chunks/CJDHQUBR.cjs');
 var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/form/form-group-label.ts
-var useFormGroupLabel = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
+var TagName = "div";
+var useFormGroupLabel = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useFormGroupLabel2(_a) {
     var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
-    props = _QQCFY3MBcjs.useGroupLabel.call(void 0, props);
+    props = _GMXGH5P5cjs.useGroupLabel.call(void 0, props);
     return props;
   }
 );
-var FormGroupLabel = _RNZNGEL4cjs.createComponent.call(void 0, 
-  (props) => {
-    const htmlProps = useFormGroupLabel(props);
-    return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  FormGroupLabel.displayName = "FormGroupLabel";
-}
+var FormGroupLabel = _Q67LZMDTcjs.forwardRef.call(void 0, function FormGroupLabel2(props) {
+  const htmlProps = useFormGroupLabel(props);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+});
 
 
 

package/cjs/form/form-group-label.d.cts

@@ -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 {};

package/cjs/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 {};

package/cjs/form/form-group.cjs

@@ -2,14 +2,14 @@
 
 
 
-var _UKXZY6PKcjs = require('../__chunks/UKXZY6PK.cjs');
-require('../__chunks/KSAZE5E2.cjs');
+var _CL7FRJUHcjs = require('../__chunks/CL7FRJUH.cjs');
+require('../__chunks/47V4ED4R.cjs');
 require('../__chunks/FE3YCURH.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.FormGroup = _UKXZY6PKcjs.FormGroup; exports.useFormGroup = _UKXZY6PKcjs.useFormGroup;
+exports.FormGroup = _CL7FRJUHcjs.FormGroup; exports.useFormGroup = _CL7FRJUHcjs.useFormGroup;

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { GroupOptions } from "../group/group.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 `FormGroup` component.
  * @see https://ariakit.org/components/form
@@ -15,7 +18,7 @@ import type { FormStore } from "./form-store.js";
  * </Form>
  * ```
  */
-export declare const useFormGroup: import("../utils/types.js").Hook<FormGroupOptions<"div">>;
+export declare const useFormGroup: import("../utils/types.js").Hook<"div", FormGroupOptions<"div">>;
 /**
  * Renders a group element for form controls. The
  * [`FormGroupLabel`](https://ariakit.org/reference/form-group-label) component
@@ -42,8 +45,8 @@ export declare const useFormGroup: import("../utils/types.js").Hook<FormGroupOpt
  * </Form>
  * ```
  */
-export declare const FormGroup: import("../utils/types.js").Component<FormGroupOptions<"div">>;
-export interface FormGroupOptions<T extends As = "div"> extends GroupOptions<T> {
+export declare const FormGroup: (props: FormGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormGroupOptions<T extends ElementType = TagName> extends GroupOptions<T> {
     /**
      * Object returned by the
      * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
@@ -53,4 +56,5 @@ export interface FormGroupOptions<T extends As = "div"> extends GroupOptions<T>
      */
     store?: FormStore;
 }
-export type FormGroupProps<T extends As = "div"> = Props<FormGroupOptions<T>>;
+export type FormGroupProps<T extends ElementType = TagName> = Props<T, FormGroupOptions<T>>;
+export {};

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { GroupOptions } from "../group/group.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 `FormGroup` component.
  * @see https://ariakit.org/components/form
@@ -15,7 +18,7 @@ import type { FormStore } from "./form-store.js";
  * </Form>
  * ```
  */
-export declare const useFormGroup: import("../utils/types.js").Hook<FormGroupOptions<"div">>;
+export declare const useFormGroup: import("../utils/types.js").Hook<"div", FormGroupOptions<"div">>;
 /**
  * Renders a group element for form controls. The
  * [`FormGroupLabel`](https://ariakit.org/reference/form-group-label) component
@@ -42,8 +45,8 @@ export declare const useFormGroup: import("../utils/types.js").Hook<FormGroupOpt
  * </Form>
  * ```
  */
-export declare const FormGroup: import("../utils/types.js").Component<FormGroupOptions<"div">>;
-export interface FormGroupOptions<T extends As = "div"> extends GroupOptions<T> {
+export declare const FormGroup: (props: FormGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormGroupOptions<T extends ElementType = TagName> extends GroupOptions<T> {
     /**
      * Object returned by the
      * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
@@ -53,4 +56,5 @@ export interface FormGroupOptions<T extends As = "div"> extends GroupOptions<T>
      */
     store?: FormStore;
 }
-export type FormGroupProps<T extends As = "div"> = Props<FormGroupOptions<T>>;
+export type FormGroupProps<T extends ElementType = TagName> = Props<T, FormGroupOptions<T>>;
+export {};

package/cjs/form/form-input.cjs

@@ -1,21 +1,22 @@
 "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');
-require('../__chunks/R5A2WTWB.cjs');
-require('../__chunks/BZTDJIVT.cjs');
+var _F6NX4XH2cjs = require('../__chunks/F6NX4XH2.cjs');
+require('../__chunks/XWCNZ2IP.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
 
 
-var _Z3GCTNW4cjs = require('../__chunks/Z3GCTNW4.cjs');
+var _5QD55NKLcjs = require('../__chunks/5QD55NKL.cjs');
 require('../__chunks/75KXQZJX.cjs');
 
 
 
 
-var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+
+var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
 
 
 var _EO6LS72Hcjs = require('../__chunks/EO6LS72H.cjs');
@@ -28,10 +29,11 @@ var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/form/form-input.ts
 var _misc = require('@ariakit/core/utils/misc');
-var useFormInput = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
+var TagName = "input";
+var useFormInput = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useFormInput2(_a) {
     var _b = _a, { store, name: nameProp } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "name"]);
-    const context = _FROYTN4Bcjs.useFormContext.call(void 0, );
+    const context = _F6NX4XH2cjs.useFormContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -51,18 +53,17 @@ var useFormInput = _RNZNGEL4cjs.createHook.call(void 0,
     }, props), {
       onChange
     });
-    props = _Z3GCTNW4cjs.useFocusable.call(void 0, props);
-    props = _N3XK7EAHcjs.useFormControl.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, name }, props));
+    props = _5QD55NKLcjs.useFocusable.call(void 0, props);
+    props = _PTCYSU6Gcjs.useFormControl.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, name }, props));
     return props;
   }
 );
-var FormInput = _RNZNGEL4cjs.createMemoComponent.call(void 0, (props) => {
-  const htmlProps = useFormInput(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "input", htmlProps);
-});
-if (process.env.NODE_ENV !== "production") {
-  FormInput.displayName = "FormInput";
-}
+var FormInput = _Q67LZMDTcjs.memo.call(void 0, 
+  _Q67LZMDTcjs.forwardRef.call(void 0, function FormInput2(props) {
+    const htmlProps = useFormInput(props);
+    return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+  })
+);
 
 
 

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { FocusableOptions } from "../focusable/focusable.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 `FormInput` component. Unlike `useFormControl`, this
  * hook returns the `value` and `onChange` props that can be passed to a native
@@ -16,7 +19,7 @@ import type { FormControlOptions } from "./form-control.js";
  * </Form>
  * ```
  */
-export declare const useFormInput: import("../utils/types.js").Hook<FormInputOptions<"input">>;
+export declare const useFormInput: import("../utils/types.js").Hook<"input", FormInputOptions<"input">>;
 /**
  * Renders a form input. Unlike
  * [`FormControl`](https://ariakit.org/reference/form-control), this component
@@ -37,7 +40,8 @@ export declare const useFormInput: import("../utils/types.js").Hook<FormInputOpt
  * </Form>
  * ```
  */
-export declare const FormInput: import("../utils/types.js").Component<FormInputOptions<"input">>;
-export interface FormInputOptions<T extends As = "input"> extends FormControlOptions<T>, FocusableOptions<T> {
+export declare const FormInput: (props: FormInputProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormInputOptions<T extends ElementType = TagName> extends FormControlOptions<T>, FocusableOptions<T> {
 }
-export type FormInputProps<T extends As = "input"> = Props<FormInputOptions<T>>;
+export type FormInputProps<T extends ElementType = TagName> = Props<T, FormInputOptions<T>>;
+export {};

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { FocusableOptions } from "../focusable/focusable.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 `FormInput` component. Unlike `useFormControl`, this
  * hook returns the `value` and `onChange` props that can be passed to a native
@@ -16,7 +19,7 @@ import type { FormControlOptions } from "./form-control.js";
  * </Form>
  * ```
  */
-export declare const useFormInput: import("../utils/types.js").Hook<FormInputOptions<"input">>;
+export declare const useFormInput: import("../utils/types.js").Hook<"input", FormInputOptions<"input">>;
 /**
  * Renders a form input. Unlike
  * [`FormControl`](https://ariakit.org/reference/form-control), this component
@@ -37,7 +40,8 @@ export declare const useFormInput: import("../utils/types.js").Hook<FormInputOpt
  * </Form>
  * ```
  */
-export declare const FormInput: import("../utils/types.js").Component<FormInputOptions<"input">>;
-export interface FormInputOptions<T extends As = "input"> extends FormControlOptions<T>, FocusableOptions<T> {
+export declare const FormInput: (props: FormInputProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormInputOptions<T extends ElementType = TagName> extends FormControlOptions<T>, FocusableOptions<T> {
 }
-export type FormInputProps<T extends As = "input"> = Props<FormInputOptions<T>>;
+export type FormInputProps<T extends ElementType = TagName> = Props<T, FormInputOptions<T>>;
+export {};

package/cjs/form/form-label.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');
 
 
 
@@ -29,13 +30,22 @@ var _react = require('react');
 var _focus = require('@ariakit/core/utils/focus');
 var _misc = require('@ariakit/core/utils/misc');
 var _jsxruntime = require('react/jsx-runtime');
+var TagName = "label";
 function supportsNativeLabel(tagName) {
   return tagName === "input" || tagName === "textarea" || tagName === "select" || tagName === "meter" || tagName === "progress";
 }
-var useFormLabel = _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 useFormLabel = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useFormLabel2(_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,
@@ -90,17 +100,16 @@ var useFormLabel = _RNZNGEL4cjs.createHook.call(void 0,
         }, props.style)
       });
     }
-    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 FormLabel = _RNZNGEL4cjs.createMemoComponent.call(void 0, (props) => {
-  const htmlProps = useFormLabel(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "label", htmlProps);
-});
-if (process.env.NODE_ENV !== "production") {
-  FormLabel.displayName = "FormLabel";
-}
+var FormLabel = _Q67LZMDTcjs.memo.call(void 0, 
+  _Q67LZMDTcjs.forwardRef.call(void 0, function FormLabel2(props) {
+    const htmlProps = useFormLabel(props);
+    return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+  })
+);