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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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.js CHANGED
@@ -1,14 +1,16 @@
1
1
  'use strict';
2
2
 
3
- var React8 = require('react');
4
- var utils = require('@chakra-ui/utils');
3
+ var React11 = require('react');
5
4
  var reactHookForm = require('react-hook-form');
5
+ var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('@chakra-ui/react');
7
- var icons = require('@chakra-ui/icons');
8
- var reactUtils = require('@chakra-ui/react-utils');
9
7
  var core = require('@saas-ui/core');
8
+ var icons = require('@saas-ui/core/icons');
9
+ var utils = require('@chakra-ui/utils');
10
+ var reactUtils = require('@chakra-ui/react-utils');
10
11
 
11
- function _interopNamespaceDefault(e) {
12
+ function _interopNamespace(e) {
13
+ if (e && e.__esModule) return e;
12
14
  var n = Object.create(null);
13
15
  if (e) {
14
16
  Object.keys(e).forEach(function (k) {
@@ -25,70 +27,74 @@ function _interopNamespaceDefault(e) {
25
27
  return Object.freeze(n);
26
28
  }
27
29
 
28
- var React8__namespace = /*#__PURE__*/_interopNamespaceDefault(React8);
30
+ var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
29
31
 
30
- // src/display-field.tsx
32
+ // src/form-context.tsx
33
+ var FormContext = React11.createContext(null);
34
+ var useFormContext = () => {
35
+ const context = React11.useContext(FormContext);
36
+ const hookContext = reactHookForm.useFormContext();
37
+ if (!context) {
38
+ throw new Error("FormProvider must be used within a Form component");
39
+ }
40
+ return {
41
+ ...hookContext,
42
+ ...context
43
+ };
44
+ };
45
+ var useFieldProps = (name) => {
46
+ var _a;
47
+ const parsedName = name == null ? void 0 : name.replace(/\.[0-9]/g, ".$");
48
+ const context = useFormContext();
49
+ return (_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[parsedName];
50
+ };
51
+ var FormProvider = (props) => {
52
+ const { children, fieldResolver, schema, fields, ...rest } = props;
53
+ return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: { fieldResolver, schema, fields }, children }) });
54
+ };
31
55
  var DisplayField = ({
32
56
  name,
33
57
  label,
34
58
  placeholder,
35
59
  ...props
36
60
  }) => {
37
- return /* @__PURE__ */ React8__namespace.createElement(react.FormControl, {
38
- ...props
39
- }, label ? /* @__PURE__ */ React8__namespace.createElement(react.FormLabel, {
40
- htmlFor: name
41
- }, label) : null, /* @__PURE__ */ React8__namespace.createElement(react.Text, {
42
- fontSize: "md"
43
- }, /* @__PURE__ */ React8__namespace.createElement(FormValue, {
44
- name
45
- })));
61
+ return /* @__PURE__ */ jsxRuntime.jsxs(react.FormControl, { ...props, children: [
62
+ label ? /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { htmlFor: name, children: label }) : null,
63
+ /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "md", children: /* @__PURE__ */ jsxRuntime.jsx(FormValue, { name }) })
64
+ ] });
46
65
  };
47
- if (utils.__DEV__) {
48
- DisplayField.displayName = "DisplayField";
49
- }
66
+ DisplayField.displayName = "DisplayField";
50
67
  var FormValue = ({ name }) => {
51
- const { getValues } = reactHookForm.useFormContext();
68
+ const { getValues } = useFormContext();
52
69
  return getValues(name) || null;
53
70
  };
54
- if (utils.__DEV__) {
55
- FormValue.displayName = "FormValue";
56
- }
71
+ FormValue.displayName = "FormValue";
57
72
  var NumberInput = react.forwardRef((props, ref) => {
58
- const { hideStepper, incrementIcon, decrementIcon, ...rest } = props;
59
- return /* @__PURE__ */ React8__namespace.createElement(react.NumberInput, {
60
- ...rest,
61
- ref
62
- }, /* @__PURE__ */ React8__namespace.createElement(react.NumberInputField, null), !hideStepper && /* @__PURE__ */ React8__namespace.createElement(react.NumberInputStepper, null, /* @__PURE__ */ React8__namespace.createElement(react.NumberIncrementStepper, {
63
- children: incrementIcon
64
- }), /* @__PURE__ */ React8__namespace.createElement(react.NumberDecrementStepper, {
65
- children: decrementIcon
66
- })));
73
+ const {
74
+ hideStepper,
75
+ incrementIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronUpIcon, {}),
76
+ decrementIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronDownIcon, {}),
77
+ ...rest
78
+ } = props;
79
+ return /* @__PURE__ */ jsxRuntime.jsxs(react.NumberInput, { ...rest, ref, children: [
80
+ /* @__PURE__ */ jsxRuntime.jsx(react.NumberInputField, {}),
81
+ !hideStepper && /* @__PURE__ */ jsxRuntime.jsxs(react.NumberInputStepper, { children: [
82
+ /* @__PURE__ */ jsxRuntime.jsx(react.NumberIncrementStepper, { children: incrementIcon }),
83
+ /* @__PURE__ */ jsxRuntime.jsx(react.NumberDecrementStepper, { children: decrementIcon })
84
+ ] })
85
+ ] });
67
86
  });
68
87
  NumberInput.defaultProps = {
69
88
  hideStepper: false
70
89
  };
71
- if (utils.__DEV__) {
72
- NumberInput.displayName = "NumberInput";
73
- }
90
+ NumberInput.displayName = "NumberInput";
74
91
  var InputRightButton = react.forwardRef(
75
92
  (props, ref) => {
76
- return /* @__PURE__ */ React8__namespace.createElement(react.InputRightElement, {
77
- w: "auto",
78
- px: "1",
79
- py: "1",
80
- alignItems: "stretch"
81
- }, /* @__PURE__ */ React8__namespace.createElement(react.Button, {
82
- ref,
83
- height: "auto",
84
- ...props
85
- }));
93
+ return /* @__PURE__ */ jsxRuntime.jsx(react.InputRightElement, { w: "auto", px: "1", py: "1", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(react.Button, { ref, height: "auto", ...props }) });
86
94
  }
87
95
  );
88
96
  InputRightButton.id = "InputRightElement";
89
97
  InputRightButton.displayName = "InputRightButton";
90
-
91
- // src/password-input/password-input.tsx
92
98
  var PasswordInput = react.forwardRef(
93
99
  (props, ref) => {
94
100
  const {
@@ -99,219 +105,285 @@ var PasswordInput = react.forwardRef(
99
105
  width,
100
106
  size,
101
107
  variant,
108
+ leftAddon,
102
109
  ...inputProps
103
110
  } = props;
104
- const [show, setShow] = React8.useState(false);
111
+ const [show, setShow] = React11.useState(false);
105
112
  const handleClick = () => setShow(!show);
106
113
  const label = show ? "Hide password" : "Show password";
107
114
  let icon;
108
115
  if (show) {
109
- icon = viewIcon || /* @__PURE__ */ React8.createElement(icons.ViewIcon, null);
116
+ icon = viewIcon || /* @__PURE__ */ jsxRuntime.jsx(icons.ViewIcon, {});
110
117
  } else {
111
- icon = viewOffIcon || /* @__PURE__ */ React8.createElement(icons.ViewOffIcon, null);
118
+ icon = viewOffIcon || /* @__PURE__ */ jsxRuntime.jsx(icons.ViewOffIcon, {});
112
119
  }
113
120
  const groupProps = {
114
121
  width: w || width,
115
122
  size,
116
123
  variant
117
124
  };
118
- return /* @__PURE__ */ React8.createElement(react.InputGroup, {
119
- ...groupProps
120
- }, /* @__PURE__ */ React8.createElement(react.Input, {
121
- ...inputProps,
122
- ref,
123
- type: show ? "text" : "password",
124
- autoComplete: show ? "off" : autoComplete
125
- }), /* @__PURE__ */ React8.createElement(InputRightButton, {
126
- onClick: handleClick,
127
- "aria-label": label,
128
- variant: "ghost"
129
- }, icon));
125
+ return /* @__PURE__ */ jsxRuntime.jsxs(react.InputGroup, { ...groupProps, children: [
126
+ leftAddon,
127
+ /* @__PURE__ */ jsxRuntime.jsx(
128
+ react.Input,
129
+ {
130
+ ...inputProps,
131
+ ref,
132
+ type: show ? "text" : "password",
133
+ autoComplete: show ? "off" : autoComplete
134
+ }
135
+ ),
136
+ /* @__PURE__ */ jsxRuntime.jsx(
137
+ InputRightButton,
138
+ {
139
+ onClick: handleClick,
140
+ "aria-label": label,
141
+ variant: "ghost",
142
+ children: icon
143
+ }
144
+ )
145
+ ] });
130
146
  }
131
147
  );
132
- if (utils.__DEV__) {
133
- PasswordInput.displayName = "PasswordInput";
134
- }
148
+ PasswordInput.displayName = "PasswordInput";
149
+ var mapNestedFields = (name, children) => {
150
+ return React11__namespace.Children.map(children, (child) => {
151
+ if (React11__namespace.isValidElement(child) && child.props.name) {
152
+ let childName = child.props.name;
153
+ if (childName.includes(".")) {
154
+ childName = childName.replace(/^.*\.(.*)/, "$1");
155
+ } else if (childName.includes(".$")) {
156
+ childName = childName.replace(/^.*\.\$(.*)/, "$1");
157
+ }
158
+ return React11__namespace.cloneElement(child, {
159
+ ...child.props,
160
+ name: `${name}.${childName}`
161
+ });
162
+ }
163
+ return child;
164
+ });
165
+ };
166
+ var mapOptions = (options) => {
167
+ return options.map((option) => {
168
+ if (typeof option === "string") {
169
+ return {
170
+ label: option,
171
+ value: option
172
+ };
173
+ }
174
+ return option;
175
+ });
176
+ };
135
177
  var RadioInput = react.forwardRef(
136
- ({ options, spacing, direction, ...props }, ref) => {
178
+ ({ options: optionsProp, spacing, direction, ...props }, ref) => {
137
179
  const { onBlur, onChange, ...groupProps } = props;
138
- return /* @__PURE__ */ React8__namespace.createElement(react.RadioGroup, {
139
- onChange,
140
- ...groupProps
141
- }, /* @__PURE__ */ React8__namespace.createElement(react.Stack, {
142
- spacing,
143
- direction
144
- }, options.map(({ value, label, ...radioProps }, i) => {
145
- return /* @__PURE__ */ React8__namespace.createElement(react.Radio, {
146
- key: i,
147
- onBlur,
148
- value,
149
- ref,
150
- ...radioProps
151
- }, label || value);
152
- })));
180
+ const options = mapOptions(optionsProp);
181
+ return /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup, { onChange, ...groupProps, children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { spacing, direction, children: options.map(({ value, label, ...radioProps }, i) => {
182
+ return /* @__PURE__ */ jsxRuntime.jsx(
183
+ react.Radio,
184
+ {
185
+ onBlur,
186
+ value,
187
+ ref,
188
+ ...radioProps,
189
+ children: label || value
190
+ },
191
+ i
192
+ );
193
+ }) }) });
153
194
  }
154
195
  );
