@embeddable.com/remarkable-ui 2.0.14 → 2.0.15
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.
- package/dist/{Button.module-UAYCVFGG.module.css → Button.module-GOXSST7L.module.css} +1 -0
- package/dist/DateRangePicker-YLEWETBG.css +462 -0
- package/dist/DateRangePickerChevron.module-2PDNKQAJ.module.css +25 -0
- package/dist/DateRangePickerField.module-CURG3KIS.module.css +3 -0
- package/dist/{SelectFieldContent.module-6FORUMWR.module.css → SelectFieldContent.module-GZYJOPUB.module.css} +6 -0
- package/dist/index.d.ts +25 -1
- package/dist/index.js +296 -119
- package/dist/index.js.map +1 -1
- package/package.json +4 -2
|
@@ -0,0 +1,462 @@
|
|
|
1
|
+
/* Variables declaration */
|
|
2
|
+
|
|
3
|
+
.rdp-root table {
|
|
4
|
+
margin-top: var(--em-cal-nav-padding-default, 0.5rem);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.rdp-root {
|
|
8
|
+
--rdp-accent-color: var(
|
|
9
|
+
--em-cal-day-background-selected,
|
|
10
|
+
#212129
|
|
11
|
+
); /* The accent color used for selected days and UI elements. */
|
|
12
|
+
--rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
|
|
13
|
+
|
|
14
|
+
--rdp-day-height: var(--em-cal-nav-size, 2rem); /* The height of the day cells. */
|
|
15
|
+
--rdp-day-width: var(--em-cal-nav-size, 2rem); /* The width of the day cells. */
|
|
16
|
+
|
|
17
|
+
--rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
|
|
18
|
+
--rdp-day_button-height: var(--em-cal-nav-size, 2rem); /* The height of the day cells. */
|
|
19
|
+
--rdp-day_button-width: var(--em-cal-nav-size, 2rem); /* The width of the day cells. */
|
|
20
|
+
|
|
21
|
+
--rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
|
|
22
|
+
--rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
|
|
23
|
+
--rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
|
|
24
|
+
|
|
25
|
+
--rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */
|
|
26
|
+
|
|
27
|
+
--rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
|
|
28
|
+
|
|
29
|
+
--rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
|
|
30
|
+
--rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
|
|
31
|
+
--rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
|
|
32
|
+
--rdp-nav-height: var(--em-cal-nav-size, 2rem); /* The height of the navigation bar. */
|
|
33
|
+
|
|
34
|
+
--rdp-range_middle-background-color: var(
|
|
35
|
+
--em-cal-day-background-ranged,
|
|
36
|
+
#ededf1
|
|
37
|
+
); /* The color of the background for days in the middle of a range. */
|
|
38
|
+
--rdp-range_middle-color: inherit; /* The color of the range text. */
|
|
39
|
+
|
|
40
|
+
--rdp-range_start-color: var(
|
|
41
|
+
--em-cal-day-selected-color,
|
|
42
|
+
#fff
|
|
43
|
+
); /* The color of the range text. */
|
|
44
|
+
--rdp-range_start-date-background-color: var(
|
|
45
|
+
--rdp-accent-color
|
|
46
|
+
); /* The background color of the date when at the start of the selected range. */
|
|
47
|
+
|
|
48
|
+
--rdp-range_end-color: white; /* The color of the range text. */
|
|
49
|
+
--rdp-range_end-date-background-color: var(
|
|
50
|
+
--rdp-accent-color
|
|
51
|
+
); /* The background color of the date when at the end of the selected range. */
|
|
52
|
+
|
|
53
|
+
--rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
|
|
54
|
+
--rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
|
|
55
|
+
|
|
56
|
+
--rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
|
|
57
|
+
--rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
|
|
58
|
+
--rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
|
|
59
|
+
--rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
|
|
60
|
+
|
|
61
|
+
--rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
|
|
62
|
+
--rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
|
|
63
|
+
--rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
|
|
64
|
+
|
|
65
|
+
--rdp-gradient-direction: 90deg;
|
|
66
|
+
|
|
67
|
+
--rdp-animation_duration: 0.3s;
|
|
68
|
+
--rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.rdp-root[dir='rtl'] {
|
|
72
|
+
--rdp-gradient-direction: -90deg;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* .rdp-root[data-broadcast-calendar='true'] {
|
|
76
|
+
--rdp-outside-opacity: unset;
|
|
77
|
+
} */
|
|
78
|
+
|
|
79
|
+
/* Root of the component. */
|
|
80
|
+
.rdp-root {
|
|
81
|
+
position: relative; /* Required to position the navigation toolbar. */
|
|
82
|
+
box-sizing: border-box;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.rdp-root * {
|
|
86
|
+
box-sizing: border-box;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.rdp-day {
|
|
90
|
+
width: var(--rdp-day-width);
|
|
91
|
+
height: var(--rdp-day-height);
|
|
92
|
+
text-align: center;
|
|
93
|
+
padding: 0;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.rdp-day_button {
|
|
97
|
+
background: none;
|
|
98
|
+
padding: 0;
|
|
99
|
+
margin: 0;
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
font: inherit;
|
|
102
|
+
color: inherit;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
align-items: center;
|
|
105
|
+
display: flex;
|
|
106
|
+
|
|
107
|
+
border: unset;
|
|
108
|
+
width: var(--rdp-day_button-width);
|
|
109
|
+
height: var(--rdp-day_button-height);
|
|
110
|
+
border-radius: var(--rdp-day_button-border-radius);
|
|
111
|
+
|
|
112
|
+
color: var(--em-cal-day-current-month-color, #212129);
|
|
113
|
+
font-family: var(--em-calendar-dates-font-font-family, sans-serif);
|
|
114
|
+
font-size: var(--em-calendar-dates-font-font-size, 0.875rem);
|
|
115
|
+
font-weight: var(--em-calendar-dates-font-font-weight, 500);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.rdp-day_button:disabled {
|
|
119
|
+
cursor: revert;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.rdp-caption_label {
|
|
123
|
+
z-index: 1;
|
|
124
|
+
|
|
125
|
+
position: relative;
|
|
126
|
+
display: inline-flex;
|
|
127
|
+
align-items: center;
|
|
128
|
+
|
|
129
|
+
white-space: nowrap;
|
|
130
|
+
border: 0;
|
|
131
|
+
|
|
132
|
+
color: var(--em-cal-view-date-color, #212129);
|
|
133
|
+
font-family: var(--em-cal-view-font-font-family, sans-serif);
|
|
134
|
+
font-size: var(--em-cal-view-font-font-size, 0.875rem);
|
|
135
|
+
font-weight: var(--em-cal-view-font-font-weight, 500);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.rdp-dropdown:focus-visible ~ .rdp-caption_label {
|
|
139
|
+
outline: 5px auto Highlight;
|
|
140
|
+
/* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */
|
|
141
|
+
outline: 5px auto -webkit-focus-ring-color;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.rdp-button_next,
|
|
145
|
+
.rdp-button_previous {
|
|
146
|
+
border: none;
|
|
147
|
+
background: none;
|
|
148
|
+
padding: 0;
|
|
149
|
+
margin: 0;
|
|
150
|
+
cursor: pointer;
|
|
151
|
+
font: inherit;
|
|
152
|
+
color: inherit;
|
|
153
|
+
-moz-appearance: none;
|
|
154
|
+
-webkit-appearance: none;
|
|
155
|
+
display: inline-flex;
|
|
156
|
+
align-items: center;
|
|
157
|
+
justify-content: center;
|
|
158
|
+
position: relative;
|
|
159
|
+
appearance: none;
|
|
160
|
+
|
|
161
|
+
width: var(--rdp-nav_button-width);
|
|
162
|
+
height: var(--rdp-nav_button-height);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.rdp-button_next:disabled,
|
|
166
|
+
.rdp-button_next[aria-disabled='true'],
|
|
167
|
+
.rdp-button_previous:disabled,
|
|
168
|
+
.rdp-button_previous[aria-disabled='true'] {
|
|
169
|
+
cursor: revert;
|
|
170
|
+
|
|
171
|
+
opacity: var(--rdp-nav_button-disabled-opacity);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.rdp-chevron {
|
|
175
|
+
display: inline-block;
|
|
176
|
+
fill: var(--rdp-accent-color);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.rdp-root[dir='rtl'] .rdp-nav .rdp-chevron {
|
|
180
|
+
transform: rotate(180deg);
|
|
181
|
+
transform-origin: 50%;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.rdp-dropdowns {
|
|
185
|
+
position: relative;
|
|
186
|
+
display: inline-flex;
|
|
187
|
+
align-items: center;
|
|
188
|
+
gap: var(--rdp-dropdown-gap);
|
|
189
|
+
}
|
|
190
|
+
.rdp-dropdown {
|
|
191
|
+
z-index: 2;
|
|
192
|
+
|
|
193
|
+
/* Reset */
|
|
194
|
+
opacity: 0;
|
|
195
|
+
appearance: none;
|
|
196
|
+
position: absolute;
|
|
197
|
+
inset-block-start: 0;
|
|
198
|
+
inset-block-end: 0;
|
|
199
|
+
inset-inline-start: 0;
|
|
200
|
+
width: 100%;
|
|
201
|
+
margin: 0;
|
|
202
|
+
padding: 0;
|
|
203
|
+
cursor: inherit;
|
|
204
|
+
border: none;
|
|
205
|
+
line-height: inherit;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.rdp-dropdown_root {
|
|
209
|
+
position: relative;
|
|
210
|
+
display: inline-flex;
|
|
211
|
+
align-items: center;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.rdp-dropdown_root[data-disabled='true'] .rdp-chevron {
|
|
215
|
+
opacity: var(--rdp-disabled-opacity);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.rdp-month_caption {
|
|
219
|
+
display: flex;
|
|
220
|
+
align-content: center;
|
|
221
|
+
height: var(--rdp-nav-height);
|
|
222
|
+
font-weight: bold;
|
|
223
|
+
font-size: large;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.rdp-root[data-nav-layout='around'] .rdp-month,
|
|
227
|
+
.rdp-root[data-nav-layout='after'] .rdp-month {
|
|
228
|
+
position: relative;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.rdp-root[data-nav-layout='around'] .rdp-month_caption {
|
|
232
|
+
justify-content: center;
|
|
233
|
+
margin-inline-start: var(--rdp-nav_button-width);
|
|
234
|
+
margin-inline-end: var(--rdp-nav_button-width);
|
|
235
|
+
position: relative;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.rdp-root[data-nav-layout='around'] .rdp-button_previous {
|
|
239
|
+
position: absolute;
|
|
240
|
+
inset-inline-start: 0;
|
|
241
|
+
top: 0;
|
|
242
|
+
height: var(--rdp-nav-height);
|
|
243
|
+
display: inline-flex;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.rdp-root[data-nav-layout='around'] .rdp-button_next {
|
|
247
|
+
position: absolute;
|
|
248
|
+
inset-inline-end: 0;
|
|
249
|
+
top: 0;
|
|
250
|
+
height: var(--rdp-nav-height);
|
|
251
|
+
display: inline-flex;
|
|
252
|
+
justify-content: center;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.rdp-months {
|
|
256
|
+
position: relative;
|
|
257
|
+
display: flex;
|
|
258
|
+
flex-wrap: wrap;
|
|
259
|
+
gap: var(--rdp-months-gap);
|
|
260
|
+
max-width: fit-content;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.rdp-month_grid {
|
|
264
|
+
border-collapse: collapse;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.rdp-nav {
|
|
268
|
+
position: absolute;
|
|
269
|
+
inset-block-start: 0;
|
|
270
|
+
inset-inline-end: 0;
|
|
271
|
+
|
|
272
|
+
display: flex;
|
|
273
|
+
align-items: center;
|
|
274
|
+
|
|
275
|
+
height: var(--rdp-nav-height);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.rdp-weekday {
|
|
279
|
+
opacity: var(--rdp-weekday-opacity);
|
|
280
|
+
padding: var(--rdp-weekday-padding);
|
|
281
|
+
font-weight: 500;
|
|
282
|
+
font-size: smaller;
|
|
283
|
+
text-align: var(--rdp-weekday-text-align);
|
|
284
|
+
text-transform: var(--rdp-weekday-text-transform);
|
|
285
|
+
|
|
286
|
+
color: var(--em-cal-day-name-color, #5c5c66);
|
|
287
|
+
font-family: var(--em-calendar-dates-font-font-family, sans-serif);
|
|
288
|
+
font-size: var(--em-calendar-dates-font-font-size, 0.875rem);
|
|
289
|
+
font-weight: var(--em-calendar-dates-font-font-weight, 500);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.rdp-week_number {
|
|
293
|
+
opacity: var(--rdp-week_number-opacity);
|
|
294
|
+
font-weight: 400;
|
|
295
|
+
font-size: small;
|
|
296
|
+
height: var(--rdp-week_number-height);
|
|
297
|
+
width: var(--rdp-week_number-width);
|
|
298
|
+
border: var(--rdp-week_number-border);
|
|
299
|
+
border-radius: var(--rdp-week_number-border-radius);
|
|
300
|
+
text-align: var(--rdp-weeknumber-text-align);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
/* DAY MODIFIERS */
|
|
304
|
+
.rdp-today:not(.rdp-outside) {
|
|
305
|
+
color: var(--rdp-today-color);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.rdp-outside .rdp-day_button {
|
|
309
|
+
color: var(--em-cal-day-previous-month-color, #b8b8bd);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.rdp-disabled:not(.rdp-selected) {
|
|
313
|
+
opacity: var(--rdp-disabled-opacity);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.rdp-hidden {
|
|
317
|
+
visibility: hidden;
|
|
318
|
+
color: var(--rdp-range_start-color);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.rdp-range_start .rdp-day_button {
|
|
322
|
+
background-color: var(--rdp-range_start-date-background-color);
|
|
323
|
+
color: var(--rdp-range_start-color);
|
|
324
|
+
|
|
325
|
+
border: unset;
|
|
326
|
+
border-radius: var(--em-border-radius-200, 0.5rem) 0 0 var(--em-border-radius-200, 0.5rem);
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.rdp-range_middle {
|
|
330
|
+
background-color: var(--rdp-range_middle-background-color);
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.rdp-range_middle .rdp-day_button {
|
|
334
|
+
border: unset;
|
|
335
|
+
border-radius: unset;
|
|
336
|
+
color: var(--rdp-range_middle-color);
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.rdp-range_end {
|
|
340
|
+
color: var(--rdp-range_end-color);
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.rdp-range_end .rdp-day_button {
|
|
344
|
+
color: var(--rdp-range_start-color);
|
|
345
|
+
background-color: var(--rdp-range_end-date-background-color);
|
|
346
|
+
|
|
347
|
+
border: unset;
|
|
348
|
+
border-radius: 0 var(--em-border-radius-200, 0.5rem) var(--em-border-radius-200, 0.5rem) 0;
|
|
349
|
+
}
|
|
350
|
+
.rdp-range_start.rdp-range_end .rdp-day_button {
|
|
351
|
+
border-radius: var(--em-border-radius-200, 0.5rem);
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.rdp-range_start.rdp-range_end {
|
|
355
|
+
background: revert;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.rdp-focusable {
|
|
359
|
+
cursor: pointer;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
@keyframes rdp-slide_in_left {
|
|
363
|
+
0% {
|
|
364
|
+
transform: translateX(-100%);
|
|
365
|
+
}
|
|
366
|
+
100% {
|
|
367
|
+
transform: translateX(0);
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
@keyframes rdp-slide_in_right {
|
|
372
|
+
0% {
|
|
373
|
+
transform: translateX(100%);
|
|
374
|
+
}
|
|
375
|
+
100% {
|
|
376
|
+
transform: translateX(0);
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
@keyframes rdp-slide_out_left {
|
|
381
|
+
0% {
|
|
382
|
+
transform: translateX(0);
|
|
383
|
+
}
|
|
384
|
+
100% {
|
|
385
|
+
transform: translateX(-100%);
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
@keyframes rdp-slide_out_right {
|
|
390
|
+
0% {
|
|
391
|
+
transform: translateX(0);
|
|
392
|
+
}
|
|
393
|
+
100% {
|
|
394
|
+
transform: translateX(100%);
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.rdp-weeks_before_enter {
|
|
399
|
+
animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.rdp-weeks_before_exit {
|
|
403
|
+
animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
.rdp-weeks_after_enter {
|
|
407
|
+
animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.rdp-weeks_after_exit {
|
|
411
|
+
animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.rdp-root[dir='rtl'] .rdp-weeks_after_enter {
|
|
415
|
+
animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.rdp-root[dir='rtl'] .rdp-weeks_before_exit {
|
|
419
|
+
animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.rdp-root[dir='rtl'] .rdp-weeks_before_enter {
|
|
423
|
+
animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.rdp-root[dir='rtl'] .rdp-weeks_after_exit {
|
|
427
|
+
animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
@keyframes rdp-fade_in {
|
|
431
|
+
from {
|
|
432
|
+
opacity: 0;
|
|
433
|
+
}
|
|
434
|
+
to {
|
|
435
|
+
opacity: 1;
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
@keyframes rdp-fade_out {
|
|
440
|
+
from {
|
|
441
|
+
opacity: 1;
|
|
442
|
+
}
|
|
443
|
+
to {
|
|
444
|
+
opacity: 0;
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
.rdp-caption_after_enter {
|
|
449
|
+
animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.rdp-caption_after_exit {
|
|
453
|
+
animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.rdp-caption_before_enter {
|
|
457
|
+
animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.rdp-caption_before_exit {
|
|
461
|
+
animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
|
|
462
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
.chevron {
|
|
2
|
+
width: var(--em-cal-nav-size, 2rem);
|
|
3
|
+
height: var(--em-cal-nav-size, 2rem);
|
|
4
|
+
padding: var(--em-cal-nav-padding-default, 0.5rem);
|
|
5
|
+
border-radius: var(--em-cal-nav-border-radius-default, 0.5rem);
|
|
6
|
+
background: var(--em-cal-nav-background-default, #fff);
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
border: unset;
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
}
|
|
13
|
+
.chevron svg {
|
|
14
|
+
flex-shrink: 0;
|
|
15
|
+
width: var(--em-icon-width, 1rem);
|
|
16
|
+
height: var(--em-icon-height, 1rem);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.chevron:hover {
|
|
20
|
+
background: var(--em-cal-nav-background-hover, #f7f7f8);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.chevron:active {
|
|
24
|
+
background: var(--em-cal-nav-background-pressed, #ededf1);
|
|
25
|
+
}
|
|
@@ -19,6 +19,12 @@
|
|
|
19
19
|
var(--em-selectfield-content-shadow-color, rgba(33, 33, 41, 0.25));
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
.selectFieldContent.fitContent {
|
|
23
|
+
min-width: unset;
|
|
24
|
+
max-height: unset;
|
|
25
|
+
max-width: unset;
|
|
26
|
+
}
|
|
27
|
+
|
|
22
28
|
.selectFieldContentList {
|
|
23
29
|
display: flex;
|
|
24
30
|
flex-direction: column;
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,8 @@ import React__default, { FC, SVGProps, ImgHTMLAttributes, ReactNode, ReactElemen
|
|
|
4
4
|
import * as _tabler_icons_react from '@tabler/icons-react';
|
|
5
5
|
import { IconProps, Icon } from '@tabler/icons-react';
|
|
6
6
|
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
|
7
|
+
import { DateRange } from 'react-day-picker';
|
|
8
|
+
export { DateRange } from 'react-day-picker';
|
|
7
9
|
import { ChartData, ChartOptions, CartesianTickOptions, GridLineOptions } from 'chart.js';
|
|
8
10
|
import { S as StylesKeys } from './index-C2c7n1lv.js';
|
|
9
11
|
export { a as Styles } from './index-C2c7n1lv.js';
|
|
@@ -159,6 +161,7 @@ type SelectFieldContentProps = {
|
|
|
159
161
|
children: ReactNode;
|
|
160
162
|
autoFocus?: boolean;
|
|
161
163
|
className?: string;
|
|
164
|
+
fitContent?: boolean;
|
|
162
165
|
};
|
|
163
166
|
declare const SelectFieldContent: FC<SelectFieldContentProps>;
|
|
164
167
|
type SelectFieldContentListProps = {
|
|
@@ -221,6 +224,27 @@ type SelectFieldCategoryProps = {
|
|
|
221
224
|
};
|
|
222
225
|
declare const SelectFieldCategory: FC<SelectFieldCategoryProps>;
|
|
223
226
|
|
|
227
|
+
type DateRangePickerProps = {
|
|
228
|
+
numberOfMonths?: number;
|
|
229
|
+
locale?: string;
|
|
230
|
+
value?: DateRange;
|
|
231
|
+
onChange: (dateRange: DateRange | undefined) => void;
|
|
232
|
+
};
|
|
233
|
+
declare const DateRangePicker: React__default.FC<DateRangePickerProps>;
|
|
234
|
+
|
|
235
|
+
type DateRangePickerFieldProps = {
|
|
236
|
+
displayValue?: string;
|
|
237
|
+
startIcon?: React.ComponentType<IconProps>;
|
|
238
|
+
placeholder?: string;
|
|
239
|
+
disabled?: boolean;
|
|
240
|
+
error?: boolean;
|
|
241
|
+
errorMessage?: string;
|
|
242
|
+
clearable?: boolean;
|
|
243
|
+
onChange: (dateRange: DateRange | undefined) => void;
|
|
244
|
+
submitLabel?: string;
|
|
245
|
+
} & FieldHeaderProps & DateRangePickerProps;
|
|
246
|
+
declare const DateRangePickerField: FC<DateRangePickerFieldProps>;
|
|
247
|
+
|
|
224
248
|
type BarChartDefaultConfigurationProps = {
|
|
225
249
|
horizontal?: boolean;
|
|
226
250
|
showLegend?: boolean;
|
|
@@ -474,4 +498,4 @@ type Size = {
|
|
|
474
498
|
};
|
|
475
499
|
declare const useResizeObserver: <T extends HTMLElement>(elRef: React.RefObject<T | null>, timeout?: number) => Size;
|
|
476
500
|
|
|
477
|
-
export { ActionIcon, BarChart, Button, ButtonIcon, Card, CardContent, CardFeedback, CardHeader, type CssSize, DonutChart, Dropdown, FieldFeedback, FieldHeader, GhostButton, HeatMap, type HeatMapProps, type HeatMapPropsDimension, type HeatMapPropsMeasure, type HeatMapPropsThreshold, KpiChart, LineChart, MultiSelectField, NumberField, Overlay, PieChart, PivotTable, type PivotTableProps, type PivotTablePropsColumnDimension, type PivotTablePropsMeasure, type PivotTablePropsRowDimension, SelectFieldCategory, SelectFieldContent, SelectFieldContentList, SelectFieldTrigger, SelectListOption, type SelectListOptionProps, SingleSelectField, Skeleton, Switch, TableHeaderAlign, type TableHeaderCell, type TableHeaderItem, type TableHeaderItemAlign, TablePaginated, type TablePaginatedProps, type TableSort, TableSortDirection, TextField, Typography, chartjsAxisOptionsLayoutPadding, getBarChartData, getBarChartOptions, getChartColors, getChartContrastColors, getChartjsAxisOptions, getChartjsAxisOptionsPlugins, getChartjsAxisOptionsScales, getChartjsAxisOptionsScalesGrid, getChartjsAxisOptionsScalesGridColor, getChartjsAxisOptionsScalesTicksDefault, getChartjsAxisOptionsScalesTicksMuted, getChartjsAxisOptionsScalesTitle, getDonutChartOptions, getLineChartData, getLineChartOptions, getPieChartData, getPieChartOptions, getStyle, getStyleNumber, getTableTotalPages, useDebounce, useResizeObserver, useTableGetRowsPerPage };
|
|
501
|
+
export { ActionIcon, BarChart, Button, ButtonIcon, Card, CardContent, CardFeedback, CardHeader, type CssSize, DateRangePicker, DateRangePickerField, DonutChart, Dropdown, FieldFeedback, FieldHeader, GhostButton, HeatMap, type HeatMapProps, type HeatMapPropsDimension, type HeatMapPropsMeasure, type HeatMapPropsThreshold, KpiChart, LineChart, MultiSelectField, NumberField, Overlay, PieChart, PivotTable, type PivotTableProps, type PivotTablePropsColumnDimension, type PivotTablePropsMeasure, type PivotTablePropsRowDimension, SelectFieldCategory, SelectFieldContent, SelectFieldContentList, SelectFieldTrigger, SelectListOption, type SelectListOptionProps, SingleSelectField, Skeleton, Switch, TableHeaderAlign, type TableHeaderCell, type TableHeaderItem, type TableHeaderItemAlign, TablePaginated, type TablePaginatedProps, type TableSort, TableSortDirection, TextField, Typography, chartjsAxisOptionsLayoutPadding, getBarChartData, getBarChartOptions, getChartColors, getChartContrastColors, getChartjsAxisOptions, getChartjsAxisOptionsPlugins, getChartjsAxisOptionsScales, getChartjsAxisOptionsScalesGrid, getChartjsAxisOptionsScalesGridColor, getChartjsAxisOptionsScalesTicksDefault, getChartjsAxisOptionsScalesTicksMuted, getChartjsAxisOptionsScalesTitle, getDonutChartOptions, getLineChartData, getLineChartOptions, getPieChartData, getPieChartOptions, getStyle, getStyleNumber, getTableTotalPages, useDebounce, useResizeObserver, useTableGetRowsPerPage };
|