@ttoss/forms 0.33.4 → 0.35.0

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 (9) hide show
  1. package/dist/Brazil/index.d.ts +1 -1
  2. package/dist/{FormFieldPatternFormat-nQpHzJqa.d.ts → FormFieldPatternFormat-D5CI6eUA.d.ts} +35 -2
  3. package/dist/esm/Brazil/index.js +3 -1
  4. package/dist/esm/MultistepForm/index.js +2 -2
  5. package/dist/esm/{chunk-TS4CHDPS.js → chunk-EA4K5JAO.js} +85 -22
  6. package/dist/esm/{chunk-LTFTNMQO.js → chunk-X2A7XW2U.js} +97 -7
  7. package/dist/esm/index.js +2 -2
  8. package/dist/index.d.ts +3 -3
  9. package/package.json +2 -2
package/dist/Brazil/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { FieldValues, FieldPath } from 'react-hook-form';
3
3
  import { PatternFormatProps } from 'react-number-format';
4
- import { F as FormFieldProps, a as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-nQpHzJqa.js';
4
+ import { F as FormFieldProps, a as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-D5CI6eUA.js';
5
5
  import '@ttoss/ui';
6
6
  import 'react';
7
7
 
package/dist/{FormFieldPatternFormat-nQpHzJqa.d.ts → FormFieldPatternFormat-D5CI6eUA.d.ts} RENAMED
@@ -1,9 +1,37 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { TooltipProps, SxProp, InputProps } from '@ttoss/ui';
3
- import { FieldValues, FieldPath, UseControllerReturn, FieldPathValue, RegisterOptions } from 'react-hook-form';
3
+ import { FieldValues, FieldPath, RegisterOptions, FieldPathValue, UseControllerReturn } from 'react-hook-form';
4
4
  import { PatternFormatProps } from 'react-number-format';
5
5
  import * as React from 'react';
6
6
 
7
+ type AuxiliaryCheckboxRules<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
8
+ /**
9
+ * Props for the AuxiliaryCheckbox component.
10
+ */
11
+ type AuxiliaryCheckboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
12
+ /**
13
+ * The label to display next to the checkbox.
14
+ */
15
+ label: React.ReactNode;
16
+ /**
17
+ * The name of the checkbox field in the form.
18
+ */
19
+ name: TName;
20
+ /**
21
+ * The default value of the checkbox.
22
+ * @default false
23
+ */
24
+ defaultValue?: boolean;
25
+ /**
26
+ * Validation rules for the checkbox field.
27
+ */
28
+ rules?: AuxiliaryCheckboxRules<TFieldValues, TName>;
29
+ /**
30
+ * Whether the checkbox is disabled.
31
+ */
32
+ disabled?: boolean;
33
+ };
34
+
7
35
  type Rules<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
8
36
  type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
9
37
  label?: React.ReactNode;
@@ -14,11 +42,16 @@ type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extend
14
42
  labelTooltip?: TooltipProps;
15
43
  warning?: string | React.ReactNode;
16
44
  rules?: Rules<TFieldValues, TName>;
45
+ /**
46
+ * Optional auxiliary checkbox to render between the field and error message.
47
+ * Useful for input confirmation or conditional display of other fields.
48
+ */
49
+ auxiliaryCheckbox?: Omit<AuxiliaryCheckboxProps<TFieldValues, FieldPath<TFieldValues>>, 'disabled'>;
17
50
  } & SxProp;
18
51
  type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
19
52
  render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
20
53
  } & FormFieldProps<TFieldValues, TName>;
21
- declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled: propsDisabled, labelTooltip, sx, css, render, warning, rules, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
54
+ declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled: propsDisabled, labelTooltip, sx, css, render, warning, rules, auxiliaryCheckbox, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
22
55
 
23
56
  type FormFieldPatternFormatProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<PatternFormatProps, 'name'> & Pick<InputProps, 'leadingIcon' | 'trailingIcon'>;
24
57
  declare const FormFieldPatternFormat: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, ...props }: FormFieldPatternFormatProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
package/dist/esm/Brazil/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
2
  import * as React from 'react';
3
- import { FormField, FormFieldCNPJ, FormFieldPatternFormat, __name, isCnpjValid } from "../chunk-TS4CHDPS.js";
3
+ import { FormField, FormFieldCNPJ, FormFieldPatternFormat, __name, isCnpjValid } from "../chunk-EA4K5JAO.js";
4
4
 
