@epilot/zenith-react 0.1.0-next.0 → 0.1.0
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 +95 -15
- package/dist/components/appearance-boundary/appearance-boundary.js +32 -34
- package/dist/components/appearance-boundary/appearance-boundary.js.map +1 -1
- package/dist/components/badge/badge.js +1 -1
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +10 -10
- package/dist/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/components/button/button.js +28 -28
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/button-group/button-group.js.map +1 -1
- package/dist/components/callout/callout.js +13 -13
- package/dist/components/callout/callout.js.map +1 -1
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/checkbox/checkbox.js +13 -13
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/code-block/code-block.js +6 -6
- package/dist/components/code-block/code-block.js.map +1 -1
- package/dist/components/code-editor/code-editor.js +1 -1
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/code-editor/indent.js.map +1 -1
- package/dist/components/command/command.js +7 -13
- package/dist/components/command/command.js.map +1 -1
- package/dist/components/data-table/data-table-body.js +120 -66
- package/dist/components/data-table/data-table-body.js.map +1 -1
- package/dist/components/data-table/data-table-column-header.js +7 -7
- package/dist/components/data-table/data-table-column-header.js.map +1 -1
- package/dist/components/data-table/data-table-column-order.js +277 -0
- package/dist/components/data-table/data-table-column-order.js.map +1 -0
- package/dist/components/data-table/data-table-content.js +72 -58
- package/dist/components/data-table/data-table-content.js.map +1 -1
- package/dist/components/data-table/data-table-context.js +8 -4
- package/dist/components/data-table/data-table-context.js.map +1 -1
- package/dist/components/data-table/data-table-footer.js +31 -0
- package/dist/components/data-table/data-table-footer.js.map +1 -0
- package/dist/components/data-table/data-table-header-draggable.js +151 -0
- package/dist/components/data-table/data-table-header-draggable.js.map +1 -0
- package/dist/components/data-table/data-table-header.js +130 -57
- package/dist/components/data-table/data-table-header.js.map +1 -1
- package/dist/components/data-table/data-table-resize-handle.js +137 -0
- package/dist/components/data-table/data-table-resize-handle.js.map +1 -0
- package/dist/components/data-table/data-table.js +184 -156
- package/dist/components/data-table/data-table.js.map +1 -1
- package/dist/components/data-table/hooks/use-data-table-virtualizer.js +9 -0
- package/dist/components/data-table/hooks/use-data-table-virtualizer.js.map +1 -0
- package/dist/components/date-range-picker/date-range-picker.js +197 -195
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-time-picker/calendar.js +29 -29
- package/dist/components/date-time-picker/calendar.js.map +1 -1
- package/dist/components/date-time-picker/time-picker.js +55 -55
- package/dist/components/date-time-picker/time-picker.js.map +1 -1
- package/dist/components/density-provider/density-provider.js.map +1 -1
- package/dist/components/dialog/dialog.js +1 -1
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/drawer/drawer.js +5 -5
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.js +36 -36
- package/dist/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/components/field/field-combobox.js +4 -4
- package/dist/components/field/field-combobox.js.map +1 -1
- package/dist/components/field/field.js +40 -40
- package/dist/components/field/field.js.map +1 -1
- package/dist/components/label/label.js +0 -28
- package/dist/components/label/label.js.map +1 -1
- package/dist/components/list/list.js +42 -52
- package/dist/components/list/list.js.map +1 -1
- package/dist/components/option-card/option-card.js +27 -25
- package/dist/components/option-card/option-card.js.map +1 -1
- package/dist/components/pill/pill.js +9 -9
- package/dist/components/pill/pill.js.map +1 -1
- package/dist/components/radio/radio.js +14 -14
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/scroll-area/scroll-area.js +9 -9
- package/dist/components/scroll-area/scroll-area.js.map +1 -1
- package/dist/components/segmented-control/segmented-control.js +1 -1
- package/dist/components/segmented-control/segmented-control.js.map +1 -1
- package/dist/components/select/select.js +11 -11
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/separator/separator.js.map +1 -1
- package/dist/components/skeleton/skeleton.js.map +1 -1
- package/dist/components/slot/compose-as-child.js.map +1 -1
- package/dist/components/spinner/spinner.js.map +1 -1
- package/dist/components/switch/switch.js +11 -11
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/table-pagination.js +1 -1
- package/dist/components/table/table-pagination.js.map +1 -1
- package/dist/components/table/table.js +15 -15
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/text/text.js +10 -1
- package/dist/components/text/text.js.map +1 -1
- package/dist/components/toast/toast.js +30 -32
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/toggle/toggle.js +20 -20
- package/dist/components/toggle/toggle.js.map +1 -1
- package/dist/delivery/index.d.ts +10 -44
- package/dist/delivery/index.js +5 -9
- package/dist/index.d.ts +1994 -2272
- package/dist/index.js +133 -121
- package/dist/index.js.map +1 -1
- package/dist/lib/clear-button.js.map +1 -1
- package/dist/lib/code-highlight.js.map +1 -1
- package/dist/lib/code-tokens.js.map +1 -1
- package/dist/lib/pagination.js.map +1 -1
- package/dist/packages/tokens/dist/delivery/index.js +18 -48
- package/dist/packages/tokens/dist/delivery/index.js.map +1 -1
- package/dist/packages/tokens/dist/generated/core.generated.js +18 -0
- package/dist/packages/tokens/dist/generated/core.generated.js.map +1 -0
- package/dist/packages/tokens/dist/generated/palette.generated.js +5 -5
- package/dist/packages/tokens/dist/generated/palette.generated.js.map +1 -1
- package/dist/packages/tokens/dist/install.js +9 -9
- package/dist/packages/tokens/dist/install.js.map +1 -1
- package/dist/styles/document-context.js.map +1 -1
- package/dist/styles/make-styles.js.map +1 -1
- package/dist/tokens/core.meta.generated.js +2 -2
- package/dist/tokens/core.meta.generated.js.map +1 -1
- package/dist/tokens/index.d.ts +1029 -1104
- package/dist/tokens/index.js +1031 -1106
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/palette.generated.js +2 -2
- package/dist/tokens/palette.generated.js.map +1 -1
- package/dist/tokens/use-palette-tokens.js.map +1 -1
- package/dist/tokens.json +605 -755
- package/dist/vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js +385 -340
- package/dist/vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js.map +1 -1
- package/dist/vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js +344 -229
- package/dist/vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js.map +1 -1
- package/dist/vendor/.bun/@dnd-kit_utilities@3.2.2_62547eec5a2188e3/vendor/@dnd-kit/utilities/dist/utilities.esm.js +1 -1
- package/dist/vendor/.bun/@tanstack_react-virtual@3.11.2_6f4b9a1cfb20c0ae/vendor/@tanstack/react-virtual/dist/esm/index.js +36 -0
- package/dist/vendor/.bun/@tanstack_react-virtual@3.11.2_6f4b9a1cfb20c0ae/vendor/@tanstack/react-virtual/dist/esm/index.js.map +1 -0
- package/dist/vendor/.bun/@tanstack_virtual-core@3.11.2/vendor/@tanstack/virtual-core/dist/esm/index.js +450 -0
- package/dist/vendor/.bun/@tanstack_virtual-core@3.11.2/vendor/@tanstack/virtual-core/dist/esm/index.js.map +1 -0
- package/dist/vendor/.bun/@tanstack_virtual-core@3.11.2/vendor/@tanstack/virtual-core/dist/esm/utils.js +50 -0
- package/dist/vendor/.bun/@tanstack_virtual-core@3.11.2/vendor/@tanstack/virtual-core/dist/esm/utils.js.map +1 -0
- package/package.json +5 -4
- package/scripts/migration-diagnostics-core.mjs +19 -90
- package/scripts/migration-diagnostics.mjs +1 -16
- package/scripts/migration-sweep.mjs +2 -12
- package/ADOPTING.md +0 -73
- package/dist/packages/tokens/dist/delivery/internal.js +0 -181
- package/dist/packages/tokens/dist/delivery/internal.js.map +0 -1
- package/dist/packages/tokens/dist/generated/core.meta.generated.js +0 -10
- package/dist/packages/tokens/dist/generated/core.meta.generated.js.map +0 -1
- package/dist/token-assets/core/5cd4072decf5df2a664f0b1d5f2ec250a3309101ded3056c1f87c8bbe3738d50.css +0 -22
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { jsxs as O, jsx as
|
|
1
|
+
import { jsxs as O, jsx as d } from "react/jsx-runtime";
|
|
2
2
|
import * as n from "react";
|
|
3
3
|
import { SLOT_ATTR as x, mergeClasses as h, shorthands as k } from "@epilot/zenith-runtime/v1";
|
|
4
4
|
import { makeZenithStyles as U } from "../../styles/make-styles.js";
|
|
5
|
-
import {
|
|
6
|
-
import { getHours as
|
|
7
|
-
const
|
|
5
|
+
import { accentSolidHover as V, accentContrast as _, accentSolid as z, fontWeightSemibold as F, grayA4 as G, grayA11 as L, leadingSm as X, textSm as Z, grayA8 as J, leadingBase as K, textBase as P, grayA6 as Q, radiusMd as N, grayA5 as tt, spacingElement1 as et } from "../../tokens/index.js";
|
|
6
|
+
import { getHours as rt, getMinutes as ot, updateTime as R, padNumber as nt } from "./date-time-picker-utils.js";
|
|
7
|
+
const lt = Array.from({ length: 24 }, (w, e) => e), A = U({
|
|
8
8
|
root: {
|
|
9
9
|
display: "flex",
|
|
10
10
|
flexDirection: "row",
|
|
11
11
|
alignItems: "stretch",
|
|
12
12
|
justifyContent: "center",
|
|
13
|
-
...k.gap(
|
|
13
|
+
...k.gap(et)
|
|
14
14
|
},
|
|
15
15
|
fillHeight: {
|
|
16
16
|
height: "100%"
|
|
@@ -31,8 +31,8 @@ const le = Array.from({ length: 24 }, (w, t) => t), R = U({
|
|
|
31
31
|
overflowX: "hidden",
|
|
32
32
|
width: "100%",
|
|
33
33
|
alignItems: "center",
|
|
34
|
-
...k.borderRadius(
|
|
35
|
-
...k.border("1px", "solid",
|
|
34
|
+
...k.borderRadius(N),
|
|
35
|
+
...k.border("1px", "solid", tt),
|
|
36
36
|
scrollbarWidth: "thin",
|
|
37
37
|
scrollbarColor: `${Q} transparent`
|
|
38
38
|
},
|
|
@@ -60,7 +60,7 @@ const le = Array.from({ length: 24 }, (w, t) => t), R = U({
|
|
|
60
60
|
justifyContent: "center",
|
|
61
61
|
fontSize: Z,
|
|
62
62
|
lineHeight: X,
|
|
63
|
-
...k.borderRadius(
|
|
63
|
+
...k.borderRadius(N),
|
|
64
64
|
transitionProperty: "background-color, color",
|
|
65
65
|
transitionDuration: "150ms",
|
|
66
66
|
minHeight: "2rem",
|
|
@@ -92,15 +92,15 @@ const le = Array.from({ length: 24 }, (w, t) => t), R = U({
|
|
|
92
92
|
cursor: "pointer"
|
|
93
93
|
}
|
|
94
94
|
}), H = n.memo(function({
|
|
95
|
-
value:
|
|
95
|
+
value: e,
|
|
96
96
|
isSelected: a,
|
|
97
97
|
isDisabled: l,
|
|
98
|
-
onClick:
|
|
98
|
+
onClick: m
|
|
99
99
|
}) {
|
|
100
|
-
const c =
|
|
101
|
-
l ||
|
|
102
|
-
}, [
|
|
103
|
-
return /* @__PURE__ */
|
|
100
|
+
const c = A(), f = n.useCallback(() => {
|
|
101
|
+
l || m(e);
|
|
102
|
+
}, [m, e, l]);
|
|
103
|
+
return /* @__PURE__ */ d(
|
|
104
104
|
"button",
|
|
105
105
|
{
|
|
106
106
|
"aria-disabled": l,
|
|
@@ -114,21 +114,21 @@ const le = Array.from({ length: 24 }, (w, t) => t), R = U({
|
|
|
114
114
|
"data-selected": a,
|
|
115
115
|
"data-slot": "time-button",
|
|
116
116
|
[x]: "time-button",
|
|
117
|
-
"data-value":
|
|
117
|
+
"data-value": e,
|
|
118
118
|
disabled: l,
|
|
119
119
|
onClick: f,
|
|
120
120
|
type: "button",
|
|
121
|
-
children:
|
|
121
|
+
children: nt(e)
|
|
122
122
|
}
|
|
123
123
|
);
|
|
124
124
|
});
|
|
125
125
|
H.displayName = "TimeButton";
|
|
126
|
-
const
|
|
126
|
+
const dt = n.forwardRef(
|
|
127
127
|
function({
|
|
128
|
-
value:
|
|
128
|
+
value: e,
|
|
129
129
|
onChange: a,
|
|
130
130
|
onTimeSelect: l,
|
|
131
|
-
disablePast:
|
|
131
|
+
disablePast: m = !1,
|
|
132
132
|
currentTimeInTimezone: c,
|
|
133
133
|
fillHeight: f = !1,
|
|
134
134
|
minuteStep: I = 1,
|
|
@@ -136,42 +136,42 @@ const me = n.forwardRef(
|
|
|
136
136
|
hoursLabel: W = "Hours",
|
|
137
137
|
minutesLabel: T = "Minutes"
|
|
138
138
|
}, E) {
|
|
139
|
-
const r =
|
|
140
|
-
const
|
|
141
|
-
for (let s = 0; s < 60; s += g)
|
|
142
|
-
return
|
|
143
|
-
}, [g]), u =
|
|
139
|
+
const r = A(), g = Math.max(1, Math.floor(I)), M = n.useMemo(() => {
|
|
140
|
+
const t = [];
|
|
141
|
+
for (let s = 0; s < 60; s += g) t.push(s);
|
|
142
|
+
return t;
|
|
143
|
+
}, [g]), u = e !== null ? rt(e) : -1, S = e !== null ? ot(e) : -1, p = e === null ? -1 : g === 1 ? S : Math.min(
|
|
144
144
|
M[M.length - 1],
|
|
145
145
|
Math.round(S / g) * g
|
|
146
146
|
), C = n.useRef(null), B = n.useRef(null), i = n.useMemo(
|
|
147
147
|
() => c || /* @__PURE__ */ new Date(),
|
|
148
148
|
[c]
|
|
149
|
-
), y = n.useMemo(() =>
|
|
150
|
-
(
|
|
151
|
-
[
|
|
149
|
+
), y = n.useMemo(() => e ? e.getFullYear() === i.getFullYear() && e.getMonth() === i.getMonth() && e.getDate() === i.getDate() : !1, [e, i]), b = i.getHours(), D = i.getMinutes(), Y = n.useCallback(
|
|
150
|
+
(t) => !m || !y ? !1 : t < b,
|
|
151
|
+
[m, y, b]
|
|
152
152
|
), $ = n.useCallback(
|
|
153
|
-
(
|
|
154
|
-
[
|
|
153
|
+
(t) => !m || !y ? !1 : u < b ? !0 : u === b ? t < D : !1,
|
|
154
|
+
[m, y, u, b, D]
|
|
155
155
|
), q = n.useCallback(
|
|
156
|
-
(
|
|
157
|
-
const s =
|
|
158
|
-
a(
|
|
156
|
+
(t) => {
|
|
157
|
+
const s = e || i, o = p >= 0 ? p : 0;
|
|
158
|
+
a(R(s, t, o));
|
|
159
159
|
},
|
|
160
|
-
[a,
|
|
160
|
+
[a, e, i, p]
|
|
161
161
|
), v = n.useCallback(
|
|
162
|
-
(
|
|
163
|
-
const s =
|
|
164
|
-
a(
|
|
162
|
+
(t) => {
|
|
163
|
+
const s = e || i, o = u >= 0 ? u : 0;
|
|
164
|
+
a(R(s, o, t)), l == null || l();
|
|
165
165
|
},
|
|
166
|
-
[a, l,
|
|
166
|
+
[a, l, e, i, u]
|
|
167
167
|
);
|
|
168
168
|
return n.useEffect(() => {
|
|
169
|
-
var
|
|
169
|
+
var t, s;
|
|
170
170
|
if (C.current) {
|
|
171
171
|
const o = C.current.querySelector(
|
|
172
172
|
`[data-value="${u}"]`
|
|
173
173
|
);
|
|
174
|
-
o && ((
|
|
174
|
+
o && ((t = o.scrollIntoView) == null || t.call(o, {
|
|
175
175
|
block: "center",
|
|
176
176
|
behavior: "auto"
|
|
177
177
|
}));
|
|
@@ -197,14 +197,14 @@ const me = n.forwardRef(
|
|
|
197
197
|
"data-slot": "timepicker",
|
|
198
198
|
[x]: "timepicker",
|
|
199
199
|
children: [
|
|
200
|
-
/* @__PURE__ */
|
|
200
|
+
/* @__PURE__ */ d(
|
|
201
201
|
"div",
|
|
202
202
|
{
|
|
203
203
|
className: h(
|
|
204
204
|
r.column,
|
|
205
205
|
f && r.columnFillHeight
|
|
206
206
|
),
|
|
207
|
-
children: /* @__PURE__ */
|
|
207
|
+
children: /* @__PURE__ */ d(
|
|
208
208
|
"div",
|
|
209
209
|
{
|
|
210
210
|
className: h(
|
|
@@ -216,29 +216,29 @@ const me = n.forwardRef(
|
|
|
216
216
|
role: "group",
|
|
217
217
|
[x]: "timepicker-scroll",
|
|
218
218
|
ref: C,
|
|
219
|
-
children:
|
|
219
|
+
children: lt.map((t) => /* @__PURE__ */ d(
|
|
220
220
|
H,
|
|
221
221
|
{
|
|
222
|
-
isDisabled: Y(
|
|
223
|
-
isSelected:
|
|
222
|
+
isDisabled: Y(t),
|
|
223
|
+
isSelected: t === u,
|
|
224
224
|
onClick: q,
|
|
225
|
-
value:
|
|
225
|
+
value: t
|
|
226
226
|
},
|
|
227
|
-
|
|
227
|
+
t
|
|
228
228
|
))
|
|
229
229
|
}
|
|
230
230
|
)
|
|
231
231
|
}
|
|
232
232
|
),
|
|
233
|
-
/* @__PURE__ */
|
|
234
|
-
/* @__PURE__ */
|
|
233
|
+
/* @__PURE__ */ d("div", { className: r.separator, children: ":" }),
|
|
234
|
+
/* @__PURE__ */ d(
|
|
235
235
|
"div",
|
|
236
236
|
{
|
|
237
237
|
className: h(
|
|
238
238
|
r.column,
|
|
239
239
|
f && r.columnFillHeight
|
|
240
240
|
),
|
|
241
|
-
children: /* @__PURE__ */
|
|
241
|
+
children: /* @__PURE__ */ d(
|
|
242
242
|
"div",
|
|
243
243
|
{
|
|
244
244
|
className: h(
|
|
@@ -250,15 +250,15 @@ const me = n.forwardRef(
|
|
|
250
250
|
role: "group",
|
|
251
251
|
[x]: "timepicker-scroll",
|
|
252
252
|
ref: B,
|
|
253
|
-
children: M.map((
|
|
253
|
+
children: M.map((t) => /* @__PURE__ */ d(
|
|
254
254
|
H,
|
|
255
255
|
{
|
|
256
|
-
isDisabled: $(
|
|
257
|
-
isSelected:
|
|
256
|
+
isDisabled: $(t),
|
|
257
|
+
isSelected: t === p,
|
|
258
258
|
onClick: v,
|
|
259
|
-
value:
|
|
259
|
+
value: t
|
|
260
260
|
},
|
|
261
|
-
|
|
261
|
+
t
|
|
262
262
|
))
|
|
263
263
|
}
|
|
264
264
|
)
|
|
@@ -270,6 +270,6 @@ const me = n.forwardRef(
|
|
|
270
270
|
}
|
|
271
271
|
);
|
|
272
272
|
export {
|
|
273
|
-
|
|
273
|
+
dt as TimePicker
|
|
274
274
|
};
|
|
275
275
|
//# sourceMappingURL=time-picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"time-picker.js","sources":["../../../src/components/date-time-picker/time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\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\nimport {\n getHours,\n getMinutes,\n padNumber,\n updateTime,\n} from \"./date-time-picker-utils\"\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i)\n\nexport type TimePickerProps = {\n value: Date | null\n onChange: (date: Date) => void\n onTimeSelect?: () => void\n disablePast?: boolean\n currentTimeInTimezone?: Date\n fillHeight?: boolean\n minuteStep?: number\n className?: string\n /**\n * Accessible name for the hours column. Pass a translated string.\n *\n * These are ACCESSIBLE NAMES, not visible headers, and the distinction is deliberate. v1 ≤1.3.x\n * had `hoursLabel`/`minutesLabel` that rendered visible \"HH\"/\"MM\" headings; v1 deleted them in\n * `138fe05` (2026-06-25) and this package mirrors v1's current output, which Rule 0 makes the\n * fidelity target. But v1 replaced them with nothing, so both libraries now hand a screen reader\n * two unnamed columns of bare numbers. Naming them via `aria-label` closes that without moving a\n * pixel — the VR gate still matches v1 specimen for specimen.\n */\n hoursLabel?: string\n /** Accessible name for the minutes column. Pass a translated string. See `hoursLabel`. */\n minutesLabel?: string\n}\n\nconst useStyles = makeZenithStyles({\n root: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"stretch\",\n justifyContent: \"center\",\n ...shorthands.gap(tokens.spacingElement1),\n },\n fillHeight: {\n height: \"100%\",\n },\n column: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n width: \"3.5rem\",\n },\n columnFillHeight: {\n minHeight: \"0\",\n },\n scroll: {\n display: \"flex\",\n flexDirection: \"column\",\n overflowY: \"auto\",\n overflowX: \"hidden\",\n width: \"100%\",\n alignItems: \"center\",\n ...shorthands.borderRadius(tokens.radiusMd),\n ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n scrollbarWidth: \"thin\",\n scrollbarColor: `${tokens.grayA6} transparent`,\n },\n scrollFixed: {\n height: \"8rem\",\n },\n scrollFill: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n minHeight: \"0\",\n },\n separator: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: tokens.textBase,\n lineHeight: tokens.leadingBase,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.grayA8,\n },\n timeBtn: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n ...shorthands.borderRadius(tokens.radiusMd),\n transitionProperty: \"background-color, color\",\n transitionDuration: \"150ms\",\n minHeight: \"2rem\",\n width: \"100%\",\n maxWidth: \"3rem\",\n ...shorthands.border(\"0\"),\n outlineStyle: \"none\",\n },\n timeBtnDefault: {\n backgroundColor: \"transparent\",\n color: tokens.grayA11,\n \":hover\": {\n backgroundColor: tokens.grayA4,\n },\n },\n timeBtnSelected: {\n fontWeight: tokens.fontWeightSemibold,\n backgroundColor: tokens.semAccentSolid,\n color: tokens.semAccentContrast,\n \":hover\": {\n backgroundColor: tokens.semAccentSolidHover,\n },\n },\n timeBtnDisabled: {\n cursor: \"not-allowed\",\n opacity: 0.5,\n },\n timeBtnEnabled: {\n cursor: \"pointer\",\n },\n})\n\ntype TimeButtonProps = {\n value: number\n isSelected: boolean\n isDisabled: boolean\n onClick: (value: number) => void\n}\n\nconst TimeButton = React.memo(function TimeButton({\n value,\n isSelected,\n isDisabled,\n onClick,\n}: TimeButtonProps) {\n const styles = useStyles()\n const handleClick = React.useCallback(() => {\n if (!isDisabled) {\n onClick(value)\n }\n }, [onClick, value, isDisabled])\n\n return (\n <button\n aria-disabled={isDisabled}\n aria-pressed={isSelected}\n className={mergeClasses(\n styles.timeBtn,\n !isSelected && styles.timeBtnDefault,\n isSelected && styles.timeBtnSelected,\n isDisabled ? styles.timeBtnDisabled : styles.timeBtnEnabled\n )}\n data-selected={isSelected}\n data-slot=\"time-button\"\n {...{ [SLOT_ATTR]: \"time-button\" }}\n data-value={value}\n disabled={isDisabled}\n onClick={handleClick}\n type=\"button\"\n >\n {padNumber(value)}\n </button>\n )\n})\n\nTimeButton.displayName = \"TimeButton\"\n\nexport const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n function TimePicker(\n {\n value,\n onChange,\n onTimeSelect,\n disablePast = false,\n currentTimeInTimezone,\n fillHeight = false,\n minuteStep = 1,\n className,\n hoursLabel = \"Hours\",\n minutesLabel = \"Minutes\",\n },\n ref\n ) {\n const styles = useStyles()\n const step = Math.max(1, Math.floor(minuteStep))\n\n // Enumerate buckets 0, step, 2·step… stopping at <60 so a step that\n // doesn't divide 60 evenly (e.g. 7) can never produce an out-of-range\n // value like 63.\n const MINUTES = React.useMemo(() => {\n const buckets: number[] = []\n for (let m = 0; m < 60; m += step) buckets.push(m)\n\n return buckets\n }, [step])\n\n const selectedHour = value !== null ? getHours(value) : -1\n const rawMinute = value !== null ? getMinutes(value) : -1\n const selectedMinute =\n value === null\n ? -1\n : step === 1\n ? rawMinute\n : Math.min(\n MINUTES[MINUTES.length - 1],\n Math.round(rawMinute / step) * step\n )\n\n const hoursRef = React.useRef<HTMLDivElement>(null)\n const minutesRef = React.useRef<HTMLDivElement>(null)\n\n const now = React.useMemo(\n () => currentTimeInTimezone || new Date(),\n [currentTimeInTimezone]\n )\n const isToday = React.useMemo(() => {\n if (!value) return false\n\n return (\n value.getFullYear() === now.getFullYear() &&\n value.getMonth() === now.getMonth() &&\n value.getDate() === now.getDate()\n )\n }, [value, now])\n\n const currentHour = now.getHours()\n const currentMinute = now.getMinutes()\n\n const isHourDisabled = React.useCallback(\n (hour: number) => {\n if (!disablePast || !isToday) return false\n\n return hour < currentHour\n },\n [disablePast, isToday, currentHour]\n )\n\n const isMinuteDisabled = React.useCallback(\n (minute: number) => {\n if (!disablePast || !isToday) return false\n if (selectedHour < currentHour) return true\n if (selectedHour === currentHour) return minute < currentMinute\n\n return false\n },\n [disablePast, isToday, selectedHour, currentHour, currentMinute]\n )\n\n const handleHourChange = React.useCallback(\n (hour: number) => {\n const base = value || now\n const minute = selectedMinute >= 0 ? selectedMinute : 0\n\n onChange(updateTime(base, hour, minute))\n },\n [onChange, value, now, selectedMinute]\n )\n\n const handleMinuteChange = React.useCallback(\n (minute: number) => {\n const base = value || now\n const hour = selectedHour >= 0 ? selectedHour : 0\n\n onChange(updateTime(base, hour, minute))\n onTimeSelect?.()\n },\n [onChange, onTimeSelect, value, now, selectedHour]\n )\n\n React.useEffect(() => {\n if (hoursRef.current) {\n const selectedElement = hoursRef.current.querySelector(\n `[data-value=\"${selectedHour}\"]`\n )\n\n if (selectedElement) {\n selectedElement.scrollIntoView?.({\n block: \"center\",\n behavior: \"auto\",\n })\n }\n }\n if (minutesRef.current) {\n const selectedElement = minutesRef.current.querySelector(\n `[data-value=\"${selectedMinute}\"]`\n )\n\n if (selectedElement) {\n selectedElement.scrollIntoView?.({\n block: \"center\",\n behavior: \"auto\",\n })\n }\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <div\n ref={ref}\n className={mergeClasses(\n styles.root,\n fillHeight && styles.fillHeight,\n className\n )}\n data-slot=\"timepicker\"\n {...{ [SLOT_ATTR]: \"timepicker\" }}\n >\n <div\n className={mergeClasses(\n styles.column,\n fillHeight && styles.columnFillHeight\n )}\n >\n <div\n className={mergeClasses(\n styles.scroll,\n fillHeight ? styles.scrollFill : styles.scrollFixed\n )}\n aria-label={hoursLabel}\n data-slot=\"timepicker-scroll\"\n role=\"group\"\n {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n ref={hoursRef}\n >\n {HOURS.map((hour) => (\n <TimeButton\n isDisabled={isHourDisabled(hour)}\n isSelected={hour === selectedHour}\n key={hour}\n onClick={handleHourChange}\n value={hour}\n />\n ))}\n </div>\n </div>\n\n <div className={styles.separator}>:</div>\n\n <div\n className={mergeClasses(\n styles.column,\n fillHeight && styles.columnFillHeight\n )}\n >\n <div\n className={mergeClasses(\n styles.scroll,\n fillHeight ? styles.scrollFill : styles.scrollFixed\n )}\n aria-label={minutesLabel}\n data-slot=\"timepicker-scroll\"\n role=\"group\"\n {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n ref={minutesRef}\n >\n {MINUTES.map((minute) => (\n <TimeButton\n isDisabled={isMinuteDisabled(minute)}\n isSelected={minute === selectedMinute}\n key={minute}\n onClick={handleMinuteChange}\n value={minute}\n />\n ))}\n </div>\n </div>\n </div>\n )\n }\n)\n"],"names":["HOURS","_","i","useStyles","makeZenithStyles","shorthands","tokens.spacingElement1","tokens.radiusMd","tokens.grayA5","tokens.grayA6","tokens.textBase","tokens.leadingBase","tokens.fontWeightSemibold","tokens.grayA8","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.grayA4","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semAccentSolidHover","TimeButton","React","value","isSelected","isDisabled","onClick","styles","handleClick","jsx","mergeClasses","SLOT_ATTR","TimePicker","onChange","onTimeSelect","disablePast","currentTimeInTimezone","fillHeight","minuteStep","className","hoursLabel","minutesLabel","ref","step","MINUTES","buckets","m","selectedHour","getHours","rawMinute","getMinutes","selectedMinute","hoursRef","minutesRef","now","isToday","currentHour","currentMinute","isHourDisabled","hour","isMinuteDisabled","minute","handleHourChange","base","updateTime","handleMinuteChange","selectedElement","_a","_b","jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"time-picker.js","sources":["../../../src/components/date-time-picker/time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\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\nimport {\n getHours,\n getMinutes,\n padNumber,\n updateTime,\n} from \"./date-time-picker-utils\"\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i)\n\nexport type TimePickerProps = {\n value: Date | null\n onChange: (date: Date) => void\n onTimeSelect?: () => void\n disablePast?: boolean\n currentTimeInTimezone?: Date\n fillHeight?: boolean\n minuteStep?: number\n className?: string\n /**\n * Accessible name for the hours column. Pass a translated string. These are ACCESSIBLE NAMES,\n * not visible headers, and the distinction is deliberate.\n */\n hoursLabel?: string\n /** Accessible name for the minutes column. Pass a translated string. See `hoursLabel`. */\n minutesLabel?: string\n}\n\nconst useStyles = makeZenithStyles({\n root: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"stretch\",\n justifyContent: \"center\",\n ...shorthands.gap(tokens.spacingElement1),\n },\n fillHeight: {\n height: \"100%\",\n },\n column: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n width: \"3.5rem\",\n },\n columnFillHeight: {\n minHeight: \"0\",\n },\n scroll: {\n display: \"flex\",\n flexDirection: \"column\",\n overflowY: \"auto\",\n overflowX: \"hidden\",\n width: \"100%\",\n alignItems: \"center\",\n ...shorthands.borderRadius(tokens.radiusMd),\n ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n scrollbarWidth: \"thin\",\n scrollbarColor: `${tokens.grayA6} transparent`,\n },\n scrollFixed: {\n height: \"8rem\",\n },\n scrollFill: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n minHeight: \"0\",\n },\n separator: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: tokens.textBase,\n lineHeight: tokens.leadingBase,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.grayA8,\n },\n timeBtn: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n ...shorthands.borderRadius(tokens.radiusMd),\n transitionProperty: \"background-color, color\",\n transitionDuration: \"150ms\",\n minHeight: \"2rem\",\n width: \"100%\",\n maxWidth: \"3rem\",\n ...shorthands.border(\"0\"),\n outlineStyle: \"none\",\n },\n timeBtnDefault: {\n backgroundColor: \"transparent\",\n color: tokens.grayA11,\n \":hover\": {\n backgroundColor: tokens.grayA4,\n },\n },\n timeBtnSelected: {\n fontWeight: tokens.fontWeightSemibold,\n backgroundColor: tokens.accentSolid,\n color: tokens.accentContrast,\n \":hover\": {\n backgroundColor: tokens.accentSolidHover,\n },\n },\n timeBtnDisabled: {\n cursor: \"not-allowed\",\n opacity: 0.5,\n },\n timeBtnEnabled: {\n cursor: \"pointer\",\n },\n})\n\ntype TimeButtonProps = {\n value: number\n isSelected: boolean\n isDisabled: boolean\n onClick: (value: number) => void\n}\n\nconst TimeButton = React.memo(function TimeButton({\n value,\n isSelected,\n isDisabled,\n onClick,\n}: TimeButtonProps) {\n const styles = useStyles()\n const handleClick = React.useCallback(() => {\n if (!isDisabled) {\n onClick(value)\n }\n }, [onClick, value, isDisabled])\n\n return (\n <button\n aria-disabled={isDisabled}\n aria-pressed={isSelected}\n className={mergeClasses(\n styles.timeBtn,\n !isSelected && styles.timeBtnDefault,\n isSelected && styles.timeBtnSelected,\n isDisabled ? styles.timeBtnDisabled : styles.timeBtnEnabled\n )}\n data-selected={isSelected}\n data-slot=\"time-button\"\n {...{ [SLOT_ATTR]: \"time-button\" }}\n data-value={value}\n disabled={isDisabled}\n onClick={handleClick}\n type=\"button\"\n >\n {padNumber(value)}\n </button>\n )\n})\n\nTimeButton.displayName = \"TimeButton\"\n\nexport const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n function TimePicker(\n {\n value,\n onChange,\n onTimeSelect,\n disablePast = false,\n currentTimeInTimezone,\n fillHeight = false,\n minuteStep = 1,\n className,\n hoursLabel = \"Hours\",\n minutesLabel = \"Minutes\",\n },\n ref\n ) {\n const styles = useStyles()\n const step = Math.max(1, Math.floor(minuteStep))\n\n // Enumerate buckets 0, step, 2·step… stopping at <60 so a step that\n // doesn't divide 60 evenly (e.g. 7) can never produce an out-of-range\n // value like 63.\n const MINUTES = React.useMemo(() => {\n const buckets: number[] = []\n for (let m = 0; m < 60; m += step) buckets.push(m)\n\n return buckets\n }, [step])\n\n const selectedHour = value !== null ? getHours(value) : -1\n const rawMinute = value !== null ? getMinutes(value) : -1\n const selectedMinute =\n value === null\n ? -1\n : step === 1\n ? rawMinute\n : Math.min(\n MINUTES[MINUTES.length - 1],\n Math.round(rawMinute / step) * step\n )\n\n const hoursRef = React.useRef<HTMLDivElement>(null)\n const minutesRef = React.useRef<HTMLDivElement>(null)\n\n const now = React.useMemo(\n () => currentTimeInTimezone || new Date(),\n [currentTimeInTimezone]\n )\n const isToday = React.useMemo(() => {\n if (!value) return false\n\n return (\n value.getFullYear() === now.getFullYear() &&\n value.getMonth() === now.getMonth() &&\n value.getDate() === now.getDate()\n )\n }, [value, now])\n\n const currentHour = now.getHours()\n const currentMinute = now.getMinutes()\n\n const isHourDisabled = React.useCallback(\n (hour: number) => {\n if (!disablePast || !isToday) return false\n\n return hour < currentHour\n },\n [disablePast, isToday, currentHour]\n )\n\n const isMinuteDisabled = React.useCallback(\n (minute: number) => {\n if (!disablePast || !isToday) return false\n if (selectedHour < currentHour) return true\n if (selectedHour === currentHour) return minute < currentMinute\n\n return false\n },\n [disablePast, isToday, selectedHour, currentHour, currentMinute]\n )\n\n const handleHourChange = React.useCallback(\n (hour: number) => {\n const base = value || now\n const minute = selectedMinute >= 0 ? selectedMinute : 0\n\n onChange(updateTime(base, hour, minute))\n },\n [onChange, value, now, selectedMinute]\n )\n\n const handleMinuteChange = React.useCallback(\n (minute: number) => {\n const base = value || now\n const hour = selectedHour >= 0 ? selectedHour : 0\n\n onChange(updateTime(base, hour, minute))\n onTimeSelect?.()\n },\n [onChange, onTimeSelect, value, now, selectedHour]\n )\n\n React.useEffect(() => {\n if (hoursRef.current) {\n const selectedElement = hoursRef.current.querySelector(\n `[data-value=\"${selectedHour}\"]`\n )\n\n if (selectedElement) {\n selectedElement.scrollIntoView?.({\n block: \"center\",\n behavior: \"auto\",\n })\n }\n }\n if (minutesRef.current) {\n const selectedElement = minutesRef.current.querySelector(\n `[data-value=\"${selectedMinute}\"]`\n )\n\n if (selectedElement) {\n selectedElement.scrollIntoView?.({\n block: \"center\",\n behavior: \"auto\",\n })\n }\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <div\n ref={ref}\n className={mergeClasses(\n styles.root,\n fillHeight && styles.fillHeight,\n className\n )}\n data-slot=\"timepicker\"\n {...{ [SLOT_ATTR]: \"timepicker\" }}\n >\n <div\n className={mergeClasses(\n styles.column,\n fillHeight && styles.columnFillHeight\n )}\n >\n <div\n className={mergeClasses(\n styles.scroll,\n fillHeight ? styles.scrollFill : styles.scrollFixed\n )}\n aria-label={hoursLabel}\n data-slot=\"timepicker-scroll\"\n role=\"group\"\n {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n ref={hoursRef}\n >\n {HOURS.map((hour) => (\n <TimeButton\n isDisabled={isHourDisabled(hour)}\n isSelected={hour === selectedHour}\n key={hour}\n onClick={handleHourChange}\n value={hour}\n />\n ))}\n </div>\n </div>\n\n <div className={styles.separator}>:</div>\n\n <div\n className={mergeClasses(\n styles.column,\n fillHeight && styles.columnFillHeight\n )}\n >\n <div\n className={mergeClasses(\n styles.scroll,\n fillHeight ? styles.scrollFill : styles.scrollFixed\n )}\n aria-label={minutesLabel}\n data-slot=\"timepicker-scroll\"\n role=\"group\"\n {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n ref={minutesRef}\n >\n {MINUTES.map((minute) => (\n <TimeButton\n isDisabled={isMinuteDisabled(minute)}\n isSelected={minute === selectedMinute}\n key={minute}\n onClick={handleMinuteChange}\n value={minute}\n />\n ))}\n </div>\n </div>\n </div>\n )\n }\n)\n"],"names":["HOURS","_","i","useStyles","makeZenithStyles","shorthands","tokens.spacingElement1","tokens.radiusMd","tokens.grayA5","tokens.grayA6","tokens.textBase","tokens.leadingBase","tokens.fontWeightSemibold","tokens.grayA8","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.grayA4","tokens.accentSolid","tokens.accentContrast","tokens.accentSolidHover","TimeButton","React","value","isSelected","isDisabled","onClick","styles","handleClick","jsx","mergeClasses","SLOT_ATTR","TimePicker","onChange","onTimeSelect","disablePast","currentTimeInTimezone","fillHeight","minuteStep","className","hoursLabel","minutesLabel","ref","step","MINUTES","buckets","m","selectedHour","getHours","rawMinute","getMinutes","selectedMinute","hoursRef","minutesRef","now","isToday","currentHour","currentMinute","isHourDisabled","hour","isMinuteDisabled","minute","handleHourChange","base","updateTime","handleMinuteChange","selectedElement","_a","_b","jsxs"],"mappings":";;;;;;AAcA,MAAMA,KAAQ,MAAM,KAAK,EAAE,QAAQ,MAAM,CAACC,GAAGC,MAAMA,CAAC,GAoB9CC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAGC,EAAW,IAAIC,EAAsB;AAAA,EAAA;AAAA,EAE1C,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,OAAO;AAAA,EAAA;AAAA,EAET,kBAAkB;AAAA,IAChB,WAAW;AAAA,EAAA;AAAA,EAEb,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,GAAGD,EAAW,aAAaE,CAAe;AAAA,IAC1C,GAAGF,EAAW,OAAO,OAAO,SAASG,EAAa;AAAA,IAClD,gBAAgB;AAAA,IAChB,gBAAgB,GAAGC,CAAa;AAAA,EAAA;AAAA,EAElC,aAAa;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,YAAY;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,EAAA;AAAA,EAEb,WAAW;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,EAAO;AAAA,EAEhB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,GAAGV,EAAW,aAAaE,CAAe;AAAA,IAC1C,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAGF,EAAW,OAAO,GAAG;AAAA,IACxB,cAAc;AAAA,EAAA;AAAA,EAEhB,gBAAgB;AAAA,IACd,iBAAiB;AAAA,IACjB,OAAOW;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,iBAAiB;AAAA,IACf,YAAYL;AAAAA,IACZ,iBAAiBM;AAAAA,IACjB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,iBAAiB;AAAA,IACf,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA;AAAA,EAEX,gBAAgB;AAAA,IACd,QAAQ;AAAA,EAAA;AAEZ,CAAC,GASKC,IAAaC,EAAM,KAAK,SAAoB;AAAA,EAChD,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AACF,GAAoB;AAClB,QAAMC,IAASxB,EAAA,GACTyB,IAAcN,EAAM,YAAY,MAAM;AAC1C,IAAKG,KACHC,EAAQH,CAAK;AAAA,EAEjB,GAAG,CAACG,GAASH,GAAOE,CAAU,CAAC;AAE/B,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,iBAAeJ;AAAA,MACf,gBAAcD;AAAA,MACd,WAAWM;AAAA,QACTH,EAAO;AAAA,QACP,CAACH,KAAcG,EAAO;AAAA,QACtBH,KAAcG,EAAO;AAAA,QACrBF,IAAaE,EAAO,kBAAkBA,EAAO;AAAA,MAAA;AAAA,MAE/C,iBAAeH;AAAA,MACf,aAAU;AAAA,MACJ,CAACO,CAAS,GAAG;AAAA,MACnB,cAAYR;AAAA,MACZ,UAAUE;AAAA,MACV,SAASG;AAAA,MACT,MAAK;AAAA,MAEJ,aAAUL,CAAK;AAAA,IAAA;AAAA,EAAA;AAGtB,CAAC;AAEDF,EAAW,cAAc;AAElB,MAAMW,KAAaV,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,OAAAC;AAAA,IACA,UAAAU;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,uBAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,cAAAC,IAAe;AAAA,EAAA,GAEjBC,GACA;AACA,UAAMf,IAASxB,EAAA,GACTwC,IAAO,KAAK,IAAI,GAAG,KAAK,MAAML,CAAU,CAAC,GAKzCM,IAAUtB,EAAM,QAAQ,MAAM;AAClC,YAAMuB,IAAoB,CAAA;AAC1B,eAASC,IAAI,GAAGA,IAAI,IAAIA,KAAKH,EAAM,CAAAE,EAAQ,KAAKC,CAAC;AAEjD,aAAOD;AAAA,IACT,GAAG,CAACF,CAAI,CAAC,GAEHI,IAAexB,MAAU,OAAOyB,GAASzB,CAAK,IAAI,IAClD0B,IAAY1B,MAAU,OAAO2B,GAAW3B,CAAK,IAAI,IACjD4B,IACJ5B,MAAU,OACN,KACAoB,MAAS,IACPM,IACA,KAAK;AAAA,MACHL,EAAQA,EAAQ,SAAS,CAAC;AAAA,MAC1B,KAAK,MAAMK,IAAYN,CAAI,IAAIA;AAAA,IAAA,GAGnCS,IAAW9B,EAAM,OAAuB,IAAI,GAC5C+B,IAAa/B,EAAM,OAAuB,IAAI,GAE9CgC,IAAMhC,EAAM;AAAA,MAChB,MAAMc,KAAyB,oBAAI,KAAA;AAAA,MACnC,CAACA,CAAqB;AAAA,IAAA,GAElBmB,IAAUjC,EAAM,QAAQ,MACvBC,IAGHA,EAAM,YAAA,MAAkB+B,EAAI,YAAA,KAC5B/B,EAAM,SAAA,MAAe+B,EAAI,cACzB/B,EAAM,QAAA,MAAc+B,EAAI,QAAA,IALP,IAOlB,CAAC/B,GAAO+B,CAAG,CAAC,GAETE,IAAcF,EAAI,SAAA,GAClBG,IAAgBH,EAAI,WAAA,GAEpBI,IAAiBpC,EAAM;AAAA,MAC3B,CAACqC,MACK,CAACxB,KAAe,CAACoB,IAAgB,KAE9BI,IAAOH;AAAA,MAEhB,CAACrB,GAAaoB,GAASC,CAAW;AAAA,IAAA,GAG9BI,IAAmBtC,EAAM;AAAA,MAC7B,CAACuC,MACK,CAAC1B,KAAe,CAACoB,IAAgB,KACjCR,IAAeS,IAAoB,KACnCT,MAAiBS,IAAoBK,IAASJ,IAE3C;AAAA,MAET,CAACtB,GAAaoB,GAASR,GAAcS,GAAaC,CAAa;AAAA,IAAA,GAG3DK,IAAmBxC,EAAM;AAAA,MAC7B,CAACqC,MAAiB;AAChB,cAAMI,IAAOxC,KAAS+B,GAChBO,IAASV,KAAkB,IAAIA,IAAiB;AAEtD,QAAAlB,EAAS+B,EAAWD,GAAMJ,GAAME,CAAM,CAAC;AAAA,MACzC;AAAA,MACA,CAAC5B,GAAUV,GAAO+B,GAAKH,CAAc;AAAA,IAAA,GAGjCc,IAAqB3C,EAAM;AAAA,MAC/B,CAACuC,MAAmB;AAClB,cAAME,IAAOxC,KAAS+B,GAChBK,IAAOZ,KAAgB,IAAIA,IAAe;AAEhD,QAAAd,EAAS+B,EAAWD,GAAMJ,GAAME,CAAM,CAAC,GACvC3B,KAAA,QAAAA;AAAA,MACF;AAAA,MACA,CAACD,GAAUC,GAAcX,GAAO+B,GAAKP,CAAY;AAAA,IAAA;AAGnD,WAAAzB,EAAM,UAAU,MAAM;;AACpB,UAAI8B,EAAS,SAAS;AACpB,cAAMc,IAAkBd,EAAS,QAAQ;AAAA,UACvC,gBAAgBL,CAAY;AAAA,QAAA;AAG9B,QAAImB,OACFC,IAAAD,EAAgB,mBAAhB,QAAAC,EAAA,KAAAD,GAAiC;AAAA,UAC/B,OAAO;AAAA,UACP,UAAU;AAAA,QAAA;AAAA,MAGhB;AACA,UAAIb,EAAW,SAAS;AACtB,cAAMa,IAAkBb,EAAW,QAAQ;AAAA,UACzC,gBAAgBF,CAAc;AAAA,QAAA;AAGhC,QAAIe,OACFE,IAAAF,EAAgB,mBAAhB,QAAAE,EAAA,KAAAF,GAAiC;AAAA,UAC/B,OAAO;AAAA,UACP,UAAU;AAAA,QAAA;AAAA,MAGhB;AAAA,IACF,GAAG,CAAA,CAAE,GAGH,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAA3B;AAAA,QACA,WAAWZ;AAAA,UACTH,EAAO;AAAA,UACPU,KAAcV,EAAO;AAAA,UACrBY;AAAA,QAAA;AAAA,QAEF,aAAU;AAAA,QACJ,CAACR,CAAS,GAAG;AAAA,QAEnB,UAAA;AAAA,UAAA,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC;AAAA,gBACTH,EAAO;AAAA,gBACPU,KAAcV,EAAO;AAAA,cAAA;AAAA,cAGvB,UAAA,gBAAAE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWC;AAAA,oBACTH,EAAO;AAAA,oBACPU,IAAaV,EAAO,aAAaA,EAAO;AAAA,kBAAA;AAAA,kBAE1C,cAAYa;AAAA,kBACZ,aAAU;AAAA,kBACV,MAAK;AAAA,kBACC,CAACT,CAAS,GAAG;AAAA,kBACnB,KAAKqB;AAAA,kBAEJ,UAAApD,GAAM,IAAI,CAAC2D,MACV,gBAAA9B;AAAA,oBAACR;AAAA,oBAAA;AAAA,sBACC,YAAYqC,EAAeC,CAAI;AAAA,sBAC/B,YAAYA,MAASZ;AAAA,sBAErB,SAASe;AAAA,sBACT,OAAOH;AAAA,oBAAA;AAAA,oBAFFA;AAAA,kBAAA,CAIR;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,UAGF,gBAAA9B,EAAC,OAAA,EAAI,WAAWF,EAAO,WAAW,UAAA,KAAC;AAAA,UAEnC,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC;AAAA,gBACTH,EAAO;AAAA,gBACPU,KAAcV,EAAO;AAAA,cAAA;AAAA,cAGvB,UAAA,gBAAAE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWC;AAAA,oBACTH,EAAO;AAAA,oBACPU,IAAaV,EAAO,aAAaA,EAAO;AAAA,kBAAA;AAAA,kBAE1C,cAAYc;AAAA,kBACZ,aAAU;AAAA,kBACV,MAAK;AAAA,kBACC,CAACV,CAAS,GAAG;AAAA,kBACnB,KAAKsB;AAAA,kBAEJ,UAAAT,EAAQ,IAAI,CAACiB,MACZ,gBAAAhC;AAAA,oBAACR;AAAA,oBAAA;AAAA,sBACC,YAAYuC,EAAiBC,CAAM;AAAA,sBACnC,YAAYA,MAAWV;AAAA,sBAEvB,SAASc;AAAA,sBACT,OAAOJ;AAAA,oBAAA;AAAA,oBAFFA;AAAA,kBAAA,CAIR;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"density-provider.js","sources":["../../../src/components/density-provider/density-provider.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\n\n/**\n * DENSITY-SPEC.md §4.4 — the two density mechanisms, and why this component is the only one that\n * does both
|
|
1
|
+
{"version":3,"file":"density-provider.js","sources":["../../../src/components/density-provider/density-provider.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\n\n/**\n * DENSITY-SPEC.md §4.4 — the two density mechanisms, and why this component is the only one that\n * does both: - CSS custom-property inheritance (no JavaScript) already delivers the shell's\n * AMBIENT default to every element, portalled or not — a Radix portal root is still an ordinary\n * DOM descendant of `<html>`, so it inherits `<html data-density=\"...\">` with zero wiring.\n */\n\nexport type Density = \"compact\" | \"normal\" | \"comfortable\"\n\nconst CANONICAL_DENSITIES: readonly Density[] = [\n \"compact\",\n \"normal\",\n \"comfortable\",\n]\n\n/**\n * Invalid runtime input (a bad string slipping past TypeScript) normalizes to \"normal\". Exported\n * (package-internal — NOT added to `src/index.ts`, no new public export) so `Table`/`DataTable`/\n * `TableHead`/`TableCell` can apply the exact same normalization to their own DOM `data-density`\n * stamp that `DensityContextBoundary` already applies to the context value — one function, so the\n * two can never independently disagree on what an invalid input normalizes to.\n */\nexport const canonicalDensity = (density: Density): Density =>\n CANONICAL_DENSITIES.includes(density) ? density : \"normal\"\n\n/**\n * Unexported by design, same as `ListContext` — read only through `useDensity()`. Default\n * `undefined`: a component nested with no `DensityProvider` ancestor gets `undefined`, never a\n * fabricated \"normal\" — that would be a JS reading of ambient CSS this hook explicitly does not do.\n */\nconst DensityContext = React.createContext<Density | undefined>(undefined)\n\nexport type DensityProviderProps = React.ComponentProps<\"div\"> & {\n /** The explicit density boundary for this subtree. No default — always a real caller choice. */\n density: Density\n}\n\n/**\n * Ordinary HTML div semantics: forwards `ref`/`className`/`style`/every other div prop, no\n * polymorphic `asChild`. Renders one real DOM node (the boundary) wrapping a React context\n * provider around `children` — not two independent trees, so context and DOM boundary can never\n * disagree about which density is active.\n */\nexport const DensityProvider = React.forwardRef<\n HTMLDivElement,\n DensityProviderProps\n>(function DensityProvider({ density, className, children, ...props }, ref) {\n const value = canonicalDensity(density)\n\n return (\n <div\n ref={ref}\n data-slot=\"density-provider\"\n {...{ [SLOT_ATTR]: \"density-provider\" }}\n className={className}\n {...props}\n // Authoritative, spread LAST: a raw caller `data-density` prop (part of `...props`, since\n // `DensityProviderProps` extends every native div prop) must never win over the normalized\n // `density` prop — the DOM attribute and the context value below both derive from the same\n // `value`, and this ordering is what keeps that invariant true even when a caller passes a\n // conflicting literal `data-density` alongside `density` (finish-line integration fix).\n data-density={value}\n >\n <DensityContext.Provider value={value}>\n {children}\n </DensityContext.Provider>\n </div>\n )\n})\n\n/**\n * Returns the nearest explicit `DensityProvider` value, or `undefined` if none exists. Never reads\n * `getComputedStyle`/CSS custom properties — an `undefined` result means \"no explicit override in\n * the React tree,\" not \"ambient density is unknown\"; the caller's job (portal content components)\n * is to stamp nothing in that case and let ordinary CSS inheritance supply the ambient value.\n */\nexport const useDensity = (): Density | undefined =>\n React.useContext(DensityContext)\n\n/**\n * Internal, package-private — NOT exported from `src/index.ts`. `DensityProvider` is the only\n * public density-boundary API; this is a context-only variant for a component that already owns a\n * real DOM boundary of its own (e.g.\n *\n * @no-host-element A pure context provider — it renders no host element, so there is no DOM node\n * for a forwarded ref to reach.\n */\nexport const DensityContextBoundary = ({\n density,\n children,\n}: {\n density: Density | undefined\n children: React.ReactNode\n}): React.ReactElement => {\n if (density === undefined) return <>{children}</>\n return (\n <DensityContext.Provider value={canonicalDensity(density)}>\n {children}\n </DensityContext.Provider>\n )\n}\n"],"names":["CANONICAL_DENSITIES","canonicalDensity","density","DensityContext","React","DensityProvider","className","children","props","ref","value","jsx","SLOT_ATTR","useDensity","DensityContextBoundary","Fragment"],"mappings":";;;AAaA,MAAMA,IAA0C;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AACF,GASaC,IAAmB,CAACC,MAC/BF,EAAoB,SAASE,CAAO,IAAIA,IAAU,UAO9CC,IAAiBC,EAAM,cAAmC,MAAS,GAa5DC,IAAkBD,EAAM,WAGnC,SAAyB,EAAE,SAAAF,GAAS,WAAAI,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAC1E,QAAMC,IAAQT,EAAiBC,CAAO;AAEtC,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAAN;AAAA,MACC,GAAGE;AAAA,MAMJ,gBAAcE;AAAA,MAEd,UAAA,gBAAAC,EAACR,EAAe,UAAf,EAAwB,OAAAO,GACtB,UAAAH,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAQYM,IAAa,MACxBT,EAAM,WAAWD,CAAc,GAUpBW,IAAyB,CAAC;AAAA,EACrC,SAAAZ;AAAA,EACA,UAAAK;AACF,MAIML,MAAY,SAAkB,gBAAAS,EAAAI,GAAA,EAAG,UAAAR,GAAS,IAE5C,gBAAAI,EAACR,EAAe,UAAf,EAAwB,OAAOF,EAAiBC,CAAO,GACrD,UAAAK,GACH;"}
|
|
@@ -5,7 +5,7 @@ import { mergeClasses as d, SLOT_ATTR as l, shorthands as s } from "@epilot/zeni
|
|
|
5
5
|
import { useAppearanceAttributes as N } from "../appearance-boundary/appearance-boundary.js";
|
|
6
6
|
import { useDensity as T } from "../density-provider/density-provider.js";
|
|
7
7
|
import { makeZenithStyles as A } from "../../styles/make-styles.js";
|
|
8
|
-
import { leadingSm as O, textSm as F, grayA11 as I, grayA12 as k, fontWeightSemibold as P, leadingLg as H, textLg as X,
|
|
8
|
+
import { leadingSm as O, textSm as F, grayA11 as I, grayA12 as k, fontWeightSemibold as P, leadingLg as H, textLg as X, focusRing as h, accentSoft as j, accentA11 as B, spacingGroup2 as f, container5xl as E, container4xl as _, container3xl as M, container2xl as Z, containerXl as G, containerLg as q, containerMd as J, containerSm as K, body as Q, spacingElement2 as p, grayA1 as U, radiusXl as V, spacingLayout1 as Y } from "../../tokens/index.js";
|
|
9
9
|
const c = A({
|
|
10
10
|
overlay: {
|
|
11
11
|
position: "fixed",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { useAppearanceAttributes } from \"../appearance-boundary/appearance-boundary\"\nimport { useDensity } from \"../density-provider/density-provider\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeZenithStyles({\n overlay: {\n position: \"fixed\",\n ...shorthands.inset(0),\n // v1's z-1300 is the overlay tier; no z-index token exists in this package.\n zIndex: 1300,\n backgroundColor: \"rgb(0 0 0 / 50%)\",\n \"@media (prefers-reduced-motion: reduce)\": {\n animationDuration: \"0.01ms\",\n animationIterationCount: \"1\",\n \"&[data-state='open']\": {\n animationDuration: \"0.01ms\",\n },\n \"&[data-state='closed']\": {\n animationDuration: \"0.01ms\",\n },\n },\n \"&[data-state='open']\": {\n animationName: {\n from: { opacity: 0 },\n to: { opacity: 1 },\n },\n animationDuration: \"150ms\",\n animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n },\n \"&[data-state='closed']\": {\n animationName: {\n from: { opacity: 1 },\n to: { opacity: 0 },\n },\n animationDuration: \"150ms\",\n animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n },\n },\n content: {\n backgroundColor: tokens.body,\n position: \"fixed\",\n top: \"50%\",\n left: \"50%\",\n // v1's z-1300 is the overlay tier; no z-index token exists in this package.\n zIndex: 1300,\n display: \"grid\",\n width: \"100%\",\n maxWidth: \"calc(100% - 2rem)\",\n transform: \"translate(-50%, -50%)\",\n ...shorthands.gap(tokens.spacingLayout1),\n ...shorthands.borderRadius(tokens.radiusXl),\n ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n // v1 shadow-lg; elevation has no token in this package.\n boxShadow: \"0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a\",\n \"@media (prefers-reduced-motion: reduce)\": {\n animationDuration: \"0.01ms\",\n animationIterationCount: \"1\",\n \"&[data-state='open']\": {\n animationDuration: \"0.01ms\",\n },\n \"&[data-state='closed']\": {\n animationDuration: \"0.01ms\",\n },\n },\n \"&[data-state='open']\": {\n animationName: {\n from: {\n opacity: 0,\n transform: \"translate(-50%, -50%) scale(0.95)\",\n },\n to: {\n opacity: 1,\n transform: \"translate(-50%, -50%) scale(1)\",\n },\n },\n animationDuration: \"150ms\",\n animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n },\n \"&[data-state='closed']\": {\n animationName: {\n from: {\n opacity: 1,\n transform: \"translate(-50%, -50%) scale(1)\",\n },\n to: {\n opacity: 0,\n transform: \"translate(-50%, -50%) scale(0.95)\",\n },\n },\n animationDuration: \"150ms\",\n animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n },\n \"&[data-size='sm']\": { maxWidth: tokens.containerSm },\n \"&[data-size='md']\": { maxWidth: tokens.containerMd },\n \"&[data-size='lg']\": { maxWidth: tokens.containerLg },\n \"&[data-size='xl']\": { maxWidth: tokens.containerXl },\n \"&[data-size='2xl']\": { maxWidth: tokens.container2xl },\n \"&[data-size='3xl']\": { maxWidth: tokens.container3xl },\n \"&[data-size='4xl']\": { maxWidth: tokens.container4xl },\n \"&[data-size='5xl']\": { maxWidth: tokens.container5xl },\n \"&[data-size='full-width']\": { maxWidth: \"100%\" },\n },\n contentPadding: {\n ...shorthands.padding(tokens.spacingGroup2),\n },\n close: {\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.semFocusRing,\n },\n },\n closeButton: {\n position: \"absolute\",\n top: tokens.spacingGroup2,\n right: tokens.spacingGroup2,\n ...shorthands.padding(tokens.spacingElement2),\n // v1 rounded-full; no full-radius token exists in this package.\n borderRadius: \"9999px\",\n cursor: \"pointer\",\n color: tokens.accentA11,\n \":hover\": {\n backgroundColor: tokens.semAccentSoft,\n },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.semFocusRing,\n },\n \":disabled\": {\n pointerEvents: \"none\",\n },\n \"& svg\": {\n pointerEvents: \"none\",\n flexShrink: 0,\n width: \"1rem\",\n height: \"1rem\",\n },\n },\n header: {\n display: \"flex\",\n flexDirection: \"column\",\n ...shorthands.gap(tokens.spacingElement2),\n textAlign: \"left\",\n },\n footer: {\n display: \"flex\",\n ...shorthands.gap(tokens.spacingElement2),\n justifyContent: \"flex-end\",\n },\n title: {\n fontSize: tokens.textLg,\n lineHeight: tokens.leadingLg,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.grayA12,\n },\n description: {\n color: tokens.grayA11,\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n },\n srOnly: {\n position: \"absolute\",\n width: \"1px\",\n height: \"1px\",\n padding: 0,\n margin: \"-1px\",\n overflow: \"hidden\",\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n },\n})\n\nconst XIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(\n function XIcon(props, ref) {\n return (\n <svg\n ref={ref}\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 9 9\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M4.38333 5.31667L1.11667 8.58333C0.994445 8.70556 0.838889 8.76667 0.65 8.76667C0.461111 8.76667 0.305556 8.70556 0.183333 8.58333C0.0611111 8.46111 0 8.30556 0 8.11667C0 7.92778 0.0611111 7.77222 0.183333 7.65L3.45 4.38333L0.183333 1.11667C0.0611111 0.994445 0 0.838889 0 0.65C0 0.461111 0.0611111 0.305556 0.183333 0.183333C0.305556 0.0611111 0.461111 0 0.65 0C0.838889 0 0.994445 0.0611111 1.11667 0.183333L4.38333 3.45L7.65 0.183333C7.77222 0.0611111 7.92778 0 8.11667 0C8.30556 0 8.46111 0.0611111 8.58333 0.183333C8.70556 0.305556 8.76667 0.461111 8.76667 0.65C8.76667 0.838889 8.70556 0.994445 8.58333 1.11667L5.31667 4.38333L8.58333 7.65C8.70556 7.77222 8.76667 7.92778 8.76667 8.11667C8.76667 8.30556 8.70556 8.46111 8.58333 8.58333C8.46111 8.70556 8.30556 8.76667 8.11667 8.76667C7.92778 8.76667 7.77222 8.70556 7.65 8.58333L4.38333 5.31667Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n }\n)\n\nexport type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>\n\nexport const Dialog = React.forwardRef<HTMLElement, DialogProps>(\n function Dialog(props, _ref) {\n return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n }\n)\n\nexport type DialogTriggerProps = React.ComponentProps<\n typeof DialogPrimitive.Trigger\n>\n\nexport const DialogTrigger = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Trigger>,\n DialogTriggerProps\n>(function DialogTrigger({ className, ...props }, ref) {\n return (\n <DialogPrimitive.Trigger\n ref={ref}\n data-slot=\"dialog-trigger\"\n {...{ [SLOT_ATTR]: \"dialog-trigger\" }}\n className={className}\n {...props}\n />\n )\n})\n\nexport type DialogPortalProps = React.ComponentProps<\n typeof DialogPrimitive.Portal\n>\n\nexport const DialogPortal = React.forwardRef<HTMLElement, DialogPortalProps>(\n function DialogPortal(props, _ref) {\n return (\n <DialogPrimitive.Portal\n data-slot=\"dialog-portal\"\n {...{ [SLOT_ATTR]: \"dialog-portal\" }}\n {...props}\n />\n )\n }\n)\n\nexport type DialogOverlayProps = React.ComponentProps<\n typeof DialogPrimitive.Overlay\n>\n\nexport const DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n DialogOverlayProps\n>(function DialogOverlay({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <DialogPrimitive.Overlay\n ref={ref}\n data-slot=\"dialog-overlay\"\n {...{ [SLOT_ATTR]: \"dialog-overlay\" }}\n className={mergeClasses(styles.overlay, className)}\n {...props}\n />\n )\n})\n\nexport type DialogContentSize =\n \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"full-width\"\n\nexport type DialogContentProps = React.ComponentProps<\n typeof DialogPrimitive.Content\n> & {\n showCloseButton?: boolean\n size?: DialogContentSize\n flush?: boolean\n}\n\nexport const DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n DialogContentProps\n>(function DialogContent(\n {\n className,\n children,\n showCloseButton = true,\n flush = false,\n size = \"lg\",\n ...props\n },\n ref\n) {\n const styles = useStyles()\n // DENSITY-SPEC.md §4.4 — portal content boundary: stamp only an explicit override, never a\n // default, so an ambient shell density (already reaching this portal via ordinary DOM\n // inheritance) isn't masked.\n const override = useDensity()\n // SPEC.md §2 rule 3 — the same portal asymmetry, for the appearance pair: re-stamp the\n // nearest explicit AppearanceBoundary's mode+surface, or neither attribute when there is\n // none, leaving live shell inheritance in place.\n const appearance = useAppearanceAttributes()\n\n return (\n <DialogPrimitive.Content\n ref={ref}\n data-slot=\"dialog-content\"\n {...{ [SLOT_ATTR]: \"dialog-content\" }}\n {...(override !== undefined ? { \"data-density\": override } : {})}\n {...appearance}\n data-size={size}\n className={mergeClasses(\n styles.content,\n !flush && styles.contentPadding,\n className\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n {...{ [SLOT_ATTR]: \"dialog-close\" }}\n className={styles.closeButton}\n >\n <XIcon />\n <span className={styles.srOnly}>Close</span>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Content>\n )\n})\n\nexport type DialogCloseProps = React.ComponentProps<\n typeof DialogPrimitive.Close\n>\n\nexport const DialogClose = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Close>,\n DialogCloseProps\n>(function DialogClose({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <DialogPrimitive.Close\n ref={ref}\n data-slot=\"dialog-close\"\n {...{ [SLOT_ATTR]: \"dialog-close\" }}\n className={mergeClasses(styles.close, className)}\n {...props}\n >\n {children}\n </DialogPrimitive.Close>\n )\n})\n\nexport type DialogHeaderProps = React.ComponentProps<\"div\">\n\nexport const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(\n function DialogHeader({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <div\n ref={ref}\n data-slot=\"dialog-header\"\n {...{ [SLOT_ATTR]: \"dialog-header\" }}\n className={mergeClasses(styles.header, className)}\n {...props}\n />\n )\n }\n)\n\nexport type DialogFooterProps = React.ComponentProps<\"div\">\n\nexport const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n function DialogFooter({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <div\n ref={ref}\n data-slot=\"dialog-footer\"\n {...{ [SLOT_ATTR]: \"dialog-footer\" }}\n className={mergeClasses(styles.footer, className)}\n {...props}\n />\n )\n }\n)\n\nexport type DialogTitleProps = React.ComponentProps<\n typeof DialogPrimitive.Title\n>\n\nexport const DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n DialogTitleProps\n>(function DialogTitle({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <DialogPrimitive.Title\n ref={ref}\n data-slot=\"dialog-title\"\n {...{ [SLOT_ATTR]: \"dialog-title\" }}\n className={mergeClasses(styles.title, className)}\n {...props}\n />\n )\n})\n\nexport type DialogDescriptionProps = React.ComponentProps<\n typeof DialogPrimitive.Description\n>\n\nexport const DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n DialogDescriptionProps\n>(function DialogDescription({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <DialogPrimitive.Description\n ref={ref}\n data-slot=\"dialog-description\"\n {...{ [SLOT_ATTR]: \"dialog-description\" }}\n className={mergeClasses(styles.description, className)}\n {...props}\n />\n )\n})\n"],"names":["useStyles","makeZenithStyles","shorthands","tokens.body","tokens.spacingLayout1","tokens.radiusXl","tokens.grayA1","tokens.containerSm","tokens.containerMd","tokens.containerLg","tokens.containerXl","tokens.container2xl","tokens.container3xl","tokens.container4xl","tokens.container5xl","tokens.spacingGroup2","tokens.semFocusRing","tokens.spacingElement2","tokens.accentA11","tokens.semAccentSoft","tokens.textLg","tokens.leadingLg","tokens.fontWeightSemibold","tokens.grayA12","tokens.grayA11","tokens.textSm","tokens.leadingSm","XIcon","React","props","ref","jsx","Dialog","_ref","DialogPrimitive.Root","DialogTrigger","className","DialogPrimitive.Trigger","SLOT_ATTR","DialogPortal","DialogPrimitive.Portal","DialogOverlay","styles","DialogPrimitive.Overlay","mergeClasses","DialogContent","children","showCloseButton","flush","size","override","useDensity","appearance","useAppearanceAttributes","jsxs","DialogPrimitive.Content","DialogPrimitive.Close","DialogClose","DialogHeader","DialogFooter","DialogTitle","DialogPrimitive.Title","DialogDescription","DialogPrimitive.Description"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dialog.js","sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { useAppearanceAttributes } from \"../appearance-boundary/appearance-boundary\"\nimport { useDensity } from \"../density-provider/density-provider\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeZenithStyles({\n overlay: {\n position: \"fixed\",\n ...shorthands.inset(0),\n // v1's z-1300 is the overlay tier; no z-index token exists in this package.\n zIndex: 1300,\n backgroundColor: \"rgb(0 0 0 / 50%)\",\n \"@media (prefers-reduced-motion: reduce)\": {\n animationDuration: \"0.01ms\",\n animationIterationCount: \"1\",\n \"&[data-state='open']\": {\n animationDuration: \"0.01ms\",\n },\n \"&[data-state='closed']\": {\n animationDuration: \"0.01ms\",\n },\n },\n \"&[data-state='open']\": {\n animationName: {\n from: { opacity: 0 },\n to: { opacity: 1 },\n },\n animationDuration: \"150ms\",\n animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n },\n \"&[data-state='closed']\": {\n animationName: {\n from: { opacity: 1 },\n to: { opacity: 0 },\n },\n animationDuration: \"150ms\",\n animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n },\n },\n content: {\n backgroundColor: tokens.body,\n position: \"fixed\",\n top: \"50%\",\n left: \"50%\",\n // v1's z-1300 is the overlay tier; no z-index token exists in this package.\n zIndex: 1300,\n display: \"grid\",\n width: \"100%\",\n maxWidth: \"calc(100% - 2rem)\",\n transform: \"translate(-50%, -50%)\",\n ...shorthands.gap(tokens.spacingLayout1),\n ...shorthands.borderRadius(tokens.radiusXl),\n ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n // v1 shadow-lg; elevation has no token in this package.\n boxShadow: \"0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a\",\n \"@media (prefers-reduced-motion: reduce)\": {\n animationDuration: \"0.01ms\",\n animationIterationCount: \"1\",\n \"&[data-state='open']\": {\n animationDuration: \"0.01ms\",\n },\n \"&[data-state='closed']\": {\n animationDuration: \"0.01ms\",\n },\n },\n \"&[data-state='open']\": {\n animationName: {\n from: {\n opacity: 0,\n transform: \"translate(-50%, -50%) scale(0.95)\",\n },\n to: {\n opacity: 1,\n transform: \"translate(-50%, -50%) scale(1)\",\n },\n },\n animationDuration: \"150ms\",\n animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n },\n \"&[data-state='closed']\": {\n animationName: {\n from: {\n opacity: 1,\n transform: \"translate(-50%, -50%) scale(1)\",\n },\n to: {\n opacity: 0,\n transform: \"translate(-50%, -50%) scale(0.95)\",\n },\n },\n animationDuration: \"150ms\",\n animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n },\n \"&[data-size='sm']\": { maxWidth: tokens.containerSm },\n \"&[data-size='md']\": { maxWidth: tokens.containerMd },\n \"&[data-size='lg']\": { maxWidth: tokens.containerLg },\n \"&[data-size='xl']\": { maxWidth: tokens.containerXl },\n \"&[data-size='2xl']\": { maxWidth: tokens.container2xl },\n \"&[data-size='3xl']\": { maxWidth: tokens.container3xl },\n \"&[data-size='4xl']\": { maxWidth: tokens.container4xl },\n \"&[data-size='5xl']\": { maxWidth: tokens.container5xl },\n \"&[data-size='full-width']\": { maxWidth: \"100%\" },\n },\n contentPadding: {\n ...shorthands.padding(tokens.spacingGroup2),\n },\n close: {\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.focusRing,\n },\n },\n closeButton: {\n position: \"absolute\",\n top: tokens.spacingGroup2,\n right: tokens.spacingGroup2,\n ...shorthands.padding(tokens.spacingElement2),\n // v1 rounded-full; no full-radius token exists in this package.\n borderRadius: \"9999px\",\n cursor: \"pointer\",\n color: tokens.accentA11,\n \":hover\": {\n backgroundColor: tokens.accentSoft,\n },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.focusRing,\n },\n \":disabled\": {\n pointerEvents: \"none\",\n },\n \"& svg\": {\n pointerEvents: \"none\",\n flexShrink: 0,\n width: \"1rem\",\n height: \"1rem\",\n },\n },\n header: {\n display: \"flex\",\n flexDirection: \"column\",\n ...shorthands.gap(tokens.spacingElement2),\n textAlign: \"left\",\n },\n footer: {\n display: \"flex\",\n ...shorthands.gap(tokens.spacingElement2),\n justifyContent: \"flex-end\",\n },\n title: {\n fontSize: tokens.textLg,\n lineHeight: tokens.leadingLg,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.grayA12,\n },\n description: {\n color: tokens.grayA11,\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n },\n srOnly: {\n position: \"absolute\",\n width: \"1px\",\n height: \"1px\",\n padding: 0,\n margin: \"-1px\",\n overflow: \"hidden\",\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n },\n})\n\nconst XIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(\n function XIcon(props, ref) {\n return (\n <svg\n ref={ref}\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 9 9\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M4.38333 5.31667L1.11667 8.58333C0.994445 8.70556 0.838889 8.76667 0.65 8.76667C0.461111 8.76667 0.305556 8.70556 0.183333 8.58333C0.0611111 8.46111 0 8.30556 0 8.11667C0 7.92778 0.0611111 7.77222 0.183333 7.65L3.45 4.38333L0.183333 1.11667C0.0611111 0.994445 0 0.838889 0 0.65C0 0.461111 0.0611111 0.305556 0.183333 0.183333C0.305556 0.0611111 0.461111 0 0.65 0C0.838889 0 0.994445 0.0611111 1.11667 0.183333L4.38333 3.45L7.65 0.183333C7.77222 0.0611111 7.92778 0 8.11667 0C8.30556 0 8.46111 0.0611111 8.58333 0.183333C8.70556 0.305556 8.76667 0.461111 8.76667 0.65C8.76667 0.838889 8.70556 0.994445 8.58333 1.11667L5.31667 4.38333L8.58333 7.65C8.70556 7.77222 8.76667 7.92778 8.76667 8.11667C8.76667 8.30556 8.70556 8.46111 8.58333 8.58333C8.46111 8.70556 8.30556 8.76667 8.11667 8.76667C7.92778 8.76667 7.77222 8.70556 7.65 8.58333L4.38333 5.31667Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n }\n)\n\nexport type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>\n\nexport const Dialog = React.forwardRef<HTMLElement, DialogProps>(\n function Dialog(props, _ref) {\n return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n }\n)\n\nexport type DialogTriggerProps = React.ComponentProps<\n typeof DialogPrimitive.Trigger\n>\n\nexport const DialogTrigger = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Trigger>,\n DialogTriggerProps\n>(function DialogTrigger({ className, ...props }, ref) {\n return (\n <DialogPrimitive.Trigger\n ref={ref}\n data-slot=\"dialog-trigger\"\n {...{ [SLOT_ATTR]: \"dialog-trigger\" }}\n className={className}\n {...props}\n />\n )\n})\n\nexport type DialogPortalProps = React.ComponentProps<\n typeof DialogPrimitive.Portal\n>\n\nexport const DialogPortal = React.forwardRef<HTMLElement, DialogPortalProps>(\n function DialogPortal(props, _ref) {\n return (\n <DialogPrimitive.Portal\n data-slot=\"dialog-portal\"\n {...{ [SLOT_ATTR]: \"dialog-portal\" }}\n {...props}\n />\n )\n }\n)\n\nexport type DialogOverlayProps = React.ComponentProps<\n typeof DialogPrimitive.Overlay\n>\n\nexport const DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n DialogOverlayProps\n>(function DialogOverlay({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <DialogPrimitive.Overlay\n ref={ref}\n data-slot=\"dialog-overlay\"\n {...{ [SLOT_ATTR]: \"dialog-overlay\" }}\n className={mergeClasses(styles.overlay, className)}\n {...props}\n />\n )\n})\n\nexport type DialogContentSize =\n \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"full-width\"\n\nexport type DialogContentProps = React.ComponentProps<\n typeof DialogPrimitive.Content\n> & {\n showCloseButton?: boolean\n size?: DialogContentSize\n flush?: boolean\n}\n\nexport const DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n DialogContentProps\n>(function DialogContent(\n {\n className,\n children,\n showCloseButton = true,\n flush = false,\n size = \"lg\",\n ...props\n },\n ref\n) {\n const styles = useStyles()\n // DENSITY-SPEC.md §4.4 — portal content boundary: stamp only an explicit override, never a\n // default, so an ambient shell density (already reaching this portal via ordinary DOM\n // inheritance) isn't masked.\n const override = useDensity()\n // SPEC.md §2 rule 3 — the same portal asymmetry, for the appearance pair: re-stamp the\n // nearest explicit AppearanceBoundary's mode+surface, or neither attribute when there is\n // none, leaving live shell inheritance in place.\n const appearance = useAppearanceAttributes()\n\n return (\n <DialogPrimitive.Content\n ref={ref}\n data-slot=\"dialog-content\"\n {...{ [SLOT_ATTR]: \"dialog-content\" }}\n {...(override !== undefined ? { \"data-density\": override } : {})}\n {...appearance}\n data-size={size}\n className={mergeClasses(\n styles.content,\n !flush && styles.contentPadding,\n className\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n {...{ [SLOT_ATTR]: \"dialog-close\" }}\n className={styles.closeButton}\n >\n <XIcon />\n <span className={styles.srOnly}>Close</span>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Content>\n )\n})\n\nexport type DialogCloseProps = React.ComponentProps<\n typeof DialogPrimitive.Close\n>\n\nexport const DialogClose = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Close>,\n DialogCloseProps\n>(function DialogClose({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <DialogPrimitive.Close\n ref={ref}\n data-slot=\"dialog-close\"\n {...{ [SLOT_ATTR]: \"dialog-close\" }}\n className={mergeClasses(styles.close, className)}\n {...props}\n >\n {children}\n </DialogPrimitive.Close>\n )\n})\n\nexport type DialogHeaderProps = React.ComponentProps<\"div\">\n\nexport const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(\n function DialogHeader({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <div\n ref={ref}\n data-slot=\"dialog-header\"\n {...{ [SLOT_ATTR]: \"dialog-header\" }}\n className={mergeClasses(styles.header, className)}\n {...props}\n />\n )\n }\n)\n\nexport type DialogFooterProps = React.ComponentProps<\"div\">\n\nexport const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n function DialogFooter({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <div\n ref={ref}\n data-slot=\"dialog-footer\"\n {...{ [SLOT_ATTR]: \"dialog-footer\" }}\n className={mergeClasses(styles.footer, className)}\n {...props}\n />\n )\n }\n)\n\nexport type DialogTitleProps = React.ComponentProps<\n typeof DialogPrimitive.Title\n>\n\nexport const DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n DialogTitleProps\n>(function DialogTitle({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <DialogPrimitive.Title\n ref={ref}\n data-slot=\"dialog-title\"\n {...{ [SLOT_ATTR]: \"dialog-title\" }}\n className={mergeClasses(styles.title, className)}\n {...props}\n />\n )\n})\n\nexport type DialogDescriptionProps = React.ComponentProps<\n typeof DialogPrimitive.Description\n>\n\nexport const DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n DialogDescriptionProps\n>(function DialogDescription({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <DialogPrimitive.Description\n ref={ref}\n data-slot=\"dialog-description\"\n {...{ [SLOT_ATTR]: \"dialog-description\" }}\n className={mergeClasses(styles.description, className)}\n {...props}\n />\n )\n})\n"],"names":["useStyles","makeZenithStyles","shorthands","tokens.body","tokens.spacingLayout1","tokens.radiusXl","tokens.grayA1","tokens.containerSm","tokens.containerMd","tokens.containerLg","tokens.containerXl","tokens.container2xl","tokens.container3xl","tokens.container4xl","tokens.container5xl","tokens.spacingGroup2","tokens.focusRing","tokens.spacingElement2","tokens.accentA11","tokens.accentSoft","tokens.textLg","tokens.leadingLg","tokens.fontWeightSemibold","tokens.grayA12","tokens.grayA11","tokens.textSm","tokens.leadingSm","XIcon","React","props","ref","jsx","Dialog","_ref","DialogPrimitive.Root","DialogTrigger","className","DialogPrimitive.Trigger","SLOT_ATTR","DialogPortal","DialogPrimitive.Portal","DialogOverlay","styles","DialogPrimitive.Overlay","mergeClasses","DialogContent","children","showCloseButton","flush","size","override","useDensity","appearance","useAppearanceAttributes","jsxs","DialogPrimitive.Content","DialogPrimitive.Close","DialogClose","DialogHeader","DialogFooter","DialogTitle","DialogPrimitive.Title","DialogDescription","DialogPrimitive.Description"],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as e, jsxs as y } from "react/jsx-runtime";
|
|
2
2
|
import * as s from "react";
|
|
3
|
-
import { Root as N, Close as D, Content as R, Description as S, Overlay as z, Portal as F, Title as L, Trigger as
|
|
3
|
+
import { Root as N, Close as D, Content as R, Description as S, Overlay as z, Portal as F, Title as L, Trigger as X } from "../../vendor/.bun/@radix-ui_react-dialog@1.1.15_2b23df507bdda662/vendor/@radix-ui/react-dialog/dist/index.js";
|
|
4
4
|
import { mergeClasses as m, SLOT_ATTR as l, shorthands as i } from "@epilot/zenith-runtime/v1";
|
|
5
|
-
import { useAppearanceAttributes as
|
|
5
|
+
import { useAppearanceAttributes as A } from "../appearance-boundary/appearance-boundary.js";
|
|
6
6
|
import { useDensity as O } from "../density-provider/density-provider.js";
|
|
7
7
|
import { makeZenithStyles as Y } from "../../styles/make-styles.js";
|
|
8
|
-
import { leadingSm as k, textSm as E, grayA11 as P, grayA12 as B, fontWeightSemibold as H, leadingLg as I, textLg as W, accentA8 as h,
|
|
8
|
+
import { leadingSm as k, textSm as E, grayA11 as P, grayA12 as B, fontWeightSemibold as H, leadingLg as I, textLg as W, accentA8 as h, accentSoft as j, accentA11 as _, spacingGroup2 as b, spacingElement3 as x, spacingElement1 as n, gray2 as Z, spacingElement2 as g, grayA1 as p, radius2xl as G } from "../../tokens/index.js";
|
|
9
9
|
const d = Y({
|
|
10
10
|
overlay: {
|
|
11
11
|
position: "fixed",
|
|
@@ -286,7 +286,7 @@ const d = Y({
|
|
|
286
286
|
}
|
|
287
287
|
), at = s.forwardRef(function({ className: t, ...a }, o) {
|
|
288
288
|
return /* @__PURE__ */ e(
|
|
289
|
-
|
|
289
|
+
X,
|
|
290
290
|
{
|
|
291
291
|
ref: o,
|
|
292
292
|
"data-slot": "drawer-trigger",
|
|
@@ -326,7 +326,7 @@ const d = Y({
|
|
|
326
326
|
flush: u = !1,
|
|
327
327
|
...C
|
|
328
328
|
}, v) {
|
|
329
|
-
const f = d(), w = O(), T =
|
|
329
|
+
const f = d(), w = O(), T = A();
|
|
330
330
|
return /* @__PURE__ */ y(
|
|
331
331
|
R,
|
|
332
332
|
{
|