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

package/dist/components/alert-dialog/alert-dialog.js

@@ -1,19 +1,19 @@
-import { jsx as r, jsxs as b, Fragment as R } from "react/jsx-runtime";
-import * as i from "react";
-import { Root as T, Action as C, Cancel as v, Content as w, Description as N, Overlay as S, Portal as z, Title as F, Trigger as W } from "../../vendor/.bun/@radix-ui_react-alert-dialog@1.1.15_2b23df507bdda662/vendor/@radix-ui/react-alert-dialog/dist/index.js";
-import { SLOT_ATTR as l, mergeClasses as d, shorthands as s } from "@epilot/zenith-runtime/v1";
-import { useAppearanceAttributes as A } from "../appearance-boundary/appearance-boundary.js";
-import { useDensity as O } from "../density-provider/density-provider.js";
-import { makeZenithStyles as X } from "../../styles/make-styles.js";
-import { boxModel as f, nativeControl as _ } from "../../styles/host-reset.js";
-import { OVERLAY_Z_INDEX as u } from "../../styles/overlay-layer.js";
-import { grayA11 as H, leadingSm as I, textSm as P, grayA12 as j, fontWeightSemibold as k, leadingXl as E, textXl as L, containerXl as M, containerLg as Z, containerMd as B, containerSm as G, body as V, spacingElement2 as y, spacingGroup2 as D, grayA1 as Y, radiusXl as q } from "../../tokens/index.js";
-import { Button as x } from "../button/button.js";
-const m = X({
+import { jsx as l, jsxs as I } from "react/jsx-runtime";
+import * as a from "react";
+import { AlertDialog as c } from "../../_virtual/_zenith-runtime-family_alert-dialog.js";
+import { SLOT_ATTR as d, mergeClasses as g, shorthands as f } from "@epilot/zenith-runtime/v1";
+import { useAppearanceAttributes as k } from "../appearance-boundary/appearance-boundary.js";
+import { useDensity as L } from "../density-provider/density-provider.js";
+import { makeZenithStyles as j } from "../../styles/make-styles.js";
+import { boxModel as p, nativeControl as B } from "../../styles/host-reset.js";
+import { OVERLAY_Z_INDEX as C } from "../../styles/overlay-layer.js";
+import { grayA11 as O, leadingSm as V, textSm as Z, grayA12 as q, fontWeightSemibold as G, leadingXl as Y, textXl as $, containerXl as J, containerLg as K, containerMd as Q, containerSm as U, body as tt, spacingElement2 as R, spacingGroup2 as T, grayA1 as et, radiusXl as ot } from "../../tokens/index.js";
+import { Button as E } from "../button/button.js";
+const w = "cubic-bezier(0.4, 0, 0.2, 1)", P = "cubic-bezier(0.4, 0, 1, 1)", u = j({
   // 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: {
-    ..._
+    ...B
   },
   overlay: {
     position: "fixed",
@@ -21,283 +21,320 @@ const m = X({
     right: 0,
     bottom: 0,
     left: 0,
-    zIndex: u,
+    zIndex: C,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
-    "&[data-state='open']": {
-      animationName: {
-        from: { opacity: 0 },
-        to: { opacity: 1 }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+    transitionProperty: "opacity",
+    transitionDuration: "150ms",
+    transitionTimingFunction: w,
+    "&[data-starting-style]": { opacity: 0 },
+    "&[data-ending-style]": {
+      opacity: 0,
+      transitionDuration: "100ms",
+      transitionTimingFunction: P
     },
-    "&[data-state='closed']": {
-      animationName: {
-        from: { opacity: 1 },
-        to: { opacity: 0 }
-      },
-      animationDuration: "100ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms",
+      "&[data-ending-style]": { transitionDuration: "0.01ms" }
     }
   },
   content: {
-    ...f,
-    backgroundColor: V,
+    ...p,
+    backgroundColor: tt,
     position: "fixed",
     top: "50%",
     left: "50%",
     transform: "translate(-50%, -50%)",
-    zIndex: u,
+    zIndex: C,
     display: "grid",
     width: "100%",
     maxWidth: "calc(100% - 2rem)",
-    ...s.gap(D),
-    ...s.borderRadius(q),
-    ...s.border("1px", "solid", Y),
-    ...s.padding(D),
+    ...f.gap(T),
+    ...f.borderRadius(ot),
+    ...f.border("1px", "solid", et),
+    ...f.padding(T),
     // v1 shadow-lg
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
     outlineStyle: "none",
-    "@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: w,
+    "&[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)",
+      transitionDuration: "100ms",
+      transitionTimingFunction: P
     },
-    "&[data-state='closed']": {
-      animationName: {
-        from: {
-          opacity: 1,
-          transform: "translate(-50%, -50%) scale(1)"
-        },
-        to: {
-          opacity: 0,
-          transform: "translate(-50%, -50%) scale(0.95)"
-        }
-      },
-      animationDuration: "100ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms",
+      "&[data-ending-style]": { transitionDuration: "0.01ms" }
     }
   },
   sm: {
-    ...f,
-    maxWidth: G
+    ...p,
+    maxWidth: U
   },
   md: {
-    ...f,
-    maxWidth: B
+    ...p,
+    maxWidth: Q
   },
   lg: {
-    ...f,
-    maxWidth: Z
+    ...p,
+    maxWidth: K
   },
   xl: {
-    ...f,
+    ...p,
     "@media (min-width: 640px)": {
-      maxWidth: M
+      maxWidth: J
     }
   },
   header: {
     display: "flex",
     flexDirection: "column",
-    ...s.gap(y),
+    ...f.gap(R),
     textAlign: "left"
   },
   footer: {
     display: "flex",
-    ...s.gap(y),
+    ...f.gap(R),
     justifyContent: "flex-end"
   },
   title: {
-    ...s.margin(0),
-    fontSize: L,
-    lineHeight: E,
-    fontWeight: k,
-    color: j
+    ...f.margin(0),
+    fontSize: $,
+    lineHeight: Y,
+    fontWeight: G,
+    color: q
   },
   description: {
-    ...s.margin(0),
-    fontSize: P,
-    lineHeight: I,
-    color: H
+    ...f.margin(0),
+    fontSize: Z,
+    lineHeight: V,
+    color: O
   }
-}), nt = i.forwardRef(
-  function(t, a) {
-    return /* @__PURE__ */ r(T, { "data-slot": "alert-dialog", ...t });
+});
+function rt(i) {
+  const t = a.Children.toArray(i).filter(a.isValidElement);
+  return t.length === 1 ? t[0] : void 0;
+}
+function y(i, t) {
+  const e = i ? rt(t) : void 0;
+  return e ? { render: e } : { children: t };
+}
+function S(i) {
+  if (i)
+    return () => {
+      const t = new Event("focus", { cancelable: !0 }), e = document.activeElement;
+      i(t);
+      const o = document.activeElement;
+      return o !== e && o instanceof HTMLElement && queueMicrotask(() => o.focus()), !t.defaultPrevented;
+    };
+}
+const pt = a.forwardRef(
+  function({ onOpenChange: t, ...e }, o) {
+    return /* @__PURE__ */ l(
+      c.Root,
+      {
+        "data-slot": "alert-dialog",
+        onOpenChange: (r, n) => {
+          if (n.reason === "escape-key" && n.event.defaultPrevented) {
+            n.cancel();
+            return;
+          }
+          t == null || t(r, n);
+        },
+        ...e
+      }
+    );
   }
-), lt = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = m();
-  return /* @__PURE__ */ r(
-    W,
+), yt = a.forwardRef(function({ asChild: t = !1, children: e, className: o, ...r }, n) {
+  const s = u();
+  return /* @__PURE__ */ l(
+    c.Trigger,
     {
-      ref: o,
+      ref: n,
       "data-slot": "alert-dialog-trigger",
-      [l]: "alert-dialog-trigger",
-      className: d(
-        !a.asChild && e.nativeTrigger,
-        t
-      ),
-      ...a
+      [d]: "alert-dialog-trigger",
+      className: g(!t && s.nativeTrigger, o),
+      ...r,
+      ...y(t, e)
     }
   );
-}), st = i.forwardRef(function(t, a) {
-  return /* @__PURE__ */ r(
-    z,
+}), F = a.createContext(!1), xt = a.forwardRef(function({ container: t, forceMount: e, ...o }, r) {
+  return /* @__PURE__ */ l(F.Provider, { value: !0, children: /* @__PURE__ */ l(
+    c.Portal,
     {
+      ref: r,
       "data-slot": "alert-dialog-portal",
-      [l]: "alert-dialog-portal",
-      ...t
+      [d]: "alert-dialog-portal",
+      container: t ?? void 0,
+      keepMounted: e,
+      ...o
     }
-  );
-}), J = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = m(), c = A();
-  return /* @__PURE__ */ r(
-    S,
+  ) });
+}), at = a.forwardRef(function({ asChild: t = !1, children: e, className: o, forceMount: r, ...n }, s) {
+  const m = u(), x = k();
+  return /* @__PURE__ */ l(
+    c.Backdrop,
     {
-      ref: o,
+      ref: s,
+      forceRender: !0,
       "data-slot": "alert-dialog-overlay",
-      [l]: "alert-dialog-overlay",
-      ...c,
-      className: d(e.overlay, t),
-      ...a
+      [d]: "alert-dialog-overlay",
+      ...x,
+      className: g(m.overlay, o),
+      ...n,
+      ...y(t, e)
     }
   );
-}), ct = i.forwardRef(function({ className: t, size: a = "xl", children: o, ...e }, c) {
-  const g = m(), p = O(), h = A();
-  return /* @__PURE__ */ b(R, { children: [
-    /* @__PURE__ */ r(J, {}),
-    /* @__PURE__ */ r(
-      w,
-      {
-        ref: c,
-        "data-slot": "alert-dialog-content",
-        [l]: "alert-dialog-content",
-        ...p !== void 0 ? { "data-density": p } : {},
-        ...h,
-        className: d(g.content, g[a], t),
-        ...e,
-        children: o
-      }
-    )
+}), M = a.createContext(void 0), Dt = a.forwardRef(function({
+  asChild: t = !1,
+  className: e,
+  size: o = "xl",
+  children: r,
+  forceMount: n,
+  onOpenAutoFocus: s,
+  onCloseAutoFocus: m,
+  ...x
+}, N) {
+  const A = u(), W = a.useContext(F), v = L(), z = k(), h = a.useRef(null), H = a.useCallback((_) => {
+    h.current = _;
+  }, []), D = S(s), X = /* @__PURE__ */ l(
+    c.Popup,
+    {
+      ref: N,
+      "data-slot": "alert-dialog-content",
+      [d]: "alert-dialog-content",
+      ...v !== void 0 ? { "data-density": v } : {},
+      ...z,
+      initialFocus: () => (D == null ? void 0 : D()) === !1 ? !1 : h.current ?? !0,
+      finalFocus: S(m),
+      className: g(A.content, A[o], e),
+      ...x,
+      ...y(t, r)
+    }
+  ), b = /* @__PURE__ */ I(M.Provider, { value: H, children: [
+    /* @__PURE__ */ l(at, {}),
+    X
   ] });
-}), dt = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = m();
-  return /* @__PURE__ */ r(
+  return W ? b : /* @__PURE__ */ l(c.Portal, { keepMounted: n, children: b });
+}), At = a.forwardRef(function({ className: t, ...e }, o) {
+  const r = u();
+  return /* @__PURE__ */ l(
     "div",
     {
       ref: o,
       "data-slot": "alert-dialog-header",
-      [l]: "alert-dialog-header",
-      className: d(e.header, t),
-      ...a
+      [d]: "alert-dialog-header",
+      className: g(r.header, t),
+      ...e
     }
   );
-}), mt = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = m();
-  return /* @__PURE__ */ r(
+}), vt = a.forwardRef(function({ className: t, ...e }, o) {
+  const r = u();
+  return /* @__PURE__ */ l(
     "div",
     {
       ref: o,
       "data-slot": "alert-dialog-footer",
-      [l]: "alert-dialog-footer",
-      className: d(e.footer, t),
-      ...a
+      [d]: "alert-dialog-footer",
+      className: g(r.footer, t),
+      ...e
     }
   );
-}), gt = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = m();
-  return /* @__PURE__ */ r(
-    F,
+}), ht = a.forwardRef(function({ asChild: t = !1, children: e, className: o, ...r }, n) {
+  const s = u();
+  return /* @__PURE__ */ l(
+    c.Title,
     {
-      ref: o,
+      ref: n,
       "data-slot": "alert-dialog-title",
-      [l]: "alert-dialog-title",
-      className: d(e.title, t),
-      ...a
+      [d]: "alert-dialog-title",
+      className: g(s.title, o),
+      ...r,
+      ...y(t, e)
     }
   );
-}), ft = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = m();
-  return /* @__PURE__ */ r(
-    N,
+}), bt = a.forwardRef(function({ asChild: t = !1, children: e, className: o, ...r }, n) {
+  const s = u();
+  return /* @__PURE__ */ l(
+    c.Description,
     {
-      ref: o,
+      ref: n,
       "data-slot": "alert-dialog-description",
-      [l]: "alert-dialog-description",
-      className: d(e.description, t),
-      ...a
+      [d]: "alert-dialog-description",
+      className: g(s.description, o),
+      ...r,
+      ...y(t, e)
     }
   );
-}), pt = i.forwardRef(function({
+}), Ct = a.forwardRef(function({
   variant: t = "primary",
-  size: a = "base",
+  size: e = "base",
   destructive: o = !1,
-  className: e,
-  ...c
-}, g) {
-  return /* @__PURE__ */ r(C, { asChild: !0, children: /* @__PURE__ */ r(
-    x,
+  className: r,
+  ...n
+}, s) {
+  return /* @__PURE__ */ l(
+    c.Close,
     {
-      ref: g,
-      "data-slot": "alert-dialog-action",
-      [l]: "alert-dialog-action",
-      variant: t,
-      size: a,
-      destructive: o,
-      className: e,
-      ...c
+      render: /* @__PURE__ */ l(
+        E,
+        {
+          ref: s,
+          "data-slot": "alert-dialog-action",
+          [d]: "alert-dialog-action",
+          variant: t,
+          size: e,
+          destructive: o,
+          className: r,
+          ...n
+        }
+      )
     }
-  ) });
-}), ut = i.forwardRef(function({
+  );
+}), Rt = a.forwardRef(function({
   variant: t = "secondary",
-  size: a = "base",
+  size: e = "base",
   destructive: o = !1,
-  className: e,
-  ...c
-}, g) {
-  return /* @__PURE__ */ r(v, { asChild: !0, children: /* @__PURE__ */ r(
-    x,
+  className: r,
+  ...n
+}, s) {
+  const m = a.useContext(M);
+  return /* @__PURE__ */ l(
+    c.Close,
     {
-      ref: g,
-      "data-slot": "alert-dialog-cancel",
-      [l]: "alert-dialog-cancel",
-      variant: t,
-      size: a,
-      destructive: o,
-      className: e,
-      ...c
+      ref: m,
+      render: /* @__PURE__ */ l(
+        E,
+        {
+          ref: s,
+          "data-slot": "alert-dialog-cancel",
+          [d]: "alert-dialog-cancel",
+          variant: t,
+          size: e,
+          destructive: o,
+          className: r,
+          ...n
+        }
+      )
     }
-  ) });
+  );
 });
 export {
-  nt as AlertDialog,
-  pt as AlertDialogAction,
-  ut as AlertDialogCancel,
-  ct as AlertDialogContent,
-  ft as AlertDialogDescription,
-  mt as AlertDialogFooter,
-  dt as AlertDialogHeader,
-  J as AlertDialogOverlay,
-  st as AlertDialogPortal,
-  gt as AlertDialogTitle,
-  lt as AlertDialogTrigger
+  pt as AlertDialog,
+  Ct as AlertDialogAction,
+  Rt as AlertDialogCancel,
+  Dt as AlertDialogContent,
+  bt as AlertDialogDescription,
+  vt as AlertDialogFooter,
+  At as AlertDialogHeader,
+  at as AlertDialogOverlay,
+  xt as AlertDialogPortal,
+  ht as AlertDialogTitle,
+  yt as AlertDialogTrigger
 };
 //# sourceMappingURL=alert-dialog.js.map