@paygreen/pgui 3.0.0-beta → 3.0.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 (34) hide show
  1. package/README.md +3 -0
  2. package/dist/components/actions-button/actions-button.d.ts +2 -1
  3. package/dist/components/data-list/datalist.d.ts +1 -2
  4. package/dist/components/data-table/data-table.d.ts +2 -2
  5. package/dist/components/date-picker/date-picker.d.ts +2 -3
  6. package/dist/components/index.d.ts +4 -0
  7. package/dist/components/input-mask/input-mask.d.ts +2 -1
  8. package/dist/components/input-password/input-password.d.ts +34 -0
  9. package/dist/components/input-phone/input-phone.d.ts +3 -3
  10. package/dist/components/input-search/input-search.d.ts +14 -0
  11. package/dist/components/loader/loader.d.ts +6 -4
  12. package/dist/components/logos/logoPaygreenByLemonway.d.ts +1 -2
  13. package/dist/components/modal/modal.d.ts +49 -12
  14. package/dist/components/pagination/pagination.d.ts +7 -2
  15. package/dist/components/select/select.d.ts +39 -19
  16. package/dist/components/sidebar/sidebar.d.ts +17 -3
  17. package/dist/components/tooltip/tooltip.d.ts +11 -0
  18. package/dist/components/ui/toaster.d.ts +2 -0
  19. package/dist/index.d.ts +1 -1
  20. package/dist/index.js +10 -10
  21. package/dist/index.mjs +3407 -2360
  22. package/dist/pgui.css +1 -1
  23. package/dist/theme/index.d.ts +2 -1
  24. package/dist/theme/recipes/alert-recipe.d.ts +2 -0
  25. package/dist/theme/recipes/card-recipe.d.ts +3 -6
  26. package/dist/theme/recipes/index.d.ts +0 -17
  27. package/dist/theme/semanticTokens/colors.d.ts +374 -21
  28. package/dist/theme/semanticTokens/index.d.ts +374 -21
  29. package/dist/theme/tokens/colors.d.ts +291 -9
  30. package/dist/theme/tokens/index.d.ts +290 -13
  31. package/package.json +3 -5
  32. package/src/components/date-picker/date-picker.css +64 -45
  33. package/src/components/select/select.css +33 -9
  34. package/dist/theme/tokens/gradients.d.ts +0 -6
package/src/components/date-picker/date-picker.css CHANGED
@@ -1,4 +1,8 @@
1
1
  /* Base */
2
+ .chakra-datepicker {
3
+ width: 100%;
4
+ }
5
+
2
6
  .chakra-datepicker .react-datepicker {
3
7
  font-size: var(--chakra-font-sizes-sm);
4
8
  font-family: inherit;
@@ -6,6 +10,11 @@
6
10
  border-radius: var(--chakra-radii-md);
7
11
  background-color: var(--chakra-colors-white);
8
12
  box-shadow: var(--chakra-shadows-md);
13
+ width: 100%;
14
+ }
15
+
16
+ .chakra-datepicker .react-datepicker-wrapper {
17
+ width: 100%;
9
18
  }
10
19
 
11
20
  /* Header */
@@ -35,7 +44,7 @@
35
44
 
36
45
  /* Days */
