@paygreen/pgui 3.0.15 → 3.1.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 (29) hide show
  1. package/README.md +84 -11
  2. package/dist/components/date-picker/date-picker.d.ts +78 -72
  3. package/dist/components/date-picker/utils.d.ts +48 -0
  4. package/dist/components/loader/loader.d.ts +1 -1
  5. package/dist/components/sidebar/sidebar.d.ts +1 -1
  6. package/dist/hooks/index.d.ts +1 -0
  7. package/dist/hooks/use-outside-click.d.ts +13 -0
  8. package/dist/index.d.ts +1 -0
  9. package/dist/index.js +5 -8
  10. package/dist/index.mjs +4315 -6038
  11. package/dist/pgui.css +1 -1
  12. package/dist/styled-system.d.ts +28 -0
  13. package/dist/theme/animationStyles.d.ts +21 -0
  14. package/dist/theme/recipes/alert-recipe.d.ts +29 -1
  15. package/dist/theme/recipes/button-recipe.d.ts +46 -0
  16. package/dist/theme/recipes/card-recipe.d.ts +16 -1
  17. package/dist/theme/recipes/index.d.ts +64 -0
  18. package/dist/theme/recipes/input-recipe.d.ts +33 -0
  19. package/dist/theme/semanticTokens/index.d.ts +14 -0
  20. package/dist/theme/semanticTokens/shadows.d.ts +15 -0
  21. package/dist/theme/tokens/durations.d.ts +6 -0
  22. package/dist/theme/tokens/easings.d.ts +12 -0
  23. package/dist/theme/tokens/font-sizes.d.ts +6 -0
  24. package/dist/theme/tokens/index.d.ts +16 -0
  25. package/dist/theme/tokens/sizes.d.ts +9 -0
  26. package/package.json +11 -12
  27. package/src/components/select/select.css +13 -1
  28. package/src/styles/index.css +0 -4
  29. package/src/components/date-picker/date-picker.css +0 -252
