@cronocode/react-box 3.1.3 → 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.
@@ -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";
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";
82
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,28 +1017,65 @@ 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
1037
  isPinned: {
488
1038
  position: "sticky";
489
1039
  zIndex: 2;
490
- bgColor: "gray-200";
1040
+ bgColor: "gray-50";
1041
+ theme: {
1042
+ dark: {
1043
+ bgColor: "gray-800";
1044
+ };
1045
+ };
491
1046
  };
492
1047
  isFirstLeftPinned: {};
493
1048
  isLastLeftPinned: {
494
1049
  br: number;
1050
+ borderColor: "gray-200";
1051
+ theme: {
1052
+ dark: {
1053
+ borderColor: "gray-700";
1054
+ };
1055
+ };
495
1056
  };
496
1057
  isFirstRightPinned: {
497
1058
  bl: number;
1059
+ borderColor: "gray-200";
1060
+ theme: {
1061
+ dark: {
1062
+ borderColor: "gray-700";
1063
+ };
1064
+ };
498
1065
  };
499
1066
  isLastRightPinned: {};
500
1067
  isSortable: {
501
1068
  cursor: "pointer";
1069
+ hover: {
1070
+ bgColor: "gray-100";
1071
+ };
1072
+ theme: {
1073
+ dark: {
1074
+ hover: {
1075
+ bgColor: "gray-800";
1076
+ };
1077
+ };
1078
+ };
502
1079
  };
503
1080
  isRowSelected: {};
504
1081
  isRowSelection: {};
@@ -520,9 +1097,18 @@ declare const boxComponents: {
520
1097
  jc: "center";
521
1098
  ai: "center";
522
1099
  transition: "none";
1100
+ color: "gray-600";
523
1101
  hover: {
524
1102
  bgColor: "gray-300";
525
1103
  };
1104
+ theme: {
1105
+ dark: {
1106
+ color: "gray-400";
1107
+ hover: {
1108
+ bgColor: "gray-700";
1109
+ };
1110
+ };
1111
+ };
526
1112
  };
527
1113
  children: {
528
1114
  icon: {
@@ -531,21 +1117,22 @@ declare const boxComponents: {
531
1117
  tooltip: {
532
1118
  styles: {
533
1119
  bgColor: "white";
1120
+ color: "gray-900";
534
1121
  width: number;
535
1122
  b: number;
536
1123
  borderColor: "gray-300";
537
1124
  borderRadius: number;
538
1125
  display: "flex";
539
1126
  d: "column";
540
- mt: number;
541
1127
  py: number;
542
1128
  overflow: "hidden";
543
- translateX: number;
544
1129
  shadow: "medium";
545
- };
546
- variants: {
547
- openLeft: {
548
- translateX: number;
1130
+ theme: {
1131
+ dark: {
1132
+ bgColor: "gray-800";
1133
+ borderColor: "gray-700";
1134
+ color: "gray-100";
1135
+ };
549
1136
  };
550
1137
  };
551
1138
  children: {
@@ -556,8 +1143,17 @@ declare const boxComponents: {
556
1143
  gap: number;
557
1144
  p: number;
558
1145
  cursor: "pointer";
1146
+ color: "gray-900";
559
1147
  hover: {
560
- bgColor: "gray-200";
1148
+ bgColor: "violet-50";
1149
+ };
1150
+ theme: {
1151
+ dark: {
1152
+ color: "gray-100";
1153
+ hover: {
1154
+ bgColor: "gray-700";
1155
+ };
1156
+ };
561
1157
  };
562
1158
  };
563
1159
  children: {
@@ -565,6 +1161,23 @@ declare const boxComponents: {
565
1161
  styles: {
566
1162
  width: number;
567
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
+ };
568
1181
  };
569
1182
  };
570
1183
  };
@@ -595,31 +1208,57 @@ declare const boxComponents: {
595
1208
  cell: {
596
1209
  styles: {
597
1210
  bb: number;
598
- borderColor: "gray-400";
1211
+ borderColor: "gray-200";
599
1212
  transition: "none";
600
1213
  ai: "center";
601
1214
  hoverGroup: {
602
1215
  'grid-row': {
603
- bgColor: "gray-200";
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
+ };
604
1227
  };
605
1228
  };
606
1229
  };
607
1230
  variants: {
608
1231
  isPinned: {
609
1232
  position: "sticky";
610
- bgColor: "gray-100";
1233
+ bgColor: "white";
611
1234
  zIndex: 1;
1235
+ theme: {
1236
+ dark: {
1237
+ bgColor: "gray-900";
1238
+ };
1239
+ };
612
1240
  };
613
1241
  isFirstLeftPinned: {};
614
1242
  isLastLeftPinned: {
615
1243
  br: number;
1244
+ borderColor: "gray-200";
1245
+ theme: {
1246
+ dark: {
1247
+ borderColor: "gray-800";
1248
+ };
1249
+ };
616
1250
  };
617
1251
  isFirstRightPinned: {
618
1252
  bl: number;
1253
+ borderColor: "gray-200";
1254
+ theme: {
1255
+ dark: {
1256
+ borderColor: "gray-800";
1257
+ };
1258
+ };
619
1259
  };
620
1260
  isLastRightPinned: {};
621
1261
  isRowNumber: {
622
- bgColor: "gray-200";
623
1262
  jc: "right";
624
1263
  };
625
1264
  isRowSelection: {};
@@ -630,11 +1269,23 @@ declare const boxComponents: {
630
1269
  };
631
1270
  bottomBar: {
632
1271
  styles: {
633
- p: number;
634
- bgColor: "gray-200";
1272
+ py: number;
1273
+ px: number;
1274
+ lineHeight: number;
1275
+ bgColor: "gray-50";
635
1276
  bt: number;
636
- borderColor: "gray-400";
1277
+ borderColor: "gray-200";
637
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
+ };
638
1289
  };
639
1290
  };
640
1291
  };