@bitrise/bitkit-v2 0.3.479 → 0.3.480-beta.3052
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.
- package/dist/components/BitkitUIHeader/BitkitUIHeader.d.ts +37 -0
- package/dist/components/BitkitUIHeader/BitkitUIHeader.js +112 -0
- package/dist/components/BitkitUIHeader/BitkitUIHeader.js.map +1 -0
- package/dist/components/BitkitUIHeader/BitriseLogo.d.ts +10 -0
- package/dist/components/BitkitUIHeader/BitriseLogo.js +86 -0
- package/dist/components/BitkitUIHeader/BitriseLogo.js.map +1 -0
- package/dist/components/BitkitUIHeader/UIHeaderAccount.d.ts +23 -0
- package/dist/components/BitkitUIHeader/UIHeaderAccount.js +40 -0
- package/dist/components/BitkitUIHeader/UIHeaderAccount.js.map +1 -0
- package/dist/components/BitkitUIHeader/UIHeaderButton.d.ts +32 -0
- package/dist/components/BitkitUIHeader/UIHeaderButton.js +41 -0
- package/dist/components/BitkitUIHeader/UIHeaderButton.js.map +1 -0
- package/dist/components/BitkitUIHeader/UIHeaderContext.d.ts +13 -0
- package/dist/components/BitkitUIHeader/UIHeaderContext.js +11 -0
- package/dist/components/BitkitUIHeader/UIHeaderContext.js.map +1 -0
- package/dist/components/BitkitUIHeader/UIHeaderControl.d.ts +65 -0
- package/dist/components/BitkitUIHeader/UIHeaderControl.js +71 -0
- package/dist/components/BitkitUIHeader/UIHeaderControl.js.map +1 -0
- package/dist/components/BitkitUIHeader/UIHeaderNavButton.d.ts +20 -0
- package/dist/components/BitkitUIHeader/UIHeaderNavButton.js +46 -0
- package/dist/components/BitkitUIHeader/UIHeaderNavButton.js.map +1 -0
- package/dist/components/BitkitUIHeader/UIHeaderSearch.d.ts +32 -0
- package/dist/components/BitkitUIHeader/UIHeaderSearch.js +116 -0
- package/dist/components/BitkitUIHeader/UIHeaderSearch.js.map +1 -0
- package/dist/components/BitkitUIHeader/uiHeaderPart.d.ts +9 -0
- package/dist/components/BitkitUIHeader/uiHeaderPart.js +13 -0
- package/dist/components/BitkitUIHeader/uiHeaderPart.js.map +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/main.js +3 -1
- package/dist/theme/recipes/UIHeaderButton.recipe.js +103 -0
- package/dist/theme/recipes/UIHeaderButton.recipe.js.map +1 -0
- package/dist/theme/recipes/index.js +3 -1
- package/dist/theme/recipes/index.js.map +1 -1
- package/dist/theme/slot-recipes/UIHeader.recipe.d.ts +4 -0
- package/dist/theme/slot-recipes/UIHeader.recipe.js +238 -0
- package/dist/theme/slot-recipes/UIHeader.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/index.d.ts +1 -0
- package/dist/theme/slot-recipes/index.js +2 -0
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/dist/theme/themeUtils.d.ts +6 -0
- package/dist/theme/themeUtils.js +7 -1
- package/dist/theme/themeUtils.js.map +1 -1
- package/package.json +1 -1
- package/dist/theme/recipes/index.d.ts +0 -525
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
import { colorVar, rem } from "../themeUtils.js";
|
|
2
|
+
import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
3
|
+
var uiHeaderHeight = rem(48);
|
|
4
|
+
var SEARCH_FIELD_WIDTH = rem(240);
|
|
5
|
+
var SEARCH_FIELD_TINT = colorVar("color/white/20");
|
|
6
|
+
var controlBase = {
|
|
7
|
+
background: "sys/ui/header/control/bg",
|
|
8
|
+
_hover: {
|
|
9
|
+
background: "sys/ui/header/control/bg-hover",
|
|
10
|
+
_active: { background: "sys/ui/header/control/bg-active" }
|
|
11
|
+
},
|
|
12
|
+
_active: { background: "sys/ui/header/control/bg-active" },
|
|
13
|
+
_selected: {
|
|
14
|
+
background: "sys/ui/header/control/bg-selected",
|
|
15
|
+
_hover: {
|
|
16
|
+
background: "sys/ui/header/control/bg-selected-hover",
|
|
17
|
+
_active: { background: "sys/ui/header/control/bg-active" }
|
|
18
|
+
},
|
|
19
|
+
_active: { background: "sys/ui/header/control/bg-active" }
|
|
20
|
+
},
|
|
21
|
+
alignItems: "center",
|
|
22
|
+
borderRadius: 0,
|
|
23
|
+
color: "icon/on-color",
|
|
24
|
+
cursor: "pointer",
|
|
25
|
+
display: "flex",
|
|
26
|
+
flexShrink: 0,
|
|
27
|
+
height: uiHeaderHeight,
|
|
28
|
+
justifyContent: "center",
|
|
29
|
+
position: "relative",
|
|
30
|
+
textDecoration: "none",
|
|
31
|
+
_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" }
|
|
32
|
+
};
|
|
33
|
+
var uiHeaderSlotRecipe = defineSlotRecipe({
|
|
34
|
+
className: "ui-header",
|
|
35
|
+
slots: [
|
|
36
|
+
"accountAvatar",
|
|
37
|
+
"accountIcon",
|
|
38
|
+
"actions",
|
|
39
|
+
"badge",
|
|
40
|
+
"banner",
|
|
41
|
+
"bar",
|
|
42
|
+
"control",
|
|
43
|
+
"indicator",
|
|
44
|
+
"leading",
|
|
45
|
+
"logoBlock",
|
|
46
|
+
"logoLink",
|
|
47
|
+
"navButton",
|
|
48
|
+
"navButtonBadge",
|
|
49
|
+
"navButtonIcon",
|
|
50
|
+
"root",
|
|
51
|
+
"search",
|
|
52
|
+
"searchButton",
|
|
53
|
+
"searchClear",
|
|
54
|
+
"searchField",
|
|
55
|
+
"searchIcon",
|
|
56
|
+
"searchInput",
|
|
57
|
+
"spacer"
|
|
58
|
+
],
|
|
59
|
+
base: {
|
|
60
|
+
root: {
|
|
61
|
+
background: "sys/ui/header/bg",
|
|
62
|
+
color: "text/on-color",
|
|
63
|
+
display: "flex",
|
|
64
|
+
flexDirection: "column",
|
|
65
|
+
width: "full"
|
|
66
|
+
},
|
|
67
|
+
bar: {
|
|
68
|
+
alignItems: "center",
|
|
69
|
+
display: "flex",
|
|
70
|
+
flexShrink: 0,
|
|
71
|
+
height: uiHeaderHeight,
|
|
72
|
+
position: "relative",
|
|
73
|
+
tablet: { paddingInlineStart: "20" }
|
|
74
|
+
},
|
|
75
|
+
leading: {
|
|
76
|
+
display: "flex",
|
|
77
|
+
flexShrink: 0,
|
|
78
|
+
tablet: { display: "none" }
|
|
79
|
+
},
|
|
80
|
+
spacer: {
|
|
81
|
+
flexShrink: 1,
|
|
82
|
+
width: "48",
|
|
83
|
+
tablet: { display: "none" }
|
|
84
|
+
},
|
|
85
|
+
logoBlock: {
|
|
86
|
+
alignItems: "center",
|
|
87
|
+
display: "flex",
|
|
88
|
+
flex: 1,
|
|
89
|
+
justifyContent: "center",
|
|
90
|
+
minWidth: 0,
|
|
91
|
+
tablet: { flex: "none" }
|
|
92
|
+
},
|
|
93
|
+
logoLink: {
|
|
94
|
+
borderRadius: "4",
|
|
95
|
+
color: "text/on-color",
|
|
96
|
+
display: "flex",
|
|
97
|
+
marginBlockEnd: rem(3)
|
|
98
|
+
},
|
|
99
|
+
actions: {
|
|
100
|
+
alignItems: "center",
|
|
101
|
+
display: "flex",
|
|
102
|
+
flexShrink: 0,
|
|
103
|
+
marginInlineStart: "auto",
|
|
104
|
+
tablet: { paddingInlineEnd: "32" }
|
|
105
|
+
},
|
|
106
|
+
banner: { width: "full" },
|
|
107
|
+
control: {
|
|
108
|
+
...controlBase,
|
|
109
|
+
width: "48"
|
|
110
|
+
},
|
|
111
|
+
accountAvatar: {
|
|
112
|
+
borderRadius: "full",
|
|
113
|
+
display: "none",
|
|
114
|
+
overflow: "hidden",
|
|
115
|
+
tablet: { display: "inline-flex" }
|
|
116
|
+
},
|
|
117
|
+
accountIcon: {
|
|
118
|
+
display: "block",
|
|
119
|
+
tablet: { display: "none" }
|
|
120
|
+
},
|
|
121
|
+
navButton: {
|
|
122
|
+
...controlBase,
|
|
123
|
+
paddingBlock: "8",
|
|
124
|
+
paddingInlineEnd: "8",
|
|
125
|
+
paddingInlineStart: "12"
|
|
126
|
+
},
|
|
127
|
+
navButtonBadge: {
|
|
128
|
+
alignItems: "flex-start",
|
|
129
|
+
background: "sys/ui/header/bg",
|
|
130
|
+
borderStartStartRadius: "2",
|
|
131
|
+
color: "icon/on-color",
|
|
132
|
+
display: "flex",
|
|
133
|
+
height: "12",
|
|
134
|
+
insetBlockEnd: "8",
|
|
135
|
+
insetInlineEnd: "8",
|
|
136
|
+
overflow: "hidden",
|
|
137
|
+
pointerEvents: "none",
|
|
138
|
+
position: "absolute",
|
|
139
|
+
width: "16"
|
|
140
|
+
},
|
|
141
|
+
navButtonIcon: {
|
|
142
|
+
flexShrink: 0,
|
|
143
|
+
marginBlockStart: rem(-1),
|
|
144
|
+
marginInlineStart: "1"
|
|
145
|
+
},
|
|
146
|
+
badge: {
|
|
147
|
+
background: "sys/ui/header/badge/red",
|
|
148
|
+
borderRadius: "full",
|
|
149
|
+
height: "8",
|
|
150
|
+
insetBlockStart: "12",
|
|
151
|
+
insetInlineStart: rem(28),
|
|
152
|
+
pointerEvents: "none",
|
|
153
|
+
position: "absolute",
|
|
154
|
+
width: "8",
|
|
155
|
+
"&[data-pulse]": { _after: {
|
|
156
|
+
animation: "ping",
|
|
157
|
+
background: "sys/ui/header/badge/red",
|
|
158
|
+
borderRadius: "full",
|
|
159
|
+
content: "\"\"",
|
|
160
|
+
inset: 0,
|
|
161
|
+
opacity: .5,
|
|
162
|
+
position: "absolute",
|
|
163
|
+
_motionReduce: { animation: "none" }
|
|
164
|
+
} }
|
|
165
|
+
},
|
|
166
|
+
indicator: {
|
|
167
|
+
background: "sys/ui/header/control/indicator",
|
|
168
|
+
height: "4",
|
|
169
|
+
insetBlockEnd: 0,
|
|
170
|
+
insetInline: 0,
|
|
171
|
+
pointerEvents: "none",
|
|
172
|
+
position: "absolute"
|
|
173
|
+
},
|
|
174
|
+
search: {
|
|
175
|
+
display: "flex",
|
|
176
|
+
flexShrink: 0,
|
|
177
|
+
position: "relative"
|
|
178
|
+
},
|
|
179
|
+
searchField: {
|
|
180
|
+
alignItems: "center",
|
|
181
|
+
backgroundColor: "sys/ui/header/bg",
|
|
182
|
+
backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,
|
|
183
|
+
borderColor: "border/strong",
|
|
184
|
+
borderRadius: "4",
|
|
185
|
+
borderStyle: "solid",
|
|
186
|
+
borderWidth: "1",
|
|
187
|
+
display: "none",
|
|
188
|
+
gap: "8",
|
|
189
|
+
height: "40",
|
|
190
|
+
insetBlockStart: "4",
|
|
191
|
+
insetInlineEnd: 0,
|
|
192
|
+
opacity: 0,
|
|
193
|
+
paddingInlineEnd: "12",
|
|
194
|
+
paddingInlineStart: "8",
|
|
195
|
+
position: "absolute",
|
|
196
|
+
transitionDuration: "fast",
|
|
197
|
+
transitionProperty: "opacity, visibility",
|
|
198
|
+
transitionTimingFunction: "ease-out",
|
|
199
|
+
visibility: "hidden",
|
|
200
|
+
width: SEARCH_FIELD_WIDTH,
|
|
201
|
+
"&:has(input:focus-visible)": { boxShadow: "0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset" },
|
|
202
|
+
_open: {
|
|
203
|
+
opacity: 1,
|
|
204
|
+
visibility: "visible"
|
|
205
|
+
},
|
|
206
|
+
_motionReduce: { transitionProperty: "none" },
|
|
207
|
+
tablet: { display: "flex" }
|
|
208
|
+
},
|
|
209
|
+
searchButton: { tablet: { _open: { visibility: "hidden" } } },
|
|
210
|
+
searchClear: {
|
|
211
|
+
color: "icon/on-color",
|
|
212
|
+
flexShrink: 0
|
|
213
|
+
},
|
|
214
|
+
searchIcon: {
|
|
215
|
+
color: "icon/on-color",
|
|
216
|
+
flexShrink: 0
|
|
217
|
+
},
|
|
218
|
+
searchInput: {
|
|
219
|
+
background: "transparent",
|
|
220
|
+
borderWidth: 0,
|
|
221
|
+
color: "text/on-color",
|
|
222
|
+
flex: 1,
|
|
223
|
+
focusVisibleRing: "none",
|
|
224
|
+
minWidth: 0,
|
|
225
|
+
padding: 0,
|
|
226
|
+
textStyle: "body/lg/regular",
|
|
227
|
+
"&::-webkit-search-cancel-button": { display: "none" },
|
|
228
|
+
_placeholder: {
|
|
229
|
+
color: "text/on-color",
|
|
230
|
+
opacity: .6
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
//#endregion
|
|
236
|
+
export { uiHeaderSlotRecipe as default, uiHeaderHeight };
|
|
237
|
+
|
|
238
|
+
//# sourceMappingURL=UIHeader.recipe.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UIHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UIHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { colorVar, rem } from '../themeUtils';\n\nexport const uiHeaderHeightPx = 48;\nexport const uiHeaderHeight = rem(uiHeaderHeightPx);\n\nconst SEARCH_FIELD_WIDTH = rem(240);\n\nconst SEARCH_FIELD_TINT = colorVar('color/white/20');\n\nconst controlStates: SystemStyleObject = {\n background: 'sys/ui/header/control/bg',\n _hover: {\n background: 'sys/ui/header/control/bg-hover',\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n _selected: {\n background: 'sys/ui/header/control/bg-selected',\n _hover: {\n background: 'sys/ui/header/control/bg-selected-hover',\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n};\n\nconst controlBase: SystemStyleObject = {\n ...controlStates,\n alignItems: 'center',\n borderRadius: 0,\n color: 'icon/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n justifyContent: 'center',\n position: 'relative',\n textDecoration: 'none',\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n};\n\nconst uiHeaderSlotRecipe = defineSlotRecipe({\n className: 'ui-header',\n slots: [\n 'accountAvatar',\n 'accountIcon',\n 'actions',\n 'badge',\n 'banner',\n 'bar',\n 'control',\n 'indicator',\n 'leading',\n 'logoBlock',\n 'logoLink',\n 'navButton',\n 'navButtonBadge',\n 'navButtonIcon',\n 'root',\n 'search',\n 'searchButton',\n 'searchClear',\n 'searchField',\n 'searchIcon',\n 'searchInput',\n 'spacer',\n ],\n base: {\n root: {\n background: 'sys/ui/header/bg',\n color: 'text/on-color',\n display: 'flex',\n flexDirection: 'column',\n width: 'full',\n },\n bar: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n position: 'relative',\n tablet: {\n paddingInlineStart: '20',\n },\n },\n leading: {\n display: 'flex',\n flexShrink: 0,\n tablet: {\n display: 'none',\n },\n },\n spacer: {\n flexShrink: 1,\n width: '48',\n tablet: {\n display: 'none',\n },\n },\n logoBlock: {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n justifyContent: 'center',\n minWidth: 0,\n tablet: {\n flex: 'none',\n },\n },\n logoLink: {\n borderRadius: '4',\n color: 'text/on-color',\n display: 'flex',\n marginBlockEnd: rem(3),\n },\n actions: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n marginInlineStart: 'auto',\n tablet: {\n paddingInlineEnd: '32',\n },\n },\n banner: {\n width: 'full',\n },\n control: {\n ...controlBase,\n width: '48',\n },\n accountAvatar: {\n borderRadius: 'full',\n display: 'none',\n overflow: 'hidden',\n tablet: {\n display: 'inline-flex',\n },\n },\n accountIcon: {\n display: 'block',\n tablet: {\n display: 'none',\n },\n },\n navButton: {\n ...controlBase,\n paddingBlock: '8',\n paddingInlineEnd: '8',\n paddingInlineStart: '12',\n },\n navButtonBadge: {\n alignItems: 'flex-start',\n background: 'sys/ui/header/bg',\n borderStartStartRadius: '2',\n color: 'icon/on-color',\n display: 'flex',\n height: '12',\n insetBlockEnd: '8',\n insetInlineEnd: '8',\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n width: '16',\n },\n navButtonIcon: {\n flexShrink: 0,\n marginBlockStart: rem(-1),\n marginInlineStart: '1',\n },\n badge: {\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n height: '8',\n insetBlockStart: '12',\n insetInlineStart: rem(28),\n pointerEvents: 'none',\n position: 'absolute',\n width: '8',\n '&[data-pulse]': {\n _after: {\n animation: 'ping',\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n content: '\"\"',\n inset: 0,\n opacity: 0.5,\n position: 'absolute',\n _motionReduce: {\n animation: 'none',\n },\n },\n },\n },\n indicator: {\n background: 'sys/ui/header/control/indicator',\n height: '4',\n insetBlockEnd: 0,\n insetInline: 0,\n pointerEvents: 'none',\n position: 'absolute',\n },\n search: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n searchField: {\n alignItems: 'center',\n backgroundColor: 'sys/ui/header/bg',\n backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,\n borderColor: 'border/strong',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n display: 'none',\n gap: '8',\n height: '40',\n insetBlockStart: '4',\n insetInlineEnd: 0,\n opacity: 0,\n paddingInlineEnd: '12',\n paddingInlineStart: '8',\n position: 'absolute',\n transitionDuration: 'fast',\n // `visibility` is what takes the closed field out of hit-testing, the tab order and the\n // accessibility tree in one go. Transitioning it keeps the field visible for the whole fade\n // and flips it at the end, which `opacity` alone could not do.\n transitionProperty: 'opacity, visibility',\n transitionTimingFunction: 'ease-out',\n visibility: 'hidden',\n width: SEARCH_FIELD_WIDTH,\n '&:has(input:focus-visible)': {\n boxShadow: '0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset',\n },\n _open: {\n opacity: 1,\n visibility: 'visible',\n },\n _motionReduce: {\n transitionProperty: 'none',\n },\n tablet: {\n display: 'flex',\n },\n },\n searchButton: {\n tablet: {\n _open: {\n visibility: 'hidden',\n },\n },\n },\n searchClear: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchIcon: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchInput: {\n background: 'transparent',\n borderWidth: 0,\n color: 'text/on-color',\n flex: 1,\n focusVisibleRing: 'none',\n minWidth: 0,\n padding: 0,\n textStyle: 'body/lg/regular',\n '&::-webkit-search-cancel-button': { display: 'none' },\n _placeholder: {\n color: 'text/on-color',\n opacity: 0.6,\n },\n },\n },\n});\n\nexport default uiHeaderSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -3602,6 +3602,7 @@ declare const slotRecipes: {
|
|
|
3602
3602
|
};
|
|
3603
3603
|
};
|
|
3604
3604
|
}>;
|
|
3605
|
+
uiHeader: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink">>;
|
|
3605
3606
|
uiSideNav: import('@chakra-ui/react').SlotRecipeDefinition<"link" | "content" | "body" | "footer" | "closeButton" | "root" | "item" | "itemIndicator" | "positioner" | "itemLabel" | "itemIcon" | "backdrop" | "footerSeparator" | "footerHeading" | "linkIconBlock" | "linkTextBlock" | "linkIcon" | "linkStatusDot" | "linkLabel" | "linkSecondaryText" | "workspaceRoot" | "workspaceControl" | "workspace" | "workspaceTextBlock" | "workspaceChevron" | "workspaceMenu" | "workspaceLabel" | "workspaceValue", {
|
|
3606
3607
|
layout: {
|
|
3607
3608
|
rail: {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import avatarSlotRecipe from "./Avatar.recipe.js";
|
|
2
2
|
import numberInputSlotRecipe from "./NumberInput.recipe.js";
|
|
3
|
+
import uiHeaderSlotRecipe from "./UIHeader.recipe.js";
|
|
3
4
|
import uiSideNavSlotRecipe from "./UISideNav.recipe.js";
|
|
4
5
|
import accordionSlotRecipe from "./Accordion.recipe.js";
|
|
5
6
|
import actionBarSlotRecipe from "./ActionBar.recipe.js";
|
|
@@ -129,6 +130,7 @@ var slotRecipes = {
|
|
|
129
130
|
tooltip: tooltipSlotRecipe,
|
|
130
131
|
tour: tourSlotRecipe,
|
|
131
132
|
treeView: treeViewSlotRecipe,
|
|
133
|
+
uiHeader: uiHeaderSlotRecipe,
|
|
132
134
|
uiSideNav: uiSideNavSlotRecipe
|
|
133
135
|
};
|
|
134
136
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["groupHeadingSlotRecipe","inlineLoadingSlotRecipe","paginationLoadMoreSlotRecipe","sectionHeadingSlotRecipe"],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport pageHeaderSlotRecipe from './PageHeader.recipe.ts';\nimport pageSidebarSlotRecipe from './PageSidebar.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport progressSlotRecipe from './Progress.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tableCardSlotRecipe from './TableCard.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport toggletipSlotRecipe from './Toggletip.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\nimport uiSideNavSlotRecipe from './UISideNav.recipe.ts';\n\nconst slotRecipes = {\n accordion: accordionSlotRecipe,\n actionBar: actionBarSlotRecipe,\n alert: alertSlotRecipe,\n avatar: avatarSlotRecipe,\n breadcrumb: breadcrumbSlotRecipe,\n card: cardSlotRecipe,\n checkbox: checkboxSlotRecipe,\n codeSnippet: codeSnippetSlotRecipe,\n collapsible: collapsibleSlotRecipe,\n combobox: comboboxSlotRecipe,\n dataWidget: dataWidgetSlotRecipe,\n datePicker: datePickerSlotRecipe,\n datePickerSelect: datePickerSelectSlotRecipe,\n dialog: dialogSlotRecipe,\n draggableCard: draggableCardSlotRecipe,\n drawer: drawerSlotRecipe,\n emptyState: emptyStateSlotRecipe,\n expandableCard: expandableCardSlotRecipe,\n field: fieldSlotRecipe,\n groupHeading: groupHeadingSlotRecipe,\n fieldset: fieldsetSlotRecipe,\n fileUpload: fileUploadSlotRecipe,\n imageCropper: imageCropperSlotRecipe,\n inlineLoading: inlineLoadingSlotRecipe,\n list: listSlotRecipe,\n markdown: markdownSlotRecipe,\n markdownCard: markdownCardSlotRecipe,\n menu: menuSlotRecipe,\n multiselect: multiselectSlotRecipe,\n noteCard: noteCardSlotRecipe,\n nativeSelect: nativeSelectSlotRecipe,\n numberInput: numberInputSlotRecipe,\n overflowContent: overflowContentSlotRecipe,\n pageFooter: pageFooterSlotRecipe,\n pageHeader: pageHeaderSlotRecipe,\n pageSidebar: pageSidebarSlotRecipe,\n pagination: paginationSlotRecipe,\n paginationLoadMore: paginationLoadMoreSlotRecipe,\n popover: popoverSlotRecipe,\n progress: progressSlotRecipe,\n qrCode: qrCodeSlotRecipe,\n radioGroup: radioGroupSlotRecipe,\n ribbon: ribbonSlotRecipe,\n sectionHeading: sectionHeadingSlotRecipe,\n labeledData: labeledDataSlotRecipe,\n segmentGroup: segmentGroupSlotRecipe,\n select: selectSlotRecipe,\n settingsCard: settingsCardSlotRecipe,\n splitButton: splitButtonSlotRecipe,\n stat: statSlotRecipe,\n stepsCard: stepCardSlotRecipe,\n steps: stepsSlotRecipe,\n switch: switchSlotRecipe,\n table: tableSlotRecipe,\n tableCard: tableCardSlotRecipe,\n tabs: tabsSlotRecipe,\n tag: tagSlotRecipe,\n tagsInput: tagsInputSlotRecipe,\n textInput: textInputSlotRecipe,\n toast: toastSlotRecipe,\n toggletip: toggletipSlotRecipe,\n tooltip: tooltipSlotRecipe,\n tour: tourSlotRecipe,\n treeView: treeViewSlotRecipe,\n uiSideNav: uiSideNavSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":["groupHeadingSlotRecipe","inlineLoadingSlotRecipe","paginationLoadMoreSlotRecipe","sectionHeadingSlotRecipe"],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport pageHeaderSlotRecipe from './PageHeader.recipe.ts';\nimport pageSidebarSlotRecipe from './PageSidebar.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport progressSlotRecipe from './Progress.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tableCardSlotRecipe from './TableCard.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport toggletipSlotRecipe from './Toggletip.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\nimport uiHeaderSlotRecipe from './UIHeader.recipe';\nimport uiSideNavSlotRecipe from './UISideNav.recipe.ts';\n\nconst slotRecipes = {\n accordion: accordionSlotRecipe,\n actionBar: actionBarSlotRecipe,\n alert: alertSlotRecipe,\n avatar: avatarSlotRecipe,\n breadcrumb: breadcrumbSlotRecipe,\n card: cardSlotRecipe,\n checkbox: checkboxSlotRecipe,\n codeSnippet: codeSnippetSlotRecipe,\n collapsible: collapsibleSlotRecipe,\n combobox: comboboxSlotRecipe,\n dataWidget: dataWidgetSlotRecipe,\n datePicker: datePickerSlotRecipe,\n datePickerSelect: datePickerSelectSlotRecipe,\n dialog: dialogSlotRecipe,\n draggableCard: draggableCardSlotRecipe,\n drawer: drawerSlotRecipe,\n emptyState: emptyStateSlotRecipe,\n expandableCard: expandableCardSlotRecipe,\n field: fieldSlotRecipe,\n groupHeading: groupHeadingSlotRecipe,\n fieldset: fieldsetSlotRecipe,\n fileUpload: fileUploadSlotRecipe,\n imageCropper: imageCropperSlotRecipe,\n inlineLoading: inlineLoadingSlotRecipe,\n list: listSlotRecipe,\n markdown: markdownSlotRecipe,\n markdownCard: markdownCardSlotRecipe,\n menu: menuSlotRecipe,\n multiselect: multiselectSlotRecipe,\n noteCard: noteCardSlotRecipe,\n nativeSelect: nativeSelectSlotRecipe,\n numberInput: numberInputSlotRecipe,\n overflowContent: overflowContentSlotRecipe,\n pageFooter: pageFooterSlotRecipe,\n pageHeader: pageHeaderSlotRecipe,\n pageSidebar: pageSidebarSlotRecipe,\n pagination: paginationSlotRecipe,\n paginationLoadMore: paginationLoadMoreSlotRecipe,\n popover: popoverSlotRecipe,\n progress: progressSlotRecipe,\n qrCode: qrCodeSlotRecipe,\n radioGroup: radioGroupSlotRecipe,\n ribbon: ribbonSlotRecipe,\n sectionHeading: sectionHeadingSlotRecipe,\n labeledData: labeledDataSlotRecipe,\n segmentGroup: segmentGroupSlotRecipe,\n select: selectSlotRecipe,\n settingsCard: settingsCardSlotRecipe,\n splitButton: splitButtonSlotRecipe,\n stat: statSlotRecipe,\n stepsCard: stepCardSlotRecipe,\n steps: stepsSlotRecipe,\n switch: switchSlotRecipe,\n table: tableSlotRecipe,\n tableCard: tableCardSlotRecipe,\n tabs: tabsSlotRecipe,\n tag: tagSlotRecipe,\n tagsInput: tagsInputSlotRecipe,\n textInput: textInputSlotRecipe,\n toast: toastSlotRecipe,\n toggletip: toggletipSlotRecipe,\n tooltip: tooltipSlotRecipe,\n tour: tourSlotRecipe,\n treeView: treeViewSlotRecipe,\n uiHeader: uiHeaderSlotRecipe,\n uiSideNav: uiSideNavSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAcA;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAeC;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,oBAAoBC;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgBC;CAChB,aAAa;CACb,cAAc;CACd,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,WAAW;CACX,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,WAAW;CACX,SAAS;CACT,MAAM;CACN,UAAU;CACV,UAAU;CACV,WAAW;AACb"}
|
|
@@ -8,6 +8,12 @@ export declare function withSlashes(object: Record<string, any>): Record<string,
|
|
|
8
8
|
* @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`
|
|
9
9
|
*/
|
|
10
10
|
export declare const rem: (input: number) => `${number}rem`;
|
|
11
|
+
/**
|
|
12
|
+
* A colour token as the raw CSS variable Chakra compiles it to, for the places a `{colors.…}`
|
|
13
|
+
* reference cannot go: inside a compound value like a gradient, Chakra reads the token's first `/`
|
|
14
|
+
* as its colour-mix opacity modifier, so the slashes have to be escaped by hand instead.
|
|
15
|
+
*/
|
|
16
|
+
export declare const colorVar: (token: string) => string;
|
|
11
17
|
/**
|
|
12
18
|
* The colour tokens under the given prefixes, for props that must take a semantic token.
|
|
13
19
|
*
|
package/dist/theme/themeUtils.js
CHANGED
|
@@ -29,7 +29,13 @@ function withSlashes(object) {
|
|
|
29
29
|
var rem = (input) => {
|
|
30
30
|
return `${input / 16}rem`;
|
|
31
31
|
};
|
|
32
|
+
/**
|
|
33
|
+
* A colour token as the raw CSS variable Chakra compiles it to, for the places a `{colors.…}`
|
|
34
|
+
* reference cannot go: inside a compound value like a gradient, Chakra reads the token's first `/`
|
|
35
|
+
* as its colour-mix opacity modifier, so the slashes have to be escaped by hand instead.
|
|
36
|
+
*/
|
|
37
|
+
var colorVar = (token) => `var(--colors-${token.replace(/\//g, "\\/")})`;
|
|
32
38
|
//#endregion
|
|
33
|
-
export { flattenTokens, rem, withSlashes };
|
|
39
|
+
export { colorVar, flattenTokens, rem, withSlashes };
|
|
34
40
|
|
|
35
41
|
//# sourceMappingURL=themeUtils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeUtils.js","names":[],"sources":["../../lib/theme/themeUtils.ts"],"sourcesContent":["import { type Tokens } from '@chakra-ui/react/styled-system';\nimport { type TextProps } from '@chakra-ui/react/text';\nimport { isPlainObject } from 'es-toolkit';\n\n// Based on https://github.com/toss/es-toolkit/blob/main/src/object/flattenObject.ts\nexport const flattenTokens = (object: object, prefix: string = ''): Record<string, any> => {\n const result: Record<string, any> = {};\n const keys = Object.keys(object);\n\n for (let i = 0; i < keys.length; i++) {\n const key = keys[i];\n const value = (object as any)[key];\n\n const prefixedKey = prefix ? `${prefix}/${key}` : key;\n\n if (isPlainObject(value) && Object.keys(value).length > 0 && Object.keys(value)[0] !== 'value') {\n Object.assign(result, flattenTokens(value, prefixedKey));\n continue;\n }\n\n result[prefixedKey] = value;\n }\n\n return result;\n};\n\nexport function withSlashes(object: Record<string, any>): Record<string, any> {\n return {\n ...object,\n ...flattenTokens(object),\n };\n}\n\n/**\n *\n * @param input Value in pixels\n * @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`\n */\nexport const rem = (input: number): `${number}rem` => {\n return `${input / 16}rem`;\n};\n\n/**\n * The colour tokens under the given prefixes, for props that must take a semantic token.\n *\n * `Tokens` is generated in the consumer's own project by `chakra typegen`, which\n * `scripts/postinstall.cjs` runs and which exits 0 with a warning when it cannot. Where it did not\n * run, `Tokens['colors']` is Chakra's stock union, the `Extract` has nothing to match and collapses\n * to `never` -- which would make every prop using it a type error pointing at the wrong thing. So it\n * falls back to `string`: the narrowing is a guard where the types are real, not a tripwire where\n * they are not.\n */\nexport type BitkitColorToken<Prefix extends string> = [Extract<Tokens['colors'], `${Prefix}/${string}`>] extends [never]\n ? string\n : Extract<Tokens['colors'], `${Prefix}/${string}`>;\n\nexport const getTextStyle = (as: TextProps['as']) => {\n if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(as as string)) {\n return `heading/${as}`;\n }\n return undefined;\n};\n"],"mappings":";;AAKA,IAAa,iBAAiB,QAAgB,SAAiB,OAA4B;CACzF,MAAM,SAA8B,CAAC;CACrC,MAAM,OAAO,OAAO,KAAK,MAAM;CAE/B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,MAAM,KAAK;EACjB,MAAM,QAAS,OAAe;EAE9B,MAAM,cAAc,SAAS,GAAG,OAAO,GAAG,QAAQ;EAElD,IAAI,cAAc,KAAK,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,OAAO,SAAS;GAC9F,OAAO,OAAO,QAAQ,cAAc,OAAO,WAAW,CAAC;GACvD;EACF;EAEA,OAAO,eAAe;CACxB;CAEA,OAAO;AACT;AAEA,SAAgB,YAAY,QAAkD;CAC5E,OAAO;EACL,GAAG;EACH,GAAG,cAAc,MAAM;CACzB;AACF;;;;;;AAOA,IAAa,OAAO,UAAkC;CACpD,OAAO,GAAG,QAAQ,GAAG;AACvB"}
|
|
1
|
+
{"version":3,"file":"themeUtils.js","names":[],"sources":["../../lib/theme/themeUtils.ts"],"sourcesContent":["import { type Tokens } from '@chakra-ui/react/styled-system';\nimport { type TextProps } from '@chakra-ui/react/text';\nimport { isPlainObject } from 'es-toolkit';\n\n// Based on https://github.com/toss/es-toolkit/blob/main/src/object/flattenObject.ts\nexport const flattenTokens = (object: object, prefix: string = ''): Record<string, any> => {\n const result: Record<string, any> = {};\n const keys = Object.keys(object);\n\n for (let i = 0; i < keys.length; i++) {\n const key = keys[i];\n const value = (object as any)[key];\n\n const prefixedKey = prefix ? `${prefix}/${key}` : key;\n\n if (isPlainObject(value) && Object.keys(value).length > 0 && Object.keys(value)[0] !== 'value') {\n Object.assign(result, flattenTokens(value, prefixedKey));\n continue;\n }\n\n result[prefixedKey] = value;\n }\n\n return result;\n};\n\nexport function withSlashes(object: Record<string, any>): Record<string, any> {\n return {\n ...object,\n ...flattenTokens(object),\n };\n}\n\n/**\n *\n * @param input Value in pixels\n * @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`\n */\nexport const rem = (input: number): `${number}rem` => {\n return `${input / 16}rem`;\n};\n\n/**\n * A colour token as the raw CSS variable Chakra compiles it to, for the places a `{colors.…}`\n * reference cannot go: inside a compound value like a gradient, Chakra reads the token's first `/`\n * as its colour-mix opacity modifier, so the slashes have to be escaped by hand instead.\n */\nexport const colorVar = (token: string): string => `var(--colors-${token.replace(/\\//g, '\\\\/')})`;\n\n/**\n * The colour tokens under the given prefixes, for props that must take a semantic token.\n *\n * `Tokens` is generated in the consumer's own project by `chakra typegen`, which\n * `scripts/postinstall.cjs` runs and which exits 0 with a warning when it cannot. Where it did not\n * run, `Tokens['colors']` is Chakra's stock union, the `Extract` has nothing to match and collapses\n * to `never` -- which would make every prop using it a type error pointing at the wrong thing. So it\n * falls back to `string`: the narrowing is a guard where the types are real, not a tripwire where\n * they are not.\n */\nexport type BitkitColorToken<Prefix extends string> = [Extract<Tokens['colors'], `${Prefix}/${string}`>] extends [never]\n ? string\n : Extract<Tokens['colors'], `${Prefix}/${string}`>;\n\nexport const getTextStyle = (as: TextProps['as']) => {\n if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(as as string)) {\n return `heading/${as}`;\n }\n return undefined;\n};\n"],"mappings":";;AAKA,IAAa,iBAAiB,QAAgB,SAAiB,OAA4B;CACzF,MAAM,SAA8B,CAAC;CACrC,MAAM,OAAO,OAAO,KAAK,MAAM;CAE/B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,MAAM,KAAK;EACjB,MAAM,QAAS,OAAe;EAE9B,MAAM,cAAc,SAAS,GAAG,OAAO,GAAG,QAAQ;EAElD,IAAI,cAAc,KAAK,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,OAAO,SAAS;GAC9F,OAAO,OAAO,QAAQ,cAAc,OAAO,WAAW,CAAC;GACvD;EACF;EAEA,OAAO,eAAe;CACxB;CAEA,OAAO;AACT;AAEA,SAAgB,YAAY,QAAkD;CAC5E,OAAO;EACL,GAAG;EACH,GAAG,cAAc,MAAM;CACzB;AACF;;;;;;AAOA,IAAa,OAAO,UAAkC;CACpD,OAAO,GAAG,QAAQ,GAAG;AACvB;;;;;;AAOA,IAAa,YAAY,UAA0B,gBAAgB,MAAM,QAAQ,OAAO,KAAK,EAAE"}
|