@ttoss/forms 0.31.4 → 0.31.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.
@@ -1,1026 +0,0 @@
1
- /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
-
3
- // src/Form.tsx
4
- import { Box } from "@ttoss/ui";
5
- import { FormProvider } from "react-hook-form";
6
- import { jsx } from "react/jsx-runtime";
7
- var Form = ({
8
- children,
9
- onSubmit,
10
- sx,
11
- ...formMethods
12
- }) => {
13
- return /* @__PURE__ */jsx(FormProvider, {
14
- ...formMethods,
15
- children: /* @__PURE__ */jsx(Box, {
16
- as: "form",
17
- variant: "forms.form",
18
- onSubmit: formMethods.handleSubmit(data => {
19
- return onSubmit?.(data);
20
- }),
21
- sx,
22
- children
23
- })
24
- });
25
- };
26
-
27
- // src/FormErrorMessage.tsx
28
- import { ErrorMessage } from "@hookform/error-message";
29
- import { FormattedMessage } from "@ttoss/react-i18n";
30
- import { HelpText } from "@ttoss/ui";
31
- import { useFormContext } from "react-hook-form";
32
- import { jsx as jsx2 } from "react/jsx-runtime";
33
- var isMessageDescriptor = possibleMessageDescriptor => {
34
- return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
35
- };
36
- var FormErrorMessage = ({
37
- name,
38
- disabled
39
- }) => {
40
- const {
41
- formState: {
42
- errors
43
- }
44
- } = useFormContext();
45
- return /* @__PURE__ */jsx2(ErrorMessage, {
46
- name,
47
- errors,
48
- render: ({
49
- message
50
- }) => {
51
- return /* @__PURE__ */jsx2(HelpText, {
52
- negative: true,
53
- disabled,
54
- children: (() => {
55
- if (typeof message === "string") {
56
- return message;
57
- }
58
- if (isMessageDescriptor(message)) {
59
- return /* @__PURE__ */jsx2(FormattedMessage, {
60
- ...message
61
- });
62
- }
63
- return JSON.stringify(message);
64
- })()
65
- });
66
- }
67
- });
68
- };
69
-
70
- // src/FormField.tsx
71
- import { Checkbox, Flex, Label, Switch, Tooltip } from "@ttoss/ui";
72
- import * as React from "react";
73
- import { useController, useFormContext as useFormContext2 } from "react-hook-form";
74
- import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
75
- var FormField = ({
76
- label,
77
- id: idProp,
78
- name,
79
- defaultValue,
80
- disabled,
81
- tooltip,
82
- inputTooltip,
83
- sx,
84
- css,
85
- render,
86
- warning
87
- }) => {
88
- const controllerReturn = useController({
89
- name,
90
- defaultValue
91
- });
92
- const {
93
- formState: {
94
- errors
95
- }
96
- } = useFormContext2();
97
- const hasError = !!errors[name];
98
- const uniqueId = React.useId();
99
- const id = idProp || `form-field-${name}-${uniqueId}`;
100
- const tooltipId = `${id}-tooltip`;
101
- const [showInputTooltip, setShowInputTooltip] = React.useState(false);
102
- const inputRef = React.useRef(null);
103
- React.useEffect(() => {
104
- if (!inputTooltip) return;
105
- const handleClickOutside = event => {
106
- if (inputRef.current && !inputRef.current.contains(event.target)) {
107
- setShowInputTooltip(false);
108
- }
109
- };
110
- const handleEscapeKey = event => {
111
- if (event.key === "Escape") {
112
- setShowInputTooltip(false);
113
- }
114
- };
115
- if (showInputTooltip) {
116
- document.addEventListener("mousedown", handleClickOutside);
117
- document.addEventListener("keydown", handleEscapeKey);
118
- }
119
- return () => {
120
- document.removeEventListener("mousedown", handleClickOutside);
121
- document.removeEventListener("keydown", handleEscapeKey);
122
- };
123
- }, [showInputTooltip, inputTooltip]);
124
- const memoizedRender = React.useMemo(() => {
125
- return React.Children.map(render(controllerReturn), child => {
126
- if (!React.isValidElement(child)) {
127
- return null;
128
- }
129
- const childProps = child.props;
130
- const inputProps = {
131
- ...childProps,
132
- ref: inputRef,
133
- onClick: e => {
134
- childProps.onClick?.(e);
135
- if (inputTooltip) {
136
- setShowInputTooltip(true);
137
- }
138
- },
139
- onFocus: e => {
140
- childProps.onFocus?.(e);
141
- if (inputTooltip && !inputTooltip.openOnClick) {
142
- setShowInputTooltip(true);
143
- }
144
- },
145
- onBlur: e => {
146
- childProps.onBlur?.(e);
147
- if (inputTooltip && !inputTooltip.openOnClick) {
148
- setShowInputTooltip(false);
149
- }
150
- },
151
- ...(inputTooltip && showInputTooltip ? {
152
- "data-tooltip-id": tooltipId
153
- } : {})
154
- };
155
- if (label && [Checkbox, Switch].some(component => {
156
- return child.type === component;
157
- })) {
158
- return /* @__PURE__ */jsxs(Fragment, {
159
- children: [/* @__PURE__ */jsxs(Label, {
160
- "aria-disabled": disabled,
161
- tooltip,
162
- children: [/* @__PURE__ */jsx3(Flex, {
163
- children: warning ? React.createElement(child.type, {
164
- id,
165
- ...inputProps,
166
- ...(warning ? {
167
- trailingIcon: "warning-alt"
168
- } : {})
169
- }) : React.createElement(child.type, {
170
- id,
171
- ...inputProps
172
- })
173
- }), label]
174
- }), inputTooltip && showInputTooltip && /* @__PURE__ */jsx3(Flex, {
175
- sx: {
176
- width: "full",
177
- fontSize: "sm"
178
- },
179
- children: /* @__PURE__ */jsx3(Tooltip, {
180
- id: tooltipId,
181
- place: inputTooltip.place,
182
- clickable: inputTooltip.clickable,
183
- isOpen: showInputTooltip,
184
- variant: inputTooltip.variant,
185
- children: inputTooltip.render
186
- })
187
- })]
188
- });
189
- }
190
- return /* @__PURE__ */jsxs(Flex, {
191
- sx: {
192
- width: "full",
193
- flexDirection: "column",
194
- gap: "2"
195
- },
196
- children: [label && /* @__PURE__ */jsx3(Label, {
197
- "aria-disabled": disabled,
198
- htmlFor: id,
199
- tooltip,
200
- children: label
201
- }), warning ? React.createElement(child.type, {
202
- id,
203
- ...inputProps,
204
- ...(warning ? {
205
- trailingIcon: "warning-alt"
206
- } : {})
207
- }) : React.createElement(child.type, {
208
- id,
209
- ...inputProps
210
- }), inputTooltip && showInputTooltip && /* @__PURE__ */jsx3(Flex, {
211
- sx: {
212
- width: "full",
213
- fontSize: "sm"
214
- },
215
- children: /* @__PURE__ */jsx3(Tooltip, {
216
- id: tooltipId,
217
- place: inputTooltip.place,
218
- clickable: inputTooltip.clickable,
219
- isOpen: showInputTooltip,
220
- variant: inputTooltip.variant,
221
- sx: inputTooltip.sx,
222
- children: inputTooltip.render
223
- })
224
- })]
225
- });
226
- });
227
- }, [render, controllerReturn, label, disabled, id, tooltip, warning, inputTooltip, showInputTooltip, tooltipId]);
228
- return /* @__PURE__ */jsxs(Flex, {
229
- sx: {
230
- flexDirection: "column",
231
- width: "100%",
232
- gap: "1",
233
- ...sx
234
- },
235
- css,
236
- children: [memoizedRender, /* @__PURE__ */jsx3(FormErrorMessage, {
237
- name
238
- }), warning && !hasError && /* @__PURE__ */jsx3(Flex, {
239
- className: "warning",
240
- sx: {
241
- color: "feedback.text.caution.default",
242
- fontSize: "sm",
243
- gap: "2",
244
- paddingBottom: "1",
245
- alignItems: "center"
246
- },
247
- children: warning
248
- })]
249
- });
250
- };
251
-
252
- // src/FormFieldCheckbox.tsx
253
- import { Checkbox as Checkbox2 } from "@ttoss/ui";
254
- import { jsx as jsx4 } from "react/jsx-runtime";
255
- var FormFieldCheckbox = ({
256
- label,
257
- name,
258
- sx,
259
- tooltip,
260
- ...checkboxProps
261
- }) => {
262
- return /* @__PURE__ */jsx4(FormField, {
263
- label,
264
- name,
265
- tooltip,
266
- render: ({
267
- field,
268
- fieldState
269
- }) => {
270
- return /* @__PURE__ */jsx4(Checkbox2, {
271
- ...field,
272
- ...checkboxProps,
273
- "aria-invalid": !!fieldState.error,
274
- sx
275
- });
276
- }
277
- });
278
- };
279
-
280
- // src/FormFieldPatternFormat.tsx
281
- import { Input } from "@ttoss/ui";
282
- import { PatternFormat } from "react-number-format";
283
- import { jsx as jsx5 } from "react/jsx-runtime";
284
- var FormFieldPatternFormat = ({
285
- label,
286
- name,
287
- warning,
288
- inputTooltip,
289
- ...patternFormatProps
290
- }) => {
291
- return /* @__PURE__ */jsx5(FormField, {
292
- name,
293
- label,
294
- warning,
295
- inputTooltip,
296
- render: ({
297
- field,
298
- fieldState
299
- }) => {
300
- return /* @__PURE__ */jsx5(PatternFormat, {
301
- name: field.name,
302
- value: field.value,
303
- onBlur: field.onBlur,
304
- onValueChange: values => {
305
- field.onChange(values.value);
306
- },
307
- customInput: Input,
308
- "aria-invalid": Boolean(fieldState.error).valueOf(),
309
- ...patternFormatProps
310
- });
311
- }
312
- });
313
- };
314
-
315
- // src/FormFieldCreditCardNumber.tsx
316
- import { jsx as jsx6 } from "react/jsx-runtime";
317
- var FormFieldCreditCardNumber = ({
318
- label,
319
- name,
320
- ...formFieldPatternFormatProps
321
- }) => {
322
- return /* @__PURE__ */jsx6(FormFieldPatternFormat, {
323
- name,
324
- label,
325
- warning: formFieldPatternFormatProps.warning,
326
- format: "#### #### #### ####",
327
- placeholder: "1234 1234 1234 1234",
328
- ...formFieldPatternFormatProps
329
- });
330
- };
331
-
332
- // src/FormFieldNumericFormat.tsx
333
- import { Input as Input2 } from "@ttoss/ui";
334
- import { NumericFormat } from "react-number-format";
335
- import { jsx as jsx7 } from "react/jsx-runtime";
336
- var FormFieldNumericFormat = ({
337
- label,
338
- name,
339
- warning,
340
- tooltip,
341
- inputTooltip,
342
- ...numericFormatProps
343
- }) => {
344
- return /* @__PURE__ */jsx7(FormField, {
345
- label,
346
- name,
347
- warning,
348
- tooltip,
349
- inputTooltip,
350
- render: ({
351
- field
352
- }) => {
353
- return /* @__PURE__ */jsx7(NumericFormat, {
354
- name: field.name,
355
- value: field.value,
356
- onBlur: field.onBlur,
357
- onValueChange: values => {
358
- field.onChange(values.floatValue);
359
- },
360
- customInput: Input2,
361
- ...numericFormatProps
362
- });
363
- }
364
- });
365
- };
366
-
367
- // src/FormFieldCurrencyInput.tsx
368
- import { jsx as jsx8 } from "react/jsx-runtime";
369
- var FormFieldCurrencyInput = ({
370
- label,
371
- name,
372
- prefix,
373
- decimalSeparator,
374
- thousandSeparator,
375
- ...formFieldNumericFormatProps
376
- }) => {
377
- return /* @__PURE__ */jsx8(FormFieldNumericFormat, {
378
- name,
379
- label,
380
- warning: formFieldNumericFormatProps.warning,
381
- fixedDecimalScale: true,
382
- decimalScale: 2,
383
- prefix,
384
- decimalSeparator,
385
- thousandSeparator,
386
- placeholder: `${prefix} 0${decimalSeparator}00`,
387
- allowNegative: false,
388
- ...formFieldNumericFormatProps
389
- });
390
- };
391
-
392
- // src/FormFieldInput.tsx
393
- import { Input as Input3 } from "@ttoss/ui";
394
- import { jsx as jsx9 } from "react/jsx-runtime";
395
- var FormFieldInput = ({
396
- label,
397
- name,
398
- tooltip,
399
- sx,
400
- defaultValue = "",
401
- ...inputProps
402
- }) => {
403
- return /* @__PURE__ */jsx9(FormField, {
404
- name,
405
- label,
406
- disabled: inputProps.disabled,
407
- tooltip,
408
- warning: inputProps.warning,
409
- inputTooltip: inputProps.inputTooltip,
410
- sx,
411
- defaultValue,
412
- render: ({
413
- field,
414
- fieldState
415
- }) => {
416
- return /* @__PURE__ */jsx9(Input3, {
417
- ...inputProps,
418
- ...field,
419
- "aria-invalid": fieldState.error ? "true" : void 0
420
- });
421
- }
422
- });
423
- };
424
-
425
- // src/FormFieldPassword.tsx
426
- import { InputPassword } from "@ttoss/ui";
427
- import { jsx as jsx10 } from "react/jsx-runtime";
428
- var FormFieldPassword = ({
429
- label,
430
- name,
431
- tooltip,
432
- sx,
433
- defaultValue = "",
434
- ...inputProps
435
- }) => {
436
- return /* @__PURE__ */jsx10(FormField, {
437
- name,
438
- label,
439
- disabled: inputProps.disabled,
440
- tooltip,
441
- warning: inputProps.warning,
442
- inputTooltip: inputProps.inputTooltip,
443
- sx,
444
- defaultValue,
445
- render: ({
446
- field,
447
- fieldState
448
- }) => {
449
- return /* @__PURE__ */jsx10(InputPassword, {
450
- ...inputProps,
451
- ...field,
452
- "aria-invalid": fieldState.error ? "true" : void 0
453
- });
454
- }
455
- });
456
- };
457
-
458
- // src/FormFieldRadio.tsx
459
- import { Flex as Flex2, Label as Label2, Radio } from "@ttoss/ui";
460
- import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
461
- var FormFieldRadio = ({
462
- label,
463
- name,
464
- sx,
465
- options,
466
- tooltip,
467
- ...radioProps
468
- }) => {
469
- return /* @__PURE__ */jsx11(FormField, {
470
- label,
471
- name,
472
- sx,
473
- tooltip,
474
- render: ({
475
- field
476
- }) => {
477
- return /* @__PURE__ */jsx11(Flex2, {
478
- sx: {
479
- flexDirection: "column",
480
- gap: "1"
481
- },
482
- children: options.map(option => {
483
- const key = `form-field-radio-${name}-${option.value}`;
484
- return /* @__PURE__ */jsxs2(Label2, {
485
- sx: {
486
- fontSize: "md"
487
- },
488
- children: [/* @__PURE__ */jsx11(Radio, {
489
- ref: field.ref,
490
- onChange: field.onChange,
491
- onBlur: field.onBlur,
492
- value: option.value,
493
- checked: field.value === option.value,
494
- name,
495
- ...radioProps
496
- }), option.label]
497
- }, key);
498
- })
499
- });
500
- }
501
- });
502
- };
503
-
504
- // src/FormFieldRadioCard.tsx
505
- import { Box as Box2, Flex as Flex3, Label as Label3, Radio as Radio2, Text } from "@ttoss/ui";
506
- import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
507
- var FormFieldRadioCard = ({
508
- label,
509
- name,
510
- direction = "column",
511
- width = "full",
512
- sx,
513
- options,
514
- tooltip,
515
- ...radioProps
516
- }) => {
517
- return /* @__PURE__ */jsx12(FormField, {
518
- label,
519
- name,
520
- sx,
521
- tooltip,
522
- render: ({
523
- field
524
- }) => {
525
- return /* @__PURE__ */jsx12(Flex3, {
526
- sx: {
527
- flexDirection: direction,
528
- gap: "4"
529
- },
530
- children: options.map(option => {
531
- const key = `form-field-radio-${name}-${option.value}`;
532
- return /* @__PURE__ */jsx12(Box2, {
533
- sx: {
534
- gap: "2",
535
- width,
536
- border: "md",
537
- borderColor: "display.border.muted.default",
538
- borderRadius: "md"
539
- },
540
- children: /* @__PURE__ */jsxs3(Label3, {
541
- sx: {
542
- fontSize: "md",
543
- width: "100%",
544
- padding: "4"
545
- },
546
- children: [/* @__PURE__ */jsx12(Radio2, {
547
- ref: field.ref,
548
- onChange: field.onChange,
549
- onBlur: field.onBlur,
550
- value: option.value,
551
- checked: field.value === option.value,
552
- name,
553
- ...radioProps
554
- }), /* @__PURE__ */jsxs3(Flex3, {
555
- sx: {
556
- flexDirection: "column",
557
- gap: "1"
558
- },
559
- children: [option.label && /* @__PURE__ */jsx12(Text, {
560
- children: option.label
561
- }), option.description && /* @__PURE__ */jsx12(Text, {
562
- sx: {
563
- fontSize: "sm"
564
- },
565
- children: option.description
566
- })]
567
- })]
568
- })
569
- }, key);
570
- })
571
- });
572
- }
573
- });
574
- };
575
-
576
- // src/FormFieldRadioCardIcony.tsx
577
- import { Box as Box3, Flex as Flex4, Text as Text2 } from "@ttoss/ui";
578
- import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
579
- var FormFieldRadioCardIcony = ({
580
- label,
581
- name,
582
- direction = "row",
583
- width = "full",
584
- sx,
585
- options,
586
- tooltip
587
- }) => {
588
- return /* @__PURE__ */jsx13(FormField, {
589
- label,
590
- name,
591
- sx,
592
- tooltip,
593
- render: ({
594
- field
595
- }) => {
596
- const handleOptionClick = optionValue => {
597
- field.onChange(optionValue);
598
- field.onBlur();
599
- };
600
- return /* @__PURE__ */jsx13(Flex4, {
601
- sx: {
602
- flexDirection: direction,
603
- gap: "4"
604
- },
605
- children: options.map(option => {
606
- const key = `form-field-radio-card-${name}-${option.value}`;
607
- const isSelected = field.value === option.value;
608
- const IconComponent = option.icon;
609
- return /* @__PURE__ */jsxs4(Box3, {
610
- onClick: () => {
611
- return handleOptionClick(option.value);
612
- },
613
- sx: {
614
- width,
615
- padding: "6",
616
- border: isSelected ? "lg" : "md",
617
- borderColor: isSelected ? "input.background.accent.default" : "input.border.muted.default",
618
- borderRadius: "md",
619
- backgroundColor: "transparent",
620
- display: "flex",
621
- flexDirection: "column",
622
- alignItems: "center",
623
- justifyContent: "center",
624
- textAlign: "center",
625
- cursor: "pointer",
626
- transition: "all 0.2s ease-in-out"
627
- },
628
- children: [IconComponent && /* @__PURE__ */jsx13(Box3, {
629
- sx: {
630
- marginBottom: "2",
631
- color: "text.primary"
632
- },
633
- children: /* @__PURE__ */jsx13(IconComponent, {
634
- size: 24
635
- })
636
- }), /* @__PURE__ */jsxs4(Flex4, {
637
- sx: {
638
- flexDirection: "column",
639
- gap: "1"
640
- },
641
- children: [option.label && /* @__PURE__ */jsx13(Text2, {
642
- sx: {
643
- fontSize: "lg",
644
- fontWeight: "semibold",
645
- color: "text.primary"
646
- },
647
- children: option.label
648
- }), option.description && /* @__PURE__ */jsx13(Text2, {
649
- sx: {
650
- fontSize: "md",
651
- color: "text.secondary"
652
- },
653
- children: option.description
654
- })]
655
- })]
656
- }, key);
657
- })
658
- });
659
- }
660
- });
661
- };
662
-
663
- // src/FormFieldSelect.tsx
664
- import { Select } from "@ttoss/ui";
665
- import { jsx as jsx14 } from "react/jsx-runtime";
666
- var FormFieldSelect = ({
667
- label,
668
- name,
669
- id,
670
- defaultValue,
671
- sx,
672
- css,
673
- disabled,
674
- tooltip,
675
- ...selectProps
676
- }) => {
677
- return /* @__PURE__ */jsx14(FormField, {
678
- name,
679
- label,
680
- id,
681
- defaultValue,
682
- disabled,
683
- tooltip,
684
- inputTooltip: selectProps.inputTooltip,
685
- warning: selectProps.warning,
686
- sx,
687
- css,
688
- render: ({
689
- field,
690
- fieldState
691
- }) => {
692
- return /* @__PURE__ */jsx14(Select, {
693
- ...selectProps,
694
- ...field,
695
- isDisabled: disabled,
696
- "aria-invalid": fieldState.error ? "true" : void 0
697
- });
698
- }
699
- });
700
- };
701
-
702
- // src/FormFieldSwitch.tsx
703
- import { Switch as Switch2 } from "@ttoss/ui";
704
- import { jsx as jsx15 } from "react/jsx-runtime";
705
- var FormFieldSwitch = ({
706
- label,
707
- name,
708
- sx,
709
- tooltip,
710
- ...switchProps
711
- }) => {
712
- return /* @__PURE__ */jsx15(FormField, {
713
- label,
714
- name,
715
- tooltip,
716
- render: ({
717
- field,
718
- fieldState
719
- }) => {
720
- return /* @__PURE__ */jsx15(Switch2, {
721
- ...field,
722
- ...switchProps,
723
- "aria-invalid": !!fieldState.error,
724
- sx
725
- });
726
- }
727
- });
728
- };
729
-
730
- // src/FormFieldTextarea.tsx
731
- import { Textarea } from "@ttoss/ui";
732
- import { jsx as jsx16 } from "react/jsx-runtime";
733
- var FormFieldTextarea = ({
734
- label,
735
- name,
736
- warning,
737
- inputTooltip,
738
- sx,
739
- ...textareaProps
740
- }) => {
741
- const id = `form-field-textarea-${name}`;
742
- return /* @__PURE__ */jsx16(FormField, {
743
- label,
744
- name,
745
- id,
746
- sx,
747
- warning,
748
- inputTooltip,
749
- render: ({
750
- field,
751
- fieldState
752
- }) => {
753
- return /* @__PURE__ */jsx16(Textarea, {
754
- ...field,
755
- ...textareaProps,
756
- "aria-invalid": fieldState.error ? "true" : void 0
757
- });
758
- }
759
- });
760
- };
761
-
762
- // src/FormGroup.tsx
763
- import { Box as Box4, Flex as Flex5, Text as Text3 } from "@ttoss/ui";
764
- import * as React2 from "react";
765
- import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
766
- var FormGroupLevelsManagerContext = React2.createContext({
767
- levelsLength: 1,
768
- registerChild: () => {
769
- return null;
770
- }
771
- });
772
- var FormGroupLevelsManager = ({
773
- children
774
- }) => {
775
- const [levelsLength, setLevelsLength] = React2.useState(0);
776
- const registerChild = React2.useCallback(level => {
777
- if (level + 1 > levelsLength) {
778
- setLevelsLength(level + 1);
779
- }
780
- }, [levelsLength]);
781
- return /* @__PURE__ */jsx17(FormGroupLevelsManagerContext.Provider, {
782
- value: {
783
- levelsLength,
784
- registerChild
785
- },
786
- children
787
- });
788
- };
789
- var FormGroupContext = React2.createContext({});
790
- var useFormGroup = () => {
791
- const {
792
- parentLevel
793
- } = React2.useContext(FormGroupContext);
794
- const {
795
- levelsLength
796
- } = React2.useContext(FormGroupLevelsManagerContext);
797
- return {
798
- level: parentLevel,
799
- levelsLength
800
- };
801
- };
802
- var FormGroupWrapper = ({
803
- title,
804
- direction,
805
- children,
806
- name,
807
- ...boxProps
808
- }) => {
809
- const {
810
- level
811
- } = useFormGroup();
812
- const {
813
- registerChild
814
- } = React2.useContext(FormGroupLevelsManagerContext);
815
- React2.useEffect(() => {
816
- if (typeof level === "number") {
817
- registerChild(level);
818
- }
819
- }, [level, registerChild]);
820
- const childrenContainerSx = {
821
- flexDirection: direction || "column",
822
- gap: "1",
823
- width: "100%"
824
- };
825
- return /* @__PURE__ */jsxs5(Box4, {
826
- "aria-level": level,
827
- ...boxProps,
828
- sx: {
829
- marginTop: level === 0 ? "none" : "4",
830
- marginBottom: "4",
831
- ...boxProps.sx
832
- },
833
- children: [title && /* @__PURE__ */jsx17(Box4, {
834
- sx: {
835
- marginBottom: "2"
836
- },
837
- children: /* @__PURE__ */jsx17(Text3, {
838
- sx: {
839
- fontSize: "2xl",
840
- fontWeight: "bold"
841
- },
842
- children: title
843
- })
844
- }), /* @__PURE__ */jsx17(Flex5, {
845
- sx: childrenContainerSx,
846
- children
847
- }), name && /* @__PURE__ */jsx17(FormErrorMessage, {
848
- name
849
- })]
850
- });
851
- };
852
- var FormGroup = props => {
853
- const {
854
- level
855
- } = useFormGroup();
856
- const currentLevel = level === void 0 ? 0 : level + 1;
857
- return /* @__PURE__ */jsx17(FormGroupContext.Provider, {
858
- value: {
859
- parentLevel: currentLevel
860
- },
861
- children: currentLevel === 0 ? /* @__PURE__ */jsx17(FormGroupLevelsManager, {
862
- children: /* @__PURE__ */jsx17(FormGroupWrapper, {
863
- ...props
864
- })
865
- }) : /* @__PURE__ */jsx17(FormGroupWrapper, {
866
- ...props
867
- })
868
- });
869
- };
870
-
871
- // src/yup/i18n.ts
872
- import { defineMessage } from "@ttoss/react-i18n";
873
- import { setLocale } from "yup";
874
- setLocale({
875
- mixed: {
876
- required: defineMessage({
877
- id: "MfWGyg",
878
- defaultMessage: [{
879
- "type": 0,
880
- "value": "Field is required"
881
- }]
882
- }),
883
- notType: ({
884
- type
885
- }) => {
886
- return {
887
- ...defineMessage({
888
- id: "ZhaPt0",
889
- defaultMessage: [{
890
- "type": 0,
891
- "value": "Invalid Value for Field of type "
892
- }, {
893
- "type": 1,
894
- "value": "type"
895
- }]
896
- }),
897
- values: {
898
- type
899
- }
900
- };
901
- }
902
- },
903
- string: {
904
- min: ({
905
- min
906
- }) => {
907
- return {
908
- ...defineMessage({
909
- id: "D1C6fR",
910
- defaultMessage: [{
911
- "type": 0,
912
- "value": "Field must be at least "
913
- }, {
914
- "type": 1,
915
- "value": "min"
916
- }, {
917
- "type": 0,
918
- "value": " characters"
919
- }]
920
- }),
921
- values: {
922
- min
923
- }
924
- };
925
- }
926
- }
927
- });
928
-
929
- // src/yup/schema.ts
930
- import * as yup from "yup";
931
-
932
- // src/Brazil/FormFieldCNPJ.tsx
933
- import { Input as Input4 } from "@ttoss/ui";
934
- import { PatternFormat as PatternFormat2 } from "react-number-format";
935
- import { jsx as jsx18 } from "react/jsx-runtime";
936
- var isCnpjValid = cnpj => {
937
- if (cnpj?.length != 14) {
938
- return false;
939
- }
940
- if (cnpj == "00000000000000" || cnpj == "11111111111111" || cnpj == "22222222222222" || cnpj == "33333333333333" || cnpj == "44444444444444" || cnpj == "55555555555555" || cnpj == "66666666666666" || cnpj == "77777777777777" || cnpj == "88888888888888" || cnpj == "99999999999999") {
941
- return false;
942
- }
943
- let size = cnpj.length - 2;
944
- let numbers = cnpj.substring(0, size);
945
- const digits = cnpj.substring(size);
946
- let soma = 0;
947
- let pos = size - 7;
948
- for (let i = size; i >= 1; i--) {
949
- soma += numbers.charAt(size - i) * pos--;
950
- if (pos < 2) {
951
- pos = 9;
952
- }
953
- }
954
- let result = soma % 11 < 2 ? 0 : 11 - soma % 11;
955
- if (result != digits.charAt(0)) {
956
- return false;
957
- }
958
- size = size + 1;
959
- numbers = cnpj.substring(0, size);
960
- soma = 0;
961
- pos = size - 7;
962
- for (let i = size; i >= 1; i--) {
963
- soma += numbers.charAt(size - i) * pos--;
964
- if (pos < 2) {
965
- pos = 9;
966
- }
967
- }
968
- result = soma % 11 < 2 ? 0 : 11 - soma % 11;
969
- if (result != digits.charAt(1)) {
970
- return false;
971
- }
972
- return true;
973
- };
974
- var FormFieldCNPJ = ({
975
- label,
976
- name,
977
- ...patternFormatProps
978
- }) => {
979
- return /* @__PURE__ */jsx18(FormField, {
980
- name,
981
- label,
982
- warning: patternFormatProps.warning,
983
- inputTooltip: patternFormatProps.inputTooltip,
984
- render: ({
985
- field
986
- }) => {
987
- return /* @__PURE__ */jsx18(PatternFormat2, {
988
- name: field.name,
989
- value: field.value,
990
- onBlur: field.onBlur,
991
- onValueChange: values => {
992
- field.onChange(values.value);
993
- },
994
- format: "##.###.###/####-##",
995
- customInput: Input4,
996
- placeholder: "12.345.678/0000-00",
997
- ...patternFormatProps
998
- });
999
- }
1000
- });
1001
- };
1002
-
1003
- // src/yup/schema.ts
1004
- yup.addMethod(yup.string, "cnpj", function () {
1005
- return this.test("valid-cnpj", "Invalid CNPJ", value => {
1006
- return isCnpjValid(value);
1007
- });
1008
- });
1009
- yup.addMethod(yup.string, "password", function ({
1010
- required
1011
- } = {}) {
1012
- const schema = this.trim();
1013
- if (required) {
1014
- schema.required("Password is required");
1015
- }
1016
- return schema.min(8, "Password must be at least 8 characters long");
1017
- });
1018
-
1019
- // src/yup/yup.ts
1020
- import * as yup2 from "yup";
1021
-
1022
- // src/index.ts
1023
- import { yupResolver } from "@hookform/resolvers/yup";
1024
- import { Controller, FormProvider as FormProvider2, useController as useController2, useFieldArray, useForm, useFormContext as useFormContext3, useFormState, useWatch } from "react-hook-form";
1025
- export * from "react-hook-form";
1026
- export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldPatternFormat, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, isCnpjValid, FormFieldCNPJ, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController2 as useController, useFieldArray, useForm, useFormContext3 as useFormContext, useFormState, useWatch };