@ariakit/react-core 0.3.14 → 0.4.0

package/cjs/form/form-label.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 = "label";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormLabel` component. If the field is not a native
  * input, select or textarea element, the hook will return props to render a
@@ -19,7 +22,7 @@ import type { FormStore } from "./form-store.js";
  * </Form>
  * ```
  */
-export declare const useFormLabel: import("../utils/types.js").Hook<FormLabelOptions<"label">>;
+export declare const useFormLabel: import("../utils/types.js").Hook<"label", FormLabelOptions<"label">>;
 /**
  * Renders a label associated with a form field, even if the field is not a
  * native input.
@@ -44,8 +47,8 @@ export declare const useFormLabel: import("../utils/types.js").Hook<FormLabelOpt
  * </Form>
  * ```
  */
-export declare const FormLabel: import("../utils/types.js").Component<FormLabelOptions<"label">>;
-export interface FormLabelOptions<T extends As = "label"> extends CollectionItemOptions<T> {
+export declare const FormLabel: (props: FormLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormLabelOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
     /**
      * Object returned by the
      * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
@@ -66,4 +69,5 @@ export interface FormLabelOptions<T extends As = "label"> extends CollectionItem
      */
     name: StringLike;
 }
-export type FormLabelProps<T extends As = "label"> = Props<FormLabelOptions<T>>;
+export type FormLabelProps<T extends ElementType = TagName> = Props<T, FormLabelOptions<T>>;
+export {};

package/cjs/form/form-label.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 = "label";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormLabel` component. If the field is not a native
  * input, select or textarea element, the hook will return props to render a
@@ -19,7 +22,7 @@ import type { FormStore } from "./form-store.js";
  * </Form>
  * ```
  */
-export declare const useFormLabel: import("../utils/types.js").Hook<FormLabelOptions<"label">>;
+export declare const useFormLabel: import("../utils/types.js").Hook<"label", FormLabelOptions<"label">>;
 /**
  * Renders a label associated with a form field, even if the field is not a
  * native input.
@@ -44,8 +47,8 @@ export declare const useFormLabel: import("../utils/types.js").Hook<FormLabelOpt
  * </Form>
  * ```
  */
-export declare const FormLabel: import("../utils/types.js").Component<FormLabelOptions<"label">>;
-export interface FormLabelOptions<T extends As = "label"> extends CollectionItemOptions<T> {
+export declare const FormLabel: (props: FormLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormLabelOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
     /**
      * Object returned by the
      * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
@@ -66,4 +69,5 @@ export interface FormLabelOptions<T extends As = "label"> extends CollectionItem
      */
     name: StringLike;
 }
-export type FormLabelProps<T extends As = "label"> = Props<FormLabelOptions<T>>;
+export type FormLabelProps<T extends ElementType = TagName> = Props<T, FormLabelOptions<T>>;
+export {};

package/cjs/form/form-provider.cjs

@@ -4,10 +4,10 @@
 var _ODJ76C5Wcjs = require('../__chunks/ODJ76C5W.cjs');
 
 
-var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
+var _F6NX4XH2cjs = require('../__chunks/F6NX4XH2.cjs');
 require('../__chunks/CDNJPIEG.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
@@ -17,7 +17,7 @@ require('../__chunks/AV6KTKLE.cjs');
 var _jsxruntime = require('react/jsx-runtime');
 function FormProvider(props = {}) {
   const store = _ODJ76C5Wcjs.useFormStore.call(void 0, props);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FROYTN4Bcjs.FormContextProvider, { value: store, children: props.children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _F6NX4XH2cjs.FormContextProvider, { value: store, children: props.children });
 }
 
 

package/cjs/form/form-push.cjs

@@ -1,22 +1,22 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
+var _F6NX4XH2cjs = require('../__chunks/F6NX4XH2.cjs');
 
 
-var _5UTRYT6Ecjs = require('../__chunks/5UTRYT6E.cjs');
-require('../__chunks/DAJUUBUI.cjs');
+var _MMDU7VRJcjs = require('../__chunks/MMDU7VRJ.cjs');
+require('../__chunks/ZMTZTMRS.cjs');
 
 
-var _R5A2WTWBcjs = require('../__chunks/R5A2WTWB.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+var _XWCNZ2IPcjs = 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');
 
 
 var _EO6LS72Hcjs = require('../__chunks/EO6LS72H.cjs');
@@ -30,6 +30,7 @@ var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 // src/form/form-push.ts
 var _react = require('react');
 var _misc = require('@ariakit/core/utils/misc');
+var TagName = "button";
 function getFirstFieldsByName(items, name) {
   if (!items)
     return [];
@@ -47,8 +48,8 @@ function getFirstFieldsByName(items, name) {
   }
   return fields;
 }
-var useFormPush = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
+var useFormPush = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useFormPush2(_a) {
     var _b = _a, {
       store,
       value,
@@ -62,7 +63,7 @@ var useFormPush = _RNZNGEL4cjs.createHook.call(void 0,
       "getItem",
       "autoFocusOnClick"
     ]);
-    const context = _FROYTN4Bcjs.useFormContext.call(void 0, );
+    const context = _F6NX4XH2cjs.useFormContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -104,18 +105,15 @@ var useFormPush = _RNZNGEL4cjs.createHook.call(void 0,
     props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
       onClick
     });
-    props = _5UTRYT6Ecjs.useButton.call(void 0, props);
-    props = _R5A2WTWBcjs.useCollectionItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props), { getItem }));
+    props = _MMDU7VRJcjs.useButton.call(void 0, props);
+    props = _XWCNZ2IPcjs.useCollectionItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props), { getItem }));
     return props;
   }
 );
