@ariakit/react-core 0.3.4 → 0.3.6

package/cjs/form/form-error.cjs

@@ -1,44 +1,45 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-var _VLI66TFLcjs = require('../__chunks/VLI66TFL.cjs');
 
+var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
 
-var _FMI5QF7Ncjs = require('../__chunks/FMI5QF7N.cjs');
-require('../__chunks/NHZBX2RS.cjs');
 
+var _R5A2WTWBcjs = require('../__chunks/R5A2WTWB.cjs');
+require('../__chunks/BZTDJIVT.cjs');
 
 
 
-var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
 
+var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
 
 
-var _5WLTMVVQcjs = require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
 
+var _EO6LS72Hcjs = require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
 
 
 
-var _72I2GWXFcjs = require('../__chunks/72I2GWXF.cjs');
+
+var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/form/form-error.ts
 var _react = require('react');
 var _misc = require('@ariakit/core/utils/misc');
-var useFormError = _Z5PUIG6Acjs.createHook.call(void 0, 
+var useFormError = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
-    var _b = _a, { store, name: nameProp, getItem: getItemProp } = _b, props = _72I2GWXFcjs.__objRest.call(void 0, _b, ["store", "name", "getItem"]);
-    const context = _VLI66TFLcjs.useFormContext.call(void 0, );
+    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, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
       process.env.NODE_ENV !== "production" && "FormError must be wrapped in a Form component."
     );
-    const id = _5WLTMVVQcjs.useId.call(void 0, props.id);
+    const id = _EO6LS72Hcjs.useId.call(void 0, props.id);
     const ref = _react.useRef.call(void 0, null);
     const name = `${nameProp}`;
     const getItem = _react.useCallback.call(void 0, 
       (item) => {
-        const nextItem = _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {}, item), { id: id || item.id, name, type: "error" });
+        const nextItem = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, item), { id: id || item.id, name, type: "error" });
         if (getItemProp) {
           return getItemProp(nextItem);
         }
@@ -54,20 +55,20 @@ var useFormError = _Z5PUIG6Acjs.createHook.call(void 0,
         return;
       return error;
     });
-    props = _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {
+    props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       id,
       role: "alert",
       children
     }, props), {
-      ref: _5WLTMVVQcjs.useMergeRefs.call(void 0, ref, props.ref)
+      ref: _EO6LS72Hcjs.useMergeRefs.call(void 0, ref, props.ref)
     });
-    props = _FMI5QF7Ncjs.useCollectionItem.call(void 0, _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, { store }, props), { getItem }));
+    props = _R5A2WTWBcjs.useCollectionItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props), { getItem }));
     return props;
   }
 );