155
- if (utils.__DEV__) {
156
- RadioInput.displayName = "RadioInput";
157
- }
158
- var SelectButton = react.forwardRef((props, ref) => {
159
- const styles = react.useMultiStyleConfig("Input", props);
160
- const focusStyles = styles.field._focusVisible;
161
- const height = styles.field.h || styles.field.height;
162
- const buttonStyles = {
163
- fontWeight: "normal",
164
- textAlign: "left",
165
- color: "inherit",
166
- _active: {
167
- bg: "transparent"
168
- },
169
- minH: height,
170
- _focus: focusStyles,
171
- _expanded: focusStyles,
172
- ...styles.field,
173
- h: "auto"
174
- };
175
- return /* @__PURE__ */ React8__namespace.createElement(react.MenuButton, {
176
- as: react.Button,
177
- ...props,
178
- ref,
179
- sx: buttonStyles
180
- });
196
+ RadioInput.displayName = "RadioInput";
197
+ var [SelectProvider, useSelectContext] = reactUtils.createContext({
198
+ strict: true
181
199
  });
182
- if (utils.__DEV__) {
183
- SelectButton.displayName = "SelectButton";
184
- }
185
- var Select = react.forwardRef((props, ref) => {
200
+ var useSelect = (props) => {
186
201
  const {
187
202
  name,
188
- options,
189
- children,
190
- onChange,
191
- defaultValue,
192
203
  value,
204
+ defaultValue,
205
+ onChange,
206
+ multiple,
193
207
  placeholder,
208
+ options: optionsProp,
194
209
  isDisabled,
195
- leftIcon,
196
- rightIcon = /* @__PURE__ */ React8__namespace.createElement(icons.ChevronDownIcon, null),
197
- multiple,
198
- size,
199
- variant,
200
- menuListProps,
201
- renderValue = (value2) => value2 == null ? void 0 : value2.join(", "),
202
- ...rest
210
+ renderValue = (value2) => typeof value2 === "string" ? value2 : value2 == null ? void 0 : value2.join(", ")
203
211
  } = props;
204
- const menuProps = react.omitThemingProps(rest);
205
- const [currentValue, setCurrentValue] = React8__namespace.useState(value || defaultValue);
212
+ const [currentValue, setCurrentValue] = react.useControllableState({
213
+ value,
214
+ defaultValue,
215
+ onChange
216
+ });
206
217
  const controlProps = react.useFormControl({ name });
218
+ const options = React11__namespace.default.useMemo(
219
+ () => optionsProp && mapOptions(optionsProp),
220
+ [optionsProp]
221
+ );
207
222
  const handleChange = (value2) => {
208
223
  setCurrentValue(value2);
209
- onChange == null ? void 0 : onChange(value2);
210
224
  };
211
- const buttonProps = {
212
- isDisabled,
213
- leftIcon,
214
- rightIcon,
215
- size,
216
- variant
217
- };
218
- const getDisplayValue = React8__namespace.useCallback(
225
+ const getDisplayValue = React11__namespace.default.useCallback(
219
226
  (value2) => {
220
227
  if (!options) {
221
228
  return value2;
222
229
  }
223
230
  for (const option of options) {
224
- if (option.label && option.value === value2) {
225
- return option.label;
231
+ if (option.value === value2) {
232
+ return option.label || option.value;
226
233
  }
227
234
  }
228
235
  return value2;
229
236
  },
230
237
  [options]
231
238
  );
232
- const displayValue = currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
233
- getDisplayValue
234
- ) : [];
235
- return /* @__PURE__ */ React8__namespace.createElement(react.Menu, {
236
- ...menuProps,
237
- closeOnSelect: !multiple
238
- }, /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, {
239
- className: utils.cx("sui-select")
240
- }, /* @__PURE__ */ React8__namespace.createElement(SelectButton, {
241
- ref,
242
- ...buttonProps
243
- }, renderValue(displayValue) || placeholder), /* @__PURE__ */ React8__namespace.createElement(react.MenuList, {
244
- maxH: "60vh",
245
- overflowY: "auto",
246
- ...menuListProps
247
- }, /* @__PURE__ */ React8__namespace.createElement(react.MenuOptionGroup, {
248
- defaultValue: defaultValue || value,
249
- onChange: handleChange,
250
- type: multiple ? "checkbox" : "radio"
251
- }, options ? options.map(({ value: value2, label, ...rest2 }, i) => /* @__PURE__ */ React8__namespace.createElement(react.MenuItemOption, {
252
- key: i,
253
- value: value2,
254
- ...rest2
255
- }, label || value2)) : children)), /* @__PURE__ */ React8__namespace.createElement(react.chakra.input, {
256
- ...controlProps,
257
- name,
258
- type: "hidden",
239
+ const displayValue = React11__namespace.default.useMemo(
240
+ () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
241
+ getDisplayValue
242
+ ) : [],
243
+ [currentValue, getDisplayValue]
244
+ );
245
+ return {
246
+ defaultValue,
259
247
  value: currentValue,
260
- className: "saas-select__input"
261
- })));
248
+ displayValue,
249
+ renderValue,
250
+ onChange: handleChange,
251
+ options,
252
+ multiple,
253
+ controlProps,
254
+ placeholder,
255
+ isDisabled
256
+ };
257
+ };
258
+ var SelectButton = react.forwardRef(
259
+ (props, ref) => {
260
+ var _a, _b, _c, _d, _e;
261
+ const styles = react.useMultiStyleConfig("SuiSelect", props);
262
+ const {
263
+ displayValue,
264
+ renderValue,
265
+ placeholder,
266
+ isDisabled: isSelectDisabled
267
+ } = useSelectContext();
268
+ const {
269
+ isInvalid,
270
+ isReadOnly,
271
+ isDisabled,
272
+ isFocused,
273
+ isRequired,
274
+ id,
275
+ onBlur,
276
+ onFocus
277
+ } = react.useFormControlContext();
278
+ const { rightIcon = /* @__PURE__ */ jsxRuntime.jsx(core.ChevronDownIcon, {}), ...rest } = props;
279
+ const focusStyles = (_a = styles.field) == null ? void 0 : _a._focusVisible;
280
+ const readOnlyStyles = (_b = styles.field) == null ? void 0 : _b._readOnly;
281
+ const invalid = (_c = styles.field) == null ? void 0 : _c._invalid;
282
+ const height = ((_d = styles.field) == null ? void 0 : _d.h) || ((_e = styles.field) == null ? void 0 : _e.height);
283
+ const buttonStyles = {
284
+ fontWeight: "normal",
285
+ textAlign: "left",
286
+ color: "inherit",
287
+ _active: {
288
+ bg: "transparent"
289
+ },
290
+ minH: height,
291
+ _focus: focusStyles,
292
+ _expanded: focusStyles,
293
+ _readOnly: readOnlyStyles,
294
+ _invalid: invalid,
295
+ ...styles.field,
296
+ h: "auto"
297
+ };
298
+ return /* @__PURE__ */ jsxRuntime.jsx(
299
+ react.MenuButton,
300
+ {
301
+ as: react.Button,
302
+ id,
303
+ ...rest,
304
+ onFocus,
305
+ onBlur,
306
+ isDisabled: isDisabled || isSelectDisabled,
307
+ "data-invalid": utils.dataAttr(isInvalid),
308
+ "data-read-only": utils.dataAttr(isReadOnly),
309
+ "data-focus": utils.dataAttr(isFocused),
310
+ "data-required": utils.dataAttr(isRequired),
311
+ rightIcon,
312
+ ref,
313
+ sx: buttonStyles,
314
+ children: renderValue(displayValue) || placeholder
315
+ }
316
+ );
317
+ }
318
+ );
319
+ SelectButton.displayName = "SelectButton";
320
+ var Select = react.forwardRef((props, ref) => {
321
+ const { name, children, isDisabled, multiple, ...rest } = props;
322
+ const menuProps = react.omitThemingProps(rest);
323
+ const context = useSelect(props);
324
+ const { value, controlProps } = context;
325
+ return /* @__PURE__ */ jsxRuntime.jsx(SelectProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(react.Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxRuntime.jsxs(react.chakra.div, { className: utils.cx("sui-select"), children: [
326
+ children,
327
+ /* @__PURE__ */ jsxRuntime.jsx(
328
+ react.chakra.input,
329
+ {
330
+ ...controlProps,
331
+ ref,
332
+ name,
333
+ type: "hidden",
334
+ value: value || "",
335
+ className: "saas-select__input"
336
+ }
337
+ )
338
+ ] }) }) });
262
339
  });
263
- if (utils.__DEV__) {
264
- Select.displayName = "Select";
265
- }
340
+ var SelectList = (props) => {
341
+ const { defaultValue, value, options, multiple, onChange } = useSelectContext();
342
+ return /* @__PURE__ */ jsxRuntime.jsx(react.MenuList, { maxH: "100vh", overflowY: "auto", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
343
+ react.MenuOptionGroup,
344
+ {
345
+ defaultValue: defaultValue || value,
346
+ value,
347
+ onChange,
348
+ type: multiple ? "checkbox" : "radio",
349
+ children: options ? options.map(({ value: value2, label, ...rest }, i) => /* @__PURE__ */ jsxRuntime.jsx(SelectOption, { value: value2, ...rest, children: label || value2 }, i)) : props.children
350
+ }
351
+ ) });
352
+ };
353
+ Select.displayName = "Select";
354
+ var SelectOption = react.forwardRef(
355
+ (props, ref) => {
356
+ return /* @__PURE__ */ jsxRuntime.jsx(react.MenuItemOption, { ref, ...props });
357
+ }
358
+ );
359
+ SelectOption.id = "MenuItemOption";
360
+ SelectOption.displayName = "SelectOption";
266
361
  var NativeSelect = react.forwardRef(
267
362
  ({ options, children, ...props }, ref) => {
268
- return /* @__PURE__ */ React8__namespace.createElement(react.Select, {
269
- ref,
270
- ...props
271
- }, children || (options == null ? void 0 : options.map(({ value, label }) => {
272
- return /* @__PURE__ */ React8__namespace.createElement("option", {
273
- key: value,
274
- value
275
- }, label || value);
276
- })));
363
+ return /* @__PURE__ */ jsxRuntime.jsx(react.Select, { ref, ...props, children: children || (options == null ? void 0 : options.map(({ value, label }) => {
364
+ return /* @__PURE__ */ jsxRuntime.jsx("option", { value, children: label || value }, value);
365
+ })) });
277
366
  }
278
367
  );
