@epilot/zenith-react 0.2.0-next.0 → 0.2.0-next.1

package/dist/components/option-card/option-card.js

@@ -1,21 +1,23 @@
-import { jsx as t, jsxs as q, Fragment as Y } from "react/jsx-runtime";
+import { jsx as t, jsxs as F, Fragment as J } from "react/jsx-runtime";
 import * as n from "react";
-import { Root as J } from "../../vendor/.bun/@radix-ui_react-toggle@1.1.10_2b23df507bdda662/vendor/@radix-ui/react-toggle/dist/index.js";
-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";
-import { mergeClasses as h, SLOT_ATTR as r, shorthands as s } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as tt } from "../../styles/make-styles.js";
-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";
-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(
+import { Root as K } from "../../vendor/.bun/@radix-ui_react-toggle@1.1.10_2b23df507bdda662/vendor/@radix-ui/react-toggle/dist/index.js";
+import { Item as Q, Root as tt } from "../../vendor/.bun/@radix-ui_react-toggle-group@1.1.11_2b23df507bdda662/vendor/@radix-ui/react-toggle-group/dist/index.js";
+import { mergeClasses as m, SLOT_ATTR as r, shorthands as s } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as ot } from "../../styles/make-styles.js";
+import { boxModel as l, nativeControl as rt } from "../../styles/host-reset.js";
+import { grayContrast as et, grayA3 as nt, accentContrast as it, accentSoft as C, accentSolid as b, grayA11 as at, fontWeightNormal as G, leadingXs as st, textXs as ct, fontWeightSemibold as dt, spacingElement1 as D, spacingElement2 as lt, accentLight as pt, accentA8 as P, grayA12 as ut, leadingSm as ht, textSm as mt, accentA7 as W, radiusLg as E, spacingElement3 as L, grayA6 as gt, spacingGroup1 as ft } from "../../tokens/index.js";
+const Ct = "grid", bt = "OptionCard: a card inside an OptionCardGroup is missing a `value`. Give each card a unique `value` so it can be selected and controlled.", M = n.createContext(null), S = n.createContext(
   null
-), p = tt({
+), u = ot({
   // Group layouts
   group: {
+    ...l,
     // The GROUP only lays out. v1's group base class is literally "" -- every border, padding and
     // interaction style below used to live here, copied from v1's CARD class onto the wrong element,
     // while `styles.card` and `styles[layout]` were read but never declared. See make-styles.ts for
     // why tsc accepted that for as long as it did.
     display: "grid",
-    ...s.gap(mt)
+    ...s.gap(ft)
   },
   // v1: grid-cols-[repeat(auto-fit,minmax(200px,1fr))]
   grid: {
@@ -30,23 +32,24 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
   // v1: plain `grid` with no template. One column, stacked.
   column: {},
   card: {
+    ...rt,
     position: "relative",
     display: "flex",
     alignItems: "center",
     // v1 gap-3 = 0.75rem. No token: the semantic scale has no 0.75rem step.
-    ...s.gap(E),
+    ...s.gap(L),
     overflow: "hidden",
-    ...s.borderRadius(W),
+    ...s.borderRadius(E),
     // Not currentColor: that picked up this rule's `color: grayA12` and painted a near-black
     // edge. The predecessor's bare `border` resolved to a subtle grey; grayA6 is its match.
-    ...s.border("1px", "solid", ht),
-    ...s.paddingInline(E),
+    ...s.border("1px", "solid", gt),
+    ...s.paddingInline(L),
     ...s.paddingBlock("0.375rem"),
     textAlign: "left",
-    fontSize: ut,
-    lineHeight: pt,
-    fontWeight: I,
-    color: lt,
+    fontSize: mt,
+    lineHeight: ht,
+    fontWeight: G,
+    color: ut,
     backgroundColor: "transparent",
     transitionProperty: "color, background-color, border-color, box-shadow",
     transitionDuration: "150ms",
@@ -59,31 +62,31 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: D
+      outlineColor: P
     },
     ":disabled, &[data-disabled]": {
       pointerEvents: "none",
       opacity: 0.5
     },
     "&[data-state='on']": {
-      backgroundColor: f,
-      ...s.borderColor(D)
+      backgroundColor: C,
+      ...s.borderColor(P)
     },
     [`&[data-state='on'] [${r}="option-card-radio-outer"]`]: {
-      ...s.borderColor(C)
+      ...s.borderColor(b)
     },
     [`&[data-state='on'] [${r}="option-card-radio-dot"]`]: {
       opacity: 1
     },
     [`&[data-state='on'] [${r}="option-card-checkbox-outer"]`]: {
       ...s.borderColor("transparent"),
-      backgroundColor: C
+      backgroundColor: b
     },
     [`&[data-state='on'] [${r}="option-card-checkbox-check"]`]: {
       opacity: 1
     },
     [`&[data-state='on'] [${r}="option-card-switch-track"]`]: {
-      backgroundColor: C
+      backgroundColor: b
     },
     [`&[data-state='on'] [${r}="option-card-switch-thumb"]`]: {
       transform: "translateX(calc(100% - 1px))"
@@ -94,14 +97,15 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
     flexShrink: 0
   },
   mediaIcon: {
+    ...l,
     display: "grid",
     width: "2.5rem",
     height: "2.5rem",
     placeContent: "center",
     alignSelf: "start",
-    ...s.borderRadius(W),
-    backgroundColor: f,
-    color: dt,
+    ...s.borderRadius(E),
+    backgroundColor: C,
+    color: pt,
     "& svg": {
       width: "1.25rem",
       height: "1.25rem"
@@ -128,6 +132,7 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
   },
   // Content
   content: {
+    ...l,
     display: "grid",
     minWidth: 0,
     flexGrow: 1,
@@ -135,15 +140,16 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
     flexBasis: "0%",
     gridAutoRows: "min-content",
     alignItems: "center",
-    columnGap: ct,
-    paddingTop: G,
-    paddingBottom: G,
+    columnGap: lt,
+    paddingTop: D,
+    paddingBottom: D,
     [`&:has([${r}="option-card-control"])`]: {
       gridTemplateColumns: "1fr auto"
     }
   },
   // Title
   title: {
+    ...l,
     gridColumnStart: 1,
     gridRowStart: 1,
     minWidth: 0,
@@ -151,18 +157,19 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
-    fontWeight: st
+    fontWeight: dt
   },
   // Description
   description: {
+    ...l,
     gridColumnStart: 1,
     gridRowStart: 2,
     minWidth: 0,
     overflowWrap: "break-word",
-    fontSize: at,
-    lineHeight: it,
-    fontWeight: I,
-    color: nt
+    fontSize: ct,
+    lineHeight: st,
+    fontWeight: G,
+    color: at
   },
   // Control
   control: {
@@ -173,41 +180,45 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
   },
   // Radio glyph
   radioOuter: {
+    ...l,
     display: "grid",
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
     placeContent: "center",
     borderRadius: "9999px",
-    ...s.border("1px", "solid", P),
-    backgroundColor: f,
+    ...s.border("1px", "solid", W),
+    backgroundColor: C,
     transitionProperty: "border-color",
     transitionDuration: "150ms"
   },
   radioDot: {
+    ...l,
     width: "0.5rem",
     height: "0.5rem",
     borderRadius: "9999px",
-    backgroundColor: C,
+    backgroundColor: b,
     opacity: 0,
     transitionProperty: "opacity",
     transitionDuration: "150ms"
   },
   // Checkbox glyph
   checkboxOuter: {
+    ...l,
     display: "grid",
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
     placeContent: "center",
     ...s.borderRadius("4px"),
-    ...s.border("1px", "solid", P),
-    backgroundColor: f,
-    color: et,
+    ...s.border("1px", "solid", W),
+    backgroundColor: C,
+    color: it,
     transitionProperty: "background-color, border-color",
     transitionDuration: "150ms"
   },
   checkboxCheck: {
+    ...l,
     width: "0.75rem",
     height: "0.75rem",
     opacity: 0,
@@ -216,6 +227,7 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
   },
   // Switch glyph
   switchTrack: {
+    ...l,
     display: "inline-flex",
     height: "1.25rem",
     width: "2.125rem",
@@ -223,23 +235,24 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
     alignItems: "center",
     borderRadius: "9999px",
     ...s.border("1px", "solid", "transparent"),
-    backgroundColor: rt,
+    backgroundColor: nt,
     transitionProperty: "background-color",
     transitionDuration: "150ms"
   },
   switchThumb: {
+    ...l,
     display: "block",
     width: "1rem",
     height: "1rem",
     transform: "translateX(1px)",
     borderRadius: "9999px",
-    backgroundColor: ot,
+    backgroundColor: et,
     // v1 shadow-xs; no shadow tokens in this package.
     boxShadow: "0 1px 2px 0 #0000000d",
     transitionProperty: "transform",
     transitionDuration: "150ms"
   }
-}), Ct = (o) => /* @__PURE__ */ t(
+}), xt = (o) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -249,8 +262,8 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
     ...o,
     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" })
   }
-), bt = () => {
-  const o = p();
+), yt = () => {
+  const o = u();
   return /* @__PURE__ */ t(
     "span",
     {
@@ -265,15 +278,15 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
       )
     }
   );
