@bitrise/bitkit-v2 0.3.201 → 0.3.203

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 (41) hide show
  1. package/dist/components/BitkitCombobox/BitkitCombobox.d.ts +6 -4
  2. package/dist/components/BitkitCombobox/BitkitCombobox.js +13 -14
  3. package/dist/components/BitkitCombobox/BitkitCombobox.js.map +1 -1
  4. package/dist/components/BitkitMultiselect/BitkitMultiselect.d.ts +20 -0
  5. package/dist/components/BitkitMultiselect/BitkitMultiselect.js +183 -0
  6. package/dist/components/BitkitMultiselect/BitkitMultiselect.js.map +1 -0
  7. package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.d.ts +17 -0
  8. package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.js +66 -0
  9. package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.js.map +1 -0
  10. package/dist/components/BitkitNativeSelect/BitkitNativeSelect.js +1 -1
  11. package/dist/components/BitkitNativeSelect/BitkitNativeSelect.js.map +1 -1
  12. package/dist/components/BitkitSelect/BitkitSelect.d.ts +2 -3
  13. package/dist/components/BitkitSelect/BitkitSelect.js +12 -6
  14. package/dist/components/BitkitSelect/BitkitSelect.js.map +1 -1
  15. package/dist/components/BitkitSelectMenu/BitkitSelectMenu.d.ts +16 -7
  16. package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js +63 -71
  17. package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js.map +1 -1
  18. package/dist/components/BitkitSelectMenu/SelectMenuShell.d.ts +29 -0
  19. package/dist/components/BitkitSelectMenu/SelectMenuShell.js +115 -0
  20. package/dist/components/BitkitSelectMenu/SelectMenuShell.js.map +1 -0
  21. package/dist/components/index.d.ts +2 -0
  22. package/dist/main.js +5 -3
  23. package/dist/theme/common/ComboboxAndSelect.common.js +0 -7
  24. package/dist/theme/common/ComboboxAndSelect.common.js.map +1 -1
  25. package/dist/theme/slot-recipes/Combobox.recipe.d.ts +1 -1
  26. package/dist/theme/slot-recipes/Multiselect.recipe.d.ts +48 -0
  27. package/dist/theme/slot-recipes/Multiselect.recipe.js +150 -0
  28. package/dist/theme/slot-recipes/Multiselect.recipe.js.map +1 -0
  29. package/dist/theme/slot-recipes/SectionHeading.recipe.d.ts +1 -1
  30. package/dist/theme/slot-recipes/Select.recipe.js +191 -18
  31. package/dist/theme/slot-recipes/Select.recipe.js.map +1 -1
  32. package/dist/theme/slot-recipes/Sidebar.recipe.d.ts +1 -1
  33. package/dist/theme/slot-recipes/TagsInput.recipe.d.ts +1 -1
  34. package/dist/theme/slot-recipes/index.js +2 -0
  35. package/dist/theme/slot-recipes/index.js.map +1 -1
  36. package/dist/utilities/AssetSelectChevron.js +0 -1
  37. package/dist/utilities/AssetSelectChevron.js.map +1 -1
  38. package/package.json +1 -1
  39. package/dist/theme/slot-recipes/DatePickerSelect.recipe.d.ts +0 -27
  40. package/dist/theme/slot-recipes/Select.recipe.d.ts +0 -21
  41. package/dist/theme/slot-recipes/index.d.ts +0 -2044