5
5
  // src/Brazil/FormFieldPhone.tsx
6
6
  import { Input } from "@ttoss/ui";
@@ -20,6 +20,7 @@ var FormFieldPhone = /* @__PURE__ */__name(({
20
20
  id,
21
21
  defaultValue,
22
22
  placeholder = "(11) 91234-1234",
23
+ auxiliaryCheckbox,
23
24
  ...patternFormatProps
24
25
  } = props;
25
26
  return /* @__PURE__ */React.createElement(FormField, {
@@ -33,6 +34,7 @@ var FormFieldPhone = /* @__PURE__ */__name(({
33
34
  defaultValue,
34
35
  rules,
35
36
  disabled,
37
+ auxiliaryCheckbox,
36
38
  render: /* @__PURE__ */__name(({
37
39
  field
38
40
  }) => {
package/dist/esm/MultistepForm/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
2
  import * as React from 'react';
3
- import { Form, useForm, yupResolver } from "../chunk-LTFTNMQO.js";
4
- import { __name } from "../chunk-TS4CHDPS.js";
3
+ import { Form, useForm, yupResolver } from "../chunk-X2A7XW2U.js";
4
+ import { __name } from "../chunk-EA4K5JAO.js";
5
5
 
6
6
  // src/MultistepForm/MultistepForm.tsx
7
7
  import { Flex as Flex6 } from "@ttoss/ui";
package/dist/esm/{chunk-TS4CHDPS.js → chunk-EA4K5JAO.js} RENAMED
@@ -46,9 +46,56 @@ var FormErrorMessage = /* @__PURE__ */__name(({
46
46
  }, "FormErrorMessage");
47
47
 
48
48
  // src/FormField.tsx
49
- import { Checkbox, Flex, Label, Switch } from "@ttoss/ui";
49
+ import { Checkbox as Checkbox2, Flex as Flex2, Label as Label2, Switch } from "@ttoss/ui";
50
+ import * as React3 from "react";
51
+ import { useController as useController2, useFormContext as useFormContext2 } from "react-hook-form";
52
+
53
+ // src/AuxiliaryCheckbox.tsx
54
+ import { Checkbox, Flex, Label } from "@ttoss/ui";
50
55
  import * as React2 from "react";
51
- import { useController, useFormContext as useFormContext2 } from "react-hook-form";
56
+ import { useController } from "react-hook-form";
57
+ var AuxiliaryCheckbox = /* @__PURE__ */__name(({
58
+ label,
59
+ name,
60
+ defaultValue = false,
61
+ rules,
62
+ disabled
63
+ }) => {
64
+ const uniqueId = React2.useId();
65
+ const id = `auxiliary-checkbox-${name}-${uniqueId}`;
66
+ const {
67
+ field
68
+ } = useController({
69
+ name,
70
+ defaultValue,
71
+ rules
72
+ });
73
+ const isDisabled = disabled ?? field.disabled;
74
+ const {
75
+ value,
76
+ ...fieldWithoutValue
77
+ } = field;
78
+ return /* @__PURE__ */React2.createElement(Label, {
79
+ "aria-disabled": isDisabled,
80
+ htmlFor: id,
81
+ sx: {
82
+ flexDirection: "row",
83
+ alignItems: "center",
84
+ cursor: isDisabled ? "not-allowed" : "pointer"
85
+ }
86
+ }, /* @__PURE__ */React2.createElement(Flex, {
87
+ sx: {
88
+ position: "relative"
89
+ }
90
+ }, /* @__PURE__ */React2.createElement(Checkbox, {
91
+ id,
92
+ ...fieldWithoutValue,
93
+ checked: value,
94
+ disabled: isDisabled
95
+ })), label);
96
+ }, "AuxiliaryCheckbox");
97
+
98
+ // src/FormField.tsx
52
99
  var FormField = /* @__PURE__ */__name(({
53
100
  label,
54
101
  id: idProp,
@@ -60,9 +107,10 @@ var FormField = /* @__PURE__ */__name(({
60
107
  css,
61
108
  render,
62
109
  warning,
63
- rules
110
+ rules,
111
+ auxiliaryCheckbox
64
112
  }) => {
65
- const controllerReturn = useController({
113
+ const controllerReturn = useController2({
66
114
  name,
67
115
  defaultValue,
68
116
  rules
@@ -74,14 +122,15 @@ var FormField = /* @__PURE__ */__name(({
74
122
  } = useFormContext2();
75
123
  const disabled = propsDisabled ?? controllerReturn.field.disabled;
76
124
  const hasError = !!errors[name];
77
- const uniqueId = React2.useId();
125
+ const hasAuxiliaryError = auxiliaryCheckbox ? !!errors[auxiliaryCheckbox.name] : false;
126
+ const uniqueId = React3.useId();
78
127
  const id = idProp || `form-field-${name}-${uniqueId}`;
79
128
  const isCheckboxOrSwitch = /* @__PURE__ */__name(element => {
80
- return [Checkbox, Switch].some(component => {
129
+ return [Checkbox2, Switch].some(component => {
81
130
  return element.type === component;
82
131
  });
83
132
  }, "isCheckboxOrSwitch");
84
- const controllerReturnWithDisabled = React2.useMemo(() => {
133
+ const controllerReturnWithDisabled = React3.useMemo(() => {
85
134
  return {
86
135
  ...controllerReturn,
87
136
  field: {
@@ -90,9 +139,9 @@ var FormField = /* @__PURE__ */__name(({
90
139
  }
91
140
  };
92
141
  }, [controllerReturn, disabled]);
93
- const memoizedRender = React2.useMemo(() => {
94
- return React2.Children.map(render(controllerReturnWithDisabled), child => {
95
- if (! /* @__PURE__ */React2.isValidElement(child)) {
142
+ const memoizedRender = React3.useMemo(() => {
143
+ return React3.Children.map(render(controllerReturnWithDisabled), child => {
144
+ if (! /* @__PURE__ */React3.isValidElement(child)) {
96
145
  return null;
97
146
  }
98
147
  const mergeProps = {
@@ -102,7 +151,7 @@ var FormField = /* @__PURE__ */__name(({
102
151
  })
103
152
  };
104
153
  if (label && isCheckboxOrSwitch(child)) {
105
- return /* @__PURE__ */React2.createElement(Label, {
154
+ return /* @__PURE__ */React3.createElement(Label2, {
106
155
  "aria-disabled": disabled,
107
156
  htmlFor: id,
108
157
  tooltip: labelTooltip,
@@ -111,26 +160,27 @@ var FormField = /* @__PURE__ */__name(({
111
160
  alignItems: "center",
112
161
  cursor: disabled ? "not-allowed" : "pointer"
113
162
  }
114
- }, /* @__PURE__ */React2.createElement(Flex, {
163
+ }, /* @__PURE__ */React3.createElement(Flex2, {
115
164
  sx: {
116
165
  position: "relative"
117
166
  }
118
- }, /* @__PURE__ */React2.cloneElement(child, mergeProps)), label);
167
+ }, /* @__PURE__ */React3.cloneElement(child, mergeProps)), label);
119
168
  }
120
- return /* @__PURE__ */React2.createElement(Flex, {
169
+ return /* @__PURE__ */React3.createElement(Flex2, {
121
170
  sx: {
122
171
  width: "full",
123
172
  flexDirection: "column",
124
173
  gap: "2"
125
174
  }
126
- }, label && /* @__PURE__ */React2.createElement(Label, {
175
+ }, label && /* @__PURE__ */React3.createElement(Label2, {
127
176
  "aria-disabled": disabled,
128
177
  htmlFor: id,
129
178
  tooltip: labelTooltip
130
- }, label), /* @__PURE__ */React2.cloneElement(child, mergeProps));
179
+ }, label), /* @__PURE__ */React3.cloneElement(child, mergeProps));
131
180
  });
132
181
  }, [render, controllerReturnWithDisabled, label, disabled, id, labelTooltip, warning]);
133
- return /* @__PURE__ */React2.createElement(Flex, {
182
+ const errorNameToDisplay = hasError ? name : hasAuxiliaryError && auxiliaryCheckbox ? auxiliaryCheckbox.name : name;
183
+ return /* @__PURE__ */React3.createElement(Flex2, {
134
184
  sx: {
135
185
  flexDirection: "column",
136
186
  width: "100%",
@@ -138,9 +188,12 @@ var FormField = /* @__PURE__ */__name(({
138
188
  ...sx
139
189
  },
140
190
  css
141
- }, memoizedRender, /* @__PURE__ */React2.createElement(FormErrorMessage, {
142
- name
143
- }), warning && !hasError && /* @__PURE__ */React2.createElement(Flex, {
191
+ }, memoizedRender, auxiliaryCheckbox && /* @__PURE__ */React3.createElement(AuxiliaryCheckbox, {
192
+ ...auxiliaryCheckbox,
193
+ disabled
194
+ }), /* @__PURE__ */React3.createElement(FormErrorMessage, {
195
+ name: errorNameToDisplay
196
+ }), warning && !hasError && /* @__PURE__ */React3.createElement(Flex2, {
144
197
  className: "warning",
145
198
  sx: {
146
199
  color: "feedback.text.caution.default",
@@ -171,6 +224,9 @@ var FormFieldPatternFormat = /* @__PURE__ */__name(({
171
224
  defaultValue,
172
225
  leadingIcon,
173
226
  trailingIcon,
227
+ auxiliaryCheckbox,
228
+ onBlur,
229
+ onValueChange,
174
230
  ...patternFormatProps
175
231
  } = props;
176
232
  return /* @__PURE__ */React.createElement(FormField, {
@@ -184,6 +240,7 @@ var FormFieldPatternFormat = /* @__PURE__ */__name(({
184
240
  defaultValue,
185
241
  rules,
186
242
  disabled,
243
+ auxiliaryCheckbox,
187
244
  render: /* @__PURE__ */__name(({
188
245
  field,
189
246
  fieldState
@@ -192,9 +249,13 @@ var FormFieldPatternFormat = /* @__PURE__ */__name(({
192
249
  ...patternFormatProps,
193
250
  name: field.name,
194
251
  value: field.value,
195
- onBlur: field.onBlur,
196
- onValueChange: /* @__PURE__ */__name(values => {
252
+ onBlur: /* @__PURE__ */__name(e => {
253
+ field.onBlur();
254
+ onBlur?.(e);
255
+ }, "onBlur"),
256
+ onValueChange: /* @__PURE__ */__name((values, sourceInfo) => {
197
257
  field.onChange(values.value);
258
+ onValueChange?.(values, sourceInfo);
198
259
  }, "onValueChange"),
199
260
  customInput: Input,
200
261
  leadingIcon,
@@ -262,6 +323,7 @@ var FormFieldCNPJ = /* @__PURE__ */__name(({
262
323
  id,
263
324
  defaultValue,
264
325
  placeholder = "12.345.678/0000-00",
326
+ auxiliaryCheckbox,
265
327
  ...patternFormatProps
266
328
  } = props;
267
329
  return /* @__PURE__ */React.createElement(FormField, {
@@ -275,6 +337,7 @@ var FormFieldCNPJ = /* @__PURE__ */__name(({
275
337
  defaultValue,
276
338
  rules,
277
339
  disabled,
340
+ auxiliaryCheckbox,
278
341
  render: /* @__PURE__ */__name(({
279
342
  field
280
343
  }) => {
package/dist/esm/{chunk-LTFTNMQO.js → chunk-X2A7XW2U.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
2
  import * as React from 'react';
3
- import { FormErrorMessage, FormField, FormFieldPatternFormat, __name, isCnpjValid } from "./chunk-TS4CHDPS.js";
3
+ import { FormErrorMessage, FormField, FormFieldPatternFormat, __name, isCnpjValid } from "./chunk-EA4K5JAO.js";
4
4
 
5
5
  // src/Form.tsx
6
6
  import { Box } from "@ttoss/ui";
@@ -38,6 +38,8 @@ var FormFieldCheckbox = /* @__PURE__ */__name(({
38
38
  css,
39
39
  rules,
40
40
  id,
41
+ onBlur,
42
+ onChange,
41
43
  ...checkboxProps
42
44
  } = props;
43
45
  return /* @__PURE__ */React.createElement(FormField, {
@@ -62,6 +64,14 @@ var FormFieldCheckbox = /* @__PURE__ */__name(({
62
64
  return /* @__PURE__ */React.createElement(Checkbox, {
63
65
  ...checkboxProps,
64
66
  ...fieldWithoutValue,
67
+ onBlur: /* @__PURE__ */__name(e => {
68
+ field.onBlur();
69
+ onBlur?.(e);
70
+ }, "onBlur"),
71
+ onChange: /* @__PURE__ */__name(e => {
72
+ field.onChange(e);
73
+ onChange?.(e);
74
+ }, "onChange"),
65
75
  checked: value,
66
76
  disabled: disabled ?? field.disabled,
67
77
  "aria-invalid": !!fieldState.error
@@ -105,6 +115,9 @@ var FormFieldNumericFormat = /* @__PURE__ */__name(({
105
115
  defaultValue,
106
116
  leadingIcon,
107
117
  trailingIcon,
118
+ auxiliaryCheckbox,
119
+ onBlur,
120
+ onValueChange,
108
121
  ...numericFormatProps
109
122
  } = props;
110
123
  return /* @__PURE__ */React.createElement(FormField, {
@@ -118,6 +131,7 @@ var FormFieldNumericFormat = /* @__PURE__ */__name(({
118
131
  defaultValue,
119
132
  rules,
120
133
  disabled,
134
+ auxiliaryCheckbox,
121
135
  render: /* @__PURE__ */__name(({
122
136
  field
123
137
  }) => {
@@ -125,9 +139,13 @@ var FormFieldNumericFormat = /* @__PURE__ */__name(({
125
139
  ...numericFormatProps,
126
140
  name: field.name,
127
141
  value: field.value,
128
- onBlur: field.onBlur,
129
- onValueChange: /* @__PURE__ */__name(values => {
142
+ onBlur: /* @__PURE__ */__name(e => {
143
+ field.onBlur();
144
+ onBlur?.(e);
145
+ }, "onBlur"),
146
+ onValueChange: /* @__PURE__ */__name((values, sourceInfo) => {
130
147
  field.onChange(values.floatValue);
148
+ onValueChange?.(values, sourceInfo);
131
149
  }, "onValueChange"),
132
150
  customInput: Input,
133
151
  leadingIcon,
@@ -196,6 +214,9 @@ var FormFieldInput = /* @__PURE__ */__name(({
196
214
  id,
197
215
  leadingIcon,
198
216
  trailingIcon,
217
+ auxiliaryCheckbox,
218
+ onBlur,
219
+ onChange,
199
220
  ...inputProps
200
221
  } = props;
201
222
  return /* @__PURE__ */React.createElement(FormField, {
@@ -209,6 +230,7 @@ var FormFieldInput = /* @__PURE__ */__name(({
209
230
  defaultValue,
210
231
  rules,
211
232
  disabled,
233
+ auxiliaryCheckbox,
212
234
  render: /* @__PURE__ */__name(({
213
235
  field,
214
236
  fieldState
@@ -216,6 +238,14 @@ var FormFieldInput = /* @__PURE__ */__name(({
216
238
  return /* @__PURE__ */React.createElement(Input2, {
217
239
  ...inputProps,
218
240
  ...field,
241
+ onBlur: /* @__PURE__ */__name(e => {
242
+ field.onBlur();
243
+ onBlur?.(e);
244
+ }, "onBlur"),
245
+ onChange: /* @__PURE__ */__name(e => {
246
+ field.onChange(e);
247
+ onChange?.(e);
248
+ }, "onChange"),
219
249
  leadingIcon,
220
250
  trailingIcon,
221
251
  disabled: disabled ?? field.disabled,
@@ -242,6 +272,9 @@ var FormFieldPassword = /* @__PURE__ */__name(({
242
272
  rules,
243
273
  id,
244
274
  leadingIcon,
275
+ auxiliaryCheckbox,
276
+ onBlur,
277
+ onChange,
245
278
  ...inputProps
246
279
  } = props;
247
280
  return /* @__PURE__ */React.createElement(FormField, {
@@ -255,6 +288,7 @@ var FormFieldPassword = /* @__PURE__ */__name(({
255
288
  defaultValue,
256
289
  rules,
257
290
  disabled,
291
+ auxiliaryCheckbox,
258
292
  render: /* @__PURE__ */__name(({
259
293
  field,
260
294
  fieldState
@@ -262,6 +296,14 @@ var FormFieldPassword = /* @__PURE__ */__name(({
262
296
  return /* @__PURE__ */React.createElement(InputPassword, {
263
297
  ...inputProps,
264
298
  ...field,
299
+ onBlur: /* @__PURE__ */__name(e => {
300
+ field.onBlur();
301
+ onBlur?.(e);
302
+ }, "onBlur"),
303
+ onChange: /* @__PURE__ */__name(e => {
304
+ field.onChange(e);
305
+ onChange?.(e);
306
+ }, "onChange"),
265
307
  leadingIcon,
266
308
  disabled: disabled ?? field.disabled,
267
309
  "aria-invalid": fieldState.error ? "true" : void 0
@@ -287,6 +329,8 @@ var FormFieldRadio = /* @__PURE__ */__name(({
287
329
  rules,
288
330
  id,
289
331
  defaultValue,
332
+ onBlur,
333
+ onChange,
290
334
  ...radioProps
291
335
  } = props;
292
336
  return /* @__PURE__ */React.createElement(FormField, {
@@ -317,8 +361,14 @@ var FormFieldRadio = /* @__PURE__ */__name(({
317
361
  }
318
362
  }, /* @__PURE__ */React.createElement(Radio, {
319
363
  ref: field.ref,
320
- onChange: field.onChange,
321
- onBlur: field.onBlur,
364
+ onChange: /* @__PURE__ */__name(e => {
365
+ field.onChange(e);
366
+ onChange?.(e);
367
+ }, "onChange"),
368
+ onBlur: /* @__PURE__ */__name(e => {
369
+ field.onBlur();
370
+ onBlur?.(e);
371
+ }, "onBlur"),
322
372
  value: option.value,
323
373
  checked: field.value === option.value,
324
374
  name,
@@ -349,6 +399,8 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
349
399
  options,
350
400
  direction = "column",
351
401
  width = "full",
402
+ onBlur,
403
+ onChange,
352
404
  ...radioProps
353
405
  } = props;
354
406
  return /* @__PURE__ */React.createElement(FormField, {
@@ -390,8 +442,14 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
390
442
  }, /* @__PURE__ */React.createElement(Radio2, {
391
443
  ...radioProps,
392
444
  ref: field.ref,
393
- onChange: field.onChange,
394
- onBlur: field.onBlur,
445
+ onChange: /* @__PURE__ */__name(e => {
446
+ field.onChange(e);
447
+ onChange?.(e);
448
+ }, "onChange"),
449
+ onBlur: /* @__PURE__ */__name(e => {
450
+ field.onBlur();
451
+ onBlur?.(e);
452
+ }, "onBlur"),
395
453
  value: option.value,
396
454
  checked: field.value === option.value,
397
455
  name,
@@ -537,6 +595,8 @@ var FormFieldSelect = /* @__PURE__ */__name(({
537
595
  rules,
538
596
  id,
539
597
  defaultValue,
598
+ onBlur,
599
+ onChange,
540
600
  ...selectProps
541
601
  } = props;
542
602
  return /* @__PURE__ */React.createElement(FormField, {
@@ -557,6 +617,14 @@ var FormFieldSelect = /* @__PURE__ */__name(({
557
617
  return /* @__PURE__ */React.createElement(Select, {
558
618
  ...selectProps,
559
619
  ...field,
620
+ onBlur: /* @__PURE__ */__name(e => {
621
+ field.onBlur();
622
+ onBlur?.(e);
623
+ }, "onBlur"),
624
+ onChange: /* @__PURE__ */__name(newValue => {
625
+ field.onChange(newValue);
626
+ onChange?.(newValue);
627
+ }, "onChange"),
560
628
  isDisabled: disabled ?? field.disabled,
561
629
  "aria-invalid": fieldState.error ? "true" : void 0
562
630
  });
@@ -580,6 +648,8 @@ var FormFieldSwitch = /* @__PURE__ */__name(({
580
648
  rules,
581
649
  id,
582
650
  defaultValue,
651
+ onBlur,
652
+ onChange,
583
653
  ...switchProps
584
654
  } = props;
585
655
  return /* @__PURE__ */React.createElement(FormField, {
@@ -600,6 +670,14 @@ var FormFieldSwitch = /* @__PURE__ */__name(({
600
670
  return /* @__PURE__ */React.createElement(Switch, {
601
671
  ...switchProps,
602
672
  ...field,
673
+ onBlur: /* @__PURE__ */__name(e => {
674
+ field.onBlur();
675
+ onBlur?.(e);
676
+ }, "onBlur"),
677
+ onChange: /* @__PURE__ */__name(e => {
678
+ field.onChange(e);
679
+ onChange?.(e);
680
+ }, "onChange"),
603
681
  disabled: disabled ?? field.disabled,
604
682
  "aria-invalid": !!fieldState.error
605
683
  });
@@ -623,6 +701,9 @@ var FormFieldTextarea = /* @__PURE__ */__name(({
623
701
  css,
624
702
  rules,
625
703
  id,
704
+ auxiliaryCheckbox,
705
+ onBlur,
706
+ onChange,
626
707
  ...textareaProps
627
708
  } = props;
628
709
  return /* @__PURE__ */React.createElement(FormField, {
@@ -636,6 +717,7 @@ var FormFieldTextarea = /* @__PURE__ */__name(({
636
717
  defaultValue,
637
718
  rules,
638
719
  disabled,
720
+ auxiliaryCheckbox,
639
721
  render: /* @__PURE__ */__name(({
640
722
  field,
641
723
  fieldState
@@ -643,6 +725,14 @@ var FormFieldTextarea = /* @__PURE__ */__name(({
643
725
  return /* @__PURE__ */React.createElement(Textarea, {
644
726
  ...textareaProps,
645
727
  ...field,
728
+ onBlur: /* @__PURE__ */__name(e => {
729
+ field.onBlur();
730
+ onBlur?.(e);
731
+ }, "onBlur"),
732
+ onChange: /* @__PURE__ */__name(e => {
733
+ field.onChange(e);
734
+ onChange?.(e);
735
+ }, "onChange"),
646
736
  disabled: disabled ?? field.disabled,
647
737
  "aria-invalid": fieldState.error ? "true" : void 0
648
738
  });
package/dist/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-LTFTNMQO.js";
3
- import { FormErrorMessage, FormField, FormFieldPatternFormat } from "./chunk-TS4CHDPS.js";
2
+ import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-X2A7XW2U.js";
3
+ import { FormErrorMessage, FormField, FormFieldPatternFormat } from "./chunk-EA4K5JAO.js";
4
4
  export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };
package/dist/index.d.ts CHANGED
@@ -4,8 +4,8 @@ import * as React from 'react';
4
4
  import { FieldValues, FormProviderProps, FieldName, FieldPath } from 'react-hook-form';
5
5
  export * from 'react-hook-form';
6
6
  export { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
7
- import { F as FormFieldProps, a as FormFieldPatternFormatProps } from './FormFieldPatternFormat-nQpHzJqa.js';
8
- export { b as FormField, c as FormFieldPatternFormat } from './FormFieldPatternFormat-nQpHzJqa.js';
7
+ import { F as FormFieldProps, a as FormFieldPatternFormatProps } from './FormFieldPatternFormat-D5CI6eUA.js';
8
+ export { b as FormField, c as FormFieldPatternFormat } from './FormFieldPatternFormat-D5CI6eUA.js';
9
9
  import { NumericFormatProps } from 'react-number-format';
10
10
  import './typings.d-HZBqJJjn.js';
11
11
  import * as yup from 'yup';
@@ -107,4 +107,4 @@ type FormGroupProps = {
107
107
  } & BoxProps;
108
108
  declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
109
109
 
110
- export { Form, FormErrorMessage, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, type FormRadioOption, useFormGroup };
110
+ export { Form, FormErrorMessage, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldProps, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, type FormRadioOption, useFormGroup };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/forms",
3
- "version": "0.33.4",
3
+ "version": "0.35.0",
4
4
  "license": "MIT",
5
5
  "author": "ttoss",
6
6
  "contributors": [
@@ -51,9 +51,9 @@
51
51
  "tsup": "^8.5.1",
52
52
  "yup": "^1.7.1",
53
53
  "@ttoss/config": "^1.35.12",
54
- "@ttoss/i18n-cli": "^0.7.38",
55
54
  "@ttoss/react-i18n": "^2.0.24",
56
55
  "@ttoss/react-icons": "^0.5.5",
56
+ "@ttoss/i18n-cli": "^0.7.38",
57
57
  "@ttoss/test-utils": "^4.0.1",
58
58
  "@ttoss/ui": "^6.0.4"
59
59
  },