-var FormPush = _RNZNGEL4cjs.createComponent.call(void 0, (props) => {
+var FormPush = _Q67LZMDTcjs.forwardRef.call(void 0, function FormPush2(props) {
   const htmlProps = useFormPush(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "button", htmlProps);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  FormPush.displayName = "FormPush";
-}
 
 
 

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

@@ -1,8 +1,11 @@
+import type { ElementType } from "react";
 import type { StringLike } from "@ariakit/core/form/types";
 import type { ButtonOptions } from "../button/button.js";
 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 = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormPush` component.
  * @see https://ariakit.org/components/form
@@ -28,7 +31,7 @@ import type { FormStore } from "./form-store.js";
  * </Form>
  * ```
  */
-export declare const useFormPush: import("../utils/types.js").Hook<FormPushOptions<"button">>;
+export declare const useFormPush: import("../utils/types.js").Hook<"button", FormPushOptions<"button">>;
 /**
  * Renders a button that will push items to an array value in the form store
  * when clicked.
@@ -63,8 +66,8 @@ export declare const useFormPush: import("../utils/types.js").Hook<FormPushOptio
  * </Form>
  * ```
  */
-export declare const FormPush: import("../utils/types.js").Component<FormPushOptions<"button">>;
-export interface FormPushOptions<T extends As = "button"> extends ButtonOptions<T>, CollectionItemOptions<T> {
+export declare const FormPush: (props: FormPushProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormPushOptions<T extends ElementType = TagName> extends ButtonOptions<T>, CollectionItemOptions<T> {
     /**
      * Object returned by the
      * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
@@ -91,4 +94,5 @@ export interface FormPushOptions<T extends As = "button"> extends ButtonOptions<
      */
     autoFocusOnClick?: boolean;
 }
-export type FormPushProps<T extends As = "button"> = Props<FormPushOptions<T>>;
+export type FormPushProps<T extends ElementType = TagName> = Props<T, FormPushOptions<T>>;
+export {};

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

@@ -1,8 +1,11 @@
+import type { ElementType } from "react";
 import type { StringLike } from "@ariakit/core/form/types";
 import type { ButtonOptions } from "../button/button.js";
 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 = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormPush` component.
  * @see https://ariakit.org/components/form
@@ -28,7 +31,7 @@ import type { FormStore } from "./form-store.js";
  * </Form>
  * ```
  */
-export declare const useFormPush: import("../utils/types.js").Hook<FormPushOptions<"button">>;
+export declare const useFormPush: import("../utils/types.js").Hook<"button", FormPushOptions<"button">>;
 /**
  * Renders a button that will push items to an array value in the form store
  * when clicked.
@@ -63,8 +66,8 @@ export declare const useFormPush: import("../utils/types.js").Hook<FormPushOptio
  * </Form>
  * ```
  */
-export declare const FormPush: import("../utils/types.js").Component<FormPushOptions<"button">>;
-export interface FormPushOptions<T extends As = "button"> extends ButtonOptions<T>, CollectionItemOptions<T> {
+export declare const FormPush: (props: FormPushProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormPushOptions<T extends ElementType = TagName> extends ButtonOptions<T>, CollectionItemOptions<T> {
     /**
      * Object returned by the
      * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
@@ -91,4 +94,5 @@ export interface FormPushOptions<T extends As = "button"> extends ButtonOptions<
      */
     autoFocusOnClick?: boolean;
 }
-export type FormPushProps<T extends As = "button"> = Props<FormPushOptions<T>>;
+export type FormPushProps<T extends ElementType = TagName> = Props<T, FormPushOptions<T>>;
+export {};

package/cjs/form/form-radio-group.cjs

@@ -1,14 +1,14 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _UKXZY6PKcjs = require('../__chunks/UKXZY6PK.cjs');
-require('../__chunks/KSAZE5E2.cjs');
+var _CL7FRJUHcjs = require('../__chunks/CL7FRJUH.cjs');
+require('../__chunks/47V4ED4R.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');
 
@@ -17,23 +17,19 @@ require('../__chunks/CJDHQUBR.cjs');
 var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/form/form-radio-group.ts
-var useFormRadioGroup = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
+var TagName = "div";
+var useFormRadioGroup = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useFormRadioGroup2(_a) {
     var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
     props = _AV6KTKLEcjs.__spreadValues.call(void 0, { role: "radiogroup" }, props);
-    props = _UKXZY6PKcjs.useFormGroup.call(void 0, props);
+    props = _CL7FRJUHcjs.useFormGroup.call(void 0, props);
     return props;
   }
 );
-var FormRadioGroup = _RNZNGEL4cjs.createComponent.call(void 0, 
-  (props) => {
-    const htmlProps = useFormRadioGroup(props);
-    return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  FormRadioGroup.displayName = "FormRadioGroup";
-}
+var FormRadioGroup = _Q67LZMDTcjs.forwardRef.call(void 0, function FormRadioGroup2(props) {
+  const htmlProps = useFormRadioGroup(props);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+});
 
 
 

package/cjs/form/form-radio-group.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 { FormGroupOptions } from "./form-group.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormRadioGroup` component.
  * @see https://ariakit.org/components/form
@@ -17,7 +20,7 @@ import type { FormGroupOptions } from "./form-group.js";
  * </Form>
  * ```
  */
-export declare const useFormRadioGroup: import("../utils/types.js").Hook<FormRadioGroupOptions<"div">>;
+export declare const useFormRadioGroup: import("../utils/types.js").Hook<"div", FormRadioGroupOptions<"div">>;
 /**
  * Renders a group element for
  * [`FormRadio`](https://ariakit.org/reference/form-radio) elements. The
@@ -43,6 +46,7 @@ export declare const useFormRadioGroup: import("../utils/types.js").Hook<FormRad
  * </Form>
  * ```
  */
-export declare const FormRadioGroup: import("../utils/types.js").Component<FormRadioGroupOptions<"div">>;
-export type FormRadioGroupOptions<T extends As = "div"> = FormGroupOptions<T>;
-export type FormRadioGroupProps<T extends As = "div"> = Props<FormRadioGroupOptions<T>>;
+export declare const FormRadioGroup: (props: FormRadioGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export type FormRadioGroupOptions<T extends ElementType = TagName> = FormGroupOptions<T>;
+export type FormRadioGroupProps<T extends ElementType = TagName> = Props<T, FormRadioGroupOptions<T>>;
+export {};

package/cjs/form/form-radio-group.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 { FormGroupOptions } from "./form-group.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormRadioGroup` component.
  * @see https://ariakit.org/components/form
@@ -17,7 +20,7 @@ import type { FormGroupOptions } from "./form-group.js";
  * </Form>
  * ```
  */
-export declare const useFormRadioGroup: import("../utils/types.js").Hook<FormRadioGroupOptions<"div">>;
+export declare const useFormRadioGroup: import("../utils/types.js").Hook<"div", FormRadioGroupOptions<"div">>;
 /**
  * Renders a group element for
  * [`FormRadio`](https://ariakit.org/reference/form-radio) elements. The
@@ -43,6 +46,7 @@ export declare const useFormRadioGroup: import("../utils/types.js").Hook<FormRad
  * </Form>
  * ```
  */
-export declare const FormRadioGroup: import("../utils/types.js").Component<FormRadioGroupOptions<"div">>;
-export type FormRadioGroupOptions<T extends As = "div"> = FormGroupOptions<T>;
-export type FormRadioGroupProps<T extends As = "div"> = Props<FormRadioGroupOptions<T>>;
+export declare const FormRadioGroup: (props: FormRadioGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export type FormRadioGroupOptions<T extends ElementType = TagName> = FormGroupOptions<T>;
+export type FormRadioGroupProps<T extends ElementType = TagName> = Props<T, FormRadioGroupOptions<T>>;
+export {};

package/cjs/form/form-radio.cjs

@@ -1,27 +1,28 @@
 "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 _G2ZXRZ2Rcjs = require('../__chunks/G2ZXRZ2R.cjs');
-require('../__chunks/HEEQY4DZ.cjs');
-require('../__chunks/IO6J4PAN.cjs');
-require('../__chunks/DAJUUBUI.cjs');
-require('../__chunks/R5A2WTWB.cjs');
+var _RGJCGG4Pcjs = require('../__chunks/RGJCGG4P.cjs');
+require('../__chunks/43LZBXXJ.cjs');
+require('../__chunks/QWP2WC6E.cjs');
+require('../__chunks/ZMTZTMRS.cjs');
+require('../__chunks/XWCNZ2IP.cjs');
 require('../__chunks/6ZZYUFPW.cjs');
-require('../__chunks/UZNYSPKP.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/4XFLDG56.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');
 
 
@@ -35,10 +36,11 @@ var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/form/form-radio.ts
 var _misc = require('@ariakit/core/utils/misc');
-var useFormRadio = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
+var TagName = "input";
+var useFormRadio = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useFormRadio2(_a) {
     var _b = _a, { store, name: nameProp, value } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "name", "value"]);
-    const context = _FROYTN4Bcjs.useFormContext.call(void 0, );
+    const context = _F6NX4XH2cjs.useFormContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -60,8 +62,8 @@ var useFormRadio = _RNZNGEL4cjs.createHook.call(void 0,
       checked,
       onChange
     });
-    props = _G2ZXRZ2Rcjs.useRadio.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { value }, props));
-    props = _N3XK7EAHcjs.useFormControl.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _RGJCGG4Pcjs.useRadio.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { value }, props));
+    props = _PTCYSU6Gcjs.useFormControl.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       name,
       "aria-labelledby": void 0
@@ -69,13 +71,12 @@ var useFormRadio = _RNZNGEL4cjs.createHook.call(void 0,
     return props;
   }
 );
-var FormRadio = _RNZNGEL4cjs.createMemoComponent.call(void 0, (props) => {
-  const htmlProps = useFormRadio(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "input", htmlProps);
-});
-if (process.env.NODE_ENV !== "production") {
-  FormRadio.displayName = "FormRadio";
-}
+var FormRadio = _Q67LZMDTcjs.memo.call(void 0, 
+  _Q67LZMDTcjs.forwardRef.call(void 0, function FormRadio2(props) {
+    const htmlProps = useFormRadio(props);
+    return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+  })
+);
 
 
 

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { RadioOptions } from "../radio/radio.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 `FormRadio` component.
  * @see https://ariakit.org/components/form
@@ -20,7 +23,7 @@ import type { FormControlOptions } from "./form-control.js";
  * </Form>
  * ```
  */
-export declare const useFormRadio: import("../utils/types.js").Hook<FormRadioOptions<"input">>;
+export declare const useFormRadio: import("../utils/types.js").Hook<"input", FormRadioOptions<"input">>;
 /**
  * Renders a radio button as a form control. This component must be wrapped in a
  * [`FormRadioGroup`](https://ariakit.org/reference/form-radio-group) along with
@@ -45,7 +48,8 @@ export declare const useFormRadio: import("../utils/types.js").Hook<FormRadioOpt
  * </Form>
  * ```
  */
-export declare const FormRadio: import("../utils/types.js").Component<FormRadioOptions<"input">>;
-export interface FormRadioOptions<T extends As = "input"> extends FormControlOptions<T>, Omit<RadioOptions<T>, "store" | "name"> {
+export declare const FormRadio: (props: FormRadioProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormRadioOptions<T extends ElementType = TagName> extends FormControlOptions<T>, Omit<RadioOptions<T>, "store" | "name"> {
 }
-export type FormRadioProps<T extends As = "input"> = Props<FormRadioOptions<T>>;
+export type FormRadioProps<T extends ElementType = TagName> = Props<T, FormRadioOptions<T>>;
+export {};

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { RadioOptions } from "../radio/radio.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 `FormRadio` component.
  * @see https://ariakit.org/components/form
@@ -20,7 +23,7 @@ import type { FormControlOptions } from "./form-control.js";
  * </Form>
  * ```
  */
-export declare const useFormRadio: import("../utils/types.js").Hook<FormRadioOptions<"input">>;
+export declare const useFormRadio: import("../utils/types.js").Hook<"input", FormRadioOptions<"input">>;
 /**
  * Renders a radio button as a form control. This component must be wrapped in a
  * [`FormRadioGroup`](https://ariakit.org/reference/form-radio-group) along with
@@ -45,7 +48,8 @@ export declare const useFormRadio: import("../utils/types.js").Hook<FormRadioOpt
  * </Form>
  * ```
  */
-export declare const FormRadio: import("../utils/types.js").Component<FormRadioOptions<"input">>;
-export interface FormRadioOptions<T extends As = "input"> extends FormControlOptions<T>, Omit<RadioOptions<T>, "store" | "name"> {
+export declare const FormRadio: (props: FormRadioProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormRadioOptions<T extends ElementType = TagName> extends FormControlOptions<T>, Omit<RadioOptions<T>, "store" | "name"> {
 }
-export type FormRadioProps<T extends As = "input"> = Props<FormRadioOptions<T>>;
+export type FormRadioProps<T extends ElementType = TagName> = Props<T, FormRadioOptions<T>>;
+export {};

package/cjs/form/form-remove.cjs

@@ -1,19 +1,19 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
+var _F6NX4XH2cjs = require('../__chunks/F6NX4XH2.cjs');
 
 
-var _5UTRYT6Ecjs = require('../__chunks/5UTRYT6E.cjs');
-require('../__chunks/DAJUUBUI.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+var _MMDU7VRJcjs = require('../__chunks/MMDU7VRJ.cjs');
+require('../__chunks/ZMTZTMRS.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');
 
 
 var _EO6LS72Hcjs = require('../__chunks/EO6LS72H.cjs');
@@ -27,6 +27,7 @@ var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 // src/form/form-remove.ts
 var _dom = require('@ariakit/core/utils/dom');
 var _misc = require('@ariakit/core/utils/misc');
+var TagName = "button";
 function findNextOrPreviousField(items, name, index) {
   const fields = items == null ? void 0 : items.filter(
     (item) => item.type === "field" && item.name.startsWith(name)
@@ -46,10 +47,20 @@ function findNextOrPreviousField(items, name, index) {
 function findPushButton(items, name) {
   return items == null ? void 0 : items.find((item) => item.type === "button" && item.name === name);
 }
-var useFormRemove = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
-    var _b = _a, { store, name: nameProp, index, autoFocusOnClick = true } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "name", "index", "autoFocusOnClick"]);
-    const context = _FROYTN4Bcjs.useFormContext.call(void 0, );
+var useFormRemove = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useFormRemove2(_a) {
+    var _b = _a, {
+      store,
+      name: nameProp,
+      index,
+      autoFocusOnClick = true
+    } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
+      "store",
+      "name",
+      "index",
+      "autoFocusOnClick"
+    ]);
+    const context = _F6NX4XH2cjs.useFormContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -83,17 +94,14 @@ var useFormRemove = _RNZNGEL4cjs.createHook.call(void 0,
     props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
       onClick
     });
-    props = _5UTRYT6Ecjs.useButton.call(void 0, props);
+    props = _MMDU7VRJcjs.useButton.call(void 0, props);
     return props;
   }
 );
-var FormRemove = _RNZNGEL4cjs.createComponent.call(void 0, (props) => {
+var FormRemove = _Q67LZMDTcjs.forwardRef.call(void 0, function FormRemove2(props) {
   const htmlProps = useFormRemove(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "button", htmlProps);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  FormRemove.displayName = "FormRemove";
-}
 
 
 

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

@@ -1,7 +1,10 @@
+import type { ElementType } from "react";
 import type { StringLike } from "@ariakit/core/form/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 { FormStore } from "./form-store.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FormRemove` component.
  * @see https://ariakit.org/components/form
@@ -27,7 +30,7 @@ import type { FormStore } from "./form-store.js";
  * </Form>
  * ```
  */
-export declare const useFormRemove: import("../utils/types.js").Hook<FormRemoveOptions<"button">>;
+export declare const useFormRemove: import("../utils/types.js").Hook<"button", FormRemoveOptions<"button">>;
 /**
  * Renders a button that will remove an item from an array field in the form
  * when clicked.
@@ -63,8 +66,8 @@ export declare const useFormRemove: import("../utils/types.js").Hook<FormRemoveO
  * </Form>
  * ```
  */
-export declare const FormRemove: import("../utils/types.js").Component<FormRemoveOptions<"button">>;
-export interface FormRemoveOptions<T extends As = "button"> extends ButtonOptions<T> {
+export declare const FormRemove: (props: FormRemoveProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FormRemoveOptions<T extends ElementType = TagName> extends ButtonOptions<T> {
     /**
      * Object returned by the
      * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
@@ -91,4 +94,5 @@ export interface FormRemoveOptions<T extends As = "button"> extends ButtonOption
      */
     autoFocusOnClick?: boolean;
 }
-export type FormRemoveProps<T extends As = "button"> = Props<FormRemoveOptions<T>>;
+export type FormRemoveProps<T extends ElementType = TagName> = Props<T, FormRemoveOptions<T>>;
+export {};