package/dist/theme/slot-recipes/index.d.ts DELETED
@@ -1,2044 +0,0 @@
1
- declare const slotRecipes: {
2
- accordion: import('@chakra-ui/react').SlotRecipeDefinition<"icon" | "suffix" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText", import('@chakra-ui/react').SlotRecipeVariantRecord<"icon" | "suffix" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText">>;
3
- actionBar: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "separator" | "positioner" | "selectionTrigger" | "closeTrigger", {
4
- size: {
5
- md: {
6
- content: {
7
- padding: "12";
8
- paddingInlineStart: "16";
9
- gap: "12";
10
- };
11
- };
12
- sm: {
13
- content: {
14
- padding: "8";
15
- paddingInlineStart: "12";
16
- gap: "8";
17
- };
18
- };
19
- xs: {
20
- content: {
21
- padding: "8";
22
- paddingInlineStart: "12";
23
- gap: "8";
24
- };
25
- };
26
- };
27
- }>;
28
- alert: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
29
- variant: {
30
- [k: string]: {
31
- indicator: {
32
- color: string;
33
- };
34
- root: {
35
- color: string;
36
- border: string;
37
- background: string;
38
- } | {
39
- color: string;
40
- backgroundColor: string;
41
- borderColor: string;
42
- } | {
43
- color: string;
44
- backgroundColor: string;
45
- borderColor: string;
46
- } | {
47
- color: string;
48
- backgroundColor: string;
49
- borderColor: string;
50
- } | {
51
- color: string;
52
- backgroundColor: string;
53
- borderColor: string;
54
- } | {
55
- color: string;
56
- backgroundColor: string;
57
- borderColor: string;
58
- };
59
- };
60
- };
61
- }>;
62
- avatar: import('@chakra-ui/react').SlotRecipeDefinition<"image" | "badge" | "icon" | "root" | "fallback" | "badgeContainer", {
63
- size: {
64
- '24': {
65
- root: {
66
- width: number;
67
- height: number;
68
- borderRadius: number;
69
- };
70
- image: {
71
- borderRadius: number;
72
- };
73
- fallback: {
74
- textStyle: "comp/avatar/24";
75
- borderRadius: number;
76
- };
77
- icon: {
78
- width: number;
79
- height: number;
80
- };
81
- badgeContainer: {
82
- display: "none";
83
- };
84
- };
85
- '32': {
86
- root: {
87
- width: number;
88
- height: number;
89
- borderRadius: number;
90
- };
91
- image: {
92
- borderRadius: number;
93
- };
94
- fallback: {
95
- textStyle: "comp/avatar/32";
96
- borderRadius: number;
97
- };
98
- icon: {
99
- width: number;
100
- height: number;
101
- };
102
- badgeContainer: {
103
- width: number;
104
- height: number;
105
- bottom: number;
106
- right: number;
107
- borderRadius: number;
108
- };
109
- };
110
- '40': {
111
- root: {
112
- width: number;
113
- height: number;
114
- borderRadius: number;
115
- };
116
- image: {
117
- borderRadius: number;
118
- };
119
- fallback: {
120
- textStyle: "comp/avatar/40";
121
- borderRadius: number;
122
- };
123
- icon: {
124
- width: number;
125
- height: number;
126
- };
127
- badgeContainer: {
128
- width: number;
129
- height: number;
130
- bottom: number;
131
- right: number;
132
- borderRadius: number;
133
- };
134
- };
135
- '48': {
136
- root: {
137
- width: number;
138
- height: number;
139
- borderRadius: "10";
140
- };
141
- image: {
142
- borderRadius: "10";
143
- };
144
- fallback: {
145
- textStyle: "comp/avatar/48";
146
- borderRadius: "10";
147
- };
148
- icon: {
149
- width: number;
150
- height: number;
151
- };
152
- badgeContainer: {
153
- width: number;
154
- height: number;
155
- bottom: number;
156
- right: number;
157
- borderRadius: "50%";
158
- };
159
- };
160
- '64': {
161
- root: {
162
- width: number;
163
- height: number;
164
- borderRadius: number;
165
- };
166
- image: {
167
- borderRadius: number;
168
- };
169
- fallback: {
170
- textStyle: "comp/avatar/64";
171
- borderRadius: number;
172
- };
173
- icon: {
174
- width: number;
175
- height: number;
176
- };
177
- badgeContainer: {
178
- width: number;
179
- height: number;
180
- bottom: number;
181
- right: number;
182
- borderRadius: "50%";
183
- };
184
- };
185
- '128': {
186
- root: {
187
- width: number;
188
- height: number;
189
- borderRadius: number;
190
- };
191
- image: {
192
- borderRadius: number;
193
- };
194
- fallback: {
195
- textStyle: "comp/avatar/128";
196
- borderRadius: number;
197
- };
198
- icon: {
199
- width: number;
200
- height: number;
201
- };
202
- badgeContainer: {
203
- display: "none";
204
- };
205
- };
206
- };
207
- variant: {
208
- circle: {
209
- root: {
210
- borderRadius: "50%";
211
- };
212
- image: {
213
- borderRadius: "50%";
214
- };
215
- fallback: {
216
- borderRadius: "50%";
217
- };
218
- };
219
- rounded: {};
220
- };
221
- }>;
222
- breadcrumb: import('@chakra-ui/react').SlotRecipeDefinition<"link" | "separator" | "ellipsis" | "list" | "root" | "item" | "currentLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"link" | "separator" | "ellipsis" | "list" | "root" | "item" | "currentLink">>;
223
- card: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "root" | "description", {
224
- elevation: {
225
- true: {
226
- root: {
227
- borderColor: "border/minimal";
228
- boxShadow: "elevation/sm";
229
- };
230
- };
231
- false: {
232
- root: {
233
- borderColor: "border/regular";
234
- };
235
- };
236
- };
237
- paddingSize: {
238
- sm: {
239
- body: {
240
- padding: "16";
241
- };
242
- };
243
- md: {
244
- body: {
245
- paddingInline: "24";
246
- paddingBlock: "16";
247
- };
248
- };
249
- lg: {
250
- body: {
251
- padding: "24";
252
- };
253
- };
254
- };
255
- }>;
256
- checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "group" | "control", {
257
- size: {
258
- md: {
259
- control: {
260
- width: "20";
261
- height: "20";
262
- '& > svg': {
263
- width: "20";
264
- height: "20";
265
- };
266
- };
267
- label: {
268
- textStyle: "body/md/regular";
269
- };
270
- };
271
- lg: {
272
- control: {
273
- width: "24";
274
- height: "24";
275
- '& > svg': {
276
- width: "24";
277
- height: "24";
278
- };
279
- };
280
- label: {
281
- textStyle: "body/lg/regular";
282
- };
283
- };
284
- };
285
- }>;
286
- codeSnippet: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "copyButton" | "copyButtonWrapper" | "showMoreContainer" | "showMoreGradient" | "showMoreButton", {
287
- variant: {
288
- inline: {
289
- root: {
290
- alignItems: "center";
291
- borderRadius: "2";
292
- color: "text/body";
293
- display: "inline-flex";
294
- paddingBlock: "2";
295
- paddingInline: "6";
296
- whiteSpace: "nowrap";
297
- };
298
- };
299
- single: {
300
- root: {
301
- alignItems: "center";
302
- borderRadius: "4";
303
- display: "flex";
304
- height: "40";
305
- isolation: "isolate";
306
- overflow: "hidden";
307
- whiteSpace: "nowrap";
308
- };
309
- content: {
310
- alignItems: "center";
311
- display: "flex";
312
- height: "40";
313
- overflow: "hidden";
314
- paddingInlineStart: "16";
315
- position: "relative";
316
- _after: {
317
- background: "linear-gradient(to left, var(--colors-background-secondary), transparent)";
318
- content: "\"\"";
319
- height: "40";
320
- pointerEvents: "none";
321
- position: "absolute";
322
- right: number;
323
- top: number;
324
- width: "8";
325
- };
326
- };
327
- copyButton: {
328
- flexShrink: "0";
329
- padding: "12";
330
- };
331
- };
332
- multi: {
333
- root: {
334
- borderRadius: "4";
335
- display: "flex";
336
- flexDirection: "column";
337
- padding: "16";
338
- position: "relative";
339
- };
340
- content: {
341
- color: "text/body";
342
- overflowY: "auto";
343
- transition: "max-height 0.3s ease";
344
- whiteSpace: "pre-wrap";
345
- };
346
- copyButton: {
347
- borderRadius: "4";
348
- overflow: "hidden";
349
- padding: "8";
350
- };
351
- copyButtonWrapper: {
352
- background: "background/secondary";
353
- padding: "4";
354
- position: "absolute";
355
- right: number;
356
- top: number;
357
- };
358
- showMoreContainer: {
359
- alignItems: "center";
360
- display: "flex";
361
- justifyContent: "flex-end";
362
- };
363
- showMoreGradient: {
364
- background: "linear-gradient(to top, var(--colors-background-secondary) 33%, transparent)";
365
- borderBottomRadius: "4";
366
- bottom: number;
367
- height: "40";
368
- left: number;
369
- pointerEvents: "none";
370
- position: "absolute";
371
- right: number;
372
- };
373
- showMoreButton: {
374
- alignItems: "center";
375
- background: "background/secondary";
376
- borderRadius: "4";
377
- color: "text/secondary";
378
- cursor: "pointer";
379
- display: "flex";
380
- fontFamily: "body";
381
- gap: "4";
382
- justifyContent: "center";
383
- minWidth: "64";
384
- paddingBlock: "8";
385
- paddingInline: "12";
386
- position: "relative";
387
- textStyle: "comp/button/md";
388
- _hover: {
389
- background: "background/hover";
390
- color: "text/primary";
391
- _active: {
392
- background: "background/active";
393
- color: "text/primary";
394
- overflow: "hidden";
395
- };
396
- };
397
- _active: {
398
- background: "background/active";
399
- color: "text/primary";
400
- overflow: "hidden";
401
- };
402
- _focusVisible: {
403
- outlineOffset: "-3px";
404
- };
405
- };
406
- };
407
- };
408
- size: {
409
- md: {
410
- root: {
411
- textStyle: "code/md";
412
- };
413
- content: {
414
- textStyle: "code/md";
415
- };
416
- };
417
- lg: {
418
- root: {
419
- textStyle: "code/lg";
420
- };
421
- content: {
422
- textStyle: "code/lg";
423
- };
424
- };
425
- };
426
- interactive: {
427
- true: {};
428
- false: {};
429
- };
430
- hasShowMore: {
431
- true: {};
432
- false: {};
433
- };
434
- isExpanded: {
435
- true: {};
436
- false: {};
437
- };
438
- }>;
439
- collapsible: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "trigger" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "root" | "trigger" | "indicator">>;
440
- combobox: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "clearTrigger" | "control" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "empty" | "emptyHelperText", {
441
- size: {
442
- md: {
443
- input: import('@chakra-ui/react').SystemStyleObject;
444
- };
445
- lg: {
446
- input: import('@chakra-ui/react').SystemStyleObject;
447
- };
448
- };
449
- }>;
450
- datePicker: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "table" | "view" | "root" | "trigger" | "positioner" | "clearTrigger" | "control" | "monthSelect" | "nextTrigger" | "presetTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect" | "valueText" | "months", {
451
- layout: {
452
- '1-month': {
453
- content: {
454
- width: "17.5rem";
455
- };
456
- };
457
- '2-month': {
458
- content: {
459
- width: "38.5rem";
460
- };
461
- };
462
- };
463
- showOutsideDays: {
464
- false: {
465
- tableCellTrigger: {
466
- '&[data-outside-range]': {
467
- visibility: "hidden";
468
- };
469
- };
470
- };
471
- true: {
472
- tableCellTrigger: {
473
- '&[data-outside-range]': {
474
- visibility: "visible";
475
- };
476
- };
477
- };
478
- };
479
- device: {
480
- mobile: {
481
- content: {
482
- boxShadow: "none";
483
- paddingBlock: "16";
484
- paddingInline: "16";
485
- };
486
- };
487
- };
488
- }>;
489
- datePickerSelect: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "clearTrigger" | "control" | "valueText" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup", {
490
- size: {
491
- md: {
492
- trigger: {
493
- paddingBlock: "6";
494
- textStyle?: "body/md/regular" | undefined;
495
- };
496
- indicator: {
497
- _icon: {
498
- width: "16";
499
- height: "16";
500
- };
501
- };
502
- searchInput?: {
503
- paddingBlock: "12";
504
- textStyle: "body/md/regular";
505
- '--input-height': string;
506
- } | undefined;
507
- createItem?: {
508
- color: "text/primary";
509
- paddingBlock: "16";
510
- textStyle: "body/md/regular";
511
- } | undefined;
512
- };
513
- };
514
- }>;
515
- dialog: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "scrollBody" | "scrollGradient" | "scrollButton" | "backdrop", {
516
- scrollBehavior: {
517
- inside: {
518
- body: {
519
- overflowY: "auto";
520
- _last: {
521
- paddingBlockEnd: number;
522
- };
523
- };
524
- content: {
525
- maxHeight: "calc(100dvh - 96px)";
526
- overflow: "hidden";
527
- };
528
- };
529
- outside: {};
530
- };
531
- size: {
532
- lg: {
533
- content: {
534
- width: string;
535
- };
536
- };
537
- md: {
538
- content: {
539
- width: string;
540
- };
541
- };
542
- sm: {
543
- content: {
544
- width: string;
545
- };
546
- };
547
- };
548
- variant: {
549
- overflowContent: {
550
- content: {
551
- maxHeight: "calc(100dvh - 48px)";
552
- overflow: "hidden";
553
- };
554
- header: {
555
- gap: "8";
556
- paddingBlockEnd: "8";
557
- paddingBlockStart: "16";
558
- paddingInline: "16";
559
- };
560
- title: {
561
- paddingInlineEnd: "32";
562
- textStyle: "heading/h4";
563
- };
564
- body: {
565
- overflowY: "auto";
566
- paddingBlockEnd: "8";
567
- paddingInline: "16";
568
- _last: {
569
- paddingBlockEnd: number;
570
- };
571
- };
572
- scrollBody: {
573
- _last: {
574
- paddingBlockEnd: "16";
575
- };
576
- };
577
- footer: {
578
- paddingBlockEnd: "16";
579
- paddingBlockStart: number;
580
- paddingInline: "16";
581
- };
582
- closeTrigger: {
583
- insetEnd: "12";
584
- top: "12";
585
- };
586
- scrollGradient: {
587
- bottom: "16";
588
- };
589
- scrollButton: {
590
- bottom: "8";
591
- };
592
- };
593
- };
594
- }>;
595
- draggableCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "handle", {
596
- isDragging: {
597
- true: {
598
- root: {
599
- borderColor: "border/strong";
600
- boxShadow: "elevation/lg";
601
- cursor: "grabbing";
602
- };
603
- handle: {
604
- color: "icon/secondary";
605
- };
606
- };
607
- };
608
- isDropTarget: {
609
- true: {
610
- root: {
611
- background: "background/secondary";
612
- borderColor: "border/strong";
613
- borderStyle: "dashed";
614
- boxShadow: "none";
615
- };
616
- handle: {
617
- visibility: "hidden";
618
- };
619
- content: {
620
- visibility: "hidden";
621
- };
622
- };
623
- };
624
- isFullCardDrag: {
625
- true: {
626
- root: {
627
- cursor: "grab";
628
- _hover: {
629
- borderColor: "border/regular";
630
- _active: {
631
- borderColor: "border/strong";
632
- };
633
- };
634
- _active: {
635
- borderColor: "border/strong";
636
- };
637
- };
638
- handle: {
639
- pointerEvents: "none";
640
- };
641
- content: {
642
- paddingInlineStart: number;
643
- };
644
- };
645
- false: {
646
- root: {
647
- _hover: {
648
- borderColor: "border/regular";
649
- };
650
- };
651
- handle: {
652
- appearance: "none";
653
- background: "transparent";
654
- border: "none";
655
- cursor: "grab";
656
- focusVisibleRing: "none";
657
- _focusVisible: {
658
- boxShadow: "inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color)";
659
- };
660
- _hover: {
661
- background: "background/hover";
662
- color: "icon/secondary";
663
- _active: {
664
- background: "background/active";
665
- };
666
- };
667
- _active: {
668
- background: "background/active";
669
- };
670
- };
671
- content: {
672
- paddingInlineStart: "8";
673
- };
674
- };
675
- };
676
- }>;
677
- drawer: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "backdrop", {
678
- variant: {
679
- docked: {
680
- closeTrigger: {
681
- insetEnd: string;
682
- top: "12";
683
- };
684
- content: {
685
- width: {
686
- base: "100vw";
687
- tablet: string;
688
- };
689
- };
690
- };
691
- floating: {
692
- body: {
693
- paddingInline: "24";
694
- };
695
- closeTrigger: {
696
- insetEnd: "24";
697
- top: "24";
698
- };
699
- positioner: {
700
- padding: "32";
701
- };
702
- content: {
703
- borderRadius: "12";
704
- boxShadow: "elevation/lg";
705
- maxWidth: string;
706
- };
707
- header: {
708
- paddingBlockEnd: "16";
709
- paddingBlockStart: "24";
710
- paddingInline: "24";
711
- };
712
- footer: {
713
- borderBlockStartColor: "transparent";
714
- borderBlockStartWidth: "0";
715
- paddingBlockEnd: "24";
716
- paddingBlockStart: "32";
717
- paddingInline: "24";
718
- };
719
- title: {
720
- color: "text/primary";
721
- textStyle: "comp/dialog/title";
722
- };
723
- };
724
- };
725
- }>;
726
- emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
727
- colorScheme: {
728
- white: {
729
- root: {
730
- backgroundColor: "background/primary";
731
- };
732
- };
733
- grey: {
734
- root: {
735
- backgroundColor: "background/secondary";
736
- };
737
- };
738
- };
739
- }>;
740
- expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "secdText" | "description", {
741
- size: {
742
- md: {
743
- header: {
744
- textStyle: "body/md/regular";
745
- paddingX: "16";
746
- paddingY: "12";
747
- };
748
- secdText: {
749
- textStyle: "body/sm/regular";
750
- };
751
- };
752
- lg: {
753
- header: {
754
- textStyle: "body/lg/regular";
755
- padding: "16";
756
- };
757
- secdText: {
758
- textStyle: "body/md/regular";
759
- };
760
- };
761
- };
762
- }>;
763
- field: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "select" | "textarea" | "root" | "helperText" | "errorText" | "requiredIndicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"input" | "label" | "select" | "textarea" | "root" | "helperText" | "errorText" | "requiredIndicator">>;
764
- groupHeading: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "separator" | "icon" | "root" | "titleBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "separator" | "icon" | "root" | "titleBlock">>;
765
- fieldset: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "legend" | "root" | "helperText" | "errorText", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "legend" | "root" | "helperText" | "errorText">>;
766
- fileUpload: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemContent" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "dropzoneContent" | "fileText", {
767
- variant: {
768
- image: {
769
- root: {
770
- height: string;
771
- };
772
- };
773
- };
774
- }>;
775
- imageCropper: import('@chakra-ui/react').SlotRecipeDefinition<"grid" | "image" | "root" | "handle" | "viewport" | "selection", import('@chakra-ui/react').SlotRecipeVariantRecord<"grid" | "image" | "root" | "handle" | "viewport" | "selection">>;
776
- inlineLoading: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root", {
777
- size: {
778
- sm: {
779
- label: {
780
- textStyle: "body/sm/regular";
781
- };
782
- };
783
- md: {
784
- label: {
785
- textStyle: "body/md/regular";
786
- };
787
- };
788
- lg: {
789
- label: {
790
- textStyle: "body/lg/regular";
791
- };
792
- };
793
- };
794
- status: {
795
- error: {
796
- root: {
797
- color: "text/body";
798
- };
799
- };
800
- loading: {
801
- root: {
802
- color: "text/secondary";
803
- };
804
- };
805
- success: {
806
- root: {
807
- color: "text/body";
808
- };
809
- };
810
- };
811
- }>;
812
- list: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "item" | "indicator", {
813
- size: {
814
- lg: {
815
- item: {
816
- textStyle: "body/lg/regular";
817
- };
818
- indicator: {
819
- height: "24";
820
- width: "24";
821
- };
822
- };
823
- md: {
824
- item: {
825
- textStyle: "body/md/regular";
826
- };
827
- indicator: {
828
- height: "20";
829
- width: "20";
830
- };
831
- };
832
- };
833
- }>;
834
- markdown: import('@chakra-ui/react').SlotRecipeDefinition<"blockquote" | "root", {
835
- size: {
836
- sm: {
837
- root: {
838
- textStyle: "body/sm/regular";
839
- };
840
- };
841
- md: {
842
- root: {
843
- textStyle: "body/md/regular";
844
- };
845
- };
846
- lg: {
847
- root: {
848
- textStyle: "body/lg/regular";
849
- };
850
- };
851
- };
852
- }>;
853
- markdownCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "root" | "description" | "iconBar" | "gradient" | "footerButtons", {
854
- status: {
855
- info: {
856
- iconBar: {
857
- backgroundColor: "background/secondary";
858
- borderColor: "border/regular";
859
- color: "icon/secondary";
860
- };
861
- root: {
862
- borderColor: "border/regular";
863
- };
864
- };
865
- success: {
866
- iconBar: {
867
- backgroundColor: "status/success/bg";
868
- borderColor: "status/success/border";
869
- color: "status/success/icon";
870
- };
871
- root: {
872
- borderColor: "status/success/border";
873
- };
874
- };
875
- warning: {
876
- iconBar: {
877
- backgroundColor: "status/warning/bg";
878
- borderColor: "status/warning/border";
879
- color: "status/warning/icon";
880
- };
881
- root: {
882
- borderColor: "status/warning/border";
883
- };
884
- };
885
- critical: {
886
- iconBar: {
887
- backgroundColor: "status/critical/bg";
888
- borderColor: "status/critical/border";
889
- color: "status/critical/icon";
890
- };
891
- root: {
892
- borderColor: "status/critical/border";
893
- };
894
- };
895
- };
896
- }>;
897
- menu: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "separator" | "item" | "itemIndicator" | "trigger" | "arrow" | "arrowTip" | "positioner" | "indicator" | "itemText" | "itemGroup" | "itemGroupLabel" | "contextTrigger" | "triggerItem" | "itemCommand" | "itemHelper", {
898
- size: {
899
- lg: {
900
- item: {
901
- paddingY: "12";
902
- textStyle: "body/lg/regular";
903
- };
904
- };
905
- md: {
906
- item: {
907
- _icon: {
908
- marginTop: "2";
909
- };
910
- paddingY: "8";
911
- textStyle: "body/md/regular";
912
- };
913
- };
914
- };
915
- }>;
916
- noteCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "iconBar" | "message" | "iconWrapper" | "messageBlock" | "messageSolo" | "actionArea", {
917
- status: {
918
- ai: {
919
- iconBar: {
920
- background: "{colors.ai.background.minimal-vertical}";
921
- color: string;
922
- };
923
- messageSolo: {
924
- color: string;
925
- };
926
- root: {
927
- backgroundColor: "transparent";
928
- border: "1px solid transparent";
929
- background: "linear-gradient({colors.background.primary}, {colors.background.primary}) padding-box, {colors.status.ai.border} border-box";
930
- };
931
- title: {
932
- color: string;
933
- };
934
- };
935
- critical: {
936
- iconBar: {
937
- backgroundColor: string;
938
- color: string;
939
- };
940
- messageSolo: {
941
- color: string;
942
- };
943
- root: {
944
- borderColor: string;
945
- };
946
- title: {
947
- color: string;
948
- };
949
- };
950
- info: {
951
- iconBar: {
952
- backgroundColor: string;
953
- color: string;
954
- };
955
- messageSolo: {
956
- color: string;
957
- };
958
- root: {
959
- borderColor: string;
960
- };
961
- title: {
962
- color: string;
963
- };
964
- };
965
- progress: {
966
- iconBar: {
967
- backgroundColor: string;
968
- color: string;
969
- };
970
- messageSolo: {
971
- color: string;
972
- };
973
- root: {
974
- borderColor: string;
975
- };
976
- title: {
977
- color: string;
978
- };
979
- };
980
- success: {
981
- iconBar: {
982
- backgroundColor: string;
983
- color: string;
984
- };
985
- messageSolo: {
986
- color: string;
987
- };
988
- root: {
989
- borderColor: string;
990
- };
991
- title: {
992
- color: string;
993
- };
994
- };
995
- warning: {
996
- iconBar: {
997
- backgroundColor: string;
998
- color: string;
999
- };
1000
- messageSolo: {
1001
- color: string;
1002
- };
1003
- root: {
1004
- borderColor: string;
1005
- };
1006
- title: {
1007
- color: string;
1008
- };
1009
- };
1010
- };
1011
- }>;
1012
- nativeSelect: import('@chakra-ui/react').SlotRecipeDefinition<"field" | "root" | "indicator" | "statusIcon", {
1013
- size: {
1014
- md: {
1015
- field: {
1016
- paddingInline: string;
1017
- paddingBlock: string;
1018
- textStyle: "body/md/regular";
1019
- };
1020
- };
1021
- lg: {
1022
- field: {
1023
- paddingInline: string;
1024
- paddingBlock: string;
1025
- textStyle: "body/lg/regular";
1026
- };
1027
- };
1028
- };
1029
- }>;
1030
- numberInput: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber", {
1031
- size: {
1032
- md: {
1033
- input: import('@chakra-ui/react').SystemStyleObject | undefined;
1034
- control: {
1035
- '--stepper-width': string;
1036
- };
1037
- };
1038
- lg: {
1039
- input: import('@chakra-ui/react').SystemStyleObject | undefined;
1040
- control: {
1041
- '--stepper-width': string;
1042
- };
1043
- };
1044
- };
1045
- }>;
1046
- overflowContent: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "action" | "preview", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "action" | "preview">>;
1047
- pageFooter: import('@chakra-ui/react').SlotRecipeDefinition<"link" | "status" | "root" | "statusLabel" | "statusDot" | "copyright" | "copyrightText" | "links", {
1048
- colorScheme: {
1049
- gray: {
1050
- root: {
1051
- background: "background/secondary";
1052
- };
1053
- status: {
1054
- background: "background/tertiary";
1055
- };
1056
- };
1057
- white: {
1058
- root: {
1059
- background: "background/primary";
1060
- };
1061
- status: {
1062
- background: "background/secondary";
1063
- };
1064
- };
1065
- };
1066
- size: {
1067
- compact: {
1068
- root: {
1069
- height: {
1070
- tablet: "32";
1071
- };
1072
- };
1073
- };
1074
- default: {
1075
- root: {
1076
- height: {
1077
- tablet: "64";
1078
- };
1079
- };
1080
- };
1081
- };
1082
- variant: {
1083
- default: {
1084
- root: {
1085
- paddingInlineEnd: {
1086
- base: "16";
1087
- tablet: string;
1088
- };
1089
- position: {
1090
- tablet: "relative";
1091
- };
1092
- };
1093
- copyright: {
1094
- insetInlineStart: {
1095
- tablet: "50%";
1096
- };
1097
- position: {
1098
- tablet: "absolute";
1099
- };
1100
- top: {
1101
- tablet: "50%";
1102
- };
1103
- transform: {
1104
- tablet: "translate(-50%, -50%)";
1105
- };
1106
- };
1107
- links: {
1108
- borderBlockEnd: {
1109
- base: "1px solid {colors.border.minimal}";
1110
- tablet: "none";
1111
- };
1112
- borderBlockStart: {
1113
- base: "1px solid {colors.border.minimal}";
1114
- tablet: "none";
1115
- };
1116
- paddingBlock: {
1117
- base: "16";
1118
- tablet: "0";
1119
- };
1120
- };
1121
- };
1122
- public: {
1123
- root: {
1124
- paddingInlineEnd: {
1125
- base: "16";
1126
- tablet: "40";
1127
- };
1128
- };
1129
- links: {
1130
- borderBlockEnd: {
1131
- base: "1px solid {colors.border.minimal}";
1132
- tablet: "none";
1133
- };
1134
- paddingBlockEnd: {
1135
- base: "16";
1136
- tablet: "0";
1137
- };
1138
- };
1139
- };
1140
- };
1141
- }>;
1142
- pagination: import('@chakra-ui/react').SlotRecipeDefinition<"text" | "root" | "itemsBlock" | "itemsSelect" | "pageBlock" | "pageSelect", {
1143
- variant: {
1144
- card: {
1145
- root: {
1146
- paddingInline: "24";
1147
- paddingBlock: "8";
1148
- };
1149
- text: {
1150
- color: "text/tertiary";
1151
- };
1152
- };
1153
- page: {
1154
- root: {
1155
- paddingInline: "24";
1156
- paddingBlock: "16";
1157
- borderTopWidth: string;
1158
- borderTopStyle: "solid";
1159
- borderTopColor: "border/regular";
1160
- };
1161
- text: {
1162
- color: "text/secondary";
1163
- };
1164
- };
1165
- table: {
1166
- root: {
1167
- paddingInline: "16";
1168
- paddingBlock: "8";
1169
- };
1170
- text: {
1171
- color: "text/secondary";
1172
- };
1173
- };
1174
- };
1175
- }>;
1176
- paginationLoadMore: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "counter", {
1177
- size: {
1178
- md: {
1179
- root: {
1180
- gap: "24";
1181
- minHeight: string;
1182
- };
1183
- counter: {
1184
- textStyle: "body/md/regular";
1185
- '&:has(+ *)': {
1186
- paddingInlineEnd: "24";
1187
- };
1188
- };
1189
- };
1190
- sm: {
1191
- root: {
1192
- gap: "16";
1193
- minHeight: "48";
1194
- };
1195
- counter: {
1196
- textStyle: "body/md/regular";
1197
- '&:has(+ *)': {
1198
- paddingInlineEnd: "16";
1199
- };
1200
- };
1201
- };
1202
- xs: {
1203
- root: {
1204
- gap: "12";
1205
- minHeight: "32";
1206
- };
1207
- counter: {
1208
- textStyle: "body/sm/regular";
1209
- '&:has(+ *)': {
1210
- paddingInlineEnd: "12";
1211
- };
1212
- };
1213
- };
1214
- };
1215
- }>;
1216
- radioGroup: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemIndicator" | "indicator" | "itemText" | "itemControl" | "itemAddon", {
1217
- orientation: {
1218
- horizontal: {
1219
- root: {
1220
- flexDirection: "row";
1221
- gap: "24";
1222
- };
1223
- };
1224
- vertical: {
1225
- root: {
1226
- alignItems: "flex-start";
1227
- flexDirection: "column";
1228
- gap: "12";
1229
- };
1230
- };
1231
- };
1232
- size: {
1233
- md: {
1234
- itemControl: {
1235
- width: "20";
1236
- height: "20";
1237
- };
1238
- itemText: {
1239
- textStyle: "body/md/regular";
1240
- };
1241
- };
1242
- lg: {
1243
- itemControl: {
1244
- width: "24";
1245
- height: "24";
1246
- };
1247
- itemText: {
1248
- textStyle: "body/lg/regular";
1249
- };
1250
- };
1251
- };
1252
- }>;
1253
- ribbon: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "textBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "root" | "textBlock">>;
1254
- sectionHeading: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "icon" | "root" | "helperText" | "titleBlock" | "contentBlock" | "helperBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "icon" | "root" | "helperText" | "titleBlock" | "contentBlock" | "helperBlock">>;
1255
- labeledData: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "value" | "root" | "limit" | "helpText", {
1256
- size: {
1257
- lg: {
1258
- label: {
1259
- color: "text/primary";
1260
- };
1261
- value: {
1262
- textStyle: "comp/data/sm";
1263
- };
1264
- limit: {
1265
- textStyle: "body/md/regular";
1266
- };
1267
- };
1268
- '2xl': {
1269
- label: {
1270
- color: "text/secondary";
1271
- };
1272
- value: {
1273
- textStyle: "comp/data/md";
1274
- };
1275
- limit: {
1276
- textStyle: "body/xl/regular";
1277
- };
1278
- };
1279
- '3xl': {
1280
- label: {
1281
- color: "text/secondary";
1282
- };
1283
- value: {
1284
- textStyle: "comp/data/lg";
1285
- };
1286
- limit: {
1287
- textStyle: "body/2xl/regular";
1288
- };
1289
- };
1290
- };
1291
- }>;
1292
- segmentGroup: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", {
1293
- fullWidth: {
1294
- true: {
1295
- root: {
1296
- display: "flex";
1297
- width: "100%";
1298
- };
1299
- item: {
1300
- flex: "1";
1301
- };
1302
- };
1303
- };
1304
- size: {
1305
- lg: {
1306
- item: {
1307
- paddingBlock: "12";
1308
- textStyle: "body/lg/regular";
1309
- };
1310
- };
1311
- md: {
1312
- item: {
1313
- paddingBlock: "8";
1314
- };
1315
- };
1316
- sm: {
1317
- item: {
1318
- paddingBlock: "6";
1319
- };
1320
- };
1321
- };
1322
- }>;
1323
- sidebar: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "title" | "root" | "item" | "suffixIcon" | "divider" | "itemIcon" | "itemLabel" | "project" | "projectLabel" | "projectValue" | "selectionMarker" | "titleWithBack", {
1324
- selected: {
1325
- true: {
1326
- item: {
1327
- background: "background/selected";
1328
- _hover: {
1329
- background: "background/selected-hover";
1330
- };
1331
- };
1332
- itemIcon: {
1333
- color: "icon/interactive";
1334
- };
1335
- itemLabel: {
1336
- textStyle: "body/lg/semibold";
1337
- };
1338
- selectionMarker: {
1339
- display: "block";
1340
- };
1341
- };
1342
- };
1343
- }>;
1344
- select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "clearTrigger" | "control" | "valueText" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput" | "createItemContainer" | "createItem", {
1345
- size: {
1346
- lg: Record<string, import('@chakra-ui/react').SystemStyleObject>;
1347
- md: {
1348
- searchInput: {
1349
- paddingBlock: "12";
1350
- textStyle: "body/md/regular";
1351
- '--input-height': string;
1352
- };
1353
- createItem: {
1354
- color: "text/primary";
1355
- paddingBlock: "16";
1356
- textStyle: "body/md/regular";
1357
- };
1358
- trigger: {
1359
- textStyle: "body/md/regular";
1360
- paddingBlock: string;
1361
- };
1362
- };
1363
- };
1364
- }>;
1365
- settingsCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "footer" | "root" | "statusIcon" | "statusText" | "contentBody" | "contentActions" | "statusRow" | "statusDescription" | "statusHelperText", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "footer" | "root" | "statusIcon" | "statusText" | "contentBody" | "contentActions" | "statusRow" | "statusDescription" | "statusHelperText">>;
1366
- splitButton: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "action", {
1367
- variant: {
1368
- primary: {
1369
- trigger: {
1370
- borderWidth: "0";
1371
- borderInlineStartWidth: string;
1372
- borderInlineStartColor: "border/on-contrast";
1373
- _hover: {
1374
- borderInlineStartColor: "border/on-contrast";
1375
- _active: {
1376
- borderInlineStartColor: "border/on-contrast";
1377
- };
1378
- };
1379
- _active: {
1380
- borderInlineStartColor: "border/on-contrast";
1381
- };
1382
- _disabled: {
1383
- borderInlineStartColor: "border/on-contrast";
1384
- };
1385
- _open: {
1386
- backgroundColor: "button/primary/bg-active";
1387
- };
1388
- };
1389
- };
1390
- secondary: {
1391
- trigger: {
1392
- _open: {
1393
- backgroundColor: "button/secondary/bg-active";
1394
- borderColor: "button/secondary/border-active";
1395
- color: "button/secondary/fg-active";
1396
- };
1397
- };
1398
- };
1399
- };
1400
- }>;
1401
- stat: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "value" | "root" | "helpText", {
1402
- size: {
1403
- lg: {
1404
- label: {
1405
- color: "text/primary";
1406
- };
1407
- value: {
1408
- textStyle: "comp/data/sm";
1409
- };
1410
- };
1411
- '2xl': {
1412
- label: {
1413
- color: "text/secondary";
1414
- };
1415
- value: {
1416
- textStyle: "comp/data/md";
1417
- };
1418
- };
1419
- '3xl': {
1420
- label: {
1421
- color: "text/secondary";
1422
- };
1423
- value: {
1424
- textStyle: "comp/data/lg";
1425
- };
1426
- };
1427
- };
1428
- variant: {
1429
- default: {};
1430
- compact: {
1431
- root: {
1432
- display: "inline-flex";
1433
- alignItems: "flex-end";
1434
- };
1435
- value: {
1436
- textStyle: "body/md/regular";
1437
- };
1438
- helpText: {
1439
- textStyle: "body/sm/regular";
1440
- };
1441
- };
1442
- };
1443
- }>;
1444
- stepsCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "root" | "description" | "titleGroup", import('@chakra-ui/react').SlotRecipeVariantRecord<"body" | "footer" | "header" | "title" | "root" | "description" | "titleGroup">>;
1445
- steps: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "progress" | "title" | "separator" | "list" | "root" | "item" | "trigger" | "description" | "indicator" | "nextTrigger" | "prevTrigger", {
1446
- orientation: {
1447
- horizontal: {
1448
- list: {
1449
- flexDirection: "row";
1450
- alignItems: "center";
1451
- };
1452
- item: {
1453
- alignItems: "center";
1454
- borderTopWidth: "2px";
1455
- paddingBlock: "16";
1456
- paddingInlineEnd: "24";
1457
- "&[data-step-status=inProgress]": {
1458
- _before: {
1459
- content: "\"\"";
1460
- position: "absolute";
1461
- insetBlockStart: "-2px";
1462
- insetInlineStart: number;
1463
- width: "50%";
1464
- height: "2";
1465
- bg: "border/selected";
1466
- };
1467
- };
1468
- };
1469
- };
1470
- vertical: {
1471
- list: {
1472
- flexDirection: "column";
1473
- alignItems: "stretch";
1474
- };
1475
- item: {
1476
- alignItems: "flex-start";
1477
- borderInlineStartWidth: "2px";
1478
- paddingInlineStart: "12";
1479
- paddingInlineEnd: "24";
1480
- paddingBlockEnd: "24";
1481
- '&:last-of-type': {
1482
- paddingBlockEnd: number;
1483
- };
1484
- "&[data-step-status=inProgress]": {
1485
- _before: {
1486
- content: "\"\"";
1487
- position: "absolute";
1488
- insetBlockStart: number;
1489
- insetInlineStart: "-2px";
1490
- width: "2";
1491
- height: "50%";
1492
- bg: "border/selected";
1493
- };
1494
- };
1495
- };
1496
- trigger: {
1497
- flexDirection: "column";
1498
- alignItems: "flex-start";
1499
- gap: "2";
1500
- paddingBlockStart: "4";
1501
- };
1502
- };
1503
- };
1504
- }>;
1505
- switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
1506
- size: {
1507
- sm: {
1508
- root: {
1509
- '--switch-width': string;
1510
- '--switch-height': string;
1511
- '--switch-indicator-font-size': string;
1512
- };
1513
- control: {
1514
- borderRadius: "8";
1515
- };
1516
- label: {
1517
- textStyle: "body/sm/regular";
1518
- };
1519
- };
1520
- md: {
1521
- root: {
1522
- '--switch-width': string;
1523
- '--switch-height': string;
1524
- '--switch-indicator-font-size': string;
1525
- };
1526
- control: {
1527
- borderRadius: "12";
1528
- };
1529
- label: {
1530
- textStyle: "body/lg/regular";
1531
- };
1532
- };
1533
- };
1534
- }>;
1535
- table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "columnHeader", {
1536
- variant: {
1537
- default: {
1538
- root: {
1539
- borderColor: "border/minimal";
1540
- borderRadius: "4";
1541
- borderStyle: "solid";
1542
- borderWidth: "1px";
1543
- overflow: "hidden";
1544
- };
1545
- header: {
1546
- '& :where(th)': {
1547
- backgroundColor: "background/tertiary";
1548
- };
1549
- };
1550
- columnHeader: {
1551
- borderBottomColor: "border/minimal";
1552
- paddingBlock: "12";
1553
- paddingInline: "16";
1554
- };
1555
- cell: {
1556
- borderBottomColor: "border/minimal";
1557
- paddingInline: "16";
1558
- };
1559
- footer: {
1560
- borderTopColor: "border/minimal";
1561
- };
1562
- };
1563
- borderless: {
1564
- columnHeader: {
1565
- borderBottomColor: "border/regular";
1566
- padding: "12";
1567
- };
1568
- cell: {
1569
- borderBottomColor: "border/regular";
1570
- paddingInline: "12";
1571
- };
1572
- footer: {
1573
- borderTopColor: "border/regular";
1574
- };
1575
- };
1576
- };
1577
- layout: {
1578
- table: {
1579
- root: {
1580
- borderCollapse: "separate";
1581
- borderSpacing: "0";
1582
- };
1583
- caption: {
1584
- marginBlockEnd: "24";
1585
- };
1586
- columnHeader: {
1587
- borderBottomStyle: "solid";
1588
- borderBottomWidth: "1px";
1589
- color: "text/primary";
1590
- fontWeight: "bold";
1591
- textAlign: "start";
1592
- textStyle: "heading/h5";
1593
- verticalAlign: "middle";
1594
- };
1595
- cell: {
1596
- borderBottomStyle: "solid";
1597
- borderBottomWidth: "1px";
1598
- paddingBlock: "20";
1599
- verticalAlign: "middle";
1600
- };
1601
- body: {
1602
- '& :where(tr)': {
1603
- _hover: {
1604
- backgroundColor: "background/hover";
1605
- };
1606
- };
1607
- '& :where(tr:last-child) td': {
1608
- borderBottomWidth: "0";
1609
- };
1610
- };
1611
- };
1612
- stacked: {
1613
- root: {
1614
- display: "block";
1615
- };
1616
- caption: {
1617
- display: "block";
1618
- padding: "16";
1619
- backgroundColor: "background/tertiary";
1620
- borderBottomColor: "border/minimal";
1621
- borderBottomStyle: "solid";
1622
- borderBottomWidth: "1px";
1623
- };
1624
- header: {
1625
- borderWidth: "0";
1626
- clip: "rect(0, 0, 0, 0)";
1627
- height: "1";
1628
- margin: "-1px";
1629
- overflow: "hidden";
1630
- padding: number;
1631
- position: "absolute";
1632
- whiteSpace: "nowrap";
1633
- width: "1";
1634
- };
1635
- body: {
1636
- display: "block";
1637
- };
1638
- row: {
1639
- borderBottomColor: "border/minimal";
1640
- borderBottomStyle: "solid";
1641
- borderBottomWidth: "1px";
1642
- display: "block";
1643
- paddingBlock: "12";
1644
- '&:last-child': {
1645
- borderBottomWidth: "0";
1646
- };
1647
- };
1648
- cell: {
1649
- alignItems: "center";
1650
- display: "flex";
1651
- minHeight: "48";
1652
- paddingInline: "16";
1653
- _before: {
1654
- alignSelf: "center";
1655
- color: "text/primary";
1656
- content: "attr(data-label)";
1657
- flexShrink: number;
1658
- fontWeight: "semibold";
1659
- paddingInlineEnd: "16";
1660
- width: "96";
1661
- };
1662
- };
1663
- footer: {
1664
- display: "block";
1665
- };
1666
- };
1667
- };
1668
- }>;
1669
- tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "list" | "root" | "trigger" | "indicator" | "contentGroup", {
1670
- variant: {
1671
- line: {
1672
- list: {
1673
- borderBlockEnd: "1px solid";
1674
- borderColor: "border/regular";
1675
- };
1676
- trigger: {
1677
- bottom: "-1px";
1678
- display: "flex";
1679
- alignItems: "center";
1680
- gap: "8";
1681
- color: "text/secondary";
1682
- paddingBlockStart: "12";
1683
- paddingBlockEnd: string;
1684
- borderBlockEnd: "2px solid transparent";
1685
- _selected: {
1686
- color: "text/primary";
1687
- };
1688
- _hover: {
1689
- borderColor: "border/hover";
1690
- color: "text/primary";
1691
- };
1692
- _disabled: {
1693
- color: "text/disabled";
1694
- };
1695
- };
1696
- };
1697
- contained: {
1698
- trigger: {
1699
- paddingBlockStart: string;
1700
- paddingBlockEnd: "12";
1701
- backgroundColor: "background/tertiary";
1702
- color: "text/secondary";
1703
- borderBlockStart: "2px solid transparent";
1704
- _hover: {
1705
- backgroundColor: "background/active";
1706
- };
1707
- _disabled: {
1708
- backgroundColor: "sys/neutral/moderate";
1709
- color: "text/on-disabled";
1710
- };
1711
- _selected: {
1712
- backgroundColor: "background/primary";
1713
- color: "text/selected";
1714
- _hover: {
1715
- backgroundColor: "background/primary";
1716
- };
1717
- };
1718
- };
1719
- };
1720
- };
1721
- }>;
1722
- tag: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "startElement" | "endElement", {
1723
- disabled: {
1724
- true: {
1725
- root: {
1726
- backgroundColor: "background/disabled";
1727
- borderColor: "border/disabled";
1728
- color: "text/on-disabled";
1729
- };
1730
- };
1731
- false: {};
1732
- };
1733
- size: {
1734
- sm: {
1735
- root: {
1736
- height: "24";
1737
- paddingInline: "4";
1738
- '&:has(button)': {
1739
- paddingInlineEnd: "1";
1740
- };
1741
- };
1742
- label: {
1743
- paddingInline: "4";
1744
- textStyle: "comp/tag/sm";
1745
- };
1746
- endElement: {
1747
- width: "20";
1748
- height: "20";
1749
- };
1750
- };
1751
- md: {
1752
- root: {
1753
- height: "32";
1754
- paddingInline: "6";
1755
- '&:has(button)': {
1756
- paddingInlineEnd: string;
1757
- };
1758
- };
1759
- startElement: {
1760
- marginInlineEnd: "-2px";
1761
- };
1762
- label: {
1763
- paddingInline: "6";
1764
- textStyle: "comp/tag/md";
1765
- };
1766
- };
1767
- };
1768
- }>;
1769
- tagsInput: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "item" | "clearTrigger" | "control" | "itemText" | "itemDeleteTrigger" | "itemPreview" | "itemInput" | "tagsBlock" | "suffixBlock", {
1770
- size: {
1771
- md: {
1772
- control: {
1773
- paddingInline: "8";
1774
- };
1775
- tagsBlock: {
1776
- paddingBlock: "8";
1777
- };
1778
- suffixBlock: {
1779
- height: "40";
1780
- };
1781
- input: {
1782
- height: "24";
1783
- textStyle: "body/md/regular";
1784
- };
1785
- };
1786
- lg: {
1787
- control: {
1788
- paddingInlineStart: "12";
1789
- paddingInlineEnd: "8";
1790
- };
1791
- tagsBlock: {
1792
- paddingBlock: "12";
1793
- };
1794
- suffixBlock: {
1795
- height: "48";
1796
- };
1797
- input: {
1798
- textStyle: "body/lg/regular";
1799
- };
1800
- };
1801
- };
1802
- }>;
1803
- toast: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "icon" | "root" | "closeTrigger" | "description" | "indicator" | "timestamp" | "actionTrigger", {
1804
- variant: {
1805
- [k: string]: {
1806
- icon: {
1807
- color: string;
1808
- };
1809
- root: {
1810
- color: string;
1811
- border: string;
1812
- background: string;
1813
- } | {
1814
- color: string;
1815
- backgroundColor: string;
1816
- borderColor: string;
1817
- } | {
1818
- color: string;
1819
- backgroundColor: string;
1820
- borderColor: string;
1821
- } | {
1822
- color: string;
1823
- backgroundColor: string;
1824
- borderColor: string;
1825
- } | {
1826
- color: string;
1827
- backgroundColor: string;
1828
- borderColor: string;
1829
- } | {
1830
- color: string;
1831
- backgroundColor: string;
1832
- borderColor: string;
1833
- };
1834
- };
1835
- };
1836
- }>;
1837
- tooltip: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", {
1838
- variant: {
1839
- dark: {
1840
- content: {
1841
- '--tooltip-bg': "colors.background.contrast";
1842
- color: "text/on-contrast";
1843
- };
1844
- };
1845
- light: {
1846
- content: {
1847
- '--tooltip-bg': "colors.background.tertiary";
1848
- color: "text/primary";
1849
- };
1850
- };
1851
- };
1852
- paddingSize: {
1853
- sm: {
1854
- content: {
1855
- paddingInline: "8";
1856
- paddingBlock: "4";
1857
- borderRadius: "4";
1858
- };
1859
- };
1860
- md: {
1861
- content: {
1862
- paddingInline: "12";
1863
- paddingBlock: "8";
1864
- borderRadius: "8";
1865
- };
1866
- };
1867
- lg: {
1868
- content: {
1869
- padding: "16";
1870
- borderRadius: "8";
1871
- };
1872
- };
1873
- };
1874
- textStyle: {
1875
- 'sm/regular': {
1876
- content: {
1877
- textStyle: "body/sm/regular";
1878
- };
1879
- };
1880
- 'sm/semibold': {
1881
- content: {
1882
- textStyle: "body/sm/semibold";
1883
- };
1884
- };
1885
- 'md/regular': {
1886
- content: {
1887
- textStyle: "body/md/regular";
1888
- };
1889
- };
1890
- };
1891
- }>;
1892
- treeView: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "secondaryText" | "root" | "item" | "itemIndicator" | "tree" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
1893
- variant: {
1894
- files: {
1895
- branchControl: {
1896
- borderRadius: "4";
1897
- paddingInlineEnd: "16";
1898
- '& > svg': {
1899
- marginBlockStart: "8";
1900
- };
1901
- '& > .badge': {
1902
- marginBlockStart: "6";
1903
- };
1904
- };
1905
- item: {
1906
- borderRadius: "4";
1907
- paddingInlineEnd: "16";
1908
- '& > svg': {
1909
- marginBlockStart: "8";
1910
- };
1911
- '& > .badge': {
1912
- marginBlockStart: "6";
1913
- };
1914
- };
1915
- branchIndicator: {
1916
- alignItems: "flex-start";
1917
- marginBlockStart: "8";
1918
- alignSelf: "stretch";
1919
- position: "relative";
1920
- _open: {
1921
- '&::after': {
1922
- content: "\"\"";
1923
- position: "absolute";
1924
- insetBlockStart: "16";
1925
- insetBlockEnd: number;
1926
- insetInlineStart: "50%";
1927
- width: "1";
1928
- background: "border/regular";
1929
- };
1930
- };
1931
- };
1932
- branchText: {
1933
- paddingBlock: "6";
1934
- };
1935
- itemText: {
1936
- paddingBlock: "6";
1937
- };
1938
- suffixGroup: {
1939
- height: string;
1940
- '& > span': {
1941
- marginBlockEnd: "-1";
1942
- };
1943
- };
1944
- branchIndentGuide: {
1945
- height: "100%";
1946
- width: "1";
1947
- background: "border/regular";
1948
- position: "absolute";
1949
- insetBlockStart: number;
1950
- '--tree-depth': "calc(var(--depth) - 1)";
1951
- '--tree-indentation-offset': "calc(var(--tree-indentation) * var(--tree-depth))";
1952
- '--tree-offset': "calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset))";
1953
- '--tree-icon-offset': "calc(var(--tree-icon-size) * 0.5 * var(--depth))";
1954
- insetInlineStart: "calc(var(--tree-offset) + var(--tree-icon-offset))";
1955
- zIndex: number;
1956
- };
1957
- };
1958
- navigation: {
1959
- branchControl: {
1960
- borderRadius: number;
1961
- paddingInlineEnd: "16";
1962
- '&::before': {
1963
- content: "\"\"";
1964
- position: "absolute";
1965
- insetBlockStart: number;
1966
- insetInlineStart: "var(--tree-offset)";
1967
- insetInlineEnd: number;
1968
- height: "1";
1969
- background: "border/minimal";
1970
- };
1971
- _selected: {
1972
- '&::after': {
1973
- content: "\"\"";
1974
- position: "absolute";
1975
- insetBlock: number;
1976
- insetInlineEnd: number;
1977
- width: "4";
1978
- background: "border/selected";
1979
- borderRadius: "0 2px 2px 0";
1980
- };
1981
- };
1982
- };
1983
- item: {
1984
- borderRadius: number;
1985
- paddingInlineEnd: "16";
1986
- '&::before': {
1987
- content: "\"\"";
1988
- position: "absolute";
1989
- insetBlockStart: number;
1990
- insetInlineStart: "var(--tree-offset)";
1991
- insetInlineEnd: number;
1992
- height: "1";
1993
- background: "border/minimal";
1994
- };
1995
- '& > svg': {
1996
- marginBlockStart: string;
1997
- };
1998
- _selected: {
1999
- '&::after': {
2000
- content: "\"\"";
2001
- position: "absolute";
2002
- insetBlock: number;
2003
- insetInlineEnd: number;
2004
- width: "4";
2005
- background: "border/selected";
2006
- borderRadius: "0 2px 2px 0";
2007
- };
2008
- };
2009
- };
2010
- branchIndicator: {
2011
- marginBlockStart: "8";
2012
- transformOrigin: "center";
2013
- transitionDuration: "normal";
2014
- transitionProperty: "transform";
2015
- transitionTimingFunction: "default";
2016
- _open: {
2017
- transform: "rotate(90deg)";
2018
- };
2019
- };
2020
- branchText: {
2021
- paddingBlock: "8";
2022
- gap: "4";
2023
- _open: {
2024
- textStyle: "body/md/semibold";
2025
- color: "text/primary";
2026
- };
2027
- };
2028
- itemText: {
2029
- paddingBlock: "8";
2030
- };
2031
- suffixGroup: {
2032
- height: string;
2033
- '& > span': {
2034
- marginBlockEnd: "-1";
2035
- };
2036
- };
2037
- branchIndentGuide: {
2038
- display: "none";
2039
- };
2040
- };
2041
- };
2042
- }>;
2043
- };
2044
- export default slotRecipes;