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

package/dist/components/drawer/drawer.js

@@ -1,240 +1,127 @@
-import { jsx as n, jsxs as b } from "react/jsx-runtime";
+import { jsx as i, jsxs as P, Fragment as j } from "react/jsx-runtime";
 import * as s from "react";
-import { Root as L, Close as v, Content as F, Description as X, Overlay as A, Portal as O, Title as Y, Trigger as k } from "../../vendor/.bun/@radix-ui_react-dialog@1.1.15_2b23df507bdda662/vendor/@radix-ui/react-dialog/dist/index.js";
-import { mergeClasses as m, SLOT_ATTR as l, shorthands as e } from "@epilot/zenith-runtime/v1";
-import { useAppearanceAttributes as T } from "../appearance-boundary/appearance-boundary.js";
-import { useDensity as E } from "../density-provider/density-provider.js";
-import { makeZenithStyles as I } from "../../styles/make-styles.js";
-import { boxModel as p, nativeControl as x } from "../../styles/host-reset.js";
-import { OVERLAY_Z_INDEX as D } from "../../styles/overlay-layer.js";
-import { leadingSm as P, textSm as _, grayA11 as B, grayA12 as H, fontWeightSemibold as W, leadingLg as j, textLg as Z, accentA8 as C, accentSoft as M, accentA11 as V, spacingLayout1 as g, spacingElement1 as i, gray2 as q, spacingElement2 as y, grayA1 as w, radius2xl as G } from "../../tokens/index.js";
-const d = I({
+import { Dialog as f } from "../../_virtual/_zenith-runtime-family_dialog.js";
+import { mergeClasses as p, SLOT_ATTR as u, shorthands as c } from "@epilot/zenith-runtime/v1";
+import { useAppearanceAttributes as M } from "../appearance-boundary/appearance-boundary.js";
+import { useDensity as Z } from "../density-provider/density-provider.js";
+import { makeZenithStyles as V } from "../../styles/make-styles.js";
+import { boxModel as g, nativeControl as L } from "../../styles/host-reset.js";
+import { OVERLAY_Z_INDEX as k } from "../../styles/overlay-layer.js";
+import { leadingSm as q, textSm as G, grayA11 as J, grayA12 as K, fontWeightSemibold as Q, leadingLg as U, textLg as $, accentA8 as E, accentSoft as tt, accentA11 as et, spacingLayout1 as h, spacingElement1 as d, gray2 as rt, spacingElement2 as D, grayA1 as x, radius2xl as ot } from "../../tokens/index.js";
+const A = "cubic-bezier(0.4, 0, 0.2, 1)", N = "cubic-bezier(0.4, 0, 1, 1)", m = V({
   // 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: {
-    ...x
+    ...L
   },
   overlay: {
     position: "fixed",
-    ...e.inset(0),
-    zIndex: D,
+    ...c.inset(0),
+    zIndex: k,
     backgroundColor: "rgb(0 0 0 / 50%)",
-    "&[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)"
+    transitionProperty: "opacity",
+    transitionDuration: "150ms",
+    transitionTimingFunction: A,
+    "&[data-starting-style]": { opacity: 0 },
+    "&[data-ending-style]": { opacity: 0, transitionTimingFunction: N },
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
     }
   },
   content: {
-    ...p,
-    backgroundColor: q,
+    ...g,
+    backgroundColor: rt,
     position: "fixed",
-    zIndex: D,
+    zIndex: k,
     display: "flex",
     flexDirection: "column",
-    ...e.gap(g),
-    ...e.borderRadius(G),
+    ...c.gap(h),
+    ...c.borderRadius(ot),
     // v1 shadow-lg; elevation has no token in this package.
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
-    // Collapses the side slots' slide too: media rules sort after them at equal specificity.
+    // The fade lives here, the slide's distance in each side's slot below.
+    transitionProperty: "opacity, transform",
+    transitionDuration: "150ms",
+    transitionTimingFunction: A,
+    "&[data-starting-style]": { opacity: 0 },
+    "&[data-ending-style]": { opacity: 0, transitionTimingFunction: N },
+    // Collapses the side slots' slide too: they set only where it starts and ends.
     "@media (prefers-reduced-motion: reduce)": {
-      animationDuration: "0.01ms",
-      animationIterationCount: "1",
-      "&[data-state='open']": {
-        animationDuration: "0.01ms"
-      },
-      "&[data-state='closed']": {
-        animationDuration: "0.01ms"
-      }
+      transitionDuration: "0.01ms"
     }
   },
   contentPadding: {
-    ...p,
+    ...g,
     // Layout tier, unlike Dialog, AlertDialog and Popover: a drawer holds sections, not one group.
-    ...e.padding(g)
+    ...c.padding(h)
   },
   right: {
-    ...p,
-    top: i,
-    bottom: i,
-    right: i,
+    ...g,
+    top: d,
+    bottom: d,
+    right: d,
     height: "calc(100% - 0.5rem)",
-    ...e.borderLeft("1px", "solid", w),
-    "&[data-state='open']": {
-      animationName: {
-        from: {
-          opacity: 0,
-          transform: "translateX(100%)"
-        },
-        to: {
-          opacity: 1,
-          transform: "translateX(0)"
-        }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
-    },
-    "&[data-state='closed']": {
-      animationName: {
-        from: {
-          opacity: 1,
-          transform: "translateX(0)"
-        },
-        to: {
-          opacity: 0,
-          transform: "translateX(100%)"
-        }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
-    }
+    ...c.borderLeft("1px", "solid", x),
+    "&[data-starting-style]": { transform: "translateX(100%)" },
+    "&[data-ending-style]": { transform: "translateX(100%)" }
   },
   left: {
-    ...p,
-    top: i,
-    bottom: i,
-    left: i,
+    ...g,
+    top: d,
+    bottom: d,
+    left: d,
     height: "calc(100% - 0.5rem)",
-    ...e.borderRight("1px", "solid", w),
-    "&[data-state='open']": {
-      animationName: {
-        from: {
-          opacity: 0,
-          transform: "translateX(-100%)"
-        },
-        to: {
-          opacity: 1,
-          transform: "translateX(0)"
-        }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
-    },
-    "&[data-state='closed']": {
-      animationName: {
-        from: {
-          opacity: 1,
-          transform: "translateX(0)"
-        },
-        to: {
-          opacity: 0,
-          transform: "translateX(-100%)"
-        }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
-    }
+    ...c.borderRight("1px", "solid", x),
+    "&[data-starting-style]": { transform: "translateX(-100%)" },
+    "&[data-ending-style]": { transform: "translateX(-100%)" }
   },
   top: {
-    ...p,
-    left: i,
-    right: i,
-    top: i,
+    ...g,
+    left: d,
+    right: d,
+    top: d,
     width: "calc(100% - 0.5rem)",
-    ...e.borderBottom("1px", "solid", w),
-    "&[data-state='open']": {
-      animationName: {
-        from: {
-          opacity: 0,
-          transform: "translateY(-100%)"
-        },
-        to: {
-          opacity: 1,
-          transform: "translateY(0)"
-        }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
-    },
-    "&[data-state='closed']": {
-      animationName: {
-        from: {
-          opacity: 1,
-          transform: "translateY(0)"
-        },
-        to: {
-          opacity: 0,
-          transform: "translateY(-100%)"
-        }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
-    }
+    ...c.borderBottom("1px", "solid", x),
+    "&[data-starting-style]": { transform: "translateY(-100%)" },
+    "&[data-ending-style]": { transform: "translateY(-100%)" }
   },
   bottom: {
-    ...p,
-    left: i,
-    right: i,
-    bottom: i,
+    ...g,
+    left: d,
+    right: d,
+    bottom: d,
     width: "calc(100% - 0.5rem)",
-    ...e.borderTop("1px", "solid", w),
-    "&[data-state='open']": {
-      animationName: {
-        from: {
-          opacity: 0,
-          transform: "translateY(100%)"
-        },
-        to: {
-          opacity: 1,
-          transform: "translateY(0)"
-        }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
-    },
-    "&[data-state='closed']": {
-      animationName: {
-        from: {
-          opacity: 1,
-          transform: "translateY(0)"
-        },
-        to: {
-          opacity: 0,
-          transform: "translateY(100%)"
-        }
-      },
-      animationDuration: "150ms",
-      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
-    }
+    ...c.borderTop("1px", "solid", x),
+    "&[data-starting-style]": { transform: "translateY(100%)" },
+    "&[data-ending-style]": { transform: "translateY(100%)" }
   },
   close: {
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: C
+      outlineColor: E
     }
   },
   closeButton: {
-    ...x,
+    ...L,
     position: "absolute",
     // Inset by the content padding so it lines up with the padded header.
-    top: g,
-    right: g,
-    ...e.padding(y),
+    top: h,
+    right: h,
+    ...c.padding(D),
     // v1 rounded-full; no full-radius token exists in this package.
     borderRadius: "9999px",
     cursor: "pointer",
-    color: V,
+    color: et,
     ":hover": {
-      backgroundColor: M
+      backgroundColor: tt
     },
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: C
+      outlineColor: E
     },
     ":disabled": {
       pointerEvents: "none"
@@ -251,31 +138,31 @@ const d = I({
     display: "flex",
     flexShrink: 0,
     flexDirection: "column",
-    ...e.gap(y),
+    ...c.gap(D),
     textAlign: "left"
   },
   footer: {
     marginTop: "auto",
     display: "flex",
     flexShrink: 0,
-    ...e.gap(y),
+    ...c.gap(D),
     justifyContent: "flex-end"
   },
   title: {
-    ...e.margin(0),
-    fontSize: Z,
-    lineHeight: j,
-    fontWeight: W,
-    color: H
+    ...c.margin(0),
+    fontSize: $,
+    lineHeight: U,
+    fontWeight: Q,
+    color: K
   },
   description: {
-    ...e.margin(0),
-    color: B,
-    fontSize: _,
-    lineHeight: P
+    ...c.margin(0),
+    color: J,
+    fontSize: G,
+    lineHeight: q
   },
   srOnly: {
-    ...p,
+    ...g,
     position: "absolute",
     width: "1px",
     height: "1px",
@@ -285,19 +172,19 @@ const d = I({
     clip: "rect(0, 0, 0, 0)",
     whiteSpace: "nowrap"
   }
-}), J = s.forwardRef(
-  function(t, a) {
-    return /* @__PURE__ */ n(
+}), nt = s.forwardRef(
+  function(t, e) {
+    return /* @__PURE__ */ i(
       "svg",
       {
-        ref: a,
+        ref: e,
         width: "12",
         height: "12",
         viewBox: "0 0 9 9",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         ...t,
-        children: /* @__PURE__ */ n(
+        children: /* @__PURE__ */ i(
           "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",
@@ -307,172 +194,223 @@ const d = I({
       }
     );
   }
-), nt = s.forwardRef(
-  function(t, a) {
-    return /* @__PURE__ */ n(L, { "data-slot": "drawer", ...t });
+);
+function X(n) {
+  const t = s.Children.toArray(n).filter(s.isValidElement);
+  return t.length === 1 ? t[0] : void 0;
+}
+function y(n, t) {
+  const e = n ? X(t) : void 0;
+  return e ? { render: e } : { children: t };
+}
+function F(n) {
+  if (n)
+    return () => {
+      const t = new Event("focus", { cancelable: !0 }), e = document.activeElement;
+      n(t);
+      const r = document.activeElement;
+      return r !== e && r instanceof HTMLElement && queueMicrotask(() => r.focus()), !t.defaultPrevented;
+    };
+}
+const mt = s.forwardRef(
+  function({ onOpenChange: t, ...e }, r) {
+    return /* @__PURE__ */ i(
+      f.Root,
+      {
+        "data-slot": "drawer",
+        onOpenChange: (o, a) => {
+          if (a.reason === "escape-key" && a.event.defaultPrevented) {
+            a.cancel();
+            return;
+          }
+          t == null || t(o, a);
+        },
+        ...e
+      }
+    );
   }
-), it = s.forwardRef(function({ className: t, ...a }, o) {
-  const r = d();
-  return /* @__PURE__ */ n(
-    k,
+), gt = s.forwardRef(function({ asChild: t = !1, children: e, className: r, ...o }, a) {
+  const l = m();
+  return /* @__PURE__ */ i(
+    f.Trigger,
     {
-      ref: o,
+      ref: a,
       "data-slot": "drawer-trigger",
-      [l]: "drawer-trigger",
-      className: m(
-        !a.asChild && r.nativeTrigger,
-        t
-      ),
-      ...a
+      [u]: "drawer-trigger",
+      className: p(!t && l.nativeTrigger, r),
+      ...o,
+      ...y(t, e)
     }
   );
-}), st = s.forwardRef(
-  function(t, a) {
-    return /* @__PURE__ */ n(
-      O,
+}), z = s.createContext(!1), wt = s.forwardRef(
+  function({ container: t, forceMount: e, ...r }, o) {
+    return /* @__PURE__ */ i(z.Provider, { value: !0, children: /* @__PURE__ */ i(
+      f.Portal,
       {
+        ref: o,
         "data-slot": "drawer-portal",
-        [l]: "drawer-portal",
-        ...t
+        [u]: "drawer-portal",
+        container: t ?? void 0,
+        keepMounted: e,
+        ...r
       }
-    );
+    ) });
   }
-), ct = s.forwardRef(function({ className: t, ...a }, o) {
-  const r = d(), f = T();
-  return /* @__PURE__ */ n(
-    A,
+), yt = s.forwardRef(function({ asChild: t = !1, children: e, className: r, forceMount: o, ...a }, l) {
+  const v = m(), C = M();
+  return /* @__PURE__ */ i(
+    f.Backdrop,
     {
-      ref: o,
+      ref: l,
+      forceRender: !0,
       "data-slot": "drawer-overlay",
-      [l]: "drawer-overlay",
-      ...f,
-      className: m(r.overlay, t),
-      ...a
+      [u]: "drawer-overlay",
+      ...C,
+      className: p(v.overlay, r),
+      ...a,
+      ...y(t, e)
     }
   );
-}), lt = s.forwardRef(function({
-  className: t,
-  children: a,
+}), ht = s.forwardRef(function({
+  asChild: t = !1,
+  className: e,
+  children: r,
   showCloseButton: o = !0,
-  closeButtonLabel: r = "Close",
-  side: f = "right",
-  flush: N = !1,
-  ...R
-}, S) {
-  const u = d(), h = E(), z = T();
-  return /* @__PURE__ */ b(
-    F,
+  closeButtonLabel: a = "Close",
+  side: l = "right",
+  flush: v = !1,
+  forceMount: C,
+  onOpenAutoFocus: B,
+  onCloseAutoFocus: I,
+  ...O
+}, H) {
+  const w = m(), Y = s.useContext(z), R = Z(), _ = M(), T = o && /* @__PURE__ */ P(
+    f.Close,
     {
-      ref: S,
-      "data-slot": "drawer-content",
-      [l]: "drawer-content",
-      ...h !== void 0 ? { "data-density": h } : {},
-      ...z,
-      "data-side": f,
-      className: m(
-        u.content,
-        u[f],
-        !N && u.contentPadding,
-        t
-      ),
-      ...R,
+      "data-slot": "drawer-close",
+      [u]: "drawer-close",
+      className: w.closeButton,
       children: [
-        a,
-        o && /* @__PURE__ */ b(
-          v,
-          {
-            "data-slot": "drawer-close",
-            [l]: "drawer-close",
-            className: u.closeButton,
-            children: [
-              /* @__PURE__ */ n(J, {}),
-              /* @__PURE__ */ n("span", { className: u.srOnly, children: r })
-            ]
-          }
-        )
+        /* @__PURE__ */ i(nt, {}),
+        /* @__PURE__ */ i("span", { className: w.srOnly, children: a })
       ]
     }
+  ), b = t ? X(r) : void 0, W = b ? {
+    render: s.cloneElement(
+      b,
+      void 0,
+      b.props.children,
+      T
+    )
+  } : {
+    children: /* @__PURE__ */ P(j, { children: [
+      r,
+      T
+    ] })
+  }, S = /* @__PURE__ */ i(
+    f.Popup,
+    {
+      ref: H,
+      "data-slot": "drawer-content",
+      [u]: "drawer-content",
+      ...R !== void 0 ? { "data-density": R } : {},
+      ..._,
+      "data-side": l,
+      initialFocus: F(B),
+      finalFocus: F(I),
+      className: p(
+        w.content,
+        w[l],
+        !v && w.contentPadding,
+        e
+      ),
+      ...O,
+      ...W
+    }
   );
-}), mt = s.forwardRef(function({ className: t, children: a, ...o }, r) {
-  const f = d();
-  return /* @__PURE__ */ n(
-    v,
+  return Y ? S : /* @__PURE__ */ i(f.Portal, { keepMounted: C, children: S });
+}), xt = s.forwardRef(function({ asChild: t = !1, className: e, children: r, ...o }, a) {
+  const l = m();
+  return /* @__PURE__ */ i(
+    f.Close,
     {
-      ref: r,
+      ref: a,
       "data-slot": "drawer-close",
-      [l]: "drawer-close",
-      className: m(
-        !o.asChild && f.nativeTrigger,
-        f.close,
-        t
+      [u]: "drawer-close",
+      className: p(
+        !t && l.nativeTrigger,
+        l.close,
+        e
       ),
       ...o,
-      children: a
+      ...y(t, r)
     }
   );
-}), dt = s.forwardRef(
-  function({ className: t, ...a }, o) {
-    const r = d();
-    return /* @__PURE__ */ n(
+}), vt = s.forwardRef(
+  function({ className: t, ...e }, r) {
+    const o = m();
+    return /* @__PURE__ */ i(
       "div",
       {
-        ref: o,
+        ref: r,
         "data-slot": "drawer-header",
-        [l]: "drawer-header",
-        className: m(r.header, t),
-        ...a
+        [u]: "drawer-header",
+        className: p(o.header, t),
+        ...e
       }
     );
   }
-), ft = s.forwardRef(
-  function({ className: t, ...a }, o) {
-    const r = d();
-    return /* @__PURE__ */ n(
+), Ct = s.forwardRef(
+  function({ className: t, ...e }, r) {
+    const o = m();
+    return /* @__PURE__ */ i(
       "div",
       {
-        ref: o,
+        ref: r,
         "data-slot": "drawer-footer",
-        [l]: "drawer-footer",
-        className: m(r.footer, t),
-        ...a
+        [u]: "drawer-footer",
+        className: p(o.footer, t),
+        ...e
       }
     );
   }
-), pt = s.forwardRef(function({ className: t, ...a }, o) {
-  const r = d();
-  return /* @__PURE__ */ n(
-    Y,
+), bt = s.forwardRef(function({ asChild: t = !1, children: e, className: r, ...o }, a) {
+  const l = m();
+  return /* @__PURE__ */ i(
+    f.Title,
     {
-      ref: o,
+      ref: a,
       "data-slot": "drawer-title",
-      [l]: "drawer-title",
-      className: m(r.title, t),
-      ...a
+      [u]: "drawer-title",
+      className: p(l.title, r),
+      ...o,
+      ...y(t, e)
     }
   );
-}), ut = s.forwardRef(function({ className: t, ...a }, o) {
-  const r = d();
-  return /* @__PURE__ */ n(
-    X,
+}), Dt = s.forwardRef(function({ asChild: t = !1, children: e, className: r, ...o }, a) {
+  const l = m();
+  return /* @__PURE__ */ i(
+    f.Description,
     {
-      ref: o,
+      ref: a,
       "data-slot": "drawer-description",
-      [l]: "drawer-description",
-      className: m(r.description, t),
-      ...a
+      [u]: "drawer-description",
+      className: p(l.description, r),
+      ...o,
+      ...y(t, e)
     }
   );
 });
 export {
-  nt as Drawer,
-  mt as DrawerClose,
-  lt as DrawerContent,
-  ut as DrawerDescription,
-  ft as DrawerFooter,
-  dt as DrawerHeader,
-  ct as DrawerOverlay,
-  st as DrawerPortal,
-  pt as DrawerTitle,
-  it as DrawerTrigger
+  mt as Drawer,
+  xt as DrawerClose,
+  ht as DrawerContent,
+  Dt as DrawerDescription,
+  Ct as DrawerFooter,
+  vt as DrawerHeader,
+  yt as DrawerOverlay,
+  wt as DrawerPortal,
+  bt as DrawerTitle,
+  gt as DrawerTrigger
 };
 //# sourceMappingURL=drawer.js.map