@bitrise/bitkit-v2 0.3.195 → 0.3.197
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/BitkitPageFooter/BitkitPageFooter.d.ts +26 -0
- package/dist/components/BitkitPageFooter/BitkitPageFooter.js +90 -0
- package/dist/components/BitkitPageFooter/BitkitPageFooter.js.map +1 -0
- package/dist/components/BitkitTreeView/BitkitTreeView.d.ts +34 -0
- package/dist/components/BitkitTreeView/BitkitTreeView.js +109 -0
- package/dist/components/BitkitTreeView/BitkitTreeView.js.map +1 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/main.js +3 -1
- package/dist/theme/slot-recipes/PageFooter.recipe.d.ts +96 -0
- package/dist/theme/slot-recipes/PageFooter.recipe.js +191 -0
- package/dist/theme/slot-recipes/PageFooter.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/TreeView.recipe.d.ts +152 -0
- package/dist/theme/slot-recipes/TreeView.recipe.js +250 -0
- package/dist/theme/slot-recipes/TreeView.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/index.d.ts +246 -0
- package/dist/theme/slot-recipes/index.js +5 -1
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/dist/theme/tokens/index.d.ts +3 -0
- package/dist/theme/tokens/radii.d.ts +3 -0
- package/dist/theme/tokens/radii.js +2 -1
- package/dist/theme/tokens/radii.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "secondaryText" | "root" | "item" | "itemIndicator" | "tree" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
|
|
2
|
+
variant: {
|
|
3
|
+
files: {
|
|
4
|
+
branchControl: {
|
|
5
|
+
borderRadius: "4";
|
|
6
|
+
paddingInlineEnd: "16";
|
|
7
|
+
'& > svg': {
|
|
8
|
+
marginBlockStart: "8";
|
|
9
|
+
};
|
|
10
|
+
'& > .badge': {
|
|
11
|
+
marginBlockStart: "6";
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
item: {
|
|
15
|
+
borderRadius: "4";
|
|
16
|
+
paddingInlineEnd: "16";
|
|
17
|
+
'& > svg': {
|
|
18
|
+
marginBlockStart: "8";
|
|
19
|
+
};
|
|
20
|
+
'& > .badge': {
|
|
21
|
+
marginBlockStart: "6";
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
branchIndicator: {
|
|
25
|
+
alignItems: "flex-start";
|
|
26
|
+
marginBlockStart: "8";
|
|
27
|
+
alignSelf: "stretch";
|
|
28
|
+
position: "relative";
|
|
29
|
+
_open: {
|
|
30
|
+
'&::after': {
|
|
31
|
+
content: "\"\"";
|
|
32
|
+
position: "absolute";
|
|
33
|
+
insetBlockStart: "16";
|
|
34
|
+
insetBlockEnd: number;
|
|
35
|
+
insetInlineStart: "50%";
|
|
36
|
+
width: "1";
|
|
37
|
+
background: "border/regular";
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
branchText: {
|
|
42
|
+
paddingBlock: "6";
|
|
43
|
+
};
|
|
44
|
+
itemText: {
|
|
45
|
+
paddingBlock: "6";
|
|
46
|
+
};
|
|
47
|
+
suffixGroup: {
|
|
48
|
+
height: string;
|
|
49
|
+
'& > span': {
|
|
50
|
+
marginBlockEnd: "-1";
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
branchIndentGuide: {
|
|
54
|
+
height: "100%";
|
|
55
|
+
width: "1";
|
|
56
|
+
background: "border/regular";
|
|
57
|
+
position: "absolute";
|
|
58
|
+
insetBlockStart: number;
|
|
59
|
+
'--tree-depth': "calc(var(--depth) - 1)";
|
|
60
|
+
'--tree-indentation-offset': "calc(var(--tree-indentation) * var(--tree-depth))";
|
|
61
|
+
'--tree-offset': "calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset))";
|
|
62
|
+
'--tree-icon-offset': "calc(var(--tree-icon-size) * 0.5 * var(--depth))";
|
|
63
|
+
insetInlineStart: "calc(var(--tree-offset) + var(--tree-icon-offset))";
|
|
64
|
+
zIndex: number;
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
navigation: {
|
|
68
|
+
branchControl: {
|
|
69
|
+
borderRadius: number;
|
|
70
|
+
paddingInlineEnd: "16";
|
|
71
|
+
'&::before': {
|
|
72
|
+
content: "\"\"";
|
|
73
|
+
position: "absolute";
|
|
74
|
+
insetBlockStart: number;
|
|
75
|
+
insetInlineStart: "var(--tree-offset)";
|
|
76
|
+
insetInlineEnd: number;
|
|
77
|
+
height: "1";
|
|
78
|
+
background: "border/minimal";
|
|
79
|
+
};
|
|
80
|
+
_selected: {
|
|
81
|
+
'&::after': {
|
|
82
|
+
content: "\"\"";
|
|
83
|
+
position: "absolute";
|
|
84
|
+
insetBlock: number;
|
|
85
|
+
insetInlineEnd: number;
|
|
86
|
+
width: "4";
|
|
87
|
+
background: "border/selected";
|
|
88
|
+
borderRadius: "0 2px 2px 0";
|
|
89
|
+
};
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
item: {
|
|
93
|
+
borderRadius: number;
|
|
94
|
+
paddingInlineEnd: "16";
|
|
95
|
+
'&::before': {
|
|
96
|
+
content: "\"\"";
|
|
97
|
+
position: "absolute";
|
|
98
|
+
insetBlockStart: number;
|
|
99
|
+
insetInlineStart: "var(--tree-offset)";
|
|
100
|
+
insetInlineEnd: number;
|
|
101
|
+
height: "1";
|
|
102
|
+
background: "border/minimal";
|
|
103
|
+
};
|
|
104
|
+
'& > svg': {
|
|
105
|
+
marginBlockStart: string;
|
|
106
|
+
};
|
|
107
|
+
_selected: {
|
|
108
|
+
'&::after': {
|
|
109
|
+
content: "\"\"";
|
|
110
|
+
position: "absolute";
|
|
111
|
+
insetBlock: number;
|
|
112
|
+
insetInlineEnd: number;
|
|
113
|
+
width: "4";
|
|
114
|
+
background: "border/selected";
|
|
115
|
+
borderRadius: "0 2px 2px 0";
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
branchIndicator: {
|
|
120
|
+
marginBlockStart: "8";
|
|
121
|
+
transformOrigin: "center";
|
|
122
|
+
transitionDuration: "normal";
|
|
123
|
+
transitionProperty: "transform";
|
|
124
|
+
transitionTimingFunction: "default";
|
|
125
|
+
_open: {
|
|
126
|
+
transform: "rotate(90deg)";
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
branchText: {
|
|
130
|
+
paddingBlock: "8";
|
|
131
|
+
gap: "4";
|
|
132
|
+
_open: {
|
|
133
|
+
textStyle: "body/md/semibold";
|
|
134
|
+
color: "text/primary";
|
|
135
|
+
};
|
|
136
|
+
};
|
|
137
|
+
itemText: {
|
|
138
|
+
paddingBlock: "8";
|
|
139
|
+
};
|
|
140
|
+
suffixGroup: {
|
|
141
|
+
height: string;
|
|
142
|
+
'& > span': {
|
|
143
|
+
marginBlockEnd: "-1";
|
|
144
|
+
};
|
|
145
|
+
};
|
|
146
|
+
branchIndentGuide: {
|
|
147
|
+
display: "none";
|
|
148
|
+
};
|
|
149
|
+
};
|
|
150
|
+
};
|
|
151
|
+
}>;
|
|
152
|
+
export default treeViewSlotRecipe;
|
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
import { rem } from "../themeUtils.js";
|
|
2
|
+
import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
3
|
+
import { treeViewAnatomy } from "@chakra-ui/react/anatomy";
|
|
4
|
+
//#region lib/theme/slot-recipes/TreeView.recipe.ts
|
|
5
|
+
var baseItemStyle = {
|
|
6
|
+
display: "flex",
|
|
7
|
+
alignItems: "flex-start",
|
|
8
|
+
gap: "var(--tree-item-gap)",
|
|
9
|
+
cursor: "pointer",
|
|
10
|
+
userSelect: "none",
|
|
11
|
+
position: "relative",
|
|
12
|
+
"--tree-depth": "calc(var(--depth) - 1)",
|
|
13
|
+
"--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
|
|
14
|
+
"--tree-icon-offset": "calc(var(--tree-icon-size) * var(--tree-depth) * 0.5)",
|
|
15
|
+
"--tree-offset": "calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset) + var(--tree-icon-offset))",
|
|
16
|
+
paddingInlineStart: "var(--tree-offset)",
|
|
17
|
+
focusVisibleRing: "inside",
|
|
18
|
+
focusRingWidth: "2px",
|
|
19
|
+
_hover: {
|
|
20
|
+
background: "background/secondary",
|
|
21
|
+
_active: { background: "background/tertiary" }
|
|
22
|
+
},
|
|
23
|
+
_active: { background: "background/tertiary" },
|
|
24
|
+
_selected: {
|
|
25
|
+
background: "background/selected",
|
|
26
|
+
_hover: {
|
|
27
|
+
background: "background/selected-hover",
|
|
28
|
+
_active: { background: "background/selected-hover" }
|
|
29
|
+
},
|
|
30
|
+
_active: { background: "background/selected-hover" }
|
|
31
|
+
},
|
|
32
|
+
_disabled: {
|
|
33
|
+
opacity: .4,
|
|
34
|
+
cursor: "not-allowed"
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
var baseTextStyle = {
|
|
38
|
+
flex: 1,
|
|
39
|
+
minWidth: 0,
|
|
40
|
+
display: "flex",
|
|
41
|
+
flexDirection: "column"
|
|
42
|
+
};
|
|
43
|
+
var treeViewSlotRecipe = defineSlotRecipe({
|
|
44
|
+
className: "bitkit-tree-view",
|
|
45
|
+
slots: [
|
|
46
|
+
...treeViewAnatomy.keys(),
|
|
47
|
+
"actionGroup",
|
|
48
|
+
"suffixGroup",
|
|
49
|
+
"secondaryText"
|
|
50
|
+
],
|
|
51
|
+
base: {
|
|
52
|
+
root: {
|
|
53
|
+
width: "full",
|
|
54
|
+
display: "flex",
|
|
55
|
+
flexDirection: "column"
|
|
56
|
+
},
|
|
57
|
+
tree: {
|
|
58
|
+
display: "flex",
|
|
59
|
+
flexDirection: "column",
|
|
60
|
+
textStyle: "body/md/regular",
|
|
61
|
+
color: "text/body",
|
|
62
|
+
"--tree-item-gap": "spacing.8",
|
|
63
|
+
"--tree-indentation": "spacing.16",
|
|
64
|
+
"--tree-padding-inline-start": "spacing.8",
|
|
65
|
+
"--tree-icon-size": "spacing.16",
|
|
66
|
+
_icon: { boxSize: "var(--tree-icon-size)" }
|
|
67
|
+
},
|
|
68
|
+
label: {
|
|
69
|
+
fontWeight: "medium",
|
|
70
|
+
textStyle: "body/sm/regular"
|
|
71
|
+
},
|
|
72
|
+
branch: { position: "relative" },
|
|
73
|
+
branchContent: {
|
|
74
|
+
position: "relative",
|
|
75
|
+
overflow: "hidden",
|
|
76
|
+
_open: {
|
|
77
|
+
animationName: "expand-height, fade-in",
|
|
78
|
+
animationDuration: "moderate"
|
|
79
|
+
},
|
|
80
|
+
_closed: {
|
|
81
|
+
animationName: "collapse-height, fade-out",
|
|
82
|
+
animationDuration: "moderate"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
branchIndicator: {
|
|
86
|
+
display: "flex",
|
|
87
|
+
justifyContent: "center",
|
|
88
|
+
color: "icon/secondary"
|
|
89
|
+
},
|
|
90
|
+
branchTrigger: {
|
|
91
|
+
display: "inline-flex",
|
|
92
|
+
alignItems: "center",
|
|
93
|
+
justifyContent: "center"
|
|
94
|
+
},
|
|
95
|
+
branchControl: { ...baseItemStyle },
|
|
96
|
+
item: { ...baseItemStyle },
|
|
97
|
+
branchText: baseTextStyle,
|
|
98
|
+
itemText: baseTextStyle,
|
|
99
|
+
branchIndentGuide: {},
|
|
100
|
+
itemIndicator: {},
|
|
101
|
+
nodeCheckbox: { display: "inline-flex" },
|
|
102
|
+
suffixGroup: {
|
|
103
|
+
display: "flex",
|
|
104
|
+
gap: "8",
|
|
105
|
+
alignItems: "center",
|
|
106
|
+
justifyContent: "flex-end",
|
|
107
|
+
color: "text/secondary",
|
|
108
|
+
"[data-selected] > &, [data-state=\"open\"] > &": { color: "text/primary" },
|
|
109
|
+
paddingInlineStart: "16",
|
|
110
|
+
flexShrink: 0,
|
|
111
|
+
_groupHover: { display: "none" }
|
|
112
|
+
},
|
|
113
|
+
actionGroup: {
|
|
114
|
+
display: "none",
|
|
115
|
+
alignItems: "center",
|
|
116
|
+
justifyContent: "flex-end",
|
|
117
|
+
paddingInlineStart: "16",
|
|
118
|
+
flexShrink: 0,
|
|
119
|
+
_groupHover: { display: "flex" }
|
|
120
|
+
},
|
|
121
|
+
secondaryText: {
|
|
122
|
+
textStyle: "body/sm/regular",
|
|
123
|
+
color: "text/secondary"
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
variants: { variant: {
|
|
127
|
+
files: {
|
|
128
|
+
branchControl: {
|
|
129
|
+
borderRadius: "4",
|
|
130
|
+
paddingInlineEnd: "16",
|
|
131
|
+
"& > svg": { marginBlockStart: "8" },
|
|
132
|
+
"& > .badge": { marginBlockStart: "6" }
|
|
133
|
+
},
|
|
134
|
+
item: {
|
|
135
|
+
borderRadius: "4",
|
|
136
|
+
paddingInlineEnd: "16",
|
|
137
|
+
"& > svg": { marginBlockStart: "8" },
|
|
138
|
+
"& > .badge": { marginBlockStart: "6" }
|
|
139
|
+
},
|
|
140
|
+
branchIndicator: {
|
|
141
|
+
alignItems: "flex-start",
|
|
142
|
+
marginBlockStart: "8",
|
|
143
|
+
alignSelf: "stretch",
|
|
144
|
+
position: "relative",
|
|
145
|
+
_open: { "&::after": {
|
|
146
|
+
content: "\"\"",
|
|
147
|
+
position: "absolute",
|
|
148
|
+
insetBlockStart: "16",
|
|
149
|
+
insetBlockEnd: 0,
|
|
150
|
+
insetInlineStart: "50%",
|
|
151
|
+
width: "1",
|
|
152
|
+
background: "border/regular"
|
|
153
|
+
} }
|
|
154
|
+
},
|
|
155
|
+
branchText: { paddingBlock: "6" },
|
|
156
|
+
itemText: { paddingBlock: "6" },
|
|
157
|
+
suffixGroup: {
|
|
158
|
+
height: rem(31),
|
|
159
|
+
"& > span": { marginBlockEnd: "-1" }
|
|
160
|
+
},
|
|
161
|
+
branchIndentGuide: {
|
|
162
|
+
height: "100%",
|
|
163
|
+
width: "1",
|
|
164
|
+
background: "border/regular",
|
|
165
|
+
position: "absolute",
|
|
166
|
+
insetBlockStart: 0,
|
|
167
|
+
"--tree-depth": "calc(var(--depth) - 1)",
|
|
168
|
+
"--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
|
|
169
|
+
"--tree-offset": "calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset))",
|
|
170
|
+
"--tree-icon-offset": "calc(var(--tree-icon-size) * 0.5 * var(--depth))",
|
|
171
|
+
insetInlineStart: "calc(var(--tree-offset) + var(--tree-icon-offset))",
|
|
172
|
+
zIndex: 1
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
navigation: {
|
|
176
|
+
branchControl: {
|
|
177
|
+
borderRadius: 0,
|
|
178
|
+
paddingInlineEnd: "16",
|
|
179
|
+
"&::before": {
|
|
180
|
+
content: "\"\"",
|
|
181
|
+
position: "absolute",
|
|
182
|
+
insetBlockStart: 0,
|
|
183
|
+
insetInlineStart: "var(--tree-offset)",
|
|
184
|
+
insetInlineEnd: 0,
|
|
185
|
+
height: "1",
|
|
186
|
+
background: "border/minimal"
|
|
187
|
+
},
|
|
188
|
+
_selected: { "&::after": {
|
|
189
|
+
content: "\"\"",
|
|
190
|
+
position: "absolute",
|
|
191
|
+
insetBlock: 0,
|
|
192
|
+
insetInlineEnd: 0,
|
|
193
|
+
width: "4",
|
|
194
|
+
background: "border/selected",
|
|
195
|
+
borderRadius: "0 2px 2px 0"
|
|
196
|
+
} }
|
|
197
|
+
},
|
|
198
|
+
item: {
|
|
199
|
+
borderRadius: 0,
|
|
200
|
+
paddingInlineEnd: "16",
|
|
201
|
+
"&::before": {
|
|
202
|
+
content: "\"\"",
|
|
203
|
+
position: "absolute",
|
|
204
|
+
insetBlockStart: 0,
|
|
205
|
+
insetInlineStart: "var(--tree-offset)",
|
|
206
|
+
insetInlineEnd: 0,
|
|
207
|
+
height: "1",
|
|
208
|
+
background: "border/minimal"
|
|
209
|
+
},
|
|
210
|
+
"& > svg": { marginBlockStart: rem(9) },
|
|
211
|
+
_selected: { "&::after": {
|
|
212
|
+
content: "\"\"",
|
|
213
|
+
position: "absolute",
|
|
214
|
+
insetBlock: 0,
|
|
215
|
+
insetInlineEnd: 0,
|
|
216
|
+
width: "4",
|
|
217
|
+
background: "border/selected",
|
|
218
|
+
borderRadius: "0 2px 2px 0"
|
|
219
|
+
} }
|
|
220
|
+
},
|
|
221
|
+
branchIndicator: {
|
|
222
|
+
marginBlockStart: "8",
|
|
223
|
+
transformOrigin: "center",
|
|
224
|
+
transitionDuration: "normal",
|
|
225
|
+
transitionProperty: "transform",
|
|
226
|
+
transitionTimingFunction: "default",
|
|
227
|
+
_open: { transform: "rotate(90deg)" }
|
|
228
|
+
},
|
|
229
|
+
branchText: {
|
|
230
|
+
paddingBlock: "8",
|
|
231
|
+
gap: "4",
|
|
232
|
+
_open: {
|
|
233
|
+
textStyle: "body/md/semibold",
|
|
234
|
+
color: "text/primary"
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
itemText: { paddingBlock: "8" },
|
|
238
|
+
suffixGroup: {
|
|
239
|
+
height: rem(35),
|
|
240
|
+
"& > span": { marginBlockEnd: "-1" }
|
|
241
|
+
},
|
|
242
|
+
branchIndentGuide: { display: "none" }
|
|
243
|
+
}
|
|
244
|
+
} },
|
|
245
|
+
defaultVariants: { variant: "files" }
|
|
246
|
+
});
|
|
247
|
+
//#endregion
|
|
248
|
+
export { treeViewSlotRecipe as default };
|
|
249
|
+
|
|
250
|
+
//# sourceMappingURL=TreeView.recipe.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TreeView.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/TreeView.recipe.ts"],"sourcesContent":["import { treeViewAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst baseItemStyle = {\n display: 'flex',\n alignItems: 'flex-start',\n gap: 'var(--tree-item-gap)',\n cursor: 'pointer',\n userSelect: 'none',\n position: 'relative',\n '--tree-depth': 'calc(var(--depth) - 1)',\n '--tree-indentation-offset': 'calc(var(--tree-indentation) * var(--tree-depth))',\n '--tree-icon-offset': 'calc(var(--tree-icon-size) * var(--tree-depth) * 0.5)',\n '--tree-offset': 'calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset) + var(--tree-icon-offset))',\n paddingInlineStart: 'var(--tree-offset)',\n focusVisibleRing: 'inside',\n focusRingWidth: '2px',\n _hover: {\n background: 'background/secondary',\n _active: {\n background: 'background/tertiary',\n },\n },\n _active: {\n background: 'background/tertiary',\n },\n _selected: {\n background: 'background/selected',\n _hover: {\n background: 'background/selected-hover',\n _active: {\n background: 'background/selected-hover',\n },\n },\n _active: {\n background: 'background/selected-hover',\n },\n },\n _disabled: {\n opacity: 0.4,\n cursor: 'not-allowed',\n },\n} as const;\n\nconst baseTextStyle = {\n flex: 1,\n minWidth: 0,\n display: 'flex',\n flexDirection: 'column',\n} as const;\n\nconst treeViewSlotRecipe = defineSlotRecipe({\n className: 'bitkit-tree-view',\n slots: [...treeViewAnatomy.keys(), 'actionGroup', 'suffixGroup', 'secondaryText'],\n base: {\n root: {\n width: 'full',\n display: 'flex',\n flexDirection: 'column',\n },\n tree: {\n display: 'flex',\n flexDirection: 'column',\n textStyle: 'body/md/regular',\n color: 'text/body',\n '--tree-item-gap': 'spacing.8',\n '--tree-indentation': 'spacing.16',\n '--tree-padding-inline-start': 'spacing.8',\n '--tree-icon-size': 'spacing.16',\n _icon: {\n boxSize: 'var(--tree-icon-size)',\n },\n },\n label: {\n fontWeight: 'medium',\n textStyle: 'body/sm/regular',\n },\n branch: {\n position: 'relative',\n },\n branchContent: {\n position: 'relative',\n overflow: 'hidden',\n _open: {\n animationName: 'expand-height, fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationName: 'collapse-height, fade-out',\n animationDuration: 'moderate',\n },\n },\n branchIndicator: {\n display: 'flex',\n justifyContent: 'center',\n color: 'icon/secondary',\n },\n branchTrigger: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n branchControl: {\n ...baseItemStyle,\n },\n item: {\n ...baseItemStyle,\n },\n branchText: baseTextStyle,\n itemText: baseTextStyle,\n branchIndentGuide: {},\n itemIndicator: {},\n nodeCheckbox: {\n display: 'inline-flex',\n },\n suffixGroup: {\n display: 'flex',\n gap: '8',\n alignItems: 'center',\n justifyContent: 'flex-end',\n color: 'text/secondary',\n '[data-selected] > &, [data-state=\"open\"] > &': {\n color: 'text/primary',\n },\n paddingInlineStart: '16',\n flexShrink: 0,\n _groupHover: {\n display: 'none',\n },\n },\n actionGroup: {\n display: 'none',\n alignItems: 'center',\n justifyContent: 'flex-end',\n paddingInlineStart: '16',\n flexShrink: 0,\n _groupHover: {\n display: 'flex',\n },\n },\n secondaryText: {\n textStyle: 'body/sm/regular',\n color: 'text/secondary',\n },\n },\n variants: {\n variant: {\n files: {\n branchControl: {\n borderRadius: '4',\n paddingInlineEnd: '16',\n '& > svg': {\n marginBlockStart: '8',\n },\n '& > .badge': {\n marginBlockStart: '6',\n },\n },\n item: {\n borderRadius: '4',\n paddingInlineEnd: '16',\n '& > svg': {\n marginBlockStart: '8',\n },\n '& > .badge': {\n marginBlockStart: '6',\n },\n },\n branchIndicator: {\n alignItems: 'flex-start',\n marginBlockStart: '8',\n alignSelf: 'stretch',\n position: 'relative',\n _open: {\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n insetBlockStart: '16',\n insetBlockEnd: 0,\n insetInlineStart: '50%',\n width: '1',\n background: 'border/regular',\n },\n },\n },\n branchText: {\n paddingBlock: '6',\n },\n itemText: {\n paddingBlock: '6',\n },\n suffixGroup: {\n height: rem(31),\n '& > span': {\n marginBlockEnd: '-1',\n },\n },\n branchIndentGuide: {\n height: '100%',\n width: '1',\n background: 'border/regular',\n position: 'absolute',\n insetBlockStart: 0,\n '--tree-depth': 'calc(var(--depth) - 1)',\n '--tree-indentation-offset': 'calc(var(--tree-indentation) * var(--tree-depth))',\n '--tree-offset': 'calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset))',\n '--tree-icon-offset': 'calc(var(--tree-icon-size) * 0.5 * var(--depth))',\n insetInlineStart: 'calc(var(--tree-offset) + var(--tree-icon-offset))',\n zIndex: 1,\n },\n },\n navigation: {\n branchControl: {\n borderRadius: 0,\n paddingInlineEnd: '16',\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n insetBlockStart: 0,\n insetInlineStart: 'var(--tree-offset)',\n insetInlineEnd: 0,\n height: '1',\n background: 'border/minimal',\n },\n _selected: {\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n insetBlock: 0,\n insetInlineEnd: 0,\n width: '4',\n background: 'border/selected',\n borderRadius: '0 2px 2px 0',\n },\n },\n },\n item: {\n borderRadius: 0,\n paddingInlineEnd: '16',\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n insetBlockStart: 0,\n insetInlineStart: 'var(--tree-offset)',\n insetInlineEnd: 0,\n height: '1',\n background: 'border/minimal',\n },\n '& > svg': {\n marginBlockStart: rem(9),\n },\n _selected: {\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n insetBlock: 0,\n insetInlineEnd: 0,\n width: '4',\n background: 'border/selected',\n borderRadius: '0 2px 2px 0',\n },\n },\n },\n branchIndicator: {\n marginBlockStart: '8',\n transformOrigin: 'center',\n transitionDuration: 'normal',\n transitionProperty: 'transform',\n transitionTimingFunction: 'default',\n _open: {\n transform: 'rotate(90deg)',\n },\n },\n branchText: {\n paddingBlock: '8',\n gap: '4',\n _open: {\n textStyle: 'body/md/semibold',\n color: 'text/primary',\n },\n },\n itemText: {\n paddingBlock: '8',\n },\n suffixGroup: {\n height: rem(35),\n '& > span': {\n marginBlockEnd: '-1',\n },\n },\n branchIndentGuide: {\n display: 'none',\n },\n },\n },\n },\n defaultVariants: {\n variant: 'files',\n },\n});\n\nexport default treeViewSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -990,6 +990,101 @@ declare const slotRecipes: {
|
|
|
990
990
|
};
|
|
991
991
|
}>;
|
|
992
992
|
overflowContent: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "action" | "preview", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "action" | "preview">>;
|
|
993
|
+
pageFooter: import('@chakra-ui/react').SlotRecipeDefinition<"link" | "status" | "root" | "statusLabel" | "statusDot" | "copyright" | "copyrightText" | "links", {
|
|
994
|
+
colorScheme: {
|
|
995
|
+
gray: {
|
|
996
|
+
root: {
|
|
997
|
+
background: "background/secondary";
|
|
998
|
+
};
|
|
999
|
+
status: {
|
|
1000
|
+
background: "background/tertiary";
|
|
1001
|
+
};
|
|
1002
|
+
};
|
|
1003
|
+
white: {
|
|
1004
|
+
root: {
|
|
1005
|
+
background: "background/primary";
|
|
1006
|
+
};
|
|
1007
|
+
status: {
|
|
1008
|
+
background: "background/secondary";
|
|
1009
|
+
};
|
|
1010
|
+
};
|
|
1011
|
+
};
|
|
1012
|
+
size: {
|
|
1013
|
+
compact: {
|
|
1014
|
+
root: {
|
|
1015
|
+
height: {
|
|
1016
|
+
tablet: "32";
|
|
1017
|
+
};
|
|
1018
|
+
};
|
|
1019
|
+
};
|
|
1020
|
+
default: {
|
|
1021
|
+
root: {
|
|
1022
|
+
height: {
|
|
1023
|
+
tablet: "64";
|
|
1024
|
+
};
|
|
1025
|
+
};
|
|
1026
|
+
};
|
|
1027
|
+
};
|
|
1028
|
+
variant: {
|
|
1029
|
+
default: {
|
|
1030
|
+
root: {
|
|
1031
|
+
paddingInlineEnd: {
|
|
1032
|
+
base: "16";
|
|
1033
|
+
tablet: string;
|
|
1034
|
+
};
|
|
1035
|
+
position: {
|
|
1036
|
+
tablet: "relative";
|
|
1037
|
+
};
|
|
1038
|
+
};
|
|
1039
|
+
copyright: {
|
|
1040
|
+
insetInlineStart: {
|
|
1041
|
+
tablet: "50%";
|
|
1042
|
+
};
|
|
1043
|
+
position: {
|
|
1044
|
+
tablet: "absolute";
|
|
1045
|
+
};
|
|
1046
|
+
top: {
|
|
1047
|
+
tablet: "50%";
|
|
1048
|
+
};
|
|
1049
|
+
transform: {
|
|
1050
|
+
tablet: "translate(-50%, -50%)";
|
|
1051
|
+
};
|
|
1052
|
+
};
|
|
1053
|
+
links: {
|
|
1054
|
+
borderBlockEnd: {
|
|
1055
|
+
base: "1px solid {colors.border.minimal}";
|
|
1056
|
+
tablet: "none";
|
|
1057
|
+
};
|
|
1058
|
+
borderBlockStart: {
|
|
1059
|
+
base: "1px solid {colors.border.minimal}";
|
|
1060
|
+
tablet: "none";
|
|
1061
|
+
};
|
|
1062
|
+
paddingBlock: {
|
|
1063
|
+
base: "16";
|
|
1064
|
+
tablet: "0";
|
|
1065
|
+
};
|
|
1066
|
+
};
|
|
1067
|
+
};
|
|
1068
|
+
public: {
|
|
1069
|
+
root: {
|
|
1070
|
+
paddingInlineEnd: {
|
|
1071
|
+
base: "16";
|
|
1072
|
+
tablet: "40";
|
|
1073
|
+
};
|
|
1074
|
+
};
|
|
1075
|
+
links: {
|
|
1076
|
+
borderBlockEnd: {
|
|
1077
|
+
base: "1px solid {colors.border.minimal}";
|
|
1078
|
+
tablet: "none";
|
|
1079
|
+
};
|
|
1080
|
+
paddingBlockEnd: {
|
|
1081
|
+
base: "16";
|
|
1082
|
+
tablet: "0";
|
|
1083
|
+
};
|
|
1084
|
+
};
|
|
1085
|
+
};
|
|
1086
|
+
};
|
|
1087
|
+
}>;
|
|
993
1088
|
pagination: import('@chakra-ui/react').SlotRecipeDefinition<"text" | "root" | "itemsBlock" | "itemsSelect" | "pageBlock" | "pageSelect", {
|
|
994
1089
|
variant: {
|
|
995
1090
|
card: {
|
|
@@ -1739,5 +1834,156 @@ declare const slotRecipes: {
|
|
|
1739
1834
|
};
|
|
1740
1835
|
};
|
|
1741
1836
|
}>;
|
|
1837
|
+
treeView: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "secondaryText" | "root" | "item" | "itemIndicator" | "tree" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
|
|
1838
|
+
variant: {
|
|
1839
|
+
files: {
|
|
1840
|
+
branchControl: {
|
|
1841
|
+
borderRadius: "4";
|
|
1842
|
+
paddingInlineEnd: "16";
|
|
1843
|
+
'& > svg': {
|
|
1844
|
+
marginBlockStart: "8";
|
|
1845
|
+
};
|
|
1846
|
+
'& > .badge': {
|
|
1847
|
+
marginBlockStart: "6";
|
|
1848
|
+
};
|
|
1849
|
+
};
|
|
1850
|
+
item: {
|
|
1851
|
+
borderRadius: "4";
|
|
1852
|
+
paddingInlineEnd: "16";
|
|
1853
|
+
'& > svg': {
|
|
1854
|
+
marginBlockStart: "8";
|
|
1855
|
+
};
|
|
1856
|
+
'& > .badge': {
|
|
1857
|
+
marginBlockStart: "6";
|
|
1858
|
+
};
|
|
1859
|
+
};
|
|
1860
|
+
branchIndicator: {
|
|
1861
|
+
alignItems: "flex-start";
|
|
1862
|
+
marginBlockStart: "8";
|
|
1863
|
+
alignSelf: "stretch";
|
|
1864
|
+
position: "relative";
|
|
1865
|
+
_open: {
|
|
1866
|
+
'&::after': {
|
|
1867
|
+
content: "\"\"";
|
|
1868
|
+
position: "absolute";
|
|
1869
|
+
insetBlockStart: "16";
|
|
1870
|
+
insetBlockEnd: number;
|
|
1871
|
+
insetInlineStart: "50%";
|
|
1872
|
+
width: "1";
|
|
1873
|
+
background: "border/regular";
|
|
1874
|
+
};
|
|
1875
|
+
};
|
|
1876
|
+
};
|
|
1877
|
+
branchText: {
|
|
1878
|
+
paddingBlock: "6";
|
|
1879
|
+
};
|
|
1880
|
+
itemText: {
|
|
1881
|
+
paddingBlock: "6";
|
|
1882
|
+
};
|
|
1883
|
+
suffixGroup: {
|
|
1884
|
+
height: string;
|
|
1885
|
+
'& > span': {
|
|
1886
|
+
marginBlockEnd: "-1";
|
|
1887
|
+
};
|
|
1888
|
+
};
|
|
1889
|
+
branchIndentGuide: {
|
|
1890
|
+
height: "100%";
|
|
1891
|
+
width: "1";
|
|
1892
|
+
background: "border/regular";
|
|
1893
|
+
position: "absolute";
|
|
1894
|
+
insetBlockStart: number;
|
|
1895
|
+
'--tree-depth': "calc(var(--depth) - 1)";
|
|
1896
|
+
'--tree-indentation-offset': "calc(var(--tree-indentation) * var(--tree-depth))";
|
|
1897
|
+
'--tree-offset': "calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset))";
|
|
1898
|
+
'--tree-icon-offset': "calc(var(--tree-icon-size) * 0.5 * var(--depth))";
|
|
1899
|
+
insetInlineStart: "calc(var(--tree-offset) + var(--tree-icon-offset))";
|
|
1900
|
+
zIndex: number;
|
|
1901
|
+
};
|
|
1902
|
+
};
|
|
1903
|
+
navigation: {
|
|
1904
|
+
branchControl: {
|
|
1905
|
+
borderRadius: number;
|
|
1906
|
+
paddingInlineEnd: "16";
|
|
1907
|
+
'&::before': {
|
|
1908
|
+
content: "\"\"";
|
|
1909
|
+
position: "absolute";
|
|
1910
|
+
insetBlockStart: number;
|
|
1911
|
+
insetInlineStart: "var(--tree-offset)";
|
|
1912
|
+
insetInlineEnd: number;
|
|
1913
|
+
height: "1";
|
|
1914
|
+
background: "border/minimal";
|
|
1915
|
+
};
|
|
1916
|
+
_selected: {
|
|
1917
|
+
'&::after': {
|
|
1918
|
+
content: "\"\"";
|
|
1919
|
+
position: "absolute";
|
|
1920
|
+
insetBlock: number;
|
|
1921
|
+
insetInlineEnd: number;
|
|
1922
|
+
width: "4";
|
|
1923
|
+
background: "border/selected";
|
|
1924
|
+
borderRadius: "0 2px 2px 0";
|
|
1925
|
+
};
|
|
1926
|
+
};
|
|
1927
|
+
};
|
|
1928
|
+
item: {
|
|
1929
|
+
borderRadius: number;
|
|
1930
|
+
paddingInlineEnd: "16";
|
|
1931
|
+
'&::before': {
|
|
1932
|
+
content: "\"\"";
|
|
1933
|
+
position: "absolute";
|
|
1934
|
+
insetBlockStart: number;
|
|
1935
|
+
insetInlineStart: "var(--tree-offset)";
|
|
1936
|
+
insetInlineEnd: number;
|
|
1937
|
+
height: "1";
|
|
1938
|
+
background: "border/minimal";
|
|
1939
|
+
};
|
|
1940
|
+
'& > svg': {
|
|
1941
|
+
marginBlockStart: string;
|
|
1942
|
+
};
|
|
1943
|
+
_selected: {
|
|
1944
|
+
'&::after': {
|
|
1945
|
+
content: "\"\"";
|
|
1946
|
+
position: "absolute";
|
|
1947
|
+
insetBlock: number;
|
|
1948
|
+
insetInlineEnd: number;
|
|
1949
|
+
width: "4";
|
|
1950
|
+
background: "border/selected";
|
|
1951
|
+
borderRadius: "0 2px 2px 0";
|
|
1952
|
+
};
|
|
1953
|
+
};
|
|
1954
|
+
};
|
|
1955
|
+
branchIndicator: {
|
|
1956
|
+
marginBlockStart: "8";
|
|
1957
|
+
transformOrigin: "center";
|
|
1958
|
+
transitionDuration: "normal";
|
|
1959
|
+
transitionProperty: "transform";
|
|
1960
|
+
transitionTimingFunction: "default";
|
|
1961
|
+
_open: {
|
|
1962
|
+
transform: "rotate(90deg)";
|
|
1963
|
+
};
|
|
1964
|
+
};
|
|
1965
|
+
branchText: {
|
|
1966
|
+
paddingBlock: "8";
|
|
1967
|
+
gap: "4";
|
|
1968
|
+
_open: {
|
|
1969
|
+
textStyle: "body/md/semibold";
|
|
1970
|
+
color: "text/primary";
|
|
1971
|
+
};
|
|
1972
|
+
};
|
|
1973
|
+
itemText: {
|
|
1974
|
+
paddingBlock: "8";
|
|
1975
|
+
};
|
|
1976
|
+
suffixGroup: {
|
|
1977
|
+
height: string;
|
|
1978
|
+
'& > span': {
|
|
1979
|
+
marginBlockEnd: "-1";
|
|
1980
|
+
};
|
|
1981
|
+
};
|
|
1982
|
+
branchIndentGuide: {
|
|
1983
|
+
display: "none";
|
|
1984
|
+
};
|
|
1985
|
+
};
|
|
1986
|
+
};
|
|
1987
|
+
}>;
|
|
1742
1988
|
};
|
|
1743
1989
|
export default slotRecipes;
|