@cronocode/react-box 3.1.3 → 3.1.7

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";
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,123 @@ 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
- minWidth: number;
420
+ width: "fit-content";
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
+ height: number;
463
+ };
464
+ };
465
+ children: {
253
466
  items: {
254
467
  styles: {
255
468
  display: "flex";
@@ -259,37 +472,65 @@ declare const boxComponents: {
259
472
  b: number;
260
473
  borderRadius: number;
261
474
  position: "relative";
262
- top: number;
263
475
  bgColor: "white";
264
476
  overflow: "auto";
265
477
  maxHeight: number;
266
- borderColor: "violet-300";
267
- color: "violet-950";
478
+ borderColor: "gray-300";
479
+ color: "gray-900";
268
480
  shadow: "medium";
481
+ theme: {
482
+ dark: {
483
+ bgColor: "gray-800";
484
+ borderColor: "gray-700";
485
+ color: "gray-100";
486
+ };
487
+ };
269
488
  };
270
489
  };
271
490
  item: {
272
491
  styles: {
492
+ textWrap: "nowrap";
273
493
  display: "flex";
274
494
  width: "fit";
275
495
  p: number;
276
496
  cursor: "pointer";
277
497
  borderRadius: number;
498
+ lineHeight: number;
278
499
  hover: {
279
500
  bgColor: "gray-100";
280
501
  };
281
502
  focus: {
282
- bgColor: "violet-50";
503
+ bgColor: "indigo-50";
283
504
  };
284
505
  selected: {
285
- bgColor: "violet-50";
506
+ bgColor: "indigo-50";
286
507
  cursor: "default";
287
508
  hover: {
288
- bgColor: "violet-100";
509
+ bgColor: "indigo-100";
510
+ };
511
+ };
512
+ theme: {
513
+ dark: {
514
+ hover: {
515
+ bgColor: "gray-700";
516
+ };
517
+ focus: {
518
+ bgColor: "gray-700";
519
+ };
520
+ selected: {
521
+ bgColor: "indigo-900";
522
+ hover: {
523
+ bgColor: "indigo-800";
524
+ };
525
+ };
289
526
  };
290
527
  };
291
528
  };
292
529
  variants: {
530
+ compact: {
531
+ px: number;
532
+ py: number;
533
+ };
293
534
  multiple: {
294
535
  selected: {
295
536
  cursor: "pointer";
@@ -305,17 +546,37 @@ declare const boxComponents: {
305
546
  cursor: "pointer";
306
547
  lineHeight: number;
307
548
  borderRadius: number;
308
- color: "violet-400";
549
+ color: "gray-500";
309
550
  hover: {
310
- bgColor: "violet-50";
551
+ bgColor: "gray-100";
311
552
  };
312
553
  focus: {
313
- bgColor: "violet-50";
554
+ bgColor: "gray-100";
314
555
  };
315
556
  selected: {
316
- bgColor: "violet-50";
557
+ bgColor: "gray-100";
317
558
  cursor: "default";
318
559
  };
560
+ theme: {
561
+ dark: {
562
+ color: "gray-400";
563
+ hover: {
564
+ bgColor: "gray-700";
565
+ };
566
+ focus: {
567
+ bgColor: "gray-700";
568
+ };
569
+ selected: {
570
+ bgColor: "gray-700";
571
+ };
572
+ };
573
+ };
574
+ };
575
+ variants: {
576
+ compact: {
577
+ px: number;
578
+ py: number;
579
+ };
319
580
  };
320
581
  };
321
582
  selectAll: {
@@ -326,17 +587,37 @@ declare const boxComponents: {
326
587
  cursor: "pointer";
327
588
  lineHeight: number;
328
589
  borderRadius: number;
329
- color: "violet-400";
590
+ color: "gray-500";
330
591
  hover: {
331
- bgColor: "violet-50";
592
+ bgColor: "gray-100";
332
593
  };
333
594
  focus: {
334
- bgColor: "violet-50";
595
+ bgColor: "gray-100";
335
596
  };
336
597
  selected: {
337
- bgColor: "violet-50";
598
+ bgColor: "gray-100";
338
599
  cursor: "default";
339
600
  };
601
+ theme: {
602
+ dark: {
603
+ color: "gray-400";
604
+ hover: {
605
+ bgColor: "gray-700";
606
+ };
607
+ focus: {
608
+ bgColor: "gray-700";
609
+ };
610
+ selected: {
611
+ bgColor: "gray-700";
612
+ };
613
+ };
614
+ };
615
+ };
616
+ variants: {
617
+ compact: {
618
+ px: number;
619
+ py: number;
620
+ };
340
621
  };
341
622
  };
342
623
  emptyItem: {
@@ -347,7 +628,27 @@ declare const boxComponents: {
347
628
  cursor: "default";
348
629
  lineHeight: number;
349
630
  borderRadius: number;
350
- color: "violet-400";
631
+ color: "gray-400";
632
+ theme: {
633
+ dark: {
634
+ color: "gray-500";
635
+ };
636
+ };
637
+ };
638
+ variants: {
639
+ compact: {
640
+ px: number;
641
+ py: number;
642
+ };
643
+ };
644
+ };
645
+ icon: {
646
+ styles: {
647
+ position: "absolute";
648
+ top: number;
649
+ right: number;
650
+ height: "fit";
651
+ px: number;
351
652
  };
352
653
  };
353
654
  };
@@ -359,61 +660,60 @@ declare const boxComponents: {
359
660
  styles: {
360
661
  b: number;
361
662
  bgColor: "white";
362
- borderColor: "gray-400";
663
+ borderColor: "gray-200";
363
664
  overflow: "hidden";
364
665
  borderRadius: number;
666
+ shadow: "large";
667
+ theme: {
668
+ dark: {
669
+ bgColor: "gray-900";
670
+ borderColor: "gray-800";
671
+ };
672
+ };
365
673
  };
366
674
  children: {
367
675
  topBar: {
368
676
  styles: {
369
- p: number;
677
+ py: number;
678
+ px: number;
370
679
  bb: number;
371
- borderColor: "gray-400";
372
- color: "gray-400";
680
+ borderColor: "gray-200";
681
+ color: "gray-800";
373
682
  gap: number;
374
683
  ai: "center";
684
+ bgColor: "gray-50";
685
+ theme: {
686
+ dark: {
687
+ bgColor: "gray-800";
688
+ borderColor: "gray-700";
689
+ color: "gray-200";
690
+ };
691
+ };
375
692
  };
376
693
  children: {
377
- contextMenu: {
378
- clean: true;
694
+ globalFilter: {
379
695
  styles: {
380
- cursor: "pointer";
381
- p: number;
382
- hover: {
383
- bgColor: "gray-200";
384
- borderRadius: number;
385
- };
696
+ display: "flex";
697
+ ai: "center";
698
+ gap: number;
386
699
  };
387
700
  children: {
388
- tooltip: {
701
+ stats: {
389
702
  styles: {
390
- bgColor: "white";
391
- width: number;
392
- b: number;
393
- borderColor: "gray-300";
394
- borderRadius: number;
395
- display: "flex";
396
- d: "column";
397
- mt: number;
703
+ fontSize: number;
704
+ fontWeight: 500;
705
+ px: number;
398
706
  py: number;
399
- translateX: number;
400
- shadow: "medium";
401
- overflow: "auto";
402
- maxHeight: number;
403
- };
404
- children: {
405
- item: {
406
- clean: true;
407
- styles: {
408
- display: "flex";
409
- gap: number;
410
- p: number;
411
- cursor: "pointer";
412
- hover: {
413
- bgColor: "gray-200";
414
- };
707
+ borderRadius: number;
708
+ bgColor: "violet-100";
709
+ color: "violet-700";
710
+ theme: {
711
+ dark: {
712
+ bgColor: "violet-900";
713
+ color: "violet-300";
415
714
  };
416
715
  };
716
+ textWrap: "nowrap";
417
717
  };
418
718
  };
419
719
  };
@@ -426,8 +726,13 @@ declare const boxComponents: {
426
726
  children: {
427
727
  icon: {
428
728
  styles: {
429
- color: "violet-950";
729
+ color: "gray-700";
430
730
  width: number;
731
+ theme: {
732
+ dark: {
733
+ color: "gray-300";
734
+ };
735
+ };
431
736
  };
432
737
  };
433
738
  separator: {
@@ -438,20 +743,41 @@ declare const boxComponents: {
438
743
  gap: number;
439
744
  ai: "center";
440
745
  b: number;
441
- borderColor: "gray-400";
442
- bgColor: "gray-100";
746
+ borderColor: "gray-300";
747
+ bgColor: "white";
443
748
  borderRadius: number;
444
749
  py: number;
445
750
  pl: number;
446
751
  pr: number;
447
- color: "violet-950";
752
+ color: "gray-800";
753
+ fontSize: number;
754
+ fontWeight: 500;
755
+ shadow: "small";
756
+ theme: {
757
+ dark: {
758
+ bgColor: "gray-800";
759
+ borderColor: "gray-700";
760
+ color: "gray-200";
761
+ };
762
+ };
448
763
  };
449
764
  children: {
450
765
  icon: {
451
766
  styles: {
452
767
  width: number;
453
- color: "gray-400";
768
+ color: "gray-500";
454
769
  cursor: "pointer";
770
+ hover: {
771
+ color: "gray-700";
772
+ };
773
+ theme: {
774
+ dark: {
775
+ color: "gray-400";
776
+ hover: {
777
+ color: "gray-200";
778
+ };
779
+ };
780
+ };
455
781
  };
456
782
  };
457
783
  };
@@ -460,6 +786,64 @@ declare const boxComponents: {
460
786
  };
461
787
  };
462
788
  };
789
+ filter: {
790
+ styles: {};
791
+ children: {
792
+ row: {
793
+ styles: {
794
+ bgColor: "gray-50";
795
+ bb: number;
796
+ borderColor: "gray-200";
797
+ theme: {
798
+ dark: {
799
+ bgColor: "gray-800";
800
+ borderColor: "gray-700";
801
+ };
802
+ };
803
+ };
804
+ };
805
+ cell: {
806
+ styles: {
807
+ display: "flex";
808
+ ai: "center";
809
+ p: number;
810
+ transition: "none";
811
+ };
812
+ variants: {
813
+ isPinned: {
814
+ position: "sticky";
815
+ bgColor: "gray-50";
816
+ zIndex: 2;
817
+ theme: {
818
+ dark: {
819
+ bgColor: "gray-800";
820
+ };
821
+ };
822
+ };
823
+ isFirstLeftPinned: {};
824
+ isLastLeftPinned: {
825
+ br: number;
826
+ borderColor: "gray-200";
827
+ theme: {
828
+ dark: {
829
+ borderColor: "gray-700";
830
+ };
831
+ };
832
+ };
833
+ isFirstRightPinned: {
834
+ bl: number;
835
+ borderColor: "gray-200";
836
+ theme: {
837
+ dark: {
838
+ borderColor: "gray-700";
839
+ };
840
+ };
841
+ };
842
+ isLastRightPinned: {};
843
+ };
844
+ };
845
+ };
846
+ };
463
847
  header: {
464
848
  styles: {
465
849
  position: "sticky";
@@ -467,44 +851,84 @@ declare const boxComponents: {
467
851
  width: "max-content";
468
852
  minWidth: "fit";
469
853
  zIndex: 1;
470
- bgColor: "gray-200";
471
- };
472
- variants: {
473
- isResizeMode: {
474
- userSelect: "none";
854
+ bgColor: "gray-50";
855
+ theme: {
856
+ dark: {
857
+ bgColor: "gray-800";
858
+ };
475
859
  };
476
860
  };
477
861
  children: {
478
862
  cell: {
479
863
  styles: {
480
- borderColor: "gray-400";
864
+ borderColor: "gray-200";
481
865
  bb: number;
482
866
  minHeight: number;
483
867
  position: "relative";
484
868
  transition: "none";
869
+ fontSize: number;
870
+ fontWeight: 600;
871
+ color: "gray-800";
872
+ py: number;
873
+ theme: {
874
+ dark: {
875
+ borderColor: "gray-700";
876
+ color: "gray-200";
877
+ };
878
+ };
485
879
  };
486
880
  variants: {
487
881
  isPinned: {
488
882
  position: "sticky";
489
883
  zIndex: 2;
490
- bgColor: "gray-200";
884
+ bgColor: "gray-50";
885
+ theme: {
886
+ dark: {
887
+ bgColor: "gray-800";
888
+ };
889
+ };
491
890
  };
492
891
  isFirstLeftPinned: {};
493
892
  isLastLeftPinned: {
494
893
  br: number;
894
+ borderColor: "gray-200";
895
+ theme: {
896
+ dark: {
897
+ borderColor: "gray-700";
898
+ };
899
+ };
495
900
  };
496
901
  isFirstRightPinned: {
497
902
  bl: number;
903
+ borderColor: "gray-200";
904
+ theme: {
905
+ dark: {
906
+ borderColor: "gray-700";
907
+ };
908
+ };
498
909
  };
499
910
  isLastRightPinned: {};
500
911
  isSortable: {
501
912
  cursor: "pointer";
913
+ hover: {
914
+ bgColor: "gray-100";
915
+ };
916
+ theme: {
917
+ dark: {
918
+ hover: {
919
+ bgColor: "gray-800";
920
+ };
921
+ };
922
+ };
502
923
  };
503
924
  isRowSelected: {};
504
925
  isRowSelection: {};
505
926
  isRowNumber: {
506
927
  jc: "center";
507
928
  };
929
+ isFirstLeaf: {};
930
+ isLastLeaf: {};
931
+ isEmptyCell: {};
508
932
  };
509
933
  children: {
510
934
  contextMenu: {
@@ -520,9 +944,18 @@ declare const boxComponents: {
520
944
  jc: "center";
521
945
  ai: "center";
522
946
  transition: "none";
947
+ color: "gray-600";
523
948
  hover: {
524
949
  bgColor: "gray-300";
525
950
  };
951
+ theme: {
952
+ dark: {
953
+ color: "gray-400";
954
+ hover: {
955
+ bgColor: "gray-700";
956
+ };
957
+ };
958
+ };
526
959
  };
527
960
  children: {
528
961
  icon: {
@@ -531,21 +964,22 @@ declare const boxComponents: {
531
964
  tooltip: {
532
965
  styles: {
533
966
  bgColor: "white";
967
+ color: "gray-900";
534
968
  width: number;
535
969
  b: number;
536
970
  borderColor: "gray-300";
537
971
  borderRadius: number;
538
972
  display: "flex";
539
973
  d: "column";
540
- mt: number;
541
974
  py: number;
542
975
  overflow: "hidden";
543
- translateX: number;
544
976
  shadow: "medium";
545
- };
546
- variants: {
547
- openLeft: {
548
- translateX: number;
977
+ theme: {
978
+ dark: {
979
+ bgColor: "gray-800";
980
+ borderColor: "gray-700";
981
+ color: "gray-100";
982
+ };
549
983
  };
550
984
  };
551
985
  children: {
@@ -556,8 +990,17 @@ declare const boxComponents: {
556
990
  gap: number;
557
991
  p: number;
558
992
  cursor: "pointer";
993
+ color: "gray-900";
559
994
  hover: {
560
- bgColor: "gray-200";
995
+ bgColor: "violet-50";
996
+ };
997
+ theme: {
998
+ dark: {
999
+ color: "gray-100";
1000
+ hover: {
1001
+ bgColor: "gray-700";
1002
+ };
1003
+ };
561
1004
  };
562
1005
  };
563
1006
  children: {
@@ -565,6 +1008,23 @@ declare const boxComponents: {
565
1008
  styles: {
566
1009
  width: number;
567
1010
  color: "violet-950";
1011
+ theme: {
1012
+ dark: {
1013
+ color: "violet-300";
1014
+ };
1015
+ };
1016
+ };
1017
+ };
1018
+ separator: {
1019
+ styles: {
1020
+ bb: number;
1021
+ my: number;
1022
+ borderColor: "gray-300";
1023
+ theme: {
1024
+ dark: {
1025
+ borderColor: "gray-700";
1026
+ };
1027
+ };
568
1028
  };
569
1029
  };
570
1030
  };
@@ -595,46 +1055,87 @@ declare const boxComponents: {
595
1055
  cell: {
596
1056
  styles: {
597
1057
  bb: number;
598
- borderColor: "gray-400";
1058
+ borderColor: "gray-200";
599
1059
  transition: "none";
600
1060
  ai: "center";
601
1061
  hoverGroup: {
602
1062
  'grid-row': {
603
- bgColor: "gray-200";
1063
+ bgColor: "gray-100";
1064
+ };
1065
+ };
1066
+ theme: {
1067
+ dark: {
1068
+ borderColor: "gray-800";
1069
+ hoverGroup: {
1070
+ 'grid-row': {
1071
+ bgColor: "gray-700";
1072
+ };
1073
+ };
604
1074
  };
605
1075
  };
606
1076
  };
607
1077
  variants: {
608
1078
  isPinned: {
609
1079
  position: "sticky";
610
- bgColor: "gray-100";
1080
+ bgColor: "white";
611
1081
  zIndex: 1;
1082
+ theme: {
1083
+ dark: {
1084
+ bgColor: "gray-900";
1085
+ };
1086
+ };
612
1087
  };
613
1088
  isFirstLeftPinned: {};
614
1089
  isLastLeftPinned: {
615
1090
  br: number;
1091
+ borderColor: "gray-200";
1092
+ theme: {
1093
+ dark: {
1094
+ borderColor: "gray-800";
1095
+ };
1096
+ };
616
1097
  };
617
1098
  isFirstRightPinned: {
618
1099
  bl: number;
1100
+ borderColor: "gray-200";
1101
+ theme: {
1102
+ dark: {
1103
+ borderColor: "gray-800";
1104
+ };
1105
+ };
619
1106
  };
620
1107
  isLastRightPinned: {};
621
1108
  isRowNumber: {
622
- bgColor: "gray-200";
623
1109
  jc: "right";
624
1110
  };
625
1111
  isRowSelection: {};
626
1112
  isRowSelected: {};
1113
+ isFirstLeaf: {};
1114
+ isLastLeaf: {};
1115
+ isEmptyCell: {};
627
1116
  };
628
1117
  };
629
1118
  };
630
1119
  };
631
1120
  bottomBar: {
632
1121
  styles: {
633
- p: number;
634
- bgColor: "gray-200";
1122
+ py: number;
1123
+ px: number;
1124
+ lineHeight: number;
1125
+ bgColor: "gray-50";
635
1126
  bt: number;
636
- borderColor: "gray-400";
1127
+ borderColor: "gray-200";
637
1128
  gap: number;
1129
+ ai: "center";
1130
+ fontSize: number;
1131
+ color: "gray-800";
1132
+ theme: {
1133
+ dark: {
1134
+ bgColor: "gray-800";
1135
+ borderColor: "gray-700";
1136
+ color: "gray-200";
1137
+ };
1138
+ };
638
1139
  };
639
1140
  };
640
1141
  };