@bitrise/bitkit-v2 0.3.178 → 0.3.179

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 (19) hide show
  1. package/dist/components/BitkitAlert/BitkitAlert.d.ts +4 -10
  2. package/dist/components/BitkitAlert/BitkitAlert.js +25 -48
  3. package/dist/components/BitkitToast/BitkitToast.d.ts +14 -0
  4. package/dist/components/BitkitToast/BitkitToast.js +21 -0
  5. package/dist/components/BitkitToast/BitkitToaster.d.ts +2 -0
  6. package/dist/components/BitkitToast/BitkitToaster.js +56 -0
  7. package/dist/components/common/notificationMaps.d.ts +10 -0
  8. package/dist/components/common/notificationMaps.js +24 -0
  9. package/dist/components/index.d.ts +1 -0
  10. package/dist/main.js +6 -5
  11. package/dist/providers/BitkitProvider.js +13 -8
  12. package/dist/theme/common/AlertAndToast.common.d.ts +6 -0
  13. package/dist/theme/common/AlertAndToast.common.js +50 -0
  14. package/dist/theme/slot-recipes/Alert.recipe.js +13 -55
  15. package/dist/theme/slot-recipes/Toast.recipe.js +71 -0
  16. package/dist/theme/slot-recipes/index.js +6 -4
  17. package/package.json +2 -2
  18. package/dist/theme/slot-recipes/Alert.recipe.d.ts +0 -65
  19. package/dist/theme/slot-recipes/index.d.ts +0 -1318
