@cronocode/react-box 3.1.2 → 3.1.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.
Files changed (34) hide show
  1. package/components/dataGrid/components/dataGridCell.d.ts +1 -1
  2. package/components/dataGrid/components/dataGridColumnFilter.d.ts +11 -0
  3. package/components/dataGrid/components/dataGridFilterCell.d.ts +8 -0
  4. package/components/dataGrid/components/dataGridFilterRow.d.ts +6 -0
  5. package/components/dataGrid/components/dataGridGlobalFilter.d.ts +6 -0
  6. package/components/dataGrid/contracts/dataGridContract.d.ts +57 -0
  7. package/components/dataGrid/models/columnModel.d.ts +1 -0
  8. package/components/dataGrid/models/gridModel.d.ts +53 -1
  9. package/components/dataGrid/models/groupRowModel.d.ts +2 -0
  10. package/components/dataGrid.cjs +1 -1
  11. package/components/dataGrid.mjs +694 -284
  12. package/components/dropdown.cjs +1 -1
  13. package/components/dropdown.d.ts +4 -1
  14. package/components/dropdown.mjs +158 -149
  15. package/components/form.mjs +1 -1
  16. package/components/semantics.d.ts +25 -25
  17. package/components/semantics.mjs +5 -5
  18. package/components/textbox.cjs +1 -1
  19. package/components/textbox.d.ts +2 -2
  20. package/components/textbox.mjs +5 -4
  21. package/components/tooltip.cjs +1 -1
  22. package/components/tooltip.d.ts +4 -0
  23. package/components/tooltip.mjs +45 -41
  24. package/core/boxStyles.d.ts +66 -31
  25. package/core/extends/boxComponents.d.ts +812 -153
  26. package/core/variables.d.ts +25 -1
  27. package/core.cjs +3 -7
  28. package/core.mjs +1542 -681
  29. package/hooks/useVirtualization.d.ts +43 -0
  30. package/package.json +7 -5
  31. package/ssg.cjs +1 -1
  32. package/ssg.mjs +28 -20
  33. package/types.d.ts +6 -5
  34. package/utils/string/fuzzySearch.d.ts +27 -0