279
- if (utils.__DEV__) {
280
- NativeSelect.displayName = "NativeSelect";
281
- }
282
-
283
- // src/field.tsx
284
- var inputTypes = {};
285
- var defaultInputType = "text";
286
- var getInput = (type) => {
287
- return inputTypes[type] || inputTypes[defaultInputType];
288
- };
368
+ NativeSelect.displayName = "NativeSelect";
289
369
  var getError = (name, formState) => {
290
370
  return reactHookForm.get(formState.errors, name);
291
371
  };
292
372
  var BaseField = (props) => {
293
373
  const { name, label, help, hideLabel, children, ...controlProps } = props;
294
- const { formState } = reactHookForm.useFormContext();
374
+ const { formState } = useFormContext();
295
375
  const error = getError(name, formState);
296
- return /* @__PURE__ */ React8__namespace.createElement(react.FormControl, {
297
- ...controlProps,
298
- isInvalid: !!error
299
- }, label && !hideLabel ? /* @__PURE__ */ React8__namespace.createElement(react.FormLabel, null, label) : null, /* @__PURE__ */ React8__namespace.createElement(react.Box, null, children, help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ React8__namespace.createElement(react.FormHelperText, null, help) : null, (error == null ? void 0 : error.message) && /* @__PURE__ */ React8__namespace.createElement(react.FormErrorMessage, null, error == null ? void 0 : error.message)));
376
+ return /* @__PURE__ */ jsxRuntime.jsxs(react.FormControl, { ...controlProps, isInvalid: !!error, children: [
377
+ label && !hideLabel ? /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { children: label }) : null,
378
+ /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
379
+ children,
380
+ help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxRuntime.jsx(react.FormHelperText, { children: help }) : null,
381
+ (error == null ? void 0 : error.message) && /* @__PURE__ */ jsxRuntime.jsx(react.FormErrorMessage, { children: error == null ? void 0 : error.message })
382
+ ] })
383
+ ] });
300
384
  };
301
- if (utils.__DEV__) {
302
- BaseField.displayName = "BaseField";
303
- }
304
- var Field = React8__namespace.forwardRef(
305
- (props, ref) => {
306
- const { type = defaultInputType } = props;
307
- const InputComponent = getInput(type);
308
- return /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
309
- ref,
310
- ...props
311
- });
312
- }
313
- );
314
- var createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
385
+ BaseField.displayName = "BaseField";
386
+ var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
315
387
  const Field2 = react.forwardRef((props, ref) => {
316
388
  const {
317
389
  id,
@@ -329,24 +401,31 @@ var createField = (InputComponent, { displayName, hideLabel, BaseField: BaseFiel
329
401
  required: isRequired,
330
402
  ...rules
331
403
  };
332
- return /* @__PURE__ */ React8__namespace.createElement(BaseField2, {
333
- id,
334
- name,
335
- label,
336
- help,
337
- hideLabel,
338
- isDisabled,
339
- isInvalid,
340
- isReadOnly,
341
- isRequired
342
- }, /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
343
- ref,
344
- id,
345
- name,
346
- label: hideLabel ? label : void 0,
347
- rules: inputRules,
348
- ...inputProps
349
- }));
404
+ return /* @__PURE__ */ jsxRuntime.jsx(
405
+ BaseField2,
406
+ {
407
+ id,
408
+ name,
409
+ label,
410
+ help,
411
+ hideLabel,
412
+ isDisabled,
413
+ isInvalid,
414
+ isReadOnly,
415
+ isRequired,
416
+ children: /* @__PURE__ */ jsxRuntime.jsx(
417
+ InputComponent,
418
+ {
419
+ ref,
420
+ id,
421
+ name,
422
+ label: hideLabel ? label : void 0,
423
+ rules: inputRules,
424
+ ...inputProps
425
+ }
426
+ )
427
+ }
428
+ );
350
429
  });
351
430
  Field2.displayName = displayName;
352
431
  return Field2;
@@ -354,298 +433,194 @@ var createField = (InputComponent, { displayName, hideLabel, BaseField: BaseFiel
354
433
  var withControlledInput = (InputComponent) => {
355
434
  return react.forwardRef(
356
435
  ({ name, rules, ...inputProps }, ref) => {
357
- const { control } = reactHookForm.useFormContext();
358
- return /* @__PURE__ */ React8__namespace.createElement(reactHookForm.Controller, {
359
- name,
360
- control,
361
- rules,
362
- render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
363
- ...field,
364
- ...inputProps,
365
- onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
366
- onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
367
- ref: react.useMergeRefs(ref, _ref)
368
- })
369
- });
436
+ const { control } = useFormContext();
437
+ return /* @__PURE__ */ jsxRuntime.jsx(
438
+ reactHookForm.Controller,
439
+ {
440
+ name,
441
+ control,
442
+ rules,
443
+ render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ jsxRuntime.jsx(
444
+ InputComponent,
445
+ {
446
+ ...field,
447
+ ...inputProps,
448
+ onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
449
+ onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
450
+ ref: react.useMergeRefs(ref, _ref)
451
+ }
452
+ )
453
+ }
454
+ );
370
455
  }
371
456
  );
372
457
  };
373
458
  var withUncontrolledInput = (InputComponent) => {
374
459
  return react.forwardRef(
375
460
  ({ name, rules, ...inputProps }, ref) => {
376
- const { register } = reactHookForm.useFormContext();
461
+ const { register } = useFormContext();
377
462
  const { ref: _ref, ...field } = register(name, rules);
378
- return /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
379
- ...field,
380
- ...inputProps,
381
- onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
382
- onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
383
- ref: react.useMergeRefs(ref, _ref)
384
- });
463
+ return /* @__PURE__ */ jsxRuntime.jsx(
464
+ InputComponent,
465
+ {
466
+ ...field,
467
+ ...inputProps,
468
+ onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
469
+ onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
470
+ ref: react.useMergeRefs(ref, _ref)
471
+ }
472
+ );
385
473
  }
