@bitrise/bitkit-v2 0.3.110 → 0.3.112

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 (14) hide show
  1. package/dist/components/BitkitAvatar/BitkitAvatar.d.ts +44 -0
  2. package/dist/components/BitkitAvatar/BitkitAvatar.js +47 -0
  3. package/dist/components/index.d.ts +1 -0
  4. package/dist/main.js +1108 -1106
  5. package/dist/theme/slot-recipes/Avatar.recipe.d.ts +161 -0
  6. package/dist/theme/slot-recipes/Avatar.recipe.js +102 -0
  7. package/dist/theme/slot-recipes/Checkbox.recipe.d.ts +1 -1
  8. package/dist/theme/slot-recipes/Select.recipe.d.ts +1 -1
  9. package/dist/theme/slot-recipes/Tabs.recipe.d.ts +1 -1
  10. package/dist/theme/slot-recipes/index.d.ts +163 -3
  11. package/dist/theme/slot-recipes/index.js +34 -32
  12. package/dist/theme/text-styles.d.ts +43 -0
  13. package/dist/theme/text-styles.js +11 -5
  14. package/package.json +1 -1
package/dist/theme/slot-recipes/Avatar.recipe.d.ts ADDED
@@ -0,0 +1,161 @@
1
+ declare const avatarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"image" | "badge" | "icon" | "root" | "fallback" | "badgeContainer", {
2
+ size: {
3
+ '24': {
4
+ root: {
5
+ width: number;
6
+ height: number;
7
+ borderRadius: number;
8
+ };
9
+ image: {
10
+ borderRadius: number;
11
+ };
12
+ fallback: {
13
+ textStyle: "comp/avatar/24";
14
+ borderRadius: number;
15
+ };
16
+ icon: {
17
+ width: number;
18
+ height: number;
19
+ };
20
+ badgeContainer: {
21
+ display: "none";
22
+ };
23
+ };
24
+ '32': {
25
+ root: {
26
+ width: number;
27
+ height: number;
28
+ borderRadius: number;
29
+ };
30
+ image: {
31
+ borderRadius: number;
32
+ };
33
+ fallback: {
34
+ textStyle: "comp/avatar/32";
35
+ borderRadius: number;
36
+ };
37
+ icon: {
38
+ width: number;
39
+ height: number;
40
+ };
41
+ badgeContainer: {
42
+ width: number;
43
+ height: number;
44
+ bottom: number;
45
+ right: number;
46
+ borderRadius: number;
47
+ };
48
+ };
49
+ '40': {
50
+ root: {
51
+ width: number;
52
+ height: number;
53
+ borderRadius: number;
54
+ };
55
+ image: {
56
+ borderRadius: number;
57
+ };
58
+ fallback: {
59
+ textStyle: "comp/avatar/40";
60
+ borderRadius: number;
61
+ };
62
+ icon: {
63
+ width: number;
64
+ height: number;
65
+ };
66
+ badgeContainer: {
67
+ width: number;
68
+ height: number;
69
+ bottom: number;
70
+ right: number;
71
+ borderRadius: number;
72
+ };
73
+ };
74
+ '48': {
75
+ root: {
76
+ width: number;
77
+ height: number;
78
+ borderRadius: number;
79
+ };
80
+ image: {
81
+ borderRadius: number;
82
+ };
83
+ fallback: {
84
+ textStyle: "comp/avatar/48";
85
+ borderRadius: number;
86
+ };
87
+ icon: {
88
+ width: number;
89
+ height: number;
90
+ };
91
+ badgeContainer: {
92
+ width: number;
93
+ height: number;
94
+ bottom: number;
95
+ right: number;
96
+ borderRadius: "50%";
97
+ };
98
+ };
99
+ '64': {
100
+ root: {
101
+ width: number;
102
+ height: number;
103
+ borderRadius: number;
104
+ };
105
+ image: {
106
+ borderRadius: number;
107
+ };
108
+ fallback: {
109
+ textStyle: "comp/avatar/64";
110
+ borderRadius: number;
111
+ };
112
+ icon: {
113
+ width: number;
114
+ height: number;
115
+ };
116
+ badgeContainer: {
117
+ width: number;
118
+ height: number;
119
+ bottom: number;
120
+ right: number;
121
+ borderRadius: "50%";
122
+ };
123
+ };
124
+ '128': {
125
+ root: {
126
+ width: number;
127
+ height: number;
128
+ borderRadius: number;
129
+ };
130
+ image: {
131
+ borderRadius: number;
132
+ };
133
+ fallback: {
134
+ textStyle: "comp/avatar/128";
135
+ borderRadius: number;
136
+ };
137
+ icon: {
138
+ width: number;
139
+ height: number;
140
+ };
141
+ badgeContainer: {
142
+ display: "none";
143
+ };
144
+ };
145
+ };
146
+ variant: {
147
+ circle: {
148
+ root: {
149
+ borderRadius: "50%";
150
+ };
151
+ image: {
152
+ borderRadius: "50%";
153
+ };
154
+ fallback: {
155
+ borderRadius: "50%";
156
+ };
157
+ };
158
+ rounded: {};
159
+ };
160
+ }>;
161
+ export default avatarSlotRecipe;
package/dist/theme/slot-recipes/Avatar.recipe.js ADDED
@@ -0,0 +1,102 @@
1
+ import { avatarAnatomy as e } from "@chakra-ui/react/anatomy";
2
+ import { defineSlotRecipe as t } from "@chakra-ui/react/styled-system";
3
+ const o = t({
4
+ slots: [...e.keys(), "icon", "badge", "badgeContainer"],
5
+ className: "avatar",
6
+ base: {
7
+ root: {
8
+ alignItems: "center",
9
+ border: "1px solid",
10
+ borderColor: "border/minimal",
11
+ display: "inline-flex",
12
+ flexShrink: "0",
13
+ justifyContent: "center",
14
+ position: "relative",
15
+ userSelect: "none",
16
+ verticalAlign: "top",
17
+ color: "colorPalette.strong",
18
+ backgroundColor: "colorPalette.subtle"
19
+ },
20
+ image: {
21
+ width: "100%",
22
+ height: "100%",
23
+ objectFit: "cover"
24
+ },
25
+ fallback: {},
26
+ icon: {},
27
+ badge: {
28
+ width: 16,
29
+ height: 16
30
+ },
31
+ badgeContainer: {
32
+ display: "flex",
33
+ boxShadow: "small",
34
+ position: "absolute",
35
+ alignItems: "center",
36
+ justifyContent: "center",
37
+ color: "text/secondary",
38
+ backgroundColor: "background/primary"
39
+ }
40
+ },
41
+ variants: {
42
+ size: {
43
+ 24: {
44
+ root: { width: 24, height: 24, borderRadius: 4 },
45
+ image: { borderRadius: 4 },
46
+ fallback: { textStyle: "comp/avatar/24", borderRadius: 4 },
47
+ icon: { width: 16, height: 16 },
48
+ badgeContainer: { display: "none" }
49
+ },
50
+ 32: {
51
+ root: { width: 32, height: 32, borderRadius: 6 },
52
+ image: { borderRadius: 6 },
53
+ fallback: { textStyle: "comp/avatar/32", borderRadius: 6 },
54
+ icon: { width: 20, height: 20 },
55
+ badgeContainer: { width: 16, height: 16, bottom: -5, right: -5, borderRadius: 4 }
56
+ },
57
+ 40: {
58
+ root: { width: 40, height: 40, borderRadius: 8 },
59
+ image: { borderRadius: 8 },
60
+ fallback: { textStyle: "comp/avatar/40", borderRadius: 8 },
61
+ icon: { width: 24, height: 24 },
62
+ badgeContainer: { width: 16, height: 16, bottom: -2, right: -2, borderRadius: 4 }
63
+ },
64
+ 48: {
65
+ root: { width: 48, height: 48, borderRadius: 10 },
66
+ image: { borderRadius: 10 },
67
+ fallback: { textStyle: "comp/avatar/48", borderRadius: 10 },
68
+ icon: { width: 32, height: 32 },
69
+ badgeContainer: { width: 24, height: 24, bottom: -7, right: -7, borderRadius: "50%" }
70
+ },
71
+ 64: {
72
+ root: { width: 64, height: 64, borderRadius: 12 },
73
+ image: { borderRadius: 12 },
74
+ fallback: { textStyle: "comp/avatar/64", borderRadius: 12 },
75
+ icon: { width: 48, height: 48 },
76
+ badgeContainer: { width: 24, height: 24, bottom: -5, right: -5, borderRadius: "50%" }
77
+ },
78
+ 128: {
79
+ root: { width: 128, height: 128, borderRadius: 16 },
80
+ image: { borderRadius: 16 },
81
+ fallback: { textStyle: "comp/avatar/128", borderRadius: 16 },
82
+ icon: { width: 96, height: 96 },
83
+ badgeContainer: { display: "none" }
84
+ }
85
+ },
86
+ variant: {
87
+ circle: {
88
+ root: { borderRadius: "50%" },
89
+ image: { borderRadius: "50%" },
90
+ fallback: { borderRadius: "50%" }
91
+ },
92
+ rounded: {}
93
+ }
94
+ },
95
+ defaultVariants: {
96
+ size: "32",
97
+ variant: "circle"
98
+ }
99
+ });
100
+ export {
101
+ o as default
102
+ };
package/dist/theme/slot-recipes/Checkbox.recipe.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const checkboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "group" | "root" | "control" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "group" | "root" | "control" | "indicator">>;
1
+ declare const checkboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "group" | "control" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "root" | "group" | "control" | "indicator">>;
2
2
  export default checkboxSlotRecipe;