-}, xt = () => {
-  const o = p();
+}, wt = () => {
+  const o = u();
   return /* @__PURE__ */ t(
     "span",
     {
       className: o.checkboxOuter,
       [r]: "option-card-checkbox-outer",
       children: /* @__PURE__ */ t(
-        Ct,
+        xt,
         {
           className: o.checkboxCheck,
           [r]: "option-card-checkbox-check"
@@ -281,8 +294,8 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
       )
     }
   );
-}, yt = () => {
-  const o = p();
+}, kt = () => {
+  const o = u();
   return /* @__PURE__ */ t(
     "span",
     {
@@ -297,40 +310,40 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
       )
     }
   );
-}, It = n.forwardRef(function({ className: i, layout: e = gt, ...a }, c) {
-  const d = p();
-  return /* @__PURE__ */ t(F.Provider, { value: { type: a.type, layout: e }, children: /* @__PURE__ */ t(
-    Q,
+}, Pt = n.forwardRef(function({ className: i, layout: e = Ct, ...a }, c) {
+  const d = u();
+  return /* @__PURE__ */ t(M.Provider, { value: { type: a.type, layout: e }, children: /* @__PURE__ */ t(
+    tt,
     {
       ref: c,
       "data-slot": "option-card-group",
       [r]: "option-card-group",
       "data-layout": e,
       ...a.type === "single" ? { role: "radiogroup" } : {},
-      className: h(d.group, d[e], i),
+      className: m(d.group, d[e], i),
       ...a
     }
   ) });
 }), _ = n.forwardRef(function({ className: i, type: e, ...a }, c) {
-  const d = p(), l = n.useContext(k), m = l == null ? void 0 : l.registerType;
+  const d = u(), p = n.useContext(S), g = p == null ? void 0 : p.registerType;
   n.useEffect(() => {
-    e && m && m(e);
-  }, [e, m]);
-  const g = e ?? (l == null ? void 0 : l.controlType) ?? "checkbox";
-  return g === "none" ? null : /* @__PURE__ */ t(
+    e && g && g(e);
+  }, [e, g]);
+  const f = e ?? (p == null ? void 0 : p.controlType) ?? "checkbox";
+  return f === "none" ? null : /* @__PURE__ */ t(
     "span",
     {
       ref: c,
       "aria-hidden": "true",
       "data-slot": "option-card-control",
       [r]: "option-card-control",
-      className: h(d.control, i),
+      className: m(d.control, i),
       ...a,
-      children: g === "radio" ? /* @__PURE__ */ t(bt, {}) : g === "switch" ? /* @__PURE__ */ t(yt, {}) : /* @__PURE__ */ t(xt, {})
+      children: f === "radio" ? /* @__PURE__ */ t(yt, {}) : f === "switch" ? /* @__PURE__ */ t(kt, {}) : /* @__PURE__ */ t(wt, {})
     }
   );
-}), L = n.forwardRef(function({ className: i, variant: e = "icon", ...a }, c) {
-  const d = p();
+}), $ = n.forwardRef(function({ className: i, variant: e = "icon", ...a }, c) {
+  const d = u();
   return /* @__PURE__ */ t(
     "span",
     {
@@ -339,7 +352,7 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
       "data-slot": "option-card-media",
       [r]: "option-card-media",
       "data-variant": e,
-      className: h(
+      className: m(
         d.mediaRoot,
         e === "illustration" ? d.mediaIllustration : d.mediaIcon,
         i
@@ -347,110 +360,110 @@ const gt = "grid", ft = "OptionCard: a card inside an OptionCardGroup is missing
       ...a
     }
   );
-}), wt = n.forwardRef(function({ className: i, ...e }, a) {
-  const c = p();
+}), St = n.forwardRef(function({ className: i, ...e }, a) {
+  const c = u();
   return /* @__PURE__ */ t(
     "span",
     {
       ref: a,
       "data-slot": "option-card-title",
       [r]: "option-card-title",
-      className: h(c.title, i),
+      className: m(c.title, i),
       ...e
     }
   );
-}), Gt = n.forwardRef(function({ className: i, ...e }, a) {
-  const c = p();
+}), Wt = n.forwardRef(function({ className: i, ...e }, a) {
+  const c = u();
   return /* @__PURE__ */ t(
     "span",
     {
       ref: a,
       "data-slot": "option-card-description",
       [r]: "option-card-description",
-      className: h(c.description, i),
+      className: m(c.description, i),
       ...e
     }
   );
-}), kt = (o) => n.Children.toArray(o).some(
+}), vt = (o) => n.Children.toArray(o).some(
   (i) => n.isValidElement(i) && i.type === _
-), $ = n.forwardRef(function({ className: i, children: e, ...a }, c) {
-  const d = p();
-  return /* @__PURE__ */ q(
+), q = n.forwardRef(function({ className: i, children: e, ...a }, c) {
+  const d = u();
+  return /* @__PURE__ */ F(
     "span",
     {
       ref: c,
       "data-slot": "option-card-content",
       [r]: "option-card-content",
-      className: h(d.content, i),
+      className: m(d.content, i),
       ...a,
       children: [
         e,
-        !kt(e) && /* @__PURE__ */ t(_, {})
+        !vt(e) && /* @__PURE__ */ t(_, {})
       ]
     }
   );
-}), w = (o, ...i) => n.isValidElement(o) && i.includes(o.type), Dt = n.forwardRef(
+}), k = (o, ...i) => n.isValidElement(o) && i.includes(o.type), Et = n.forwardRef(
   function({
     className: i,
     children: e,
     value: a,
     pressed: c,
     defaultPressed: d,
-    onPressedChange: l,
-    ...m
-  }, g) {
-    const S = p(), R = n.useContext(F), b = R !== null, j = n.useId();
-    process.env.NODE_ENV !== "production" && b && a === void 0 && console.warn(ft);
-    const [B, M] = n.useState(
+    onPressedChange: p,
+    ...g
+  }, f) {
+    const v = u(), R = n.useContext(M), x = R !== null, j = n.useId();
+    process.env.NODE_ENV !== "production" && x && a === void 0 && console.warn(bt);
+    const [B, V] = n.useState(
       d ?? !1
-    ), v = c !== void 0, O = v ? c : B, V = (u) => {
-      v || M(u), l == null || l(u);
-    }, X = b ? R.type === "multiple" ? "checkbox" : "radio" : "checkbox", [x, z] = n.useState(X), T = n.useMemo(
-      () => ({ controlType: x, registerType: z }),
-      [x]
-    ), 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: [
-      H,
-      U ? N : /* @__PURE__ */ t($, { children: /* @__PURE__ */ t(wt, { children: N }) })
+    ), O = c !== void 0, T = O ? c : B, X = (h) => {
+      O || V(h), p == null || p(h);
+    }, z = x ? R.type === "multiple" ? "checkbox" : "radio" : "checkbox", [y, U] = n.useState(z), N = n.useMemo(
+      () => ({ controlType: y, registerType: U }),
+      [y]
+    ), w = n.Children.toArray(e), H = w.some((h) => k(h, q)), Z = w.filter((h) => k(h, $)), A = w.filter((h) => !k(h, $)), I = /* @__PURE__ */ F(J, { children: [
+      Z,
+      H ? A : /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(St, { children: A }) })
     ] });
-    if (b)
-      return /* @__PURE__ */ t(k.Provider, { value: T, children: /* @__PURE__ */ t(
-        K,
+    if (x)
+      return /* @__PURE__ */ t(S.Provider, { value: N, children: /* @__PURE__ */ t(
+        Q,
         {
-          ref: g,
+          ref: f,
           "data-slot": "option-card",
           [r]: "option-card",
           value: a ?? j,
-          className: h(S.card, i),
-          ...m,
-          children: A
+          className: m(v.card, i),
+          ...g,
+          children: I
         }
       ) });
-    const Z = x === "switch" ? "switch" : "checkbox";
-    return /* @__PURE__ */ t(k.Provider, { value: T, children: /* @__PURE__ */ t(
-      J,
+    const Y = y === "switch" ? "switch" : "checkbox";
+    return /* @__PURE__ */ t(S.Provider, { value: N, children: /* @__PURE__ */ t(
+      K,
       {
-        ref: g,
+        ref: f,
         "data-slot": "option-card",
         [r]: "option-card",
-        pressed: O,
-        onPressedChange: V,
-        role: Z,
-        "aria-checked": O,
+        pressed: T,
+        onPressedChange: X,
+        role: Y,
+        "aria-checked": T,
         "aria-pressed": void 0,
-        className: h(S.card, i),
-        ...m,
-        children: A
+        className: m(v.card, i),
+        ...g,
+        children: I
       }
     ) });
   }
 );
 export {
-  Dt as OptionCard,
-  $ as OptionCardContent,
+  Et as OptionCard,
+  q as OptionCardContent,
   _ as OptionCardControl,
-  Gt as OptionCardDescription,
-  It as OptionCardGroup,
-  L as OptionCardMedia,
-  wt as OptionCardTitle
+  Wt as OptionCardDescription,
+  Pt as OptionCardGroup,
+  $ as OptionCardMedia,
+  St as OptionCardTitle
 };
 //# sourceMappingURL=option-card.js.map