package/src/components/date-picker/date-picker.css DELETED
@@ -1,252 +0,0 @@
1
- /* Base */
2
- .chakra-datepicker {
3
- width: 100%;
4
- }
5
-
6
- .chakra-datepicker .react-datepicker {
7
- font-size: var(--chakra-font-sizes-sm);
8
- font-family: inherit;
9
- border: 1px solid var(--chakra-colors-border);
10
- border-radius: var(--chakra-radii-md);
11
- background-color: var(--chakra-colors-white);
12
- box-shadow: var(--chakra-shadows-md);
13
- width: 100%;
14
- }
15
-
16
- .chakra-datepicker .react-datepicker-wrapper {
17
- width: 100%;
18
- }
19
-
20
- /* Header */
21
- .chakra-datepicker .react-datepicker__header {
22
- background-color: transparent;
23
- border-bottom: 1px solid var(--chakra-colors-border);
24
- padding: 0.5rem;
25
- }
26
-
27
- /* Month and year select */
28
- .chakra-datepicker .react-datepicker__month-select,
29
- .chakra-datepicker .react-datepicker__year-select {
30
- background-color: var(--chakra-colors-white);
31
- border: 1px solid var(--chakra-colors-border);
32
- border-radius: var(--chakra-radii-md);
33
- padding: 0.2rem;
34
- margin: 0.2rem;
35
- }
36
-
37
- /* Time */
38
- .chakra-datepicker
39
- .react-datepicker__time-container
40
- .react-datepicker__time
41
- .react-datepicker__time-box {
42
- width: 80px;
43
- }
44
-
45
- /* Days */
46
- .chakra-datepicker .react-datepicker__day {
47
- color: var(--chakra-colors-lm_gray-30);
48
- border-radius: var(--chakra-radii-md);
49
- margin: 0.1rem;
50
- width: 1.75rem;
51
- line-height: 1.75rem;
52
- }
53
-
54
- /* Days hover */
55
- .chakra-datepicker .react-datepicker__day:hover {
56
- background-color: var(--chakra-colors-lm_gray-80);
57
- }
58
-
59
- /* Days keyboard selected */
60
- .chakra-datepicker .react-datepicker__day--keyboard-selected {
61
- background-color: var(--chakra-colors-lm_cello-50) !important;
62
- color: var(--chakra-colors-white) !important;
63
- }
64
-
65
- /* Days selected */
66
- .chakra-datepicker
67
- .react-datepicker__day--selecting-range-start
68
- .chakra-datepicker
69
- .react-datepicker__day--selecting-range-end {
70
- background-color: var(--chakra-colors-lm_cello-40) !important;
71
- color: var(--chakra-colors-white) !important;
72
- }
73
-
74
- .chakra-datepicker .react-datepicker__day--in-selecting-range {
75
- background-color: var(--chakra-colors-lm_cello-50) !important;
76
- color: var(--chakra-colors-white) !important;
77
- }
78
-
79
- .chakra-datepicker .react-datepicker__day--in-range {
80
- background-color: var(--chakra-colors-lm_cello-50) !important;
81
- color: var(--chakra-colors-white) !important;
82
- }
83
-
84
- .chakra-datepicker .react-datepicker__day--range-start {
85
- background-color: var(--chakra-colors-lm_cello-40) !important;
86
- color: var(--chakra-colors-white) !important;
87
- }
88
-
89
- .chakra-datepicker .react-datepicker__day--range-end {
90
- background-color: var(--chakra-colors-lm_cello-40) !important;
91
- color: var(--chakra-colors-white) !important;
92
- }
93
-
94
- .chakra-datepicker .react-datepicker__day--selected {
95
- background-color: var(--chakra-colors-lm_cello-40) !important;
96
- color: var(--chakra-colors-white) !important;
97
- }
98
-
99
- .chakra-datepicker .react-datepicker__sr-only {
100
- position: absolute !important;
101
- width: 1px !important;
102
- height: 1px !important;
103
- padding: 0 !important;
104
- margin: -1px !important;
105
- overflow: hidden !important;
106
- clip: rect(0, 0, 0, 0) !important;
107
- white-space: nowrap !important;
108
- border: 0 !important;
109
- visibility: hidden !important;
110
- }
111
-
112
- /* Days disabled */
113
- .chakra-datepicker .react-datepicker__day--disabled {
114
- opacity: 0.5;
115
- cursor: not-allowed;
116
- }
117
-
118
- /* Days in selecting range */
119
- .chakra-datepicker .react-datepicker__day--in-selecting-range {
120
- background-color: var(--chakra-colors-brand-100);
121
- }
122
-
123
- /* Time container */
124
- .chakra-datepicker .react-datepicker__time-container {
125
- border-left: 1px solid var(--chakra-colors-border);
126
- width: 5rem;
127
- }
128
-
129
- /* Time header */
130
- .chakra-datepicker .react-datepicker-time__header {
131
- font-size: var(--chakra-font-sizes-sm);
132
- }
133
-
134
- /* Time box */
135
- .chakra-datepicker .react-datepicker__time-box {
136
- border-radius: 0;
137
- }
138
-
139
- /* Time list item */
140
- .chakra-datepicker .react-datepicker__time-list-item {
141
- color: var(--chakra-colors-lm_gray-700);
142
- padding: 0.25rem;
143
- }
144
-
145
- /* Time list item hover */
146
- .chakra-datepicker .react-datepicker__time-list-item:hover {
147
- background-color: var(--chakra-colors-lm_gray-100);
148
- }
149
-
150
- /* Time list item selected */
151
- .chakra-datepicker .react-datepicker__time-list-item--selected {
152
- background-color: var(--chakra-colors-lm_cello-40) !important;
153
- color: var(--chakra-colors-white) !important;
154
- }
155
-
156
- /* Day name */
157
- .chakra-datepicker .react-datepicker__day-name {
158
- color: var(--chakra-colors-lm_gray-600);
159
- }
160
-
161
- /* Current month */
162
- .chakra-datepicker .react-datepicker__current-month {
163
- display: none;
164
- }
165
-
166
- /* Navigation */
167
- .chakra-datepicker .react-datepicker__navigation-icon {
168
- margin-top: 1rem;
169
- }
170
-
171
- /* Navigation icon */
172
- .chakra-datepicker .react-datepicker__navigation-icon::before {
173
- border-color: var(--chakra-colors-gray-600);
174
- }
175
-
176
- /* Triangle */
177
- .chakra-datepicker .react-datepicker__triangle {
178
- display: none !important;
179
- }
180
-
181
- /* Dark mode styles */
182
- /* Base */
183
- .chakra-datepicker[data-theme="dark"] .react-datepicker {
184
- background-color: var(--chakra-colors-lm_gray-20);
185
- border-color: var(--chakra-colors-lm_gray-30);
186
- }
187
-
188
- .chakra-datepicker[data-theme="dark"] .react-datepicker__header {
189
- background-color: var(--chakra-colors-lm_gray-30);
190
- border-color: var(--chakra-colors-lm_gray-35);
191
- }
192
-
193
- .chakra-datepicker[data-theme="dark"] .react-datepicker__day {
194
- color: var(--chakra-colors-lm_gray-60);
195
- }
196
-
197
- .chakra-datepicker[data-theme="dark"] .react-datepicker__day:hover {
198
- background-color: var(--chakra-colors-lm_gray-35);
199
- }
200
-
201
- .chakra-datepicker[data-theme="dark"] .react-datepicker__day--in-selecting-range {
202
- background-color: var(--chakra-colors-lm_cello-20);
203
- }
204
-
205
- .chakra-datepicker[data-theme="dark"] .react-datepicker__time-container {
206
- border-color: var(--chakra-colors-lm_gray-600);
207
- }
208
-
209
- .chakra-datepicker[data-theme="dark"] .react-datepicker-time__header {
210
- color: var(--chakra-colors-lm_gray-100);
211
- }
212
-
213
- .chakra-datepicker[data-theme="dark"] .react-datepicker__time-list {
214
- background-color: var(--chakra-colors-lm_gray-800);
215
- }
216
-
217
- .chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item {
218
- color: var(--chakra-colors-lm_gray-300);
219
- }
220
-
221
- .chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item:hover {
222
- background-color: var(--chakra-colors-lm_gray-600);
223
- }
224
-
225
- .chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item--selected {
226
- background-color: var(--chakra-colors-lm_cello-40) !important;
227
- color: var(--chakra-colors-white) !important;
228
- }
229
-
230
- .chakra-datepicker[data-theme="dark"] .react-datepicker__time-box {
231
- background-color: var(--chakra-colors-gray-800);
232
- }
233
-
234
- .chakra-datepicker[data-theme="dark"] .react-datepicker__day-name {
235
- color: var(--chakra-colors-lm_gray-50);
236
- }
237
-
238
- .chakra-datepicker[data-theme="dark"] .react-datepicker__current-month {
239
- color: var(--chakra-colors-lm_gray-75);
240
- }
241
-
242
- .chakra-datepicker[data-theme="dark"] .react-datepicker__navigation-icon::before {
243
- border-color: var(--chakra-colors-lm_gray-75);
244
- }
245
-
246
- /* Month and year select */
247
- .chakra-datepicker[data-theme="dark"] .react-datepicker__month-select,
248
- .chakra-datepicker[data-theme="dark"] .react-datepicker__year-select {
249
- background-color: var(--chakra-colors-lm_gray-700);
250
- color: var(--chakra-colors-white);
251
- border: 1px solid var(--chakra-colors-border-emphasized);
252
- }