shadcn-react
Version:
A simple wrapper for shadcn/ui
43 lines (42 loc) • 3.57 kB
TypeScript
import { FieldValues, FormProviderProps, FormProps as HookFormProps, ControllerProps, FieldPath, useFormState, useWatch, useFieldArray, UseFormProps as UseHookFormProps, UseFormReturn as UseHookFormReturn } from 'react-hook-form';
import { z, type ZodSchema } from 'zod';
import React, { ReactElement } from 'react';
import { useFormField } from '../ui/form';
export { useFormState, useWatch, useFieldArray, useFormField };
export type UseFormProps<TSchema extends ZodSchema, TContext = any> = UseHookFormProps<z.infer<TSchema>, TContext> & {
schema: TSchema;
};
export interface UseFormReturn<TSchema extends ZodSchema, TContext = any, TTransformedValues extends FieldValues = z.infer<TSchema>> extends UseHookFormReturn<z.infer<TSchema>, TContext, TTransformedValues> {
Field: React.FunctionComponent<FormFieldProps<TSchema, FieldPath<z.infer<TSchema>>>>;
}
export declare function useForm<TSchema extends ZodSchema, TContext = any, TTransformedValues extends FieldValues = z.infer<TSchema>>(props: UseFormProps<TSchema, TContext>): UseFormReturn<TSchema, TContext, TTransformedValues>;
export declare const useFormContext: <TSchema extends ZodSchema, TContext = any, TTransformedValues extends FieldValues = z.infer<TSchema>>() => UseFormReturn<TSchema, TContext, TTransformedValues>;
export interface FormProps<TSchema extends ZodSchema, TContext = any, TTransformedValues extends FieldValues = z.infer<TSchema>> extends Omit<FormProviderProps<z.infer<TSchema>, TContext, TTransformedValues>, 'children'>, Omit<HookFormProps<z.infer<TSchema>, TTransformedValues>, 'control'> {
/**
* @default 'top'
*/
labelPosition?: 'top' | 'left';
labelClassName?: string;
labelStyle?: React.CSSProperties;
}
export declare function Form<TSchema extends ZodSchema, TContext = any, TTransformedValues extends FieldValues = z.infer<TSchema>>(props: FormProps<TSchema, TContext, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
export declare namespace Form {
var Field: typeof FormField;
var Item: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
var Label: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-label").LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
var Control: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
var Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
var Message: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
var Slot: typeof FormSlot;
}
export interface FormFieldProps<TSchema extends ZodSchema, TName extends FieldPath<z.infer<TSchema>> = FieldPath<z.infer<TSchema>>> extends Omit<ControllerProps<z.infer<TSchema>, TName>, 'control' | 'render'> {
label?: React.ReactNode;
desc?: React.ReactNode;
children?: ReactElement | ControllerProps<z.infer<TSchema>, TName>['render'];
}
declare function FormField<TSchema extends ZodSchema, TName extends FieldPath<z.infer<TSchema>> = FieldPath<z.infer<TSchema>>>(props: FormFieldProps<TSchema, TName>): import("react/jsx-runtime").JSX.Element;
export interface FormSlotProps {
label?: React.ReactNode;
children?: React.ReactNode;
}
declare function FormSlot(props: FormSlotProps): import("react/jsx-runtime").JSX.Element;