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

package/dist/components/select/select.js

@@ -1,12 +1,14 @@
-import { jsx as t, jsxs as h } from "react/jsx-runtime";
-import * as s from "react";
-import { Root as D, Portal as B, Content as L, Viewport as $, Group as k, Item as P, ItemIndicator as W, ItemText as z, Label as X, ScrollDownButton as j, ScrollUpButton as E, Separator as M, Value as U, Trigger as Y, Icon as O } from "../../vendor/.bun/@radix-ui_react-select@2.2.6_2b23df507bdda662/vendor/@radix-ui/react-select/dist/index.js";
-import { SLOT_ATTR as i, mergeClasses as p, shorthands as c } from "@epilot/zenith-runtime/v1";
-import { useAppearanceAttributes as Z } from "../appearance-boundary/appearance-boundary.js";
+import { jsx as t, jsxs as w } from "react/jsx-runtime";
+import * as c from "react";
+import { Root as L, Portal as B, Content as k, Viewport as $, Group as P, Item as W, ItemIndicator as X, ItemText as z, Label as E, ScrollDownButton as j, ScrollUpButton as M, Separator as Y, Value as O, Trigger as U, Icon as Z } from "../../vendor/.bun/@radix-ui_react-select@2.2.6_2b23df507bdda662/vendor/@radix-ui/react-select/dist/index.js";
+import { SLOT_ATTR as i, mergeClasses as m, shorthands as d } from "@epilot/zenith-runtime/v1";
+import { useAppearanceAttributes as V } from "../appearance-boundary/appearance-boundary.js";
 import { useDensity as F } from "../density-provider/density-provider.js";
 import { makeZenithStyles as G } from "../../styles/make-styles.js";
-import { spacingElement1 as g, graySoft as H, gray11 as V, fontWeightSemibold as _, leadingXs as J, textXs as K, spacingElement2 as d, grayA11 as f, accentA3 as S, grayA12 as y, leadingSm as b, textSm as v, selectItemPaddingY as I, selectItemPaddingLeft as Q, body as tt, accentA11 as C, focusRing as q, accentSoft as et, grayA8 as ot, radiusMd as R, radius2xl as rt, selectContentGap as at, selectContentPadding as nt, radiusLg as it } from "../../tokens/index.js";
-const lt = (n) => /* @__PURE__ */ t(
+import { boxModel as s, nativeControl as H } from "../../styles/host-reset.js";
+import { OVERLAY_Z_INDEX as _ } from "../../styles/overlay-layer.js";
+import { spacingElement1 as u, graySoft as J, gray11 as K, fontWeightSemibold as Q, leadingXs as tt, textXs as et, spacingElement2 as p, grayA11 as h, accentA3 as y, grayA12 as b, leadingSm as v, textSm as I, selectItemPaddingY as C, selectItemPaddingLeft as ot, body as rt, accentA11 as R, focusRing as q, accentSoft as at, grayA8 as nt, radiusMd as N, radius2xl as it, selectContentGap as lt, selectContentPadding as st, radiusLg as ct } from "../../tokens/index.js";
+const dt = (n) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -17,7 +19,7 @@ const lt = (n) => /* @__PURE__ */ t(
     ...n,
     children: /* @__PURE__ */ t("path", { d: "M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z" })
   }
-), st = (n) => /* @__PURE__ */ t(
+), pt = (n) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -28,7 +30,7 @@ const lt = (n) => /* @__PURE__ */ t(
     ...n,
     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" })
   }
-), ct = (n) => /* @__PURE__ */ t(
+), mt = (n) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -50,17 +52,18 @@ const lt = (n) => /* @__PURE__ */ t(
     ...n,
     children: /* @__PURE__ */ t("path", { d: "M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z" })
   }
