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

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -1,12 +1,14 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
 import * as s from "react";
-import { Root as M, CheckboxItem as T, ItemIndicator as R, Portal as S, Content as v, Group as k, Item as N, Label as q, RadioGroup as L, RadioItem as A, Separator as G, Sub as z, SubContent as W, SubTrigger as X, Trigger as B } from "../../vendor/.bun/@radix-ui_react-dropdown-menu@2.1.16_2b23df507bdda662/vendor/@radix-ui/react-dropdown-menu/dist/index.js";
-import { mergeClasses as m, SLOT_ATTR as c, shorthands as g } from "@epilot/zenith-runtime/v1";
-import { useAppearanceAttributes as C } from "../appearance-boundary/appearance-boundary.js";
-import { useDensity as D } from "../density-provider/density-provider.js";
-import { makeZenithStyles as $ } from "../../styles/make-styles.js";
-import { grayA11 as E, leadingXs as P, textXs as j, grayA3 as Y, spacingElement1 as l, fontWeightSemibold as Z, leadingSm as x, textSm as y, spacingElement2 as p, accentSoft as f, errorSoft as w, errorA8 as _, errorA11 as F, grayA12 as H, body as O, accentA11 as J, radiusMd as K, radiusXl as Q } from "../../tokens/index.js";
-const U = (r) => /* @__PURE__ */ e(
+import { Root as v, CheckboxItem as T, ItemIndicator as R, Portal as C, Content as k, Group as N, Item as q, Label as L, RadioGroup as A, RadioItem as G, Separator as X, Sub as z, SubContent as E, SubTrigger as W, Trigger as B } from "../../vendor/.bun/@radix-ui_react-dropdown-menu@2.1.16_2b23df507bdda662/vendor/@radix-ui/react-dropdown-menu/dist/index.js";
+import { mergeClasses as p, SLOT_ATTR as c, shorthands as f } from "@epilot/zenith-runtime/v1";
+import { useAppearanceAttributes as S } from "../appearance-boundary/appearance-boundary.js";
+import { useDensity as I } from "../density-provider/density-provider.js";
+import { makeZenithStyles as _ } from "../../styles/make-styles.js";
+import { boxModel as l, nativeControl as $ } from "../../styles/host-reset.js";
+import { OVERLAY_Z_INDEX as P } from "../../styles/overlay-layer.js";
+import { grayA11 as Y, leadingXs as Z, textXs as j, grayA3 as F, spacingElement1 as g, fontWeightSemibold as H, leadingSm as y, textSm as D, spacingElement2 as m, accentSoft as w, errorSoft as h, errorA8 as O, errorA11 as V, grayA12 as J, body as K, accentA11 as Q, radiusMd as U, radiusXl as oo } from "../../tokens/index.js";
+const to = (r) => /* @__PURE__ */ e(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -17,7 +19,7 @@ const U = (r) => /* @__PURE__ */ e(
     ...r,
     children: /* @__PURE__ */ e("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" })
   }
-), V = (r) => /* @__PURE__ */ e(
+), eo = (r) => /* @__PURE__ */ e(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -28,7 +30,7 @@ const U = (r) => /* @__PURE__ */ e(
     ...r,
     children: /* @__PURE__ */ e("path", { d: "M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z" })
   }
-), oo = (r) => /* @__PURE__ */ e(
+), no = (r) => /* @__PURE__ */ e(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -39,25 +41,41 @@ const U = (r) => /* @__PURE__ */ e(
     ...r,
     children: /* @__PURE__ */ e("path", { d: "M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" })
   }
-), u = $({
+), u = _({
+  // For the bare native `<button>` a Trigger/Close renders. Not applied under `asChild`, where the
+  // child owns its own element and two atom sets would race for the same properties.
+  triggerReset: {
+    ...$
+  },
   trigger: {
-    color: J
+    color: Q
   },
   portal: {
     display: "contents"
   },
   popup: {
-    backgroundColor: O,
-    color: H,
+    ...l,
+    backgroundColor: K,
+    color: J,
     minWidth: "10rem",
     overflow: "hidden",
-    ...g.borderRadius(Q),
-    ...g.padding(l),
+    ...f.borderRadius(oo),
+    ...f.padding(g),
     // v1 shadow-lg
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
     outlineStyle: "none",
-    zIndex: 50,
+    zIndex: P,
     transformOrigin: "var(--radix-dropdown-menu-content-transform-origin)",
+    "@media (prefers-reduced-motion: reduce)": {
+      animationDuration: "0.01ms",
+      animationIterationCount: "1",
+      "&[data-state='open']": {
+        animationDuration: "0.01ms"
+      },
+      "&[data-state='closed']": {
+        animationDuration: "0.01ms"
+      }
+    },
     "&[data-state='open']": {
       animationName: {
         from: { opacity: 0, transform: "scale(0.95)" },
@@ -70,7 +88,7 @@ const U = (r) => /* @__PURE__ */ e(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(-${p}) scale(0.95)`
+          transform: `translateY(-${m}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -79,7 +97,7 @@ const U = (r) => /* @__PURE__ */ e(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(${p}) scale(0.95)`
+          transform: `translateX(${m}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -88,7 +106,7 @@ const U = (r) => /* @__PURE__ */ e(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(-${p}) scale(0.95)`
+          transform: `translateX(-${m}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -97,7 +115,7 @@ const U = (r) => /* @__PURE__ */ e(
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(${p}) scale(0.95)`
+          transform: `translateY(${m}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -112,31 +130,32 @@ const U = (r) => /* @__PURE__ */ e(
     }
   },
   item: {
+    ...l,
     position: "relative",
     display: "flex",
     cursor: "pointer",
     userSelect: "none",
     alignItems: "center",
-    ...g.gap(p),
-    ...g.borderRadius(K),
-    paddingLeft: p,
-    paddingRight: p,
+    ...f.gap(m),
+    ...f.borderRadius(U),
+    paddingLeft: m,
+    paddingRight: m,
     paddingTop: "0.375rem",
     paddingBottom: "0.375rem",
-    fontSize: y,
-    lineHeight: x,
+    fontSize: D,
+    lineHeight: y,
     outlineStyle: "none",
     transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     ":hover": {
-      backgroundColor: f
+      backgroundColor: w
     },
     ":focus-visible": {
-      backgroundColor: f
+      backgroundColor: w
     },
     "&[data-highlighted]": {
-      backgroundColor: f
+      backgroundColor: w
     },
     "&[data-disabled]": {
       pointerEvents: "none",
@@ -150,30 +169,33 @@ const U = (r) => /* @__PURE__ */ e(
     }
   },
   itemInset: {
+    ...l,
     paddingLeft: "2rem"
   },
   itemDestructive: {
-    color: F,
+    color: V,
     ":hover": {
-      backgroundColor: w
+      backgroundColor: h
     },
     ":focus-visible": {
-      backgroundColor: w,
+      backgroundColor: h,
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: _
+      outlineColor: O
     },
     "&[data-highlighted]": {
-      backgroundColor: w
+      backgroundColor: h
     }
   },
   itemCheckboxRadio: {
+    ...l,
     paddingLeft: "2rem",
-    paddingRight: p
+    paddingRight: m
   },
   itemIndicatorWrapper: {
+    ...l,
     position: "absolute",
-    left: p,
+    left: m,
     display: "flex",
     height: "0.875rem",
     width: "0.875rem",
@@ -187,10 +209,11 @@ const U = (r) => /* @__PURE__ */ e(
   },
   subTrigger: {
     "&[data-state='open']": {
-      backgroundColor: f
+      backgroundColor: w
     }
   },
   subTriggerChevron: {
+    ...l,
     marginLeft: "auto",
     width: "1rem",
     height: "1rem",
@@ -198,34 +221,36 @@ const U = (r) => /* @__PURE__ */ e(
     pointerEvents: "none"
   },
   label: {
-    paddingLeft: p,
-    paddingRight: p,
+    ...l,
+    paddingLeft: m,
+    paddingRight: m,
     paddingTop: "0.375rem",
     paddingBottom: "0.375rem",
-    fontSize: y,
-    lineHeight: x,
-    fontWeight: Z
+    fontSize: D,
+    lineHeight: y,
+    fontWeight: H
   },
   separator: {
-    marginLeft: `calc(-1 * ${l})`,
-    marginRight: `calc(-1 * ${l})`,
-    marginTop: l,
-    marginBottom: l,
+    ...l,
+    marginLeft: `calc(-1 * ${g})`,
+    marginRight: `calc(-1 * ${g})`,
+    marginTop: g,
+    marginBottom: g,
     height: "1px",
-    backgroundColor: Y
+    backgroundColor: F
   },
   shortcut: {
     marginLeft: "auto",
     fontSize: j,
-    lineHeight: P,
+    lineHeight: Z,
     letterSpacing: "0.1em",
-    color: E
+    color: Y
   }
-}), co = s.forwardRef(
+}), go = s.forwardRef(
   function(o, t) {
-    return /* @__PURE__ */ e(M, { "data-slot": "dropdown-menu", ...o });
+    return /* @__PURE__ */ e(v, { "data-slot": "dropdown-menu", ...o });
   }
-), po = s.forwardRef(function({ className: o, ...t }, n) {
+), fo = s.forwardRef(function({ className: o, ...t }, n) {
   const a = u();
   return /* @__PURE__ */ e(
     B,
@@ -233,13 +258,17 @@ const U = (r) => /* @__PURE__ */ e(
       ref: n,
       "data-slot": "dropdown-menu-trigger",
       [c]: "dropdown-menu-trigger",
-      className: m(a.trigger, o),
+      className: p(
+        !t.asChild && a.triggerReset,
+        a.trigger,
+        o
+      ),
       ...t
     }
   );
-}), mo = s.forwardRef(function({ className: o, ...t }, n) {
+}), wo = s.forwardRef(function({ className: o, ...t }, n) {
   return /* @__PURE__ */ e(
-    k,
+    N,
     {
       ref: n,
       "data-slot": "dropdown-menu-group",
@@ -248,20 +277,20 @@ const U = (r) => /* @__PURE__ */ e(
       ...t
     }
   );
-}), uo = s.forwardRef(function(o, t) {
+}), ho = s.forwardRef(function(o, t) {
   return /* @__PURE__ */ e(
-    S,
+    C,
     {
       "data-slot": "dropdown-menu-portal",
       [c]: "dropdown-menu-portal",
       ...o
     }
   );
-}), lo = s.forwardRef(function(o, t) {
+}), bo = s.forwardRef(function(o, t) {
   return /* @__PURE__ */ e(z, { "data-slot": "dropdown-menu-sub", ...o });
-}), go = s.forwardRef(function({ className: o, ...t }, n) {
+}), xo = s.forwardRef(function({ className: o, ...t }, n) {
   return /* @__PURE__ */ e(
-    L,
+    A,
     {
       ref: n,
       "data-slot": "dropdown-menu-radio-group",
@@ -270,15 +299,15 @@ const U = (r) => /* @__PURE__ */ e(
       ...t
     }
   );
-}), fo = s.forwardRef(function({ className: o, inset: t, children: n, ...a }, i) {
+}), yo = s.forwardRef(function({ className: o, inset: t, children: n, ...a }, i) {
   const d = u();
-  return /* @__PURE__ */ h(
-    X,
+  return /* @__PURE__ */ b(
+    W,
     {
       ref: i,
       "data-slot": "dropdown-menu-sub-trigger",
       [c]: "dropdown-menu-sub-trigger",
-      className: m(
+      className: p(
         d.item,
         d.subTrigger,
         t && d.itemInset,
@@ -287,48 +316,48 @@ const U = (r) => /* @__PURE__ */ e(
       ...a,
       children: [
         n,
-        /* @__PURE__ */ e(V, { className: d.subTriggerChevron })
+        /* @__PURE__ */ e(eo, { className: d.subTriggerChevron })
       ]
     }
   );
-}), wo = s.forwardRef(function({ className: o, ...t }, n) {
-  const a = u(), i = D(), d = C();
+}), Do = s.forwardRef(function({ className: o, ...t }, n) {
+  const a = u(), i = I(), d = S();
   return /* @__PURE__ */ e(
-    W,
+    E,
     {
       ref: n,
       "data-slot": "dropdown-menu-sub-content",
       [c]: "dropdown-menu-sub-content",
       ...i !== void 0 ? { "data-density": i } : {},
       ...d,
-      className: m(a.popup, o),
+      className: p(a.popup, o),
       ...t
     }
   );
-}), ho = s.forwardRef(function({ className: o, sideOffset: t = 4, container: n, ...a }, i) {
-  const d = u(), b = D(), I = C();
-  return /* @__PURE__ */ e(S, { container: n, children: /* @__PURE__ */ e(
-    v,
+}), Ro = s.forwardRef(function({ className: o, sideOffset: t = 4, container: n, ...a }, i) {
+  const d = u(), x = I(), M = S();
+  return /* @__PURE__ */ e(C, { container: n, children: /* @__PURE__ */ e(
+    k,
     {
       ref: i,
       "data-slot": "dropdown-menu-content",
       [c]: "dropdown-menu-content",
-      ...b !== void 0 ? { "data-density": b } : {},
-      ...I,
+      ...x !== void 0 ? { "data-density": x } : {},
+      ...M,
       sideOffset: t,
-      className: m(d.popup, o),
+      className: p(d.popup, o),
       ...a
     }
   ) });
-}), bo = s.forwardRef(function({ className: o, inset: t, destructive: n, ...a }, i) {
+}), Co = s.forwardRef(function({ className: o, inset: t, destructive: n, ...a }, i) {
   const d = u();
   return /* @__PURE__ */ e(
-    N,
+    q,
     {
       ref: i,
       "data-slot": "dropdown-menu-item",
       [c]: "dropdown-menu-item",
-      className: m(
+      className: p(
         d.item,
         t && d.itemInset,
         n && d.itemDestructive,
@@ -337,48 +366,48 @@ const U = (r) => /* @__PURE__ */ e(
       ...a
     }
   );
-}), xo = s.forwardRef(function({ className: o, children: t, checked: n, ...a }, i) {
+}), So = s.forwardRef(function({ className: o, children: t, checked: n, ...a }, i) {
   const d = u();
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ b(
     T,
     {
       ref: i,
       "data-slot": "dropdown-menu-checkbox-item",
       [c]: "dropdown-menu-checkbox-item",
-      className: m(d.item, d.itemCheckboxRadio, o),
+      className: p(d.item, d.itemCheckboxRadio, o),
       checked: n,
       ...a,
       children: [
-        /* @__PURE__ */ e("span", { className: d.itemIndicatorWrapper, children: /* @__PURE__ */ e(R, { className: d.itemIndicator, children: /* @__PURE__ */ e(U, {}) }) }),
+        /* @__PURE__ */ e("span", { className: d.itemIndicatorWrapper, children: /* @__PURE__ */ e(R, { className: d.itemIndicator, children: /* @__PURE__ */ e(to, {}) }) }),
         t
       ]
     }
   );
-}), yo = s.forwardRef(function({ className: o, children: t, ...n }, a) {
+}), Io = s.forwardRef(function({ className: o, children: t, ...n }, a) {
   const i = u();
-  return /* @__PURE__ */ h(
-    A,
+  return /* @__PURE__ */ b(
+    G,
     {
       ref: a,
       "data-slot": "dropdown-menu-radio-item",
       [c]: "dropdown-menu-radio-item",
-      className: m(i.item, i.itemCheckboxRadio, o),
+      className: p(i.item, i.itemCheckboxRadio, o),
       ...n,
       children: [
-        /* @__PURE__ */ e("span", { className: i.itemIndicatorWrapper, children: /* @__PURE__ */ e(R, { className: i.itemIndicator, children: /* @__PURE__ */ e(oo, {}) }) }),
+        /* @__PURE__ */ e("span", { className: i.itemIndicatorWrapper, children: /* @__PURE__ */ e(R, { className: i.itemIndicator, children: /* @__PURE__ */ e(no, {}) }) }),
         t
       ]
     }
   );
-}), Ro = s.forwardRef(function({ className: o, inset: t, ...n }, a) {
+}), Mo = s.forwardRef(function({ className: o, inset: t, ...n }, a) {
   const i = u();
   return /* @__PURE__ */ e(
-    q,
+    L,
     {
       ref: a,
       "data-slot": "dropdown-menu-label",
       [c]: "dropdown-menu-label",
-      className: m(
+      className: p(
         i.label,
         t && i.itemInset,
         o
@@ -386,19 +415,19 @@ const U = (r) => /* @__PURE__ */ e(
       ...n
     }
   );
-}), So = s.forwardRef(function({ className: o, ...t }, n) {
+}), vo = s.forwardRef(function({ className: o, ...t }, n) {
   const a = u();
   return /* @__PURE__ */ e(
-    G,
+    X,
     {
       ref: n,
       "data-slot": "dropdown-menu-separator",
       [c]: "dropdown-menu-separator",
-      className: m(a.separator, o),
+      className: p(a.separator, o),
       ...t
     }
   );
-}), Co = s.forwardRef(function({ className: o, ...t }, n) {
+}), To = s.forwardRef(function({ className: o, ...t }, n) {
   const a = u();
   return /* @__PURE__ */ e(
     "span",
@@ -406,26 +435,26 @@ const U = (r) => /* @__PURE__ */ e(
       ref: n,
       "data-slot": "dropdown-menu-shortcut",
       [c]: "dropdown-menu-shortcut",
-      className: m(a.shortcut, o),
+      className: p(a.shortcut, o),
       ...t
     }
   );
 });
 export {
-  co as DropdownMenu,
-  xo as DropdownMenuCheckboxItem,
-  ho as DropdownMenuContent,
-  mo as DropdownMenuGroup,
-  bo as DropdownMenuItem,
-  Ro as DropdownMenuLabel,
-  uo as DropdownMenuPortal,
-  go as DropdownMenuRadioGroup,
-  yo as DropdownMenuRadioItem,
-  So as DropdownMenuSeparator,
-  Co as DropdownMenuShortcut,
-  lo as DropdownMenuSub,
-  wo as DropdownMenuSubContent,
-  fo as DropdownMenuSubTrigger,
-  po as DropdownMenuTrigger
+  go as DropdownMenu,
+  So as DropdownMenuCheckboxItem,
+  Ro as DropdownMenuContent,
+  wo as DropdownMenuGroup,
+  Co as DropdownMenuItem,
+  Mo as DropdownMenuLabel,
+  ho as DropdownMenuPortal,
+  xo as DropdownMenuRadioGroup,
+  Io as DropdownMenuRadioItem,
+  vo as DropdownMenuSeparator,
+  To as DropdownMenuShortcut,
+  bo as DropdownMenuSub,
+  Do as DropdownMenuSubContent,
+  yo as DropdownMenuSubTrigger,
+  fo as DropdownMenuTrigger
 };
 //# sourceMappingURL=dropdown-menu.js.map