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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (60) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/README.md +53 -6
  3. package/dist/ajv/index.d.ts +358 -11
  4. package/dist/ajv/index.js +7 -9
  5. package/dist/ajv/index.js.map +1 -1
  6. package/dist/ajv/index.mjs +7 -10
  7. package/dist/ajv/index.mjs.map +1 -1
  8. package/dist/index.d.ts +448 -247
  9. package/dist/index.js +707 -682
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.mjs +691 -666
  12. package/dist/index.mjs.map +1 -1
  13. package/dist/yup/index.d.ts +580 -21
  14. package/dist/yup/index.js +6 -10
  15. package/dist/yup/index.js.map +1 -1
  16. package/dist/yup/index.mjs +4 -8
  17. package/dist/yup/index.mjs.map +1 -1
  18. package/dist/zod/index.d.ts +580 -11
  19. package/dist/zod/index.js +5 -0
  20. package/dist/zod/index.js.map +1 -1
  21. package/dist/zod/index.mjs +5 -1
  22. package/dist/zod/index.mjs.map +1 -1
  23. package/package.json +19 -10
  24. package/src/array-field.tsx +82 -45
  25. package/src/auto-form.tsx +7 -3
  26. package/src/base-field.tsx +54 -0
  27. package/src/create-field.tsx +144 -0
  28. package/src/create-form.tsx +54 -0
  29. package/src/default-fields.tsx +163 -0
  30. package/src/display-field.tsx +9 -11
  31. package/src/display-if.tsx +20 -13
  32. package/src/field-resolver.ts +10 -8
  33. package/src/field.tsx +18 -445
  34. package/src/fields-context.tsx +23 -0
  35. package/src/fields.tsx +34 -21
  36. package/src/form-context.tsx +84 -0
  37. package/src/form.tsx +69 -52
  38. package/src/index.ts +44 -4
  39. package/src/input-right-button/input-right-button.stories.tsx +1 -1
  40. package/src/input-right-button/input-right-button.tsx +0 -2
  41. package/src/layout.tsx +16 -11
  42. package/src/number-input/number-input.tsx +9 -5
  43. package/src/object-field.tsx +13 -8
  44. package/src/password-input/password-input.stories.tsx +23 -2
  45. package/src/password-input/password-input.tsx +6 -6
  46. package/src/pin-input/pin-input.tsx +1 -5
  47. package/src/radio/radio-input.stories.tsx +1 -1
  48. package/src/radio/radio-input.tsx +12 -10
  49. package/src/select/native-select.tsx +1 -4
  50. package/src/select/select-context.tsx +130 -0
  51. package/src/select/select.stories.tsx +116 -85
  52. package/src/select/select.test.tsx +1 -1
  53. package/src/select/select.tsx +160 -146
  54. package/src/step-form.tsx +29 -11
  55. package/src/submit-button.tsx +5 -1
  56. package/src/types.ts +144 -0
  57. package/src/use-array-field.tsx +9 -3
  58. package/src/utils.ts +23 -1
  59. package/src/watch-field.tsx +2 -6
  60. /package/src/radio/{radio.test.tsx → radio-input.test.tsx} +0 -0
package/dist/index.d.ts CHANGED
@@ -1,14 +1,37 @@
1
1
  import * as React$1 from 'react';
2
2
  import React__default from 'react';
3
- 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';
4
3
  import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
4
+ import { ButtonProps, NumberInputProps as NumberInputProps$1, InputProps, RadioProps, RadioGroupProps, SystemProps, StackDirection, MenuProps, MenuListProps, MenuItemOptionProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, FormControlProps, SimpleGridProps, ResponsiveValue, FormLabelProps, HTMLChakraProps, ThemingProps } from '@chakra-ui/react';
5
5
  import * as react_hook_form from 'react-hook-form';
6
- import { RegisterOptions, FieldValues, FieldPath, UseFormProps, ResolverOptions, ResolverResult, WatchObserver, SubmitHandler, SubmitErrorHandler, UseFormReturn, UseFieldArrayReturn } from 'react-hook-form';
7
- 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';
8
- import { FocusableElement } from '@chakra-ui/utils';
6
+ import { FieldValues, FieldPath, RegisterOptions, UseFormReturn as UseFormReturn$1, UseFieldArrayReturn, UseFormProps, WatchObserver, SubmitHandler, SubmitErrorHandler, ResolverOptions, ResolverResult, FormProviderProps as FormProviderProps$1 } from 'react-hook-form';
7
+ 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, 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, useFormState, useWatch } from 'react-hook-form';
9
8
  import { MaybeRenderProp } from '@chakra-ui/react-utils';
9
+ import { FocusableElement } from '@chakra-ui/utils';
10
10
  import { UseStepperReturn, UseStepperProps, StepperStepsProps } from '@saas-ui/core';
11
11
 
