@bitrise/bitkit-v2 0.3.441-beta.2799 → 0.3.442

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 (15) hide show
  1. package/dist/components/BitkitMarkdown/BitkitMarkdown.js +2 -8
  2. package/dist/components/BitkitMarkdown/BitkitMarkdown.js.map +1 -1
  3. package/dist/components/BitkitTabs/BitkitTabs.d.ts +22 -0
  4. package/dist/components/BitkitTabs/BitkitTabs.js +66 -40
  5. package/dist/components/BitkitTabs/BitkitTabs.js.map +1 -1
  6. package/dist/components/index.d.ts +1 -1
  7. package/dist/theme/slot-recipes/Tabs.recipe.d.ts +94 -6
  8. package/dist/theme/slot-recipes/Tabs.recipe.js +214 -131
  9. package/dist/theme/slot-recipes/Tabs.recipe.js.map +1 -1
  10. package/dist/theme/slot-recipes/index.d.ts +94 -6
  11. package/dist/utilities/getTextContent.d.ts +3 -0
  12. package/dist/utilities/getTextContent.js +14 -0
  13. package/dist/utilities/getTextContent.js.map +1 -0
  14. package/docs/v1-to-v2-migration-guide.md +20 -0
  15. package/package.json +1 -1
package/dist/theme/slot-recipes/Tabs.recipe.js CHANGED
@@ -2,6 +2,18 @@ import { rem } from "../themeUtils.js";
2
2
  import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
3
3
  import { tabsAnatomy } from "@chakra-ui/react/anatomy";
4
4
  //#region lib/theme/slot-recipes/Tabs.recipe.ts