-var FormError = _Z5PUIG6Acjs.createMemoComponent.call(void 0, (props) => {
+var FormError = _RNZNGEL4cjs.createMemoComponent.call(void 0, (props) => {
   const htmlProps = useFormError(props);
-  return _Z5PUIG6Acjs.createElement.call(void 0, "div", htmlProps);
+  return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
 });
 if (process.env.NODE_ENV !== "production") {
   FormError.displayName = "FormError";

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

@@ -0,0 +1,67 @@
+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 { FormStore } from "./form-store.js";
+/**
+ * Returns props to create a `FormDescription` component.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { email: "" } });
+ * const props = useFormError({ store, name: store.names.email });
+ *
+ * store.useValidate(() => {
+ *   if (!store.getValue(store.names.email)) {
+ *     store.setError(store.names.email, "Email is required!");
+ *   }
+ * });
+ *
+ * <Form store={store}>
+ *   <FormLabel name={store.names.email}>Email</FormLabel>
+ *   <FormInput name={store.names.email} />
+ *   <Role {...props} />
+ * </Form>
+ * ```
+ */
+export declare const useFormError: import("../utils/types.js").Hook<FormErrorOptions<"div">>;
+/**
+ * Renders an element that displays an error message. The `children` will be
+ * automatically set to the error message set on the store.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     email: "",
+ *   },
+ * });
+ *
+ * form.useValidate(() => {
+ *   if (!form.values.email) {
+ *     form.setError(form.names.email, "Email is required!");
+ *   }
+ * });
+ *
+ * <Form store={form}>
+ *   <FormLabel name={form.names.email}>Email</FormLabel>
+ *   <FormInput name={form.names.email} />
+ *   <FormError name={form.names.email} />
+ * </Form>
+ * ```
+ */
+export declare const FormError: import("../utils/types.js").Component<FormErrorOptions<"div">>;
+export interface FormErrorOptions<T extends As = "div"> extends CollectionItemOptions<T> {
+    /**
+     * Object returned by the
+     * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
+     * provided, the closest [`Form`](https://ariakit.org/reference/form) or
+     * [`FormProvider`](https://ariakit.org/reference/form-provider) components'
+     * context will be used.
+     */
+    store?: FormStore;
+    /**
+     * Name of the field.
+     */
+    name: StringLike;
+}
+export type FormErrorProps<T extends As = "div"> = Props<FormErrorOptions<T>>;

package/cjs/form/form-field.cjs

@@ -1,15 +1,16 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _JJ22W2WScjs = require('../__chunks/JJ22W2WS.cjs');
-require('../__chunks/VLI66TFL.cjs');
-require('../__chunks/FMI5QF7N.cjs');
-require('../__chunks/NHZBX2RS.cjs');
-require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
 
+var _VCDQISP7cjs = require('../__chunks/VCDQISP7.cjs');
+require('../__chunks/FROYTN4B.cjs');
+require('../__chunks/R5A2WTWB.cjs');
+require('../__chunks/BZTDJIVT.cjs');
+require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+require('../__chunks/AV6KTKLE.cjs');
 
 
-exports.FormField = _JJ22W2WScjs.FormField; exports.useFormField = _JJ22W2WScjs.useFormField;
+
+exports.FormField = _VCDQISP7cjs.FormField; exports.useFormField = _VCDQISP7cjs.useFormField;

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

@@ -0,0 +1,80 @@
+import type { 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 { FormStore } from "./form-store.js";
+/**
+ * Returns props to create a `FormField` component. Unlike `useFormInput`, this
+ * hook doesn't automatically returns the `value` and `onChange` props. This is
+ * so we can use it not only for native form elements but also for custom
+ * components whose value is not controlled by the native `value` and `onChange`
+ * props.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { content: "" } });
+ * const props = useFormField({ store, name: store.names.content });
+ * const value = store.useValue(store.names.content);
+ *
+ * <Form store={store}>
+ *   <FormLabel name={store.names.content}>Content</FormLabel>
+ *   <Role
+ *     {...props}
+ *     value={value}
+ *     onChange={(value) => store.setValue(store.names.content, value)}
+ *     render={<Editor />}
+ *   />
+ * </Form>
+ * ```
+ */
+export declare const useFormField: import("../utils/types.js").Hook<FormFieldOptions<"input">>;
+/**
+ * Renders a form field. Unlike
+ * [`FormInput`](https://ariakit.org/reference/form-input), this component
+ * doesn't automatically pass the `value` and `onChange` props down to the
+ * underlying element. This is so we can use it not only for native form
+ * elements but also for custom components whose value is not controlled by the
+ * native `value` and `onChange` props.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     content: "",
+ *   },
+ * });
+ *
+ * const value = form.useValue(form.names.content);
+ *
+ * <Form store={form}>
+ *   <FormLabel name={form.names.content}>Content</FormLabel>
+ *   <FormField
+ *     value={value}
+ *     onChange={(value) => form.setValue(form.names.content, value)}
+ *     render={<Editor />}
+ *   />
+ * </Form>
+ * ```
+ */
+export declare const FormField: import("../utils/types.js").Component<FormFieldOptions<"input">>;
+export interface FormFieldOptions<T extends As = "input"> extends CollectionItemOptions<T> {
+    /**
+     * Object returned by the
+     * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
+     * provided, the closest [`Form`](https://ariakit.org/reference/form) or
+     * [`FormProvider`](https://ariakit.org/reference/form-provider) components'
+     * context will be used.
+     */
+    store?: FormStore;
+    /**
+     * Name of the field.
+     */
+    name: StringLike;
+    /**
+     * Whether the field should be marked touched on blur.
+     * @default true
+     */
+    touchOnBlur?: BooleanOrCallback<FocusEvent>;
+}
+export type FormFieldProps<T extends As = "input"> = Props<FormFieldOptions<T>>;

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

@@ -1,30 +1,31 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-var _TDUVWW2Fcjs = require('../__chunks/TDUVWW2F.cjs');
-require('../__chunks/K56WQU76.cjs');
 
+var _QQCFY3MBcjs = require('../__chunks/QQCFY3MB.cjs');
+require('../__chunks/FE3YCURH.cjs');
 
 
 
-var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
 
+var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
 
-var _72I2GWXFcjs = require('../__chunks/72I2GWXF.cjs');
+
+var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/form/form-group-label.ts
-var useFormGroupLabel = _Z5PUIG6Acjs.createHook.call(void 0, 
+var useFormGroupLabel = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
-    var _b = _a, { store } = _b, props = _72I2GWXFcjs.__objRest.call(void 0, _b, ["store"]);
-    props = _TDUVWW2Fcjs.useGroupLabel.call(void 0, props);
+    var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
+    props = _QQCFY3MBcjs.useGroupLabel.call(void 0, props);
     return props;
   }
 );
-var FormGroupLabel = _Z5PUIG6Acjs.createComponent.call(void 0, 
+var FormGroupLabel = _RNZNGEL4cjs.createComponent.call(void 0, 
   (props) => {
     const htmlProps = useFormGroupLabel(props);
-    return _Z5PUIG6Acjs.createElement.call(void 0, "div", htmlProps);
+    return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
   }
 );
 if (process.env.NODE_ENV !== "production") {

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

@@ -0,0 +1,52 @@
+import type { GroupLabelOptions } from "../group/group-label.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormStore } from "./form-store.js";
+/**
+ * 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
+ * is properly set on the form group element.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * // This component must be wrapped with FormGroup
+ * const props = useFormGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+export declare const useFormGroupLabel: import("../utils/types.js").Hook<FormGroupLabelOptions<"div">>;
+/**
+ * Renders a label in a form group. This component must be wrapped with
+ * [`FormGroup`](https://ariakit.org/reference/form-group) so the
+ * `aria-labelledby` prop is properly set on the form group element.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     username: "",
+ *     email: "",
+ *   },
+ * });
+ * <Form store={form}>
+ *   <FormGroup>
+ *     <FormGroupLabel>Account</FormGroupLabel>
+ *     <FormLabel name={form.names.username}>Username</FormLabel>
+ *     <FormInput name={form.names.username} />
+ *     <FormLabel name={form.names.email}>Email</FormLabel>
+ *     <FormInput name={form.names.email} />
+ *   </FormGroup>
+ * </Form>
+ * ```
+ */
+export declare const FormGroupLabel: import("../utils/types.js").Component<FormGroupLabelOptions<"div">>;
+export interface FormGroupLabelOptions<T extends As = "div"> extends GroupLabelOptions<T> {
+    /**
+     * Object returned by the
+     * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
+     * provided, the closest [`Form`](https://ariakit.org/reference/form) or
+     * [`FormProvider`](https://ariakit.org/reference/form-provider) components'
+     * context will be used.
+     */
+    store?: FormStore;
+}
+export type FormGroupLabelProps<T extends As = "div"> = Props<FormGroupLabelOptions<T>>;

package/cjs/form/form-group.cjs

@@ -1,14 +1,15 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _DHBKOFHJcjs = require('../__chunks/DHBKOFHJ.cjs');
-require('../__chunks/ZMSJUL55.cjs');
-require('../__chunks/K56WQU76.cjs');
-require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
 
+var _UKXZY6PKcjs = require('../__chunks/UKXZY6PK.cjs');
+require('../__chunks/KSAZE5E2.cjs');
+require('../__chunks/FE3YCURH.cjs');
+require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+require('../__chunks/AV6KTKLE.cjs');
 
 
-exports.FormGroup = _DHBKOFHJcjs.FormGroup; exports.useFormGroup = _DHBKOFHJcjs.useFormGroup;
+
+exports.FormGroup = _UKXZY6PKcjs.FormGroup; exports.useFormGroup = _UKXZY6PKcjs.useFormGroup;

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

@@ -0,0 +1,52 @@
+import type { GroupOptions } from "../group/group.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormStore } from "./form-store.js";
+/**
+ * Returns props to create a `FormGroup` component.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore();
+ * const props = useFormGroup({ store });
+ * <Form store={store}>
+ *   <Role {...props}>
+ *     <FormGroupLabel>Label</FormGroupLabel>
+ *   </Role>
+ * </Form>
+ * ```
+ */
+export declare const useFormGroup: import("../utils/types.js").Hook<FormGroupOptions<"div">>;
+/**
+ * Renders a form group.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     username: "",
+ *     email: "",
+ *   },
+ * });
+ * <Form store={form}>
+ *   <FormGroup>
+ *     <FormGroupLabel>Account</FormGroupLabel>
+ *     <FormLabel name={form.names.username}>Username</FormLabel>
+ *     <FormInput name={form.names.username} />
+ *     <FormLabel name={form.names.email}>Email</FormLabel>
+ *     <FormInput name={form.names.email} />
+ *   </FormGroup>
+ * </Form>
+ * ```
+ */
+export declare const FormGroup: import("../utils/types.js").Component<FormGroupOptions<"div">>;
+export interface FormGroupOptions<T extends As = "div"> extends GroupOptions<T> {
+    /**
+     * Object returned by the
+     * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
+     * provided, the closest [`Form`](https://ariakit.org/reference/form) or
+     * [`FormProvider`](https://ariakit.org/reference/form-provider) components'
+     * context will be used.
+     */
+    store?: FormStore;
+}
+export type FormGroupProps<T extends As = "div"> = Props<FormGroupOptions<T>>;

package/cjs/form/form-input.cjs

@@ -1,36 +1,37 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-var _JJ22W2WScjs = require('../__chunks/JJ22W2WS.cjs');
 
+var _VCDQISP7cjs = require('../__chunks/VCDQISP7.cjs');
 
-var _VLI66TFLcjs = require('../__chunks/VLI66TFL.cjs');
-require('../__chunks/FMI5QF7N.cjs');
-require('../__chunks/NHZBX2RS.cjs');
 
+var _FROYTN4Bcjs = require('../__chunks/FROYTN4B.cjs');
+require('../__chunks/R5A2WTWB.cjs');
+require('../__chunks/BZTDJIVT.cjs');
 
-var _GQAB4M3Bcjs = require('../__chunks/GQAB4M3B.cjs');
-require('../__chunks/LHHW5ZQP.cjs');
 
+var _Z3GCTNW4cjs = require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/75KXQZJX.cjs');
 
 
 
-var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
 
+var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
 
-var _5WLTMVVQcjs = require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
 
+var _EO6LS72Hcjs = require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
 
 
 
-var _72I2GWXFcjs = require('../__chunks/72I2GWXF.cjs');
+
+var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/form/form-input.ts
 var _misc = require('@ariakit/core/utils/misc');
-var useFormInput = _Z5PUIG6Acjs.createHook.call(void 0, 
+var useFormInput = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
-    var _b = _a, { store, name: nameProp } = _b, props = _72I2GWXFcjs.__objRest.call(void 0, _b, ["store", "name"]);
-    const context = _VLI66TFLcjs.useFormContext.call(void 0, );
+    var _b = _a, { store, name: nameProp } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "name"]);
+    const context = _FROYTN4Bcjs.useFormContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -38,26 +39,26 @@ var useFormInput = _Z5PUIG6Acjs.createHook.call(void 0,
     );
     const name = `${nameProp}`;
     const onChangeProp = props.onChange;
-    const onChange = _5WLTMVVQcjs.useEvent.call(void 0, (event) => {
+    const onChange = _EO6LS72Hcjs.useEvent.call(void 0, (event) => {
       onChangeProp == null ? void 0 : onChangeProp(event);
       if (event.defaultPrevented)
         return;
       store == null ? void 0 : store.setValue(name, event.target.value);
     });
     const value = store.useValue(name);
-    props = _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {
+    props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       value
     }, props), {
       onChange
     });
-    props = _GQAB4M3Bcjs.useFocusable.call(void 0, props);
-    props = _JJ22W2WScjs.useFormField.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, { store, name }, props));
+    props = _Z3GCTNW4cjs.useFocusable.call(void 0, props);
+    props = _VCDQISP7cjs.useFormField.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, name }, props));
     return props;
   }
 );
