@lets-events/react 11.6.4 → 11.7.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 (76) hide show
  1. package/.eslintrc.json +2 -2
  2. package/.turbo/turbo-build.log +18 -20
  3. package/CHANGELOG.md +12 -0
  4. package/dist/index.css +171 -0
  5. package/dist/index.d.mts +65 -435
  6. package/dist/index.d.ts +65 -435
  7. package/dist/index.js +364 -269
  8. package/dist/index.mjs +365 -264
  9. package/package.json +1 -2
  10. package/src/components/Alert.tsx +303 -303
  11. package/src/components/Avatar.tsx +55 -55
  12. package/src/components/Badge.tsx +125 -125
  13. package/src/components/Box.tsx +3 -3
  14. package/src/components/Button/index.tsx +16 -16
  15. package/src/components/Button/styledComponents.ts +287 -287
  16. package/src/components/ButtonGroup.tsx +484 -484
  17. package/src/components/Calendar/index.tsx +136 -136
  18. package/src/components/Calendar/styledComponents.ts +209 -209
  19. package/src/components/Card.tsx +48 -48
  20. package/src/components/CheckboxGroup.tsx +176 -176
  21. package/src/components/Container.tsx +39 -39
  22. package/src/components/Drawer/index.tsx +48 -48
  23. package/src/components/Drawer/styledComponents.ts +46 -46
  24. package/src/components/Dropdown.tsx +302 -194
  25. package/src/components/Filter.tsx +164 -164
  26. package/src/components/Flex.tsx +118 -118
  27. package/src/components/FormFields/AddressFormFields/CityFormField.tsx +111 -111
  28. package/src/components/FormFields/AddressFormFields/CountryFormField.tsx +33 -33
  29. package/src/components/FormFields/AddressFormFields/PostalCodeFormField.tsx +39 -45
  30. package/src/components/FormFields/AddressFormFields/StateFormField.tsx +32 -32
  31. package/src/components/FormFields/AddressFormFields/index.tsx +141 -139
  32. package/src/components/FormFields/BirthDateFormField.tsx +85 -87
  33. package/src/components/FormFields/CNPJFormField.tsx +87 -89
  34. package/src/components/FormFields/CPFFormField.tsx +77 -79
  35. package/src/components/FormFields/CheckboxGroupFormField.tsx +90 -90
  36. package/src/components/FormFields/Form.tsx +28 -29
  37. package/src/components/FormFields/IdentityDocumentNumberFormField.tsx +40 -42
  38. package/src/components/FormFields/MultiSelectFormField.tsx +55 -59
  39. package/src/components/FormFields/PhoneFormField.tsx +40 -130
  40. package/src/components/FormFields/RadioGroupFormField.tsx +84 -84
  41. package/src/components/FormFields/SelectFormField.tsx +93 -93
  42. package/src/components/FormFields/TextAreaFormField.tsx +48 -48
  43. package/src/components/FormFields/TextFormField.tsx +107 -76
  44. package/src/components/FormFields/{ErrorFormMessage.tsx → subComponents/ErrorFormMessage.tsx} +36 -36
  45. package/src/components/FormFields/{FormLabel.tsx → subComponents/FormLabel.tsx} +29 -29
  46. package/src/components/FormFields/utils/validation.ts +20 -0
  47. package/src/components/Grid.tsx +137 -137
  48. package/src/components/Icon.tsx +47 -47
  49. package/src/components/MenuDropdown/index.tsx +30 -30
  50. package/src/components/MenuDropdown/styledComponents.ts +31 -31
  51. package/src/components/Modal.tsx +90 -90
  52. package/src/components/MultiSelect.tsx +218 -218
  53. package/src/components/RadioGroup.tsx +210 -210
  54. package/src/components/Section.tsx +33 -33
  55. package/src/components/Step.tsx +164 -164
  56. package/src/components/Switch.tsx +108 -108
  57. package/src/components/Text.tsx +38 -38
  58. package/src/components/TextField.tsx +316 -312
  59. package/src/components/TextareaField.tsx +128 -128
  60. package/src/components/TimePicker.tsx +298 -298
  61. package/src/components/Toast/components/ToastItem.tsx +41 -41
  62. package/src/components/Toast/components/ToastProvider.tsx +63 -63
  63. package/src/components/Toast/hooks/useToast.ts +12 -12
  64. package/src/components/Toast/index.tsx +5 -5
  65. package/src/components/Toast/styles/index.ts +135 -135
  66. package/src/components/Toast/types/index.ts +46 -46
  67. package/src/components/Tooltip/index.tsx +66 -66
  68. package/src/components/Tooltip/styles.ts +77 -77
  69. package/src/hooks/useCountries.ts +41 -41
  70. package/src/hooks/useOnClickOutside.tsx +20 -20
  71. package/src/index.tsx +54 -54
  72. package/src/styles/index.ts +38 -38
  73. package/src/types/typographyValues.ts +178 -178
  74. package/src/utils/getNestedValue.ts +3 -3
  75. package/src/utils/states.ts +29 -29
  76. package/tsconfig.json +3 -3