386
474
  );
387
475
  };
388
- var registerFieldType = (type, component, options) => {
476
+ var createField = (component, options) => {
477
+ var _a;
389
478
  let InputComponent;
390
479
  if (options == null ? void 0 : options.isControlled) {
391
480
  InputComponent = withControlledInput(component);
392
481
  } else {
393
482
  InputComponent = withUncontrolledInput(component);
394
483
  }
395
- const Field2 = createField(InputComponent, {
396
- displayName: `${type.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("")}Field`,
484
+ const Field2 = _createField(InputComponent, {
485
+ displayName: `${(_a = component.displayName) != null ? _a : "Custom"}Field`,
397
486
  hideLabel: options == null ? void 0 : options.hideLabel,
398
487
  BaseField: (options == null ? void 0 : options.BaseField) || BaseField
399
488
  });
400
- inputTypes[type] = Field2;
401
489
  return Field2;
402
490
  };
403
- var InputField = registerFieldType(
404
- "text",
491
+ var InputField = createField(
405
492
  react.forwardRef(({ type = "text", leftAddon, rightAddon, size, ...rest }, ref) => {
406
- const input = /* @__PURE__ */ React8__namespace.createElement(react.Input, {
407
- type,
408
- size,
409
- ...rest,
410
- ref
411
- });
493
+ const input = /* @__PURE__ */ jsxRuntime.jsx(react.Input, { type, size, ...rest, ref });
412
494
  if (leftAddon || rightAddon) {
413
- return /* @__PURE__ */ React8__namespace.createElement(react.InputGroup, {
414
- size
415
- }, leftAddon, input, rightAddon);
495
+ return /* @__PURE__ */ jsxRuntime.jsxs(react.InputGroup, { size, children: [
496
+ leftAddon,
497
+ input,
498
+ rightAddon
499
+ ] });
416
500
  }
417
501
  return input;
418
502
  })
419
503
  );
420
- var NumberInputField2 = registerFieldType(
421
- "number",
504
+ var NumberInputField2 = createField(
422
505
  NumberInput,
423
506
  {
424
507
  isControlled: true
425
508
  }
426
509
  );
427
- var PasswordInputField = registerFieldType(
428
- "password",
429
- react.forwardRef((props, ref) => /* @__PURE__ */ React8__namespace.createElement(PasswordInput, {
430
- ref,
431
- ...props
432
- }))
433
- );
434
- var TextareaField = registerFieldType(
435
- "textarea",
436
- react.Textarea
510
+ var PasswordInputField = createField(
511
+ react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(PasswordInput, { ref, ...props }))
437
512
  );
438
- var SwitchField = registerFieldType(
439
- "switch",
513
+ var TextareaField = createField(react.Textarea);
514
+ var SwitchField = createField(
440
515
  react.forwardRef(({ type, value, ...rest }, ref) => {
441
- return /* @__PURE__ */ React8__namespace.createElement(react.Switch, {
442
- isChecked: !!value,
443
- ...rest,
444
- ref
445
- });
516
+ return /* @__PURE__ */ jsxRuntime.jsx(react.Switch, { isChecked: !!value, ...rest, ref });
446
517
  }),
447
518
  {
448
519
  isControlled: true
449
520
  }
450
521
  );
451
- var SelectField = registerFieldType("select", Select, {
452
- isControlled: true
453
- });
454
- var CheckboxField = registerFieldType(
455
- "checkbox",
456
- react.forwardRef(({ label, type, ...props }, ref) => {
457
- return /* @__PURE__ */ React8__namespace.createElement(react.Checkbox, {
458
- ref,
459
- ...props
460
- }, label);
522
+ var SelectField = createField(
523
+ react.forwardRef((props, ref) => {
524
+ return /* @__PURE__ */ jsxRuntime.jsxs(Select, { ref, ...props, children: [
525
+ /* @__PURE__ */ jsxRuntime.jsx(SelectButton, {}),
526
+ /* @__PURE__ */ jsxRuntime.jsx(SelectList, {})
527
+ ] });
461
528
  }),
462
529
  {
463
- hideLabel: true
530
+ isControlled: true
464
531
  }
465
532
  );
466
- var RadioField = registerFieldType(
467
- "radio",
468
- RadioInput,
533
+ var CheckboxField = createField(
534
+ react.forwardRef(({ label, type, ...props }, ref) => {
535
+ return /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox, { ref, ...props, children: label });
536
+ }),
469
537
  {
470
- isControlled: true
538
+ hideLabel: true
471
539
  }
472
540
  );
473
- var NativeSelectField = registerFieldType(
474
- "native-select",
475
- NativeSelect,
476
- { isControlled: true }
477
- );
478
- var PinField = registerFieldType(
479
- "pin",
541
+ var RadioField = createField(RadioInput, {
542
+ isControlled: true
543
+ });
544
+ var NativeSelectField = createField(NativeSelect, {
545
+ isControlled: true
546
+ });
547
+ var PinField = createField(
480
548
  react.forwardRef((props, ref) => {
481
549
  const { pinLength = 4, pinType, spacing, ...inputProps } = props;
482
550
  const inputs = [];
483
551
  for (let i = 0; i < pinLength; i++) {
484
- inputs.push(/* @__PURE__ */ React8__namespace.createElement(react.PinInputField, {
485
- key: i,
486
- ref
487
- }));
552
+ inputs.push(/* @__PURE__ */ jsxRuntime.jsx(react.PinInputField, { ref }, i));
488
553
  }
489
- return /* @__PURE__ */ React8__namespace.createElement(react.HStack, {
490
- spacing
491
- }, /* @__PURE__ */ React8__namespace.createElement(react.PinInput, {
492
- ...inputProps,
493
- type: pinType
494
- }, inputs));
554
+ return /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { spacing, children: /* @__PURE__ */ jsxRuntime.jsx(react.PinInput, { ...inputProps, type: pinType, children: inputs }) });
495
555
  }),
496
556
  {
497
557
  isControlled: true
498
558
  }
499
559
  );
500
- var mapFields = (schema) => schema && Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
501
- return {
502
- ...field,
503
- name,
504
- label: label || title || name
505
- };
506
- });
507
- var objectFieldResolver = (schema) => {
508
- const getFields = () => {
509
- return mapFields(schema);
510
- };
511
- const getNestedFields = (name) => {
512
- var _a;
513
- const field = utils.get(schema, name);
514
- if (!field)
515
- return [];
516
- if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
517
- return mapFields(field.items.properties);
518
- } else if (field.type === "object") {
519
- return mapFields(field.properties);
520
- }
521
- return [field.items];
522
- };
523
- return { getFields, getNestedFields };
560
+ var defaultFieldTypes = {
561
+ text: InputField,
562
+ email: InputField,
563
+ url: InputField,
564
+ phone: InputField,
565
+ number: NumberInputField2,
566
+ password: PasswordInputField,
567
+ textarea: TextareaField,
568
+ switch: SwitchField,
569
+ select: SelectField,
570
+ checkbox: CheckboxField,
571
+ radio: RadioField,
572
+ pin: PinField,
573
+ "native-select": NativeSelectField
524
574
  };
525
-
526
- // src/form.tsx
527
- var Form = react.forwardRef(
575
+ var FieldsContext = React11__namespace.default.createContext(
576
+ null
577
+ );
578
+ var FieldsProvider = (props) => {
579
+ const fields = { ...defaultFieldTypes, ...props.value };
580
+ return /* @__PURE__ */ jsxRuntime.jsx(FieldsContext.Provider, { value: fields, children: props.children });
581
+ };
582
+ var useField = (type) => {
583
+ const context = React11__namespace.default.useContext(FieldsContext);
584
+ return (context == null ? void 0 : context[type]) || InputField;
585
+ };
586
+ var defaultInputType = "text";
587
+ var Field = React11__namespace.forwardRef(
528
588
  (props, ref) => {
529
- var _a;
530
- const {
531
- mode = "all",
532
- resolver,
533
- reValidateMode,
534
- shouldFocusError,
535
- shouldUnregister,
536
- shouldUseNativeValidation,
537
- criteriaMode,
538
- delayError,
539
- schema,
540
- defaultValues,
541
- values,
542
- context,
543
- resetOptions,
544
- onChange,
545
- onSubmit,
546
- onError,
547
- formRef,
548
- children,
549
- ...rest
550
- } = props;
551
- const form = {
552
- mode,
553
- resolver,
554
- defaultValues,
555
- values,
556
- reValidateMode,
557
- shouldFocusError,
558
- shouldUnregister,
559
- shouldUseNativeValidation,
560
- criteriaMode,
561
- delayError,
562
- context,
563
- resetOptions
564
- };
565
- if (schema && !resolver) {
566
- form.resolver = (_a = Form.getResolver) == null ? void 0 : _a.call(Form, schema);
567
- }
568
- const methods = reactHookForm.useForm(form);
569
- const { handleSubmit } = methods;
570
- React8__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
571
- React8__namespace.useEffect(() => {
572
- let subscription;
573
- if (onChange) {
574
- subscription = methods.watch(onChange);
575
- }
576
- return () => subscription == null ? void 0 : subscription.unsubscribe();
577
- }, [methods, onChange]);
578
- const Field2 = React8__namespace.useMemo(
579
- () => (props2) => /* @__PURE__ */ React8__namespace.createElement(Field, {
580
- ...props2
581
- }),
582
- []
583
- );
584
- return /* @__PURE__ */ React8__namespace.createElement(reactHookForm.FormProvider, {
585
- ...methods
586
- }, /* @__PURE__ */ React8__namespace.createElement(react.chakra.form, {
587
- ref,
588
- onSubmit: handleSubmit(onSubmit, onError),
589
- ...rest,
590
- className: utils.cx("sui-form", props.className)
591
- }, utils.runIfFn(children, {
592
- Field: Field2,
593
- ...methods
594
- })));
589
+ const { type = defaultInputType, name } = props;
590
+ const overrides = useFieldProps(name);
591
+ const InputComponent = useField((overrides == null ? void 0 : overrides.type) || type);
592
+ return /* @__PURE__ */ jsxRuntime.jsx(InputComponent, { ref, ...props, ...overrides });
595
593
  }
596
594
  );
597
- Form.getFieldResolver = objectFieldResolver;
598
- Form.displayName = "Form";
599
- function createForm({ resolver }) {
600
- const CreateForm = (props) => {
601
- const { schema, ...rest } = props;
602
- return /* @__PURE__ */ React8__namespace.createElement(Form, {
603
- resolver: resolver == null ? void 0 : resolver(props.schema),
604
- ...rest
605
- });
606
- };
607
- return CreateForm;
608
- }
609
595
  var FormLayoutItem = ({ children }) => {
610
- return /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, null, children);
596
+ return /* @__PURE__ */ jsxRuntime.jsx(react.chakra.div, { children });
611
597
  };
612
- if (utils.__DEV__) {
613
- FormLayoutItem.displayName = "FormLayoutItem";
614
- }
598
+ FormLayoutItem.displayName = "FormLayoutItem";
615
599
  var FormLayout = ({ children, ...props }) => {
616
600
  var _a, _b, _c;
617
601
  const theme = react.useTheme();
618
- const defaultProps = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.FormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
602
+ const defaultProps = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.SuiFormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
619
603
  spacing: 4
620
604
  };
621
605
  const gridProps = {
622
606
  ...defaultProps,
623
607
  ...props
624
608
  };
625
- return /* @__PURE__ */ React8__namespace.createElement(react.SimpleGrid, {
626
- ...gridProps,
627
- className: utils.cx("sui-form__layout", props.className)
628
- }, React8__namespace.Children.map(children, (child) => {
629
- if (React8__namespace.isValidElement(child)) {
630
- return /* @__PURE__ */ React8__namespace.createElement(FormLayoutItem, null, child);
631
- }
632
- return child;
633
- }));
634
- };
635
- if (utils.__DEV__) {
636
- FormLayout.displayName = "FormLayout";
637
- }
638
- var mapNestedFields = (name, children) => {
639
- return React8__namespace.Children.map(children, (child) => {
640
- if (React8__namespace.isValidElement(child) && child.props.name) {
641
- return React8__namespace.cloneElement(child, {
642
- ...child.props,
643
- name: `${name}.${child.props.name}`
644
- });
609
+ return /* @__PURE__ */ jsxRuntime.jsx(
610
+ react.SimpleGrid,
611
+ {
612
+ ...gridProps,
613
+ className: utils.cx("sui-form__layout", props.className),
614
+ children: React11__namespace.Children.map(children, (child) => {
615
+ if (React11__namespace.isValidElement(child)) {
616
+ return /* @__PURE__ */ jsxRuntime.jsx(FormLayoutItem, { children: child });
617
+ }
618
+ return child;
619
+ })
645
620
  }
646
- return child;
647
- });
621
+ );
648
622
  };
623
+ FormLayout.displayName = "FormLayout";
649
624
  var [ArrayFieldProvider, useArrayFieldContext] = reactUtils.createContext({
650
625
  name: "ArrayFieldContext"
651
626
  });
@@ -659,7 +634,7 @@ var useArrayField = ({
659
634
  min,
660
635
  max
661
636
  }) => {
662
- const { control } = reactHookForm.useFormContext();
637
+ const { control } = useFormContext();
663
638
  const context = reactHookForm.useFieldArray({
664
639
  control,
665
640
  name,
@@ -674,9 +649,9 @@ var useArrayField = ({
674
649
  };
675
650
  };
676
651
  var useArrayFieldRow = ({ index }) => {
677
- const { clearErrors } = reactHookForm.useFormContext();
652
+ const { clearErrors } = useFormContext();
678
653
  const { name, remove, fields } = useArrayFieldContext();
679
- React8__namespace.useEffect(() => {
654
+ React11__namespace.useEffect(() => {
680
655
  clearErrors(name);
681
656
  }, []);
682
657
  return {
@@ -684,7 +659,7 @@ var useArrayFieldRow = ({ index }) => {
684
659
  isFirst: index === 0,
685
660
  isLast: index === fields.length - 1,
686
661
  name: `${name}.${index}`,
687
- remove: React8__namespace.useCallback(() => {
662
+ remove: React11__namespace.useCallback(() => {
688
663
  clearErrors(name);
689
664
  remove(index);
690
665
  }, [index])
@@ -709,39 +684,29 @@ var useArrayFieldAddButton = () => {
709
684
  isDisabled
710
685
  };
711
686
  };
712
-
713
- // src/array-field.tsx
714
687
  var ArrayFieldRow = ({
715
688
  children,
716
689
  index,
717
690
  ...rowFieldsProps
718
691
  }) => {
719
- return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRowContainer, {
720
- index
721
- }, /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRowFields, {
722
- ...rowFieldsProps
723
- }, children), /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRemoveButton, null));
692
+ return /* @__PURE__ */ jsxRuntime.jsxs(ArrayFieldRowContainer, { index, children: [
693
+ /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRowFields, { ...rowFieldsProps, children }),
694
+ /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRemoveButton, {})
695
+ ] });
724
696
  };
725
- if (utils.__DEV__) {
726
- ArrayFieldRow.displayName = "ArrayFieldRow";
727
- }
697
+ ArrayFieldRow.displayName = "ArrayFieldRow";
728
698
  var ArrayFieldRowFields = ({
729
699
  children,
730
700
  ...layoutProps
731
701
  }) => {
732
702
  const { name } = useArrayFieldRowContext();
733
- return /* @__PURE__ */ React8__namespace.createElement(FormLayout, {
734
- flex: "1",
735
- mr: "2",
736
- ...layoutProps
737
- }, mapNestedFields(name, children));
703
+ return /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { flex: "1", mr: "2", ...layoutProps, children: mapNestedFields(name, children) });
738
704
  };
739
- if (utils.__DEV__) {
740
- ArrayFieldRowFields.displayName = "ArrayFieldRowFields";
741
- }
705
+ ArrayFieldRowFields.displayName = "ArrayFieldRowFields";
742
706
  var ArrayFieldRowContainer = ({
743
707
  children,
744
- index
708
+ index,
709
+ ...rest
745
710
  }) => {
746
711
  const context = useArrayFieldRow({ index });
747
712
  const styles = {
@@ -751,61 +716,45 @@ var ArrayFieldRowContainer = ({
751
716
  width: "100%",
752
717
  mb: 4
753
718
  };
754
- return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRowProvider, {
755
- value: context
756
- }, /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, {
757
- __css: styles
758
- }, children));
719
+ return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRowProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(react.chakra.div, { ...rest, __css: styles, children }) });
759
720
  };
760
- if (utils.__DEV__) {
761
- ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
762
- }
721
+ ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
763
722
  var ArrayFieldRemoveButton = (props) => {
764
- return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
765
- "aria-label": "Remove row",
766
- ...useArrayFieldRemoveButton(),
767
- ...props
768
- }, props.children || /* @__PURE__ */ React8__namespace.createElement(icons.MinusIcon, null));
723
+ return /* @__PURE__ */ jsxRuntime.jsx(react.Button, { "aria-label": "Remove row", ...useArrayFieldRemoveButton(), ...props, children: props.children || /* @__PURE__ */ jsxRuntime.jsx(icons.MinusIcon, {}) });
769
724
  };
770
- if (utils.__DEV__) {
771
- ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
772
- }
725
+ ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
773
726
  var ArrayFieldAddButton = (props) => {
774
- return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
775
- "aria-label": "Add row",
776
- float: "right",
777
- ...useArrayFieldAddButton(),
778
- ...props
779
- }, props.children || /* @__PURE__ */ React8__namespace.createElement(icons.AddIcon, null));
727
+ return /* @__PURE__ */ jsxRuntime.jsx(
728
+ react.Button,
729
+ {
730
+ "aria-label": "Add row",
731
+ float: "right",
732
+ ...useArrayFieldAddButton(),
733
+ ...props,
734
+ children: props.children || /* @__PURE__ */ jsxRuntime.jsx(icons.PlusIcon, {})
735
+ }
736
+ );
780
737
  };
781
- if (utils.__DEV__) {
782
- ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
783
- }
738
+ ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
784
739
  var ArrayField = react.forwardRef(
785
740
  (props, ref) => {
786
741
  const { children, ...containerProps } = props;
787
- return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldContainer, {
788
- ref,
789
- ...containerProps
790
- }, /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRows, null, (fields) => /* @__PURE__ */ React8__namespace.createElement(React8__namespace.Fragment, null, fields.map(({ id }, index) => /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRow, {
791
- key: id,
792
- index
793
- }, children)))), /* @__PURE__ */ React8__namespace.createElement(ArrayFieldAddButton, null));
742
+ const rowFn = utils.isFunction(children) ? children : (fields) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRow, { index, children }, id)) || null });
743
+ return /* @__PURE__ */ jsxRuntime.jsxs(ArrayFieldContainer, { ref, ...containerProps, children: [
744
+ /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldRows, { children: rowFn }),
745
+ /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldAddButton, {})
746
+ ] });
794
747
  }