5
+ var iconColor = (token) => ({ "--tabs-icon-color": `colors.${token}` });
6
+ var containedActive = {
7
+ ...iconColor("icon/secondary"),
8
+ backgroundColor: "background/primary",
9
+ color: "text/primary",
10
+ _after: { backgroundColor: "border/regular" }
11
+ };
12
+ var containedSelected = {
13
+ ...iconColor("icon/interactive"),
14
+ backgroundColor: "background/primary",
15
+ color: "text/primary"
16
+ };
5
17
  var tabsSlotRecipe = defineSlotRecipe({
6
18
  slots: [...tabsAnatomy.keys(), "moreTrigger"],
7
19
  className: "chakra-tabs",
@@ -9,6 +21,7 @@ var tabsSlotRecipe = defineSlotRecipe({
9
21
  list: { display: "flex" },
10
22
  trigger: {
11
23
  "--focus-ring-width": rem(2),
24
+ ...iconColor("icon/tertiary"),
12
25
  color: "text/secondary",
13
26
  cursor: "pointer",
14
27
  textStyle: "body/lg/semibold",
@@ -21,12 +34,10 @@ var tabsSlotRecipe = defineSlotRecipe({
21
34
  _selected: {
22
35
  zIndex: 1,
23
36
  borderColor: "border/selected",
24
- _hover: { borderColor: "border/selected" },
25
- "& > svg": { color: "icon/interactive" }
37
+ _hover: { borderColor: "border/selected" }
26
38
  }
27
39
  },
28
40
  content: { outline: "none" },
29
- contentGroup: { backgroundColor: "background/primary" },
30
41
  moreTrigger: {
31
42
  "--focus-ring-width": rem(2),
32
43
  position: "relative",
@@ -38,156 +49,228 @@ var tabsSlotRecipe = defineSlotRecipe({
38
49
  color: "text/secondary"
39
50
  }
40
51
  },
41
- variants: { variant: {
42
- line: {
43
- list: {
44
- borderBlockEnd: "1px solid",
45
- borderColor: "border/regular"
46
- },
47
- trigger: {
48
- bottom: "-1px",
49
- display: "flex",
50
- alignItems: "center",
51
- gap: "8",
52
- paddingBlockStart: "12",
53
- paddingBlockEnd: rem(9),
54
- borderBlockEnd: "2px solid transparent",
55
- _selected: { color: "text/primary" },
56
- _hover: {
57
- borderColor: "border/hover",
58
- color: "text/primary"
59
- },
60
- _disabled: { color: "text/disabled" }
61
- },
62
- moreTrigger: {
63
- bottom: "-1px",
64
- textStyle: "body/lg/semibold",
65
- paddingInline: "16",
66
- paddingBlockStart: "12",
67
- paddingBlockEnd: rem(9),
68
- borderBlockEnd: "2px solid transparent",
69
- _hover: {
70
- backgroundColor: "background/hover",
71
- color: "text/primary"
52
+ variants: {
53
+ variant: {
54
+ line: {
55
+ list: {
56
+ borderBlockEnd: "1px solid",
57
+ borderColor: "border/regular",
58
+ "&:not([data-overflowing]) > .chakra-tabs__list > .chakra-tabs__trigger": {
59
+ flex: { baseOnly: "1" },
60
+ justifyContent: { baseOnly: "center" }
61
+ }
72
62
  },
73
- _open: {
74
- backgroundColor: "background/active",
75
- color: "text/primary"
76
- }
77
- }
78
- },
79
- contained: {
80
- trigger: {
81
- paddingBlockStart: rem(10),
82
- paddingBlockEnd: "12",
83
- backgroundColor: "background/tertiary",
84
- borderBlockStart: "2px solid transparent",
85
- _hover: { backgroundColor: "background/active" },
86
- _disabled: {
87
- backgroundColor: "color/neutral/moderate",
88
- color: "text/on-disabled"
63
+ trigger: {
64
+ bottom: "-1px",
65
+ display: "flex",
66
+ alignItems: "center",
67
+ gap: "12",
68
+ paddingBlockStart: "12",
69
+ paddingBlockEnd: rem(9),
70
+ borderBlockEnd: "2px solid transparent",
71
+ _selected: {
72
+ ...iconColor("icon/interactive"),
73
+ color: "text/primary",
74
+ _hover: iconColor("icon/interactive")
75
+ },
76
+ _hover: {
77
+ ...iconColor("icon/secondary"),
78
+ borderColor: "border/hover",
79
+ color: "text/primary"
80
+ },
81
+ _disabled: {
82
+ ...iconColor("icon/disabled"),
83
+ color: "text/disabled"
84
+ }
89
85
  },
90
- _selected: {
91
- backgroundColor: "background/primary",
92
- color: "text/selected",
93
- _hover: { backgroundColor: "background/primary" }
86
+ moreTrigger: {
87
+ bottom: "-1px",
88
+ textStyle: "body/lg/semibold",
89
+ paddingInline: "16",
90
+ paddingBlockStart: "12",
91
+ paddingBlockEnd: rem(9),
92
+ borderBlockEnd: "2px solid transparent",
93
+ _hover: { backgroundColor: "background/hover" },
94
+ _open: {
95
+ backgroundColor: "background/active",
96
+ color: "text/primary"
97
+ }
94
98
  }
95
99
  },
96
- moreTrigger: {
97
- textStyle: "body/lg/regular",
98
- paddingInline: "16",
99
- paddingBlock: "12",
100
- backgroundColor: "background/tertiary",
101
- _hover: {
102
- backgroundColor: "background/active",
103
- color: "text/primary"
100
+ contained: {
101
+ trigger: {
102
+ display: "flex",
103
+ alignItems: "flex-start",
104
+ gap: "16",
105
+ paddingBlockStart: rem(10),
106
+ paddingBlockEnd: "12",
107
+ backgroundColor: "background/tertiary",
108
+ borderBlockStart: "2px solid transparent",
109
+ _after: {
110
+ content: "\"\"",
111
+ position: "absolute",
112
+ insetBlock: 0,
113
+ insetInlineEnd: 0,
114
+ width: "1",
115
+ backgroundColor: "border/regular"
116
+ },
117
+ "&:last-of-type": { _after: { display: "none" } },
118
+ _hover: {
119
+ ...iconColor("icon/secondary"),
120
+ backgroundColor: "background/active",
121
+ _after: { backgroundColor: "border/strong" },
122
+ _active: containedActive
123
+ },
124
+ _active: containedActive,
125
+ _disabled: {
126
+ ...iconColor("icon/on-disabled"),
127
+ backgroundColor: "color/neutral/moderate",
128
+ color: "text/on-disabled",
129
+ _after: { backgroundColor: "border/strong" }
130
+ },
131
+ _selected: {
132
+ ...containedSelected,
133
+ _after: { display: "none" },
134
+ _hover: {
135
+ ...containedSelected,
136
+ _active: containedSelected
137
+ },
138
+ _active: containedSelected,
139
+ _focusVisible: { _after: {
140
+ display: "block",
141
+ backgroundColor: "border/strong"
142
+ } }
143
+ }
104
144
  },
105
- _open: {
106
- backgroundColor: "background/active",
107
- color: "text/primary"
108
- }
109
- }
110
- },
111
- canvas: {
112
- list: {
113
- paddingInlineStart: "12",
114
- borderBlockEnd: "1px solid",
115
- borderColor: "border/regular"
116
- },
117
- trigger: {
118
- height: "40",
119
- display: "flex",
120
- alignItems: "center",
121
- gap: "8",
122
- textStyle: "body/md/regular",
123
- backgroundColor: "background/secondary",
124
- paddingInline: "12",
125
- paddingBlock: "8",
126
- borderBlockEnd: "1px solid",
127
- bottom: "-1px",
128
- borderInlineEnd: "1px solid",
129
- borderColor: "border/regular",
130
- "&:first-of-type": {
131
- borderInlineStartWidth: "1",
132
- borderInlineStartStyle: "solid"
145
+ moreTrigger: {
146
+ textStyle: "body/lg/regular",
147
+ paddingInline: "16",
148
+ paddingBlock: "12",
149
+ backgroundColor: "background/tertiary",
150
+ _hover: {
151
+ backgroundColor: "background/active",
152
+ color: "text/primary"
153
+ },
154
+ _open: {
155
+ backgroundColor: "background/active",
156
+ color: "text/primary"
157
+ }
133
158
  },
134
- _hover: {
159
+ contentGroup: {
135
160
  backgroundColor: "background/primary",
136
- color: "text/primary"
161
+ borderRadius: "4",
162
+ borderStartStartRadius: 0
163
+ }
164
+ },
165
+ canvas: {
166
+ list: {
167
+ paddingInlineStart: "12",
168
+ borderBlockEnd: "1px solid",
169
+ borderColor: "border/regular"
137
170
  },
138
- _selected: {
139
- zIndex: 1,
140
- backgroundColor: "background/primary",
141
- color: "text/primary",
171
+ trigger: {
172
+ height: "40",
173
+ display: "flex",
174
+ alignItems: "center",
175
+ gap: "4",
176
+ textStyle: "body/md/regular",
177
+ backgroundColor: "background/secondary",
178
+ paddingInline: "12",
179
+ paddingBlock: "8",
180
+ borderBlockEnd: "1px solid",
181
+ bottom: "-1px",
182
+ borderInlineEnd: "1px solid",
142
183
  borderColor: "border/regular",
143
- borderBlockEndColor: "border/minimal",
144
- _after: {
145
- content: "\"\"",
146
- position: "absolute",
147
- insetBlockStart: 0,
148
- insetInline: 0,
149
- height: "2",
150
- backgroundColor: "border/selected"
184
+ "&:first-of-type": {
185
+ borderInlineStartWidth: "1",
186
+ borderInlineStartStyle: "solid"
151
187
  },
152
188
  _hover: {
153
189
  backgroundColor: "background/primary",
190
+ color: "text/primary"
191
+ },
192
+ _selected: {
193
+ zIndex: 1,
194
+ backgroundColor: "background/primary",
195
+ color: "text/primary",
154
196
  borderColor: "border/regular",
155
- borderBlockEndColor: "border/minimal"
197
+ borderBlockEndColor: "border/minimal",
198
+ _after: {
199
+ content: "\"\"",
200
+ position: "absolute",
201
+ insetBlockStart: 0,
202
+ insetInline: 0,
203
+ height: "2",
204
+ backgroundColor: "border/selected"
205
+ },
206
+ _hover: {
207
+ backgroundColor: "background/primary",
208
+ borderColor: "border/regular",
209
+ borderBlockEndColor: "border/minimal"
210
+ }
211
+ },
212
+ _disabled: {
213
+ ...iconColor("icon/disabled"),
214
+ backgroundColor: "color/neutral/moderate",
215
+ color: "text/on-disabled",
216
+ _hover: {
217
+ backgroundColor: "color/neutral/moderate",
218
+ color: "text/on-disabled"
219
+ }
156
220
  }
157
221
  },
158
- _disabled: {
159
- backgroundColor: "color/neutral/moderate",
160
- color: "text/on-disabled",
222
+ moreTrigger: {
223
+ height: "40",
224
+ textStyle: "body/md/regular",
225
+ paddingInline: "12",
226
+ bottom: "-1px",
227
+ borderBlockEnd: "1px solid",
228
+ borderInlineEnd: "1px solid",
229
+ borderColor: "border/regular",
161
230
  _hover: {
162
- backgroundColor: "color/neutral/moderate",
163
- color: "text/on-disabled"
231
+ backgroundColor: "background/hover",
232
+ color: "text/primary"
233
+ },
234
+ _open: {
235
+ backgroundColor: "background/active",
236
+ color: "text/primary"
237
+ },
238
+ _focusVisible: {
239
+ outline: "none",
240
+ boxShadow: "inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color)"
164
241
  }
165
- }
242
+ },
243
+ contentGroup: { backgroundColor: "background/primary" }
244
+ }
245
+ },
246
+ size: {
247
+ lg: {},
248
+ md: {}
249
+ }
250
+ },
251
+ compoundVariants: [{
252
+ variant: "line",
253
+ size: "md",
254
+ css: {
255
+ list: { paddingInline: "4" },
256
+ trigger: {
257
+ textStyle: "body/md/semibold",
258
+ paddingInline: "12",
259
+ paddingBlockStart: rem(10),
260
+ paddingBlockEnd: rem(7)
166
261
  },
167
262
  moreTrigger: {
168
- height: "40",
169
- textStyle: "body/md/regular",
263
+ textStyle: "body/md/semibold",
170
264
  paddingInline: "12",
171
- bottom: "-1px",
172
- borderBlockEnd: "1px solid",
173
- borderInlineEnd: "1px solid",
174
- borderColor: "border/regular",
175
- _hover: {
176
- backgroundColor: "background/hover",
177
- color: "text/primary"
178
- },
179
- _open: {
180
- backgroundColor: "background/active",
181
- color: "text/primary"
182
- },
183
- _focusVisible: {
184
- outline: "none",
185
- boxShadow: "inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color)"
186
- }
265
+ paddingBlockStart: rem(10),
266
+ paddingBlockEnd: rem(7)
187
267
  }
188
268
  }
189
- } },
190
- defaultVariants: { variant: "line" }
269
+ }],
270
+ defaultVariants: {
271
+ size: "lg",
272
+ variant: "line"
273
+ }
191
274
  });
192
275
  //#endregion
193
276
  export { tabsSlotRecipe as default };
package/dist/theme/slot-recipes/Tabs.recipe.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tabs.recipe.ts"],"sourcesContent":["import { tabsAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tabsSlotRecipe = defineSlotRecipe({\n // `moreTrigger` is a custom slot (not in the Chakra anatomy) for the overflow \"N more…\" button.\n slots: [...tabsAnatomy.keys(), 'moreTrigger'],\n className: 'chakra-tabs',\n base: {\n list: {\n display: 'flex',\n },\n trigger: {\n '--focus-ring-width': rem(2),\n color: 'text/secondary',\n cursor: 'pointer',\n textStyle: 'body/lg/semibold',\n paddingInline: '16',\n position: 'relative',\n textAlign: 'left',\n whiteSpace: 'nowrap',\n zIndex: 0,\n _disabled: {\n cursor: 'not-allowed',\n },\n _selected: {\n zIndex: 1,\n borderColor: 'border/selected',\n _hover: {\n borderColor: 'border/selected',\n },\n '& > svg': {\n color: 'icon/interactive',\n },\n },\n },\n content: {\n outline: 'none',\n },\n contentGroup: {\n backgroundColor: 'background/primary',\n },\n // Overflow \"N more…\" button — variant-specific look is layered on per variant below.\n moreTrigger: {\n '--focus-ring-width': rem(2),\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n color: 'text/secondary',\n },\n },\n\n variants: {\n variant: {\n line: {\n list: {\n borderBlockEnd: '1px solid',\n borderColor: 'border/regular',\n },\n trigger: {\n bottom: '-1px',\n display: 'flex',\n alignItems: 'center',\n gap: '8',\n paddingBlockStart: '12',\n paddingBlockEnd: rem(9),\n borderBlockEnd: '2px solid transparent',\n _selected: {\n color: 'text/primary',\n },\n _hover: {\n borderColor: 'border/hover',\n color: 'text/primary',\n },\n _disabled: {\n color: 'text/disabled',\n },\n },\n moreTrigger: {\n bottom: '-1px',\n textStyle: 'body/lg/semibold',\n paddingInline: '16',\n paddingBlockStart: '12',\n paddingBlockEnd: rem(9),\n borderBlockEnd: '2px solid transparent',\n _hover: { backgroundColor: 'background/hover', color: 'text/primary' },\n _open: { backgroundColor: 'background/active', color: 'text/primary' },\n },\n },\n contained: {\n trigger: {\n paddingBlockStart: rem(10),\n paddingBlockEnd: '12',\n backgroundColor: 'background/tertiary',\n borderBlockStart: '2px solid transparent',\n _hover: {\n backgroundColor: 'background/active',\n },\n _disabled: {\n backgroundColor: 'color/neutral/moderate',\n color: 'text/on-disabled',\n },\n _selected: {\n backgroundColor: 'background/primary',\n color: 'text/selected',\n _hover: {\n backgroundColor: 'background/primary',\n },\n },\n },\n moreTrigger: {\n // Regular weight (not the semibold tabs use) and no top marker — per the contained \"more\" design.\n textStyle: 'body/lg/regular',\n paddingInline: '16',\n paddingBlock: '12',\n backgroundColor: 'background/tertiary',\n _hover: { backgroundColor: 'background/active', color: 'text/primary' },\n _open: { backgroundColor: 'background/active', color: 'text/primary' },\n },\n },\n // IDE-style canvas tabs: fixed-height, edge-to-edge segments separated by vertical\n // dividers, with the selection marker on top. Closable + status-dot live only here.\n canvas: {\n list: {\n // Small leading gap before the first tab.\n paddingInlineStart: '12',\n borderBlockEnd: '1px solid',\n borderColor: 'border/regular',\n },\n trigger: {\n height: '40',\n display: 'flex',\n alignItems: 'center',\n gap: '8',\n textStyle: 'body/md/regular',\n backgroundColor: 'background/secondary',\n paddingInline: '12',\n paddingBlock: '8',\n // Bottom divider; shifted down 1px so it sits exactly on the list's bottom border (no\n // double line). The selected tab paints this white to merge with the content panel below.\n borderBlockEnd: '1px solid',\n bottom: '-1px',\n // Vertical divider between segments.\n borderInlineEnd: '1px solid',\n borderColor: 'border/regular',\n // The first tab also needs a leading divider (the others get theirs from the previous tab's\n // end). Set width/style only so the color comes from `borderColor` (border/regular), not the\n // shorthand's currentColor.\n '&:first-of-type': {\n borderInlineStartWidth: '1',\n borderInlineStartStyle: 'solid',\n },\n // The leading icon inherits the trigger's text color (secondary → primary by state); no\n // explicit svg rule, so the close-button icon keeps its own color.\n _hover: {\n backgroundColor: 'background/primary',\n color: 'text/primary',\n },\n _selected: {\n zIndex: 1,\n backgroundColor: 'background/primary',\n color: 'text/primary',\n // Keep neutral side dividers; the selected tab keeps a subtle bottom border because the\n // panel below it is secondary grey (not white), so it shouldn't fully merge.\n borderColor: 'border/regular',\n borderBlockEndColor: 'border/minimal',\n // Selection marker: an overlay bar on top of the selected tab only — non-selected\n // tabs have no top border, and it adds no layout height so nothing shifts.\n _after: {\n content: '\"\"',\n position: 'absolute',\n insetBlockStart: 0,\n insetInline: 0,\n height: '2',\n backgroundColor: 'border/selected',\n },\n _hover: {\n backgroundColor: 'background/primary',\n borderColor: 'border/regular',\n borderBlockEndColor: 'border/minimal',\n },\n },\n _disabled: {\n backgroundColor: 'color/neutral/moderate',\n color: 'text/on-disabled',\n _hover: {\n backgroundColor: 'color/neutral/moderate',\n color: 'text/on-disabled',\n },\n },\n },\n moreTrigger: {\n height: '40',\n textStyle: 'body/md/regular',\n paddingInline: '12',\n bottom: '-1px',\n borderBlockEnd: '1px solid',\n borderInlineEnd: '1px solid',\n borderColor: 'border/regular',\n _hover: { backgroundColor: 'background/hover', color: 'text/primary' },\n _open: { backgroundColor: 'background/active', color: 'text/primary' },\n _focusVisible: { outline: 'none', boxShadow: 'inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color)' },\n },\n },\n },\n },\n\n defaultVariants: {\n variant: 'line',\n },\n});\n\nexport default tabsSlotRecipe;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Tabs.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tabs.recipe.ts"],"sourcesContent":["import { tabsAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n// The trigger's own icon reads this variable. An `_icon` rule would also recolour the canvas close\n// button and any icon inside a badge.\n// These helpers stay unannotated: spreading a `SystemStyleObject` into the recipe makes its inferred\n// type too large for the declaration build to emit (TS7056).\nconst iconColor = (token: string) => ({ '--tabs-icon-color': `colors.${token}` });\n\nconst containedActive = {\n ...iconColor('icon/secondary'),\n backgroundColor: 'background/primary',\n color: 'text/primary',\n _after: { backgroundColor: 'border/regular' },\n};\n\nconst containedSelected = {\n ...iconColor('icon/interactive'),\n backgroundColor: 'background/primary',\n color: 'text/primary',\n};\n\nconst tabsSlotRecipe = defineSlotRecipe({\n // `moreTrigger` is a custom slot (not in the Chakra anatomy) for the overflow \"N more…\" button.\n slots: [...tabsAnatomy.keys(), 'moreTrigger'],\n className: 'chakra-tabs',\n base: {\n list: {\n display: 'flex',\n },\n trigger: {\n '--focus-ring-width': rem(2),\n ...iconColor('icon/tertiary'),\n color: 'text/secondary',\n cursor: 'pointer',\n textStyle: 'body/lg/semibold',\n paddingInline: '16',\n position: 'relative',\n textAlign: 'left',\n whiteSpace: 'nowrap',\n zIndex: 0,\n _disabled: {\n cursor: 'not-allowed',\n },\n _selected: {\n zIndex: 1,\n borderColor: 'border/selected',\n _hover: {\n borderColor: 'border/selected',\n },\n },\n },\n content: {\n outline: 'none',\n },\n // Overflow \"N more…\" button — variant-specific look is layered on per variant below.\n moreTrigger: {\n '--focus-ring-width': rem(2),\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n color: 'text/secondary',\n },\n },\n\n variants: {\n variant: {\n line: {\n list: {\n borderBlockEnd: '1px solid',\n borderColor: 'border/regular',\n // On mobile the tabs share the row, but only while all of them fit: once the \"more\" button\n // shows up they keep their content width, as they always do from tablet up.\n // Child combinators, because the inner tablist gets this slot's class too and never\n // carries the attribute.\n '&:not([data-overflowing]) > .chakra-tabs__list > .chakra-tabs__trigger': {\n flex: { baseOnly: '1' },\n justifyContent: { baseOnly: 'center' },\n },\n },\n trigger: {\n bottom: '-1px',\n display: 'flex',\n alignItems: 'center',\n gap: '12',\n paddingBlockStart: '12',\n paddingBlockEnd: rem(9),\n borderBlockEnd: '2px solid transparent',\n _selected: {\n ...iconColor('icon/interactive'),\n color: 'text/primary',\n _hover: iconColor('icon/interactive'),\n },\n _hover: {\n ...iconColor('icon/secondary'),\n borderColor: 'border/hover',\n color: 'text/primary',\n },\n _disabled: {\n ...iconColor('icon/disabled'),\n color: 'text/disabled',\n },\n },\n moreTrigger: {\n bottom: '-1px',\n textStyle: 'body/lg/semibold',\n paddingInline: '16',\n paddingBlockStart: '12',\n paddingBlockEnd: rem(9),\n borderBlockEnd: '2px solid transparent',\n _hover: { backgroundColor: 'background/hover' },\n _open: { backgroundColor: 'background/active', color: 'text/primary' },\n },\n },\n contained: {\n trigger: {\n display: 'flex',\n alignItems: 'flex-start',\n gap: '16',\n paddingBlockStart: rem(10),\n paddingBlockEnd: '12',\n backgroundColor: 'background/tertiary',\n borderBlockStart: '2px solid transparent',\n // Separator on the right edge. The last tab has none, and neither has the selected one,\n // which joins the panel below.\n _after: {\n content: '\"\"',\n position: 'absolute',\n insetBlock: 0,\n insetInlineEnd: 0,\n width: '1',\n backgroundColor: 'border/regular',\n },\n '&:last-of-type': {\n _after: { display: 'none' },\n },\n _hover: {\n ...iconColor('icon/secondary'),\n backgroundColor: 'background/active',\n _after: { backgroundColor: 'border/strong' },\n _active: containedActive,\n },\n _active: containedActive,\n _disabled: {\n ...iconColor('icon/on-disabled'),\n backgroundColor: 'color/neutral/moderate',\n color: 'text/on-disabled',\n _after: { backgroundColor: 'border/strong' },\n },\n _selected: {\n ...containedSelected,\n _after: { display: 'none' },\n _hover: { ...containedSelected, _active: containedSelected },\n _active: containedSelected,\n _focusVisible: {\n _after: { display: 'block', backgroundColor: 'border/strong' },\n },\n },\n },\n moreTrigger: {\n // Regular weight (not the semibold tabs use) and no top marker — per the contained \"more\" design.\n textStyle: 'body/lg/regular',\n paddingInline: '16',\n paddingBlock: '12',\n backgroundColor: 'background/tertiary',\n _hover: { backgroundColor: 'background/active', color: 'text/primary' },\n _open: { backgroundColor: 'background/active', color: 'text/primary' },\n },\n contentGroup: {\n backgroundColor: 'background/primary',\n borderRadius: '4',\n borderStartStartRadius: 0,\n },\n },\n // IDE-style canvas tabs: fixed-height, edge-to-edge segments separated by vertical\n // dividers, with the selection marker on top. Closable + status-dot live only here.\n canvas: {\n list: {\n // Small leading gap before the first tab.\n paddingInlineStart: '12',\n borderBlockEnd: '1px solid',\n borderColor: 'border/regular',\n },\n trigger: {\n height: '40',\n display: 'flex',\n alignItems: 'center',\n gap: '4',\n textStyle: 'body/md/regular',\n backgroundColor: 'background/secondary',\n paddingInline: '12',\n paddingBlock: '8',\n // Bottom divider; shifted down 1px so it sits exactly on the list's bottom border (no\n // double line). The selected tab paints this white to merge with the content panel below.\n borderBlockEnd: '1px solid',\n bottom: '-1px',\n // Vertical divider between segments.\n borderInlineEnd: '1px solid',\n borderColor: 'border/regular',\n // The first tab also needs a leading divider (the others get theirs from the previous tab's\n // end). Set width/style only so the color comes from `borderColor` (border/regular), not the\n // shorthand's currentColor.\n '&:first-of-type': {\n borderInlineStartWidth: '1',\n borderInlineStartStyle: 'solid',\n },\n _hover: {\n backgroundColor: 'background/primary',\n color: 'text/primary',\n },\n _selected: {\n zIndex: 1,\n backgroundColor: 'background/primary',\n color: 'text/primary',\n // Keep neutral side dividers; the selected tab keeps a subtle bottom border because the\n // panel below it is secondary grey (not white), so it shouldn't fully merge.\n borderColor: 'border/regular',\n borderBlockEndColor: 'border/minimal',\n // Selection marker: an overlay bar on top of the selected tab only — non-selected\n // tabs have no top border, and it adds no layout height so nothing shifts.\n _after: {\n content: '\"\"',\n position: 'absolute',\n insetBlockStart: 0,\n insetInline: 0,\n height: '2',\n backgroundColor: 'border/selected',\n },\n _hover: {\n backgroundColor: 'background/primary',\n borderColor: 'border/regular',\n borderBlockEndColor: 'border/minimal',\n },\n },\n _disabled: {\n ...iconColor('icon/disabled'),\n backgroundColor: 'color/neutral/moderate',\n color: 'text/on-disabled',\n _hover: {\n backgroundColor: 'color/neutral/moderate',\n color: 'text/on-disabled',\n },\n },\n },\n moreTrigger: {\n height: '40',\n textStyle: 'body/md/regular',\n paddingInline: '12',\n bottom: '-1px',\n borderBlockEnd: '1px solid',\n borderInlineEnd: '1px solid',\n borderColor: 'border/regular',\n _hover: { backgroundColor: 'background/hover', color: 'text/primary' },\n _open: { backgroundColor: 'background/active', color: 'text/primary' },\n _focusVisible: { outline: 'none', boxShadow: 'inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color)' },\n },\n contentGroup: {\n backgroundColor: 'background/primary',\n },\n },\n },\n // Only the line variant comes in two sizes; contained and canvas have one each.\n size: {\n lg: {},\n md: {},\n },\n },\n\n compoundVariants: [\n {\n variant: 'line',\n size: 'md',\n css: {\n list: {\n paddingInline: '4',\n },\n trigger: {\n textStyle: 'body/md/semibold',\n paddingInline: '12',\n paddingBlockStart: rem(10),\n paddingBlockEnd: rem(7),\n },\n moreTrigger: {\n textStyle: 'body/md/semibold',\n paddingInline: '12',\n paddingBlockStart: rem(10),\n paddingBlockEnd: rem(7),\n },\n },\n },\n ],\n\n defaultVariants: {\n size: 'lg',\n variant: 'line',\n },\n});\n\nexport default tabsSlotRecipe;\n"],"mappings":"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"}
package/dist/theme/slot-recipes/index.d.ts CHANGED
@@ -2705,24 +2705,38 @@ declare const slotRecipes: {
2705
2705
  list: {
2706
2706
  borderBlockEnd: "1px solid";
2707
2707
  borderColor: "border/regular";
2708
+ '&:not([data-overflowing]) > .chakra-tabs__list > .chakra-tabs__trigger': {
2709
+ flex: {
2710
+ baseOnly: "1";
2711
+ };
2712
+ justifyContent: {
2713
+ baseOnly: "center";
2714
+ };
2715
+ };
2708
2716
  };
2709
2717
  trigger: {
2710
2718
  bottom: "-1px";
2711
2719
  display: "flex";
2712
2720
  alignItems: "center";
2713
- gap: "8";
2721
+ gap: "12";
2714
2722
  paddingBlockStart: "12";
2715
2723
  paddingBlockEnd: `${number}rem`;
2716
2724
  borderBlockEnd: "2px solid transparent";
2717
2725
  _selected: {
2718
2726
  color: "text/primary";
2727
+ _hover: {
2728
+ '--tabs-icon-color': string;
2729
+ };
2730
+ '--tabs-icon-color': string;
2719
2731
  };
2720
2732
  _hover: {
2721
2733
  borderColor: "border/hover";
2722
2734
  color: "text/primary";
2735
+ '--tabs-icon-color': string;
2723
2736
  };
2724
2737
  _disabled: {
2725
2738
  color: "text/disabled";
2739
+ '--tabs-icon-color': string;
2726
2740
  };
2727
2741
  };
2728
2742
  moreTrigger: {
@@ -2734,7 +2748,6 @@ declare const slotRecipes: {
2734
2748
  borderBlockEnd: "2px solid transparent";
2735
2749
  _hover: {
2736
2750
  backgroundColor: "background/hover";
2737
- color: "text/primary";
2738
2751
  };
2739
2752
  _open: {
2740
2753
  backgroundColor: "background/active";
@@ -2744,23 +2757,85 @@ declare const slotRecipes: {
2744
2757
  };
2745
2758
  contained: {
2746
2759
  trigger: {
2760
+ display: "flex";
2761
+ alignItems: "flex-start";
2762
+ gap: "16";
2747
2763
  paddingBlockStart: `${number}rem`;
2748
2764
  paddingBlockEnd: "12";
2749
2765
  backgroundColor: "background/tertiary";
2750
2766
  borderBlockStart: "2px solid transparent";
2767
+ _after: {
2768
+ content: "\"\"";
2769
+ position: "absolute";
2770
+ insetBlock: number;
2771
+ insetInlineEnd: number;
2772
+ width: "1";
2773
+ backgroundColor: "border/regular";
2774
+ };
2775
+ '&:last-of-type': {
2776
+ _after: {
2777
+ display: "none";
2778
+ };
2779
+ };
2751
2780
  _hover: {
2752
2781
  backgroundColor: "background/active";
2782
+ _after: {
2783
+ backgroundColor: "border/strong";
2784
+ };
2785
+ _active: {
2786
+ backgroundColor: string;
2787
+ color: string;
2788
+ _after: {
2789
+ backgroundColor: string;
2790
+ };
2791
+ '--tabs-icon-color': string;
2792
+ };
2793
+ '--tabs-icon-color': string;
2794
+ };
2795
+ _active: {
2796
+ backgroundColor: string;
2797
+ color: string;
2798
+ _after: {
2799
+ backgroundColor: string;
2800
+ };
2801
+ '--tabs-icon-color': string;
2753
2802
  };
2754
2803
  _disabled: {
2755
2804
  backgroundColor: "color/neutral/moderate";
2756
2805
  color: "text/on-disabled";
2806
+ _after: {
2807
+ backgroundColor: "border/strong";
2808
+ };
2809
+ '--tabs-icon-color': string;
2757
2810
  };
2758
2811
  _selected: {
2759
- backgroundColor: "background/primary";
2760
- color: "text/selected";
2812
+ _after: {
2813
+ display: "none";
2814
+ };
2761
2815
  _hover: {
2762
- backgroundColor: "background/primary";
2816
+ _active: {
2817
+ backgroundColor: string;
2818
+ color: string;
2819
+ '--tabs-icon-color': string;
2820
+ };
2821
+ backgroundColor: string;
2822
+ color: string;
2823
+ '--tabs-icon-color': string;
2824
+ };
2825
+ _active: {
2826
+ backgroundColor: string;
2827
+ color: string;
2828
+ '--tabs-icon-color': string;
2763
2829
  };
2830
+ _focusVisible: {
2831
+ _after: {
2832
+ display: "block";
2833
+ backgroundColor: "border/strong";
2834
+ };
2835
+ };
2836
+ backgroundColor: string;
2837
+ color: string;
2838
+ '--tabs-icon-color': string;
2764
2839
  };
2765
2840
  };
2766
2841
  moreTrigger: {
@@ -2777,6 +2852,11 @@ declare const slotRecipes: {
2777
2852
  color: "text/primary";
2778
2853
  };
2779
2854
  };
2855
+ contentGroup: {
2856
+ backgroundColor: "background/primary";
2857
+ borderRadius: "4";
2858
+ borderStartStartRadius: number;
2859
+ };
2780
2860
  };
2781
2861
  canvas: {
2782
2862
  list: {
@@ -2788,7 +2868,7 @@ declare const slotRecipes: {
2788
2868
  height: "40";
2789
2869
  display: "flex";
2790
2870
  alignItems: "center";
2791
- gap: "8";
2871
+ gap: "4";
2792
2872
  textStyle: "body/md/regular";
2793
2873
  backgroundColor: "background/secondary";
2794
2874
  paddingInline: "12";
@@ -2832,6 +2912,7 @@ declare const slotRecipes: {
2832
2912
  backgroundColor: "color/neutral/moderate";
2833
2913
  color: "text/on-disabled";
2834
2914
  };
2915
+ '--tabs-icon-color': string;
2835
2916
  };
2836
2917
  };
2837
2918
  moreTrigger: {
@@ -2855,8 +2936,15 @@ declare const slotRecipes: {
2855
2936
  boxShadow: "inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color)";
2856
2937
  };
2857
2938
  };
2939
+ contentGroup: {
2940
+ backgroundColor: "background/primary";
2941
+ };
2858
2942
  };
2859
2943
  };
2944
+ size: {
2945
+ lg: {};
2946
+ md: {};
2947
+ };
2860
2948
  }>;
2861
2949
  tag: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "startElement" | "endElement", {
2862
2950
  colorVariant: {
package/dist/utilities/getTextContent.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { ReactNode } from 'react';
2
+ /** The text a node renders, read from its elements' children. `String()` gives "[object Object]" for an element. */
3
+ export declare const getTextContent: (node: ReactNode) => string;
package/dist/utilities/getTextContent.js ADDED
@@ -0,0 +1,14 @@
1
+ import { isValidElement } from "react";
2
+ //#region lib/utilities/getTextContent.ts
3
+ /** The text a node renders, read from its elements' children. `String()` gives "[object Object]" for an element. */
4
+ var getTextContent = (node) => {
5
+ if (typeof node === "string") return node;
6
+ if (typeof node === "number") return String(node);
7
+ if (Array.isArray(node)) return node.map(getTextContent).join("");
8
+ if (isValidElement(node)) return getTextContent(node.props.children);
9
+ return "";
10
+ };
11
+ //#endregion
12
+ export { getTextContent };
13
+
14
+ //# sourceMappingURL=getTextContent.js.map
package/dist/utilities/getTextContent.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"getTextContent.js","names":[],"sources":["../../lib/utilities/getTextContent.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from 'react';\n\n/** The text a node renders, read from its elements' children. `String()` gives \"[object Object]\" for an element. */\nexport const getTextContent = (node: ReactNode): string => {\n if (typeof node === 'string') return node;\n if (typeof node === 'number') return String(node);\n if (Array.isArray(node)) return node.map(getTextContent).join('');\n if (isValidElement(node)) return getTextContent((node.props as { children?: ReactNode }).children);\n return '';\n};\n"],"mappings":";;;AAGA,IAAa,kBAAkB,SAA4B;CACzD,IAAI,OAAO,SAAS,UAAU,OAAO;CACrC,IAAI,OAAO,SAAS,UAAU,OAAO,OAAO,IAAI;CAChD,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,KAAK,IAAI,cAAc,CAAC,CAAC,KAAK,EAAE;CAChE,IAAI,eAAe,IAAI,GAAG,OAAO,eAAgB,KAAK,MAAmC,QAAQ;CACjG,OAAO;AACT"}