-var FormInput = _Z5PUIG6Acjs.createMemoComponent.call(void 0, (props) => {
+var FormInput = _RNZNGEL4cjs.createMemoComponent.call(void 0, (props) => {
   const htmlProps = useFormInput(props);
-  return _Z5PUIG6Acjs.createElement.call(void 0, "input", htmlProps);
+  return _RNZNGEL4cjs.createElement.call(void 0, "input", htmlProps);
 });
 if (process.env.NODE_ENV !== "production") {
   FormInput.displayName = "FormInput";

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

@@ -0,0 +1,42 @@
+import type { FocusableOptions } from "../focusable/focusable.js";
+import type { As, Props } from "../utils/types.js";
+import type { FormFieldOptions } from "./form-field.js";
+/**
+ * Returns props to create a `FormInput` component. Unlike `useFormField`, this
+ * hook returns the `value` and `onChange` props that can be passed to a native
+ * input, select or textarea elements.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { email: "" } });
+ * const props = useFormInput({ store, name: store.names.email });
+ * <Form store={store}>
+ *   <FormLabel name={store.names.email}>Email</FormLabel>
+ *   <Role {...props} render={<input />} />
+ * </Form>
+ * ```
+ */
+export declare const useFormInput: import("../utils/types.js").Hook<FormInputOptions<"input">>;
+/**
+ * Renders a form input. Unlike
+ * [`FormField`](https://ariakit.org/reference/form-field), this component
+ * passes the `value` and `onChange` props down to the underlying element that
+ * can be a native input, select or textarea elements.
+ * @see https://ariakit.org/components/form
+ * @example
+ * ```jsx
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     email: "",
+ *   },
+ * });
+ * <Form store={form}>
+ *   <FormLabel name={form.names.email}>Email</FormLabel>
+ *   <FormInput name={form.names.email} />
+ * </Form>
+ * ```
+ */
+export declare const FormInput: import("../utils/types.js").Component<FormInputOptions<"input">>;
+export interface FormInputOptions<T extends As = "input"> extends FormFieldOptions<T>, FocusableOptions<T> {
+}
+export type FormInputProps<T extends As = "input"> = Props<FormInputOptions<T>>;