795
748
  );
796
- if (utils.__DEV__) {
797
- ArrayField.displayName = "ArrayField";
798
- }
749
+ ArrayField.displayName = "ArrayField";
799
750
  var ArrayFieldRows = ({
800
751
  children
801
752
  }) => {
802
753
  const { fields } = useArrayFieldContext();
803
754
  return children(fields);
804
755
  };
805
- if (utils.__DEV__) {
806
- ArrayFieldRows.displayName = "ArrayFieldRows";
807
- }
808
- var ArrayFieldContainer = React8__namespace.forwardRef(
756
+ ArrayFieldRows.displayName = "ArrayFieldRows";
757
+ var ArrayFieldContainer = React11__namespace.forwardRef(
809
758
  ({
810
759
  name,
811
760
  defaultValue,
@@ -822,74 +771,59 @@ var ArrayFieldContainer = React8__namespace.forwardRef(
822
771
  min,
823
772
  max
824
773
  });
825
- React8__namespace.useImperativeHandle(ref, () => context, [ref, context]);
826
- return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldProvider, {
827
- value: context
828
- }, /* @__PURE__ */ React8__namespace.createElement(BaseField, {
829
- name,
830
- ...fieldProps
831
- }, children));
774
+ React11__namespace.useImperativeHandle(ref, () => context, [ref, context]);
775
+ return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(BaseField, { name, ...fieldProps, children }) });
832
776
  }
