@saas-ui/forms 2.0.0-next.3 → 2.0.0-next.5

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import * as React$1 from 'react';
 import React__default from 'react';
-import { NumberInputProps as NumberInputProps$1, InputProps, RadioGroupProps, SystemProps, StackDirection, RadioProps, MenuProps, ButtonProps, MenuOptionGroupProps, MenuListProps, SelectProps as SelectProps$1, FormControlProps, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, HTMLChakraProps, SimpleGridProps, ResponsiveValue, FormLabelProps, ThemingProps } from '@chakra-ui/react';
-import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
+import { NumberInputProps as NumberInputProps$1, InputProps, RadioProps, RadioGroupProps, SystemProps, StackDirection, MenuItemOptionProps, MenuProps, ButtonProps, MenuOptionGroupProps, MenuListProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, HTMLChakraProps, FormControlProps, SimpleGridProps, ResponsiveValue, FormLabelProps, ThemingProps } from '@chakra-ui/react';
+import { MaybeRenderProp } from '@chakra-ui/react-utils';
 import * as react_hook_form from 'react-hook-form';
-import { RegisterOptions, FieldValues, FieldPath, UseFormProps, ResolverOptions, ResolverResult, WatchObserver, SubmitHandler, SubmitErrorHandler, UseFormReturn, UseFieldArrayReturn } from 'react-hook-form';
+import { FieldValues, UseFormReturn, UseFormProps, ResolverOptions, ResolverResult, WatchObserver, SubmitHandler, SubmitErrorHandler, FieldPath, RegisterOptions, UseFieldArrayReturn } from 'react-hook-form';
 export { BatchFieldArrayUpdate, ChangeHandler, Control, Controller, ControllerFieldState, ControllerProps, ControllerRenderProps, CriteriaMode, CustomElement, DeepMap, DeepPartial, DeepPartialSkipArrayKey, DefaultValues, DelayCallback, EmptyObject, ErrorOption, EventType, FieldArray, FieldArrayMethodProps, FieldArrayWithId, Field as FieldDef, FieldElement, FieldError, FieldErrors, FieldName, FieldNamesMarkedBoolean, FieldRefs, FieldValue, FieldValues, FormProvider, FormProviderProps, FormState, FormStateProxy, FormStateSubjectRef, GetIsDirty, InternalFieldErrors, InternalFieldName, InternalNameSet, IsAny, IsFlatObject, KeepStateOptions, LiteralUnion, Message, Mode, MultipleFieldErrors, Names, NativeFieldValue, NestedValue, NonUndefined, Noop, Primitive, ReadFormState, Ref, RefCallBack, RegisterOptions, Resolver, ResolverError, ResolverOptions, ResolverResult, ResolverSuccess, SetFieldValue, SetValueConfig, Subjects, SubmitErrorHandler, SubmitHandler, TriggerConfig, UnpackNestedValue, UseControllerProps, UseControllerReturn, UseFieldArrayProps, UseFieldArrayReturn, UseFormClearErrors, UseFormGetValues, UseFormHandleSubmit, UseFormProps, UseFormRegister, UseFormRegisterReturn, UseFormReset, UseFormResetField, UseFormReturn, UseFormSetError, UseFormSetFocus, UseFormSetValue, UseFormStateProps, UseFormStateReturn, UseFormTrigger, UseFormUnregister, UseFormWatch, UseWatchProps, Validate, ValidateResult, ValidationMode, ValidationRule, ValidationValue, ValidationValueMessage, WatchInternal, WatchObserver, appendErrors, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
+import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 import { FocusableElement } from '@chakra-ui/utils';
-import { MaybeRenderProp } from '@chakra-ui/react-utils';
 import { UseStepperReturn, UseStepperProps, StepperStepsProps } from '@saas-ui/core';
 
 interface NumberInputOptions {
@@ -29,33 +29,32 @@ interface NumberInputProps extends NumberInputProps$1, NumberInputOptions {
 interface PasswordOptions {
     viewIcon?: React__default.ReactNode;
     viewOffIcon?: React__default.ReactNode;
+    leftAddon?: React__default.ReactNode;
 }
 interface PasswordInputProps extends InputProps, PasswordOptions {
 }
 declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", PasswordInputProps>;
 
-interface Option$3 extends RadioProps {
-    value: string;
-    label?: string;
+interface RadioOption extends Omit<RadioProps, 'value' | 'label'>, FieldOption {
 }
+type RadioOptions = FieldOptions<RadioOption>;
 interface RadioInputOptions {
-    options: Option$3[];
+    options: RadioOptions;
     spacing?: SystemProps['margin'];
     direction?: StackDirection;
 }
 interface RadioInputProps extends Omit<RadioGroupProps, 'children'>, RadioInputOptions {
 }
+declare const RadioInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", RadioInputProps>;
 
-interface Option$2 {
-    value: string;
-    label?: string;
+interface SelectOption extends Omit<MenuItemOptionProps, 'value'>, FieldOption {
 }
 interface SelectOptions {
     /**
      * An array of options
      * If you leave this empty the children prop will be rendered.
      */
-    options?: Option$2[];
+    options?: FieldOptions<SelectOption>;
     /**
      * Props passed to the MenuList.
      */
@@ -85,173 +84,61 @@ interface NativeSelectProps extends SelectProps$1, NativeSelectOptions {
 }
 declare const NativeSelect: _chakra_ui_system_dist_system_types.ComponentWithAs<"select", NativeSelectProps>;
 
-interface Option {
-    value: string;
-    label?: string;
-    [key: string]: unknown;
-}
-type FieldRules = Pick<RegisterOptions, 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'>;
-interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<FormControlProps, 'label' | 'type'> {
-    /**
-     * The field name
-     */
-    name: TName;
-    /**
-     * The field label
-     */
-    label?: string;
-    /**
-     * Hide the field label
-     */
-    hideLabel?: boolean;
-    /**
-     * Field help text
-     */
-    help?: string;
-    /**
-     * React hook form rules
-     */
-    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
-    /**
-     * Build-in types:
-     * - text
-     * - number
-     * - password
-     * - textarea
-     * - select
-     * - native-select
-     * - checkbox
-     * - radio
-     * - switch
-     * - pin
-     *
-     * Will default to a text field if there is no matching type.
-     */
-    type?: string;
-    /**
-     * The input placeholder
-     */
-    placeholder?: string;
-}
-declare const BaseField: React$1.FC<FieldProps>;
-type As<Props = any> = React$1.ElementType<Props>;
-type PropsOf<T extends As> = React$1.ComponentPropsWithoutRef<T> & {
-    type?: FieldTypes;
-};
-/**
- * Build-in types:
- * - text
- * - number
- * - password
- * - textarea
- * - select
- * - native-select
- * - checkbox
- * - radio
- * - switch
- * - pin
- *
- * Will default to a text field if there is no matching type.
- */
-declare const Field: (<TFieldValues extends FieldValues>(props: FieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & FieldTypeProps & {
-    ref?: React$1.ForwardedRef<FocusableElement> | undefined;
-}) => React$1.ReactElement) & {
-    displayName?: string | undefined;
-};
-declare const withControlledInput: (InputComponent: React$1.FC<any>) => _chakra_ui_system_dist_system_types.ComponentWithAs<React$1.FC<any>, FieldProps<FieldValues, string>>;
-declare const withUncontrolledInput: (InputComponent: React$1.FC<any>) => _chakra_ui_system_dist_system_types.ComponentWithAs<React$1.FC<any>, FieldProps<FieldValues, string>>;
-interface RegisterFieldTypeOptions {
-    isControlled?: boolean;
-    hideLabel?: boolean;
-    BaseField?: React$1.FC<any>;
-}
-/**
- * Register a new field type
- * @param type The name for this field in kebab-case, eg `email` or `array-field`
- * @param component The React component
- * @param options
- * @param options.isControlled Set this to true if this is a controlled field.
- * @param options.hideLabel Hide the field label, for example for the checkbox field.
- */
-declare const registerFieldType: <T extends object>(type: string, component: React$1.FC<T>, options?: RegisterFieldTypeOptions) => React$1.FC<T & FieldProps<FieldValues, string>>;
 interface InputFieldProps extends InputProps {
     type?: string;
     leftAddon?: React$1.ReactNode;
     rightAddon?: React$1.ReactNode;
 }
-declare const InputField: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
+declare const InputField: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
 interface NumberInputFieldProps extends NumberInputProps {
     type: 'number';
 }
-declare const NumberInputField: React$1.FC<NumberInputFieldProps & FieldProps<FieldValues, string>>;
-declare const PasswordInputField: React$1.FC<PasswordInputProps & FieldProps<FieldValues, string>>;
-declare const TextareaField: React$1.FC<TextareaProps & FieldProps<FieldValues, string>>;
-declare const SwitchField: React$1.FC<SwitchProps & FieldProps<FieldValues, string>>;
-declare const SelectField: React$1.FC<SelectProps & FieldProps<FieldValues, string>>;
-declare const CheckboxField: React$1.FC<CheckboxProps & FieldProps<FieldValues, string>>;
-declare const RadioField: React$1.FC<RadioInputProps & FieldProps<FieldValues, string>>;
-declare const NativeSelectField: React$1.FC<NativeSelectProps & FieldProps<FieldValues, string>>;
+declare const NumberInputField: React$1.FC<NumberInputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const PasswordInputField: React$1.FC<PasswordInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const TextareaField: React$1.FC<TextareaProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const SwitchField: React$1.FC<SwitchProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const SelectField: React$1.FC<SelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const CheckboxField: React$1.FC<CheckboxProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const RadioField: React$1.FC<RadioInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const NativeSelectField: React$1.FC<NativeSelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
 interface PinFieldProps extends Omit<UsePinInputProps, 'type'> {
     pinLength?: number;
     pinType?: 'alphanumeric' | 'number';
     spacing?: SystemProps['margin'];
 }
-declare const PinField: React$1.FC<PinFieldProps & FieldProps<FieldValues, string>>;
-declare const fieldTypes: {
-    text: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
-    email: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
-    url: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
-    phone: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
-    number: React$1.FC<NumberInputFieldProps & FieldProps<FieldValues, string>>;
-    password: React$1.FC<PasswordInputProps & FieldProps<FieldValues, string>>;
-    textarea: React$1.FC<TextareaProps & FieldProps<FieldValues, string>>;
-    switch: React$1.FC<SwitchProps & FieldProps<FieldValues, string>>;
-    checkbox: React$1.FC<CheckboxProps & FieldProps<FieldValues, string>>;
-    radio: React$1.FC<RadioInputProps & FieldProps<FieldValues, string>>;
-    pin: React$1.FC<PinFieldProps & FieldProps<FieldValues, string>>;
-    select: React$1.FC<SelectProps & FieldProps<FieldValues, string>>;
-    'native-select': React$1.FC<NativeSelectProps & FieldProps<FieldValues, string>>;
-};
-type FieldTypes = typeof fieldTypes;
-type FieldType<Props = any> = React$1.ElementType<Props>;
-type TypeProps<P extends FieldType, T> = React$1.ComponentPropsWithoutRef<P> & {
-    type: T;
-};
-type FieldTypeProps = {
-    [Property in keyof FieldTypes]: TypeProps<FieldTypes[Property], Property>;
-}[keyof FieldTypes] | {
-    type?: string;
+declare const PinField: React$1.FC<PinFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const defaultFieldTypes: {
+    text: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    email: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    url: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    phone: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    number: React$1.FC<NumberInputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    password: React$1.FC<PasswordInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    textarea: React$1.FC<TextareaProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    switch: React$1.FC<SwitchProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    select: React$1.FC<SelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    checkbox: React$1.FC<CheckboxProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    radio: React$1.FC<RadioInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    pin: React$1.FC<PinFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    'native-select': React$1.FC<NativeSelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
 };
-
-interface DisplayFieldProps extends FormControlProps, Omit<FieldProps, 'type' | 'label'> {
-}
-declare const DisplayField: React$1.FC<DisplayFieldProps>;
-declare const FormValue: React$1.FC<{
-    name: string;
-}>;
+type DefaultFields = typeof defaultFieldTypes;
 
 type FieldResolver = {
-    getFields(): FieldProps[];
-    getNestedFields(name: string): FieldProps[];
+    getFields(): BaseFieldProps[];
+    getNestedFields(name: string): BaseFieldProps[];
 };
-interface SchemaField extends FieldProps {
+interface SchemaField extends BaseFieldProps {
     items?: SchemaField[];
     properties?: Record<string, SchemaField>;
 }
 type ObjectSchema = Record<string, SchemaField>;
 declare const objectFieldResolver: (schema: ObjectSchema) => FieldResolver;
 
-interface FieldsProps {
-    schema: any;
-    fieldResolver?: FieldResolver;
-    focusFirstField?: boolean;
-}
-declare const Fields: React$1.FC<FieldsProps>;
-
-interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends UseFormReturn<TFieldValues, TContext> {
-    Field: React$1.FC<FieldProps<TFieldValues>>;
+interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn<TFieldValues, TContext> {
+    Field: React$1.FC<TFieldTypes>;
 }
-interface FormOptions<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any> {
+interface FormOptions<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> {
     /**
      * The form schema, supports Yup, Zod, and AJV.
      */
@@ -275,11 +162,16 @@ interface FormOptions<TFieldValues extends FieldValues = FieldValues, TContext e
     /**
      * The form children, can be a render prop or a ReactNode.
      */
-    children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext>>;
+    children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext, TFieldTypes>>;
 }
-interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any> extends UseFormProps<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TFieldValues, TContext, TSchema> {
+interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> extends UseFormProps<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TFieldValues, TContext, TSchema, TFieldTypes> {
 }
-declare const Form: (<TFieldValues extends FieldValues, TContext extends object = object, TSchema = any>(props: FormProps<TFieldValues, TContext, TSchema> & {
+/**
+ * The wrapper component provides context, state, and focus management.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
+declare const Form: (<TFieldValues extends FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>>(props: FormProps<TFieldValues, TContext, TSchema, TFieldTypes> & {
     ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
 }) => React$1.ReactElement) & {
     displayName?: string | undefined;
@@ -288,10 +180,104 @@ declare const Form: (<TFieldValues extends FieldValues, TContext extends object
 };
 type GetResolver = <TFieldValues extends FieldValues, TContext extends object>(schema: any) => (values: TFieldValues, context: TContext | undefined, options: ResolverOptions<TFieldValues>) => Promise<ResolverResult<TFieldValues>>;
 type GetFieldResolver = (schema: any) => FieldResolver;
-interface CreateFormProps {
-    resolver?: GetResolver;
+
+type FieldOption = {
+    label: string;
+    value: string;
+};
+type FieldOptions<TOption extends FieldOption = FieldOption> = Array<string> | Array<TOption>;
+type ValueOf<T> = T[keyof T];
+type ShallowMerge<A, B> = Omit<A, keyof B> & B;
+interface BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<FormControlProps, 'label' | 'type'> {
+    /**
+     * The field name
+     */
+    name: TName;
+    /**
+     * The field label
+     */
+    label?: string;
+    /**
+     * Hide the field label
+     */
+    hideLabel?: boolean;
+    /**
+     * Field help text
+     */
+    help?: string;
+    /**
+     * React hook form rules
+     */
+    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
+    /**
+     * Build-in types:
+     * text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
+     *
+     * Will default to a text field if there is no matching type.
+     */
+    type?: string;
+    /**
+     * The input placeholder
+     */
+    placeholder?: string;
 }
-declare function createForm<Schema = any>({ resolver }: CreateFormProps): <TFieldValues extends FieldValues, TContext extends object = object, TSchema extends Schema = Schema>(props: FormProps<TFieldValues, TContext, TSchema>) => JSX.Element;
+type MergeFieldProps<FieldDefs, TFieldValues extends FieldValues = FieldValues> = ValueOf<{
+    [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props> ? {
+        type?: K;
+    } & ShallowMerge<Props, BaseFieldProps<TFieldValues>> : never;
+}>;
+type FieldProps<TFieldValues extends FieldValues = FieldValues> = MergeFieldProps<DefaultFields, TFieldValues>;
+type FormChildren<FieldDefs, TFieldValues extends FieldValues = FieldValues, TContext extends object = object> = MaybeRenderProp<FormRenderContext<TFieldValues, TContext, MergeFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues>>>;
+type WithFields<TFormProps extends FormProps<any, any, any, any>, FieldDefs> = TFormProps extends FormProps<infer TFieldValues, infer TContext> ? Omit<TFormProps, 'children'> & {
+    children: FormChildren<FieldDefs, TFieldValues, TContext>;
+} : never;
+
+interface DisplayFieldProps extends FormControlProps, Omit<FieldProps, 'type' | 'label'> {
+}
+/**
+ *
+ *
+ * @see Docs https://saas-ui.dev/
+ */
+declare const DisplayField: React$1.FC<DisplayFieldProps>;
+declare const FormValue: React$1.FC<{
+    name: string;
+}>;
+
+interface Option {
+    value: string;
+    label?: string;
+    [key: string]: unknown;
+}
+type FieldRules = Pick<RegisterOptions, 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'>;
+/**
+ * Form field component.
+ *
+ * Build-in types:
+ * text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
+ *
+ * Will default to a text field if there is no matching type.
+
+ * @see Docs https://saas-ui.dev/docs/components/forms/field
+ */
+declare const Field: (<TFieldValues extends FieldValues>(props: FieldProps<TFieldValues> & {
+    ref?: React$1.ForwardedRef<FocusableElement> | undefined;
+}) => React$1.ReactElement) & {
+    displayName?: string | undefined;
+};
+
+interface FieldsProps {
+    schema: any;
+    fieldResolver?: FieldResolver;
+    focusFirstField?: boolean;
+}
+declare const AutoFields: React$1.FC<FieldsProps>;
+
+declare const FieldsProvider: React__default.FC<{
+    value: Record<string, React__default.FC<any>>;
+    children: React__default.ReactNode;
+}>;
+declare const useField: (type: string) => React__default.FC<any>;
 
 interface AutoFormOptions {
     /**
@@ -313,14 +299,23 @@ interface AutoFormOptions {
 interface AutoFormProps<TFieldValues extends FieldValues, TContext extends object = object> extends Omit<FormProps<TFieldValues, TContext>, 'schema' | 'children'>, AutoFormOptions {
     children?: React$1.ReactNode;
 }
+/**
+ * The wrapper component that manages context and state.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/auto-form
+ */
 declare const AutoForm: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As<any>, AutoFormProps<FieldValues, object>>;
 
-type FormLayoutProps = SimpleGridProps;
+interface FormLayoutProps extends SimpleGridProps {
+}
 /**
- * FormLayout
+ * Create consistent field spacing and positioning.
+ *
  *
  * Renders form items in a `SimpleGrid`
  * @see https://chakra-ui.com/docs/layout/simple-grid
+ *
+ * @see https://saas-ui.dev/docs/components/forms/form
  */
 declare const FormLayout: {
     ({ children, ...props }: FormLayoutProps): JSX.Element;
@@ -343,6 +338,11 @@ interface SubmitButtonProps extends ButtonProps {
      */
     disableIfInvalid?: boolean;
 }
+/**
+ * A button with type submit and default color scheme primary and isLoading state when the form is submitting.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
 declare const SubmitButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", SubmitButtonProps>;
 
 interface UseArrayFieldReturn extends UseFieldArrayReturn {
@@ -460,6 +460,11 @@ interface ArrayFieldRowProps extends FormLayoutProps {
      */
     children: React$1.ReactNode;
 }
+/**
+ * Render prop component, to get access to the internal fields state. Must be a child of ArrayFieldContainer.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 declare const ArrayFieldRow: React$1.FC<ArrayFieldRowProps>;
 interface ArrayFieldRowFieldsProps extends FormLayoutProps {
     /**
@@ -475,16 +480,41 @@ interface ArrayFieldRowFieldsProps extends FormLayoutProps {
      */
     children: React$1.ReactNode;
 }
+/**
+ * Add the name prefix to the fields and acts as a horizontal form layout by default.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 declare const ArrayFieldRowFields: React$1.FC<ArrayFieldRowFieldsProps>;
+/**
+ * The row container component providers row context.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 declare const ArrayFieldRowContainer: React$1.FC<ArrayFieldRowProps>;
+/**
+ * The default remove button.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 declare const ArrayFieldRemoveButton: React$1.FC<ArrayFieldButtonProps>;
+/**
+ * The default add button.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 declare const ArrayFieldAddButton: React$1.FC<ArrayFieldButtonProps>;
-interface ArrayFieldProps extends ArrayFieldOptions, Omit<FieldProps, 'defaultValue'> {
+interface ArrayFieldProps extends ArrayFieldOptions, Omit<BaseFieldProps, 'defaultValue'> {
 }
 interface ArrayField {
     id: string;
     [key: string]: unknown;
 }
+/**
+ * The wrapper component that composes the default ArrayField functionality.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 declare const ArrayField: ((props: ArrayFieldProps & {
     ref?: React$1.ForwardedRef<UseArrayFieldReturn>;
 }) => React$1.ReactElement) & {
@@ -497,15 +527,25 @@ declare const ArrayFieldRows: {
     ({ children, }: ArrayFieldRowsProps): React$1.ReactElement | null;
     displayName: string;
 };
+/**
+ * The container component provides context and state management.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 declare const ArrayFieldContainer: React$1.ForwardRefExoticComponent<ArrayFieldProps & React$1.RefAttributes<UseArrayFieldReturn>>;
 
-interface ObjectFieldProps extends FieldProps {
+interface ObjectFieldProps extends BaseFieldProps {
     name: string;
     children: React$1.ReactNode;
     columns?: ResponsiveValue<number>;
     spacing?: ResponsiveValue<string | number>;
 }
 declare const FormLegend: (props: FormLabelProps) => JSX.Element;
+/**
+ * The object field component.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/object-field
+ */
 declare const ObjectField: React$1.FC<ObjectFieldProps>;
 
 interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues> {
@@ -516,6 +556,11 @@ interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues> {
     isExact?: boolean;
     condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean;
 }
+/**
+ * Conditionally render parts of a form.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
 declare const DisplayIf: {
     <TFieldValues extends FieldValues = FieldValues>({ children, name, defaultValue, isDisabled, isExact, condition, }: DisplayIfProps<TFieldValues>): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
     displayName: string;
@@ -560,6 +605,11 @@ declare function useFormStep(props: UseFormStepProps): StepState;
 
 interface StepFormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends UseStepFormProps<TFieldValues> {
 }
+/**
+ * The wrapper component provides context, state, and focus management.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
 declare const StepForm: <TFieldValues extends FieldValues>(props: StepFormProps<TFieldValues, object> & {
     ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
 }) => React$1.ReactElement;
@@ -579,16 +629,36 @@ interface FormStepOptions {
 }
 interface FormStepperProps extends StepperStepsProps, ThemingProps<'Stepper'> {
 }
+/**
+ * Renders a stepper that displays progress above the form.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
 declare const FormStepper: React$1.FC<FormStepperProps>;
 interface FormStepProps extends FormStepOptions, Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
     onSubmit?: FormStepSubmitHandler;
 }
+/**
+ * The form step containing fields for a specific step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
 declare const FormStep: React$1.FC<FormStepProps>;
+/**
+ * A button that this opens the previous step when clicked. Disabled on the first step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
 declare const PrevButton: React$1.FC<ButtonProps>;
 interface NextButtonProps extends Omit<ButtonProps, 'children'> {
     submitLabel?: string;
     label?: string;
 }
+/**
+ * A button that submits the active step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
 declare const NextButton: React$1.FC<NextButtonProps>;
 
 interface WatchFieldProps<Value = unknown, TFieldValues extends FieldValues = FieldValues> {
@@ -603,4 +673,33 @@ declare const WatchField: <Value = unknown, TFieldValues extends FieldValues = F
 type InputRightButtonProps = ButtonProps;
 declare const InputRightButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", ButtonProps>;
 
-export { ArrayField, ArrayFieldAddButton, ArrayFieldButtonProps, ArrayFieldContainer, ArrayFieldOptions, ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, ArrayFieldRowsProps, As, AutoForm, AutoFormProps, BaseField, CheckboxField, CreateFormProps, DisplayField, DisplayFieldProps, DisplayIf, DisplayIfProps, Field, FieldProps, FieldResolver, FieldRules, Fields, FieldsProps, Form, FormLayout, FormLayoutProps, FormLegend, FormProps, FormStep, FormStepOptions, FormStepProps, FormStepSubmitHandler, FormStepper, FormStepperProps, FormValue, GetFieldResolver, GetResolver, InputField, InputFieldProps, InputRightButton, InputRightButtonProps, NativeSelect, NativeSelectField, NativeSelectProps, NextButton, NextButtonProps, NumberInputField, NumberInputFieldProps, ObjectField, ObjectFieldProps, ObjectSchema, Option, PasswordInput, PasswordInputField, PasswordInputProps, PinField, PinFieldProps, PrevButton, PropsOf, RadioField, RegisterFieldTypeOptions, Select, SelectField, SelectProps, StepForm, StepFormContext, StepFormProps, StepFormProvider, StepState, SubmitButton, SubmitButtonProps, SwitchField, TextareaField, UseArrayFieldReturn, UseArrayFieldRowProps, UseArrayFieldRowReturn, UseFormStepProps, UseStepFormProps, UseStepFormReturn, WatchField, WatchFieldProps, createForm, objectFieldResolver, registerFieldType, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useFormStep, useStepForm, useStepFormContext, withControlledInput, withUncontrolledInput };
+/**
+ * The default BaseField component
+ * Composes the Chakra UI FormControl component, with FormLabel, FormHelperText and FormErrorMessage.
+ */
+declare const BaseField: React$1.FC<BaseFieldProps>;
+
+interface CreateFormProps<FieldDefs> {
+    resolver?: GetResolver;
+    fields?: FieldDefs extends Record<string, React__default.FC<any>> ? FieldDefs : never;
+}
+declare function createForm<FieldDefs, Schema = any>({ resolver, fields, }?: CreateFormProps<FieldDefs>): <TFieldValues extends FieldValues, TContext extends object = object, TSchema extends Schema = Schema>(props: Omit<FormProps<TFieldValues, TContext, TSchema, FieldProps<TFieldValues>>, "children"> & {
+    children: FormChildren<FieldDefs, TFieldValues, TContext>;
+}) => JSX.Element;
+
+interface CreateFieldOptions {
+    isControlled?: boolean;
+    hideLabel?: boolean;
+    BaseField?: React$1.FC<any>;
+}
+/**
+ * Register a new field type
+ * @param type The name for this field in kebab-case, eg `email` or `array-field`
+ * @param component The React component
+ * @param options
+ * @param options.isControlled Set this to true if this is a controlled field.
+ * @param options.hideLabel Hide the field label, for example for the checkbox field.
+ */
+declare const createField: <TProps extends object>(component: React$1.FC<TProps>, options?: CreateFieldOptions) => React$1.FC<TProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+
+export { ArrayField, ArrayFieldAddButton, ArrayFieldButtonProps, ArrayFieldContainer, ArrayFieldOptions, ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, ArrayFieldRowsProps, AutoFields, AutoForm, AutoFormProps, BaseField, BaseFieldProps, CheckboxField, CreateFieldOptions, CreateFormProps, DefaultFields, DisplayField, DisplayFieldProps, DisplayIf, DisplayIfProps, Field, FieldOptions, FieldProps, FieldResolver, FieldRules, FieldsProps, FieldsProvider, Form, FormLayout, FormLayoutProps, FormLegend, FormProps, FormRenderContext, FormStep, FormStepOptions, FormStepProps, FormStepSubmitHandler, FormStepper, FormStepperProps, FormValue, GetFieldResolver, GetResolver, InputField, InputFieldProps, InputRightButton, InputRightButtonProps, NativeSelect, NativeSelectField, NativeSelectProps, NextButton, NextButtonProps, NumberInputField, NumberInputFieldProps, ObjectField, ObjectFieldProps, ObjectSchema, Option, PasswordInput, PasswordInputField, PasswordInputProps, PinField, PinFieldProps, PrevButton, RadioField, RadioInput, RadioInputProps, RadioOption, RadioOptions, Select, SelectField, SelectOption, SelectProps, StepForm, StepFormContext, StepFormProps, StepFormProvider, StepState, SubmitButton, SubmitButtonProps, SwitchField, TextareaField, UseArrayFieldReturn, UseArrayFieldRowProps, UseArrayFieldRowReturn, UseFormStepProps, UseStepFormProps, UseStepFormReturn, WatchField, WatchFieldProps, WithFields, createField, createForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormStep, useStepForm, useStepFormContext };