package/dist/theme/slot-recipes/index.d.ts DELETED
@@ -1,1318 +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
- ai: {
31
- root: {
32
- border: "1px solid transparent";
33
- background: "{colors.status.ai.bg} padding-box, {colors.status.ai.border} border-box";
34
- color: "status/ai/text";
35
- };
36
- indicator: {
37
- color: "status/ai/icon";
38
- };
39
- };
40
- critical: {
41
- root: {
42
- backgroundColor: "status/critical/bg";
43
- borderColor: "status/critical/border";
44
- color: "status/critical/text";
45
- };
46
- indicator: {
47
- color: "status/critical/icon";
48
- };
49
- };
50
- info: {
51
- root: {
52
- backgroundColor: "status/info/bg";
53
- borderColor: "status/info/border";
54
- color: "status/info/text";
55
- };
56
- indicator: {
57
- color: "status/info/icon";
58
- };
59
- };
60
- progress: {
61
- root: {
62
- backgroundColor: "status/progress/bg";
63
- borderColor: "status/progress/border";
64
- color: "status/progress/text";
65
- };
66
- indicator: {
67
- color: "status/progress/icon";
68
- };
69
- };
70
- success: {
71
- root: {
72
- backgroundColor: "status/success/bg";
73
- borderColor: "status/success/border";
74
- color: "status/success/text";
75
- };
76
- indicator: {
77
- color: "status/success/icon";
78
- };
79
- };
80
- warning: {
81
- root: {
82
- backgroundColor: "status/warning/bg";
83
- borderColor: "status/warning/border";
84
- color: "status/warning/text";
85
- };
86
- indicator: {
87
- color: "status/warning/icon";
88
- };
89
- };
90
- };
91
- }>;
92
- avatar: import('@chakra-ui/react').SlotRecipeDefinition<"image" | "badge" | "icon" | "root" | "fallback" | "badgeContainer", {
93
- size: {
94
- '24': {
95
- root: {
96
- width: number;
97
- height: number;
98
- borderRadius: number;
99
- };
100
- image: {
101
- borderRadius: number;
102
- };
103
- fallback: {
104
- textStyle: "comp/avatar/24";
105
- borderRadius: number;
106
- };
107
- icon: {
108
- width: number;
109
- height: number;
110
- };
111
- badgeContainer: {
112
- display: "none";
113
- };
114
- };
115
- '32': {
116
- root: {
117
- width: number;
118
- height: number;
119
- borderRadius: number;
120
- };
121
- image: {
122
- borderRadius: number;
123
- };
124
- fallback: {
125
- textStyle: "comp/avatar/32";
126
- borderRadius: number;
127
- };
128
- icon: {
129
- width: number;
130
- height: number;
131
- };
132
- badgeContainer: {
133
- width: number;
134
- height: number;
135
- bottom: number;
136
- right: number;
137
- borderRadius: number;
138
- };
139
- };
140
- '40': {
141
- root: {
142
- width: number;
143
- height: number;
144
- borderRadius: number;
145
- };
146
- image: {
147
- borderRadius: number;
148
- };
149
- fallback: {
150
- textStyle: "comp/avatar/40";
151
- borderRadius: number;
152
- };
153
- icon: {
154
- width: number;
155
- height: number;
156
- };
157
- badgeContainer: {
158
- width: number;
159
- height: number;
160
- bottom: number;
161
- right: number;
162
- borderRadius: number;
163
- };
164
- };
165
- '48': {
166
- root: {
167
- width: number;
168
- height: number;
169
- borderRadius: "10";
170
- };
171
- image: {
172
- borderRadius: "10";
173
- };
174
- fallback: {
175
- textStyle: "comp/avatar/48";
176
- borderRadius: "10";
177
- };
178
- icon: {
179
- width: number;
180
- height: number;
181
- };
182
- badgeContainer: {
183
- width: number;
184
- height: number;
185
- bottom: number;
186
- right: number;
187
- borderRadius: "50%";
188
- };
189
- };
190
- '64': {
191
- root: {
192
- width: number;
193
- height: number;
194
- borderRadius: number;
195
- };
196
- image: {
197
- borderRadius: number;
198
- };
199
- fallback: {
200
- textStyle: "comp/avatar/64";
201
- borderRadius: number;
202
- };
203
- icon: {
204
- width: number;
205
- height: number;
206
- };
207
- badgeContainer: {
208
- width: number;
209
- height: number;
210
- bottom: number;
211
- right: number;
212
- borderRadius: "50%";
213
- };
214
- };
215
- '128': {
216
- root: {
217
- width: number;
218
- height: number;
219
- borderRadius: number;
220
- };
221
- image: {
222
- borderRadius: number;
223
- };
224
- fallback: {
225
- textStyle: "comp/avatar/128";
226
- borderRadius: number;
227
- };
228
- icon: {
229
- width: number;
230
- height: number;
231
- };
232
- badgeContainer: {
233
- display: "none";
234
- };
235
- };
236
- };
237
- variant: {
238
- circle: {
239
- root: {
240
- borderRadius: "50%";
241
- };
242
- image: {
243
- borderRadius: "50%";
244
- };
245
- fallback: {
246
- borderRadius: "50%";
247
- };
248
- };
249
- rounded: {};
250
- };
251
- }>;
252
- 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">>;
253
- card: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "root" | "description", {
254
- elevation: {
255
- true: {
256
- root: {
257
- borderColor: "border/minimal";
258
- boxShadow: "elevation/sm";
259
- };
260
- };
261
- false: {
262
- root: {
263
- borderColor: "border/regular";
264
- };
265
- };
266
- };
267
- paddingSize: {
268
- sm: {
269
- body: {
270
- padding: "16";
271
- };
272
- };
273
- md: {
274
- body: {
275
- paddingInline: "24";
276
- paddingBlock: "16";
277
- };
278
- };
279
- lg: {
280
- body: {
281
- padding: "24";
282
- };
283
- };
284
- };
285
- }>;
286
- checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "group" | "control", {
287
- size: {
288
- md: {
289
- control: {
290
- width: "20";
291
- height: "20";
292
- '& > svg': {
293
- width: "20";
294
- height: "20";
295
- };
296
- };
297
- label: {
298
- textStyle: "body/md/regular";
299
- };
300
- };
301
- lg: {
302
- control: {
303
- width: "24";
304
- height: "24";
305
- '& > svg': {
306
- width: "24";
307
- height: "24";
308
- };
309
- };
310
- label: {
311
- textStyle: "body/lg/regular";
312
- };
313
- };
314
- };
315
- }>;
316
- codeSnippet: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "copyButton" | "showMoreContainer" | "showMoreGradient" | "showMoreButton", {
317
- variant: {
318
- inline: {
319
- root: {
320
- alignItems: "center";
321
- borderRadius: "2";
322
- color: "text/body";
323
- display: "inline-flex";
324
- paddingBlock: "2";
325
- paddingInline: "6";
326
- whiteSpace: "nowrap";
327
- };
328
- };
329
- single: {
330
- root: {
331
- alignItems: "center";
332
- borderRadius: "4";
333
- display: "flex";
334
- height: "40";
335
- isolation: "isolate";
336
- overflow: "hidden";
337
- whiteSpace: "nowrap";
338
- };
339
- content: {
340
- alignItems: "center";
341
- display: "flex";
342
- height: "40";
343
- overflow: "hidden";
344
- paddingInlineStart: "16";
345
- position: "relative";
346
- _after: {
347
- background: "linear-gradient(to left, var(--colors-background-secondary), transparent)";
348
- content: "\"\"";
349
- height: "40";
350
- pointerEvents: "none";
351
- position: "absolute";
352
- right: "0";
353
- top: "0";
354
- width: "8";
355
- };
356
- };
357
- copyButton: {
358
- flexShrink: "0";
359
- padding: "12";
360
- };
361
- };
362
- multi: {
363
- root: {
364
- borderRadius: "4";
365
- display: "flex";
366
- flexDirection: "column";
367
- padding: "16";
368
- position: "relative";
369
- };
370
- content: {
371
- color: "text/body";
372
- overflowY: "auto";
373
- transition: "max-height 0.3s ease";
374
- whiteSpace: "pre-wrap";
375
- };
376
- copyButton: {
377
- borderRadius: "4";
378
- overflow: "hidden";
379
- padding: "8";
380
- position: "absolute";
381
- right: number;
382
- top: number;
383
- };
384
- showMoreContainer: {
385
- alignItems: "center";
386
- display: "flex";
387
- justifyContent: "flex-end";
388
- };
389
- showMoreGradient: {
390
- background: "linear-gradient(to top, var(--colors-background-secondary) 33%, transparent)";
391
- borderBottomRadius: "4";
392
- bottom: number;
393
- height: "40";
394
- left: number;
395
- pointerEvents: "none";
396
- position: "absolute";
397
- right: number;
398
- };
399
- showMoreButton: {
400
- alignItems: "center";
401
- background: "background/secondary";
402
- borderRadius: "4";
403
- color: "text/secondary";
404
- cursor: "pointer";
405
- display: "flex";
406
- gap: "4";
407
- justifyContent: "center";
408
- minWidth: "64";
409
- paddingBlock: "8";
410
- paddingInline: "12";
411
- position: "relative";
412
- textStyle: "comp/button/md";
413
- _hover: {
414
- background: "background/hover";
415
- color: "text/primary";
416
- _active: {
417
- background: "background/active";
418
- color: "text/primary";
419
- overflow: "hidden";
420
- };
421
- };
422
- _active: {
423
- background: "background/active";
424
- color: "text/primary";
425
- overflow: "hidden";
426
- };
427
- _focusVisible: {
428
- outlineOffset: "-3px";
429
- };
430
- };
431
- };
432
- };
433
- size: {
434
- md: {
435
- root: {
436
- textStyle: "code/md";
437
- };
438
- content: {
439
- textStyle: "code/md";
440
- };
441
- };
442
- lg: {
443
- root: {
444
- textStyle: "code/lg";
445
- };
446
- content: {
447
- textStyle: "code/lg";
448
- };
449
- };
450
- };
451
- interactive: {
452
- true: {};
453
- false: {};
454
- };
455
- hasShowMore: {
456
- true: {};
457
- false: {};
458
- };
459
- isExpanded: {
460
- true: {};
461
- false: {};
462
- };
463
- }>;
464
- collapsible: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "trigger" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "root" | "trigger" | "indicator">>;
465
- combobox: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "clearTrigger" | "control" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "empty" | "emptyHelperText", {
466
- size: {
467
- md: {
468
- input: import('@chakra-ui/react').SystemStyleObject;
469
- };
470
- lg: {
471
- input: import('@chakra-ui/react').SystemStyleObject;
472
- };
473
- };
474
- }>;
475
- 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", {
476
- layout: {
477
- '1-month': {
478
- content: {
479
- width: "17.5rem";
480
- };
481
- };
482
- '2-month': {
483
- content: {
484
- width: "38.5rem";
485
- };
486
- };
487
- };
488
- showOutsideDays: {
489
- false: {
490
- tableCellTrigger: {
491
- '&[data-outside-range]': {
492
- visibility: "hidden";
493
- };
494
- };
495
- };
496
- true: {
497
- tableCellTrigger: {
498
- '&[data-outside-range]': {
499
- visibility: "visible";
500
- };
501
- };
502
- };
503
- };
504
- device: {
505
- mobile: {
506
- content: {
507
- boxShadow: "none";
508
- paddingBlock: "16";
509
- paddingInline: "16";
510
- };
511
- };
512
- };
513
- }>;
514
- datePickerSelect: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "clearTrigger" | "control" | "valueText" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup", {
515
- size: {
516
- md: {
517
- trigger: {
518
- paddingBlock: "6";
519
- textStyle?: "body/md/regular" | undefined;
520
- };
521
- indicator: {
522
- _icon: {
523
- width: "16";
524
- height: "16";
525
- };
526
- };
527
- searchInput?: {
528
- paddingBlock: "12";
529
- textStyle: "body/md/regular";
530
- '--input-height': string;
531
- } | undefined;
532
- createItem?: {
533
- color: "text/primary";
534
- paddingBlock: "16";
535
- textStyle: "body/md/regular";
536
- } | undefined;
537
- };
538
- };
539
- }>;
540
- dialog: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "backdrop" | "scrollBody" | "scrollButton" | "scrollGradient", {
541
- scrollBehavior: {
542
- inside: {
543
- body: {
544
- overflowY: "auto";
545
- _last: {
546
- paddingBlockEnd: number;
547
- };
548
- };
549
- content: {
550
- maxHeight: "calc(100dvh - 96px)";
551
- overflow: "hidden";
552
- };
553
- };
554
- outside: {};
555
- };
556
- size: {
557
- lg: {
558
- content: {
559
- width: string;
560
- };
561
- };
562
- md: {
563
- content: {
564
- width: string;
565
- };
566
- };
567
- sm: {
568
- content: {
569
- width: string;
570
- };
571
- };
572
- };
573
- }>;
574
- emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
575
- colorScheme: {
576
- white: {
577
- root: {
578
- backgroundColor: "background/primary";
579
- };
580
- };
581
- grey: {
582
- root: {
583
- backgroundColor: "background/secondary";
584
- };
585
- };
586
- };
587
- }>;
588
- expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "secdText" | "description", {
589
- size: {
590
- md: {
591
- header: {
592
- textStyle: "body/md/regular";
593
- paddingX: "16";
594
- paddingY: "12";
595
- };
596
- secdText: {
597
- textStyle: "body/sm/regular";
598
- };
599
- };
600
- lg: {
601
- header: {
602
- textStyle: "body/lg/regular";
603
- padding: "16";
604
- };
605
- secdText: {
606
- textStyle: "body/md/regular";
607
- };
608
- };
609
- };
610
- }>;
611
- 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">>;
612
- groupHeading: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "separator" | "icon" | "root" | "titleBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "separator" | "icon" | "root" | "titleBlock">>;
613
- fieldset: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "legend" | "root" | "helperText" | "errorText", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "legend" | "root" | "helperText" | "errorText">>;
614
- fileUpload: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemContent" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "dropzoneContent" | "fileText", {
615
- variant: {
616
- image: {
617
- root: {
618
- height: string;
619
- };
620
- };
621
- };
622
- }>;
623
- imageCropper: import('@chakra-ui/react').SlotRecipeDefinition<"grid" | "image" | "root" | "viewport" | "selection" | "handle", import('@chakra-ui/react').SlotRecipeVariantRecord<"grid" | "image" | "root" | "viewport" | "selection" | "handle">>;
624
- inlineLoading: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root", {
625
- size: {
626
- sm: {
627
- label: {
628
- textStyle: "body/sm/regular";
629
- };
630
- };
631
- md: {
632
- label: {
633
- textStyle: "body/md/regular";
634
- };
635
- };
636
- lg: {
637
- label: {
638
- textStyle: "body/lg/regular";
639
- };
640
- };
641
- };
642
- status: {
643
- error: {
644
- root: {
645
- color: "text/body";
646
- };
647
- };
648
- loading: {
649
- root: {
650
- color: "text/secondary";
651
- };
652
- };
653
- success: {
654
- root: {
655
- color: "text/body";
656
- };
657
- };
658
- };
659
- }>;
660
- list: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "item" | "indicator", {
661
- size: {
662
- lg: {
663
- item: {
664
- textStyle: "body/lg/regular";
665
- };
666
- indicator: {
667
- height: "24";
668
- width: "24";
669
- };
670
- };
671
- md: {
672
- item: {
673
- textStyle: "body/md/regular";
674
- };
675
- indicator: {
676
- height: "20";
677
- width: "20";
678
- };
679
- };
680
- };
681
- }>;
682
- markdown: import('@chakra-ui/react').SlotRecipeDefinition<"blockquote" | "root", {
683
- size: {
684
- sm: {
685
- root: {
686
- textStyle: "body/sm/regular";
687
- };
688
- };
689
- md: {
690
- root: {
691
- textStyle: "body/md/regular";
692
- };
693
- };
694
- lg: {
695
- root: {
696
- textStyle: "body/lg/regular";
697
- };
698
- };
699
- };
700
- }>;
701
- markdownCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "root" | "description" | "iconBar" | "gradient" | "footerButtons", {
702
- status: {
703
- info: {
704
- iconBar: {
705
- backgroundColor: "background/secondary";
706
- borderColor: "border/regular";
707
- color: "icon/secondary";
708
- };
709
- root: {
710
- borderColor: "border/regular";
711
- };
712
- };
713
- success: {
714
- iconBar: {
715
- backgroundColor: "status/success/bg";
716
- borderColor: "status/success/border";
717
- color: "status/success/icon";
718
- };
719
- root: {
720
- borderColor: "status/success/border";
721
- };
722
- };
723
- warning: {
724
- iconBar: {
725
- backgroundColor: "status/warning/bg";
726
- borderColor: "status/warning/border";
727
- color: "status/warning/icon";
728
- };
729
- root: {
730
- borderColor: "status/warning/border";
731
- };
732
- };
733
- critical: {
734
- iconBar: {
735
- backgroundColor: "status/critical/bg";
736
- borderColor: "status/critical/border";
737
- color: "status/critical/icon";
738
- };
739
- root: {
740
- borderColor: "status/critical/border";
741
- };
742
- };
743
- };
744
- }>;
745
- menu: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "separator" | "item" | "itemIndicator" | "trigger" | "arrow" | "arrowTip" | "positioner" | "indicator" | "itemText" | "itemGroup" | "itemGroupLabel" | "contextTrigger" | "triggerItem" | "itemCommand" | "itemHelper", {
746
- size: {
747
- lg: {
748
- item: {
749
- paddingY: "12";
750
- textStyle: "body/lg/regular";
751
- };
752
- };
753
- md: {
754
- item: {
755
- _icon: {
756
- marginTop: "2";
757
- };
758
- paddingY: "8";
759
- textStyle: "body/md/regular";
760
- };
761
- };
762
- };
763
- }>;
764
- nativeSelect: import('@chakra-ui/react').SlotRecipeDefinition<"field" | "root" | "indicator" | "statusIcon", {
765
- size: {
766
- md: {
767
- field: {
768
- paddingInline: string;
769
- paddingBlock: string;
770
- textStyle: "body/md/regular";
771
- };
772
- };
773
- lg: {
774
- field: {
775
- paddingInline: string;
776
- paddingBlock: string;
777
- textStyle: "body/lg/regular";
778
- };
779
- };
780
- };
781
- }>;
782
- numberInput: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber", {
783
- size: {
784
- md: {
785
- input: import('@chakra-ui/react').SystemStyleObject | undefined;
786
- control: {
787
- '--stepper-width': string;
788
- };
789
- };
790
- lg: {
791
- input: import('@chakra-ui/react').SystemStyleObject | undefined;
792
- control: {
793
- '--stepper-width': string;
794
- };
795
- };
796
- };
797
- }>;
798
- paginationLoadMore: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "counter", {
799
- size: {
800
- md: {
801
- root: {
802
- gap: "24";
803
- minHeight: string;
804
- };
805
- counter: {
806
- textStyle: "body/md/regular";
807
- '&:has(+ *)': {
808
- paddingInlineEnd: "24";
809
- };
810
- };
811
- };
812
- sm: {
813
- root: {
814
- gap: "16";
815
- minHeight: "48";
816
- };
817
- counter: {
818
- textStyle: "body/md/regular";
819
- '&:has(+ *)': {
820
- paddingInlineEnd: "16";
821
- };
822
- };
823
- };
824
- xs: {
825
- root: {
826
- gap: "12";
827
- minHeight: "32";
828
- };
829
- counter: {
830
- textStyle: "body/sm/regular";
831
- '&:has(+ *)': {
832
- paddingInlineEnd: "12";
833
- };
834
- };
835
- };
836
- };
837
- }>;
838
- radioGroup: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemIndicator" | "indicator" | "itemText" | "itemControl" | "itemAddon", {
839
- orientation: {
840
- horizontal: {
841
- root: {
842
- flexDirection: "row";
843
- gap: "24";
844
- };
845
- };
846
- vertical: {
847
- root: {
848
- alignItems: "flex-start";
849
- flexDirection: "column";
850
- gap: "12";
851
- };
852
- };
853
- };
854
- size: {
855
- md: {
856
- itemControl: {
857
- width: "20";
858
- height: "20";
859
- };
860
- itemText: {
861
- textStyle: "body/md/regular";
862
- };
863
- };
864
- lg: {
865
- itemControl: {
866
- width: "24";
867
- height: "24";
868
- };
869
- itemText: {
870
- textStyle: "body/lg/regular";
871
- };
872
- };
873
- };
874
- }>;
875
- ribbon: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "textBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "root" | "textBlock">>;
876
- 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">>;
877
- segmentGroup: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", {
878
- fullWidth: {
879
- true: {
880
- root: {
881
- display: "flex";
882
- width: "100%";
883
- };
884
- item: {
885
- flex: "1";
886
- };
887
- };
888
- };
889
- size: {
890
- lg: {
891
- item: {
892
- paddingBlock: "12";
893
- textStyle: "body/lg/regular";
894
- };
895
- };
896
- md: {
897
- item: {
898
- paddingBlock: "8";
899
- };
900
- };
901
- sm: {
902
- item: {
903
- paddingBlock: "6";
904
- };
905
- };
906
- };
907
- }>;
908
- 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", {
909
- size: {
910
- lg: Record<string, import('@chakra-ui/react').SystemStyleObject>;
911
- md: {
912
- searchInput: {
913
- paddingBlock: "12";
914
- textStyle: "body/md/regular";
915
- '--input-height': string;
916
- };
917
- createItem: {
918
- color: "text/primary";
919
- paddingBlock: "16";
920
- textStyle: "body/md/regular";
921
- };
922
- trigger: {
923
- textStyle: "body/md/regular";
924
- paddingBlock: string;
925
- };
926
- };
927
- };
928
- }>;
929
- splitButton: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "action", {
930
- variant: {
931
- primary: {
932
- trigger: {
933
- borderWidth: "0";
934
- borderInlineStartWidth: string;
935
- borderInlineStartColor: "border/on-contrast";
936
- _hover: {
937
- borderInlineStartColor: "border/on-contrast";
938
- _active: {
939
- borderInlineStartColor: "border/on-contrast";
940
- };
941
- };
942
- _active: {
943
- borderInlineStartColor: "border/on-contrast";
944
- };
945
- _disabled: {
946
- borderInlineStartColor: "border/on-contrast";
947
- };
948
- _open: {
949
- backgroundColor: "button/primary/bg-active";
950
- };
951
- };
952
- };
953
- secondary: {
954
- trigger: {
955
- _open: {
956
- backgroundColor: "button/secondary/bg-active";
957
- borderColor: "button/secondary/border-active";
958
- color: "button/secondary/fg-active";
959
- };
960
- };
961
- };
962
- };
963
- }>;
964
- switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
965
- size: {
966
- sm: {
967
- root: {
968
- '--switch-width': string;
969
- '--switch-height': string;
970
- '--switch-indicator-font-size': string;
971
- };
972
- control: {
973
- borderRadius: "8";
974
- };
975
- label: {
976
- textStyle: "body/sm/regular";
977
- };
978
- };
979
- md: {
980
- root: {
981
- '--switch-width': string;
982
- '--switch-height': string;
983
- '--switch-indicator-font-size': string;
984
- };
985
- control: {
986
- borderRadius: "12";
987
- };
988
- label: {
989
- textStyle: "body/lg/regular";
990
- };
991
- };
992
- };
993
- }>;
994
- table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "columnHeader", {
995
- variant: {
996
- default: {
997
- root: {
998
- borderColor: "border/minimal";
999
- borderRadius: "4";
1000
- borderStyle: "solid";
1001
- borderWidth: "1px";
1002
- overflow: "hidden";
1003
- };
1004
- header: {
1005
- '& :where(th)': {
1006
- backgroundColor: "background/tertiary";
1007
- };
1008
- };
1009
- columnHeader: {
1010
- borderBottomColor: "border/minimal";
1011
- paddingBlock: "12";
1012
- paddingInline: "16";
1013
- };
1014
- cell: {
1015
- borderBottomColor: "border/minimal";
1016
- paddingInline: "16";
1017
- };
1018
- footer: {
1019
- borderTopColor: "border/minimal";
1020
- };
1021
- };
1022
- borderless: {
1023
- columnHeader: {
1024
- borderBottomColor: "border/regular";
1025
- padding: "12";
1026
- };
1027
- cell: {
1028
- borderBottomColor: "border/regular";
1029
- paddingInline: "12";
1030
- };
1031
- footer: {
1032
- borderTopColor: "border/regular";
1033
- };
1034
- };
1035
- };
1036
- layout: {
1037
- table: {
1038
- root: {
1039
- borderCollapse: "separate";
1040
- borderSpacing: "0";
1041
- };
1042
- caption: {
1043
- marginBlockEnd: "24";
1044
- };
1045
- columnHeader: {
1046
- borderBottomStyle: "solid";
1047
- borderBottomWidth: "1px";
1048
- color: "text/primary";
1049
- fontWeight: "bold";
1050
- textAlign: "start";
1051
- textStyle: "heading/h5";
1052
- verticalAlign: "middle";
1053
- };
1054
- cell: {
1055
- borderBottomStyle: "solid";
1056
- borderBottomWidth: "1px";
1057
- paddingBlock: "20";
1058
- verticalAlign: "middle";
1059
- };
1060
- body: {
1061
- '& :where(tr)': {
1062
- _hover: {
1063
- backgroundColor: "background/hover";
1064
- };
1065
- };
1066
- '& :where(tr:last-child) td': {
1067
- borderBottomWidth: "0";
1068
- };
1069
- };
1070
- };
1071
- stacked: {
1072
- root: {
1073
- display: "block";
1074
- };
1075
- caption: {
1076
- display: "block";
1077
- padding: "16";
1078
- backgroundColor: "background/tertiary";
1079
- borderBottomColor: "border/minimal";
1080
- borderBottomStyle: "solid";
1081
- borderBottomWidth: "1px";
1082
- };
1083
- header: {
1084
- borderWidth: "0";
1085
- clip: "rect(0, 0, 0, 0)";
1086
- height: "1";
1087
- margin: "-1px";
1088
- overflow: "hidden";
1089
- padding: number;
1090
- position: "absolute";
1091
- whiteSpace: "nowrap";
1092
- width: "1";
1093
- };
1094
- body: {
1095
- display: "block";
1096
- };
1097
- row: {
1098
- borderBottomColor: "border/minimal";
1099
- borderBottomStyle: "solid";
1100
- borderBottomWidth: "1px";
1101
- display: "block";
1102
- paddingBlock: "12";
1103
- '&:last-child': {
1104
- borderBottomWidth: "0";
1105
- };
1106
- };
1107
- cell: {
1108
- alignItems: "center";
1109
- display: "flex";
1110
- minHeight: "48";
1111
- paddingInline: "16";
1112
- _before: {
1113
- alignSelf: "center";
1114
- color: "text/primary";
1115
- content: "attr(data-label)";
1116
- flexShrink: number;
1117
- fontWeight: "semibold";
1118
- paddingInlineEnd: "16";
1119
- width: "96";
1120
- };
1121
- };
1122
- footer: {
1123
- display: "block";
1124
- };
1125
- };
1126
- };
1127
- }>;
1128
- tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "list" | "root" | "trigger" | "indicator" | "contentGroup", {
1129
- variant: {
1130
- line: {
1131
- list: {
1132
- borderBlockEnd: "1px solid";
1133
- borderColor: "border/regular";
1134
- };
1135
- trigger: {
1136
- bottom: "-1px";
1137
- display: "flex";
1138
- alignItems: "center";
1139
- gap: "8";
1140
- color: "text/secondary";
1141
- paddingBlockStart: "12";
1142
- paddingBlockEnd: string;
1143
- borderBlockEnd: "2px solid transparent";
1144
- _selected: {
1145
- color: "text/primary";
1146
- };
1147
- _hover: {
1148
- borderColor: "border/hover";
1149
- color: "text/primary";
1150
- };
1151
- _disabled: {
1152
- color: "text/disabled";
1153
- };
1154
- };
1155
- };
1156
- contained: {
1157
- trigger: {
1158
- paddingBlockStart: string;
1159
- paddingBlockEnd: "12";
1160
- backgroundColor: "background/tertiary";
1161
- color: "text/secondary";
1162
- borderBlockStart: "2px solid transparent";
1163
- _hover: {
1164
- backgroundColor: "background/active";
1165
- };
1166
- _disabled: {
1167
- backgroundColor: "sys/neutral/moderate";
1168
- color: "text/on-disabled";
1169
- };
1170
- _selected: {
1171
- backgroundColor: "background/primary";
1172
- color: "text/selected";
1173
- _hover: {
1174
- backgroundColor: "background/primary";
1175
- };
1176
- };
1177
- };
1178
- };
1179
- };
1180
- }>;
1181
- tag: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "startElement" | "endElement", {
1182
- disabled: {
1183
- true: {
1184
- root: {
1185
- backgroundColor: "background/disabled";
1186
- borderColor: "border/disabled";
1187
- color: "text/on-disabled";
1188
- };
1189
- };
1190
- false: {};
1191
- };
1192
- size: {
1193
- sm: {
1194
- root: {
1195
- height: "24";
1196
- paddingInline: "4";
1197
- '&:has(button)': {
1198
- paddingInlineEnd: "1";
1199
- };
1200
- };
1201
- label: {
1202
- paddingInline: "4";
1203
- textStyle: "comp/tag/sm";
1204
- };
1205
- endElement: {
1206
- width: "20";
1207
- height: "20";
1208
- };
1209
- };
1210
- md: {
1211
- root: {
1212
- height: "32";
1213
- paddingInline: "6";
1214
- '&:has(button)': {
1215
- paddingInlineEnd: string;
1216
- };
1217
- };
1218
- startElement: {
1219
- marginInlineEnd: "-2px";
1220
- };
1221
- label: {
1222
- paddingInline: "6";
1223
- textStyle: "comp/tag/md";
1224
- };
1225
- };
1226
- };
1227
- }>;
1228
- tagsInput: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "item" | "clearTrigger" | "control" | "itemText" | "itemDeleteTrigger" | "itemPreview" | "itemInput" | "tagsBlock" | "suffixBlock", {
1229
- size: {
1230
- md: {
1231
- control: {
1232
- paddingInline: "8";
1233
- };
1234
- tagsBlock: {
1235
- paddingBlock: "8";
1236
- };
1237
- suffixBlock: {
1238
- height: "40";
1239
- };
1240
- input: {
1241
- height: "24";
1242
- textStyle: "body/md/regular";
1243
- };
1244
- };
1245
- lg: {
1246
- control: {
1247
- paddingInlineStart: "12";
1248
- paddingInlineEnd: "8";
1249
- };
1250
- tagsBlock: {
1251
- paddingBlock: "12";
1252
- };
1253
- suffixBlock: {
1254
- height: "48";
1255
- };
1256
- input: {
1257
- textStyle: "body/lg/regular";
1258
- };
1259
- };
1260
- };
1261
- }>;
1262
- tooltip: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", {
1263
- variant: {
1264
- dark: {
1265
- content: {
1266
- '--tooltip-bg': "colors.background.contrast";
1267
- color: "text/on-contrast";
1268
- };
1269
- };
1270
- light: {
1271
- content: {
1272
- '--tooltip-bg': "colors.background.tertiary";
1273
- color: "text/primary";
1274
- };
1275
- };
1276
- };
1277
- paddingSize: {
1278
- sm: {
1279
- content: {
1280
- paddingInline: "8";
1281
- paddingBlock: "4";
1282
- borderRadius: "4";
1283
- };
1284
- };
1285
- md: {
1286
- content: {
1287
- paddingInline: "12";
1288
- paddingBlock: "8";
1289
- borderRadius: "8";
1290
- };
1291
- };
1292
- lg: {
1293
- content: {
1294
- padding: "16";
1295
- borderRadius: "8";
1296
- };
1297
- };
1298
- };
1299
- textStyle: {
1300
- 'sm/regular': {
1301
- content: {
1302
- textStyle: "body/sm/regular";
1303
- };
1304
- };
1305
- 'sm/semibold': {
1306
- content: {
1307
- textStyle: "body/sm/semibold";
1308
- };
1309
- };
1310
- 'md/regular': {
1311
- content: {
1312
- textStyle: "body/md/regular";
1313
- };
1314
- };
1315
- };
1316
- }>;
1317
- };
1318
- export default slotRecipes;