833
777
  );
834
- if (utils.__DEV__) {
835
- ArrayFieldContainer.displayName = "ArrayFieldContainer";
836
- }
778
+ ArrayFieldContainer.displayName = "ArrayFieldContainer";
837
779
  var FormLegend = (props) => {
838
780
  const styles = react.useStyleConfig("SuiFormLegend");
839
- return /* @__PURE__ */ React8__namespace.createElement(react.FormLabel, {
840
- as: "legend",
841
- sx: styles,
842
- ...props
843
- });
781
+ return /* @__PURE__ */ jsxRuntime.jsx(react.FormLabel, { as: "legend", sx: styles, ...props });
844
782
  };
845
783
  var ObjectField = (props) => {
846
784
  const { name, label, hideLabel, children, columns, spacing, ...fieldProps } = props;
847
- return /* @__PURE__ */ React8__namespace.createElement(react.FormControl, {
848
- name,
849
- as: "fieldset",
850
- ...fieldProps
851
- }, /* @__PURE__ */ React8__namespace.createElement(FormLegend, {
852
- display: hideLabel ? "none" : "block"
853
- }, label), /* @__PURE__ */ React8__namespace.createElement(FormLayout, {
854
- columns,
855
- gridGap: spacing
856
- }, mapNestedFields(name, children)));
785
+ return /* @__PURE__ */ jsxRuntime.jsxs(react.FormControl, { name, as: "fieldset", ...fieldProps, children: [
786
+ /* @__PURE__ */ jsxRuntime.jsx(FormLegend, { display: hideLabel ? "none" : "block", children: label }),
787
+ /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { columns, gridGap: spacing, children: mapNestedFields(name, children) })
788
+ ] });
857
789
  };