package/dist/theme/slot-recipes/Select.recipe.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "list" | "root" | "control" | "indicator" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
1
+ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "list" | "control" | "indicator" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
2
2
  size: {
3
3
  md: {
4
4
  item: {
package/dist/theme/slot-recipes/Tabs.recipe.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "list" | "root" | "indicator" | "contentGroup", {
1
+ declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "list" | "indicator" | "contentGroup", {
2
2
  variant: {
3
3
  line: {
4
4
  list: {
package/dist/theme/slot-recipes/index.d.ts CHANGED
@@ -24,6 +24,166 @@ declare const slotRecipes: {
24
24
  };
25
25
  };
26
26
  }>;
27
+ avatar: import('@chakra-ui/react').SlotRecipeDefinition<"image" | "badge" | "icon" | "root" | "fallback" | "badgeContainer", {
28
+ size: {
29
+ '24': {
30
+ root: {
31
+ width: number;
32
+ height: number;
33
+ borderRadius: number;
34
+ };
35
+ image: {
36
+ borderRadius: number;
37
+ };
38
+ fallback: {
39
+ textStyle: "comp/avatar/24";
40
+ borderRadius: number;
41
+ };
42
+ icon: {
43
+ width: number;
44
+ height: number;
45
+ };
46
+ badgeContainer: {
47
+ display: "none";
48
+ };
49
+ };
50
+ '32': {
51
+ root: {
52
+ width: number;
53
+ height: number;
54
+ borderRadius: number;
55
+ };
56
+ image: {
57
+ borderRadius: number;
58
+ };
59
+ fallback: {
60
+ textStyle: "comp/avatar/32";
61
+ borderRadius: number;
62
+ };
63
+ icon: {
64
+ width: number;
65
+ height: number;
66
+ };
67
+ badgeContainer: {
68
+ width: number;
69
+ height: number;
70
+ bottom: number;
71
+ right: number;
72
+ borderRadius: number;
73
+ };
74
+ };
75
+ '40': {
76
+ root: {
77
+ width: number;
78
+ height: number;
79
+ borderRadius: number;
80
+ };
81
+ image: {
82
+ borderRadius: number;
83
+ };
84
+ fallback: {
85
+ textStyle: "comp/avatar/40";
86
+ borderRadius: number;
87
+ };
88
+ icon: {
89
+ width: number;
90
+ height: number;
91
+ };
92
+ badgeContainer: {
93
+ width: number;
94
+ height: number;
95
+ bottom: number;
96
+ right: number;
97
+ borderRadius: number;
98
+ };
99
+ };
100
+ '48': {
101
+ root: {
102
+ width: number;
103
+ height: number;
104
+ borderRadius: number;
105
+ };
106
+ image: {
107
+ borderRadius: number;
108
+ };
109
+ fallback: {
110
+ textStyle: "comp/avatar/48";
111
+ borderRadius: number;
112
+ };
113
+ icon: {
114
+ width: number;
115
+ height: number;
116
+ };
117
+ badgeContainer: {
118
+ width: number;
119
+ height: number;
120
+ bottom: number;
121
+ right: number;
122
+ borderRadius: "50%";
123
+ };
124
+ };
125
+ '64': {
126
+ root: {
127
+ width: number;
128
+ height: number;
129
+ borderRadius: number;
130
+ };
131
+ image: {
132
+ borderRadius: number;
133
+ };
134
+ fallback: {
135
+ textStyle: "comp/avatar/64";
136
+ borderRadius: number;
137
+ };
138
+ icon: {
139
+ width: number;
140
+ height: number;
141
+ };
142
+ badgeContainer: {
143
+ width: number;
144
+ height: number;
145
+ bottom: number;
146
+ right: number;
147
+ borderRadius: "50%";
148
+ };
149
+ };
150
+ '128': {
151
+ root: {
152
+ width: number;
153
+ height: number;
154
+ borderRadius: number;
155
+ };
156
+ image: {
157
+ borderRadius: number;
158
+ };
159
+ fallback: {
160
+ textStyle: "comp/avatar/128";
161
+ borderRadius: number;
162
+ };
163
+ icon: {
164
+ width: number;
165
+ height: number;
166
+ };
167
+ badgeContainer: {
168
+ display: "none";
169
+ };
170
+ };
171
+ };
172
+ variant: {
173
+ circle: {
174
+ root: {
175
+ borderRadius: "50%";
176
+ };
177
+ image: {
178
+ borderRadius: "50%";
179
+ };
180
+ fallback: {
181
+ borderRadius: "50%";
182
+ };
183
+ };
184
+ rounded: {};
185
+ };
186
+ }>;
27
187
  card: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "root" | "description", {
28
188
  elevation: {
29
189
  true: {
@@ -57,7 +217,7 @@ declare const slotRecipes: {
57
217
  };
58
218
  };
59
219
  }>;
60
- checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "group" | "root" | "control" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "group" | "root" | "control" | "indicator">>;
220
+ checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "group" | "control" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "root" | "group" | "control" | "indicator">>;
61
221
  emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
62
222
  colorScheme: {
63
223
  white: {
@@ -232,7 +392,7 @@ declare const slotRecipes: {
232
392
  };
233
393
  };
234
394
  }>;
235
- select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "list" | "root" | "control" | "indicator" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
395
+ select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "list" | "control" | "indicator" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
236
396
  size: {
237
397
  md: {
238
398
  item: {
@@ -294,7 +454,7 @@ declare const slotRecipes: {
294
454
  };
295
455
  };
296
456
  }>;
297
- tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "list" | "root" | "indicator" | "contentGroup", {
457
+ tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "list" | "indicator" | "contentGroup", {
298
458
  variant: {
299
459
  line: {
300
460
  list: {
package/dist/theme/slot-recipes/index.js CHANGED
@@ -1,35 +1,37 @@
1
- import e from "./ActionBar.recipe.js";
2
- import t from "./Alert.recipe.js";
3
- import o from "./Card.recipe.js";
4
- import i from "./Checkbox.recipe.js";
5
- import r from "./EmptyState.recipe.js";
6
- import p from "./ExpandableCard.recipe.js";
7
- import m from "./Field.recipe.js";
8
- import c from "./Fieldset.recipe.js";
9
- import l from "./NativeSelect.recipe.js";
10
- import { numberInputSlotRecipe as a } from "./NumberInput.recipe.js";
11
- import { selectSlotRecipe as f } from "./Select.recipe.js";
12
- import S from "./Switch.recipe.js";
13
- import R from "./Tabs.recipe.js";
14
- import s from "./Tag.recipe.js";
15
- import d from "./Tooltip.recipe.js";
16
- const z = {
17
- actionBar: e,
18
- card: o,
19
- checkbox: i,
20
- emptyState: r,
21
- expandableCard: p,
22
- field: m,
23
- fieldset: c,
24
- nativeSelect: l,
25
- alert: t,
26
- numberInput: a,
27
- select: f,
28
- switch: S,
29
- tabs: R,
30
- tag: s,
31
- tooltip: d
1
+ import t from "./ActionBar.recipe.js";
2
+ import e from "./Alert.recipe.js";
3
+ import o from "./Avatar.recipe.js";
4
+ import i from "./Card.recipe.js";
5
+ import r from "./Checkbox.recipe.js";
6
+ import p from "./EmptyState.recipe.js";
7
+ import m from "./ExpandableCard.recipe.js";
8
+ import c from "./Field.recipe.js";
9
+ import l from "./Fieldset.recipe.js";
10
+ import a from "./NativeSelect.recipe.js";
11
+ import { numberInputSlotRecipe as f } from "./NumberInput.recipe.js";
12
+ import { selectSlotRecipe as S } from "./Select.recipe.js";
13
+ import R from "./Switch.recipe.js";
14
+ import s from "./Tabs.recipe.js";
15
+ import d from "./Tag.recipe.js";
16
+ import n from "./Tooltip.recipe.js";
17
+ const D = {
18
+ actionBar: t,
19
+ avatar: o,
20
+ card: i,
21
+ checkbox: r,
22
+ emptyState: p,
23
+ expandableCard: m,
24
+ field: c,
25
+ fieldset: l,
26
+ nativeSelect: a,
27
+ alert: e,
28
+ numberInput: f,
29
+ select: S,
30
+ switch: R,
31
+ tabs: s,
32
+ tag: d,
33
+ tooltip: n
32
34
  };
33
35
  export {
34
- z as default
36
+ D as default
35
37
  };
package/dist/theme/text-styles.d.ts CHANGED
@@ -375,6 +375,49 @@ export declare const dataObject: {
375
375
  textTransform: string;
376
376
  };
377
377
  };
378
+ 'comp/avatar/24': {
379
+ value: {
380
+ fontWeight: string;
381
+ lineHeight: string;
382
+ fontSize: string;
383
+ letterSpacing: string;
384
+ };
385
+ };
386
+ 'comp/avatar/32': {
387
+ value: {
388
+ fontWeight: string;
389
+ lineHeight: string;
390
+ fontSize: string;
391
+ };
392
+ };
393
+ 'comp/avatar/40': {
394
+ value: {
395
+ fontWeight: string;
396
+ lineHeight: string;
397
+ fontSize: string;
398
+ };
399
+ };
400
+ 'comp/avatar/48': {
401
+ value: {
402
+ fontWeight: string;
403
+ lineHeight: string;
404
+ fontSize: string;
405
+ };
406
+ };
407
+ 'comp/avatar/64': {
408
+ value: {
409
+ fontWeight: string;
410
+ lineHeight: string;
411
+ fontSize: string;
412
+ };
413
+ };
414
+ 'comp/avatar/128': {
415
+ value: {
416
+ fontWeight: string;
417
+ lineHeight: string;
418
+ fontSize: string;
419
+ };
420
+ };
378
421
  'mono/code-2': {
379
422
  value: {
380
423
  fontFamily: string;
package/dist/theme/text-styles.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineTextStyles as i } from "@chakra-ui/react/styled-system";
1
+ import { defineTextStyles as s } from "@chakra-ui/react/styled-system";
2
2
  const e = {
3
3
  "mono/code-2": {
4
4
  value: {
@@ -233,7 +233,7 @@ const e = {
233
233
  fontSize: "3rem"
234
234
  }
235
235
  }
236
- }, s = {
236
+ }, i = {
237
237
  ...e,
238
238
  "display/lg": e["sans/size-8/bold"],
239
239
  "display/sm": e["sans/size-7/bold"],
@@ -285,9 +285,15 @@ const e = {
285
285
  "comp/tag/md": e["sans/size-2/normal"],
286
286
  "comp/badge/sm": e["sans/size-1/uppercase-bold"],
287
287
  "comp/dialog/title": e["sans/size-5/bold"],
288
- "comp/dialog/label": e["sans/size-2/uppercase-semibold"]
289
- }, o = i(s);
288
+ "comp/dialog/label": e["sans/size-2/uppercase-semibold"],
289
+ "comp/avatar/24": e["sans/size-1/bold"],
290
+ "comp/avatar/32": e["sans/size-3/bold"],
291
+ "comp/avatar/40": e["sans/size-4/bold"],
292
+ "comp/avatar/48": e["sans/size-5/bold"],
293
+ "comp/avatar/64": e["sans/size-6/bold"],
294
+ "comp/avatar/128": e["sans/size-8/bold"]
295
+ }, o = s(i);
290
296
  export {
291
- s as dataObject,
297
+ i as dataObject,
292
298
  o as default
293
299
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.110",
4
+ "version": "0.3.112",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",