@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
152 lines • 5.92 kB
TypeScript
import * as React from "react";
import { Controller, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch, type Control, type ControllerFieldState, type ControllerProps, type ControllerRenderProps, type DefaultValues, type FieldError, type FieldErrors, type FieldPath, type FieldValues, type Path, type RegisterOptions, type Resolver, type SubmitHandler, type UseControllerReturn, type UseFieldArrayReturn, type UseFormReturn } from "react-hook-form";
/**
* Provides the `react-hook-form` context to nested form primitives.
*
* @remarks
* - Renders the `FormProvider` component from `react-hook-form`
* - Built on `react-hook-form`
*
* @example
* ```tsx
* <Form {...form}>
* <form>...</form>
* </Form>
* ```
*
* @see {@link https://react-hook-form.com/docs/formprovider | React Hook Form FormProvider Docs}
*/
declare const Form: (<TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element) & {
displayName: string;
};
interface FormControlProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
/**
* Single form control element or fallback content to receive field accessibility attributes.
* @default undefined
*/
children: React.ReactNode;
}
/**
* Binds a single field name to the shared form field context.
*
* @remarks
* - Renders the `Controller` component from `react-hook-form`
* - Built on `react-hook-form` controller primitives
*
* @example
* ```tsx
* <FormField
* control={form.control}
* name='email'
* render={({field}) => <input {...field} />}
* />
* ```
*
* @see {@link https://react-hook-form.com/docs/usecontroller/controller | React Hook Form Controller Docs}
*/
declare const FormField: {
<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>): React.JSX.Element;
displayName: string;
};
type UseFormFieldReturn = {
id: string;
name: FieldPath<FieldValues>;
formItemId: string;
formDescriptionId: string;
formMessageId: string;
invalid: boolean;
isDirty: boolean;
isTouched: boolean;
isValidating: boolean;
error?: ReturnType<ReturnType<typeof useFormContext>["getFieldState"]>["error"];
};
/**
* Returns the resolved form field metadata for nested form primitives.
*
* @remarks
* Reads the nearest {@link FormField} and {@link FormItem} contexts, then combines them
* with `react-hook-form` field state to expose stable IDs and validation metadata.
*
* @example
* ```tsx
* const field = useFormField();
* ```
*
* @see {@link https://react-hook-form.com/docs/useformcontext | React Hook Form useFormContext Docs}
*/
declare const useFormField: () => UseFormFieldReturn;
/**
* Wraps a label, control, description, and message into a single form item.
*
* @remarks
* - Renders a `<div>` element
* - Built on the shared form item context
*
* @example
* ```tsx
* <FormItem>
* <FormLabel>Email</FormLabel>
* </FormItem>
* ```
*
* @see {@link https://react-hook-form.com/docs/useformcontext | React Hook Form Docs}
*/
declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
/**
* Renders the accessible label for the current form item.
*
* @remarks
* - Renders a `<label>` element
* - Built on the shared form field metadata hook
*
* @example
* ```tsx
* <FormLabel>Email</FormLabel>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/label | HTML label element}
*/
declare const FormLabel: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>>;
/**
* Provides react-hook-form field metadata to a single control element.
*
* @remarks
* This replaces the former Radix Slot-based implementation by cloning the
* direct child element and merging the accessibility attributes required by the
* surrounding form primitives. A fallback wrapper is rendered only when the
* child is not a valid React element.
*/
declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLElement>>;
/**
* Renders helper text that describes the current form control.
*
* @remarks
* - Renders a `<p>` element
* - Built on the shared form field metadata hook
*
* @example
* ```tsx
* <FormDescription>We'll never share your email.</FormDescription>
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/p | HTML paragraph element}
*/
declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
/**
* Renders the validation message or fallback message for the current form control.
*
* @remarks
* - Renders a `<p>` element when content is available
* - Built on the shared form field metadata hook
*
* @example
* ```tsx
* <FormMessage />
* ```
*
* @see {@link https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-invalid | ARIA invalid state}
*/
declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
export { Controller, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useController, useFieldArray, useForm, useFormContext, useFormField, useFormState, useWatch, };
export type { Control, ControllerFieldState, ControllerProps, ControllerRenderProps, DefaultValues, FieldError, FieldErrors, FieldPath, FieldValues, FormControlProps, Path, RegisterOptions, Resolver, SubmitHandler, UseControllerReturn, UseFieldArrayReturn, UseFormReturn, };
//# sourceMappingURL=form.d.ts.map