-), u = G({
+), f = G({
   trigger: {
+    ...H,
     display: "flex",
     width: "100%",
     alignItems: "center",
     justifyContent: "space-between",
-    ...c.gap(d),
-    ...c.borderRadius(it),
+    ...d.gap(p),
+    ...d.borderRadius(ct),
     backgroundColor: "transparent",
-    fontSize: v,
-    lineHeight: b,
+    fontSize: I,
+    lineHeight: v,
     outlineStyle: "none",
     whiteSpace: "normal",
     textAlign: "left",
@@ -82,7 +85,7 @@ const lt = (n) => /* @__PURE__ */ t(
       opacity: 0.5
     },
     "&[data-placeholder]": {
-      color: ot
+      color: nt
     },
     "& svg": {
       pointerEvents: "none",
@@ -91,7 +94,7 @@ const lt = (n) => /* @__PURE__ */ t(
     [`& [${i}="select-value"]`]: {
       display: "flex",
       alignItems: "center",
-      ...c.gap(d),
+      ...d.gap(p),
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap"
@@ -118,9 +121,10 @@ const lt = (n) => /* @__PURE__ */ t(
     flexShrink: 0
   },
   triggerIcon: {
+    ...s,
     width: "1.5rem",
     height: "1.5rem",
-    color: f,
+    color: h,
     transitionProperty: "transform",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -129,6 +133,7 @@ const lt = (n) => /* @__PURE__ */ t(
     }
   },
   triggerClear: {
+    ...s,
     position: "absolute",
     right: "2.75rem",
     paddingTop: "0.125rem",
@@ -139,11 +144,11 @@ const lt = (n) => /* @__PURE__ */ t(
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "transparent",
-    color: C,
+    color: R,
     cursor: "pointer",
-    ...c.borderRadius(R),
+    ...d.borderRadius(N),
     ":hover": {
-      backgroundColor: et
+      backgroundColor: at
     },
     ":focus-visible": {
       outlineColor: q,
@@ -153,26 +158,28 @@ const lt = (n) => /* @__PURE__ */ t(
     }
   },
   triggerClearIcon: {
+    ...s,
     width: "1.25rem",
     height: "1.25rem",
-    color: C
+    color: R
   },
   popup: {
-    backgroundColor: tt,
+    ...s,
+    backgroundColor: rt,
     // DENSITY-SPEC.md §2.3 — popup padding/gap only; the slide-in animation offsets a few lines
     // below deliberately keep the plain (non-density) `spacingElement2` value: they are not in the
     // approved matrix, and re-using the same primitive for two unrelated purposes doesn't make the
     // animation distance a density lever too.
-    ...c.padding(nt),
-    ...c.gap(at),
-    color: y,
+    ...d.padding(st),
+    ...d.gap(lt),
+    color: b,
     position: "relative",
-    zIndex: 50,
+    zIndex: _,
     transformOrigin: "var(--radix-select-content-transform-origin)",
     overflowX: "hidden",
     overflowY: "auto",
-    ...c.borderRadius(rt),
-    ...c.border("1px", "solid", "transparent"),
+    ...d.borderRadius(it),
+    ...d.border("1px", "solid", "transparent"),
     // v1 shadow-md
     boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
     outlineStyle: "none",
@@ -182,6 +189,9 @@ const lt = (n) => /* @__PURE__ */ t(
       animationIterationCount: "1",
       "&[data-state='open']": {
         animationDuration: "0.01ms"
+      },
+      "&[data-state='closed']": {
+        animationDuration: "0.01ms"
       }
     },
     "&[data-state='open']": {
@@ -196,7 +206,7 @@ const lt = (n) => /* @__PURE__ */ t(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(-${d}) scale(0.95)`
+          transform: `translateY(-${p}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -205,7 +215,7 @@ const lt = (n) => /* @__PURE__ */ t(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(${d}) scale(0.95)`
+          transform: `translateX(${p}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -214,7 +224,7 @@ const lt = (n) => /* @__PURE__ */ t(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(-${d}) scale(0.95)`
+          transform: `translateX(-${p}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -223,7 +233,7 @@ const lt = (n) => /* @__PURE__ */ t(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(${d}) scale(0.95)`
+          transform: `translateY(${p}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -238,39 +248,41 @@ const lt = (n) => /* @__PURE__ */ t(
     }
   },
   viewport: {
+    ...s,
     width: "100%",
     minWidth: "var(--radix-select-trigger-width)",
-    scrollMarginTop: g,
-    scrollMarginBottom: g
+    scrollMarginTop: u,
+    scrollMarginBottom: u
   },
   item: {
+    ...s,
     position: "relative",
     display: "flex",
     width: "100%",
     cursor: "default",
     userSelect: "none",
     alignItems: "center",
-    ...c.gap(d),
-    ...c.borderRadius(R),
+    ...d.gap(p),
+    ...d.borderRadius(N),
     // DENSITY-SPEC.md §2.3 — left padding and vertical padding are density levers; right padding
     // stays a fixed 32px at every tier (reserves the check-indicator's space, not modeled in
     // density.yaml).
-    paddingLeft: Q,
+    paddingLeft: ot,
     paddingRight: "2rem",
-    paddingTop: I,
-    paddingBottom: I,
-    fontSize: v,
-    lineHeight: b,
-    color: y,
+    paddingTop: C,
+    paddingBottom: C,
+    fontSize: I,
+    lineHeight: v,
+    color: b,
     outlineStyle: "none",
     ":not(:first-child)": {
       marginTop: "0.125rem"
     },
     "&[data-highlighted]": {
-      backgroundColor: S
+      backgroundColor: y
     },
     "&[data-state='checked']": {
-      backgroundColor: S
+      backgroundColor: y
     },
     "&[data-disabled]": {
       pointerEvents: "none",
@@ -281,12 +293,13 @@ const lt = (n) => /* @__PURE__ */ t(
       flexShrink: 0
     },
     "& svg:not([class*='text-'])": {
-      color: f
+      color: h
     }
   },
   itemIndicatorWrapper: {
+    ...s,
     position: "absolute",
-    right: d,
+    right: p,
     display: "flex",
     width: "1rem",
     height: "1rem",
@@ -294,28 +307,33 @@ const lt = (n) => /* @__PURE__ */ t(
     justifyContent: "center"
   },
   itemIndicatorIcon: {
+    ...s,
+    // An inline svg sits on the text baseline and grows its wrapper by the line-height gap.
+    display: "block",
     width: "1rem",
     height: "1rem",
-    color: f
+    color: h
   },
   label: {
-    paddingLeft: d,
-    paddingRight: d,
+    ...s,
+    paddingLeft: p,
+    paddingRight: p,
     paddingTop: "0.375rem",
     paddingBottom: "0.375rem",
-    fontSize: K,
-    lineHeight: J,
-    fontWeight: _,
-    color: V
+    fontSize: et,
+    lineHeight: tt,
+    fontWeight: Q,
+    color: K
   },
   separator: {
+    ...s,
     pointerEvents: "none",
-    marginLeft: `calc(-1 * ${g})`,
-    marginRight: `calc(-1 * ${g})`,
-    marginTop: g,
-    marginBottom: g,
+    marginLeft: `calc(-1 * ${u})`,
+    marginRight: `calc(-1 * ${u})`,
+    marginTop: u,
+    marginBottom: u,
     height: "1px",
-    backgroundColor: H
+    backgroundColor: J
   },
   scrollArrow: {
     display: "flex",
@@ -324,23 +342,26 @@ const lt = (n) => /* @__PURE__ */ t(
     justifyContent: "center"
   },
   scrollArrowUp: {
-    paddingBottom: g
+    ...s,
+    paddingBottom: u
   },
   scrollArrowDown: {
-    paddingTop: g
+    ...s,
+    paddingTop: u
   },
   scrollArrowIcon: {
+    ...s,
     width: "1.5rem",
     height: "1.5rem"
   },
   scrollArrowDownIcon: {
     transform: "rotate(180deg)"
   }
-}), St = s.forwardRef(function(o, e) {
-  return /* @__PURE__ */ t(D, { "data-slot": "select", ...o });
-}), yt = s.forwardRef(function({ className: o, ...e }, a) {
+}), Ct = c.forwardRef(function(o, e) {
+  return /* @__PURE__ */ t(L, { "data-slot": "select", ...o });
+}), Rt = c.forwardRef(function({ className: o, ...e }, a) {
   return /* @__PURE__ */ t(
-    k,
+    P,
     {
       ref: a,
       "data-slot": "select-group",
@@ -349,9 +370,9 @@ const lt = (n) => /* @__PURE__ */ t(
       ...e
     }
   );
-}), bt = s.forwardRef(function({ className: o, ...e }, a) {
+}), qt = c.forwardRef(function({ className: o, ...e }, a) {
   return /* @__PURE__ */ t(
-    U,
+    O,
     {
       ref: a,
       "data-slot": "select-value",
@@ -360,33 +381,33 @@ const lt = (n) => /* @__PURE__ */ t(
       ...e
     }
   );
-}), vt = s.forwardRef(function({ className: o, children: e, ...a }, l) {
-  const r = u();
-  return /* @__PURE__ */ h(
-    Y,
+}), Nt = c.forwardRef(function({ className: o, children: e, ...a }, l) {
+  const r = f();
+  return /* @__PURE__ */ w(
+    U,
     {
       ref: l,
       "data-slot": "select-trigger",
       [i]: "select-trigger",
-      className: p(r.trigger, o),
+      className: m(r.trigger, o),
       ...a,
       children: [
         e,
         /* @__PURE__ */ t(
-          O,
+          Z,
           {
             asChild: !0,
             "data-slot": "select-icon",
             [i]: "select-icon",
             className: r.triggerIconWrapper,
-            children: /* @__PURE__ */ t(ct, { className: r.triggerIcon })
+            children: /* @__PURE__ */ t(mt, { className: r.triggerIcon })
           }
         )
       ]
     }
   );
-}), It = s.forwardRef(function({ className: o, onClick: e, ...a }, l) {
-  const r = u();
+}), Tt = c.forwardRef(function({ className: o, onClick: e, ...a }, l) {
+  const r = f();
   return /* @__PURE__ */ t(
     "span",
     {
@@ -395,102 +416,102 @@ const lt = (n) => /* @__PURE__ */ t(
       tabIndex: 0,
       "data-slot": "select-trigger-clear",
       [i]: "select-trigger-clear",
-      className: p(r.triggerClear, o),
-      onPointerDown: (m) => {
-        m.preventDefault(), m.stopPropagation();
+      className: m(r.triggerClear, o),
+      onPointerDown: (g) => {
+        g.preventDefault(), g.stopPropagation();
       },
-      onClick: (m) => {
-        m.preventDefault(), m.stopPropagation(), e == null || e(m);
+      onClick: (g) => {
+        g.preventDefault(), g.stopPropagation(), e == null || e(g);
       },
       ...a,
-      children: /* @__PURE__ */ t(lt, { className: r.triggerClearIcon })
+      children: /* @__PURE__ */ t(dt, { className: r.triggerClearIcon })
     }
   );
-}), Ct = s.forwardRef(function({
+}), At = c.forwardRef(function({
   className: o,
   children: e,
   position: a = "popper",
   align: l = "center",
   container: r,
-  ...m
-}, N) {
-  const w = u(), x = F(), A = Z();
-  return /* @__PURE__ */ t(B, { container: r, children: /* @__PURE__ */ h(
-    L,
+  ...g
+}, A) {
+  const x = f(), S = F(), D = V();
+  return /* @__PURE__ */ t(B, { container: r, children: /* @__PURE__ */ w(
+    k,
     {
-      ref: N,
+      ref: A,
       "data-slot": "select-content",
       [i]: "select-content",
-      ...x !== void 0 ? { "data-density": x } : {},
-      ...A,
+      ...S !== void 0 ? { "data-density": S } : {},
+      ...D,
       position: a,
       align: l,
-      className: p(w.popup, o),
-      ...m,
+      className: m(x.popup, o),
+      ...g,
       children: [
-        /* @__PURE__ */ t(dt, {}),
+        /* @__PURE__ */ t(gt, {}),
         /* @__PURE__ */ t(
           $,
           {
             "data-slot": "select-viewport",
             [i]: "select-viewport",
-            className: w.viewport,
+            className: x.viewport,
             children: e
           }
         ),
-        /* @__PURE__ */ t(pt, {})
+        /* @__PURE__ */ t(ut, {})
       ]
     }
   ) });
-}), qt = s.forwardRef(function({ className: o, ...e }, a) {
-  const l = u();
+}), Dt = c.forwardRef(function({ className: o, ...e }, a) {
+  const l = f();
   return /* @__PURE__ */ t(
-    X,
+    E,
     {
       ref: a,
       "data-slot": "select-label",
       [i]: "select-label",
-      className: p(l.label, o),
+      className: m(l.label, o),
       ...e
     }
   );
-}), Rt = s.forwardRef(function({ className: o, children: e, ...a }, l) {
-  const r = u();
-  return /* @__PURE__ */ h(
-    P,
+}), Lt = c.forwardRef(function({ className: o, children: e, ...a }, l) {
+  const r = f();
+  return /* @__PURE__ */ w(
+    W,
     {
       ref: l,
       "data-slot": "select-item",
       [i]: "select-item",
-      className: p(r.item, o),
+      className: m(r.item, o),
       ...a,
       children: [
-        /* @__PURE__ */ t("span", { className: r.itemIndicatorWrapper, children: /* @__PURE__ */ t(W, { children: /* @__PURE__ */ t(st, { className: r.itemIndicatorIcon }) }) }),
+        /* @__PURE__ */ t("span", { className: r.itemIndicatorWrapper, children: /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t(pt, { className: r.itemIndicatorIcon }) }) }),
         /* @__PURE__ */ t(z, { children: e })
       ]
     }
   );
-}), Tt = s.forwardRef(function({ className: o, ...e }, a) {
-  const l = u();
+}), Bt = c.forwardRef(function({ className: o, ...e }, a) {
+  const l = f();
   return /* @__PURE__ */ t(
-    M,
+    Y,
     {
       ref: a,
       "data-slot": "select-separator",
       [i]: "select-separator",
-      className: p(l.separator, o),
+      className: m(l.separator, o),
       ...e
     }
   );
-}), dt = s.forwardRef(function({ className: o, children: e, ...a }, l) {
-  const r = u();
+}), gt = c.forwardRef(function({ className: o, children: e, ...a }, l) {
+  const r = f();
   return /* @__PURE__ */ t(
-    E,
+    M,
     {
       ref: l,
       "data-slot": "select-scroll-up-button",
       [i]: "select-scroll-up-button",
-      className: p(
+      className: m(
         r.scrollArrow,
         r.scrollArrowUp,
         o
@@ -499,15 +520,15 @@ const lt = (n) => /* @__PURE__ */ t(
       children: e ?? /* @__PURE__ */ t(T, { className: r.scrollArrowIcon })
     }
   );
-}), pt = s.forwardRef(function({ className: o, children: e, ...a }, l) {
-  const r = u();
+}), ut = c.forwardRef(function({ className: o, children: e, ...a }, l) {
+  const r = f();
   return /* @__PURE__ */ t(
     j,
     {
       ref: l,
       "data-slot": "select-scroll-down-button",
       [i]: "select-scroll-down-button",
-      className: p(
+      className: m(
         r.scrollArrow,
         r.scrollArrowDown,
         o
@@ -516,7 +537,7 @@ const lt = (n) => /* @__PURE__ */ t(
       children: e ?? /* @__PURE__ */ t(
         T,
         {
-          className: p(
+          className: m(
             r.scrollArrowIcon,
             r.scrollArrowDownIcon
           )
@@ -526,16 +547,16 @@ const lt = (n) => /* @__PURE__ */ t(
   );
 });
 export {
-  St as Select,
-  Ct as SelectContent,
-  yt as SelectGroup,
-  Rt as SelectItem,
-  qt as SelectLabel,
-  pt as SelectScrollDownButton,
-  dt as SelectScrollUpButton,
-  Tt as SelectSeparator,
-  vt as SelectTrigger,
-  It as SelectTriggerClear,
-  bt as SelectValue
+  Ct as Select,
+  At as SelectContent,
+  Rt as SelectGroup,
+  Lt as SelectItem,
+  Dt as SelectLabel,
+  ut as SelectScrollDownButton,
+  gt as SelectScrollUpButton,
+  Bt as SelectSeparator,
+  Nt as SelectTrigger,
+  Tt as SelectTriggerClear,
+  qt as SelectValue
 };
 //# sourceMappingURL=select.js.map