37
46
  .chakra-datepicker .react-datepicker__day {
38
- color: var(--chakra-colors-gray-700);
47
+ color: var(--chakra-colors-lm_gray-30);
39
48
  border-radius: var(--chakra-radii-md);
40
49
  margin: 0.1rem;
41
50
  width: 1.75rem;
@@ -44,22 +53,35 @@
44
53
 
45
54
  /* Days hover */
46
55
  .chakra-datepicker .react-datepicker__day:hover {
47
- background-color: var(--chakra-colors-gray-100);
56
+ background-color: var(--chakra-colors-lm_gray-80);
48
57
  }
49
58
 
50
59
  /* Days keyboard selected */
51
60
  .chakra-datepicker .react-datepicker__day--keyboard-selected {
52
- background-color: var(--chakra-colors-brand-200) !important;
61
+ background-color: var(--chakra-colors-lm_cello-50) !important;
53
62
  color: var(--chakra-colors-white) !important;
54
63
  }
55
64
 
56
65
  /* Days selected */
57
66
  .chakra-datepicker .react-datepicker__day--selected,
58
67
  .chakra-datepicker .react-datepicker__day--in-range {
59
- background-color: var(--chakra-colors-brand-500) !important;
68
+ background-color: var(--chakra-colors-lm_cello-40) !important;
60
69
  color: var(--chakra-colors-white) !important;
61
70
  }
62
71
 
72
+ .chakra-datepicker .react-datepicker__sr-only {
73
+ position: absolute !important;
74
+ width: 1px !important;
75
+ height: 1px !important;
76
+ padding: 0 !important;
77
+ margin: -1px !important;
78
+ overflow: hidden !important;
79
+ clip: rect(0, 0, 0, 0) !important;
80
+ white-space: nowrap !important;
81
+ border: 0 !important;
82
+ visibility: hidden !important;
83
+ }
84
+
63
85
  /* Days disabled */
64
86
  .chakra-datepicker .react-datepicker__day--disabled {
65
87
  opacity: 0.5;
@@ -89,24 +111,24 @@
89
111
 
90
112
  /* Time list item */
91
113
  .chakra-datepicker .react-datepicker__time-list-item {
92
- color: var(--chakra-colors-gray-700);
114
+ color: var(--chakra-colors-lm_gray-700);
93
115
  padding: 0.25rem;
94
116
  }
95
117
 
96
118
  /* Time list item hover */
97
119
  .chakra-datepicker .react-datepicker__time-list-item:hover {
98
- background-color: var(--chakra-colors-gray-100);
120
+ background-color: var(--chakra-colors-lm_gray-100);
99
121
  }
100
122
 
101
123
  /* Time list item selected */
102
124
  .chakra-datepicker .react-datepicker__time-list-item--selected {
103
- background-color: var(--chakra-colors-brand-500) !important;
125
+ background-color: var(--chakra-colors-lm_cello-40) !important;
104
126
  color: var(--chakra-colors-white) !important;
105
127
  }
106
128
 
107
129
  /* Day name */
108
130
  .chakra-datepicker .react-datepicker__day-name {
109
- color: var(--chakra-colors-gray-600);
131
+ color: var(--chakra-colors-lm_gray-600);
110
132
  }
111
133
 
112
134
  /* Current month */
@@ -131,76 +153,73 @@
131
153
 
132
154
  /* Dark mode styles */
133
155
  /* Base */
134
- .chakra-datepicker[data-theme='dark'] .react-datepicker {
135
- background-color: var(--chakra-colors-gray-800);
136
- border-color: var(--chakra-colors-gray-700);
156
+ .chakra-datepicker[data-theme="dark"] .react-datepicker {
157
+ background-color: var(--chakra-colors-lm_gray-20);
158
+ border-color: var(--chakra-colors-lm_gray-30);
137
159
  }
138
160
 
139
- .chakra-datepicker[data-theme='dark'] .react-datepicker__header {
140
- background-color: var(--chakra-colors-gray-700);
141
- border-color: var(--chakra-colors-gray-600);
161
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__header {
162
+ background-color: var(--chakra-colors-lm_gray-30);
163
+ border-color: var(--chakra-colors-lm_gray-35);
142
164
  }
143
165
 
144
- .chakra-datepicker[data-theme='dark'] .react-datepicker__day {
145
- color: var(--chakra-colors-gray-300);
166
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__day {
167
+ color: var(--chakra-colors-lm_gray-60);
146
168
  }
147
169
 
148
- .chakra-datepicker[data-theme='dark'] .react-datepicker__day:hover {
149
- background-color: var(--chakra-colors-gray-600);
170
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__day:hover {
171
+ background-color: var(--chakra-colors-lm_gray-35);
150
172
  }
151
173
 
152
- .chakra-datepicker[data-theme='dark']
153
- .react-datepicker__day--in-selecting-range {
154
- background-color: var(--chakra-colors-brand-700);
174
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__day--in-selecting-range {
175
+ background-color: var(--chakra-colors-lm_cello-20);
155
176
  }
156
177
 
157
- .chakra-datepicker[data-theme='dark'] .react-datepicker__time-container {
158
- border-color: var(--chakra-colors-gray-600);
178
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__time-container {
179
+ border-color: var(--chakra-colors-lm_gray-600);
159
180
  }
160
181
 
161
- .chakra-datepicker[data-theme='dark'] .react-datepicker-time__header {
162
- color: var(--chakra-colors-gray-100);
182
+ .chakra-datepicker[data-theme="dark"] .react-datepicker-time__header {
183
+ color: var(--chakra-colors-lm_gray-100);
163
184
  }
164
185
 
165
- .chakra-datepicker[data-theme='dark'] .react-datepicker__time-list {
166
- background-color: var(--chakra-colors-gray-800);
186
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__time-list {
187
+ background-color: var(--chakra-colors-lm_gray-800);
167
188
  }
168
189
 
169
- .chakra-datepicker[data-theme='dark'] .react-datepicker__time-list-item {
170
- color: var(--chakra-colors-gray-300);
190
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item {
191
+ color: var(--chakra-colors-lm_gray-300);
171
192
  }
172
193
 
173
- .chakra-datepicker[data-theme='dark'] .react-datepicker__time-list-item:hover {
174
- background-color: var(--chakra-colors-gray-600);
194
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item:hover {
195
+ background-color: var(--chakra-colors-lm_gray-600);
175
196
  }
176
197
 
177
- .chakra-datepicker[data-theme='dark']
178
- .react-datepicker__time-list-item--selected {
179
- background-color: var(--chakra-colors-brand-500) !important;
198
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item--selected {
199
+ background-color: var(--chakra-colors-lm_cello-40) !important;
180
200
  color: var(--chakra-colors-white) !important;
181
201
  }
182
202
 
183
- .chakra-datepicker[data-theme='dark'] .react-datepicker__time-box {
203
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__time-box {
184
204
  background-color: var(--chakra-colors-gray-800);
185
205
  }
186
206
 
187
- .chakra-datepicker[data-theme='dark'] .react-datepicker__day-name {
188
- color: var(--chakra-colors-gray-400);
207
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__day-name {
208
+ color: var(--chakra-colors-lm_gray-50);
189
209
  }
190
210
 
191
- .chakra-datepicker[data-theme='dark'] .react-datepicker__current-month {
192
- color: var(--chakra-colors-gray-200);
211
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__current-month {
212
+ color: var(--chakra-colors-lm_gray-75);
193
213
  }
194
214
 
195
- .chakra-datepicker[data-theme='dark']
196
- .react-datepicker__navigation-icon::before {
197
- border-color: var(--chakra-colors-gray-200);
215
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__navigation-icon::before {
216
+ border-color: var(--chakra-colors-lm_gray-75);
198
217
  }
199
218
 
200
219
  /* Month and year select */
201
- .chakra-datepicker[data-theme='dark'] .react-datepicker__month-select,
202
- .chakra-datepicker[data-theme='dark'] .react-datepicker__year-select {
203
- background-color: var(--chakra-colors-gray-700);
220
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__month-select,
221
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__year-select {
222
+ background-color: var(--chakra-colors-lm_gray-700);
204
223
  color: var(--chakra-colors-white);
205
224
  border: 1px solid var(--chakra-colors-border-emphasized);
206
225
  }
package/src/components/select/select.css CHANGED
@@ -2,6 +2,20 @@
2
2
  font-size: var(--chakra-font-sizes-sm);
3
3
  min-width: 200px;
4
4
  display: inline-block;
5
+ width: 100%;
6
+ }
7
+
8
+ .select-custom-container--error .select-custom__control {
9
+ border-color: var(--chakra-colors-border-error) !important;
10
+ }
11
+
12
+ .select-custom-container--error .select-custom__control--is-focused {
13
+ border-color: var(--chakra-colors-border-error) !important;
14
+ box-shadow: 0 0 0 1px var(--chakra-colors-border-error) !important;
15
+ }
16
+
17
+ .select-custom-container--error .select-custom__control:hover {
18
+ border-color: var(--chakra-colors-border-error) !important;
5
19
  }
6
20
 
7
21
  .select-custom__single-value {
@@ -14,18 +28,26 @@
14
28
 
15
29
  .select-custom__control,
16
30
  .select-custom__control--is-focused {
17
- min-height: 33px !important;
18
- background-color: var(--chakra-colors-bg) !important;
31
+ min-height: var(--chakra-sizes-10) !important;
32
+ background-color: transparent !important;
19
33
  }
20
34
 
21
35
  .select-custom__control--is-focused {
22
36
  box-shadow: none !important;
37
+ outline-offset: 0 !important;
38
+ outline-width: var(--focus-ring-width, 1px) !important;
39
+ outline-color: var(--chakra-colors-color-palette-focus-ring) !important;
40
+ outline-style: var(--focus-ring-style, solid) !important;
41
+ border-color: var(--chakra-colors-color-palette-focus-ring) !important;
23
42
  }
24
43
 
25
44
  .select-custom__menu {
45
+ z-index: 1000 !important;
26
46
  border: 1px solid var(--chakra-colors-border) !important;
27
- background-color: transparent !important;
28
- box-shadow: none !important;
47
+ background-color: var(--chakra-colors-bg-panel) !important;
48
+ box-shadow:
49
+ 0 4px 6px -1px rgba(0, 0, 0, 0.1),
50
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
29
51
  border-radius: var(--chakra-radii-md) !important;
30
52
  }
31
53
 
@@ -35,24 +57,26 @@
35
57
  }
36
58
 
37
59
  .select-custom__multi-value {
38
- background-color: var(--chakra-colors-bg-emphasized) !important;
60
+ background-color: var(--chakra-colors-bg-panel) !important;
61
+ border: 1px solid var(--chakra-colors-border) !important;
62
+ border-radius: var(--chakra-radii-sm) !important;
39
63
  }
40
64
  .select-custom__multi-value__label {
41
65
  color: var(--chakra-colors-fg) !important;
42
66
  }
43
67
  .select-custom__option {
44
- background-color: var(--chakra-colors-bg-panel) !important;
68
+ background-color: var(--chakra-colors-bg) !important;
45
69
  font-size: var(--chakra-font-sizes-sm) !important;
46
70
  padding: 5px 10px !important;
47
71
  }
48
72
 
49
73
  .select-custom__option:hover {
50
- background-color: var(--chakra-colors-bg-emphasized) !important;
74
+ background-color: var(--chakra-colors-bg-muted) !important;
51
75
  }
52
76
 
53
77
  .select-custom__option--is-selected {
54
78
  color: var(--chakra-colors-fg) !important;
55
- background-color: var(--chakra-colors-bg-emphasized) !important;
79
+ background-color: var(--chakra-colors-bg-muted) !important;
56
80
  }
57
81
 
58
82
  .select-custom__multi-value__label {
@@ -65,7 +89,7 @@
65
89
 
66
90
  .select-custom__multi-value__remove:hover {
67
91
  cursor: pointer !important;
68
- background-color: var(--chakra-colors-red-emphasized) !important;
92
+ background-color: var(--chakra-colors-danger-muted) !important;
69
93
  }
70
94
 
71
95
  .select-custom__indicator svg {
package/dist/theme/tokens/gradients.d.ts DELETED
@@ -1,6 +0,0 @@
1
- declare const gradients: {
2
- primary: {
3
- value: string;
4
- };
5
- };
6
- export default gradients;