@@ -45,44 +45,129 @@ declare const boxComponents: {
45
45
  button: {
46
46
  styles: {
47
47
  display: "inline-flex";
48
+ ai: "center";
49
+ jc: "center";
50
+ gap: number;
51
+ bgColor: "indigo-600";
48
52
  color: "white";
49
- bgColor: "violet-500";
50
- borderColor: "violet-500";
51
- p: number;
52
- cursor: "pointer";
53
- b: number;
53
+ fontWeight: 500;
54
+ py: number;
55
+ px: number;
54
56
  borderRadius: number;
55
- userSelect: "none";
56
- lineHeight: number;
57
+ b: number;
58
+ cursor: "pointer";
57
59
  hover: {
58
- bgColor: "violet-600";
59
- borderColor: "violet-600";
60
+ bgColor: "indigo-700";
61
+ };
62
+ active: {
63
+ bgColor: "indigo-800";
64
+ };
65
+ focus: {
66
+ outline: number;
67
+ outlineOffset: number;
68
+ outlineColor: "indigo-200";
60
69
  };
61
70
  disabled: {
62
- cursor: "not-allowed";
63
- bgColor: "violet-50";
71
+ bgColor: "gray-200";
64
72
  color: "gray-400";
65
- borderColor: "gray-300";
73
+ cursor: "not-allowed";
74
+ hover: {
75
+ bgColor: "gray-200";
76
+ };
77
+ };
78
+ theme: {
79
+ dark: {
80
+ bgColor: "indigo-500";
81
+ hover: {
82
+ bgColor: "indigo-400";
83
+ };
84
+ active: {
85
+ bgColor: "indigo-600";
86
+ };
87
+ focus: {
88
+ outlineColor: "indigo-800";
89
+ };
90
+ disabled: {
91
+ bgColor: "gray-800";
92
+ color: "gray-600";
93
+ hover: {
94
+ bgColor: "gray-800";
95
+ };
96
+ };
97
+ };
66
98
  };
67
99
  };
68
100
  variants: {
69
- hover: {
70
- position: "relative";
71
- overflow: "hidden";
101
+ secondary: {
102
+ bgColor: "white";
103
+ color: "gray-900";
72
104
  b: number;
73
- before: {
74
- position: "absolute";
75
- top: number;
76
- left: number;
77
- width: number;
78
- height: "fit";
79
- bgColor: "violet-700";
80
- content: "empty";
81
- transitionDuration: 300;
105
+ borderColor: "gray-300";
106
+ hover: {
107
+ bgColor: "gray-50";
108
+ };
109
+ active: {
110
+ bgColor: "gray-100";
82
111
  };
112
+ focus: {
113
+ borderColor: "indigo-500";
114
+ outlineColor: "indigo-100";
115
+ };
116
+ disabled: {
117
+ bgColor: "gray-50";
118
+ color: "gray-400";
119
+ borderColor: "gray-200";
120
+ };
121
+ theme: {
122
+ dark: {
123
+ bgColor: "gray-800";
124
+ color: "gray-100";
125
+ borderColor: "gray-700";
126
+ hover: {
127
+ bgColor: "gray-700";
128
+ };
129
+ active: {
130
+ bgColor: "gray-600";
131
+ };
132
+ focus: {
133
+ borderColor: "indigo-400";
134
+ outlineColor: "indigo-900";
135
+ };
136
+ disabled: {
137
+ bgColor: "gray-900";
138
+ color: "gray-600";
139
+ borderColor: "gray-800";
140
+ };
141
+ };
142
+ };
143
+ };
144
+ ghost: {
145
+ bgColor: "transparent";
146
+ color: "gray-700";
83
147
  hover: {
84
- before: {
85
- width: "fit";
148
+ bgColor: "gray-100";
149
+ };
150
+ active: {
151
+ bgColor: "gray-200";
152
+ };
153
+ disabled: {
154
+ bgColor: "transparent";
155
+ color: "gray-400";
156
+ };
157
+ theme: {
158
+ dark: {
159
+ bgColor: "transparent";
160
+ color: "gray-300";
161
+ hover: {
162
+ bgColor: "gray-800";
163
+ };
164
+ active: {
165
+ bgColor: "gray-700";
166
+ };
167
+ disabled: {
168
+ bgColor: "transparent";
169
+ color: "gray-600";
170
+ };
86
171
  };
87
172
  };
88
173
  };
@@ -92,26 +177,53 @@ declare const boxComponents: {
92
177
  styles: {
93
178
  display: "inline-block";
94
179
  b: number;
95
- borderColor: "violet-200";
96
- bgColor: "violet-50";
97
- color: "violet-950";
180
+ borderColor: "gray-300";
181
+ bgColor: "white";
182
+ color: "gray-900";
98
183
  borderRadius: number;
99
184
  p: number;
100
- transition: "none";
185
+ px: number;
101
186
  lineHeight: number;
102
187
  hover: {
103
- borderColor: "violet-300";
188
+ borderColor: "gray-400";
104
189
  };
105
190
  focus: {
106
191
  outline: number;
107
- borderColor: "violet-500";
108
- outlineColor: "violet-500";
192
+ outlineOffset: number;
193
+ borderColor: "indigo-500";
194
+ outlineColor: "indigo-200";
109
195
  };
110
196
  disabled: {
111
197
  cursor: "not-allowed";
112
- bgColor: "violet-50";
198
+ bgColor: "gray-100";
113
199
  color: "gray-400";
114
- borderColor: "gray-300";
200
+ borderColor: "gray-200";
201
+ };
202
+ theme: {
203
+ dark: {
204
+ bgColor: "gray-800";
205
+ color: "gray-100";
206
+ borderColor: "gray-700";
207
+ hover: {
208
+ borderColor: "gray-600";
209
+ };
210
+ focus: {
211
+ borderColor: "indigo-400";
212
+ outlineColor: "indigo-900";
213
+ };
214
+ disabled: {
215
+ bgColor: "gray-900";
216
+ color: "gray-600";
217
+ borderColor: "gray-800";
218
+ };
219
+ };
220
+ };
221
+ };
222
+ variants: {
223
+ compact: {
224
+ px: number;
225
+ py: number;
226
+ fontSize: number;
115
227
  };
116
228
  };
117
229
  };
@@ -119,27 +231,47 @@ declare const boxComponents: {
119
231
  styles: {
120
232
  display: "inline-block";
121
233
  b: number;
122
- borderColor: "violet-200";
123
- bgColor: "violet-50";
124
- color: "violet-950";
234
+ borderColor: "gray-300";
235
+ bgColor: "white";
236
+ color: "gray-900";
125
237
  borderRadius: number;
126
238
  p: number;
127
- transition: "none";
239
+ px: number;
128
240
  hover: {
129
- borderColor: "violet-300";
241
+ borderColor: "gray-400";
130
242
  };
131
243
  focus: {
132
244
  outline: number;
133
- borderColor: "violet-500";
134
- outlineColor: "violet-500";
245
+ outlineOffset: number;
246
+ borderColor: "indigo-500";
247
+ outlineColor: "indigo-200";
135
248
  };
136
249
  disabled: {
137
250
  cursor: "not-allowed";
138
- bgColor: "violet-50";
251
+ bgColor: "gray-100";
139
252
  color: "gray-400";
140
- borderColor: "gray-300";
253
+ borderColor: "gray-200";
141
254
  resize: "none";
142
255
  };
256
+ theme: {
257
+ dark: {
258
+ bgColor: "gray-800";
259
+ color: "gray-100";
260
+ borderColor: "gray-700";
261
+ hover: {
262
+ borderColor: "gray-600";
263
+ };
264
+ focus: {
265
+ borderColor: "indigo-400";
266
+ outlineColor: "indigo-900";
267
+ };
268
+ disabled: {
269
+ bgColor: "gray-900";
270
+ color: "gray-600";
271
+ borderColor: "gray-800";
272
+ };
273
+ };
274
+ };
143
275
  };
144
276
  };
145
277
  checkbox: {
@@ -147,33 +279,63 @@ declare const boxComponents: {
147
279
  display: "inline-block";
148
280
  appearance: "none";
149
281
  b: number;
150
- borderColor: "violet-300";
282
+ borderColor: "gray-300";
151
283
  borderRadius: number;
152
284
  p: number;
153
285
  cursor: "pointer";
154
- transition: "none";
155
286
  hover: {
156
- borderColor: "violet-500";
287
+ borderColor: "indigo-400";
157
288
  };
158
289
  focus: {
159
290
  outline: number;
160
291
  outlineOffset: number;
161
- outlineColor: "violet-500";
292
+ outlineColor: "indigo-200";
162
293
  };
163
294
  checked: {
164
- bgColor: "violet-500";
165
- borderColor: "violet-500";
295
+ bgColor: "indigo-500";
296
+ borderColor: "indigo-500";
166
297
  bgImage: "bg-img-checked";
167
298
  };
168
299
  indeterminate: {
169
- color: "violet-500";
300
+ borderColor: "indigo-500";
170
301
  bgImage: "bg-img-indeterminate";
171
302
  };
172
303
  disabled: {
173
304
  cursor: "not-allowed";
174
- bgColor: "violet-100";
175
- color: "gray-400";
176
- borderColor: "gray-300";
305
+ borderColor: "gray-200";
306
+ checked: {
307
+ bgColor: "gray-300";
308
+ };
309
+ hover: {
310
+ borderColor: "gray-200";
311
+ };
312
+ };
313
+ theme: {
314
+ dark: {
315
+ borderColor: "gray-600";
316
+ hover: {
317
+ borderColor: "indigo-400";
318
+ };
319
+ focus: {
320
+ outlineColor: "indigo-900";
321
+ };
322
+ checked: {
323
+ bgColor: "indigo-500";
324
+ borderColor: "indigo-500";
325
+ };
326
+ indeterminate: {
327
+ borderColor: "indigo-500";
328
+ };
329
+ disabled: {
330
+ borderColor: "gray-700";
331
+ checked: {
332
+ bgColor: "gray-600";
333
+ };
334
+ hover: {
335
+ borderColor: "gray-700";
336
+ };
337
+ };
338
+ };
177
339
  };
178
340
  };
179
341
  variants: {
@@ -184,72 +346,122 @@ declare const boxComponents: {
184
346
  styles: {
185
347
  appearance: "none";
186
348
  b: number;
187
- borderColor: "violet-300";
349
+ borderColor: "gray-300";
188
350
  borderRadius: number;
189
351
  p: number;
190
352
  cursor: "pointer";
191
- transition: "none";
192
353
  hover: {
193
- borderColor: "violet-500";
354
+ borderColor: "indigo-400";
194
355
  };
195
356
  focus: {
196
357
  outline: number;
197
358
  outlineOffset: number;
198
- outlineColor: "violet-500";
359
+ outlineColor: "indigo-200";
199
360
  };
200
361
  checked: {
201
- bgColor: "violet-500";
202
- borderColor: "violet-500";
362
+ bgColor: "indigo-500";
363
+ borderColor: "indigo-500";
203
364
  bgImage: "bg-img-radio";
204
365
  };
205
366
  disabled: {
367
+ checked: {
368
+ bgColor: "gray-300";
369
+ borderColor: "gray-200";
370
+ };
206
371
  cursor: "not-allowed";
207
- bgColor: "violet-100";
208
- color: "gray-400";
209
- borderColor: "violet-200";
372
+ borderColor: "gray-200";
373
+ hover: {
374
+ borderColor: "gray-200";
375
+ };
376
+ };
377
+ theme: {
378
+ dark: {
379
+ borderColor: "gray-600";
380
+ hover: {
381
+ borderColor: "indigo-400";
382
+ };
383
+ focus: {
384
+ outlineColor: "indigo-900";
385
+ };
386
+ checked: {
387
+ bgColor: "indigo-500";
388
+ borderColor: "indigo-500";
389
+ };
390
+ disabled: {
391
+ borderColor: "gray-700";
392
+ checked: {
393
+ bgColor: "gray-600";
394
+ };
395
+ hover: {
396
+ borderColor: "gray-700";
397
+ };
398
+ };
399
+ };
210
400
  };
211
401
  };
212
402
  };
213
403
  dropdown: {
214
404
  styles: {
215
- display: "inline-flex";
216
- ai: "center";
405
+ display: "inline-block";
406
+ overflow: "hidden";
407
+ whiteSpace: "nowrap";
408
+ textOverflow: "ellipsis";
409
+ textAlign: "left";
217
410
  gap: number;
218
- jc: "space-between";
219
411
  p: number;
220
412
  cursor: "pointer";
221
- bgColor: "violet-50";
222
- color: "violet-950";
413
+ bgColor: "white";
414
+ color: "gray-900";
223
415
  b: number;
224
- borderColor: "violet-200";
416
+ borderColor: "gray-300";
225
417
  borderRadius: number;
226
418
  userSelect: "none";
227
419
  lineHeight: number;
228
420
  minWidth: number;
229
421
  transition: "none";
230
422
  hover: {
231
- borderColor: "violet-300";
423
+ borderColor: "gray-400";
232
424
  };
233
425
  focus: {
234
426
  outline: number;
235
- borderColor: "violet-500";
236
- outlineColor: "violet-500";
427
+ outlineOffset: number;
428
+ borderColor: "indigo-500";
429
+ outlineColor: "indigo-200";
237
430
  };
238
431
  disabled: {
239
432
  cursor: "not-allowed";
240
- bgColor: "violet-50";
433
+ bgColor: "gray-100";
241
434
  color: "gray-400";
242
435
  borderColor: "gray-300";
243
436
  };
244
- };
245
- children: {
246
- display: {
247
- styles: {
248
- whiteSpace: "nowrap";
249
- textOverflow: "ellipsis";
250
- overflow: "hidden";
437
+ theme: {
438
+ dark: {
439
+ bgColor: "gray-800";
440
+ color: "gray-100";
441
+ borderColor: "gray-700";
442
+ hover: {
443
+ borderColor: "gray-600";
444
+ };
445
+ focus: {
446
+ borderColor: "indigo-400";
447
+ outlineColor: "indigo-900";
448
+ };
449
+ disabled: {
450
+ bgColor: "gray-900";
451
+ color: "gray-500";
452
+ borderColor: "gray-700";
453
+ };
251
454
  };
252
455
  };
456
+ };
457
+ variants: {
458
+ compact: {
459
+ px: number;
460
+ py: number;
461
+ fontSize: number;
462
+ };
463
+ };
464
+ children: {
253
465
  items: {
254
466
  styles: {
255
467
  display: "flex";
@@ -259,13 +471,19 @@ declare const boxComponents: {
259
471
  b: number;
260
472
  borderRadius: number;
261
473
  position: "relative";
262
- top: number;
263
474
  bgColor: "white";
264
475
  overflow: "auto";
265
476
  maxHeight: number;
266
- borderColor: "violet-300";
267
- color: "violet-950";
477
+ borderColor: "gray-300";
478
+ color: "gray-900";
268
479
  shadow: "medium";
480
+ theme: {
481
+ dark: {
482
+ bgColor: "gray-800";
483
+ borderColor: "gray-700";
484
+ color: "gray-100";
485
+ };
486
+ };
269
487
  };
270
488
  };
271
489
  item: {
@@ -275,21 +493,42 @@ declare const boxComponents: {
275
493
  p: number;
276
494
  cursor: "pointer";
277
495
  borderRadius: number;
496
+ lineHeight: number;
278
497
  hover: {
279
498
  bgColor: "gray-100";
280
499
  };
281
500
  focus: {
282
- bgColor: "violet-50";
501
+ bgColor: "indigo-50";
283
502
  };
284
503
  selected: {
285
- bgColor: "violet-50";
504
+ bgColor: "indigo-50";
286
505
  cursor: "default";
287
506
  hover: {
288
- bgColor: "violet-100";
507
+ bgColor: "indigo-100";
508
+ };
509
+ };
510
+ theme: {
511
+ dark: {
512
+ hover: {
513
+ bgColor: "gray-700";
514
+ };
515
+ focus: {
516
+ bgColor: "gray-700";
517
+ };
518
+ selected: {
519
+ bgColor: "indigo-900";
520
+ hover: {
521
+ bgColor: "indigo-800";
522
+ };
523
+ };
289
524
  };
290
525
  };
291
526
  };
292
527
  variants: {
528
+ compact: {
529
+ px: number;
530
+ py: number;
531
+ };
293
532
  multiple: {
294
533
  selected: {
295
534
  cursor: "pointer";
@@ -305,17 +544,37 @@ declare const boxComponents: {
305
544
  cursor: "pointer";
306
545
  lineHeight: number;
307
546
  borderRadius: number;
308
- color: "violet-400";
547
+ color: "gray-500";
309
548
  hover: {
310
- bgColor: "violet-50";
549
+ bgColor: "gray-100";
311
550
  };
312
551
  focus: {
313
- bgColor: "violet-50";
552
+ bgColor: "gray-100";
314
553
  };
315
554
  selected: {
316
- bgColor: "violet-50";
555
+ bgColor: "gray-100";
317
556
  cursor: "default";
318
557
  };
558
+ theme: {
559
+ dark: {
560
+ color: "gray-400";
561
+ hover: {
562
+ bgColor: "gray-700";
563
+ };
564
+ focus: {
565
+ bgColor: "gray-700";
566
+ };
567
+ selected: {
568
+ bgColor: "gray-700";
569
+ };
570
+ };
571
+ };
572
+ };
573
+ variants: {
574
+ compact: {
575
+ px: number;
576
+ py: number;
577
+ };
319
578
  };
320
579
  };
321
580
  selectAll: {
@@ -326,17 +585,37 @@ declare const boxComponents: {
326
585
  cursor: "pointer";
327
586
  lineHeight: number;
328
587
  borderRadius: number;
329
- color: "violet-400";
588
+ color: "gray-500";
330
589
  hover: {
331
- bgColor: "violet-50";
590
+ bgColor: "gray-100";
332
591
  };
333
592
  focus: {
334
- bgColor: "violet-50";
593
+ bgColor: "gray-100";
335
594
  };
336
595
  selected: {
337
- bgColor: "violet-50";
596
+ bgColor: "gray-100";
338
597
  cursor: "default";
339
598
  };
599
+ theme: {
600
+ dark: {
601
+ color: "gray-400";
602
+ hover: {
603
+ bgColor: "gray-700";
604
+ };
605
+ focus: {
606
+ bgColor: "gray-700";
607
+ };
608
+ selected: {
609
+ bgColor: "gray-700";
610
+ };
611
+ };
612
+ };
613
+ };
614
+ variants: {
615
+ compact: {
616
+ px: number;
617
+ py: number;
618
+ };
340
619
  };
341
620
  };
342
621
  emptyItem: {
@@ -347,7 +626,27 @@ declare const boxComponents: {
347
626
  cursor: "default";
348
627
  lineHeight: number;
349
628
  borderRadius: number;
350
- color: "violet-400";
629
+ color: "gray-400";
630
+ theme: {
631
+ dark: {
632
+ color: "gray-500";
633
+ };
634
+ };
635
+ };
636
+ variants: {
637
+ compact: {
638
+ px: number;
639
+ py: number;
640
+ };
641
+ };
642
+ };
643
+ icon: {
644
+ styles: {
645
+ position: "absolute";
646
+ top: number;
647
+ right: number;
648
+ height: "fit";
649
+ px: number;
351
650
  };
352
651
  };
353
652
  };
@@ -359,35 +658,158 @@ declare const boxComponents: {
359
658
  styles: {
360
659
  b: number;
361
660
  bgColor: "white";
362
- borderColor: "gray-400";
661
+ borderColor: "gray-200";
363
662
  overflow: "hidden";
364
663
  borderRadius: number;
664
+ shadow: "large";
665
+ theme: {
666
+ dark: {
667
+ bgColor: "gray-900";
668
+ borderColor: "gray-800";
669
+ };
670
+ };
365
671
  };
366
672
  children: {
367
673
  topBar: {
368
674
  styles: {
369
- p: number;
675
+ py: number;
676
+ px: number;
370
677
  bb: number;
371
- borderColor: "gray-400";
372
- color: "gray-400";
678
+ borderColor: "gray-200";
679
+ color: "gray-800";
373
680
  gap: number;
374
681
  ai: "center";
682
+ bgColor: "gray-50";
683
+ theme: {
684
+ dark: {
685
+ bgColor: "gray-800";
686
+ borderColor: "gray-700";
687
+ color: "gray-200";
688
+ };
689
+ };
375
690
  };
376
691
  children: {
692
+ globalFilter: {
693
+ styles: {
694
+ display: "flex";
695
+ ai: "center";
696
+ gap: number;
697
+ };
698
+ children: {
699
+ stats: {
700
+ styles: {
701
+ fontSize: number;
702
+ color: "gray-500";
703
+ textWrap: "nowrap";
704
+ theme: {
705
+ dark: {
706
+ color: "gray-400";
707
+ };
708
+ };
709
+ };
710
+ };
711
+ inputWrapper: {
712
+ styles: {
713
+ display: "flex";
714
+ position: "relative";
715
+ };
716
+ children: {
717
+ icon: {
718
+ styles: {
719
+ display: "flex";
720
+ position: "absolute";
721
+ left: number;
722
+ top: "1/2";
723
+ translateY: "-1/2";
724
+ pointerEvents: "none";
725
+ color: "gray-500";
726
+ theme: {
727
+ dark: {
728
+ color: "gray-400";
729
+ };
730
+ };
731
+ };
732
+ };
733
+ input: {
734
+ styles: {
735
+ display: "inline-block";
736
+ b: number;
737
+ borderColor: "gray-300";
738
+ bgColor: "white";
739
+ color: "gray-900";
740
+ borderRadius: number;
741
+ py: number;
742
+ fontSize: number;
743
+ focus: {
744
+ outline: number;
745
+ outlineOffset: number;
746
+ borderColor: "violet-500";
747
+ outlineColor: "violet-100";
748
+ };
749
+ theme: {
750
+ dark: {
751
+ bgColor: "gray-800";
752
+ borderColor: "gray-700";
753
+ color: "gray-100";
754
+ focus: {
755
+ borderColor: "violet-500";
756
+ outlineColor: "violet-950";
757
+ };
758
+ };
759
+ };
760
+ };
761
+ };
762
+ clear: {
763
+ styles: {
764
+ display: "flex";
765
+ position: "absolute";
766
+ right: number;
767
+ top: "1/2";
768
+ translateY: "-1/2";
769
+ cursor: "pointer";
770
+ fontSize: number;
771
+ color: "gray-500";
772
+ hover: {
773
+ color: "gray-700";
774
+ };
775
+ theme: {
776
+ dark: {
777
+ color: "gray-400";
778
+ hover: {
779
+ color: "gray-200";
780
+ };
781
+ };
782
+ };
783
+ };
784
+ };
785
+ };
786
+ };
787
+ };
788
+ };
377
789
  contextMenu: {
378
790
  clean: true;
379
791
  styles: {
380
792
  cursor: "pointer";
381
793
  p: number;
794
+ borderRadius: number;
795
+ color: "gray-700";
382
796
  hover: {
383
- bgColor: "gray-200";
384
- borderRadius: number;
797
+ bgColor: "gray-100";
798
+ };
799
+ theme: {
800
+ dark: {
801
+ color: "gray-300";
802
+ hover: {
803
+ bgColor: "gray-800";
804
+ };
805
+ };
385
806
  };
386
807
  };
387
808
  children: {
388
809
  tooltip: {
389
810
  styles: {
390
811
  bgColor: "white";
812
+ color: "gray-900";
391
813
  width: number;
392
814
  b: number;
393
815
  borderColor: "gray-300";
@@ -397,9 +819,16 @@ declare const boxComponents: {
397
819
  mt: number;
398
820
  py: number;
399
821
  translateX: number;
400
- shadow: "medium";
822
+ shadow: "large";
401
823
  overflow: "auto";
402
824
  maxHeight: number;
825
+ theme: {
826
+ dark: {
827
+ bgColor: "gray-800";
828
+ borderColor: "gray-700";
829
+ color: "gray-100";
830
+ };
831
+ };
403
832
  };
404
833
  children: {
405
834
  item: {
@@ -409,8 +838,30 @@ declare const boxComponents: {
409
838
  gap: number;
410
839
  p: number;
411
840
  cursor: "pointer";
841
+ color: "gray-900";
412
842
  hover: {
413
- bgColor: "gray-200";
843
+ bgColor: "violet-50";
844
+ };
845
+ theme: {
846
+ dark: {
847
+ color: "gray-100";
848
+ hover: {
849
+ bgColor: "gray-700";
850
+ };
851
+ };
852
+ };
853
+ };
854
+ children: {
855
+ icon: {
856
+ styles: {
857
+ width: number;
858
+ color: "violet-950";
859
+ theme: {
860
+ dark: {
861
+ color: "violet-300";
862
+ };
863
+ };
864
+ };
414
865
  };
415
866
  };
416
867
  };
@@ -426,8 +877,13 @@ declare const boxComponents: {
426
877
  children: {
427
878
  icon: {
428
879
  styles: {
429
- color: "violet-950";
880
+ color: "gray-700";
430
881
  width: number;
882
+ theme: {
883
+ dark: {
884
+ color: "gray-300";
885
+ };
886
+ };
431
887
  };
432
888
  };
433
889
  separator: {
@@ -438,20 +894,41 @@ declare const boxComponents: {
438
894
  gap: number;
439
895
  ai: "center";
440
896
  b: number;
441
- borderColor: "gray-400";
442
- bgColor: "gray-100";
897
+ borderColor: "gray-300";
898
+ bgColor: "white";
443
899
  borderRadius: number;
444
900
  py: number;
445
901
  pl: number;
446
902
  pr: number;
447
- color: "violet-950";
903
+ color: "gray-800";
904
+ fontSize: number;
905
+ fontWeight: 500;
906
+ shadow: "small";
907
+ theme: {
908
+ dark: {
909
+ bgColor: "gray-800";
910
+ borderColor: "gray-700";
911
+ color: "gray-200";
912
+ };
913
+ };
448
914
  };
449
915
  children: {
450
916
  icon: {
451
917
  styles: {
452
918
  width: number;
453
- color: "gray-400";
919
+ color: "gray-500";
454
920
  cursor: "pointer";
921
+ hover: {
922
+ color: "gray-700";
923
+ };
924
+ theme: {
925
+ dark: {
926
+ color: "gray-400";
927
+ hover: {
928
+ color: "gray-200";
929
+ };
930
+ };
931
+ };
455
932
  };
456
933
  };
457
934
  };
@@ -460,6 +937,64 @@ declare const boxComponents: {
460
937
  };
461
938
  };
462
939
  };
940
+ filter: {
941
+ styles: {};
942
+ children: {
943
+ row: {
944
+ styles: {
945
+ bgColor: "gray-50";
946
+ bb: number;
947
+ borderColor: "gray-200";
948
+ theme: {
949
+ dark: {
950
+ bgColor: "gray-800";
951
+ borderColor: "gray-700";
952
+ };
953
+ };
954
+ };
955
+ };
956
+ cell: {
957
+ styles: {
958
+ display: "flex";
959
+ ai: "center";
960
+ p: number;
961
+ transition: "none";
962
+ };
963
+ variants: {
964
+ isPinned: {
965
+ position: "sticky";
966
+ bgColor: "gray-50";
967
+ zIndex: 2;
968
+ theme: {
969
+ dark: {
970
+ bgColor: "gray-800";
971
+ };
972
+ };
973
+ };
974
+ isFirstLeftPinned: {};
975
+ isLastLeftPinned: {
976
+ br: number;
977
+ borderColor: "gray-200";
978
+ theme: {
979
+ dark: {
980
+ borderColor: "gray-700";
981
+ };
982
+ };
983
+ };
984
+ isFirstRightPinned: {
985
+ bl: number;
986
+ borderColor: "gray-200";
987
+ theme: {
988
+ dark: {
989
+ borderColor: "gray-700";
990
+ };
991
+ };
992
+ };
993
+ isLastRightPinned: {};
994
+ };
995
+ };
996
+ };
997
+ };
463
998
  header: {
464
999
  styles: {
465
1000
  position: "sticky";
@@ -467,7 +1002,12 @@ declare const boxComponents: {
467
1002
  width: "max-content";
468
1003
  minWidth: "fit";
469
1004
  zIndex: 1;
470
- bgColor: "gray-200";
1005
+ bgColor: "gray-50";
1006
+ theme: {
1007
+ dark: {
1008
+ bgColor: "gray-800";
1009
+ };
1010
+ };
471
1011
  };
472
1012
  variants: {
473
1013
  isResizeMode: {
@@ -477,30 +1017,70 @@ declare const boxComponents: {
477
1017
  children: {
478
1018
  cell: {
479
1019
  styles: {
480
- borderColor: "gray-400";
1020
+ borderColor: "gray-200";
481
1021
  bb: number;
482
1022
  minHeight: number;
483
1023
  position: "relative";
484
1024
  transition: "none";
1025
+ fontSize: number;
1026
+ fontWeight: 600;
1027
+ color: "gray-800";
1028
+ py: number;
1029
+ theme: {
1030
+ dark: {
1031
+ borderColor: "gray-700";
1032
+ color: "gray-200";
1033
+ };
1034
+ };
485
1035
  };
486
1036
  variants: {
487
- isRowNumber: {};
488
- isRowSelection: {};
489
1037
  isPinned: {
490
1038
  position: "sticky";
491
1039
  zIndex: 2;
492
- bgColor: "gray-200";
1040
+ bgColor: "gray-50";
1041
+ theme: {
1042
+ dark: {
1043
+ bgColor: "gray-800";
1044
+ };
1045
+ };
493
1046
  };
494
1047
  isFirstLeftPinned: {};
495
1048
  isLastLeftPinned: {
496
1049
  br: number;
1050
+ borderColor: "gray-200";
1051
+ theme: {
1052
+ dark: {
1053
+ borderColor: "gray-700";
1054
+ };
1055
+ };
497
1056
  };
498
1057
  isFirstRightPinned: {
499
1058
  bl: number;
1059
+ borderColor: "gray-200";
1060
+ theme: {
1061
+ dark: {
1062
+ borderColor: "gray-700";
1063
+ };
1064
+ };
500
1065
  };
501
1066
  isLastRightPinned: {};
502
1067
  isSortable: {
503
1068
  cursor: "pointer";
1069
+ hover: {
1070
+ bgColor: "gray-100";
1071
+ };
1072
+ theme: {
1073
+ dark: {
1074
+ hover: {
1075
+ bgColor: "gray-800";
1076
+ };
1077
+ };
1078
+ };
1079
+ };
1080
+ isRowSelected: {};
1081
+ isRowSelection: {};
1082
+ isRowNumber: {
1083
+ jc: "center";
504
1084
  };
505
1085
  };
506
1086
  children: {
@@ -517,10 +1097,18 @@ declare const boxComponents: {
517
1097
  jc: "center";
518
1098
  ai: "center";
519
1099
  transition: "none";
520
- bgColor: "gray-200";
1100
+ color: "gray-600";
521
1101
  hover: {
522
1102
  bgColor: "gray-300";
523
1103
  };
1104
+ theme: {
1105
+ dark: {
1106
+ color: "gray-400";
1107
+ hover: {
1108
+ bgColor: "gray-700";
1109
+ };
1110
+ };
1111
+ };
524
1112
  };
525
1113
  children: {
526
1114
  icon: {
@@ -529,21 +1117,22 @@ declare const boxComponents: {
529
1117
  tooltip: {
530
1118
  styles: {
531
1119
  bgColor: "white";
1120
+ color: "gray-900";
532
1121
  width: number;
533
1122
  b: number;
534
1123
  borderColor: "gray-300";
535
1124
  borderRadius: number;
536
1125
  display: "flex";
537
1126
  d: "column";
538
- mt: number;
539
1127
  py: number;
540
1128
  overflow: "hidden";
541
- translateX: number;
542
1129
  shadow: "medium";
543
- };
544
- variants: {
545
- openLeft: {
546
- translateX: number;
1130
+ theme: {
1131
+ dark: {
1132
+ bgColor: "gray-800";
1133
+ borderColor: "gray-700";
1134
+ color: "gray-100";
1135
+ };
547
1136
  };
548
1137
  };
549
1138
  children: {
@@ -554,8 +1143,17 @@ declare const boxComponents: {
554
1143
  gap: number;
555
1144
  p: number;
556
1145
  cursor: "pointer";
1146
+ color: "gray-900";
557
1147
  hover: {
558
- bgColor: "gray-200";
1148
+ bgColor: "violet-50";
1149
+ };
1150
+ theme: {
1151
+ dark: {
1152
+ color: "gray-100";
1153
+ hover: {
1154
+ bgColor: "gray-700";
1155
+ };
1156
+ };
559
1157
  };
560
1158
  };
561
1159
  children: {
@@ -563,6 +1161,23 @@ declare const boxComponents: {
563
1161
  styles: {
564
1162
  width: number;
565
1163
  color: "violet-950";
1164
+ theme: {
1165
+ dark: {
1166
+ color: "violet-300";
1167
+ };
1168
+ };
1169
+ };
1170
+ };
1171
+ separator: {
1172
+ styles: {
1173
+ bb: number;
1174
+ my: number;
1175
+ borderColor: "gray-300";
1176
+ theme: {
1177
+ dark: {
1178
+ borderColor: "gray-700";
1179
+ };
1180
+ };
566
1181
  };
567
1182
  };
568
1183
  };
@@ -587,46 +1202,90 @@ declare const boxComponents: {
587
1202
  };
588
1203
  };
589
1204
  };
590
- cell: {
591
- styles: {
592
- bb: number;
593
- borderColor: "gray-400";
594
- transition: "none";
595
- ai: "center";
596
- hoverGroup: {
597
- 'grid-row': {
598
- bgColor: "gray-200";
1205
+ body: {
1206
+ styles: {};
1207
+ children: {
1208
+ cell: {
1209
+ styles: {
1210
+ bb: number;
1211
+ borderColor: "gray-200";
1212
+ transition: "none";
1213
+ ai: "center";
1214
+ hoverGroup: {
1215
+ 'grid-row': {
1216
+ bgColor: "gray-100";
1217
+ };
1218
+ };
1219
+ theme: {
1220
+ dark: {
1221
+ borderColor: "gray-800";
1222
+ hoverGroup: {
1223
+ 'grid-row': {
1224
+ bgColor: "gray-700";
1225
+ };
1226
+ };
1227
+ };
1228
+ };
1229
+ };
1230
+ variants: {
1231
+ isPinned: {
1232
+ position: "sticky";
1233
+ bgColor: "white";
1234
+ zIndex: 1;
1235
+ theme: {
1236
+ dark: {
1237
+ bgColor: "gray-900";
1238
+ };
1239
+ };
1240
+ };
1241
+ isFirstLeftPinned: {};
1242
+ isLastLeftPinned: {
1243
+ br: number;
1244
+ borderColor: "gray-200";
1245
+ theme: {
1246
+ dark: {
1247
+ borderColor: "gray-800";
1248
+ };
1249
+ };
1250
+ };
1251
+ isFirstRightPinned: {
1252
+ bl: number;
1253
+ borderColor: "gray-200";
1254
+ theme: {
1255
+ dark: {
1256
+ borderColor: "gray-800";
1257
+ };
1258
+ };
1259
+ };
1260
+ isLastRightPinned: {};
1261
+ isRowNumber: {
1262
+ jc: "right";
1263
+ };
1264
+ isRowSelection: {};
1265
+ isRowSelected: {};
599
1266
  };
600
1267
  };
601
1268
  };
602
- variants: {
603
- isRowNumber: {
604
- bgColor: "gray-200";
605
- jc: "right";
606
- };
607
- isRowSelection: {};
608
- isPinned: {
609
- position: "sticky";
610
- bgColor: "gray-100";
611
- zIndex: 1;
612
- };
613
- isFirstLeftPinned: {};
614
- isLastLeftPinned: {
615
- br: number;
616
- };
617
- isFirstRightPinned: {
618
- bl: number;
619
- };
620
- isLastRightPinned: {};
621
- };
622
1269
  };
623
1270
  bottomBar: {
624
1271
  styles: {
625
- p: number;
626
- bgColor: "gray-200";
1272
+ py: number;
1273
+ px: number;
1274
+ lineHeight: number;
1275
+ bgColor: "gray-50";
627
1276
  bt: number;
628
- borderColor: "gray-400";
1277
+ borderColor: "gray-200";
629
1278
  gap: number;
1279
+ ai: "center";
1280
+ fontSize: number;
1281
+ color: "gray-800";
1282
+ theme: {
1283
+ dark: {
1284
+ bgColor: "gray-800";
1285
+ borderColor: "gray-700";
1286
+ color: "gray-200";
1287
+ };
1288
+ };
630
1289
  };
631
1290
  };
632
1291
  };