12
+ interface SubmitButtonProps extends ButtonProps {
13
+ /**
14
+ * Disable the submit button if the form is untouched.
15
+ *
16
+ * Change the default behavior by updating
17
+ * `SubmitButton.defaultProps.disableIfUntouched`
18
+ */
19
+ disableIfUntouched?: boolean;
20
+ /**
21
+ * Disable the submit button if the form is invalid.
22
+ *
23
+ * Change the default behavior by updating
24
+ * `SubmitButton.defaultProps.disableIfInvalid`
25
+ */
26
+ disableIfInvalid?: boolean;
27
+ }
28
+ /**
29
+ * A button with type submit and default color scheme primary and isLoading state when the form is submitting.
30
+ *
31
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
32
+ */
33
+ declare const SubmitButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", SubmitButtonProps>;
34
+
12
35
  interface NumberInputOptions {
13
36
  /**
14
37
  * Hide the stepper.
@@ -29,50 +52,99 @@ interface NumberInputProps extends NumberInputProps$1, NumberInputOptions {
29
52
  interface PasswordOptions {
30
53
  viewIcon?: React__default.ReactNode;
31
54
  viewOffIcon?: React__default.ReactNode;
55
+ leftAddon?: React__default.ReactNode;
32
56
  }
33
57
  interface PasswordInputProps extends InputProps, PasswordOptions {
34
58
  }
35
59
  declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", PasswordInputProps>;
36
60
 
37
- interface Option$3 extends RadioProps {
38
- value: string;
39
- label?: string;
61
+ interface RadioOption extends Omit<RadioProps, 'value' | 'label'>, FieldOption {
40
62
  }
63
+ type RadioOptions = FieldOptions<RadioOption>;
41
64
  interface RadioInputOptions {
42
- options: Option$3[];
65
+ options: RadioOptions;
43
66
  spacing?: SystemProps['margin'];
44
67
  direction?: StackDirection;
45
68
  }
46
69
  interface RadioInputProps extends Omit<RadioGroupProps, 'children'>, RadioInputOptions {
47
70
  }
71
+ declare const RadioInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", RadioInputProps>;
48
72
 
49
- interface Option$2 {
50
- value: string;
51
- label?: string;
52
- }
53
73
  interface SelectOptions {
54
74
  /**
55
- * An array of options
56
- * If you leave this empty the children prop will be rendered.
75
+ * The name of the input field in a native form.
76
+ */
77
+ name: string;
78
+ /**
79
+ * The value of the select field.
80
+ */
81
+ value?: string | string[];
82
+ /**
83
+ * The initial value of the select field.
84
+ */
85
+ defaultValue?: string | string[];
86
+ /**
87
+ * The callback invoked when the value of the select field changes.
88
+ * @param value The value of the select field.
57
89
  */
58
- options?: Option$2[];
90
+ onChange?: (value: string | string[]) => void;
59
91
  /**
60
- * Props passed to the MenuList.
92
+ * The placeholder text when there's no value.
61
93
  */
62
- menuListProps?: MenuListProps;
94
+ placeholder?: string;
63
95
  /**
64
- * Customize how the value is rendered.
65
- * @type (value?: string[]) => React.ReactElement
96
+ * If `true`, the select will be disabled.
66
97
  */
67
- renderValue?: (value?: string[]) => React$1.ReactElement | undefined;
98
+ isDisabled?: boolean;
99
+ /**
100
+ * An array of options
101
+ * If you leave this empty the children prop will be rendered.
102
+ */
103
+ options?: FieldOptions<SelectOption>;
68
104
  /**
69
105
  * Enable multiple select.
70
106
  */
71
107
  multiple?: boolean;
108
+ /**
109
+ * The function used to render the value of the select field.
110
+ * @param value The value of the select field.
111
+ * @returns The rendered value.
112
+ */
113
+ renderValue?: (value: string | string[]) => React__default.ReactNode;
72
114
  }