858
- if (utils.__DEV__) {
859
- ObjectField.displayName = "ObjectField";
860
- }
790
+ ObjectField.displayName = "ObjectField";
861
791
  var mapNestedFields2 = (resolver, name) => {
862
792
  var _a;
863
793
  return (_a = resolver.getNestedFields(name)) == null ? void 0 : _a.map(
864
- ({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ React8__namespace.createElement(Field, {
865
- key: name2 || i,
866
- name: name2,
867
- type,
868
- ...nestedFieldProps
869
- })
794
+ ({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ jsxRuntime.jsx(
795
+ Field,
796
+ {
797
+ name: name2,
798
+ type,
799
+ ...nestedFieldProps
800
+ },
801
+ name2 || i
802
+ )
870
803
  );
871
804
  };
872
- var Fields = ({
873
- schema,
874
- fieldResolver,
805
+ var AutoFields = ({
806
+ schema: schemaProp,
807
+ fieldResolver: fieldResolverProp,
875
808
  focusFirstField,
876
809
  ...props
877
810
  }) => {
878
- const resolver = React8__namespace.useMemo(
879
- () => fieldResolver || Form.getFieldResolver(schema),
880
- [schema, fieldResolver]
881
- );
882
- const fields = React8__namespace.useMemo(() => resolver.getFields(), [resolver]);
883
- const form = reactHookForm.useFormContext();
884
- React8__namespace.useEffect(() => {
811
+ const context = useFormContext();
812
+ const schema = schemaProp || context.schema;
813
+ const fieldResolver = fieldResolverProp || context.fieldResolver;
814
+ const resolver = React11__namespace.useMemo(() => fieldResolver, [schema, fieldResolver]);
815
+ const fields = React11__namespace.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
816
+ const form = useFormContext();
817
+ React11__namespace.useEffect(() => {
885
818
  var _a;
886
- if (focusFirstField && ((_a = fields[0]) == null ? void 0 : _a.name)) {
819
+ if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
887
820
  form.setFocus(fields[0].name);
888
821
  }
889
822
  }, [schema, fieldResolver, focusFirstField]);
890
- return /* @__PURE__ */ React8__namespace.createElement(FormLayout, {
891
- ...props
892
- }, fields.map(
823
+ if (!resolver) {
824
+ return null;
825
+ }
826
+ return /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { ...props, children: fields == null ? void 0 : fields.map(
893
827
  ({
894
828
  name,
895
829
  type,
@@ -897,28 +831,15 @@ var Fields = ({
897
831
  ...fieldProps
898
832
  }) => {
899
833
  if (type === "array") {
900
- return /* @__PURE__ */ React8__namespace.createElement(ArrayField, {
901
- key: name,
902
- name,
903
- ...fieldProps
904
- }, mapNestedFields2(resolver, name));
834
+ return /* @__PURE__ */ jsxRuntime.jsx(ArrayField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
905
835
  } else if (type === "object") {
906
- return /* @__PURE__ */ React8__namespace.createElement(ObjectField, {
907
- key: name,
908
- name,
909
- ...fieldProps
910
- }, mapNestedFields2(resolver, name));
836
+ return /* @__PURE__ */ jsxRuntime.jsx(ObjectField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
911
837
  }
912
- return /* @__PURE__ */ React8__namespace.createElement(Field, {
913
- key: name,
914
- name,
915
- type,
916
- ...fieldProps
917
- });
838
+ return /* @__PURE__ */ jsxRuntime.jsx(Field, { name, type, ...fieldProps }, name);
918
839
  }
919
- ));
840
+ ) });
920
841
  };
921
- Fields.displayName = "Fields";
842
+ AutoFields.displayName = "Fields";
922
843
  var SubmitButton = react.forwardRef(
923
844
  (props, ref) => {
924
845
  const {
@@ -931,13 +852,17 @@ var SubmitButton = react.forwardRef(
931
852
  } = props;
932
853
  const { formState } = reactHookForm.useFormContext();
933
854
  const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || isDisabledProp;
934
- return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
935
- ...rest,
936
- ref,
937
- type: "submit",
938
- isLoading: formState.isSubmitting || isLoading,
939
- isDisabled
940
- }, children);
855
+ return /* @__PURE__ */ jsxRuntime.jsx(
856
+ react.Button,
857
+ {
858
+ ...rest,
859
+ ref,
860
+ type: "submit",
861
+ isLoading: formState.isSubmitting || isLoading,
862
+ isDisabled,
863
+ children
864
+ }
865
+ );
941
866
  }
942
867
  );
943
868
  SubmitButton.defaultProps = {
@@ -946,28 +871,6 @@ SubmitButton.defaultProps = {
946
871
  disableIfInvalid: false
947
872
  };
948
873
  SubmitButton.displayName = "SubmitButton";
949
-
950
- // src/auto-form.tsx
951
- var AutoForm = react.forwardRef(
952
- (props, ref) => {
953
- const {
954
- schema,
955
- submitLabel = "Submit",
956
- fieldResolver,
957
- children,
958
- ...rest
959
- } = props;
960
- return /* @__PURE__ */ React8__namespace.createElement(Form, {
961
- ...rest,
962
- schema,
963
- ref
964
- }, /* @__PURE__ */ React8__namespace.createElement(FormLayout, null, /* @__PURE__ */ React8__namespace.createElement(Fields, {
965
- schema,
966
- fieldResolver
967
- }), submitLabel && /* @__PURE__ */ React8__namespace.createElement(SubmitButton, null, submitLabel), children));
968
- }
969
- );
970
- AutoForm.displayName = "AutoForm";
971
874
  var DisplayIf = ({
972
875
  children,
973
876
  name,
@@ -982,12 +885,94 @@ var DisplayIf = ({
982
885
  disabled: isDisabled,
983
886
  exact: isExact
984
887
  });
985
- const context = reactHookForm.useFormContext();
888
+ const context = useFormContext();
986
889
  return condition(value, context) ? children : null;
987
890
  };
988
- if (utils.__DEV__) {
989
- DisplayIf.displayName = "DisplayIf";
990
- }
891
+ DisplayIf.displayName = "DisplayIf";
892
+ var Form = react.forwardRef(
893
+ (props, ref) => {
894
+ const {
895
+ mode = "all",
896
+ resolver,
897
+ fieldResolver,
898
+ fields,
899
+ reValidateMode,
900
+ shouldFocusError,
901
+ shouldUnregister,
902
+ shouldUseNativeValidation,
903
+ criteriaMode,
904
+ delayError,
905
+ schema,
906
+ defaultValues,
907
+ values,
908
+ context,
909
+ resetOptions,
910
+ onChange,
911
+ onSubmit,
912
+ onError,
913
+ formRef,
914
+ children,
915
+ ...rest
916
+ } = props;
917
+ const form = {
918
+ mode,
919
+ resolver,
920
+ defaultValues,
921
+ values,
922
+ reValidateMode,
923
+ shouldFocusError,
924
+ shouldUnregister,
925
+ shouldUseNativeValidation,
926
+ criteriaMode,
927
+ delayError,
928
+ context,
929
+ resetOptions
930
+ };
931
+ const methods = reactHookForm.useForm(form);
932
+ const { handleSubmit } = methods;
933
+ React11__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
934
+ React11__namespace.useEffect(() => {
935
+ let subscription;
936
+ if (onChange) {
937
+ subscription = methods.watch(onChange);
938
+ }
939
+ return () => subscription == null ? void 0 : subscription.unsubscribe();
940
+ }, [methods, onChange]);
941
+ let _children = children;
942
+ if (!_children && fieldResolver) {
943
+ _children = /* @__PURE__ */ jsxRuntime.jsxs(FormLayout, { children: [
944
+ /* @__PURE__ */ jsxRuntime.jsx(AutoFields, {}),
945
+ /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { ...fields == null ? void 0 : fields.submit })
946
+ ] });
947
+ }
948
+ return /* @__PURE__ */ jsxRuntime.jsx(
949
+ FormProvider,
950
+ {
951
+ ...methods,
952
+ schema,
953
+ fieldResolver,
954
+ fields,
955
+ children: /* @__PURE__ */ jsxRuntime.jsx(
956
+ react.chakra.form,
957
+ {
958
+ ref,
959
+ onSubmit: handleSubmit(onSubmit, onError),
960
+ ...rest,
961
+ className: utils.cx("sui-form", props.className),
962
+ children: utils.runIfFn(_children, {
963
+ Field,
964
+ DisplayIf,
965
+ ArrayField,
966
+ ObjectField,
967
+ ...methods
968
+ })
969
+ }
970
+ )
971
+ }
972
+ );
973
+ }
974
+ );
975
+ Form.displayName = "Form";
991
976
  var [StepFormProvider, useStepFormContext] = reactUtils.createContext({
992
977
  name: "StepFormContext",
993
978
  errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
@@ -996,8 +981,8 @@ function useStepForm(props) {
996
981
  const { onChange, ...rest } = props;
997
982
  const stepper = core.useStepper(rest);
998
983
  const { activeStep, isLastStep, nextStep } = stepper;
999
- const [steps, updateSteps] = React8__namespace.useState({});
1000
- const onSubmitStep = React8__namespace.useCallback(
984
+ const [steps, updateSteps] = React11__namespace.useState({});
985
+ const onSubmitStep = React11__namespace.useCallback(
1001
986
  async (data) => {
1002
987
  var _a, _b;
1003
988
  try {
@@ -1018,7 +1003,7 @@ function useStepForm(props) {
1018
1003
  },
1019
1004
  [steps, activeStep, isLastStep]
1020
1005
  );
1021
- const getFormProps = React8__namespace.useCallback(() => {
1006
+ const getFormProps = React11__namespace.useCallback(() => {
1022
1007
  const step = steps[activeStep];
1023
1008
  return {
1024
1009
  onSubmit: onSubmitStep,
@@ -1026,7 +1011,7 @@ function useStepForm(props) {
1026
1011
  resolver: step == null ? void 0 : step.resolver
1027
1012
  };
1028
1013
  }, [steps, onSubmitStep, activeStep]);
1029
- const updateStep = React8__namespace.useCallback(
1014
+ const updateStep = React11__namespace.useCallback(
1030
1015
  (step) => {
1031
1016
  updateSteps((steps2) => {
1032
1017
  return {
@@ -1048,7 +1033,7 @@ function useFormStep(props) {
1048
1033
  const { name, schema, resolver, onSubmit } = props;
1049
1034
  const step = core.useStep({ name });
1050
1035
  const { steps, updateStep } = useStepFormContext();
1051
- React8__namespace.useEffect(() => {
1036
+ React11__namespace.useEffect(() => {
1052
1037
  updateStep({ name, schema, resolver, onSubmit });
1053
1038
  }, [name, schema]);
1054
1039
  return {
@@ -1056,95 +1041,114 @@ function useFormStep(props) {
1056
1041
  ...steps[name] || { name, schema }
1057
1042
  };
1058
1043
  }
1059
-
1060
- // src/step-form.tsx
1061
- var StepForm = React8__namespace.forwardRef(
1044
+ var StepForm = React11__namespace.forwardRef(
1062
1045
  (props, ref) => {
1063
1046
  const { children, ...rest } = props;
1064
1047
  const stepper = useStepForm(props);
1065
1048
  const { getFormProps, ...ctx } = stepper;
1066
- const context = React8__namespace.useMemo(() => ctx, [ctx]);
1067
- return /* @__PURE__ */ React8__namespace.createElement(core.StepperProvider, {
1068
- value: context
1069
- }, /* @__PURE__ */ React8__namespace.createElement(StepFormProvider, {
1070
- value: context
1071
- }, /* @__PURE__ */ React8__namespace.createElement(Form, {
1072
- ref,
1073
- ...rest,
1074
- ...getFormProps()
1075
- }, utils.runIfFn(children, stepper))));
1049
+ const context = React11__namespace.useMemo(() => ctx, [ctx]);
1050
+ return /* @__PURE__ */ jsxRuntime.jsx(core.StepperProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(Form, { ref, ...rest, ...getFormProps(), children: utils.runIfFn(children, stepper) }) }) });
1076
1051
  }
1077
1052
  );
1078
1053
  var FormStepper = (props) => {
1079
1054
  const { activeIndex, setIndex } = core.useStepperContext();
1080
1055
  const { children, orientation, variant, colorScheme, size, ...rest } = props;
1081
- const elements = React8__namespace.Children.map(children, (child) => {
1082
- if (React8__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
1056
+ const elements = React11__namespace.Children.map(children, (child) => {
1057
+ if (React11__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
1083
1058
  const { isCompleted } = useFormStep(child.props);
1084
- return /* @__PURE__ */ React8__namespace.createElement(core.StepperStep, {
1085
- name: child.props.name,
1086
- title: child.props.title,
1087
- isCompleted,
1088
- ...rest
1089
- }, child.props.children);
1059
+ return /* @__PURE__ */ jsxRuntime.jsx(
1060
+ core.StepperStep,
1061
+ {
1062
+ name: child.props.name,
1063
+ title: child.props.title,
1064
+ isCompleted,
1065
+ ...rest,
1066
+ children: child.props.children
1067
+ }
1068
+ );
1090
1069
  }
1091
1070
  return child;
1092
1071
  });
1093
- const onChange = React8__namespace.useCallback((i) => {
1072
+ const onChange = React11__namespace.useCallback((i) => {
1094
1073
  setIndex(i);
1095
1074
  }, []);
1096
- return /* @__PURE__ */ React8__namespace.createElement(core.StepperContainer, {
1097
- orientation,
1098
- step: activeIndex,
1099
- variant,
1100
- colorScheme,
1101
- size,
1102
- onChange
1103
- }, /* @__PURE__ */ React8__namespace.createElement(core.StepperSteps, {
1104
- mb: "4",
1105
- ...props
1106
- }, elements));
1075
+ return /* @__PURE__ */ jsxRuntime.jsx(
1076
+ core.StepperContainer,
1077
+ {
1078
+ orientation,
1079
+ step: activeIndex,
1080
+ variant,
1081
+ colorScheme,
1082
+ size,
1083
+ onChange,
1084
+ children: /* @__PURE__ */ jsxRuntime.jsx(core.StepperSteps, { mb: "4", ...props, children: elements })
1085
+ }
1086
+ );
1107
1087
  };
1108
1088
  var FormStep = (props) => {
1109
1089
  const { name, schema, resolver, children, className, onSubmit, ...rest } = props;
1110
1090
  const step = useFormStep({ name, schema, resolver, onSubmit });
1111
1091
  const { isActive } = step;
1112
- return isActive ? /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, {
1113
- ...rest,
1114
- className: utils.cx("sui-form__step", className)
1115
- }, children) : null;
1092
+ return isActive ? /* @__PURE__ */ jsxRuntime.jsx(react.chakra.div, { ...rest, className: utils.cx("sui-form__step", className), children }) : null;
1116
1093
  };
1117
- if (utils.__DEV__) {
1118
- FormStep.displayName = "FormStep";
1119
- }
1094
+ FormStep.displayName = "FormStep";
1120
1095
  var PrevButton = (props) => {
1121
1096
  const { isFirstStep, isCompleted, prevStep } = core.useStepperContext();
1122
- return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
1123
- isDisabled: isFirstStep || isCompleted,
1124
- label: "Back",
1125
- ...props,
1126
- className: utils.cx("sui-form__prev-button", props.className),
1127
- onClick: utils.callAllHandlers(props.onClick, prevStep)
1128
- });
1097
+ return /* @__PURE__ */ jsxRuntime.jsx(
1098
+ react.Button,
1099
+ {
1100
+ isDisabled: isFirstStep || isCompleted,
1101
+ label: "Back",
1102
+ ...props,
1103
+ className: utils.cx("sui-form__prev-button", props.className),
1104
+ onClick: utils.callAllHandlers(props.onClick, prevStep)
1105
+ }
1106
+ );
1129
1107
  };
1130
- if (utils.__DEV__) {
1131
- PrevButton.displayName = "PrevButton";
1132
- }
1108
+ PrevButton.displayName = "PrevButton";
1133
1109
  var NextButton = (props) => {
1134
1110
  const { label = "Next", submitLabel = "Complete", ...rest } = props;
1135
1111
  const { isLastStep, isCompleted } = core.useStepperContext();
1136
- return /* @__PURE__ */ React8__namespace.createElement(SubmitButton, {
1137
- ...rest,
1138
- isDisabled: isCompleted,
1139
- className: utils.cx("sui-form__next-button", props.className)
1140
- }, isLastStep || isCompleted ? submitLabel : label);
1112
+ return /* @__PURE__ */ jsxRuntime.jsx(
1113
+ SubmitButton,
1114
+ {
1115
+ ...rest,
1116
+ isDisabled: isCompleted,
1117
+ className: utils.cx("sui-form__next-button", props.className),
1118
+ children: isLastStep || isCompleted ? submitLabel : label
1119
+ }
1120
+ );
1121
+ };
1122
+ NextButton.displayName = "NextButton";
1123
+ var mapFields = (schema) => schema && Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
1124
+ return {
1125
+ ...field,
1126
+ name,
1127
+ label: label || title || name
1128
+ // json schema compatibility
1129
+ };
1130
+ });
1131
+ var objectFieldResolver = (schema) => {
1132
+ const getFields = () => {
1133
+ return mapFields(schema);
1134
+ };
1135
+ const getNestedFields = (name) => {
1136
+ var _a;
1137
+ const field = utils.get(schema, name);
1138
+ if (!field)
1139
+ return [];
1140
+ if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
1141
+ return mapFields(field.items.properties);
1142
+ } else if (field.type === "object") {
1143
+ return mapFields(field.properties);
1144
+ }
1145
+ return [field.items];
1146
+ };
1147
+ return { getFields, getNestedFields };
1141
1148
  };
1142
- if (utils.__DEV__) {
1143
- NextButton.displayName = "NextButton";
1144
- }
1145
1149
  var WatchField = (props) => {
1146
1150
  const { name, defaultValue, isDisabled, isExact } = props;
1147
- const form = reactHookForm.useFormContext();
1151
+ const form = useFormContext();
1148
1152
  const field = reactHookForm.useWatch({
1149
1153
  name,
1150
1154
  defaultValue,
@@ -1153,15 +1157,33 @@ var WatchField = (props) => {
1153
1157
  });
1154
1158
  return props.children(field, form) || null;
1155
1159
  };
1160
+ function createForm({
1161
+ resolver,
1162
+ fieldResolver = objectFieldResolver,
1163
+ fields
1164
+ } = {}) {
1165
+ const CreateForm = react.forwardRef(
1166
+ (props, ref) => {
1167
+ const { schema, ...rest } = props;
1168
+ return /* @__PURE__ */ jsxRuntime.jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsxRuntime.jsx(
1169
+ Form,
1170
+ {
1171
+ ref,
1172
+ resolver: resolver == null ? void 0 : resolver(props.schema),
1173
+ fieldResolver: fieldResolver == null ? void 0 : fieldResolver(schema),
1174
+ ...rest
1175
+ }
1176
+ ) });
1177
+ }
1178
+ );
1179
+ return CreateForm;
1180
+ }
1181
+ var Form2 = createForm();
1156
1182
 
1157
1183
  Object.defineProperty(exports, 'Controller', {
1158
1184
  enumerable: true,
1159
1185
  get: function () { return reactHookForm.Controller; }
1160
1186
  });
1161
- Object.defineProperty(exports, 'FormProvider', {
1162
- enumerable: true,
1163
- get: function () { return reactHookForm.FormProvider; }
1164
- });
1165
1187
  Object.defineProperty(exports, 'appendErrors', {
1166
1188
  enumerable: true,
1167
1189
  get: function () { return reactHookForm.appendErrors; }
@@ -1178,10 +1200,6 @@ Object.defineProperty(exports, 'useForm', {
1178
1200
  enumerable: true,
1179
1201
  get: function () { return reactHookForm.useForm; }
1180
1202
  });
1181
- Object.defineProperty(exports, 'useFormContext', {
1182
- enumerable: true,
1183
- get: function () { return reactHookForm.useFormContext; }
1184
- });
1185
1203
  Object.defineProperty(exports, 'useFormState', {
1186
1204
  enumerable: true,
1187
1205
  get: function () { return reactHookForm.useFormState; }
@@ -1200,16 +1218,18 @@ exports.ArrayFieldRowContainer = ArrayFieldRowContainer;
1200
1218
  exports.ArrayFieldRowFields = ArrayFieldRowFields;
1201
1219
  exports.ArrayFieldRowProvider = ArrayFieldRowProvider;
1202
1220
  exports.ArrayFieldRows = ArrayFieldRows;
1203
- exports.AutoForm = AutoForm;
1221
+ exports.AutoFields = AutoFields;
1204
1222
  exports.BaseField = BaseField;
1223
+ exports.BaseForm = Form;
1205
1224
  exports.CheckboxField = CheckboxField;
1206
1225
  exports.DisplayField = DisplayField;
1207
1226
  exports.DisplayIf = DisplayIf;
1208
1227
  exports.Field = Field;
1209
- exports.Fields = Fields;
1210
- exports.Form = Form;
1228
+ exports.FieldsProvider = FieldsProvider;
1229
+ exports.Form = Form2;
1211
1230
  exports.FormLayout = FormLayout;
1212
1231
  exports.FormLegend = FormLegend;
1232
+ exports.FormProvider = FormProvider;
1213
1233
  exports.FormStep = FormStep;
1214
1234
  exports.FormStepper = FormStepper;
1215
1235
  exports.FormValue = FormValue;
@@ -1225,27 +1245,32 @@ exports.PasswordInputField = PasswordInputField;
1225
1245
  exports.PinField = PinField;
1226
1246
  exports.PrevButton = PrevButton;
1227
1247
  exports.RadioField = RadioField;
1248
+ exports.RadioInput = RadioInput;
1228
1249
  exports.Select = Select;
1250
+ exports.SelectButton = SelectButton;
1229
1251
  exports.SelectField = SelectField;
1252
+ exports.SelectList = SelectList;
1253
+ exports.SelectOption = SelectOption;
1230
1254
  exports.StepForm = StepForm;
1231
1255
  exports.StepFormProvider = StepFormProvider;
1232
1256
  exports.SubmitButton = SubmitButton;
1233
1257
  exports.SwitchField = SwitchField;
1234
1258
  exports.TextareaField = TextareaField;
1235
1259
  exports.WatchField = WatchField;
1260
+ exports.createField = createField;
1236
1261
  exports.createForm = createForm;
1262
+ exports.defaultFieldTypes = defaultFieldTypes;
1237
1263
  exports.objectFieldResolver = objectFieldResolver;
1238
- exports.registerFieldType = registerFieldType;
1239
1264
  exports.useArrayField = useArrayField;
1240
1265
  exports.useArrayFieldAddButton = useArrayFieldAddButton;
1241
1266
  exports.useArrayFieldContext = useArrayFieldContext;
1242
1267
  exports.useArrayFieldRemoveButton = useArrayFieldRemoveButton;
1243
1268
  exports.useArrayFieldRow = useArrayFieldRow;
1244
1269
  exports.useArrayFieldRowContext = useArrayFieldRowContext;
1270
+ exports.useField = useField;
1271
+ exports.useFormContext = useFormContext;
1245
1272
  exports.useFormStep = useFormStep;
1246
1273
  exports.useStepForm = useStepForm;
1247
1274
  exports.useStepFormContext = useStepFormContext;
1248
- exports.withControlledInput = withControlledInput;
1249
- exports.withUncontrolledInput = withUncontrolledInput;
1250
1275
  //# sourceMappingURL=out.js.map
1251
1276
  //# sourceMappingURL=index.js.map