@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
|
@@ -4,8 +4,8 @@ import { Root as J } from "../../vendor/.bun/@radix-ui_react-toggle@1.1.10_2b23d
|
|
|
4
4
|
import { Item as K, Root as Q } from "../../vendor/.bun/@radix-ui_react-toggle-group@1.1.11_2b23df507bdda662/vendor/@radix-ui/react-toggle-group/dist/index.js";
|
|
5
5
|
import { mergeClasses as h, SLOT_ATTR as r, shorthands as s } from "@epilot/zenith-runtime/v1";
|
|
6
6
|
import { makeZenithStyles as tt } from "../../styles/make-styles.js";
|
|
7
|
-
import { grayContrast as ot, grayA3 as rt, accentContrast as et,
|
|
8
|
-
const
|
|
7
|
+
import { grayContrast as ot, grayA3 as rt, accentContrast as et, accentSoft as f, accentSolid as C, grayA11 as nt, fontWeightNormal as I, leadingXs as it, textXs as at, fontWeightSemibold as st, spacingElement1 as G, spacingElement2 as ct, accentLight as dt, accentA8 as D, grayA12 as lt, leadingSm as pt, textSm as ut, accentA7 as P, radiusLg as W, spacingElement3 as E, grayA6 as ht, spacingGroup1 as mt } from "../../tokens/index.js";
|
|
8
|
+
const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing a `value`. Give each card a unique `value` so it can be selected and controlled.", F = n.createContext(null), k = n.createContext(
|
|
9
9
|
null
|
|
10
10
|
), p = tt({
|
|
11
11
|
// Group layouts
|
|
@@ -15,7 +15,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
15
15
|
// while `styles.card` and `styles[layout]` were read but never declared. See make-styles.ts for
|
|
16
16
|
// why tsc accepted that for as long as it did.
|
|
17
17
|
display: "grid",
|
|
18
|
-
...s.gap(
|
|
18
|
+
...s.gap(mt)
|
|
19
19
|
},
|
|
20
20
|
// v1: grid-cols-[repeat(auto-fit,minmax(200px,1fr))]
|
|
21
21
|
grid: {
|
|
@@ -37,7 +37,9 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
37
37
|
...s.gap(E),
|
|
38
38
|
overflow: "hidden",
|
|
39
39
|
...s.borderRadius(W),
|
|
40
|
-
|
|
40
|
+
// Not currentColor: that picked up this rule's `color: grayA12` and painted a near-black
|
|
41
|
+
// edge. The predecessor's bare `border` resolved to a subtle grey; grayA6 is its match.
|
|
42
|
+
...s.border("1px", "solid", ht),
|
|
41
43
|
...s.paddingInline(E),
|
|
42
44
|
...s.paddingBlock("0.375rem"),
|
|
43
45
|
textAlign: "left",
|
|
@@ -237,7 +239,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
237
239
|
transitionProperty: "transform",
|
|
238
240
|
transitionDuration: "150ms"
|
|
239
241
|
}
|
|
240
|
-
}),
|
|
242
|
+
}), Ct = (o) => /* @__PURE__ */ t(
|
|
241
243
|
"svg",
|
|
242
244
|
{
|
|
243
245
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -247,7 +249,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
247
249
|
...o,
|
|
248
250
|
children: /* @__PURE__ */ t("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" })
|
|
249
251
|
}
|
|
250
|
-
),
|
|
252
|
+
), bt = () => {
|
|
251
253
|
const o = p();
|
|
252
254
|
return /* @__PURE__ */ t(
|
|
253
255
|
"span",
|
|
@@ -263,7 +265,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
263
265
|
)
|
|
264
266
|
}
|
|
265
267
|
);
|
|
266
|
-
},
|
|
268
|
+
}, xt = () => {
|
|
267
269
|
const o = p();
|
|
268
270
|
return /* @__PURE__ */ t(
|
|
269
271
|
"span",
|
|
@@ -271,7 +273,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
271
273
|
className: o.checkboxOuter,
|
|
272
274
|
[r]: "option-card-checkbox-outer",
|
|
273
275
|
children: /* @__PURE__ */ t(
|
|
274
|
-
|
|
276
|
+
Ct,
|
|
275
277
|
{
|
|
276
278
|
className: o.checkboxCheck,
|
|
277
279
|
[r]: "option-card-checkbox-check"
|
|
@@ -279,7 +281,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
279
281
|
)
|
|
280
282
|
}
|
|
281
283
|
);
|
|
282
|
-
},
|
|
284
|
+
}, yt = () => {
|
|
283
285
|
const o = p();
|
|
284
286
|
return /* @__PURE__ */ t(
|
|
285
287
|
"span",
|
|
@@ -295,7 +297,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
295
297
|
)
|
|
296
298
|
}
|
|
297
299
|
);
|
|
298
|
-
},
|
|
300
|
+
}, It = n.forwardRef(function({ className: i, layout: e = gt, ...a }, c) {
|
|
299
301
|
const d = p();
|
|
300
302
|
return /* @__PURE__ */ t(F.Provider, { value: { type: a.type, layout: e }, children: /* @__PURE__ */ t(
|
|
301
303
|
Q,
|
|
@@ -324,7 +326,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
324
326
|
[r]: "option-card-control",
|
|
325
327
|
className: h(d.control, i),
|
|
326
328
|
...a,
|
|
327
|
-
children: g === "radio" ? /* @__PURE__ */ t(
|
|
329
|
+
children: g === "radio" ? /* @__PURE__ */ t(bt, {}) : g === "switch" ? /* @__PURE__ */ t(yt, {}) : /* @__PURE__ */ t(xt, {})
|
|
328
330
|
}
|
|
329
331
|
);
|
|
330
332
|
}), L = n.forwardRef(function({ className: i, variant: e = "icon", ...a }, c) {
|
|
@@ -345,7 +347,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
345
347
|
...a
|
|
346
348
|
}
|
|
347
349
|
);
|
|
348
|
-
}),
|
|
350
|
+
}), wt = n.forwardRef(function({ className: i, ...e }, a) {
|
|
349
351
|
const c = p();
|
|
350
352
|
return /* @__PURE__ */ t(
|
|
351
353
|
"span",
|
|
@@ -357,7 +359,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
357
359
|
...e
|
|
358
360
|
}
|
|
359
361
|
);
|
|
360
|
-
}),
|
|
362
|
+
}), Gt = n.forwardRef(function({ className: i, ...e }, a) {
|
|
361
363
|
const c = p();
|
|
362
364
|
return /* @__PURE__ */ t(
|
|
363
365
|
"span",
|
|
@@ -369,7 +371,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
369
371
|
...e
|
|
370
372
|
}
|
|
371
373
|
);
|
|
372
|
-
}),
|
|
374
|
+
}), kt = (o) => n.Children.toArray(o).some(
|
|
373
375
|
(i) => n.isValidElement(i) && i.type === _
|
|
374
376
|
), $ = n.forwardRef(function({ className: i, children: e, ...a }, c) {
|
|
375
377
|
const d = p();
|
|
@@ -383,11 +385,11 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
383
385
|
...a,
|
|
384
386
|
children: [
|
|
385
387
|
e,
|
|
386
|
-
!
|
|
388
|
+
!kt(e) && /* @__PURE__ */ t(_, {})
|
|
387
389
|
]
|
|
388
390
|
}
|
|
389
391
|
);
|
|
390
|
-
}), w = (o, ...i) => n.isValidElement(o) && i.includes(o.type),
|
|
392
|
+
}), w = (o, ...i) => n.isValidElement(o) && i.includes(o.type), Dt = n.forwardRef(
|
|
391
393
|
function({
|
|
392
394
|
className: i,
|
|
393
395
|
children: e,
|
|
@@ -398,7 +400,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
398
400
|
...m
|
|
399
401
|
}, g) {
|
|
400
402
|
const S = p(), R = n.useContext(F), b = R !== null, j = n.useId();
|
|
401
|
-
process.env.NODE_ENV !== "production" && b && a === void 0 && console.warn(
|
|
403
|
+
process.env.NODE_ENV !== "production" && b && a === void 0 && console.warn(ft);
|
|
402
404
|
const [B, M] = n.useState(
|
|
403
405
|
d ?? !1
|
|
404
406
|
), v = c !== void 0, O = v ? c : B, V = (u) => {
|
|
@@ -406,9 +408,9 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
406
408
|
}, X = b ? R.type === "multiple" ? "checkbox" : "radio" : "checkbox", [x, z] = n.useState(X), T = n.useMemo(
|
|
407
409
|
() => ({ controlType: x, registerType: z }),
|
|
408
410
|
[x]
|
|
409
|
-
), y = n.Children.toArray(e), U = y.some((u) => w(u, $)), H = y.filter((u) => w(u, L)),
|
|
411
|
+
), y = n.Children.toArray(e), U = y.some((u) => w(u, $)), H = y.filter((u) => w(u, L)), N = y.filter((u) => !w(u, L)), A = /* @__PURE__ */ q(Y, { children: [
|
|
410
412
|
H,
|
|
411
|
-
U ?
|
|
413
|
+
U ? N : /* @__PURE__ */ t($, { children: /* @__PURE__ */ t(wt, { children: N }) })
|
|
412
414
|
] });
|
|
413
415
|
if (b)
|
|
414
416
|
return /* @__PURE__ */ t(k.Provider, { value: T, children: /* @__PURE__ */ t(
|
|
@@ -420,7 +422,7 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
420
422
|
value: a ?? j,
|
|
421
423
|
className: h(S.card, i),
|
|
422
424
|
...m,
|
|
423
|
-
children:
|
|
425
|
+
children: A
|
|
424
426
|
}
|
|
425
427
|
) });
|
|
426
428
|
const Z = x === "switch" ? "switch" : "checkbox";
|
|
@@ -437,18 +439,18 @@ const mt = "grid", gt = "OptionCard: a card inside an OptionCardGroup is missing
|
|
|
437
439
|
"aria-pressed": void 0,
|
|
438
440
|
className: h(S.card, i),
|
|
439
441
|
...m,
|
|
440
|
-
children:
|
|
442
|
+
children: A
|
|
441
443
|
}
|
|
442
444
|
) });
|
|
443
445
|
}
|
|
444
446
|
);
|
|
445
447
|
export {
|
|
446
|
-
|
|
448
|
+
Dt as OptionCard,
|
|
447
449
|
$ as OptionCardContent,
|
|
448
450
|
_ as OptionCardControl,
|
|
449
|
-
|
|
450
|
-
|
|
451
|
+
Gt as OptionCardDescription,
|
|
452
|
+
It as OptionCardGroup,
|
|
451
453
|
L as OptionCardMedia,
|
|
452
|
-
|
|
454
|
+
wt as OptionCardTitle
|
|
453
455
|
};
|
|
454
456
|
//# sourceMappingURL=option-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"option-card.js","sources":["../../../src/components/option-card/option-card.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\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\nconst DEFAULT_LAYOUT = \"grid\" as const\n\nconst MISSING_VALUE_WARNING =\n \"OptionCard: a card inside an OptionCardGroup is missing a `value`. \" +\n \"Give each card a unique `value` so it can be selected and controlled.\"\n\n/** The trailing control glyph an {@link OptionCard} shows for its selected state. */\nexport type OptionCardControlType = \"radio\" | \"checkbox\" | \"switch\" | \"none\"\n\nexport type OptionCardLayout = \"grid\" | \"row\" | \"column\"\n\n// ── Group context ──────────────────────────────────────────────────────────\ntype OptionCardGroupContextValue = {\n type?: \"single\" | \"multiple\"\n layout: OptionCardLayout\n}\nconst OptionCardGroupContext =\n React.createContext<OptionCardGroupContextValue | null>(null)\n\n// ── Card context ───────────────────────────────────────────────────────────\ntype OptionCardContextValue = {\n controlType: OptionCardControlType\n registerType: (type: OptionCardControlType) => void\n}\nconst OptionCardContext = React.createContext<OptionCardContextValue | null>(\n null\n)\n\n// ── Styles ─────────────────────────────────────────────────────────────────\n\nconst useStyles = makeZenithStyles({\n // Group layouts\n group: {\n // The GROUP only lays out. v1's group base class is literally \"\" -- every border, padding and\n // interaction style below used to live here, copied from v1's CARD class onto the wrong element,\n // while `styles.card` and `styles[layout]` were read but never declared. See make-styles.ts for\n // why tsc accepted that for as long as it did.\n display: \"grid\",\n ...shorthands.gap(tokens.spacingGroup1),\n },\n\n // v1: grid-cols-[repeat(auto-fit,minmax(200px,1fr))]\n grid: {\n gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\",\n },\n // v1: grid-flow-col auto-cols-fr -- equal-width columns in one non-wrapping row, so options read\n // as equal-weight peers regardless of their content.\n row: {\n gridAutoFlow: \"column\",\n gridAutoColumns: \"minmax(0, 1fr)\",\n },\n // v1: plain `grid` with no template. One column, stacked.\n column: {},\n\n card: {\n position: \"relative\",\n display: \"flex\",\n alignItems: \"center\",\n // v1 gap-3 = 0.75rem. No token: the semantic scale has no 0.75rem step.\n ...shorthands.gap(tokens.spacingElement3),\n overflow: \"hidden\",\n ...shorthands.borderRadius(tokens.radiusLg),\n ...shorthands.border(\"1px\", \"solid\", \"currentColor\"),\n ...shorthands.paddingInline(tokens.spacingElement3),\n ...shorthands.paddingBlock(\"0.375rem\"),\n textAlign: \"left\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n fontWeight: tokens.fontWeightNormal,\n color: tokens.grayA12,\n backgroundColor: \"transparent\",\n transitionProperty: \"color, background-color, border-color, box-shadow\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n cursor: \"pointer\",\n userSelect: \"none\",\n height: \"auto\",\n minWidth: \"0\",\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.accentA8,\n },\n \":disabled, &[data-disabled]\": {\n pointerEvents: \"none\",\n opacity: 0.5,\n },\n \"&[data-state='on']\": {\n backgroundColor: tokens.semAccentSoft,\n ...shorthands.borderColor(tokens.accentA8),\n },\n [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-radio-outer\"]`]: {\n ...shorthands.borderColor(tokens.semAccentSolid),\n },\n [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-radio-dot\"]`]: {\n opacity: 1,\n },\n [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-checkbox-outer\"]`]: {\n ...shorthands.borderColor(\"transparent\"),\n backgroundColor: tokens.semAccentSolid,\n },\n [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-checkbox-check\"]`]: {\n opacity: 1,\n },\n [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-switch-track\"]`]: {\n backgroundColor: tokens.semAccentSolid,\n },\n [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-switch-thumb\"]`]: {\n transform: \"translateX(calc(100% - 1px))\",\n },\n },\n\n // Media\n mediaRoot: {\n flexShrink: 0,\n },\n mediaIcon: {\n display: \"grid\",\n width: \"2.5rem\",\n height: \"2.5rem\",\n placeContent: \"center\",\n alignSelf: \"start\",\n ...shorthands.borderRadius(tokens.radiusLg),\n backgroundColor: tokens.semAccentSoft,\n color: tokens.semAccentLight,\n \"& svg\": {\n width: \"1.25rem\",\n height: \"1.25rem\",\n },\n },\n mediaIllustration: {\n position: \"relative\",\n aspectRatio: \"1 / 1\",\n alignSelf: \"stretch\",\n overflow: \"hidden\",\n \"& svg\": {\n position: \"absolute\",\n ...shorthands.inset(0),\n width: \"100%\",\n height: \"100%\",\n },\n \"& img\": {\n position: \"absolute\",\n ...shorthands.inset(0),\n width: \"100%\",\n height: \"100%\",\n objectFit: \"contain\",\n },\n },\n\n // Content\n content: {\n display: \"grid\",\n minWidth: 0,\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n gridAutoRows: \"min-content\",\n alignItems: \"center\",\n columnGap: tokens.spacingElement2,\n paddingTop: tokens.spacingElement1,\n paddingBottom: tokens.spacingElement1,\n [`&:has([${SLOT_ATTR}=\"option-card-control\"])`]: {\n gridTemplateColumns: \"1fr auto\",\n },\n },\n\n // Title\n title: {\n gridColumnStart: 1,\n gridRowStart: 1,\n minWidth: 0,\n alignSelf: \"center\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n fontWeight: tokens.fontWeightSemibold,\n },\n\n // Description\n description: {\n gridColumnStart: 1,\n gridRowStart: 2,\n minWidth: 0,\n overflowWrap: \"break-word\",\n fontSize: tokens.textXs,\n lineHeight: tokens.leadingXs,\n fontWeight: tokens.fontWeightNormal,\n color: tokens.grayA11,\n },\n\n // Control\n control: {\n gridColumnStart: 2,\n gridRowStart: 1,\n alignSelf: \"center\",\n justifySelf: \"end\",\n },\n\n // Radio glyph\n radioOuter: {\n display: \"grid\",\n width: \"1rem\",\n height: \"1rem\",\n flexShrink: 0,\n placeContent: \"center\",\n borderRadius: \"9999px\",\n ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n backgroundColor: tokens.semAccentSoft,\n transitionProperty: \"border-color\",\n transitionDuration: \"150ms\",\n },\n radioDot: {\n width: \"0.5rem\",\n height: \"0.5rem\",\n borderRadius: \"9999px\",\n backgroundColor: tokens.semAccentSolid,\n opacity: 0,\n transitionProperty: \"opacity\",\n transitionDuration: \"150ms\",\n },\n\n // Checkbox glyph\n checkboxOuter: {\n display: \"grid\",\n width: \"1rem\",\n height: \"1rem\",\n flexShrink: 0,\n placeContent: \"center\",\n ...shorthands.borderRadius(\"4px\"),\n ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n backgroundColor: tokens.semAccentSoft,\n color: tokens.accentContrast,\n transitionProperty: \"background-color, border-color\",\n transitionDuration: \"150ms\",\n },\n checkboxCheck: {\n width: \"0.75rem\",\n height: \"0.75rem\",\n opacity: 0,\n transitionProperty: \"opacity\",\n transitionDuration: \"150ms\",\n },\n\n // Switch glyph\n switchTrack: {\n display: \"inline-flex\",\n height: \"1.25rem\",\n width: \"2.125rem\",\n flexShrink: 0,\n alignItems: \"center\",\n borderRadius: \"9999px\",\n ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n backgroundColor: tokens.grayA3,\n transitionProperty: \"background-color\",\n transitionDuration: \"150ms\",\n },\n switchThumb: {\n display: \"block\",\n width: \"1rem\",\n height: \"1rem\",\n transform: \"translateX(1px)\",\n borderRadius: \"9999px\",\n backgroundColor: tokens.grayContrast,\n // v1 shadow-xs; no shadow tokens in this package.\n boxShadow: \"0 1px 2px 0 #0000000d\",\n transitionProperty: \"transform\",\n transitionDuration: \"150ms\",\n },\n})\n\n// ── Control Glyphs ─────────────────────────────────────────────────────────\n\nconst CheckIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n </svg>\n)\n\nconst RadioGlyph = () => {\n const styles = useStyles()\n return (\n <span\n className={styles.radioOuter}\n {...{ [SLOT_ATTR]: \"option-card-radio-outer\" }}\n >\n <span\n className={styles.radioDot}\n {...{ [SLOT_ATTR]: \"option-card-radio-dot\" }}\n />\n </span>\n )\n}\n\nconst CheckboxGlyph = () => {\n const styles = useStyles()\n return (\n <span\n className={styles.checkboxOuter}\n {...{ [SLOT_ATTR]: \"option-card-checkbox-outer\" }}\n >\n <CheckIcon\n className={styles.checkboxCheck}\n {...{ [SLOT_ATTR]: \"option-card-checkbox-check\" }}\n />\n </span>\n )\n}\n\nconst SwitchGlyph = () => {\n const styles = useStyles()\n return (\n <span\n className={styles.switchTrack}\n {...{ [SLOT_ATTR]: \"option-card-switch-track\" }}\n >\n <span\n className={styles.switchThumb}\n {...{ [SLOT_ATTR]: \"option-card-switch-thumb\" }}\n />\n </span>\n )\n}\n\n// ── OptionCardGroup ────────────────────────────────────────────────────────\n\nexport type OptionCardGroupProps = React.ComponentProps<\n typeof ToggleGroupPrimitive.Root\n> & {\n layout?: OptionCardLayout\n}\n\nexport const OptionCardGroup = React.forwardRef<\n React.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n OptionCardGroupProps\n>(function OptionCardGroup(\n { className, layout = DEFAULT_LAYOUT, ...props },\n ref\n) {\n const styles = useStyles()\n\n return (\n <OptionCardGroupContext.Provider value={{ type: props.type, layout }}>\n <ToggleGroupPrimitive.Root\n ref={ref}\n data-slot=\"option-card-group\"\n {...{ [SLOT_ATTR]: \"option-card-group\" }}\n data-layout={layout}\n {...(props.type === \"single\" ? { role: \"radiogroup\" } : {})}\n className={mergeClasses(styles.group, styles[layout], className)}\n {...props}\n />\n </OptionCardGroupContext.Provider>\n )\n})\n\n// ── OptionCardControl ──────────────────────────────────────────────────────\n\nexport type OptionCardControlProps = React.ComponentProps<\"span\"> & {\n type?: OptionCardControlType\n}\n\nexport const OptionCardControl = React.forwardRef<\n HTMLSpanElement,\n OptionCardControlProps\n>(function OptionCardControl({ className, type, ...props }, ref) {\n const styles = useStyles()\n const card = React.useContext(OptionCardContext)\n const register = card?.registerType\n\n React.useEffect(() => {\n if (type && register) register(type)\n }, [type, register])\n\n const resolved = type ?? card?.controlType ?? \"checkbox\"\n if (resolved === \"none\") return null\n\n return (\n <span\n ref={ref}\n aria-hidden=\"true\"\n data-slot=\"option-card-control\"\n {...{ [SLOT_ATTR]: \"option-card-control\" }}\n className={mergeClasses(styles.control, className)}\n {...props}\n >\n {resolved === \"radio\" ? (\n <RadioGlyph />\n ) : resolved === \"switch\" ? (\n <SwitchGlyph />\n ) : (\n <CheckboxGlyph />\n )}\n </span>\n )\n})\n\n// ── OptionCardMedia ────────────────────────────────────────────────────────\n\nexport type OptionCardMediaVariant = \"icon\" | \"illustration\"\n\nexport type OptionCardMediaProps = React.ComponentProps<\"span\"> & {\n variant?: OptionCardMediaVariant\n}\n\nexport const OptionCardMedia = React.forwardRef<\n HTMLSpanElement,\n OptionCardMediaProps\n>(function OptionCardMedia({ className, variant = \"icon\", ...props }, ref) {\n const styles = useStyles()\n\n return (\n <span\n ref={ref}\n aria-hidden=\"true\"\n data-slot=\"option-card-media\"\n {...{ [SLOT_ATTR]: \"option-card-media\" }}\n data-variant={variant}\n className={mergeClasses(\n styles.mediaRoot,\n variant === \"illustration\"\n ? styles.mediaIllustration\n : styles.mediaIcon,\n className\n )}\n {...props}\n />\n )\n})\n\n// ── OptionCardTitle ────────────────────────────────────────────────────────\n\nexport type OptionCardTitleProps = React.ComponentProps<\"span\">\n\nexport const OptionCardTitle = React.forwardRef<\n HTMLSpanElement,\n OptionCardTitleProps\n>(function OptionCardTitle({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <span\n ref={ref}\n data-slot=\"option-card-title\"\n {...{ [SLOT_ATTR]: \"option-card-title\" }}\n className={mergeClasses(styles.title, className)}\n {...props}\n />\n )\n})\n\n// ── OptionCardDescription ──────────────────────────────────────────────────\n\nexport type OptionCardDescriptionProps = React.ComponentProps<\"span\">\n\nexport const OptionCardDescription = React.forwardRef<\n HTMLSpanElement,\n OptionCardDescriptionProps\n>(function OptionCardDescription({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <span\n ref={ref}\n data-slot=\"option-card-description\"\n {...{ [SLOT_ATTR]: \"option-card-description\" }}\n className={mergeClasses(styles.description, className)}\n {...props}\n />\n )\n})\n\n// ── OptionCardContent ──────────────────────────────────────────────────────\n\nexport type OptionCardContentProps = React.ComponentProps<\"span\">\n\nconst hasControl = (children: React.ReactNode) =>\n React.Children.toArray(children).some(\n (c) => React.isValidElement(c) && c.type === OptionCardControl\n )\n\nexport const OptionCardContent = React.forwardRef<\n HTMLSpanElement,\n OptionCardContentProps\n>(function OptionCardContent({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <span\n ref={ref}\n data-slot=\"option-card-content\"\n {...{ [SLOT_ATTR]: \"option-card-content\" }}\n className={mergeClasses(styles.content, className)}\n {...props}\n >\n {children}\n {!hasControl(children) && <OptionCardControl />}\n </span>\n )\n})\n\n// ── OptionCard ─────────────────────────────────────────────────────────────\n\nexport type OptionCardProps = Omit<\n React.ComponentProps<\"button\">,\n \"onChange\" | \"title\"\n> & {\n /** Value of this option. Required inside an {@link OptionCardGroup}. */\n value?: string\n /** Controlled selected state for a standalone (group-less) card. */\n pressed?: boolean\n /** Uncontrolled default selected state for a standalone card. */\n defaultPressed?: boolean\n /** Fired when a standalone card is toggled. */\n onPressedChange?: (pressed: boolean) => void\n}\n\nconst isPart = (node: React.ReactNode, ...parts: React.ElementType[]) =>\n React.isValidElement(node) && parts.includes(node.type as React.ElementType)\n\nexport const OptionCard = React.forwardRef<HTMLButtonElement, OptionCardProps>(\n function OptionCard(\n {\n className,\n children,\n value,\n pressed,\n defaultPressed,\n onPressedChange,\n ...props\n },\n ref\n ) {\n const styles = useStyles()\n const group = React.useContext(OptionCardGroupContext)\n const inGroup = group !== null\n\n const fallbackId = React.useId()\n if (\n process.env.NODE_ENV !== \"production\" &&\n inGroup &&\n value === undefined\n ) {\n console.warn(MISSING_VALUE_WARNING)\n }\n\n const [internalPressed, setInternalPressed] = React.useState(\n defaultPressed ?? false\n )\n const isControlled = pressed !== undefined\n const currentPressed = isControlled ? pressed : internalPressed\n const handlePressedChange = (next: boolean) => {\n if (!isControlled) setInternalPressed(next)\n onPressedChange?.(next)\n }\n\n const groupControlType: OptionCardControlType = inGroup\n ? group.type === \"multiple\"\n ? \"checkbox\"\n : \"radio\"\n : \"checkbox\"\n const [controlType, setControlType] =\n React.useState<OptionCardControlType>(groupControlType)\n const ctx = React.useMemo<OptionCardContextValue>(\n () => ({ controlType, registerType: setControlType }),\n [controlType]\n )\n\n const childArray = React.Children.toArray(children)\n const hasContentChild = childArray.some((c) => isPart(c, OptionCardContent))\n const media = childArray.filter((c) => isPart(c, OptionCardMedia))\n const rest = childArray.filter((c) => !isPart(c, OptionCardMedia))\n const content = hasContentChild ? (\n rest\n ) : (\n <OptionCardContent>\n <OptionCardTitle>{rest}</OptionCardTitle>\n </OptionCardContent>\n )\n\n const body = (\n <>\n {media}\n {content}\n </>\n )\n\n if (inGroup) {\n return (\n <OptionCardContext.Provider value={ctx}>\n <ToggleGroupPrimitive.Item\n ref={ref}\n data-slot=\"option-card\"\n {...{ [SLOT_ATTR]: \"option-card\" }}\n value={value ?? fallbackId}\n className={mergeClasses(styles.card, className)}\n {...props}\n >\n {body}\n </ToggleGroupPrimitive.Item>\n </OptionCardContext.Provider>\n )\n }\n\n const standaloneRole = controlType === \"switch\" ? \"switch\" : \"checkbox\"\n\n return (\n <OptionCardContext.Provider value={ctx}>\n <TogglePrimitive.Root\n ref={ref}\n data-slot=\"option-card\"\n {...{ [SLOT_ATTR]: \"option-card\" }}\n pressed={currentPressed}\n onPressedChange={handlePressedChange}\n role={standaloneRole}\n aria-checked={currentPressed}\n aria-pressed={undefined}\n className={mergeClasses(styles.card, className)}\n {...props}\n >\n {body}\n </TogglePrimitive.Root>\n </OptionCardContext.Provider>\n )\n }\n)\n"],"names":["DEFAULT_LAYOUT","MISSING_VALUE_WARNING","OptionCardGroupContext","React","OptionCardContext","useStyles","makeZenithStyles","shorthands","tokens.spacingGroup1","tokens.spacingElement3","tokens.radiusLg","tokens.textSm","tokens.leadingSm","tokens.fontWeightNormal","tokens.grayA12","tokens.accentA8","tokens.semAccentSoft","SLOT_ATTR","tokens.semAccentSolid","tokens.semAccentLight","tokens.spacingElement2","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.textXs","tokens.leadingXs","tokens.grayA11","tokens.accentA7","tokens.accentContrast","tokens.grayA3","tokens.grayContrast","CheckIcon","props","jsx","RadioGlyph","styles","CheckboxGlyph","SwitchGlyph","OptionCardGroup","className","layout","ref","ToggleGroupPrimitive.Root","mergeClasses","OptionCardControl","type","card","register","resolved","OptionCardMedia","variant","OptionCardTitle","OptionCardDescription","hasControl","children","c","OptionCardContent","jsxs","isPart","node","parts","OptionCard","value","pressed","defaultPressed","onPressedChange","group","inGroup","fallbackId","internalPressed","setInternalPressed","isControlled","currentPressed","handlePressedChange","next","groupControlType","controlType","setControlType","ctx","childArray","hasContentChild","media","rest","body","Fragment","ToggleGroupPrimitive.Item","standaloneRole","TogglePrimitive.Root"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"option-card.js","sources":["../../../src/components/option-card/option-card.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\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\nconst DEFAULT_LAYOUT = \"grid\" as const\n\nconst MISSING_VALUE_WARNING =\n \"OptionCard: a card inside an OptionCardGroup is missing a `value`. \" +\n \"Give each card a unique `value` so it can be selected and controlled.\"\n\n/** The trailing control glyph an {@link OptionCard} shows for its selected state. */\nexport type OptionCardControlType = \"radio\" | \"checkbox\" | \"switch\" | \"none\"\n\nexport type OptionCardLayout = \"grid\" | \"row\" | \"column\"\n\n// ── Group context ──────────────────────────────────────────────────────────\ntype OptionCardGroupContextValue = {\n type?: \"single\" | \"multiple\"\n layout: OptionCardLayout\n}\nconst OptionCardGroupContext =\n React.createContext<OptionCardGroupContextValue | null>(null)\n\n// ── Card context ───────────────────────────────────────────────────────────\ntype OptionCardContextValue = {\n controlType: OptionCardControlType\n registerType: (type: OptionCardControlType) => void\n}\nconst OptionCardContext = React.createContext<OptionCardContextValue | null>(\n null\n)\n\n// ── Styles ─────────────────────────────────────────────────────────────────\n\nconst useStyles = makeZenithStyles({\n // Group layouts\n group: {\n // The GROUP only lays out. v1's group base class is literally \"\" -- every border, padding and\n // interaction style below used to live here, copied from v1's CARD class onto the wrong element,\n // while `styles.card` and `styles[layout]` were read but never declared. See make-styles.ts for\n // why tsc accepted that for as long as it did.\n display: \"grid\",\n ...shorthands.gap(tokens.spacingGroup1),\n },\n\n // v1: grid-cols-[repeat(auto-fit,minmax(200px,1fr))]\n grid: {\n gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\",\n },\n // v1: grid-flow-col auto-cols-fr -- equal-width columns in one non-wrapping row, so options read\n // as equal-weight peers regardless of their content.\n row: {\n gridAutoFlow: \"column\",\n gridAutoColumns: \"minmax(0, 1fr)\",\n },\n // v1: plain `grid` with no template. One column, stacked.\n column: {},\n\n card: {\n position: \"relative\",\n display: \"flex\",\n alignItems: \"center\",\n // v1 gap-3 = 0.75rem. No token: the semantic scale has no 0.75rem step.\n ...shorthands.gap(tokens.spacingElement3),\n overflow: \"hidden\",\n ...shorthands.borderRadius(tokens.radiusLg),\n // Not currentColor: that picked up this rule's `color: grayA12` and painted a near-black\n // edge. The predecessor's bare `border` resolved to a subtle grey; grayA6 is its match.\n ...shorthands.border(\"1px\", \"solid\", tokens.grayA6),\n ...shorthands.paddingInline(tokens.spacingElement3),\n ...shorthands.paddingBlock(\"0.375rem\"),\n textAlign: \"left\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n fontWeight: tokens.fontWeightNormal,\n color: tokens.grayA12,\n backgroundColor: \"transparent\",\n transitionProperty: \"color, background-color, border-color, box-shadow\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n cursor: \"pointer\",\n userSelect: \"none\",\n height: \"auto\",\n minWidth: \"0\",\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.accentA8,\n },\n \":disabled, &[data-disabled]\": {\n pointerEvents: \"none\",\n opacity: 0.5,\n },\n \"&[data-state='on']\": {\n backgroundColor: tokens.accentSoft,\n ...shorthands.borderColor(tokens.accentA8),\n },\n [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-radio-outer\"]`]: {\n ...shorthands.borderColor(tokens.accentSolid),\n },\n [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-radio-dot\"]`]: {\n opacity: 1,\n },\n [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-checkbox-outer\"]`]: {\n ...shorthands.borderColor(\"transparent\"),\n backgroundColor: tokens.accentSolid,\n },\n [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-checkbox-check\"]`]: {\n opacity: 1,\n },\n [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-switch-track\"]`]: {\n backgroundColor: tokens.accentSolid,\n },\n [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-switch-thumb\"]`]: {\n transform: \"translateX(calc(100% - 1px))\",\n },\n },\n\n // Media\n mediaRoot: {\n flexShrink: 0,\n },\n mediaIcon: {\n display: \"grid\",\n width: \"2.5rem\",\n height: \"2.5rem\",\n placeContent: \"center\",\n alignSelf: \"start\",\n ...shorthands.borderRadius(tokens.radiusLg),\n backgroundColor: tokens.accentSoft,\n color: tokens.accentLight,\n \"& svg\": {\n width: \"1.25rem\",\n height: \"1.25rem\",\n },\n },\n mediaIllustration: {\n position: \"relative\",\n aspectRatio: \"1 / 1\",\n alignSelf: \"stretch\",\n overflow: \"hidden\",\n \"& svg\": {\n position: \"absolute\",\n ...shorthands.inset(0),\n width: \"100%\",\n height: \"100%\",\n },\n \"& img\": {\n position: \"absolute\",\n ...shorthands.inset(0),\n width: \"100%\",\n height: \"100%\",\n objectFit: \"contain\",\n },\n },\n\n // Content\n content: {\n display: \"grid\",\n minWidth: 0,\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n gridAutoRows: \"min-content\",\n alignItems: \"center\",\n columnGap: tokens.spacingElement2,\n paddingTop: tokens.spacingElement1,\n paddingBottom: tokens.spacingElement1,\n [`&:has([${SLOT_ATTR}=\"option-card-control\"])`]: {\n gridTemplateColumns: \"1fr auto\",\n },\n },\n\n // Title\n title: {\n gridColumnStart: 1,\n gridRowStart: 1,\n minWidth: 0,\n alignSelf: \"center\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n fontWeight: tokens.fontWeightSemibold,\n },\n\n // Description\n description: {\n gridColumnStart: 1,\n gridRowStart: 2,\n minWidth: 0,\n overflowWrap: \"break-word\",\n fontSize: tokens.textXs,\n lineHeight: tokens.leadingXs,\n fontWeight: tokens.fontWeightNormal,\n color: tokens.grayA11,\n },\n\n // Control\n control: {\n gridColumnStart: 2,\n gridRowStart: 1,\n alignSelf: \"center\",\n justifySelf: \"end\",\n },\n\n // Radio glyph\n radioOuter: {\n display: \"grid\",\n width: \"1rem\",\n height: \"1rem\",\n flexShrink: 0,\n placeContent: \"center\",\n borderRadius: \"9999px\",\n ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n backgroundColor: tokens.accentSoft,\n transitionProperty: \"border-color\",\n transitionDuration: \"150ms\",\n },\n radioDot: {\n width: \"0.5rem\",\n height: \"0.5rem\",\n borderRadius: \"9999px\",\n backgroundColor: tokens.accentSolid,\n opacity: 0,\n transitionProperty: \"opacity\",\n transitionDuration: \"150ms\",\n },\n\n // Checkbox glyph\n checkboxOuter: {\n display: \"grid\",\n width: \"1rem\",\n height: \"1rem\",\n flexShrink: 0,\n placeContent: \"center\",\n ...shorthands.borderRadius(\"4px\"),\n ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n backgroundColor: tokens.accentSoft,\n color: tokens.accentContrast,\n transitionProperty: \"background-color, border-color\",\n transitionDuration: \"150ms\",\n },\n checkboxCheck: {\n width: \"0.75rem\",\n height: \"0.75rem\",\n opacity: 0,\n transitionProperty: \"opacity\",\n transitionDuration: \"150ms\",\n },\n\n // Switch glyph\n switchTrack: {\n display: \"inline-flex\",\n height: \"1.25rem\",\n width: \"2.125rem\",\n flexShrink: 0,\n alignItems: \"center\",\n borderRadius: \"9999px\",\n ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n backgroundColor: tokens.grayA3,\n transitionProperty: \"background-color\",\n transitionDuration: \"150ms\",\n },\n switchThumb: {\n display: \"block\",\n width: \"1rem\",\n height: \"1rem\",\n transform: \"translateX(1px)\",\n borderRadius: \"9999px\",\n backgroundColor: tokens.grayContrast,\n // v1 shadow-xs; no shadow tokens in this package.\n boxShadow: \"0 1px 2px 0 #0000000d\",\n transitionProperty: \"transform\",\n transitionDuration: \"150ms\",\n },\n})\n\n// ── Control Glyphs ─────────────────────────────────────────────────────────\n\nconst CheckIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n </svg>\n)\n\nconst RadioGlyph = () => {\n const styles = useStyles()\n return (\n <span\n className={styles.radioOuter}\n {...{ [SLOT_ATTR]: \"option-card-radio-outer\" }}\n >\n <span\n className={styles.radioDot}\n {...{ [SLOT_ATTR]: \"option-card-radio-dot\" }}\n />\n </span>\n )\n}\n\nconst CheckboxGlyph = () => {\n const styles = useStyles()\n return (\n <span\n className={styles.checkboxOuter}\n {...{ [SLOT_ATTR]: \"option-card-checkbox-outer\" }}\n >\n <CheckIcon\n className={styles.checkboxCheck}\n {...{ [SLOT_ATTR]: \"option-card-checkbox-check\" }}\n />\n </span>\n )\n}\n\nconst SwitchGlyph = () => {\n const styles = useStyles()\n return (\n <span\n className={styles.switchTrack}\n {...{ [SLOT_ATTR]: \"option-card-switch-track\" }}\n >\n <span\n className={styles.switchThumb}\n {...{ [SLOT_ATTR]: \"option-card-switch-thumb\" }}\n />\n </span>\n )\n}\n\n// ── OptionCardGroup ────────────────────────────────────────────────────────\n\nexport type OptionCardGroupProps = React.ComponentProps<\n typeof ToggleGroupPrimitive.Root\n> & {\n layout?: OptionCardLayout\n}\n\nexport const OptionCardGroup = React.forwardRef<\n React.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n OptionCardGroupProps\n>(function OptionCardGroup(\n { className, layout = DEFAULT_LAYOUT, ...props },\n ref\n) {\n const styles = useStyles()\n\n return (\n <OptionCardGroupContext.Provider value={{ type: props.type, layout }}>\n <ToggleGroupPrimitive.Root\n ref={ref}\n data-slot=\"option-card-group\"\n {...{ [SLOT_ATTR]: \"option-card-group\" }}\n data-layout={layout}\n {...(props.type === \"single\" ? { role: \"radiogroup\" } : {})}\n className={mergeClasses(styles.group, styles[layout], className)}\n {...props}\n />\n </OptionCardGroupContext.Provider>\n )\n})\n\n// ── OptionCardControl ──────────────────────────────────────────────────────\n\nexport type OptionCardControlProps = React.ComponentProps<\"span\"> & {\n type?: OptionCardControlType\n}\n\nexport const OptionCardControl = React.forwardRef<\n HTMLSpanElement,\n OptionCardControlProps\n>(function OptionCardControl({ className, type, ...props }, ref) {\n const styles = useStyles()\n const card = React.useContext(OptionCardContext)\n const register = card?.registerType\n\n React.useEffect(() => {\n if (type && register) register(type)\n }, [type, register])\n\n const resolved = type ?? card?.controlType ?? \"checkbox\"\n if (resolved === \"none\") return null\n\n return (\n <span\n ref={ref}\n aria-hidden=\"true\"\n data-slot=\"option-card-control\"\n {...{ [SLOT_ATTR]: \"option-card-control\" }}\n className={mergeClasses(styles.control, className)}\n {...props}\n >\n {resolved === \"radio\" ? (\n <RadioGlyph />\n ) : resolved === \"switch\" ? (\n <SwitchGlyph />\n ) : (\n <CheckboxGlyph />\n )}\n </span>\n )\n})\n\n// ── OptionCardMedia ────────────────────────────────────────────────────────\n\nexport type OptionCardMediaVariant = \"icon\" | \"illustration\"\n\nexport type OptionCardMediaProps = React.ComponentProps<\"span\"> & {\n variant?: OptionCardMediaVariant\n}\n\nexport const OptionCardMedia = React.forwardRef<\n HTMLSpanElement,\n OptionCardMediaProps\n>(function OptionCardMedia({ className, variant = \"icon\", ...props }, ref) {\n const styles = useStyles()\n\n return (\n <span\n ref={ref}\n aria-hidden=\"true\"\n data-slot=\"option-card-media\"\n {...{ [SLOT_ATTR]: \"option-card-media\" }}\n data-variant={variant}\n className={mergeClasses(\n styles.mediaRoot,\n variant === \"illustration\"\n ? styles.mediaIllustration\n : styles.mediaIcon,\n className\n )}\n {...props}\n />\n )\n})\n\n// ── OptionCardTitle ────────────────────────────────────────────────────────\n\nexport type OptionCardTitleProps = React.ComponentProps<\"span\">\n\nexport const OptionCardTitle = React.forwardRef<\n HTMLSpanElement,\n OptionCardTitleProps\n>(function OptionCardTitle({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <span\n ref={ref}\n data-slot=\"option-card-title\"\n {...{ [SLOT_ATTR]: \"option-card-title\" }}\n className={mergeClasses(styles.title, className)}\n {...props}\n />\n )\n})\n\n// ── OptionCardDescription ──────────────────────────────────────────────────\n\nexport type OptionCardDescriptionProps = React.ComponentProps<\"span\">\n\nexport const OptionCardDescription = React.forwardRef<\n HTMLSpanElement,\n OptionCardDescriptionProps\n>(function OptionCardDescription({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <span\n ref={ref}\n data-slot=\"option-card-description\"\n {...{ [SLOT_ATTR]: \"option-card-description\" }}\n className={mergeClasses(styles.description, className)}\n {...props}\n />\n )\n})\n\n// ── OptionCardContent ──────────────────────────────────────────────────────\n\nexport type OptionCardContentProps = React.ComponentProps<\"span\">\n\nconst hasControl = (children: React.ReactNode) =>\n React.Children.toArray(children).some(\n (c) => React.isValidElement(c) && c.type === OptionCardControl\n )\n\nexport const OptionCardContent = React.forwardRef<\n HTMLSpanElement,\n OptionCardContentProps\n>(function OptionCardContent({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <span\n ref={ref}\n data-slot=\"option-card-content\"\n {...{ [SLOT_ATTR]: \"option-card-content\" }}\n className={mergeClasses(styles.content, className)}\n {...props}\n >\n {children}\n {!hasControl(children) && <OptionCardControl />}\n </span>\n )\n})\n\n// ── OptionCard ─────────────────────────────────────────────────────────────\n\nexport type OptionCardProps = Omit<\n React.ComponentProps<\"button\">,\n \"onChange\" | \"title\"\n> & {\n /** Value of this option. Required inside an {@link OptionCardGroup}. */\n value?: string\n /** Controlled selected state for a standalone (group-less) card. */\n pressed?: boolean\n /** Uncontrolled default selected state for a standalone card. */\n defaultPressed?: boolean\n /** Fired when a standalone card is toggled. */\n onPressedChange?: (pressed: boolean) => void\n}\n\nconst isPart = (node: React.ReactNode, ...parts: React.ElementType[]) =>\n React.isValidElement(node) && parts.includes(node.type as React.ElementType)\n\nexport const OptionCard = React.forwardRef<HTMLButtonElement, OptionCardProps>(\n function OptionCard(\n {\n className,\n children,\n value,\n pressed,\n defaultPressed,\n onPressedChange,\n ...props\n },\n ref\n ) {\n const styles = useStyles()\n const group = React.useContext(OptionCardGroupContext)\n const inGroup = group !== null\n\n const fallbackId = React.useId()\n if (\n process.env.NODE_ENV !== \"production\" &&\n inGroup &&\n value === undefined\n ) {\n console.warn(MISSING_VALUE_WARNING)\n }\n\n const [internalPressed, setInternalPressed] = React.useState(\n defaultPressed ?? false\n )\n const isControlled = pressed !== undefined\n const currentPressed = isControlled ? pressed : internalPressed\n const handlePressedChange = (next: boolean) => {\n if (!isControlled) setInternalPressed(next)\n onPressedChange?.(next)\n }\n\n const groupControlType: OptionCardControlType = inGroup\n ? group.type === \"multiple\"\n ? \"checkbox\"\n : \"radio\"\n : \"checkbox\"\n const [controlType, setControlType] =\n React.useState<OptionCardControlType>(groupControlType)\n const ctx = React.useMemo<OptionCardContextValue>(\n () => ({ controlType, registerType: setControlType }),\n [controlType]\n )\n\n const childArray = React.Children.toArray(children)\n const hasContentChild = childArray.some((c) => isPart(c, OptionCardContent))\n const media = childArray.filter((c) => isPart(c, OptionCardMedia))\n const rest = childArray.filter((c) => !isPart(c, OptionCardMedia))\n const content = hasContentChild ? (\n rest\n ) : (\n <OptionCardContent>\n <OptionCardTitle>{rest}</OptionCardTitle>\n </OptionCardContent>\n )\n\n const body = (\n <>\n {media}\n {content}\n </>\n )\n\n if (inGroup) {\n return (\n <OptionCardContext.Provider value={ctx}>\n <ToggleGroupPrimitive.Item\n ref={ref}\n data-slot=\"option-card\"\n {...{ [SLOT_ATTR]: \"option-card\" }}\n value={value ?? fallbackId}\n className={mergeClasses(styles.card, className)}\n {...props}\n >\n {body}\n </ToggleGroupPrimitive.Item>\n </OptionCardContext.Provider>\n )\n }\n\n const standaloneRole = controlType === \"switch\" ? \"switch\" : \"checkbox\"\n\n return (\n <OptionCardContext.Provider value={ctx}>\n <TogglePrimitive.Root\n ref={ref}\n data-slot=\"option-card\"\n {...{ [SLOT_ATTR]: \"option-card\" }}\n pressed={currentPressed}\n onPressedChange={handlePressedChange}\n role={standaloneRole}\n aria-checked={currentPressed}\n aria-pressed={undefined}\n className={mergeClasses(styles.card, className)}\n {...props}\n >\n {body}\n </TogglePrimitive.Root>\n </OptionCardContext.Provider>\n )\n }\n)\n"],"names":["DEFAULT_LAYOUT","MISSING_VALUE_WARNING","OptionCardGroupContext","React","OptionCardContext","useStyles","makeZenithStyles","shorthands","tokens.spacingGroup1","tokens.spacingElement3","tokens.radiusLg","tokens.grayA6","tokens.textSm","tokens.leadingSm","tokens.fontWeightNormal","tokens.grayA12","tokens.accentA8","tokens.accentSoft","SLOT_ATTR","tokens.accentSolid","tokens.accentLight","tokens.spacingElement2","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.textXs","tokens.leadingXs","tokens.grayA11","tokens.accentA7","tokens.accentContrast","tokens.grayA3","tokens.grayContrast","CheckIcon","props","jsx","RadioGlyph","styles","CheckboxGlyph","SwitchGlyph","OptionCardGroup","className","layout","ref","ToggleGroupPrimitive.Root","mergeClasses","OptionCardControl","type","card","register","resolved","OptionCardMedia","variant","OptionCardTitle","OptionCardDescription","hasControl","children","c","OptionCardContent","jsxs","isPart","node","parts","OptionCard","value","pressed","defaultPressed","onPressedChange","group","inGroup","fallbackId","internalPressed","setInternalPressed","isControlled","currentPressed","handlePressedChange","next","groupControlType","controlType","setControlType","ctx","childArray","hasContentChild","media","rest","body","Fragment","ToggleGroupPrimitive.Item","standaloneRole","TogglePrimitive.Root"],"mappings":"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"}
|
|
@@ -28,23 +28,23 @@ const Y = [
|
|
|
28
28
|
"warning",
|
|
29
29
|
"success",
|
|
30
30
|
"error"
|
|
31
|
-
], p = "--zenith-pill-bg", d = "--zenith-pill-fg",
|
|
31
|
+
], p = "--zenith-pill-bg", d = "--zenith-pill-fg", h = "--zenith-pill-bd", a = "--zenith-pill-hov", u = (e) => W(e) ? D : G, t = (e, o) => `var(--zenith-${u(e)}-${e}-${o})`, _ = (e, o) => `var(--zenith-${u(e)}-${e}-${o})`, j = {
|
|
32
32
|
soft: (e) => ({
|
|
33
33
|
[p]: t(e, "soft"),
|
|
34
34
|
[d]: t(e, "light"),
|
|
35
|
-
[
|
|
35
|
+
[h]: "transparent",
|
|
36
36
|
[a]: t(e, "soft-hover")
|
|
37
37
|
}),
|
|
38
38
|
solid: (e) => ({
|
|
39
39
|
[p]: t(e, "solid"),
|
|
40
40
|
[d]: t(e, "contrast"),
|
|
41
|
-
[
|
|
41
|
+
[h]: "transparent",
|
|
42
42
|
[a]: t(e, "solid-hover")
|
|
43
43
|
}),
|
|
44
44
|
surface: (e) => ({
|
|
45
45
|
[p]: t(e, "surface"),
|
|
46
46
|
[d]: t(e, "light"),
|
|
47
|
-
[
|
|
47
|
+
[h]: _(e, "a6"),
|
|
48
48
|
[a]: t(e, "surface-hover")
|
|
49
49
|
})
|
|
50
50
|
}, H = N({
|
|
@@ -65,7 +65,7 @@ const Y = [
|
|
|
65
65
|
transitionProperty: "color, box-shadow, background-color",
|
|
66
66
|
// NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one
|
|
67
67
|
// custom property; `border` and a later `borderColor` would both survive.
|
|
68
|
-
...L.border("1px", "solid", `var(${
|
|
68
|
+
...L.border("1px", "solid", `var(${h})`),
|
|
69
69
|
// The whole point: one rule each, colour supplied per instance.
|
|
70
70
|
backgroundColor: `var(${p})`,
|
|
71
71
|
color: `var(${d})`,
|
|
@@ -108,7 +108,7 @@ const Y = [
|
|
|
108
108
|
color: S = "accent",
|
|
109
109
|
variant: y = "soft",
|
|
110
110
|
disabled: r,
|
|
111
|
-
onRemove:
|
|
111
|
+
onRemove: m,
|
|
112
112
|
onClick: i,
|
|
113
113
|
children: b,
|
|
114
114
|
...x
|
|
@@ -132,7 +132,7 @@ const Y = [
|
|
|
132
132
|
className: R(
|
|
133
133
|
n.root,
|
|
134
134
|
s && n.interactive,
|
|
135
|
-
|
|
135
|
+
m && n.hasRemove,
|
|
136
136
|
r && n.disabled,
|
|
137
137
|
o
|
|
138
138
|
),
|
|
@@ -140,13 +140,13 @@ const Y = [
|
|
|
140
140
|
...x,
|
|
141
141
|
children: [
|
|
142
142
|
b,
|
|
143
|
-
|
|
143
|
+
m && // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon
|
|
144
144
|
// fallback all live in the lib, not inline.
|
|
145
145
|
/* @__PURE__ */ z(
|
|
146
146
|
F,
|
|
147
147
|
{
|
|
148
148
|
className: n.removeSize,
|
|
149
|
-
onClick:
|
|
149
|
+
onClick: m,
|
|
150
150
|
disabled: r
|
|
151
151
|
}
|
|
152
152
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pill.js","sources":["../../../src/components/pill/pill.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\n\n/**\n * Pill — same colour-matrix collapse as Badge, plus a hover background.\n *\n * v1 enumerates 19 colours x 3 styles as 57 `compoundVariants`, each a distinct class string\n * built by interpolation (`volt-bg-${color}-soft`), which Tailwind's scanner cannot see and\n * `safelist.css` exists to force into existence. The hover state made that 57 more per-colour\n * rules. Here the colour is a VALUE, not part of a class name: the four atoms below read four\n * custom properties, the component sets those inline from the `color` prop, and a single `:hover`\n * atom reads the hover background. Total rules: one small set per style variant — 9 colours' worth\n * of rules cover all 19 x 3 combinations.\n */\n\nconst COLORS = [\n \"blue\",\n \"sky\",\n \"mint\",\n \"lime\",\n \"green\",\n \"teal\",\n \"cyan\",\n \"indigo\",\n \"purple\",\n \"pink\",\n \"red\",\n \"orange\",\n \"yellow\",\n \"bronze\",\n \"gray\",\n \"accent\",\n \"warning\",\n \"success\",\n \"error\",\n] as const\n\nexport type PillColor = (typeof COLORS)[number]\nexport type PillVariant = \"soft\" | \"solid\" | \"surface\"\n\n/** The four slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--zenith-pill-bg\"\nconst FG = \"--zenith-pill-fg\"\nconst BD = \"--zenith-pill-bd\"\nconst HOV = \"--zenith-pill-hov\"\n\n/**\n * The namespace fix — same shape as Badge's. Pill has no `neutral` alias of its own (its\n * gray-when-disabled resolution already happens in the component body, before `VARIANT_SLOTS` is\n * called — `color` here is always the already-resolved family), so no extra resolve step is needed\n * before classifying it.\n */\nconst namespaceFor = (family: string): string =>\n isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: PillColor, slot: string): string =>\n `var(--zenith-${namespaceFor(color)}-sem-${color}-${slot})`\nconst primitive = (color: PillColor, step: string): string =>\n `var(--zenith-${namespaceFor(color)}-${color}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 57-entry compound matrix: it is\n * data about three variants, not about 57 combinations. Text uses the `light` semantic slot, which\n * is Pill's one departure from Badge (Badge uses `default`).\n */\nconst VARIANT_SLOTS: Record<\n PillVariant,\n (color: PillColor) => Record<string, string>\n> = {\n soft: (c) => ({\n [BG]: semantic(c, \"soft\"),\n [FG]: semantic(c, \"light\"),\n [BD]: \"transparent\",\n [HOV]: semantic(c, \"soft-hover\"),\n }),\n solid: (c) => ({\n [BG]: semantic(c, \"solid\"),\n [FG]: semantic(c, \"contrast\"),\n [BD]: \"transparent\",\n [HOV]: semantic(c, \"solid-hover\"),\n }),\n surface: (c) => ({\n [BG]: semantic(c, \"surface\"),\n [FG]: semantic(c, \"light\"),\n [BD]: primitive(c, \"a6\"),\n [HOV]: semantic(c, \"surface-hover\"),\n }),\n}\n\nconst useStyles = makeZenithStyles({\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n // v1 `h-6` — a fixed height, not a minimum.\n height: \"1.5rem\",\n gap: tokens.spacingElement1,\n whiteSpace: \"nowrap\",\n flexShrink: 0,\n overflow: \"hidden\",\n fontSize: tokens.textXs,\n lineHeight: tokens.leadingXs,\n fontWeight: tokens.fontWeightBold,\n paddingInline: tokens.spacingElement2,\n borderRadius: tokens.radiusMd,\n transitionProperty: \"color, box-shadow, background-color\",\n // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one\n // custom property; `border` and a later `borderColor` would both survive.\n ...shorthands.border(\"1px\", \"solid\", `var(${BD})`),\n // The whole point: one rule each, colour supplied per instance.\n backgroundColor: `var(${BG})`,\n color: `var(${FG})`,\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.accentA8,\n },\n // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.\n \"& > svg\": {\n // Literals, not tokens.spacingGroup2: that happens to be 1rem, but a spacing token has no\n // business describing a dimension. The scale has no size family — noted rather than faked.\n width: \"1rem\",\n height: \"1rem\",\n flexShrink: 0,\n pointerEvents: \"none\",\n },\n },\n interactive: {\n cursor: \"pointer\",\n // The one hover rule. It reads the fourth custom property, line-picked per colour and variant\n // by VARIANT_SLOTS — never per-colour hover rules.\n \":hover\": { backgroundColor: `var(${HOV})` },\n },\n hasRemove: {\n // v1's `pr-1` when a clear button is present.\n paddingRight: tokens.spacingElement1,\n },\n disabled: {\n pointerEvents: \"none\",\n },\n removeSize: {\n // v1's `size-4` on the composed ClearButton.\n width: tokens.spacingGroup2,\n height: tokens.spacingGroup2,\n },\n})\n\nexport type PillProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n color?: PillColor\n /**\n * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute.\n * Retrocompat is not a requirement here, so the collision is fixed rather than inherited.\n */\n variant?: PillVariant\n disabled?: boolean\n onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n {\n className,\n color = \"accent\",\n variant = \"soft\",\n disabled,\n onRemove,\n onClick,\n children,\n ...props\n },\n ref\n) {\n const styles = useStyles()\n\n // v1 resolves to gray when disabled and only makes the pill interactive when it has an onClick.\n const resolvedColor: PillColor = disabled ? \"gray\" : color\n\n // A decorative family can still arrive from an expression the build cannot see, so this has to\n // be re-evaluated every commit (WP2B2 — the hook closes over this render's resolved value) — but\n // it is the RESOLVED family that decides, and the five core families Pill offers (accent, gray,\n // warning, success, error) need no palette sheet at all.\n useZenithPaletteTokensFor(resolvedColor)\n const interactive = !!onClick && !disabled\n\n // The hover slot is only meaningful while interactive — v1 attaches its hover background class\n // (`interactive && hoverStyleClasses[...]`) only then, so drop it from the inline properties\n // otherwise. Setting it unconditionally would be harmless but would claim a hover state that\n // cannot be reached.\n const slot = VARIANT_SLOTS[variant](resolvedColor)\n if (!interactive) delete slot[HOV]\n\n return (\n <span\n ref={ref}\n data-slot=\"pill\"\n {...{ [SLOT_ATTR]: \"pill\" }}\n data-disabled={disabled || undefined}\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n onClick={onClick}\n onKeyDown={\n interactive\n ? (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault()\n onClick?.(e as unknown as React.MouseEvent<HTMLSpanElement>)\n }\n }\n : undefined\n }\n className={mergeClasses(\n styles.root,\n interactive && styles.interactive,\n onRemove && styles.hasRemove,\n disabled && styles.disabled,\n className\n )}\n style={{ ...slot } as React.CSSProperties}\n {...props}\n >\n {children}\n {onRemove && (\n // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon\n // fallback all live in the lib, not inline.\n <ClearButton\n className={styles.removeSize}\n onClick={onRemove}\n disabled={disabled}\n />\n )}\n </span>\n )\n})\n\nexport { COLORS as PILL_COLORS }\n"],"names":["COLORS","BG","FG","BD","HOV","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","color","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeZenithStyles","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightBold","tokens.spacingElement2","tokens.radiusMd","shorthands","tokens.accentA8","tokens.spacingGroup2","Pill","React","className","variant","disabled","onRemove","onClick","children","props","ref","styles","resolvedColor","useZenithPaletteTokensFor","interactive","jsxs","SLOT_ATTR","e","mergeClasses","jsx","ClearButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pill.js","sources":["../../../src/components/pill/pill.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\n\n/** Pill — same colour-matrix collapse as Badge, plus a hover background. */\n\nconst COLORS = [\n \"blue\",\n \"sky\",\n \"mint\",\n \"lime\",\n \"green\",\n \"teal\",\n \"cyan\",\n \"indigo\",\n \"purple\",\n \"pink\",\n \"red\",\n \"orange\",\n \"yellow\",\n \"bronze\",\n \"gray\",\n \"accent\",\n \"warning\",\n \"success\",\n \"error\",\n] as const\n\nexport type PillColor = (typeof COLORS)[number]\nexport type PillVariant = \"soft\" | \"solid\" | \"surface\"\n\n/** The four slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--zenith-pill-bg\"\nconst FG = \"--zenith-pill-fg\"\nconst BD = \"--zenith-pill-bd\"\nconst HOV = \"--zenith-pill-hov\"\n\n/**\n * The namespace fix — same shape as Badge's. Pill has no `neutral` alias of its own (its\n * gray-when-disabled resolution already happens in the component body, before `VARIANT_SLOTS` is\n * called — `color` here is always the already-resolved family), so no extra resolve step is needed\n * before classifying it.\n */\nconst namespaceFor = (family: string): string =>\n isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: PillColor, slot: string): string =>\n `var(--zenith-${namespaceFor(color)}-${color}-${slot})`\nconst primitive = (color: PillColor, step: string): string =>\n `var(--zenith-${namespaceFor(color)}-${color}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 57-entry compound matrix: it is\n * data about three variants, not about 57 combinations. Text uses the `light` semantic slot, which\n * is Pill's one departure from Badge (Badge uses `default`).\n */\nconst VARIANT_SLOTS: Record<\n PillVariant,\n (color: PillColor) => Record<string, string>\n> = {\n soft: (c) => ({\n [BG]: semantic(c, \"soft\"),\n [FG]: semantic(c, \"light\"),\n [BD]: \"transparent\",\n [HOV]: semantic(c, \"soft-hover\"),\n }),\n solid: (c) => ({\n [BG]: semantic(c, \"solid\"),\n [FG]: semantic(c, \"contrast\"),\n [BD]: \"transparent\",\n [HOV]: semantic(c, \"solid-hover\"),\n }),\n surface: (c) => ({\n [BG]: semantic(c, \"surface\"),\n [FG]: semantic(c, \"light\"),\n [BD]: primitive(c, \"a6\"),\n [HOV]: semantic(c, \"surface-hover\"),\n }),\n}\n\nconst useStyles = makeZenithStyles({\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n // v1 `h-6` — a fixed height, not a minimum.\n height: \"1.5rem\",\n gap: tokens.spacingElement1,\n whiteSpace: \"nowrap\",\n flexShrink: 0,\n overflow: \"hidden\",\n fontSize: tokens.textXs,\n lineHeight: tokens.leadingXs,\n fontWeight: tokens.fontWeightBold,\n paddingInline: tokens.spacingElement2,\n borderRadius: tokens.radiusMd,\n transitionProperty: \"color, box-shadow, background-color\",\n // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one\n // custom property; `border` and a later `borderColor` would both survive.\n ...shorthands.border(\"1px\", \"solid\", `var(${BD})`),\n // The whole point: one rule each, colour supplied per instance.\n backgroundColor: `var(${BG})`,\n color: `var(${FG})`,\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.accentA8,\n },\n // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.\n \"& > svg\": {\n // Literals, not tokens.spacingGroup2: that happens to be 1rem, but a spacing token has no\n // business describing a dimension. The scale has no size family — noted rather than faked.\n width: \"1rem\",\n height: \"1rem\",\n flexShrink: 0,\n pointerEvents: \"none\",\n },\n },\n interactive: {\n cursor: \"pointer\",\n // The one hover rule. It reads the fourth custom property, line-picked per colour and variant\n // by VARIANT_SLOTS — never per-colour hover rules.\n \":hover\": { backgroundColor: `var(${HOV})` },\n },\n hasRemove: {\n // v1's `pr-1` when a clear button is present.\n paddingRight: tokens.spacingElement1,\n },\n disabled: {\n pointerEvents: \"none\",\n },\n removeSize: {\n // v1's `size-4` on the composed ClearButton.\n width: tokens.spacingGroup2,\n height: tokens.spacingGroup2,\n },\n})\n\nexport type PillProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n color?: PillColor\n /**\n * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute.\n * Retrocompat is not a requirement here, so the collision is fixed rather than inherited.\n */\n variant?: PillVariant\n disabled?: boolean\n onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n {\n className,\n color = \"accent\",\n variant = \"soft\",\n disabled,\n onRemove,\n onClick,\n children,\n ...props\n },\n ref\n) {\n const styles = useStyles()\n\n // v1 resolves to gray when disabled and only makes the pill interactive when it has an onClick.\n const resolvedColor: PillColor = disabled ? \"gray\" : color\n\n // A decorative family can still arrive from an expression the build cannot see, so this has to\n // be re-evaluated every commit (WP2B2 — the hook closes over this render's resolved value) — but\n // it is the RESOLVED family that decides, and the five core families Pill offers (accent, gray,\n // warning, success, error) need no palette sheet at all.\n useZenithPaletteTokensFor(resolvedColor)\n const interactive = !!onClick && !disabled\n\n // The hover slot is only meaningful while interactive — v1 attaches its hover background class\n // (`interactive && hoverStyleClasses[...]`) only then, so drop it from the inline properties\n // otherwise. Setting it unconditionally would be harmless but would claim a hover state that\n // cannot be reached.\n const slot = VARIANT_SLOTS[variant](resolvedColor)\n if (!interactive) delete slot[HOV]\n\n return (\n <span\n ref={ref}\n data-slot=\"pill\"\n {...{ [SLOT_ATTR]: \"pill\" }}\n data-disabled={disabled || undefined}\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n onClick={onClick}\n onKeyDown={\n interactive\n ? (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault()\n onClick?.(e as unknown as React.MouseEvent<HTMLSpanElement>)\n }\n }\n : undefined\n }\n className={mergeClasses(\n styles.root,\n interactive && styles.interactive,\n onRemove && styles.hasRemove,\n disabled && styles.disabled,\n className\n )}\n style={{ ...slot } as React.CSSProperties}\n {...props}\n >\n {children}\n {onRemove && (\n // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon\n // fallback all live in the lib, not inline.\n <ClearButton\n className={styles.removeSize}\n onClick={onRemove}\n disabled={disabled}\n />\n )}\n </span>\n )\n})\n\nexport { COLORS as PILL_COLORS }\n"],"names":["COLORS","BG","FG","BD","HOV","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","color","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeZenithStyles","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightBold","tokens.spacingElement2","tokens.radiusMd","shorthands","tokens.accentA8","tokens.spacingGroup2","Pill","React","className","variant","disabled","onRemove","onClick","children","props","ref","styles","resolvedColor","useZenithPaletteTokensFor","interactive","jsxs","SLOT_ATTR","e","mergeClasses","jsx","ClearButton"],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as e, jsxs as g } from "react/jsx-runtime";
|
|
2
2
|
import * as d from "react";
|
|
3
3
|
import { Root as h, Item as b, Indicator as x } from "../../vendor/.bun/@radix-ui_react-radio-group@1.3.8_2b23df507bdda662/vendor/@radix-ui/react-radio-group/dist/index.js";
|
|
4
|
-
import { mergeClasses as
|
|
4
|
+
import { mergeClasses as m, SLOT_ATTR as s, shorthands as t } from "@epilot/zenith-runtime/v1";
|
|
5
5
|
import { makeZenithStyles as C } from "../../styles/make-styles.js";
|
|
6
|
-
import {
|
|
7
|
-
const
|
|
6
|
+
import { accentContrast as l, errorA10 as k, focusRing as u, errorSoft as w, grayA3 as p, accentSolid as R, accentOnSoft as y, accentSoft as v, errorA8 as S, accentA7 as I, spacingElement3 as j } from "../../tokens/index.js";
|
|
7
|
+
const A = d.forwardRef(
|
|
8
8
|
function(o, r) {
|
|
9
9
|
return /* @__PURE__ */ e(
|
|
10
10
|
"svg",
|
|
@@ -25,7 +25,7 @@ const j = d.forwardRef(
|
|
|
25
25
|
), f = C({
|
|
26
26
|
group: {
|
|
27
27
|
display: "grid",
|
|
28
|
-
...t.gap(
|
|
28
|
+
...t.gap(j)
|
|
29
29
|
},
|
|
30
30
|
item: {
|
|
31
31
|
boxSizing: "border-box",
|
|
@@ -38,7 +38,7 @@ const j = d.forwardRef(
|
|
|
38
38
|
height: "1rem",
|
|
39
39
|
flexShrink: 0,
|
|
40
40
|
borderRadius: "9999px",
|
|
41
|
-
...t.border("1px", "solid",
|
|
41
|
+
...t.border("1px", "solid", I),
|
|
42
42
|
backgroundColor: v,
|
|
43
43
|
color: y,
|
|
44
44
|
// Tailwind `shadow-xs` — literal per CONVENTIONS B7
|
|
@@ -57,7 +57,7 @@ const j = d.forwardRef(
|
|
|
57
57
|
},
|
|
58
58
|
"&[data-disabled]": {
|
|
59
59
|
cursor: "not-allowed",
|
|
60
|
-
backgroundColor:
|
|
60
|
+
backgroundColor: p,
|
|
61
61
|
...t.borderColor("transparent")
|
|
62
62
|
},
|
|
63
63
|
"&[data-state='checked']": {
|
|
@@ -65,7 +65,7 @@ const j = d.forwardRef(
|
|
|
65
65
|
color: l
|
|
66
66
|
},
|
|
67
67
|
"&[data-state='checked'][data-disabled]": {
|
|
68
|
-
backgroundColor:
|
|
68
|
+
backgroundColor: p
|
|
69
69
|
},
|
|
70
70
|
"&[aria-invalid='true'], &[data-invalid]": {
|
|
71
71
|
backgroundColor: w,
|
|
@@ -95,7 +95,7 @@ const j = d.forwardRef(
|
|
|
95
95
|
transform: "translate(-50%, -50%)",
|
|
96
96
|
pointerEvents: "none"
|
|
97
97
|
}
|
|
98
|
-
}),
|
|
98
|
+
}), z = d.forwardRef(function({ className: o, ...r }, i) {
|
|
99
99
|
const a = f();
|
|
100
100
|
return /* @__PURE__ */ e(
|
|
101
101
|
h,
|
|
@@ -103,11 +103,11 @@ const j = d.forwardRef(
|
|
|
103
103
|
ref: i,
|
|
104
104
|
"data-slot": "radio-group",
|
|
105
105
|
[s]: "radio-group",
|
|
106
|
-
className:
|
|
106
|
+
className: m(a.group, o),
|
|
107
107
|
...r
|
|
108
108
|
}
|
|
109
109
|
);
|
|
110
|
-
}),
|
|
110
|
+
}), D = d.forwardRef(function({ className: o, children: r, ...i }, a) {
|
|
111
111
|
const n = f();
|
|
112
112
|
return /* @__PURE__ */ g(
|
|
113
113
|
b,
|
|
@@ -115,7 +115,7 @@ const j = d.forwardRef(
|
|
|
115
115
|
ref: a,
|
|
116
116
|
"data-slot": "radio-group-item",
|
|
117
117
|
[s]: "radio-group-item",
|
|
118
|
-
className:
|
|
118
|
+
className: m(n.item, o),
|
|
119
119
|
...i,
|
|
120
120
|
children: [
|
|
121
121
|
/* @__PURE__ */ e(
|
|
@@ -124,7 +124,7 @@ const j = d.forwardRef(
|
|
|
124
124
|
"data-slot": "radio-group-indicator",
|
|
125
125
|
[s]: "radio-group-indicator",
|
|
126
126
|
className: n.indicator,
|
|
127
|
-
children: /* @__PURE__ */ e(
|
|
127
|
+
children: /* @__PURE__ */ e(A, { className: n.icon })
|
|
128
128
|
}
|
|
129
129
|
),
|
|
130
130
|
r
|
|
@@ -133,7 +133,7 @@ const j = d.forwardRef(
|
|
|
133
133
|
);
|
|
134
134
|
});
|
|
135
135
|
export {
|
|
136
|
-
|
|
137
|
-
|
|
136
|
+
z as RadioGroup,
|
|
137
|
+
D as RadioGroupItem
|
|
138
138
|
};
|
|
139
139
|
//# sourceMappingURL=radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\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\nconst CircleIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n function CircleIcon(props, ref) {\n return (\n <svg\n ref={ref}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n </svg>\n )\n }\n)\n\nconst useStyles = makeZenithStyles({\n group: {\n display: \"grid\",\n ...shorthands.gap(tokens.spacingElement3),\n },\n item: {\n boxSizing: \"border-box\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n aspectRatio: \"1 / 1\",\n width: \"1rem\",\n height: \"1rem\",\n flexShrink: 0,\n borderRadius: \"9999px\",\n ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n backgroundColor: tokens.
|
|
1
|
+
{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\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\nconst CircleIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n function CircleIcon(props, ref) {\n return (\n <svg\n ref={ref}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n </svg>\n )\n }\n)\n\nconst useStyles = makeZenithStyles({\n group: {\n display: \"grid\",\n ...shorthands.gap(tokens.spacingElement3),\n },\n item: {\n boxSizing: \"border-box\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n aspectRatio: \"1 / 1\",\n width: \"1rem\",\n height: \"1rem\",\n flexShrink: 0,\n borderRadius: \"9999px\",\n ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n backgroundColor: tokens.accentSoft,\n color: tokens.accentOnSoft,\n // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n boxShadow: \"0 1px 2px 0 #0000000d\",\n transitionProperty: \"color, box-shadow\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \"@media (prefers-reduced-motion: reduce)\": {\n transitionDuration: \"0.01ms\",\n },\n \":focus-visible\": {\n outlineOffset: \"2px\",\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineColor: tokens.focusRing,\n },\n \"&[data-disabled]\": {\n cursor: \"not-allowed\",\n backgroundColor: tokens.grayA3,\n ...shorthands.borderColor(\"transparent\"),\n },\n \"&[data-state='checked']\": {\n backgroundColor: tokens.accentSolid,\n color: tokens.accentContrast,\n },\n \"&[data-state='checked'][data-disabled]\": {\n backgroundColor: tokens.grayA3,\n },\n \"&[aria-invalid='true'], &[data-invalid]\": {\n backgroundColor: tokens.errorSoft,\n ...shorthands.borderColor(tokens.errorA8),\n outlineColor: tokens.focusRing,\n },\n \"&[data-state='checked'][aria-invalid='true'], &[data-state='checked'][data-invalid]\":\n {\n backgroundColor: tokens.errorA10,\n ...shorthands.borderColor(\"transparent\"),\n },\n },\n indicator: {\n position: \"relative\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"100%\",\n height: \"100%\",\n },\n icon: {\n color: tokens.accentContrast,\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n width: \"0.5rem\",\n height: \"0.5rem\",\n transform: \"translate(-50%, -50%)\",\n pointerEvents: \"none\",\n },\n})\n\nexport type RadioGroupProps = React.ComponentProps<\n typeof RadioGroupPrimitive.Root\n>\n\nexport const RadioGroup = React.forwardRef<\n React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n RadioGroupProps\n>(function RadioGroup({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <RadioGroupPrimitive.Root\n ref={ref}\n data-slot=\"radio-group\"\n {...{ [SLOT_ATTR]: \"radio-group\" }}\n className={mergeClasses(styles.group, className)}\n {...props}\n />\n )\n})\n\nexport type RadioGroupItemProps = React.ComponentProps<\n typeof RadioGroupPrimitive.Item\n>\n\nexport const RadioGroupItem = React.forwardRef<\n React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n RadioGroupItemProps\n>(function RadioGroupItem({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <RadioGroupPrimitive.Item\n ref={ref}\n data-slot=\"radio-group-item\"\n {...{ [SLOT_ATTR]: \"radio-group-item\" }}\n className={mergeClasses(styles.item, className)}\n {...props}\n >\n <RadioGroupPrimitive.Indicator\n data-slot=\"radio-group-indicator\"\n {...{ [SLOT_ATTR]: \"radio-group-indicator\" }}\n className={styles.indicator}\n >\n <CircleIcon className={styles.icon} />\n </RadioGroupPrimitive.Indicator>\n {children}\n </RadioGroupPrimitive.Item>\n )\n})\n"],"names":["CircleIcon","React","props","ref","jsx","useStyles","makeZenithStyles","shorthands","tokens.spacingElement3","tokens.accentA7","tokens.accentSoft","tokens.accentOnSoft","tokens.focusRing","tokens.grayA3","tokens.accentSolid","tokens.accentContrast","tokens.errorSoft","tokens.errorA8","tokens.errorA10","RadioGroup","className","styles","RadioGroupPrimitive.Root","SLOT_ATTR","mergeClasses","RadioGroupItem","children","jsxs","RadioGroupPrimitive.Item","RadioGroupPrimitive.Indicator"],"mappings":"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"}
|