import { n as CollectionItemOptions } from "../collection-item-DRA-Dc3W.js";
import { t as FormStore } from "../form-store-C15msSpw.js";
import { Props } from "@ariakit/react-utils";
import { ElementType, FocusEvent } from "react";
import { BooleanOrCallback } from "@ariakit/utils";
import { StringLike } from "@ariakit/components/form/types";
//#region src/form/form-control.d.ts
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.
 * 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.com/components/form
 * @example
 * ```jsx
 * const store = useFormStore({ defaultValues: { content: "" } });
 * const props = useFormControl({ store, name: store.names.content });
 * const value = useFormValue(store, 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>
 * ```
 */
declare const useFormControl: import("@ariakit/react-utils").Hook<"input", FormControlOptions<"input">>;
/**
 * Abstract component that renders a form control. Unlike
 * [`FormInput`](https://ariakit.com/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.com/components/form
 * @example
 * ```jsx {11-19}
 * const form = useFormStore({
 *   defaultValues: {
 *     content: "",
 *   },
 * });
 *
 * const value = useFormValue(form, form.names.content);
 *
 * <Form store={form}>
 *   <FormLabel name={form.names.content}>Content</FormLabel>
 *   <FormControl
 *     name={form.names.content}
 *     render={
 *       <Editor
 *         value={value}
 *         onChange={(value) => form.setValue(form.names.content, value)}
 *       />
 *     }
 *   />
 * </Form>
 * ```
 */
declare const FormControl: (props: FormControlProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
interface FormControlOptions<T extends ElementType = TagName> extends CollectionItemOptions<T> {
  /**
   * Object returned by the
   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not
   * provided, the closest [`Form`](https://ariakit.com/reference/form) or
   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'
   * context will be used.
   */
  store?: FormStore;
  /**
   * Field name. This can either be a string corresponding to an existing
   * property name in the
   * [`values`](https://ariakit.com/reference/use-form-store#values) state of
   * the store, or a reference to a field name from the
   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the
   * store, ensuring type safety.
   *
   * Live examples:
   * - [FormRadio](https://ariakit.com/examples/form-radio)
   * - [Form with Select](https://ariakit.com/examples/form-select)
   */
  name: StringLike;
  /**
   * Whether the field should be marked touched on blur.
   * @default true
   */
  touchOnBlur?: BooleanOrCallback<FocusEvent>;
}
type FormControlProps<T extends ElementType = TagName> = Props<T, FormControlOptions<T>>;
//#endregion
export { FormControl, FormControlOptions, FormControlProps, useFormControl };
//# sourceMappingURL=form-control.d.ts.map