@epilot/zenith-react 0.1.0 → 0.2.0-next.1
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/README.md +34 -0
- package/dist/components/accordion/accordion.js +57 -48
- package/dist/components/accordion/accordion.js.map +1 -1
- package/dist/components/alert-dialog/alert-dialog.js +120 -91
- package/dist/components/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/components/avatar/avatar-group.js +38 -35
- package/dist/components/avatar/avatar-group.js.map +1 -1
- package/dist/components/avatar/avatar.js +78 -71
- package/dist/components/avatar/avatar.js.map +1 -1
- package/dist/components/badge/badge.js +60 -55
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +99 -54
- package/dist/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/components/button/button.js +87 -77
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/button-group/button-group.js +36 -32
- package/dist/components/button-group/button-group.js.map +1 -1
- package/dist/components/callout/callout.js +113 -104
- package/dist/components/callout/callout.js.map +1 -1
- package/dist/components/card/card.js +62 -52
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/checkbox/checkbox.js +22 -19
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/code-block/code-block.js +135 -123
- package/dist/components/code-block/code-block.js.map +1 -1
- package/dist/components/code-editor/code-editor.js +276 -260
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/collapsible-sidebar/collapsible-sidebar.js +62 -56
- package/dist/components/collapsible-sidebar/collapsible-sidebar.js.map +1 -1
- package/dist/components/command/command.js +116 -105
- package/dist/components/command/command.js.map +1 -1
- package/dist/components/data-table/data-table-body.js +38 -34
- package/dist/components/data-table/data-table-body.js.map +1 -1
- package/dist/components/data-table/data-table-column-header.js +30 -26
- package/dist/components/data-table/data-table-column-header.js.map +1 -1
- package/dist/components/data-table/data-table-column-order.js +79 -73
- package/dist/components/data-table/data-table-column-order.js.map +1 -1
- package/dist/components/data-table/data-table-column-visibility.js +25 -22
- package/dist/components/data-table/data-table-column-visibility.js.map +1 -1
- package/dist/components/data-table/data-table-content.js +47 -44
- package/dist/components/data-table/data-table-content.js.map +1 -1
- package/dist/components/data-table/data-table-error.js +36 -32
- package/dist/components/data-table/data-table-error.js.map +1 -1
- package/dist/components/data-table/data-table-footer.js +10 -8
- package/dist/components/data-table/data-table-footer.js.map +1 -1
- package/dist/components/data-table/data-table-header-draggable.js +40 -36
- package/dist/components/data-table/data-table-header-draggable.js.map +1 -1
- package/dist/components/data-table/data-table-loading.js +21 -18
- package/dist/components/data-table/data-table-loading.js.map +1 -1
- package/dist/components/data-table/data-table-resize-handle.js +13 -11
- package/dist/components/data-table/data-table-resize-handle.js.map +1 -1
- package/dist/components/data-table/data-table-row.js +47 -44
- package/dist/components/data-table/data-table-row.js.map +1 -1
- package/dist/components/data-table/data-table-toolbar.js +9 -7
- package/dist/components/data-table/data-table-toolbar.js.map +1 -1
- package/dist/components/data-table/data-table.js +48 -46
- package/dist/components/data-table/data-table.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.js +212 -193
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-range-picker/range-calendar.js +36 -34
- package/dist/components/date-range-picker/range-calendar.js.map +1 -1
- package/dist/components/date-time-picker/calendar.js +290 -272
- package/dist/components/date-time-picker/calendar.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-input.js +127 -112
- package/dist/components/date-time-picker/date-time-picker-input.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-panel.js +126 -120
- package/dist/components/date-time-picker/date-time-picker-panel.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker.js +91 -86
- package/dist/components/date-time-picker/date-time-picker.js.map +1 -1
- package/dist/components/date-time-picker/time-picker.js +95 -87
- package/dist/components/date-time-picker/time-picker.js.map +1 -1
- package/dist/components/dialog/dialog.js +125 -103
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/drawer/drawer.js +151 -114
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.js +141 -112
- package/dist/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/components/field/field-combobox.js +196 -176
- package/dist/components/field/field-combobox.js.map +1 -1
- package/dist/components/field/field.js +237 -195
- package/dist/components/field/field.js.map +1 -1
- package/dist/components/list/list.js +237 -219
- package/dist/components/list/list.js.map +1 -1
- package/dist/components/option-card/option-card.js +129 -116
- package/dist/components/option-card/option-card.js.map +1 -1
- package/dist/components/pill/pill.js +55 -51
- package/dist/components/pill/pill.js.map +1 -1
- package/dist/components/popover/popover.js +53 -36
- package/dist/components/popover/popover.js.map +1 -1
- package/dist/components/radio/radio.js +38 -34
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/scroll-area/scroll-area.js +38 -35
- package/dist/components/scroll-area/scroll-area.js.map +1 -1
- package/dist/components/scroll-overflow/scroll-overflow.js +166 -151
- package/dist/components/scroll-overflow/scroll-overflow.js.map +1 -1
- package/dist/components/segmented-control/segmented-control.js +93 -85
- package/dist/components/segmented-control/segmented-control.js.map +1 -1
- package/dist/components/select/select.js +149 -128
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/separator/separator.js +19 -16
- package/dist/components/separator/separator.js.map +1 -1
- package/dist/components/skeleton/skeleton.js +34 -30
- package/dist/components/skeleton/skeleton.js.map +1 -1
- package/dist/components/spinner/spinner.js +22 -17
- package/dist/components/spinner/spinner.js.map +1 -1
- package/dist/components/surface/surface.js +25 -22
- package/dist/components/surface/surface.js.map +1 -1
- package/dist/components/switch/switch.js +66 -57
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/table-pagination.js +139 -129
- package/dist/components/table/table-pagination.js.map +1 -1
- package/dist/components/table/table.js +104 -90
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/tabs/tabs.js +212 -79
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/components/toast/toast.js +112 -100
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/toggle/toggle.js +32 -30
- package/dist/components/toggle/toggle.js.map +1 -1
- package/dist/components/tooltip/tooltip.js +59 -46
- package/dist/components/tooltip/tooltip.js.map +1 -1
- package/dist/index.d.ts +22 -0
- package/dist/lib/clear-button.js +18 -17
- package/dist/lib/clear-button.js.map +1 -1
- package/dist/styles/host-reset.js +47 -0
- package/dist/styles/host-reset.js.map +1 -0
- package/dist/styles/overlay-layer.js +5 -0
- package/dist/styles/overlay-layer.js.map +1 -0
- package/dist/tokens.json +1 -1
- package/package.json +8 -7
- package/scripts/migration-diagnostics.mjs +42 -7
- package/scripts/migration-sweep.mjs +9 -1
|
@@ -1,52 +1,58 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import * as
|
|
3
|
-
import { Root as
|
|
4
|
-
import { mergeClasses as
|
|
5
|
-
import { makeZenithStyles as
|
|
6
|
-
import {
|
|
7
|
-
|
|
1
|
+
import { jsx as y } from "react/jsx-runtime";
|
|
2
|
+
import * as a from "react";
|
|
3
|
+
import { Root as O, Content as B, List as D, Trigger as H } from "../../vendor/.bun/@radix-ui_react-tabs@1.1.13_2b23df507bdda662/vendor/@radix-ui/react-tabs/dist/index.js";
|
|
4
|
+
import { mergeClasses as T, SLOT_ATTR as S, shorthands as e } from "@epilot/zenith-runtime/v1";
|
|
5
|
+
import { makeZenithStyles as K } from "../../styles/make-styles.js";
|
|
6
|
+
import { boxModel as A, nativeControl as U } from "../../styles/host-reset.js";
|
|
7
|
+
import { errorA11 as L, errorA3 as Z, errorA8 as _, errorA4 as q, accentA11 as E, accentA3 as J, accentA8 as M, accentA4 as Q, accentA12 as X, grayA3 as W, grayA8 as Y, grayA2 as $, grayA12 as N, spacingElement2 as u, fontWeightSemibold as P, leadingSm as tt, textSm as et, spacingElement3 as z, spacingGroup2 as at, radiusFull as rt, radiusLg as G, spacingElement1 as ot } from "../../tokens/index.js";
|
|
8
|
+
const F = a.createContext({
|
|
8
9
|
size: "base",
|
|
9
10
|
variant: "default"
|
|
10
|
-
}),
|
|
11
|
+
}), R = K({
|
|
11
12
|
root: {
|
|
12
13
|
display: "flex",
|
|
13
14
|
flexDirection: "column",
|
|
14
|
-
...
|
|
15
|
+
...e.gap(u),
|
|
15
16
|
"&[data-orientation='vertical']": {
|
|
16
17
|
flexDirection: "row",
|
|
17
18
|
alignItems: "flex-start",
|
|
18
|
-
...
|
|
19
|
+
...e.gap(u)
|
|
19
20
|
}
|
|
20
21
|
},
|
|
21
22
|
list: {
|
|
23
|
+
...A,
|
|
22
24
|
backgroundColor: "transparent",
|
|
23
|
-
color:
|
|
25
|
+
color: N,
|
|
24
26
|
height: "auto",
|
|
25
27
|
display: "inline-flex",
|
|
26
28
|
alignItems: "center",
|
|
27
29
|
justifyContent: "center",
|
|
28
|
-
...
|
|
29
|
-
...
|
|
30
|
-
...
|
|
30
|
+
...e.gap(u),
|
|
31
|
+
...e.borderRadius(G),
|
|
32
|
+
...e.paddingBlock(u),
|
|
31
33
|
"&[data-orientation='vertical']": {
|
|
32
34
|
flexDirection: "column",
|
|
33
35
|
alignItems: "stretch",
|
|
34
36
|
justifyContent: "flex-start",
|
|
35
|
-
...
|
|
36
|
-
...
|
|
37
|
+
...e.gap(ot),
|
|
38
|
+
...e.paddingBlock(0)
|
|
37
39
|
}
|
|
38
40
|
},
|
|
39
41
|
trigger: {
|
|
42
|
+
...U,
|
|
43
|
+
position: "relative",
|
|
40
44
|
display: "inline-flex",
|
|
41
45
|
alignItems: "center",
|
|
42
|
-
...
|
|
46
|
+
...e.gap(u),
|
|
43
47
|
backgroundColor: "transparent",
|
|
44
|
-
...
|
|
45
|
-
...
|
|
46
|
-
...
|
|
48
|
+
...e.borderStyle("none"),
|
|
49
|
+
...e.borderWidth(0),
|
|
50
|
+
...e.borderRadius(G),
|
|
47
51
|
cursor: "pointer",
|
|
48
|
-
fontSize:
|
|
49
|
-
lineHeight:
|
|
52
|
+
fontSize: et,
|
|
53
|
+
lineHeight: tt,
|
|
54
|
+
// A label never wraps, so selection (and its semibold) can never change a tab's height.
|
|
55
|
+
whiteSpace: "nowrap",
|
|
50
56
|
transitionProperty: "all",
|
|
51
57
|
transitionDuration: "150ms",
|
|
52
58
|
transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
@@ -59,53 +65,116 @@ const x = s.createContext({
|
|
|
59
65
|
justifyContent: "flex-start",
|
|
60
66
|
textAlign: "left",
|
|
61
67
|
width: "100%"
|
|
68
|
+
},
|
|
69
|
+
// A plain-text label reserves its semibold width up front: a hidden, zero-height bold copy
|
|
70
|
+
// stacks under it, so every tab is as wide as its bold label in every state and selecting one
|
|
71
|
+
// never moves its neighbours or the panel. Rich children (icons, elements) are not reserved.
|
|
72
|
+
"&[data-label]": {
|
|
73
|
+
flexDirection: "column",
|
|
74
|
+
alignItems: "center",
|
|
75
|
+
justifyContent: "center",
|
|
76
|
+
rowGap: 0,
|
|
77
|
+
"&::after": {
|
|
78
|
+
content: "attr(data-label)",
|
|
79
|
+
height: 0,
|
|
80
|
+
...e.overflow("hidden"),
|
|
81
|
+
visibility: "hidden",
|
|
82
|
+
pointerEvents: "none",
|
|
83
|
+
userSelect: "none",
|
|
84
|
+
fontWeight: P
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
// A vertical rail keeps its labels left-aligned inside the reserved width.
|
|
88
|
+
"&[data-orientation='vertical'][data-label]": {
|
|
89
|
+
alignItems: "flex-start"
|
|
90
|
+
},
|
|
91
|
+
// #18: the selected tab is marked by a semibold label, not by colour alone.
|
|
92
|
+
"&[data-state='active']": {
|
|
93
|
+
fontWeight: P
|
|
94
|
+
},
|
|
95
|
+
// In a vertical rail the selected tab also carries a leading bar, whose colour comes from the
|
|
96
|
+
// variant; horizontal tabs are marked by weight and fill alone.
|
|
97
|
+
"&[data-orientation='vertical'][data-state='active']": {
|
|
98
|
+
"&::before": {
|
|
99
|
+
content: "''",
|
|
100
|
+
position: "absolute",
|
|
101
|
+
left: 0,
|
|
102
|
+
top: u,
|
|
103
|
+
bottom: u,
|
|
104
|
+
// No stroke token owns a 3px indicator bar.
|
|
105
|
+
width: "3px",
|
|
106
|
+
...e.borderRadius(rt)
|
|
107
|
+
}
|
|
62
108
|
}
|
|
63
109
|
},
|
|
64
110
|
// Sizes
|
|
65
111
|
sm: {
|
|
66
|
-
...
|
|
112
|
+
...A,
|
|
113
|
+
...e.padding("0.375rem", u)
|
|
67
114
|
},
|
|
68
115
|
base: {
|
|
69
|
-
...
|
|
116
|
+
...A,
|
|
117
|
+
...e.padding(u, z)
|
|
70
118
|
},
|
|
71
119
|
lg: {
|
|
72
|
-
...
|
|
120
|
+
...A,
|
|
121
|
+
...e.padding(z, at)
|
|
73
122
|
},
|
|
74
123
|
// Variants
|
|
75
124
|
defaultVariant: {
|
|
76
|
-
color:
|
|
125
|
+
color: N,
|
|
126
|
+
// Hover sits below the selected grayA3, so a hovered tab cannot pass for the current one;
|
|
127
|
+
// the selected tab keeps its fill under the pointer.
|
|
77
128
|
":hover": {
|
|
78
|
-
backgroundColor:
|
|
129
|
+
backgroundColor: $
|
|
79
130
|
},
|
|
80
131
|
":focus-visible": {
|
|
81
|
-
outlineColor:
|
|
132
|
+
outlineColor: Y
|
|
82
133
|
},
|
|
83
134
|
"&[data-state='active']": {
|
|
84
|
-
backgroundColor:
|
|
135
|
+
backgroundColor: W,
|
|
136
|
+
"&:hover": {
|
|
137
|
+
backgroundColor: W
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
"&[data-orientation='vertical'][data-state='active']": {
|
|
141
|
+
"&::before": {
|
|
142
|
+
backgroundColor: E
|
|
143
|
+
}
|
|
85
144
|
}
|
|
86
145
|
},
|
|
87
146
|
highlightVariant: {
|
|
88
|
-
color:
|
|
147
|
+
color: X,
|
|
89
148
|
":hover": {
|
|
90
|
-
backgroundColor:
|
|
149
|
+
backgroundColor: Q
|
|
91
150
|
},
|
|
92
151
|
":focus-visible": {
|
|
93
|
-
outlineColor:
|
|
152
|
+
outlineColor: M
|
|
94
153
|
},
|
|
95
154
|
"&[data-state='active']": {
|
|
96
|
-
backgroundColor:
|
|
155
|
+
backgroundColor: J
|
|
156
|
+
},
|
|
157
|
+
"&[data-orientation='vertical'][data-state='active']": {
|
|
158
|
+
"&::before": {
|
|
159
|
+
backgroundColor: E
|
|
160
|
+
}
|
|
97
161
|
}
|
|
98
162
|
},
|
|
99
163
|
destructiveVariant: {
|
|
100
|
-
color:
|
|
164
|
+
color: L,
|
|
101
165
|
":hover": {
|
|
102
|
-
backgroundColor:
|
|
166
|
+
backgroundColor: q
|
|
103
167
|
},
|
|
104
168
|
":focus-visible": {
|
|
105
|
-
outlineColor:
|
|
169
|
+
outlineColor: _
|
|
106
170
|
},
|
|
107
171
|
"&[data-state='active']": {
|
|
108
|
-
backgroundColor:
|
|
172
|
+
backgroundColor: Z
|
|
173
|
+
},
|
|
174
|
+
"&[data-orientation='vertical'][data-state='active']": {
|
|
175
|
+
"&::before": {
|
|
176
|
+
backgroundColor: L
|
|
177
|
+
}
|
|
109
178
|
}
|
|
110
179
|
},
|
|
111
180
|
content: {
|
|
@@ -114,66 +183,130 @@ const x = s.createContext({
|
|
|
114
183
|
flexBasis: "0%",
|
|
115
184
|
outlineStyle: "none"
|
|
116
185
|
}
|
|
117
|
-
}),
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
186
|
+
}), ft = a.forwardRef(function({
|
|
187
|
+
className: n,
|
|
188
|
+
size: c = "base",
|
|
189
|
+
variant: r = "default",
|
|
190
|
+
value: i,
|
|
191
|
+
defaultValue: p,
|
|
192
|
+
onValueChange: v,
|
|
193
|
+
...f
|
|
194
|
+
}, V) {
|
|
195
|
+
const g = R(), [w, j] = a.useState(p), b = i !== void 0, m = (b ? i : w) ?? "", C = a.useRef({ value: m, isControlled: b, onValueChange: v });
|
|
196
|
+
C.current = { value: m, isControlled: b, onValueChange: v };
|
|
197
|
+
const d = a.useRef(null), x = a.useCallback((s) => {
|
|
198
|
+
const l = { value: s, reported: !1 };
|
|
199
|
+
d.current = l, setTimeout(() => {
|
|
200
|
+
d.current === l && (d.current = null);
|
|
201
|
+
}, 0);
|
|
202
|
+
}, []), h = a.useCallback((s) => {
|
|
203
|
+
var k;
|
|
204
|
+
const l = C.current, t = d.current;
|
|
205
|
+
if (t !== null && t.value === s) {
|
|
206
|
+
if (t.reported) return;
|
|
207
|
+
t.reported = !0;
|
|
208
|
+
}
|
|
209
|
+
s !== l.value && (l.isControlled || j(s), (k = l.onValueChange) == null || k.call(l, s));
|
|
210
|
+
}, []), I = a.useMemo(
|
|
211
|
+
() => ({ size: c, variant: r, select: h, beginPress: x }),
|
|
212
|
+
[c, r, h, x]
|
|
213
|
+
);
|
|
214
|
+
return /* @__PURE__ */ y(F.Provider, { value: I, children: /* @__PURE__ */ y(
|
|
215
|
+
O,
|
|
121
216
|
{
|
|
122
|
-
ref:
|
|
217
|
+
ref: V,
|
|
123
218
|
"data-slot": "tabs",
|
|
124
|
-
[
|
|
125
|
-
"data-size":
|
|
126
|
-
"data-variant":
|
|
127
|
-
className:
|
|
128
|
-
...
|
|
219
|
+
[S]: "tabs",
|
|
220
|
+
"data-size": c,
|
|
221
|
+
"data-variant": r,
|
|
222
|
+
className: T(g.root, n),
|
|
223
|
+
...f,
|
|
224
|
+
value: m,
|
|
225
|
+
onValueChange: h
|
|
129
226
|
}
|
|
130
227
|
) });
|
|
131
|
-
}),
|
|
132
|
-
const
|
|
133
|
-
return /* @__PURE__ */
|
|
134
|
-
|
|
228
|
+
}), gt = a.forwardRef(function({ className: n, ...c }, r) {
|
|
229
|
+
const i = R();
|
|
230
|
+
return /* @__PURE__ */ y(
|
|
231
|
+
D,
|
|
135
232
|
{
|
|
136
|
-
ref:
|
|
233
|
+
ref: r,
|
|
137
234
|
"data-slot": "tabs-list",
|
|
138
|
-
[
|
|
139
|
-
className:
|
|
140
|
-
...
|
|
235
|
+
[S]: "tabs-list",
|
|
236
|
+
className: T(i.list, n),
|
|
237
|
+
...c
|
|
141
238
|
}
|
|
142
239
|
);
|
|
143
|
-
})
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
240
|
+
});
|
|
241
|
+
function nt(o) {
|
|
242
|
+
if (typeof o == "string" || typeof o == "number")
|
|
243
|
+
return String(o);
|
|
244
|
+
if (Array.isArray(o) && o.every((n) => typeof n == "string" || typeof n == "number"))
|
|
245
|
+
return o.join("");
|
|
246
|
+
}
|
|
247
|
+
const bt = a.forwardRef(function({
|
|
248
|
+
className: n,
|
|
249
|
+
variant: c = "default",
|
|
250
|
+
onClick: r,
|
|
251
|
+
onKeyDown: i,
|
|
252
|
+
onBlur: p,
|
|
253
|
+
onMouseDown: v,
|
|
254
|
+
...f
|
|
255
|
+
}, V) {
|
|
256
|
+
const g = R(), {
|
|
257
|
+
size: w,
|
|
258
|
+
variant: j,
|
|
259
|
+
select: b,
|
|
260
|
+
beginPress: m
|
|
261
|
+
} = a.useContext(F), C = (t) => {
|
|
262
|
+
v == null || v(t), !t.defaultPrevented && t.button === 0 && !t.ctrlKey && !f.disabled && (m == null || m(f.value));
|
|
263
|
+
}, d = a.useRef(!1), x = (t) => {
|
|
264
|
+
i == null || i(t), d.current = !t.defaultPrevented && (t.key === "Enter" || t.key === " ");
|
|
265
|
+
}, h = (t) => {
|
|
266
|
+
p == null || p(t), d.current = !1;
|
|
267
|
+
}, I = (t) => {
|
|
268
|
+
r == null || r(t);
|
|
269
|
+
const k = d.current;
|
|
270
|
+
d.current = !1, !(k || t.detail !== 0 || t.defaultPrevented || t.ctrlKey || f.disabled) && (b == null || b(f.value));
|
|
271
|
+
}, s = nt(f.children), l = c === "destructive" ? g.destructiveVariant : j === "highlight" ? g.highlightVariant : g.defaultVariant;
|
|
272
|
+
return /* @__PURE__ */ y(
|
|
273
|
+
H,
|
|
147
274
|
{
|
|
148
|
-
ref:
|
|
275
|
+
ref: V,
|
|
149
276
|
"data-slot": "tabs-trigger",
|
|
150
|
-
[
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
277
|
+
[S]: "tabs-trigger",
|
|
278
|
+
"data-label": s,
|
|
279
|
+
className: T(
|
|
280
|
+
g.trigger,
|
|
281
|
+
g[w],
|
|
282
|
+
l,
|
|
283
|
+
n
|
|
156
284
|
),
|
|
157
|
-
...
|
|
285
|
+
...f,
|
|
286
|
+
...s !== void 0 ? { children: s } : {},
|
|
287
|
+
onClick: I,
|
|
288
|
+
onKeyDown: x,
|
|
289
|
+
onBlur: h,
|
|
290
|
+
onMouseDown: C
|
|
158
291
|
}
|
|
159
292
|
);
|
|
160
|
-
}),
|
|
161
|
-
const
|
|
162
|
-
return /* @__PURE__ */
|
|
163
|
-
|
|
293
|
+
}), mt = a.forwardRef(function({ className: n, ...c }, r) {
|
|
294
|
+
const i = R();
|
|
295
|
+
return /* @__PURE__ */ y(
|
|
296
|
+
B,
|
|
164
297
|
{
|
|
165
|
-
ref:
|
|
298
|
+
ref: r,
|
|
166
299
|
"data-slot": "tabs-content",
|
|
167
|
-
[
|
|
168
|
-
className:
|
|
169
|
-
...
|
|
300
|
+
[S]: "tabs-content",
|
|
301
|
+
className: T(i.content, n),
|
|
302
|
+
...c
|
|
170
303
|
}
|
|
171
304
|
);
|
|
172
305
|
});
|
|
173
306
|
export {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
307
|
+
ft as Tabs,
|
|
308
|
+
mt as TabsContent,
|
|
309
|
+
gt as TabsList,
|
|
310
|
+
bt as TabsTrigger
|
|
178
311
|
};
|
|
179
312
|
//# sourceMappingURL=tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nexport type TabsSize = \"sm\" | \"base\" | \"lg\"\nexport type TabsRootVariant = \"default\" | \"highlight\"\nexport type TabsTriggerVariant = \"default\" | \"destructive\"\n\ntype TabsContextValue = {\n size: TabsSize\n variant: TabsRootVariant\n}\n\nconst TabsContext = React.createContext<TabsContextValue>({\n size: \"base\",\n variant: \"default\",\n})\n\nconst useStyles = makeZenithStyles({\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n ...shorthands.gap(tokens.spacingElement2),\n \"&[data-orientation='vertical']\": {\n flexDirection: \"row\",\n alignItems: \"flex-start\",\n ...shorthands.gap(tokens.spacingElement2),\n },\n },\n list: {\n backgroundColor: \"transparent\",\n color: tokens.grayA12,\n height: \"auto\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n ...shorthands.borderRadius(tokens.radiusLg),\n ...shorthands.paddingBlock(tokens.spacingElement2),\n \"&[data-orientation='vertical']\": {\n flexDirection: \"column\",\n alignItems: \"stretch\",\n justifyContent: \"flex-start\",\n ...shorthands.gap(tokens.spacingElement1),\n ...shorthands.paddingBlock(0),\n },\n },\n trigger: {\n display: \"inline-flex\",\n alignItems: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n backgroundColor: \"transparent\",\n ...shorthands.borderStyle(\"none\"),\n ...shorthands.borderWidth(0),\n ...shorthands.borderRadius(tokens.radiusLg),\n cursor: \"pointer\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n transitionProperty: \"all\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineOffset: \"2px\",\n outlineStyle: \"solid\",\n },\n \"&[data-orientation='vertical']\": {\n justifyContent: \"flex-start\",\n textAlign: \"left\",\n width: \"100%\",\n },\n },\n // Sizes\n sm: {\n ...shorthands.padding(\"0.375rem\", tokens.spacingElement2),\n },\n base: {\n ...shorthands.padding(tokens.spacingElement2, tokens.spacingElement3),\n },\n lg: {\n ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n },\n // Variants\n defaultVariant: {\n color: tokens.grayA12,\n \":hover\": {\n backgroundColor: tokens.grayA4,\n },\n \":focus-visible\": {\n outlineColor: tokens.grayA8,\n },\n \"&[data-state='active']\": {\n backgroundColor: tokens.grayA3,\n },\n },\n highlightVariant: {\n color: tokens.accentA12,\n \":hover\": {\n backgroundColor: tokens.accentA4,\n },\n \":focus-visible\": {\n outlineColor: tokens.accentA8,\n },\n \"&[data-state='active']\": {\n backgroundColor: tokens.accentA3,\n },\n },\n destructiveVariant: {\n color: tokens.errorA11,\n \":hover\": {\n backgroundColor: tokens.errorA4,\n },\n \":focus-visible\": {\n outlineColor: tokens.errorA8,\n },\n \"&[data-state='active']\": {\n backgroundColor: tokens.errorA3,\n },\n },\n content: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n outlineStyle: \"none\",\n },\n})\n\nexport type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n size?: TabsSize\n variant?: TabsRootVariant\n}\n\nexport const Tabs = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.Root>,\n TabsProps\n>(function Tabs(\n { className, size = \"base\", variant = \"default\", ...props },\n ref\n) {\n const styles = useStyles()\n const contextValue = React.useMemo(() => ({ size, variant }), [size, variant])\n\n return (\n <TabsContext.Provider value={contextValue}>\n <TabsPrimitive.Root\n ref={ref}\n data-slot=\"tabs\"\n {...{ [SLOT_ATTR]: \"tabs\" }}\n data-size={size}\n data-variant={variant}\n className={mergeClasses(styles.root, className)}\n {...props}\n />\n </TabsContext.Provider>\n )\n})\n\nexport type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>\n\nexport const TabsList = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.List>,\n TabsListProps\n>(function TabsList({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <TabsPrimitive.List\n ref={ref}\n data-slot=\"tabs-list\"\n {...{ [SLOT_ATTR]: \"tabs-list\" }}\n className={mergeClasses(styles.list, className)}\n {...props}\n />\n )\n})\n\nexport type TabsTriggerProps = React.ComponentProps<\n typeof TabsPrimitive.Trigger\n> & {\n variant?: TabsTriggerVariant\n}\n\nexport const TabsTrigger = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(function TabsTrigger({ className, variant = \"default\", ...props }, ref) {\n const styles = useStyles()\n const { size, variant: rootVariant } = React.useContext(TabsContext)\n\n const resolvedVariantClass =\n variant === \"destructive\"\n ? styles.destructiveVariant\n : rootVariant === \"highlight\"\n ? styles.highlightVariant\n : styles.defaultVariant\n\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n data-slot=\"tabs-trigger\"\n {...{ [SLOT_ATTR]: \"tabs-trigger\" }}\n className={mergeClasses(\n styles.trigger,\n styles[size],\n resolvedVariantClass,\n className\n )}\n {...props}\n />\n )\n})\n\nexport type TabsContentProps = React.ComponentProps<\n typeof TabsPrimitive.Content\n>\n\nexport const TabsContent = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.Content>,\n TabsContentProps\n>(function TabsContent({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <TabsPrimitive.Content\n ref={ref}\n data-slot=\"tabs-content\"\n {...{ [SLOT_ATTR]: \"tabs-content\" }}\n className={mergeClasses(styles.content, className)}\n {...props}\n />\n )\n})\n"],"names":["TabsContext","React","useStyles","makeZenithStyles","shorthands","tokens.spacingElement2","tokens.grayA12","tokens.radiusLg","tokens.spacingElement1","tokens.textSm","tokens.leadingSm","tokens.spacingElement3","tokens.spacingGroup2","tokens.grayA4","tokens.grayA8","tokens.grayA3","tokens.accentA12","tokens.accentA4","tokens.accentA8","tokens.accentA3","tokens.errorA11","tokens.errorA4","tokens.errorA8","tokens.errorA3","Tabs","className","size","variant","props","ref","styles","contextValue","jsx","TabsPrimitive.Root","SLOT_ATTR","mergeClasses","TabsList","TabsPrimitive.List","TabsTrigger","rootVariant","resolvedVariantClass","TabsPrimitive.Trigger","TabsContent","TabsPrimitive.Content"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nexport type TabsSize = \"sm\" | \"base\" | \"lg\"\nexport type TabsRootVariant = \"default\" | \"highlight\"\nexport type TabsTriggerVariant = \"default\" | \"destructive\"\n\ntype TabsContextValue = {\n size: TabsSize\n variant: TabsRootVariant\n /** Selects a tab. Absent when a trigger renders outside `Tabs`. */\n select?: (value: string) => void\n /** Marks the start of a pointer press on a trigger; see `beginPress` in `Tabs`. */\n beginPress?: (value: string) => void\n}\n\nconst TabsContext = React.createContext<TabsContextValue>({\n size: \"base\",\n variant: \"default\",\n})\n\nconst useStyles = makeZenithStyles({\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n ...shorthands.gap(tokens.spacingElement2),\n \"&[data-orientation='vertical']\": {\n flexDirection: \"row\",\n alignItems: \"flex-start\",\n ...shorthands.gap(tokens.spacingElement2),\n },\n },\n list: {\n ...boxModel,\n backgroundColor: \"transparent\",\n color: tokens.grayA12,\n height: \"auto\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n ...shorthands.borderRadius(tokens.radiusLg),\n ...shorthands.paddingBlock(tokens.spacingElement2),\n \"&[data-orientation='vertical']\": {\n flexDirection: \"column\",\n alignItems: \"stretch\",\n justifyContent: \"flex-start\",\n ...shorthands.gap(tokens.spacingElement1),\n ...shorthands.paddingBlock(0),\n },\n },\n trigger: {\n ...nativeControl,\n position: \"relative\",\n display: \"inline-flex\",\n alignItems: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n backgroundColor: \"transparent\",\n ...shorthands.borderStyle(\"none\"),\n ...shorthands.borderWidth(0),\n ...shorthands.borderRadius(tokens.radiusLg),\n cursor: \"pointer\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n // A label never wraps, so selection (and its semibold) can never change a tab's height.\n whiteSpace: \"nowrap\",\n transitionProperty: \"all\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineOffset: \"2px\",\n outlineStyle: \"solid\",\n },\n \"&[data-orientation='vertical']\": {\n justifyContent: \"flex-start\",\n textAlign: \"left\",\n width: \"100%\",\n },\n // A plain-text label reserves its semibold width up front: a hidden, zero-height bold copy\n // stacks under it, so every tab is as wide as its bold label in every state and selecting one\n // never moves its neighbours or the panel. Rich children (icons, elements) are not reserved.\n \"&[data-label]\": {\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n rowGap: 0,\n \"&::after\": {\n content: \"attr(data-label)\",\n height: 0,\n ...shorthands.overflow(\"hidden\"),\n visibility: \"hidden\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n fontWeight: tokens.fontWeightSemibold,\n },\n },\n // A vertical rail keeps its labels left-aligned inside the reserved width.\n \"&[data-orientation='vertical'][data-label]\": {\n alignItems: \"flex-start\",\n },\n // #18: the selected tab is marked by a semibold label, not by colour alone.\n \"&[data-state='active']\": {\n fontWeight: tokens.fontWeightSemibold,\n },\n // In a vertical rail the selected tab also carries a leading bar, whose colour comes from the\n // variant; horizontal tabs are marked by weight and fill alone.\n \"&[data-orientation='vertical'][data-state='active']\": {\n \"&::before\": {\n content: \"''\",\n position: \"absolute\",\n left: 0,\n top: tokens.spacingElement2,\n bottom: tokens.spacingElement2,\n // No stroke token owns a 3px indicator bar.\n width: \"3px\",\n ...shorthands.borderRadius(tokens.radiusFull),\n },\n },\n },\n // Sizes\n sm: {\n ...boxModel,\n ...shorthands.padding(\"0.375rem\", tokens.spacingElement2),\n },\n base: {\n ...boxModel,\n ...shorthands.padding(tokens.spacingElement2, tokens.spacingElement3),\n },\n lg: {\n ...boxModel,\n ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n },\n // Variants\n defaultVariant: {\n color: tokens.grayA12,\n // Hover sits below the selected grayA3, so a hovered tab cannot pass for the current one;\n // the selected tab keeps its fill under the pointer.\n \":hover\": {\n backgroundColor: tokens.grayA2,\n },\n \":focus-visible\": {\n outlineColor: tokens.grayA8,\n },\n \"&[data-state='active']\": {\n backgroundColor: tokens.grayA3,\n \"&:hover\": {\n backgroundColor: tokens.grayA3,\n },\n },\n \"&[data-orientation='vertical'][data-state='active']\": {\n \"&::before\": {\n backgroundColor: tokens.accentA11,\n },\n },\n },\n highlightVariant: {\n color: tokens.accentA12,\n \":hover\": {\n backgroundColor: tokens.accentA4,\n },\n \":focus-visible\": {\n outlineColor: tokens.accentA8,\n },\n \"&[data-state='active']\": {\n backgroundColor: tokens.accentA3,\n },\n \"&[data-orientation='vertical'][data-state='active']\": {\n \"&::before\": {\n backgroundColor: tokens.accentA11,\n },\n },\n },\n destructiveVariant: {\n color: tokens.errorA11,\n \":hover\": {\n backgroundColor: tokens.errorA4,\n },\n \":focus-visible\": {\n outlineColor: tokens.errorA8,\n },\n \"&[data-state='active']\": {\n backgroundColor: tokens.errorA3,\n },\n \"&[data-orientation='vertical'][data-state='active']\": {\n \"&::before\": {\n backgroundColor: tokens.errorA11,\n },\n },\n },\n content: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n outlineStyle: \"none\",\n },\n})\n\nexport type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n size?: TabsSize\n variant?: TabsRootVariant\n}\n\nexport const Tabs = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.Root>,\n TabsProps\n>(function Tabs(\n {\n className,\n size = \"base\",\n variant = \"default\",\n value: valueProp,\n defaultValue,\n onValueChange,\n ...props\n },\n ref\n) {\n const styles = useStyles()\n\n // Zenith owns the value so a trigger can select on click, which Radix does not do (it selects on\n // mousedown, Enter/Space and focus). Radix always receives it controlled; \"\" selects nothing,\n // which is what an uncontrolled Root without a defaultValue shows.\n const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n const isControlled = valueProp !== undefined\n const value = (isControlled ? valueProp : uncontrolled) ?? \"\"\n const latest = React.useRef({ value, isControlled, onValueChange })\n latest.current = { value, isControlled, onValueChange }\n\n // One pointer press on a trigger can reach `select` twice for the same tab: Radix selects on\n // mousedown, then again on the focus that press causes if the tab is still unselected, which it\n // is when a controlled owner declined (#17; unchanged through Radix Tabs 1.2.1). A press opens a\n // window in which only the first report for its tab goes through. Mousedown and the focus it\n // causes run in one task, so the window closes on the next one and a later focus is reported.\n const press = React.useRef<{ value: string; reported: boolean } | null>(null)\n const beginPress = React.useCallback((pressed: string) => {\n const token = { value: pressed, reported: false }\n press.current = token\n setTimeout(() => {\n if (press.current === token) press.current = null\n }, 0)\n }, [])\n\n const select = React.useCallback((next: string) => {\n const current = latest.current\n const pressed = press.current\n if (pressed !== null && pressed.value === next) {\n if (pressed.reported) return\n pressed.reported = true\n }\n if (next === current.value) return\n if (!current.isControlled) setUncontrolled(next)\n current.onValueChange?.(next)\n }, [])\n\n const contextValue = React.useMemo(\n () => ({ size, variant, select, beginPress }),\n [size, variant, select, beginPress]\n )\n\n return (\n <TabsContext.Provider value={contextValue}>\n <TabsPrimitive.Root\n ref={ref}\n data-slot=\"tabs\"\n {...{ [SLOT_ATTR]: \"tabs\" }}\n data-size={size}\n data-variant={variant}\n className={mergeClasses(styles.root, className)}\n {...props}\n value={value}\n onValueChange={select}\n />\n </TabsContext.Provider>\n )\n})\n\nexport type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>\n\nexport const TabsList = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.List>,\n TabsListProps\n>(function TabsList({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <TabsPrimitive.List\n ref={ref}\n data-slot=\"tabs-list\"\n {...{ [SLOT_ATTR]: \"tabs-list\" }}\n className={mergeClasses(styles.list, className)}\n {...props}\n />\n )\n})\n\nexport type TabsTriggerProps = React.ComponentProps<\n typeof TabsPrimitive.Trigger\n> & {\n variant?: TabsTriggerVariant\n /** The tab's label. Plain text (a string, number, or array of them) reserves its semibold width so selection never shifts layout; rich children such as icons or elements are not reserved. */\n children?: React.ReactNode\n}\n\n/** A string, number, or array of only strings and numbers, as one string; otherwise undefined. */\nfunction plainLabel(children: React.ReactNode): string | undefined {\n if (typeof children === \"string\" || typeof children === \"number\")\n return String(children)\n if (\n Array.isArray(children) &&\n children.every((c) => typeof c === \"string\" || typeof c === \"number\")\n )\n return children.join(\"\")\n return undefined\n}\n\nexport const TabsTrigger = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(function TabsTrigger(\n {\n className,\n variant = \"default\",\n onClick,\n onKeyDown,\n onBlur,\n onMouseDown,\n ...props\n },\n ref\n) {\n const styles = useStyles()\n const {\n size,\n variant: rootVariant,\n select,\n beginPress,\n } = React.useContext(TabsContext)\n\n // Runs before Radix's own mousedown handler, under the same conditions Radix selects on.\n const handleMouseDown: TabsTriggerProps[\"onMouseDown\"] = (event) => {\n onMouseDown?.(event)\n if (\n !event.defaultPrevented &&\n event.button === 0 &&\n !event.ctrlKey &&\n !props.disabled\n ) {\n beginPress?.(props.value)\n }\n }\n\n // Radix has already selected on the key that synthesises this click; selecting again would\n // report the change twice to an owner that declined it.\n const keyActivated = React.useRef(false)\n\n const handleKeyDown: TabsTriggerProps[\"onKeyDown\"] = (event) => {\n onKeyDown?.(event)\n // Only a key Radix acted on synthesises a click. A prevented one skips Radix and produces no\n // click, so flagging it would leave nothing to clear the flag and swallow the next bare click.\n keyActivated.current =\n !event.defaultPrevented && (event.key === \"Enter\" || event.key === \" \")\n }\n\n const handleBlur: TabsTriggerProps[\"onBlur\"] = (event) => {\n onBlur?.(event)\n keyActivated.current = false\n }\n\n // A click with no mousedown before it — `element.click()`, assistive technology, automation —\n // reaches none of Radix's handlers. `detail` is 0 for exactly those clicks; a pointer click\n // carries its count and was already handled, or deliberately refused, on mousedown.\n const handleClick: TabsTriggerProps[\"onClick\"] = (event) => {\n onClick?.(event)\n const fromKey = keyActivated.current\n keyActivated.current = false\n if (\n fromKey ||\n event.detail !== 0 ||\n event.defaultPrevented ||\n event.ctrlKey ||\n props.disabled\n ) {\n return\n }\n select?.(props.value)\n }\n\n // Feeds the reserved-width copy; only plain text can be copied by CSS.\n const label = plainLabel(props.children)\n\n const resolvedVariantClass =\n variant === \"destructive\"\n ? styles.destructiveVariant\n : rootVariant === \"highlight\"\n ? styles.highlightVariant\n : styles.defaultVariant\n\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n data-slot=\"tabs-trigger\"\n {...{ [SLOT_ATTR]: \"tabs-trigger\" }}\n data-label={label}\n className={mergeClasses(\n styles.trigger,\n styles[size],\n resolvedVariantClass,\n className\n )}\n {...props}\n // The joined label is rendered as one text node, shaped exactly like its reserved copy.\n {...(label !== undefined ? { children: label } : {})}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n onMouseDown={handleMouseDown}\n />\n )\n})\n\nexport type TabsContentProps = React.ComponentProps<\n typeof TabsPrimitive.Content\n>\n\nexport const TabsContent = React.forwardRef<\n React.ComponentRef<typeof TabsPrimitive.Content>,\n TabsContentProps\n>(function TabsContent({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <TabsPrimitive.Content\n ref={ref}\n data-slot=\"tabs-content\"\n {...{ [SLOT_ATTR]: \"tabs-content\" }}\n className={mergeClasses(styles.content, className)}\n {...props}\n />\n )\n})\n"],"names":["TabsContext","React","useStyles","makeZenithStyles","shorthands","tokens.spacingElement2","boxModel","tokens.grayA12","tokens.radiusLg","tokens.spacingElement1","nativeControl","tokens.textSm","tokens.leadingSm","tokens.fontWeightSemibold","tokens.radiusFull","tokens.spacingElement3","tokens.spacingGroup2","tokens.grayA2","tokens.grayA8","tokens.grayA3","tokens.accentA11","tokens.accentA12","tokens.accentA4","tokens.accentA8","tokens.accentA3","tokens.errorA11","tokens.errorA4","tokens.errorA8","tokens.errorA3","Tabs","className","size","variant","valueProp","defaultValue","onValueChange","props","ref","styles","uncontrolled","setUncontrolled","isControlled","value","latest","press","beginPress","pressed","token","select","next","current","_a","contextValue","jsx","TabsPrimitive.Root","SLOT_ATTR","mergeClasses","TabsList","TabsPrimitive.List","plainLabel","children","c","TabsTrigger","onClick","onKeyDown","onBlur","onMouseDown","rootVariant","handleMouseDown","event","keyActivated","handleKeyDown","handleBlur","handleClick","fromKey","label","resolvedVariantClass","TabsPrimitive.Trigger","TabsContent","TabsPrimitive.Content"],"mappings":"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"}
|