package/.eslintrc.json CHANGED
@@ -1,3 +1,3 @@
1
- {
2
- "extends": "@lets-events/eslint-config"
1
+ {
2
+ "extends": "@lets-events/eslint-config"
3
3
  }
package/.turbo/turbo-build.log CHANGED
@@ -1,20 +1,18 @@
1
-
2
-
3
- > @lets-events/react@11.6.4 build
4
- > tsup src/index.tsx --format esm,cjs --dts --external react
5
-
6
- CLI Building entry: src/index.tsx
7
- CLI Using tsconfig: tsconfig.json
8
- CLI tsup v8.4.0
9
- CLI Target: es6
10
- ESM Build start
11
- CJS Build start
12
- CJS dist/index.js 328.80 KB
13
- CJS ⚡️ Build success in 293ms
14
- ESM dist/index.mjs 316.57 KB
15
- ESM ⚡️ Build success in 294ms
16
- DTS Build start
17
- DTS ⚡️ Build success in 5873ms
18
- DTS dist/index.d.mts 392.64 KB
19
- DTS dist/index.d.ts 392.64 KB
20
- ⠙
1
+
2
+ > @lets-events/react@11.7.0 build
3
+ > tsup src/index.tsx --format esm,cjs --dts --external react
4
+
5
+ CLI Building entry: src/index.tsx
6
+ CLI Using tsconfig: tsconfig.json
7
+ CLI tsup v8.4.0
8
+ CLI Target: es6
9
+ ESM Build start
10
+ CJS Build start
11
+ DTS Build start
12
+ ESM dist\index.mjs 319.18 KB
13
+ ESM ⚡️ Build success in 516ms
14
+ CJS dist\index.js 331.25 KB
15
+ CJS ⚡️ Build success in 517ms
16
+ DTS ⚡️ Build success in 4249ms
17
+ DTS dist\index.d.mts 383.30 KB
18
+ DTS dist\index.d.ts 383.30 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @lets-events/react
2
2
 
3
+ ## 11.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - Phone input
8
+
9
+ ## 11.6.5
10
+
11
+ ### Patch Changes
12
+
13
+ - dropdown refactor
14
+
3
15
  ## 11.6.4
4
16
 
5
17
  ### Patch Changes
package/dist/index.css ADDED
@@ -0,0 +1,171 @@
1
+ /* ../../node_modules/react-international-phone/dist/index.css */
2
+ .react-international-phone-country-selector {
3
+ position: relative;
4
+ }
5
+ .react-international-phone-country-selector-button {
6
+ display: flex;
7
+ height: var(--react-international-phone-height, 36px);
8
+ box-sizing: border-box;
9
+ align-items: center;
10
+ justify-content: center;
11
+ padding: 0;
12
+ border: 1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));
13
+ margin: 0;
14
+ appearance: button;
15
+ -webkit-appearance: button;
16
+ background-color: var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));
17
+ cursor: pointer;
18
+ text-transform: none;
19
+ user-select: none;
20
+ }
21
+ .react-international-phone-country-selector-button:hover {
22
+ background-color: var(--react-international-phone-country-selector-background-color-hover, whitesmoke);
23
+ }
24
+ .react-international-phone-country-selector-button--hide-dropdown {
25
+ cursor: auto;
26
+ }
27
+ .react-international-phone-country-selector-button--hide-dropdown:hover {
28
+ background-color: transparent;
29
+ }
30
+ .react-international-phone-country-selector-button__button-content {
31
+ display: flex;
32
+ align-items: center;
33
+ justify-content: center;
34
+ }
35
+ .react-international-phone-country-selector-button__flag-emoji {
36
+ margin: 0 4px;
37
+ }
38
+ .react-international-phone-country-selector-button__flag-emoji--disabled {
39
+ opacity: .75;
40
+ }
41
+ .react-international-phone-country-selector-button__dropdown-arrow {
42
+ border-top: var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);
43
+ border-right: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
44
+ border-left: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
45
+ margin-right: 4px;
46
+ transition: all .1s ease-out;
47
+ }
48
+ .react-international-phone-country-selector-button__dropdown-arrow--active {
49
+ transform: rotateX(180deg);
50
+ }
51
+ .react-international-phone-country-selector-button__dropdown-arrow--disabled {
52
+ border-top-color: var(--react-international-phone-disabled-country-selector-arrow-color, #999);
53
+ }
54
+ .react-international-phone-country-selector-button--disabled {
55
+ background-color: var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
56
+ cursor: auto;
57
+ }
58
+ .react-international-phone-country-selector-button--disabled:hover {
59
+ background-color: var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
60
+ }
61
+ .react-international-phone-flag-emoji {
62
+ width: var(--react-international-phone-flag-width, 24px);
63
+ height: var(--react-international-phone-flag-height, 24px);
64
+ box-sizing: border-box;
65
+ }
66
+ .react-international-phone-country-selector-dropdown {
67
+ position: absolute;
68
+ z-index: 1;
69
+ top: var(--react-international-phone-dropdown-top, 44px);
70
+ left: var(--react-international-phone-dropdown-left, 0);
71
+ display: flex;
72
+ width: 300px;
73
+ max-height: 200px;
74
+ flex-direction: column;
75
+ padding: 4px 0;
76
+ margin: 0;
77
+ background-color: var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));
78
+ box-shadow: var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));
79
+ color: var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));
80
+ list-style: none;
81
+ overflow-y: scroll;
82
+ }
83
+ .react-international-phone-country-selector-dropdown__preferred-list-divider {
84
+ height: 1px;
85
+ border: none;
86
+ margin: var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);
87
+ background: var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro));
88
+ }
89
+ .react-international-phone-country-selector-dropdown__list-item {
90
+ display: flex;
91
+ min-height: var(--react-international-phone-dropdown-item-height, 28px);
92
+ box-sizing: border-box;
93
+ align-items: center;
94
+ padding: 2px 8px;
95
+ }
96
+ .react-international-phone-country-selector-dropdown__list-item-flag-emoji {
97
+ margin-right: 8px;
98
+ }
99
+ .react-international-phone-country-selector-dropdown__list-item-country-name {
100
+ overflow: hidden;
101
+ margin-right: 8px;
102
+ font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
103
+ text-overflow: ellipsis;
104
+ white-space: nowrap;
105
+ }
106
+ .react-international-phone-country-selector-dropdown__list-item-dial-code {
107
+ color: var(--react-international-phone-dropdown-item-dial-code-color, gray);
108
+ font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
109
+ }
110
+ .react-international-phone-country-selector-dropdown__list-item:hover {
111
+ background-color: var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));
112
+ cursor: pointer;
113
+ }
114
+ .react-international-phone-country-selector-dropdown__list-item--selected,
115
+ .react-international-phone-country-selector-dropdown__list-item--focused {
116
+ background-color: var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);
117
+ color: var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222));
118
+ }
119
+ .react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,
120
+ .react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code {
121
+ color: var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray));
122
+ }
123
+ .react-international-phone-country-selector-dropdown__list-item--focused {
124
+ background-color: var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));
125
+ }
126
+ .react-international-phone-dial-code-preview {
127
+ display: flex;
128
+ align-items: center;
129
+ justify-content: center;
130
+ padding: 0 8px;
131
+ border: 1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));
132
+ margin-right: -1px;
133
+ background-color: var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));
134
+ color: var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));
135
+ font-size: var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px));
136
+ }
137
+ .react-international-phone-dial-code-preview--disabled {
138
+ background-color: var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
139
+ color: var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666));
140
+ }
141
+ .react-international-phone-input-container {
142
+ display: flex;
143
+ }
144
+ .react-international-phone-input-container .react-international-phone-country-selector-button {
145
+ border-radius: var(--react-international-phone-border-radius, 4px);
146
+ margin-right: -1px;
147
+ border-bottom-right-radius: 0;
148
+ border-top-right-radius: 0;
149
+ }
150
+ .react-international-phone-input-container .react-international-phone-input {
151
+ overflow: visible;
152
+ height: var(--react-international-phone-height, 36px);
153
+ box-sizing: border-box;
154
+ padding: 0 8px;
155
+ border: 1px solid var(--react-international-phone-border-color, gainsboro);
156
+ border-radius: var(--react-international-phone-border-radius, 4px);
157
+ margin: 0;
158
+ background-color: var(--react-international-phone-background-color, white);
159
+ border-bottom-left-radius: 0;
160
+ border-top-left-radius: 0;
161
+ color: var(--react-international-phone-text-color, #222);
162
+ font-family: inherit;
163
+ font-size: var(--react-international-phone-font-size, 13px);
164
+ }
165
+ .react-international-phone-input-container .react-international-phone-input:focus {
166
+ outline: none;
167
+ }
168
+ .react-international-phone-input-container .react-international-phone-input--disabled {
169
+ background-color: var(--react-international-phone-disabled-background-color, whitesmoke);
170
+ color: var(--react-international-phone-disabled-text-color, #666);
171
+ }