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

package/dist/components/dialog/dialog.js

@@ -1,145 +1,104 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import * as n from "react";
-import { Root as N, Close as b, Content as S, Description as L, Overlay as W, Portal as A, Title as O, Trigger as I } from "../../vendor/.bun/@radix-ui_react-dialog@1.1.15_2b23df507bdda662/vendor/@radix-ui/react-dialog/dist/index.js";
-import { mergeClasses as d, SLOT_ATTR as s, shorthands as l } from "@epilot/zenith-runtime/v1";
-import { useAppearanceAttributes as v } from "../appearance-boundary/appearance-boundary.js";
-import { useDensity as k } from "../density-provider/density-provider.js";
-import { makeZenithStyles as F } from "../../styles/make-styles.js";
-import { boxModel as f, nativeControl as y } from "../../styles/host-reset.js";
-import { OVERLAY_Z_INDEX as C } from "../../styles/overlay-layer.js";
-import { leadingSm as E, textSm as P, grayA11 as X, grayA12 as _, fontWeightSemibold as H, leadingLg as j, textLg as B, focusRing as D, accentSoft as M, accentA11 as Z, spacingGroup2 as p, container5xl as G, container4xl as V, container3xl as Y, container2xl as q, containerXl as J, containerLg as K, containerMd as Q, containerSm as U, body as $, spacingElement2 as u, grayA1 as tt, radiusXl as ot, spacingLayout1 as at } from "../../tokens/index.js";
-const c = F({
+import { jsx as r, jsxs as T, Fragment as _ } from "react/jsx-runtime";
+import * as l from "react";
+import { Dialog as d } from "../../_virtual/_zenith-runtime-family_dialog.js";
+import { mergeClasses as f, SLOT_ATTR as g, shorthands as c } from "@epilot/zenith-runtime/v1";
+import { useAppearanceAttributes as E } from "../appearance-boundary/appearance-boundary.js";
+import { useDensity as j } from "../density-provider/density-provider.js";
+import { makeZenithStyles as Z } from "../../styles/make-styles.js";
+import { boxModel as v, nativeControl as z } from "../../styles/host-reset.js";
+import { OVERLAY_Z_INDEX as P } from "../../styles/overlay-layer.js";
+import { leadingSm as V, textSm as q, grayA11 as G, grayA12 as Y, fontWeightSemibold as $, leadingLg as J, textLg as K, focusRing as S, accentSoft as Q, accentA11 as U, spacingGroup2 as C, container5xl as tt, container4xl as ot, container3xl as et, container2xl as it, containerXl as nt, containerLg as at, containerMd as rt, containerSm as lt, body as st, spacingElement2 as D, grayA1 as ct, radiusXl as dt, spacingLayout1 as gt } from "../../tokens/index.js";
+const L = "cubic-bezier(0.4, 0, 0.2, 1)", W = "cubic-bezier(0.4, 0, 1, 1)", u = Z({
   // 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.
   nativeTrigger: {
-    ...y
+    ...z
   },
   overlay: {
     position: "fixed",
-    ...l.inset(0),
-    zIndex: C,
+    ...c.inset(0),
+    zIndex: P,
     backgroundColor: "rgb(0 0 0 / 50%)",
+    transitionProperty: "opacity",
+    transitionDuration: "150ms",
+    transitionTimingFunction: L,
+    "&[data-starting-style]": { opacity: 0 },
+    "&[data-ending-style]": { opacity: 0, transitionTimingFunction: W },
     "@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 },
-        to: { opacity: 1 }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
-    },
-    "&[data-state='closed']": {
-      animationName: {
-        from: { opacity: 1 },
-        to: { opacity: 0 }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
+      transitionDuration: "0.01ms"
     }
   },
   content: {
-    ...f,
-    backgroundColor: $,
+    ...v,
+    backgroundColor: st,
     position: "fixed",
     top: "50%",
     left: "50%",
-    zIndex: C,
+    zIndex: P,
     display: "grid",
     width: "100%",
     maxWidth: "calc(100% - 2rem)",
     transform: "translate(-50%, -50%)",
-    ...l.gap(at),
-    ...l.borderRadius(ot),
-    ...l.border("1px", "solid", tt),
+    ...c.gap(gt),
+    ...c.borderRadius(dt),
+    ...c.border("1px", "solid", ct),
     // v1 shadow-lg; elevation has no token in this package.
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
-    "@media (prefers-reduced-motion: reduce)": {
-      animationDuration: "0.01ms",
-      animationIterationCount: "1",
-      "&[data-state='open']": {
-        animationDuration: "0.01ms"
-      },
-      "&[data-state='closed']": {
-        animationDuration: "0.01ms"
-      }
+    transitionProperty: "opacity, transform",
+    transitionDuration: "150ms",
+    transitionTimingFunction: L,
+    "&[data-starting-style]": {
+      opacity: 0,
+      transform: "translate(-50%, -50%) scale(0.95)"
     },
-    "&[data-state='open']": {
-      animationName: {
-        from: {
-          opacity: 0,
-          transform: "translate(-50%, -50%) scale(0.95)"
-        },
-        to: {
-          opacity: 1,
-          transform: "translate(-50%, -50%) scale(1)"
-        }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+    "&[data-ending-style]": {
+      opacity: 0,
+      transform: "translate(-50%, -50%) scale(0.95)",
+      transitionTimingFunction: W
     },
-    "&[data-state='closed']": {
-      animationName: {
-        from: {
-          opacity: 1,
-          transform: "translate(-50%, -50%) scale(1)"
-        },
-        to: {
-          opacity: 0,
-          transform: "translate(-50%, -50%) scale(0.95)"
-        }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
     },
-    "&[data-size='sm']": { maxWidth: U },
-    "&[data-size='md']": { maxWidth: Q },
-    "&[data-size='lg']": { maxWidth: K },
-    "&[data-size='xl']": { maxWidth: J },
-    "&[data-size='2xl']": { maxWidth: q },
-    "&[data-size='3xl']": { maxWidth: Y },
-    "&[data-size='4xl']": { maxWidth: V },
-    "&[data-size='5xl']": { maxWidth: G },
+    "&[data-size='sm']": { maxWidth: lt },
+    "&[data-size='md']": { maxWidth: rt },
+    "&[data-size='lg']": { maxWidth: at },
+    "&[data-size='xl']": { maxWidth: nt },
+    "&[data-size='2xl']": { maxWidth: it },
+    "&[data-size='3xl']": { maxWidth: et },
+    "&[data-size='4xl']": { maxWidth: ot },
+    "&[data-size='5xl']": { maxWidth: tt },
     "&[data-size='full-width']": { maxWidth: "100%" }
   },
   contentPadding: {
-    ...f,
-    ...l.padding(p)
+    ...v,
+    ...c.padding(C)
   },
   close: {
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: D
+      outlineColor: S
     }
   },
   closeButton: {
-    ...y,
+    ...z,
     position: "absolute",
-    top: p,
-    right: p,
-    ...l.padding(u),
+    top: C,
+    right: C,
+    ...c.padding(D),
     // v1 rounded-full; no full-radius token exists in this package.
     borderRadius: "9999px",
     cursor: "pointer",
-    color: Z,
+    color: U,
     ":hover": {
-      backgroundColor: M
+      backgroundColor: Q
     },
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: D
+      outlineColor: S
     },
     ":disabled": {
       pointerEvents: "none"
@@ -155,29 +114,29 @@ const c = F({
   header: {
     display: "flex",
     flexDirection: "column",
-    ...l.gap(u),
+    ...c.gap(D),
     textAlign: "left"
   },
   footer: {
     display: "flex",
-    ...l.gap(u),
+    ...c.gap(D),
     justifyContent: "flex-end"
   },
   title: {
-    ...l.margin(0),
-    fontSize: B,
-    lineHeight: j,
-    fontWeight: H,
-    color: _
+    ...c.margin(0),
+    fontSize: K,
+    lineHeight: J,
+    fontWeight: $,
+    color: Y
   },
   description: {
-    ...l.margin(0),
-    color: X,
-    fontSize: P,
-    lineHeight: E
+    ...c.margin(0),
+    color: G,
+    fontSize: q,
+    lineHeight: V
   },
   srOnly: {
-    ...f,
+    ...v,
     position: "absolute",
     width: "1px",
     height: "1px",
@@ -187,9 +146,9 @@ const c = F({
     clip: "rect(0, 0, 0, 0)",
     whiteSpace: "nowrap"
   }
-}), it = n.forwardRef(
+}), ft = l.forwardRef(
   function(t, o) {
-    return /* @__PURE__ */ e(
+    return /* @__PURE__ */ r(
       "svg",
       {
         ref: o,
@@ -199,7 +158,7 @@ const c = F({
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         ...t,
-        children: /* @__PURE__ */ e(
+        children: /* @__PURE__ */ r(
           "path",
           {
             d: "M4.38333 5.31667L1.11667 8.58333C0.994445 8.70556 0.838889 8.76667 0.65 8.76667C0.461111 8.76667 0.305556 8.70556 0.183333 8.58333C0.0611111 8.46111 0 8.30556 0 8.11667C0 7.92778 0.0611111 7.77222 0.183333 7.65L3.45 4.38333L0.183333 1.11667C0.0611111 0.994445 0 0.838889 0 0.65C0 0.461111 0.0611111 0.305556 0.183333 0.183333C0.305556 0.0611111 0.461111 0 0.65 0C0.838889 0 0.994445 0.0611111 1.11667 0.183333L4.38333 3.45L7.65 0.183333C7.77222 0.0611111 7.92778 0 8.11667 0C8.30556 0 8.46111 0.0611111 8.58333 0.183333C8.70556 0.305556 8.76667 0.461111 8.76667 0.65C8.76667 0.838889 8.70556 0.994445 8.58333 1.11667L5.31667 4.38333L8.58333 7.65C8.70556 7.77222 8.76667 7.92778 8.76667 8.11667C8.76667 8.30556 8.70556 8.46111 8.58333 8.58333C8.46111 8.70556 8.30556 8.76667 8.11667 8.76667C7.92778 8.76667 7.77222 8.70556 7.65 8.58333L4.38333 5.31667Z",
@@ -209,171 +168,222 @@ const c = F({
       }
     );
   }
-), ft = n.forwardRef(
-  function(t, o) {
-    return /* @__PURE__ */ e(N, { "data-slot": "dialog", ...t });
+);
+function N(n) {
+  const t = l.Children.toArray(n).filter(l.isValidElement);
+  return t.length === 1 ? t[0] : void 0;
+}
+function p(n, t) {
+  const o = n ? N(t) : void 0;
+  return o ? { render: o } : { children: t };
+}
+function k(n) {
+  if (n)
+    return () => {
+      const t = new Event("focus", { cancelable: !0 }), o = document.activeElement;
+      n(t);
+      const e = document.activeElement;
+      return e !== o && e instanceof HTMLElement && queueMicrotask(() => e.focus()), !t.defaultPrevented;
+    };
+}
+const wt = l.forwardRef(
+  function({ onOpenChange: t, ...o }, e) {
+    return /* @__PURE__ */ r(
+      d.Root,
+      {
+        "data-slot": "dialog",
+        onOpenChange: (i, a) => {
+          if (a.reason === "escape-key" && a.event.defaultPrevented) {
+            a.cancel();
+            return;
+          }
+          t == null || t(i, a);
+        },
+        ...o
+      }
+    );
   }
-), pt = n.forwardRef(function({ className: t, ...o }, a) {
-  const i = c();
-  return /* @__PURE__ */ e(
-    I,
+), bt = l.forwardRef(function({ asChild: t = !1, children: o, className: e, ...i }, a) {
+  const s = u();
+  return /* @__PURE__ */ r(
+    d.Trigger,
     {
       ref: a,
       "data-slot": "dialog-trigger",
-      [s]: "dialog-trigger",
-      className: d(
-        !o.asChild && i.nativeTrigger,
-        t
-      ),
-      ...o
+      [g]: "dialog-trigger",
+      className: f(!t && s.nativeTrigger, e),
+      ...i,
+      ...p(t, o)
     }
   );
-}), ut = n.forwardRef(
-  function(t, o) {
-    return /* @__PURE__ */ e(
-      A,
+}), A = l.createContext(!1), Rt = l.forwardRef(
+  function({ container: t, forceMount: o, ...e }, i) {
+    return /* @__PURE__ */ r(A.Provider, { value: !0, children: /* @__PURE__ */ r(
+      d.Portal,
       {
+        ref: i,
         "data-slot": "dialog-portal",
-        [s]: "dialog-portal",
-        ...t
+        [g]: "dialog-portal",
+        container: t ?? void 0,
+        keepMounted: o,
+        ...e
       }
-    );
+    ) });
   }
-), xt = n.forwardRef(function({ className: t, ...o }, a) {
-  const i = c(), m = v();
-  return /* @__PURE__ */ e(
-    W,
+), Tt = l.forwardRef(function({ asChild: t = !1, children: o, className: e, forceMount: i, ...a }, s) {
+  const x = u(), h = E();
+  return /* @__PURE__ */ r(
+    d.Backdrop,
     {
-      ref: a,
+      ref: s,
+      forceRender: !0,
       "data-slot": "dialog-overlay",
-      [s]: "dialog-overlay",
-      ...m,
-      className: d(i.overlay, t),
-      ...o
+      [g]: "dialog-overlay",
+      ...h,
+      className: f(x.overlay, e),
+      ...a,
+      ...p(t, o)
     }
   );
-}), ht = n.forwardRef(function({
-  className: t,
-  children: o,
-  showCloseButton: a = !0,
-  closeButtonLabel: i = "Close",
-  flush: m = !1,
-  size: w = "lg",
-  ...z
-}, R) {
-  const g = c(), x = k(), T = v();
-  return /* @__PURE__ */ h(
-    S,
+}), zt = l.forwardRef(function({
+  asChild: t = !1,
+  className: o,
+  children: e,
+  showCloseButton: i = !0,
+  closeButtonLabel: a = "Close",
+  flush: s = !1,
+  size: x = "lg",
+  forceMount: h,
+  onOpenAutoFocus: F,
+  onCloseAutoFocus: M,
+  ...I
+}, O) {
+  const m = u(), B = l.useContext(A), w = j(), H = E(), b = i && /* @__PURE__ */ T(
+    d.Close,
     {
-      ref: R,
-      "data-slot": "dialog-content",
-      [s]: "dialog-content",
-      ...x !== void 0 ? { "data-density": x } : {},
-      ...T,
-      "data-size": w,
-      className: d(
-        g.content,
-        !m && g.contentPadding,
-        t
-      ),
-      ...z,
+      "data-slot": "dialog-close",
+      [g]: "dialog-close",
+      className: m.closeButton,
       children: [
-        o,
-        a && /* @__PURE__ */ h(
-          b,
-          {
-            "data-slot": "dialog-close",
-            [s]: "dialog-close",
-            className: g.closeButton,
-            children: [
-              /* @__PURE__ */ e(it, {}),
-              /* @__PURE__ */ e("span", { className: g.srOnly, children: i })
-            ]
-          }
-        )
+        /* @__PURE__ */ r(ft, {}),
+        /* @__PURE__ */ r("span", { className: m.srOnly, children: a })
       ]
     }
+  ), y = t ? N(e) : void 0, X = y ? {
+    render: l.cloneElement(
+      y,
+      void 0,
+      y.props.children,
+      b
+    )
+  } : {
+    children: /* @__PURE__ */ T(_, { children: [
+      e,
+      b
+    ] })
+  }, R = /* @__PURE__ */ r(
+    d.Popup,
+    {
+      ref: O,
+      "data-slot": "dialog-content",
+      [g]: "dialog-content",
+      ...w !== void 0 ? { "data-density": w } : {},
+      ...H,
+      "data-size": x,
+      initialFocus: k(F),
+      finalFocus: k(M),
+      className: f(
+        m.content,
+        !s && m.contentPadding,
+        o
+      ),
+      ...I,
+      ...X
+    }
   );
-}), yt = n.forwardRef(function({ className: t, children: o, ...a }, i) {
-  const m = c();
-  return /* @__PURE__ */ e(
-    b,
+  return B ? R : /* @__PURE__ */ r(d.Portal, { keepMounted: h, children: R });
+}), Pt = l.forwardRef(function({ asChild: t = !1, className: o, children: e, ...i }, a) {
+  const s = u();
+  return /* @__PURE__ */ r(
+    d.Close,
     {
-      ref: i,
+      ref: a,
       "data-slot": "dialog-close",
-      [s]: "dialog-close",
-      className: d(
-        !a.asChild && m.nativeTrigger,
-        m.close,
-        t
+      [g]: "dialog-close",
+      className: f(
+        !t && s.nativeTrigger,
+        s.close,
+        o
       ),
-      ...a,
-      children: o
+      ...i,
+      ...p(t, e)
     }
   );
-}), Ct = n.forwardRef(
-  function({ className: t, ...o }, a) {
-    const i = c();
-    return /* @__PURE__ */ e(
+}), St = l.forwardRef(
+  function({ className: t, ...o }, e) {
+    const i = u();
+    return /* @__PURE__ */ r(
       "div",
       {
-        ref: a,
+        ref: e,
         "data-slot": "dialog-header",
-        [s]: "dialog-header",
-        className: d(i.header, t),
+        [g]: "dialog-header",
+        className: f(i.header, t),
         ...o
       }
     );
   }
-), Dt = n.forwardRef(
-  function({ className: t, ...o }, a) {
-    const i = c();
-    return /* @__PURE__ */ e(
+), Lt = l.forwardRef(
+  function({ className: t, ...o }, e) {
+    const i = u();
+    return /* @__PURE__ */ r(
       "div",
       {
-        ref: a,
+        ref: e,
         "data-slot": "dialog-footer",
-        [s]: "dialog-footer",
-        className: d(i.footer, t),
+        [g]: "dialog-footer",
+        className: f(i.footer, t),
         ...o
       }
     );
   }
-), bt = n.forwardRef(function({ className: t, ...o }, a) {
-  const i = c();
-  return /* @__PURE__ */ e(
-    O,
+), Wt = l.forwardRef(function({ asChild: t = !1, children: o, className: e, ...i }, a) {
+  const s = u();
+  return /* @__PURE__ */ r(
+    d.Title,
     {
       ref: a,
       "data-slot": "dialog-title",
-      [s]: "dialog-title",
-      className: d(i.title, t),
-      ...o
+      [g]: "dialog-title",
+      className: f(s.title, e),
+      ...i,
+      ...p(t, o)
     }
   );
-}), vt = n.forwardRef(function({ className: t, ...o }, a) {
-  const i = c();
-  return /* @__PURE__ */ e(
-    L,
+}), kt = l.forwardRef(function({ asChild: t = !1, children: o, className: e, ...i }, a) {
+  const s = u();
+  return /* @__PURE__ */ r(
+    d.Description,
     {
       ref: a,
       "data-slot": "dialog-description",
-      [s]: "dialog-description",
-      className: d(i.description, t),
-      ...o
+      [g]: "dialog-description",
+      className: f(s.description, e),
+      ...i,
+      ...p(t, o)
     }
   );
 });
 export {
-  ft as Dialog,
-  yt as DialogClose,
-  ht as DialogContent,
-  vt as DialogDescription,
-  Dt as DialogFooter,
-  Ct as DialogHeader,
-  xt as DialogOverlay,
-  ut as DialogPortal,
-  bt as DialogTitle,
-  pt as DialogTrigger
+  wt as Dialog,
+  Pt as DialogClose,
+  zt as DialogContent,
+  kt as DialogDescription,
+  Lt as DialogFooter,
+  St as DialogHeader,
+  Tt as DialogOverlay,
+  Rt as DialogPortal,
+  Wt as DialogTitle,
+  bt as DialogTrigger
 };
 //# sourceMappingURL=dialog.js.map