@bitrise/bitkit-v2 0.3.469-beta.2976 → 0.3.469
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/BitkitCombobox/BitkitCombobox.d.ts +3 -3
- package/dist/components/BitkitCombobox/BitkitCombobox.js +2 -6
- package/dist/components/BitkitCombobox/BitkitCombobox.js.map +1 -1
- package/dist/components/BitkitMultiselect/BitkitMultiselect.d.ts +3 -3
- package/dist/components/BitkitMultiselect/BitkitMultiselect.js +1 -4
- package/dist/components/BitkitMultiselect/BitkitMultiselect.js.map +1 -1
- package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.d.ts +3 -3
- package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.js.map +1 -1
- package/dist/components/BitkitSelect/BitkitSelect.d.ts +3 -3
- package/dist/components/BitkitSelect/BitkitSelect.js +1 -4
- package/dist/components/BitkitSelect/BitkitSelect.js.map +1 -1
- package/dist/components/BitkitSelectMenu/BitkitSelectMenu.d.ts +2 -7
- package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js.map +1 -1
- package/dist/components/BitkitSelectMenu/SelectMenuShell.d.ts +3 -3
- package/dist/components/BitkitSelectMenu/SelectMenuShell.js +29 -59
- package/dist/components/BitkitSelectMenu/SelectMenuShell.js.map +1 -1
- package/dist/components/BitkitSteps/BitkitSteps.d.ts +11 -0
- package/dist/components/BitkitSteps/BitkitSteps.js +3 -6
- package/dist/components/BitkitSteps/BitkitSteps.js.map +1 -1
- package/dist/components/index.d.ts +0 -2
- package/dist/main.js +1 -4
- package/dist/theme/slot-recipes/DatePickerSelect.recipe.d.ts +2 -14
- package/dist/theme/slot-recipes/Select.recipe.d.ts +5 -23
- package/dist/theme/slot-recipes/Select.recipe.js +3 -37
- package/dist/theme/slot-recipes/Select.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/StepCard.recipe.js +12 -3
- package/dist/theme/slot-recipes/StepCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Steps.recipe.d.ts +31 -45
- package/dist/theme/slot-recipes/Steps.recipe.js +48 -48
- package/dist/theme/slot-recipes/Steps.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +38 -195
- package/dist/theme/slot-recipes/index.js +1 -3
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/BitkitUISideNav/BitkitUISideNav.d.ts +0 -38
- package/dist/components/BitkitUISideNav/BitkitUISideNav.js +0 -167
- package/dist/components/BitkitUISideNav/BitkitUISideNav.js.map +0 -1
- package/dist/components/BitkitUISideNav/UISideNavBody.d.ts +0 -7
- package/dist/components/BitkitUISideNav/UISideNavBody.js +0 -20
- package/dist/components/BitkitUISideNav/UISideNavBody.js.map +0 -1
- package/dist/components/BitkitUISideNav/UISideNavContext.d.ts +0 -32
- package/dist/components/BitkitUISideNav/UISideNavContext.js +0 -28
- package/dist/components/BitkitUISideNav/UISideNavContext.js.map +0 -1
- package/dist/components/BitkitUISideNav/UISideNavFooter.d.ts +0 -16
- package/dist/components/BitkitUISideNav/UISideNavFooter.js +0 -28
- package/dist/components/BitkitUISideNav/UISideNavFooter.js.map +0 -1
- package/dist/components/BitkitUISideNav/UISideNavFooterHeading.d.ts +0 -12
- package/dist/components/BitkitUISideNav/UISideNavFooterHeading.js +0 -26
- package/dist/components/BitkitUISideNav/UISideNavFooterHeading.js.map +0 -1
- package/dist/components/BitkitUISideNav/UISideNavItem.d.ts +0 -26
- package/dist/components/BitkitUISideNav/UISideNavItem.js +0 -33
- package/dist/components/BitkitUISideNav/UISideNavItem.js.map +0 -1
- package/dist/components/BitkitUISideNav/UISideNavLink.d.ts +0 -30
- package/dist/components/BitkitUISideNav/UISideNavLink.js +0 -58
- package/dist/components/BitkitUISideNav/UISideNavLink.js.map +0 -1
- package/dist/components/BitkitUISideNav/UISideNavWorkspaceSelector.d.ts +0 -55
- package/dist/components/BitkitUISideNav/UISideNavWorkspaceSelector.js +0 -127
- package/dist/components/BitkitUISideNav/UISideNavWorkspaceSelector.js.map +0 -1
- package/dist/theme/slot-recipes/UISideNav.recipe.d.ts +0 -119
- package/dist/theme/slot-recipes/UISideNav.recipe.js +0 -416
- package/dist/theme/slot-recipes/UISideNav.recipe.js.map +0 -1
|
@@ -1,416 +0,0 @@
|
|
|
1
|
-
import { rem } from "../themeUtils.js";
|
|
2
|
-
import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
3
|
-
//#region lib/theme/slot-recipes/UISideNav.recipe.ts
|
|
4
|
-
var RAIL_WIDTH_COLLAPSED = rem(72);
|
|
5
|
-
/**
|
|
6
|
-
* The footprint the rail keeps in the page. The expanded rail overlays the content rather than
|
|
7
|
-
* pushing it, so this is the gutter a layout reserves beside the navigation.
|
|
8
|
-
*/
|
|
9
|
-
var uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;
|
|
10
|
-
var RAIL_WIDTH_EXPANDED = rem(256);
|
|
11
|
-
var DRAWER_WIDTH = rem(320);
|
|
12
|
-
var WORKSPACE_MENU_WIDTH = rem(360);
|
|
13
|
-
var railRow = { minWidth: RAIL_WIDTH_EXPANDED };
|
|
14
|
-
var hairline = {
|
|
15
|
-
background: "border/inverse",
|
|
16
|
-
content: "\"\"",
|
|
17
|
-
height: "1",
|
|
18
|
-
opacity: .2
|
|
19
|
-
};
|
|
20
|
-
var uiSideNavSlotRecipe = defineSlotRecipe({
|
|
21
|
-
className: "ui-side-nav",
|
|
22
|
-
slots: [
|
|
23
|
-
"backdrop",
|
|
24
|
-
"body",
|
|
25
|
-
"closeButton",
|
|
26
|
-
"content",
|
|
27
|
-
"footer",
|
|
28
|
-
"footerHeading",
|
|
29
|
-
"footerSeparator",
|
|
30
|
-
"item",
|
|
31
|
-
"itemIcon",
|
|
32
|
-
"itemIndicator",
|
|
33
|
-
"itemLabel",
|
|
34
|
-
"link",
|
|
35
|
-
"linkIcon",
|
|
36
|
-
"linkIconBlock",
|
|
37
|
-
"linkLabel",
|
|
38
|
-
"linkSecondaryText",
|
|
39
|
-
"linkStatusDot",
|
|
40
|
-
"linkTextBlock",
|
|
41
|
-
"positioner",
|
|
42
|
-
"root",
|
|
43
|
-
"workspace",
|
|
44
|
-
"workspaceChevron",
|
|
45
|
-
"workspaceControl",
|
|
46
|
-
"workspaceLabel",
|
|
47
|
-
"workspaceMenu",
|
|
48
|
-
"workspaceRoot",
|
|
49
|
-
"workspaceTextBlock",
|
|
50
|
-
"workspaceValue"
|
|
51
|
-
],
|
|
52
|
-
base: {
|
|
53
|
-
root: {
|
|
54
|
-
background: "sys/ui/sidenav/bg",
|
|
55
|
-
display: "flex",
|
|
56
|
-
flexDirection: "column",
|
|
57
|
-
height: "full",
|
|
58
|
-
overflow: "hidden",
|
|
59
|
-
whiteSpace: "nowrap"
|
|
60
|
-
},
|
|
61
|
-
workspace: {
|
|
62
|
-
alignItems: "center",
|
|
63
|
-
background: "sys/ui/sidenav/item/bg",
|
|
64
|
-
borderRadius: 0,
|
|
65
|
-
color: "text/on-color",
|
|
66
|
-
cursor: "pointer",
|
|
67
|
-
display: "flex",
|
|
68
|
-
flexShrink: 0,
|
|
69
|
-
gap: "16",
|
|
70
|
-
height: rem(72),
|
|
71
|
-
minHeight: rem(72),
|
|
72
|
-
position: "relative",
|
|
73
|
-
textAlign: "start",
|
|
74
|
-
width: "full",
|
|
75
|
-
_after: {
|
|
76
|
-
...hairline,
|
|
77
|
-
insetBlockEnd: 0,
|
|
78
|
-
insetInline: 0,
|
|
79
|
-
position: "absolute"
|
|
80
|
-
},
|
|
81
|
-
_hover: {
|
|
82
|
-
background: "sys/ui/sidenav/item/bg-hover",
|
|
83
|
-
_active: { background: "sys/ui/sidenav/item/bg-active" }
|
|
84
|
-
},
|
|
85
|
-
_active: { background: "sys/ui/sidenav/item/bg-active" }
|
|
86
|
-
},
|
|
87
|
-
workspaceRoot: {
|
|
88
|
-
flexShrink: 0,
|
|
89
|
-
width: "full"
|
|
90
|
-
},
|
|
91
|
-
workspaceTextBlock: {
|
|
92
|
-
display: "flex",
|
|
93
|
-
flex: 1,
|
|
94
|
-
flexDirection: "column",
|
|
95
|
-
minWidth: 0
|
|
96
|
-
},
|
|
97
|
-
workspaceLabel: {
|
|
98
|
-
opacity: .6,
|
|
99
|
-
textStyle: "heading/h6",
|
|
100
|
-
textTransform: "uppercase"
|
|
101
|
-
},
|
|
102
|
-
workspaceValue: {
|
|
103
|
-
opacity: .8,
|
|
104
|
-
textStyle: "body/lg/regular",
|
|
105
|
-
truncate: true
|
|
106
|
-
},
|
|
107
|
-
workspaceChevron: {
|
|
108
|
-
color: "text/on-color",
|
|
109
|
-
flexShrink: 0,
|
|
110
|
-
transition: "rotate 150ms ease-out",
|
|
111
|
-
_open: { rotate: "180deg" },
|
|
112
|
-
_motionReduce: { transition: "none" }
|
|
113
|
-
},
|
|
114
|
-
body: {
|
|
115
|
-
display: "flex",
|
|
116
|
-
flex: 1,
|
|
117
|
-
flexDirection: "column",
|
|
118
|
-
minHeight: 0
|
|
119
|
-
},
|
|
120
|
-
item: {
|
|
121
|
-
alignItems: "center",
|
|
122
|
-
background: "sys/ui/sidenav/item/bg",
|
|
123
|
-
color: "sys/ui/sidenav/item/fg",
|
|
124
|
-
cursor: "pointer",
|
|
125
|
-
display: "flex",
|
|
126
|
-
flexShrink: 0,
|
|
127
|
-
overflow: "hidden",
|
|
128
|
-
paddingInlineEnd: "8",
|
|
129
|
-
paddingInlineStart: "24",
|
|
130
|
-
position: "relative",
|
|
131
|
-
textDecoration: "none",
|
|
132
|
-
width: "full",
|
|
133
|
-
_hover: {
|
|
134
|
-
background: "sys/ui/sidenav/item/bg-hover",
|
|
135
|
-
color: "sys/ui/sidenav/item/fg-hover",
|
|
136
|
-
_active: { background: "sys/ui/sidenav/item/bg-active" }
|
|
137
|
-
},
|
|
138
|
-
_active: {
|
|
139
|
-
background: "sys/ui/sidenav/item/bg-active",
|
|
140
|
-
color: "sys/ui/sidenav/item/fg-active"
|
|
141
|
-
},
|
|
142
|
-
_selected: {
|
|
143
|
-
background: "sys/ui/sidenav/item/bg-selected",
|
|
144
|
-
color: "sys/ui/sidenav/item/fg-active",
|
|
145
|
-
_hover: {
|
|
146
|
-
background: "sys/ui/sidenav/item/bg-hover",
|
|
147
|
-
_active: { background: "sys/ui/sidenav/item/bg-active" }
|
|
148
|
-
},
|
|
149
|
-
_active: { background: "sys/ui/sidenav/item/bg-active" }
|
|
150
|
-
},
|
|
151
|
-
_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" }
|
|
152
|
-
},
|
|
153
|
-
itemIcon: { flexShrink: 0 },
|
|
154
|
-
itemLabel: {
|
|
155
|
-
flex: 1,
|
|
156
|
-
minWidth: 0,
|
|
157
|
-
textStyle: "body/lg/semibold",
|
|
158
|
-
truncate: true
|
|
159
|
-
},
|
|
160
|
-
itemIndicator: {
|
|
161
|
-
background: "sys/ui/sidenav/item/indicator",
|
|
162
|
-
insetBlock: 0,
|
|
163
|
-
insetInlineStart: 0,
|
|
164
|
-
position: "absolute",
|
|
165
|
-
width: "4"
|
|
166
|
-
},
|
|
167
|
-
footer: {
|
|
168
|
-
display: "flex",
|
|
169
|
-
flexDirection: "column",
|
|
170
|
-
flexShrink: 0,
|
|
171
|
-
marginBlockStart: "auto"
|
|
172
|
-
},
|
|
173
|
-
footerSeparator: {
|
|
174
|
-
flexShrink: 0,
|
|
175
|
-
paddingBlock: "8",
|
|
176
|
-
paddingInline: "12",
|
|
177
|
-
_before: {
|
|
178
|
-
...hairline,
|
|
179
|
-
display: "block",
|
|
180
|
-
width: "full"
|
|
181
|
-
}
|
|
182
|
-
},
|
|
183
|
-
footerHeading: {
|
|
184
|
-
color: "text/on-color",
|
|
185
|
-
opacity: .6,
|
|
186
|
-
paddingBlockEnd: "12",
|
|
187
|
-
paddingInline: "24",
|
|
188
|
-
textStyle: "heading/h6",
|
|
189
|
-
textTransform: "uppercase"
|
|
190
|
-
},
|
|
191
|
-
link: {
|
|
192
|
-
alignItems: "center",
|
|
193
|
-
background: "sys/ui/sidenav/item/bg",
|
|
194
|
-
borderWidth: 0,
|
|
195
|
-
color: "sys/ui/sidenav/item/fg",
|
|
196
|
-
cursor: "pointer",
|
|
197
|
-
display: "flex",
|
|
198
|
-
flexShrink: 0,
|
|
199
|
-
overflow: "hidden",
|
|
200
|
-
paddingBlock: "12",
|
|
201
|
-
paddingInline: "24",
|
|
202
|
-
textAlign: "start",
|
|
203
|
-
textDecoration: "none",
|
|
204
|
-
width: "full",
|
|
205
|
-
_hover: {
|
|
206
|
-
background: "sys/ui/sidenav/item/bg-hover",
|
|
207
|
-
color: "sys/ui/sidenav/item/fg-hover",
|
|
208
|
-
_active: { background: "sys/ui/sidenav/item/bg-active" }
|
|
209
|
-
},
|
|
210
|
-
_active: {
|
|
211
|
-
background: "sys/ui/sidenav/item/bg-active",
|
|
212
|
-
color: "sys/ui/sidenav/item/fg-active"
|
|
213
|
-
},
|
|
214
|
-
_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" },
|
|
215
|
-
"&[data-with-secondary]": { paddingBlock: "8" }
|
|
216
|
-
},
|
|
217
|
-
linkTextBlock: {
|
|
218
|
-
display: "flex",
|
|
219
|
-
flex: 1,
|
|
220
|
-
flexDirection: "column",
|
|
221
|
-
justifyContent: "center",
|
|
222
|
-
minWidth: 0,
|
|
223
|
-
"[data-with-secondary] &": { marginBlock: "2" }
|
|
224
|
-
},
|
|
225
|
-
linkLabel: {
|
|
226
|
-
flex: 1,
|
|
227
|
-
minWidth: 0,
|
|
228
|
-
textStyle: "body/lg/regular",
|
|
229
|
-
truncate: true,
|
|
230
|
-
"[data-with-secondary] &": {
|
|
231
|
-
flex: "none",
|
|
232
|
-
textStyle: "body/md/semibold"
|
|
233
|
-
}
|
|
234
|
-
},
|
|
235
|
-
linkSecondaryText: {
|
|
236
|
-
textStyle: "body/sm/regular",
|
|
237
|
-
truncate: true
|
|
238
|
-
},
|
|
239
|
-
linkIcon: { flexShrink: 0 },
|
|
240
|
-
linkIconBlock: {
|
|
241
|
-
display: "flex",
|
|
242
|
-
flexShrink: 0,
|
|
243
|
-
position: "relative"
|
|
244
|
-
},
|
|
245
|
-
linkStatusDot: {
|
|
246
|
-
borderRadius: "full",
|
|
247
|
-
height: "8",
|
|
248
|
-
insetBlockEnd: "-2",
|
|
249
|
-
insetInlineEnd: "-4",
|
|
250
|
-
position: "absolute",
|
|
251
|
-
width: "8",
|
|
252
|
-
"&[data-status=\"neutral\"]": { background: "sys/ui/sidenav/badge/neutral" },
|
|
253
|
-
"&[data-status=\"success\"]": { background: "sys/ui/sidenav/badge/green" },
|
|
254
|
-
"&[data-status=\"critical\"]": { background: "sys/ui/sidenav/badge/red" }
|
|
255
|
-
},
|
|
256
|
-
backdrop: {
|
|
257
|
-
background: "utilities/overlay",
|
|
258
|
-
inset: 0,
|
|
259
|
-
position: "fixed",
|
|
260
|
-
zIndex: "calc({zIndex.dialogOverlay} + var(--layer-index, 0))",
|
|
261
|
-
_open: {
|
|
262
|
-
animationDuration: "slow",
|
|
263
|
-
animationName: "fade-in"
|
|
264
|
-
},
|
|
265
|
-
_closed: {
|
|
266
|
-
animationDuration: "moderate",
|
|
267
|
-
animationName: "fade-out"
|
|
268
|
-
}
|
|
269
|
-
},
|
|
270
|
-
positioner: {
|
|
271
|
-
alignItems: "stretch",
|
|
272
|
-
display: "flex",
|
|
273
|
-
inset: 0,
|
|
274
|
-
justifyContent: "flex-start",
|
|
275
|
-
overscrollBehaviorY: "none",
|
|
276
|
-
position: "fixed",
|
|
277
|
-
zIndex: "calc({zIndex.dialog} + var(--layer-index, 0))"
|
|
278
|
-
},
|
|
279
|
-
content: {
|
|
280
|
-
background: "sys/ui/sidenav/bg",
|
|
281
|
-
boxShadow: "elevation/lg",
|
|
282
|
-
display: "flex",
|
|
283
|
-
flexDirection: "column",
|
|
284
|
-
maxHeight: "100dvh",
|
|
285
|
-
outline: "none",
|
|
286
|
-
overflow: "visible",
|
|
287
|
-
position: "relative",
|
|
288
|
-
width: DRAWER_WIDTH,
|
|
289
|
-
maxWidth: "calc(100vw - 55px)",
|
|
290
|
-
_open: {
|
|
291
|
-
animationDuration: "slowest",
|
|
292
|
-
animationName: {
|
|
293
|
-
base: "slide-from-left-full, fade-in",
|
|
294
|
-
_rtl: "slide-from-right-full, fade-in"
|
|
295
|
-
},
|
|
296
|
-
animationTimingFunction: "ease-in-smooth"
|
|
297
|
-
},
|
|
298
|
-
_closed: {
|
|
299
|
-
animationDuration: "slower",
|
|
300
|
-
animationName: {
|
|
301
|
-
base: "slide-to-left-full, fade-out",
|
|
302
|
-
_rtl: "slide-to-right-full, fade-out"
|
|
303
|
-
},
|
|
304
|
-
animationTimingFunction: "ease-in-smooth"
|
|
305
|
-
}
|
|
306
|
-
},
|
|
307
|
-
closeButton: {
|
|
308
|
-
alignItems: "center",
|
|
309
|
-
display: "flex",
|
|
310
|
-
height: rem(72),
|
|
311
|
-
insetBlockStart: 0,
|
|
312
|
-
insetInlineStart: "100%",
|
|
313
|
-
paddingInlineStart: "8",
|
|
314
|
-
position: "absolute"
|
|
315
|
-
}
|
|
316
|
-
},
|
|
317
|
-
variants: { layout: {
|
|
318
|
-
rail: {
|
|
319
|
-
root: {
|
|
320
|
-
paddingBlockEnd: "12",
|
|
321
|
-
transition: "width 100ms ease-out",
|
|
322
|
-
transitionDelay: "50ms",
|
|
323
|
-
width: RAIL_WIDTH_COLLAPSED,
|
|
324
|
-
_motionReduce: { transition: "none" },
|
|
325
|
-
"&[data-expanded]": {
|
|
326
|
-
transitionDelay: "100ms",
|
|
327
|
-
width: RAIL_WIDTH_EXPANDED
|
|
328
|
-
}
|
|
329
|
-
},
|
|
330
|
-
workspace: {
|
|
331
|
-
...railRow,
|
|
332
|
-
paddingInline: "16"
|
|
333
|
-
},
|
|
334
|
-
workspaceControl: railRow,
|
|
335
|
-
workspaceMenu: { width: WORKSPACE_MENU_WIDTH },
|
|
336
|
-
body: {
|
|
337
|
-
overflowX: "hidden",
|
|
338
|
-
overflowY: "auto",
|
|
339
|
-
scrollbar: "hidden"
|
|
340
|
-
},
|
|
341
|
-
item: {
|
|
342
|
-
...railRow,
|
|
343
|
-
gap: "24",
|
|
344
|
-
paddingBlock: "16"
|
|
345
|
-
},
|
|
346
|
-
link: {
|
|
347
|
-
...railRow,
|
|
348
|
-
gap: "24"
|
|
349
|
-
},
|
|
350
|
-
footerSeparator: { "[data-expanded] &": { paddingInline: "16" } },
|
|
351
|
-
footerHeading: railRow
|
|
352
|
-
},
|
|
353
|
-
drawer: {
|
|
354
|
-
root: {
|
|
355
|
-
overflowX: "hidden",
|
|
356
|
-
overflowY: "auto",
|
|
357
|
-
width: "full"
|
|
358
|
-
},
|
|
359
|
-
workspaceRoot: {
|
|
360
|
-
background: "sys/ui/sidenav/bg",
|
|
361
|
-
insetBlockStart: 0,
|
|
362
|
-
position: "sticky",
|
|
363
|
-
zIndex: 1
|
|
364
|
-
},
|
|
365
|
-
workspace: {
|
|
366
|
-
paddingBlock: "16",
|
|
367
|
-
paddingInlineEnd: "24",
|
|
368
|
-
paddingInlineStart: "16"
|
|
369
|
-
},
|
|
370
|
-
item: {
|
|
371
|
-
gap: "12",
|
|
372
|
-
paddingBlock: "16"
|
|
373
|
-
},
|
|
374
|
-
link: { gap: "12" },
|
|
375
|
-
footer: {
|
|
376
|
-
paddingBlockEnd: "16",
|
|
377
|
-
paddingBlockStart: "12",
|
|
378
|
-
position: "relative"
|
|
379
|
-
},
|
|
380
|
-
footerHeading: {
|
|
381
|
-
paddingBlockStart: "12",
|
|
382
|
-
"&[data-section]": {
|
|
383
|
-
marginBlockStart: "12",
|
|
384
|
-
paddingBlockStart: "24",
|
|
385
|
-
position: "relative",
|
|
386
|
-
_before: {
|
|
387
|
-
...hairline,
|
|
388
|
-
insetBlockStart: 0,
|
|
389
|
-
insetInline: 0,
|
|
390
|
-
position: "absolute"
|
|
391
|
-
}
|
|
392
|
-
}
|
|
393
|
-
},
|
|
394
|
-
footerSeparator: {
|
|
395
|
-
insetBlockStart: 0,
|
|
396
|
-
insetInline: 0,
|
|
397
|
-
paddingBlock: 0,
|
|
398
|
-
paddingInline: 0,
|
|
399
|
-
position: "absolute"
|
|
400
|
-
},
|
|
401
|
-
workspaceMenu: {
|
|
402
|
-
maxHeight: "var(--available-height)",
|
|
403
|
-
"--select-menu-list-max-height": "none"
|
|
404
|
-
},
|
|
405
|
-
body: {
|
|
406
|
-
flex: "1 0 auto",
|
|
407
|
-
paddingBlock: "8"
|
|
408
|
-
}
|
|
409
|
-
}
|
|
410
|
-
} },
|
|
411
|
-
defaultVariants: { layout: "rail" }
|
|
412
|
-
});
|
|
413
|
-
//#endregion
|
|
414
|
-
export { uiSideNavSlotRecipe as default, uiSideNavRailWidth };
|
|
415
|
-
|
|
416
|
-
//# sourceMappingURL=UISideNav.recipe.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"UISideNav.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UISideNav.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst RAIL_WIDTH_COLLAPSED = rem(72);\n\n/**\n * The footprint the rail keeps in the page. The expanded rail overlays the content rather than\n * pushing it, so this is the gutter a layout reserves beside the navigation.\n */\nexport const uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;\n\nconst RAIL_WIDTH_EXPANDED = rem(256);\nconst DRAWER_WIDTH = rem(320);\nconst WORKSPACE_MENU_WIDTH = rem(360);\n\nconst railRow = { minWidth: RAIL_WIDTH_EXPANDED };\n\nconst hairline = {\n background: 'border/inverse',\n content: '\"\"',\n height: '1',\n opacity: 0.2,\n} as const;\n\nconst uiSideNavSlotRecipe = defineSlotRecipe({\n className: 'ui-side-nav',\n slots: [\n 'backdrop',\n 'body',\n 'closeButton',\n 'content',\n 'footer',\n 'footerHeading',\n 'footerSeparator',\n 'item',\n 'itemIcon',\n 'itemIndicator',\n 'itemLabel',\n 'link',\n 'linkIcon',\n 'linkIconBlock',\n 'linkLabel',\n 'linkSecondaryText',\n 'linkStatusDot',\n 'linkTextBlock',\n 'positioner',\n 'root',\n 'workspace',\n 'workspaceChevron',\n 'workspaceControl',\n 'workspaceLabel',\n 'workspaceMenu',\n 'workspaceRoot',\n 'workspaceTextBlock',\n 'workspaceValue',\n ],\n base: {\n root: {\n background: 'sys/ui/sidenav/bg',\n display: 'flex',\n flexDirection: 'column',\n height: 'full',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n workspace: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n // Preflight zeroes every border width but not the radius a native button can still draw.\n borderRadius: 0,\n color: 'text/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n gap: '16',\n height: rem(72),\n minHeight: rem(72),\n position: 'relative',\n textAlign: 'start',\n width: 'full',\n _after: {\n ...hairline,\n insetBlockEnd: 0,\n insetInline: 0,\n position: 'absolute',\n },\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n workspaceRoot: {\n flexShrink: 0,\n width: 'full',\n },\n workspaceTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minWidth: 0,\n },\n workspaceLabel: {\n opacity: 0.6,\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n workspaceValue: {\n opacity: 0.8,\n textStyle: 'body/lg/regular',\n truncate: true,\n },\n workspaceChevron: {\n color: 'text/on-color',\n flexShrink: 0,\n transition: 'rotate 150ms ease-out',\n _open: {\n rotate: '180deg',\n },\n _motionReduce: {\n transition: 'none',\n },\n },\n body: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minHeight: 0,\n },\n item: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingInlineEnd: '8',\n paddingInlineStart: '24',\n position: 'relative',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _selected: {\n background: 'sys/ui/sidenav/item/bg-selected',\n color: 'sys/ui/sidenav/item/fg-active',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n },\n itemIcon: {\n flexShrink: 0,\n },\n itemLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/semibold',\n truncate: true,\n },\n itemIndicator: {\n background: 'sys/ui/sidenav/item/indicator',\n insetBlock: 0,\n insetInlineStart: 0,\n position: 'absolute',\n width: '4',\n },\n footer: {\n display: 'flex',\n flexDirection: 'column',\n flexShrink: 0,\n marginBlockStart: 'auto',\n },\n footerSeparator: {\n flexShrink: 0,\n paddingBlock: '8',\n paddingInline: '12',\n _before: {\n ...hairline,\n display: 'block',\n width: 'full',\n },\n },\n footerHeading: {\n color: 'text/on-color',\n opacity: 0.6,\n paddingBlockEnd: '12',\n paddingInline: '24',\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n link: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n borderWidth: 0,\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingBlock: '12',\n paddingInline: '24',\n textAlign: 'start',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n '&[data-with-secondary]': {\n paddingBlock: '8',\n },\n },\n linkTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n justifyContent: 'center',\n minWidth: 0,\n '[data-with-secondary] &': {\n marginBlock: '2',\n },\n },\n linkLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/regular',\n truncate: true,\n '[data-with-secondary] &': {\n flex: 'none',\n textStyle: 'body/md/semibold',\n },\n },\n linkSecondaryText: {\n textStyle: 'body/sm/regular',\n truncate: true,\n },\n linkIcon: {\n flexShrink: 0,\n },\n linkIconBlock: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n linkStatusDot: {\n borderRadius: 'full',\n height: '8',\n insetBlockEnd: '-2',\n insetInlineEnd: '-4',\n position: 'absolute',\n width: '8',\n '&[data-status=\"neutral\"]': {\n background: 'sys/ui/sidenav/badge/neutral',\n },\n '&[data-status=\"success\"]': {\n background: 'sys/ui/sidenav/badge/green',\n },\n '&[data-status=\"critical\"]': {\n background: 'sys/ui/sidenav/badge/red',\n },\n },\n backdrop: {\n background: 'utilities/overlay',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationDuration: 'slow',\n animationName: 'fade-in',\n },\n _closed: {\n animationDuration: 'moderate',\n animationName: 'fade-out',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n // The drawer comes in from the leading edge, unlike every other drawer in the library.\n justifyContent: 'flex-start',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'sys/ui/sidenav/bg',\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n outline: 'none',\n // The close button hangs off the trailing edge, so the panel must not clip it.\n overflow: 'visible',\n position: 'relative',\n width: DRAWER_WIDTH,\n // 320 for the panel plus the 55 the close button column occupies, which is the 375 the\n // design frame is drawn at. Narrower phones give the panel up, not the button.\n maxWidth: 'calc(100vw - 55px)',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-left-full, fade-in',\n _rtl: 'slide-from-right-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-left-full, fade-out',\n _rtl: 'slide-to-right-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n closeButton: {\n alignItems: 'center',\n display: 'flex',\n height: rem(72),\n insetBlockStart: 0,\n insetInlineStart: '100%',\n paddingInlineStart: '8',\n position: 'absolute',\n },\n },\n\n variants: {\n layout: {\n rail: {\n root: {\n paddingBlockEnd: '12',\n // Opening is slower to reach than closing, so a pointer crossing the rail on its way\n // somewhere else does not drag it open.\n transition: 'width 100ms ease-out',\n transitionDelay: '50ms',\n width: RAIL_WIDTH_COLLAPSED,\n _motionReduce: {\n transition: 'none',\n },\n '&[data-expanded]': {\n transitionDelay: '100ms',\n width: RAIL_WIDTH_EXPANDED,\n },\n },\n workspace: { ...railRow, paddingInline: '16' },\n workspaceControl: railRow,\n workspaceMenu: { width: WORKSPACE_MENU_WIDTH },\n body: { overflowX: 'hidden', overflowY: 'auto', scrollbar: 'hidden' },\n item: { ...railRow, gap: '24', paddingBlock: '16' },\n link: { ...railRow, gap: '24' },\n footerSeparator: {\n '[data-expanded] &': {\n paddingInline: '16',\n },\n },\n footerHeading: railRow,\n },\n drawer: {\n root: {\n overflowX: 'hidden',\n overflowY: 'auto',\n width: 'full',\n },\n workspaceRoot: {\n background: 'sys/ui/sidenav/bg',\n insetBlockStart: 0,\n position: 'sticky',\n zIndex: 1,\n },\n workspace: {\n paddingBlock: '16',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n },\n item: { gap: '12', paddingBlock: '16' },\n link: { gap: '12' },\n footer: {\n paddingBlockEnd: '16',\n paddingBlockStart: '12',\n position: 'relative',\n },\n footerHeading: {\n paddingBlockStart: '12',\n '&[data-section]': {\n marginBlockStart: '12',\n paddingBlockStart: '24',\n position: 'relative',\n _before: {\n ...hairline,\n insetBlockStart: 0,\n insetInline: 0,\n position: 'absolute',\n },\n },\n },\n footerSeparator: {\n insetBlockStart: 0,\n insetInline: 0,\n paddingBlock: 0,\n paddingInline: 0,\n position: 'absolute',\n },\n workspaceMenu: {\n // The panel is the whole screen, so the menu takes the height it can get rather than\n // the desktop cap, which would leave a short list floating in a tall drawer.\n maxHeight: 'var(--available-height)',\n '--select-menu-list-max-height': 'none',\n },\n body: { flex: '1 0 auto', paddingBlock: '8' },\n },\n },\n },\n\n defaultVariants: {\n layout: 'rail',\n },\n});\n\nexport default uiSideNavSlotRecipe;\n"],"mappings":"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"}
|