73
- interface SelectProps extends Omit<MenuProps, 'children'>, Pick<ButtonProps, 'isDisabled' | 'leftIcon' | 'rightIcon'>, Pick<MenuOptionGroupProps, 'onChange'>, SelectOptions {
115
+
116
+ interface SelectProps extends Omit<MenuProps, 'children'>, SelectOptions {
117
+ }
118
+ interface SelectButtonProps extends ButtonProps {
74
119
  }
120
+ /**
121
+ * Button that opens the select menu and displays the selected value.
122
+ *
123
+ * @see https://saas-ui.dev/docs/components/forms/select
124
+ */
125
+ declare const SelectButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", SelectButtonProps>;
126
+ /**
127
+ * Allow users to select a value from a list of options.
128
+ *
129
+ * @see https://saas-ui.dev/docs/components/forms/select
130
+ */
75
131
  declare const Select: _chakra_ui_system_dist_system_types.ComponentWithAs<"select", SelectProps>;
132
+ interface SelectListProps extends MenuListProps {
133
+ }
134
+ /**
135
+ * The list of options to choose from.
136
+ *
137
+ * @see https://saas-ui.dev/docs/components/forms/select
138
+ */
139
+ declare const SelectList: React$1.FC<SelectListProps>;
140
+ interface SelectOption extends Omit<MenuItemOptionProps, 'value'>, FieldOption {
141
+ }
142
+ /**
143
+ * An option in a select list
144
+ *
145
+ * @see https://saas-ui.dev/docs/components/forms/select
146
+ */
147
+ declare const SelectOption: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", MenuItemOptionProps>;
76
148
 
77
149
  interface Option$1 {
78
150
  value: string;
@@ -85,17 +157,62 @@ interface NativeSelectProps extends SelectProps$1, NativeSelectOptions {
85
157
  }
86
158
  declare const NativeSelect: _chakra_ui_system_dist_system_types.ComponentWithAs<"select", NativeSelectProps>;
87
159
 
88
- interface Option {
89
- value: string;
90
- label?: string;
91
- [key: string]: unknown;
160
+ interface InputFieldProps extends InputProps {
161
+ type?: string;
162
+ leftAddon?: React$1.ReactNode;
163
+ rightAddon?: React$1.ReactNode;
92
164
  }
93
- type FieldRules = Pick<RegisterOptions, 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'>;
94
- interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<FormControlProps, 'label' | 'type'> {
165
+ declare const InputField: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
166
+ interface NumberInputFieldProps extends NumberInputProps {
167
+ type: 'number';
168
+ }
169
+ declare const NumberInputField: React$1.FC<NumberInputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
170
+ declare const PasswordInputField: React$1.FC<PasswordInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
171
+ declare const TextareaField: React$1.FC<TextareaProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
172
+ declare const SwitchField: React$1.FC<SwitchProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
173
+ declare const SelectField: React$1.FC<SelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
174
+ declare const CheckboxField: React$1.FC<CheckboxProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
175
+ declare const RadioField: React$1.FC<RadioInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
176
+ declare const NativeSelectField: React$1.FC<NativeSelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
177
+ interface PinFieldProps extends Omit<UsePinInputProps, 'type'> {
178
+ pinLength?: number;
179
+ pinType?: 'alphanumeric' | 'number';
180
+ spacing?: SystemProps['margin'];
181
+ }
182
+ declare const PinField: React$1.FC<PinFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
183
+ declare const defaultFieldTypes: {
184
+ text: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
185
+ email: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
186
+ url: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
187
+ phone: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
188
+ number: React$1.FC<NumberInputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
189
+ password: React$1.FC<PasswordInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
190
+ textarea: React$1.FC<TextareaProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
191
+ switch: React$1.FC<SwitchProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
192
+ select: React$1.FC<SelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
193
+ checkbox: React$1.FC<CheckboxProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
194
+ radio: React$1.FC<RadioInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
195
+ pin: React$1.FC<PinFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
196
+ 'native-select': React$1.FC<NativeSelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
197
+ };
198
+ type DefaultFields = typeof defaultFieldTypes;
199
+
200
+ type FieldOption = {
201
+ label?: string;
202
+ value: string;
203
+ };
204
+ type FieldOptions<TOption extends FieldOption = FieldOption> = Array<string> | Array<TOption>;
205
+ type ValueOf<T> = T[keyof T];
206
+ type ShallowMerge<A, B> = Omit<A, keyof B> & B;
207
+ type Split<S extends string, D extends string> = string extends S ? string[] : S extends '' ? [] : S extends `${infer T}${D}${infer U}` ? [T, ...Split<U, D>] : [S];
208
+ type MapPath<T extends string[]> = T extends [infer U, ...infer R] ? U extends string ? `${U extends `${number}` ? '$' : U}${R[0] extends string ? '.' : ''}${R extends string[] ? MapPath<R> : ''}` : '' : '';
209
+ type TransformPath<T extends string> = MapPath<Split<T, '.'>>;
210
+ type ArrayFieldPath<Name extends string> = Name extends string ? TransformPath<Name> : never;
211
+ interface BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<FormControlProps, 'label' | 'type'> {
95
212
  /**
96
213
  * The field name
97
214
  */
98
- name: TName;
215
+ name: TName | ArrayFieldPath<TName>;
99
216
  /**
100
217
  * The field label
101
218
  */
@@ -114,16 +231,7 @@ interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName exten
114
231
  rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
115
232
  /**
116
233
  * Build-in types:
117
- * - text
118
- * - number
119
- * - password
120
- * - textarea
121
- * - select
122
- * - native-select
123
- * - checkbox
124
- * - radio
125
- * - switch
126
- * - pin
234
+ * text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
127
235
  *
128
236
  * Will default to a text field if there is no matching type.
129
237
  */
@@ -133,218 +241,74 @@ interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName exten
133
241
  */
134
242
  placeholder?: string;
135
243
  }
136
- declare const BaseField: React$1.FC<FieldProps>;
137
- type As<Props = any> = React$1.ElementType<Props>;
138
- type PropsOf<T extends As> = React$1.ComponentPropsWithoutRef<T> & {
139
- type?: FieldTypes;
140
- };
141
- /**
142
- * Build-in types:
143
- * - text
144
- * - number
145
- * - password
146
- * - textarea
147
- * - select
148
- * - native-select
149
- * - checkbox
150
- * - radio
151
- * - switch
152
- * - pin
153
- *
154
- * Will default to a text field if there is no matching type.
155
- */
156
- declare const Field: (<TFieldValues extends FieldValues>(props: FieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & FieldTypeProps & {
157
- ref?: React$1.ForwardedRef<FocusableElement> | undefined;
158
- }) => React$1.ReactElement) & {
159
- displayName?: string | undefined;
160
- };
161
- declare const withControlledInput: (InputComponent: React$1.FC<any>) => _chakra_ui_system_dist_system_types.ComponentWithAs<React$1.FC<any>, FieldProps<FieldValues, string>>;
162
- declare const withUncontrolledInput: (InputComponent: React$1.FC<any>) => _chakra_ui_system_dist_system_types.ComponentWithAs<React$1.FC<any>, FieldProps<FieldValues, string>>;
163
- interface RegisterFieldTypeOptions {
164
- isControlled?: boolean;
165
- hideLabel?: boolean;
166
- BaseField?: React$1.FC<any>;
167
- }
168
- /**
169
- * Register a new field type
170
- * @param type The name for this field in kebab-case, eg `email` or `array-field`
171
- * @param component The React component
172
- * @param options
173
- * @param options.isControlled Set this to true if this is a controlled field.
174
- * @param options.hideLabel Hide the field label, for example for the checkbox field.
175
- */
176
- declare const registerFieldType: <T extends object>(type: string, component: React$1.FC<T>, options?: RegisterFieldTypeOptions) => React$1.FC<T & FieldProps<FieldValues, string>>;
177
- interface InputFieldProps extends InputProps {
178
- type?: string;
179
- leftAddon?: React$1.ReactNode;
180
- rightAddon?: React$1.ReactNode;
181
- }
182
- declare const InputField: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
183
- interface NumberInputFieldProps extends NumberInputProps {
184
- type: 'number';
185
- }
186
- declare const NumberInputField: React$1.FC<NumberInputFieldProps & FieldProps<FieldValues, string>>;
187
- declare const PasswordInputField: React$1.FC<PasswordInputProps & FieldProps<FieldValues, string>>;
188
- declare const TextareaField: React$1.FC<TextareaProps & FieldProps<FieldValues, string>>;
189
- declare const SwitchField: React$1.FC<SwitchProps & FieldProps<FieldValues, string>>;
190
- declare const SelectField: React$1.FC<SelectProps & FieldProps<FieldValues, string>>;
191
- declare const CheckboxField: React$1.FC<CheckboxProps & FieldProps<FieldValues, string>>;
192
- declare const RadioField: React$1.FC<RadioInputProps & FieldProps<FieldValues, string>>;
193
- declare const NativeSelectField: React$1.FC<NativeSelectProps & FieldProps<FieldValues, string>>;
194
- interface PinFieldProps extends Omit<UsePinInputProps, 'type'> {
195
- pinLength?: number;
196
- pinType?: 'alphanumeric' | 'number';
197
- spacing?: SystemProps['margin'];
198
- }
199
- declare const PinField: React$1.FC<PinFieldProps & FieldProps<FieldValues, string>>;
200
- declare const fieldTypes: {
201
- text: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
202
- email: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
203
- url: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
204
- phone: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
205
- number: React$1.FC<NumberInputFieldProps & FieldProps<FieldValues, string>>;
206
- password: React$1.FC<PasswordInputProps & FieldProps<FieldValues, string>>;
207
- textarea: React$1.FC<TextareaProps & FieldProps<FieldValues, string>>;
208
- switch: React$1.FC<SwitchProps & FieldProps<FieldValues, string>>;
209
- checkbox: React$1.FC<CheckboxProps & FieldProps<FieldValues, string>>;
210
- radio: React$1.FC<RadioInputProps & FieldProps<FieldValues, string>>;
211
- pin: React$1.FC<PinFieldProps & FieldProps<FieldValues, string>>;
212
- select: React$1.FC<SelectProps & FieldProps<FieldValues, string>>;
213
- 'native-select': React$1.FC<NativeSelectProps & FieldProps<FieldValues, string>>;
214
- };
215
- type FieldTypes = typeof fieldTypes;
216
- type FieldType<Props = any> = React$1.ElementType<Props>;
217
- type TypeProps<P extends FieldType, T> = React$1.ComponentPropsWithoutRef<P> & {
218
- type: T;
244
+ type FieldPathWithArray<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = TName | ArrayFieldPath<TName>;
245
+ type MergeFieldProps<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = ValueOf<{
246
+ [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props> ? {
247
+ type?: K;
248
+ } & ShallowMerge<Props, BaseFieldProps<TFieldValues, TName>> : never;
249
+ }>;
250
+ type FieldProps<TFieldValues extends FieldValues = FieldValues> = MergeFieldProps<DefaultFields, TFieldValues>;
251
+ type FormChildren<FieldDefs, TFieldValues extends FieldValues = FieldValues, TContext extends object = object> = MaybeRenderProp<FormRenderContext<TFieldValues, TContext, MergeFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues>>>;
252
+ type DefaultFieldOverrides = {
253
+ submit?: SubmitButtonProps;
254
+ [key: string]: any;
219
255
  };
220
- type FieldTypeProps = {
221
- [Property in keyof FieldTypes]: TypeProps<FieldTypes[Property], Property>;
222
- }[keyof FieldTypes] | {
223
- type?: string;
256
+ type FieldOverrides<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
257
+ [K in FieldPathWithArray<TFieldValues, TName>]?: Omit<MergeFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues>, 'name'>;
224
258
  };
225
-
226
- interface DisplayFieldProps extends FormControlProps, Omit<FieldProps, 'type' | 'label'> {
227
- }
228
- declare const DisplayField: React$1.FC<DisplayFieldProps>;
229
- declare const FormValue: React$1.FC<{
230
- name: string;
231
- }>;
259
+ type WithFields<TFormProps extends FormProps<any, any, any, any>, FieldDefs> = TFormProps extends FormProps<infer TFieldValues, infer TContext> ? Omit<TFormProps, 'children' | 'fields'> & {
260
+ children?: FormChildren<FieldDefs, TFieldValues, TContext>;
261
+ fields?: FieldOverrides<FieldDefs, TFieldValues> & {
262
+ submit?: SubmitButtonProps;
263
+ };
264
+ } : never;
232
265
 
233
266
  type FieldResolver = {
234
- getFields(): FieldProps[];
235
- getNestedFields(name: string): FieldProps[];
267
+ getFields(): BaseFieldProps[];
268
+ getNestedFields(name: string): BaseFieldProps[];
236
269
  };
237
- interface SchemaField extends FieldProps {
270
+ type GetFieldResolver<TSchema = any> = (schema: TSchema) => FieldResolver;
271
+ interface SchemaField extends BaseFieldProps {
238
272
  items?: SchemaField[];
239
273
  properties?: Record<string, SchemaField>;
240
274
  }
241
275
  type ObjectSchema = Record<string, SchemaField>;
242
- declare const objectFieldResolver: (schema: ObjectSchema) => FieldResolver;
243
-
244
- interface FieldsProps {
245
- schema: any;
246
- fieldResolver?: FieldResolver;
247
- focusFirstField?: boolean;
248
- }
249
- declare const Fields: React$1.FC<FieldsProps>;
276
+ declare const objectFieldResolver: GetFieldResolver<ObjectSchema>;
250
277
 
251
- interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends UseFormReturn<TFieldValues, TContext> {
252
- Field: React$1.FC<FieldProps<TFieldValues>>;
253
- }
254
- interface FormOptions<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any> {
255
- /**
256
- * The form schema, supports Yup, Zod, and AJV.
257
- */
258
- schema?: TSchema;
259
- /**
260
- * Triggers when any of the field change.
261
- */
262
- onChange?: WatchObserver<TFieldValues>;
263
- /**
264
- * The submit handler.
265
- */
266
- onSubmit: SubmitHandler<TFieldValues>;
267
- /**
268
- * Triggers when there are validation errors.
269
- */
270
- onError?: SubmitErrorHandler<TFieldValues>;
271
- /**
272
- * The Hook Form state ref.
273
- */
274
- formRef?: React$1.RefObject<UseFormReturn<TFieldValues, TContext>>;
275
- /**
276
- * The form children, can be a render prop or a ReactNode.
277
- */
278
- children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext>>;
279
- }
280
- 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> {
278
+ interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
279
+ children: React$1.ReactElement;
280
+ name: TName;
281
+ defaultValue?: unknown;
282
+ isDisabled?: boolean;
283
+ isExact?: boolean;
284
+ condition?: (value: unknown, context: UseFormReturn$1<TFieldValues>) => boolean;
281
285
  }
282
- declare const Form: (<TFieldValues extends FieldValues, TContext extends object = object, TSchema = any>(props: FormProps<TFieldValues, TContext, TSchema> & {
283
- ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
284
- }) => React$1.ReactElement) & {
285
- displayName?: string | undefined;
286
- getResolver?: GetResolver | undefined;
287
- getFieldResolver: GetFieldResolver;
286
+ /**
287
+ * Conditionally render parts of a form.
288
+ *
289
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
290
+ */
291
+ declare const DisplayIf: {
292
+ <TFieldValues extends FieldValues = FieldValues, TName extends react_hook_form.Path<TFieldValues> = react_hook_form.Path<TFieldValues>>({ children, name, defaultValue, isDisabled, isExact, condition, }: DisplayIfProps<TFieldValues, TName>): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
293
+ displayName: string;
288
294
  };
289
- type GetResolver = <TFieldValues extends FieldValues, TContext extends object>(schema: any) => (values: TFieldValues, context: TContext | undefined, options: ResolverOptions<TFieldValues>) => Promise<ResolverResult<TFieldValues>>;
290
- type GetFieldResolver = (schema: any) => FieldResolver;
291
- interface CreateFormProps {
292
- resolver?: GetResolver;
293
- }
294
- 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;
295
295
 
296
- interface AutoFormOptions {
297
- /**
298
- * The submit button label.
299
- * Pass `null` to render no submit button.
300
- */
301
- submitLabel?: React$1.ReactNode;
302
- /**
303
- * The schema.
304
- * Supports object schema, Zod, Yup or Ajv (JSON Schema).
305
- * @see https://www.saas-ui.dev/docs/forms/auto-form
306
- */
307
- schema: any;
308
- /**
309
- * The field resolver.
310
- */
311
- fieldResolver?: any;
312
- }
313
- interface AutoFormProps<TFieldValues extends FieldValues, TContext extends object = object> extends Omit<FormProps<TFieldValues, TContext>, 'schema' | 'children'>, AutoFormOptions {
314
- children?: React$1.ReactNode;
296
+ interface FormLayoutProps extends SimpleGridProps {
315
297
  }
316
- declare const AutoForm: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As<any>, AutoFormProps<FieldValues, object>>;
317
-
318
- type FormLayoutProps = SimpleGridProps;
319
298
  /**
320
- * FormLayout
299
+ * Create consistent field spacing and positioning.
300
+ *
321
301
  *
322
302
  * Renders form items in a `SimpleGrid`
323
303
  * @see https://chakra-ui.com/docs/layout/simple-grid
304
+ *
305
+ * @see https://saas-ui.dev/docs/components/forms/form
324
306
  */
325
307
  declare const FormLayout: {
326
308
  ({ children, ...props }: FormLayoutProps): JSX.Element;
327
309
  displayName: string;
328
310
  };
329
311
 
330
- interface SubmitButtonProps extends ButtonProps {
331
- /**
332
- * Disable the submit button if the form is untouched.
333
- *
334
- * Change the default behavior by updating
335
- * `SubmitButton.defaultProps.disableIfUntouched`
336
- */
337
- disableIfUntouched?: boolean;
338
- /**
339
- * Disable the submit button if the form is invalid.
340
- *
341
- * Change the default behavior by updating
342
- * `SubmitButton.defaultProps.disableIfInvalid`
343
- */
344
- disableIfInvalid?: boolean;
345
- }
346
- declare const SubmitButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", SubmitButtonProps>;
347
-
348
312
  interface UseArrayFieldReturn extends UseFieldArrayReturn {
349
313
  /**
350
314
  * The array field name
@@ -389,11 +353,11 @@ interface UseArrayFieldRowReturn {
389
353
  }
390
354
  declare const ArrayFieldRowProvider: React$1.Provider<UseArrayFieldRowReturn>;
391
355
  declare const useArrayFieldRowContext: () => UseArrayFieldRowReturn;
392
- interface ArrayFieldOptions {
356
+ interface ArrayFieldOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
393
357
  /**
394
358
  * The field name
395
359
  */
396
- name: string;
360
+ name: TName;
397
361
  /**
398
362
  * Default value for new values in the array
399
363
  */
@@ -413,12 +377,12 @@ declare const useArrayField: ({ name, defaultValue, keyName, min, max, }: ArrayF
413
377
  max: number | undefined;
414
378
  swap: react_hook_form.UseFieldArraySwap;
415
379
  move: react_hook_form.UseFieldArrayMove;
416
- prepend: react_hook_form.UseFieldArrayPrepend<react_hook_form.FieldValues, string>;
417
- append: react_hook_form.UseFieldArrayAppend<react_hook_form.FieldValues, string>;
380
+ prepend: react_hook_form.UseFieldArrayPrepend<FieldValues, string>;
381
+ append: react_hook_form.UseFieldArrayAppend<FieldValues, string>;
418
382
  remove: react_hook_form.UseFieldArrayRemove;
419
- insert: react_hook_form.UseFieldArrayInsert<react_hook_form.FieldValues, string>;
420
- update: react_hook_form.UseFieldArrayUpdate<react_hook_form.FieldValues, string>;
421
- replace: react_hook_form.UseFieldArrayReplace<react_hook_form.FieldValues, string>;
383
+ insert: react_hook_form.UseFieldArrayInsert<FieldValues, string>;
384
+ update: react_hook_form.UseFieldArrayUpdate<FieldValues, string>;
385
+ replace: react_hook_form.UseFieldArrayReplace<FieldValues, string>;
422
386
  fields: Record<string, string>[];
423
387
  };
424
388
  interface UseArrayFieldRowProps {
@@ -460,6 +424,11 @@ interface ArrayFieldRowProps extends FormLayoutProps {
460
424
  */
461
425
  children: React$1.ReactNode;
462
426
  }
427
+ /**
428
+ * Render prop component, to get access to the internal fields state. Must be a child of ArrayFieldContainer.
429
+ *
430
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
431
+ */
463
432
  declare const ArrayFieldRow: React$1.FC<ArrayFieldRowProps>;
464
433
  interface ArrayFieldRowFieldsProps extends FormLayoutProps {
465
434
  /**
@@ -475,16 +444,42 @@ interface ArrayFieldRowFieldsProps extends FormLayoutProps {
475
444
  */
476
445
  children: React$1.ReactNode;
477
446
  }
447
+ /**
448
+ * Add the name prefix to the fields and acts as a horizontal form layout by default.
449
+ *
450
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
451
+ */
478
452
  declare const ArrayFieldRowFields: React$1.FC<ArrayFieldRowFieldsProps>;
453
+ /**
454
+ * The row container component providers row context.
455
+ *
456
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
457
+ */
479
458
  declare const ArrayFieldRowContainer: React$1.FC<ArrayFieldRowProps>;
459
+ /**
460
+ * The default remove button.
461
+ *
462
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
463
+ */
480
464
  declare const ArrayFieldRemoveButton: React$1.FC<ArrayFieldButtonProps>;
465
+ /**
466
+ * The default add button.
467
+ *
468
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
469
+ */
481
470
  declare const ArrayFieldAddButton: React$1.FC<ArrayFieldButtonProps>;
482
- interface ArrayFieldProps extends ArrayFieldOptions, Omit<FieldProps, 'defaultValue'> {
471
+ interface ArrayFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends ArrayFieldOptions<TFieldValues, TName>, Omit<BaseFieldProps<TFieldValues, TName>, 'name' | 'defaultValue' | 'children'> {
472
+ children: MaybeRenderProp<ArrayField[]>;
483
473
  }
484
474
  interface ArrayField {
485
475
  id: string;
486
476
  [key: string]: unknown;
487
477
  }
478
+ /**
479
+ * The wrapper component that composes the default ArrayField functionality.
480
+ *
481
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
482
+ */
488
483
  declare const ArrayField: ((props: ArrayFieldProps & {
489
484
  ref?: React$1.ForwardedRef<UseArrayFieldReturn>;
490
485
  }) => React$1.ReactElement) & {
@@ -497,30 +492,131 @@ declare const ArrayFieldRows: {
497
492
  ({ children, }: ArrayFieldRowsProps): React$1.ReactElement | null;
498
493
  displayName: string;
499
494
  };
500
- declare const ArrayFieldContainer: React$1.ForwardRefExoticComponent<ArrayFieldProps & React$1.RefAttributes<UseArrayFieldReturn>>;
495
+ interface ArrayFieldContainerProps extends Omit<ArrayFieldProps, 'children'> {
496
+ children: React$1.ReactNode;
497
+ }
498
+ /**
499
+ * The container component provides context and state management.
500
+ *
501
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
502
+ */
503
+ declare const ArrayFieldContainer: React$1.ForwardRefExoticComponent<ArrayFieldContainerProps & React$1.RefAttributes<UseArrayFieldReturn>>;
501
504
 
502
- interface ObjectFieldProps extends FieldProps {
503
- name: string;
505
+ interface ObjectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends BaseFieldProps {
506
+ name: TName;
504
507
  children: React$1.ReactNode;
505
508
  columns?: ResponsiveValue<number>;
506
509
  spacing?: ResponsiveValue<string | number>;
507
510
  }
508
511
  declare const FormLegend: (props: FormLabelProps) => JSX.Element;
512
+ /**
513
+ * The object field component.
514
+ *
515
+ * @see Docs https://saas-ui.dev/docs/components/forms/object-field
516
+ */
509
517
  declare const ObjectField: React$1.FC<ObjectFieldProps>;
510
518
 
511
- interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues> {
512
- children: React$1.ReactElement;
519
+ interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn$1<TFieldValues, TContext> {
520
+ Field: React$1.FC<TFieldTypes>;
521
+ DisplayIf: React$1.FC<DisplayIfProps<TFieldValues>>;
522
+ ArrayField: React$1.FC<ArrayFieldProps<TFieldValues>>;
523
+ ObjectField: React$1.FC<ObjectFieldProps<TFieldValues>>;
524
+ }
525
+ interface FormOptions<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> {
526
+ /**
527
+ * The form schema.
528
+ */
529
+ schema?: TSchema;
530
+ /**
531
+ * Triggers when any of the field change.
532
+ */
533
+ onChange?: WatchObserver<TFieldValues>;
534
+ /**
535
+ * The submit handler.
536
+ */
537
+ onSubmit: SubmitHandler<TFieldValues>;
538
+ /**
539
+ * Triggers when there are validation errors.
540
+ */
541
+ onError?: SubmitErrorHandler<TFieldValues>;
542
+ /**
543
+ * The Hook Form state ref.
544
+ */
545
+ formRef?: React$1.RefObject<UseFormReturn$1<TFieldValues, TContext>>;
546
+ /**
547
+ * The form children, can be a render prop or a ReactNode.
548
+ */
549
+ children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext, TFieldTypes>>;
550
+ /**
551
+ * The field resolver, used to resolve the fields from schemas.
552
+ */
553
+ fieldResolver?: FieldResolver;
554
+ /**
555
+ * Field overrides
556
+ */
557
+ fields?: DefaultFieldOverrides;
558
+ }
559
+ 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> {
560
+ }
561
+ /**
562
+ * The wrapper component provides context, state, and focus management.
563
+ *
564
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
565
+ */
566
+ declare const Form$1: (<TFieldValues extends FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>>(props: FormProps<TFieldValues, TContext, TSchema, TFieldTypes> & {
567
+ ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
568
+ }) => React$1.ReactElement) & {
569
+ displayName?: string | undefined;
570
+ };
571
+ type GetResolver = <TFieldValues extends FieldValues, TContext extends object>(schema: any) => (values: TFieldValues, context: TContext | undefined, options: ResolverOptions<TFieldValues>) => Promise<ResolverResult<TFieldValues>>;
572
+
573
+ interface DisplayFieldProps extends FormControlProps, Omit<FieldProps, 'type' | 'label'> {
574
+ }
575
+ /**
576
+ *
577
+ *
578
+ * @see Docs https://saas-ui.dev/
579
+ */
580
+ declare const DisplayField: React$1.FC<DisplayFieldProps>;
581
+ declare const FormValue: React$1.FC<{
513
582
  name: string;
514
- defaultValue?: unknown;
515
- isDisabled?: boolean;
516
- isExact?: boolean;
517
- condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean;
583
+ }>;
584
+
585
+ interface Option {
586
+ value: string;
587
+ label?: string;
588
+ [key: string]: unknown;
518
589
  }
519
- declare const DisplayIf: {
520
- <TFieldValues extends FieldValues = FieldValues>({ children, name, defaultValue, isDisabled, isExact, condition, }: DisplayIfProps<TFieldValues>): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
521
- displayName: string;
590
+ type FieldRules = Pick<RegisterOptions, 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'>;
591
+ /**
592
+ * Form field component.
593
+ *
594
+ * Build-in types:
595
+ * text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
596
+ *
597
+ * Will default to a text field if there is no matching type.
598
+
599
+ * @see Docs https://saas-ui.dev/docs/components/forms/field
600
+ */
601
+ declare const Field: (<TFieldValues extends FieldValues>(props: FieldProps<TFieldValues> & {
602
+ ref?: React$1.ForwardedRef<FocusableElement> | undefined;
603
+ }) => React$1.ReactElement) & {
604
+ displayName?: string | undefined;
522
605
  };
523
606
 
607
+ interface FieldsProps<TSchema = any> {
608
+ schema?: TSchema;
609
+ fieldResolver?: FieldResolver;
610
+ focusFirstField?: boolean;
611
+ }
612
+ declare const AutoFields: React$1.FC<FieldsProps>;
613
+
614
+ declare const FieldsProvider: React__default.FC<{
615
+ value: Record<string, React__default.FC<any>>;
616
+ children: React__default.ReactNode;
617
+ }>;
618
+ declare const useField: (type: string) => React__default.FC<any>;
619
+
524
620
  interface StepState {
525
621
  name: string;
526
622
  schema?: any;
@@ -560,6 +656,11 @@ declare function useFormStep(props: UseFormStepProps): StepState;
560
656
 
561
657
  interface StepFormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends UseStepFormProps<TFieldValues> {
562
658
  }
659
+ /**
660
+ * The wrapper component provides context, state, and focus management.
661
+ *
662
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
663
+ */
563
664
  declare const StepForm: <TFieldValues extends FieldValues>(props: StepFormProps<TFieldValues, object> & {
564
665
  ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
565
666
  }) => React$1.ReactElement;
@@ -579,18 +680,70 @@ interface FormStepOptions {
579
680
  }
580
681
  interface FormStepperProps extends StepperStepsProps, ThemingProps<'Stepper'> {
581
682
  }
683
+ /**
684
+ * Renders a stepper that displays progress above the form.
685
+ *
686
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
687
+ */
582
688
  declare const FormStepper: React$1.FC<FormStepperProps>;
583
689
  interface FormStepProps extends FormStepOptions, Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
584
690
  onSubmit?: FormStepSubmitHandler;
585
691
  }
692
+ /**
693
+ * The form step containing fields for a specific step.
694
+ *
695
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
696
+ */
586
697
  declare const FormStep: React$1.FC<FormStepProps>;
698
+ /**
699
+ * A button that this opens the previous step when clicked. Disabled on the first step.
700
+ *
701
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
702
+ */
587
703
  declare const PrevButton: React$1.FC<ButtonProps>;
588
704
  interface NextButtonProps extends Omit<ButtonProps, 'children'> {
589
705
  submitLabel?: string;
590
706
  label?: string;
591
707
  }
708
+ /**
709
+ * A button that submits the active step.
710
+ *
711
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
712
+ */
592
713
  declare const NextButton: React$1.FC<NextButtonProps>;
593
714
 
715
+ type FormProviderProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TSchema = any> = FormProviderProps$1<TFieldValues, TContext> & {
716
+ fieldResolver?: FieldResolver;
717
+ schema?: TSchema;
718
+ fields?: {
719
+ [key: string]: unknown;
720
+ };
721
+ };
722
+ declare const useFormContext: <TFieldValues extends FieldValues = FieldValues, TContext = any, TSchema = any>() => {
723
+ fieldResolver?: FieldResolver | undefined;
724
+ schema?: any;
725
+ fields?: {
726
+ [key: string]: unknown;
727
+ } | undefined;
728
+ watch: react_hook_form.UseFormWatch<FieldValues>;
729
+ getValues: react_hook_form.UseFormGetValues<FieldValues>;
730
+ getFieldState: react_hook_form.UseFormGetFieldState<FieldValues>;
731
+ setError: react_hook_form.UseFormSetError<FieldValues>;
732
+ clearErrors: react_hook_form.UseFormClearErrors<FieldValues>;
733
+ setValue: react_hook_form.UseFormSetValue<FieldValues>;
734
+ trigger: react_hook_form.UseFormTrigger<FieldValues>;
735
+ formState: react_hook_form.FormState<FieldValues>;
736
+ resetField: react_hook_form.UseFormResetField<FieldValues>;
737
+ reset: react_hook_form.UseFormReset<FieldValues>;
738
+ handleSubmit: react_hook_form.UseFormHandleSubmit<FieldValues>;
739
+ unregister: react_hook_form.UseFormUnregister<FieldValues>;
740
+ control: react_hook_form.Control<FieldValues, any>;
741
+ register: react_hook_form.UseFormRegister<FieldValues>;
742
+ setFocus: react_hook_form.UseFormSetFocus<FieldValues>;
743
+ };
744
+ type UseFormReturn<TFieldValues extends FieldValues = FieldValues, TContext = any, TSchema = any> = ReturnType<typeof useFormContext>;
745
+ declare const FormProvider: <TFieldValues extends FieldValues = FieldValues, TContext = any, TSchema = any>(props: FormProviderProps<TFieldValues, TContext, TSchema>) => JSX.Element;
746
+
594
747
  interface WatchFieldProps<Value = unknown, TFieldValues extends FieldValues = FieldValues> {
595
748
  name: string;
596
749
  defaultValue?: Value;
@@ -603,4 +756,52 @@ declare const WatchField: <Value = unknown, TFieldValues extends FieldValues = F
603
756
  type InputRightButtonProps = ButtonProps;
604
757
  declare const InputRightButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", ButtonProps>;
605
758
 
606
- 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 };
759
+ /**
760
+ * The default BaseField component
761
+ * Composes the Chakra UI FormControl component, with FormLabel, FormHelperText and FormErrorMessage.
762
+ */
763
+ declare const BaseField: React$1.FC<BaseFieldProps>;
764
+
765
+ interface CreateFormProps<FieldDefs> {
766
+ resolver?: GetResolver;
767
+ fieldResolver?: GetFieldResolver;
768
+ fields?: FieldDefs extends Record<string, React__default.FC<any>> ? FieldDefs : never;
769
+ }
770
+ declare function createForm<FieldDefs, Schema = any>({ resolver, fieldResolver, fields, }?: CreateFormProps<FieldDefs>): (<TFieldValues extends FieldValues, TContext extends object = object, TSchema extends Schema = Schema>(props: Omit<FormProps<TFieldValues, TContext, TSchema, FieldProps<TFieldValues>>, "children" | "fields"> & {
771
+ children?: FormChildren<FieldDefs, TFieldValues, TContext>;
772
+ fields?: (FieldOverrides<FieldDefs, TFieldValues, react_hook_form.Path<TFieldValues>> & {
773
+ submit?: SubmitButtonProps | undefined;
774
+ }) | undefined;
775
+ } & {
776
+ ref?: React__default.ForwardedRef<HTMLFormElement> | undefined;
777
+ }) => React__default.ReactElement) & {
778
+ displayName?: string | undefined;
779
+ };
780
+
781
+ interface CreateFieldOptions {
782
+ isControlled?: boolean;
783
+ hideLabel?: boolean;
784
+ BaseField?: React$1.FC<any>;
785
+ }
786
+ /**
787
+ * Register a new field type
788
+ * @param type The name for this field in kebab-case, eg `email` or `array-field`
789
+ * @param component The React component
790
+ * @param options
791
+ * @param options.isControlled Set this to true if this is a controlled field.
792
+ * @param options.hideLabel Hide the field label, for example for the checkbox field.
793
+ */
794
+ declare const createField: <TProps extends object>(component: React$1.FC<TProps>, options?: CreateFieldOptions) => React$1.FC<TProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
795
+
796
+ declare const Form: (<TFieldValues extends react_hook_form.FieldValues, TContext extends object = object, TSchema extends any = any>(props: Omit<FormProps<TFieldValues, TContext, TSchema, FieldProps<TFieldValues>>, "children" | "fields"> & {
797
+ children?: FormChildren<unknown, TFieldValues, TContext>;
798
+ fields?: (FieldOverrides<unknown, TFieldValues, react_hook_form.Path<TFieldValues>> & {
799
+ submit?: SubmitButtonProps | undefined;
800
+ }) | undefined;
801
+ } & {
802
+ ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
803
+ }) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>) & {
804
+ displayName?: string | undefined;
805
+ };
806
+
807
+ export { ArrayField, ArrayFieldAddButton, ArrayFieldButtonProps, ArrayFieldContainer, ArrayFieldContainerProps, ArrayFieldOptions, ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, ArrayFieldRowsProps, AutoFields, BaseField, BaseFieldProps, Form$1 as BaseForm, CheckboxField, CreateFieldOptions, CreateFormProps, DefaultFields, DisplayField, DisplayFieldProps, DisplayIf, DisplayIfProps, Field, FieldOptions, FieldProps, FieldResolver, FieldRules, FieldsProps, FieldsProvider, Form, FormLayout, FormLayoutProps, FormLegend, FormProps, FormProvider, FormRenderContext, FormStep, FormStepOptions, FormStepProps, FormStepSubmitHandler, FormStepper, FormStepperProps, FormValue, GetFieldResolver, 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, SelectButton, SelectButtonProps, SelectField, SelectList, SelectListProps, 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, useFormContext, useFormStep, useStepForm, useStepFormContext };