@purpur/library 9.9.0 → 9.10.1

package/dist/drawer-Cnk2OKgi.mjs

@@ -0,0 +1,577 @@
+import { jsx as e, jsxs as g, Fragment as I } from "react/jsx-runtime";
+import Y, { createContext as mr, forwardRef as P, useContext as $r, useRef as Q, useEffect as vr } from "react";
+import { a as yr, T as M, C as br, D as gr, P as Z, O as Dr, b as Nr, R as jr } from "./index-3NV-ckDX.mjs";
+import "./ThemeProvider-BJ25_asg.mjs";
+import { u as Pr } from "./useThemePortalContainer-D13Xx24N.mjs";
+import { c as k } from "./bind-CU-R61T-.mjs";
+import { b as B, a as F } from "./button-EVRfctR8.mjs";
+import { H as rr, D as er } from "./heading-xwBuT_-9.mjs";
+import { l as zr } from "./chevron-left.es-UFhf3v35.mjs";
+import { r as Sr } from "./close.es-BPmk2wkU.mjs";
+import { V as tr } from "./visually-hidden-BYFkJEp1.mjs";
+import { R as Cr, V as Or, S as xr, T as kr } from "./index-B8Mazo6u.mjs";
+const or = mr(null), Ar = "_slideUp_9zrj7_1", Er = "_slideDown_9zrj7_1", Vr = "_slideInRight_9zrj7_1", Lr = "_slideInLeft_9zrj7_1", Mr = "_slideOutRight_9zrj7_1", Ur = "_slideOutLeft_9zrj7_1", Yr = "_fadeIn_9zrj7_1", Hr = "_fadeOut_9zrj7_1", Rr = {
+  "purpur-drawer-content": "_purpur-drawer-content_9zrj7_1",
+  slideUp: Ar,
+  slideDown: Er,
+  "purpur-drawer-content--left": "_purpur-drawer-content--left_9zrj7_21",
+  "purpur-drawer-content--right": "_purpur-drawer-content--right_9zrj7_24",
+  "purpur-drawer-content--fit-to-content": "_purpur-drawer-content--fit-to-content_9zrj7_27",
+  slideInRight: Vr,
+  slideInLeft: Lr,
+  slideOutRight: Mr,
+  slideOutLeft: Ur,
+  "purpur-drawer-content__content-container": "_purpur-drawer-content__content-container_9zrj7_63",
+  "purpur-drawer-content__description": "_purpur-drawer-content__description_9zrj7_68",
+  "purpur-drawer-content--ai": "_purpur-drawer-content--ai_9zrj7_78",
+  "purpur-drawer-overlay": "_purpur-drawer-overlay_9zrj7_82",
+  fadeIn: Yr,
+  fadeOut: Hr
+}, Fr = {
+  "purpur-drawer-container--header": "_purpur-drawer-container--header_1csed_1",
+  "purpur-drawer-container--ai": "_purpur-drawer-container--ai_1csed_4",
+  "purpur-drawer-container--body": "_purpur-drawer-container--body_1csed_7",
+  "purpur-drawer-container--sticky": "_purpur-drawer-container--sticky_1csed_15",
+  "purpur-drawer-container--footer": "_purpur-drawer-container--footer_1csed_23"
+}, Ir = k.bind(Fr), U = "purpur-drawer-container", x = P(
+  ({
+    ["data-testid"]: r = "purpur-drawer-container",
+    children: a,
+    className: o,
+    drawerVariant: n = "default",
+    variant: u = "body",
+    stickyFooter: p,
+    ...s
+  }, i) => {
+    const l = Ir([
+      U,
+      {
+        [`${U}--${u}`]: u,
+        [`${U}--sticky`]: p,
+        [`${U}--ai`]: n === "ai"
+      },
+      o
+    ]);
+    return /* @__PURE__ */ e("div", { className: l, "data-testid": r, ref: i, ...s, children: a });
+  }
+);
+x.displayName = "DrawerContainer";
+const Tr = {
+  "purpur-drawer-frame": "_purpur-drawer-frame_vjt35_1",
+  "purpur-drawer-frame--ai": "_purpur-drawer-frame--ai_vjt35_11",
+  "purpur-drawer-frame--without-back-button": "_purpur-drawer-frame--without-back-button_vjt35_14",
+  "purpur-drawer-frame__header": "_purpur-drawer-frame__header_vjt35_14",
+  "purpur-drawer-frame--with-back-button": "_purpur-drawer-frame--with-back-button_vjt35_17",
+  "purpur-drawer-frame--left": "_purpur-drawer-frame--left_vjt35_21",
+  "purpur-drawer-frame--right": "_purpur-drawer-frame--right_vjt35_25",
+  "purpur-drawer-frame--sticky-footer": "_purpur-drawer-frame--sticky-footer_vjt35_36",
+  "purpur-drawer-frame__body": "_purpur-drawer-frame__body_vjt35_42",
+  "purpur-drawer-frame--fit-to-content": "_purpur-drawer-frame--fit-to-content_vjt35_46",
+  "purpur-drawer-frame__footer": "_purpur-drawer-frame__footer_vjt35_55",
+  "purpur-drawer-frame__content-container": "_purpur-drawer-frame__content-container_vjt35_58",
+  "purpur-drawer-frame__content-container--no-footer": "_purpur-drawer-frame__content-container--no-footer_vjt35_63"
+}, Kr = {
+  "purpur-drawer-handle": "_purpur-drawer-handle_lz3ca_1",
+  "purpur-drawer-handle--ai": "_purpur-drawer-handle--ai_lz3ca_22"
+}, qr = (r, a, o, n, u, p) => ({
+  onPointerDown: (t) => {
+    r.current = { y: t.clientY };
+  },
+  onPointerMove: (t) => {
+    if (!r.current)
+      return;
+    const d = t.clientY - r.current.y, _ = !!a.current, w = Math.max(0, d), m = t.pointerType === "touch" ? 10 : 2, c = { y: w }, b = { originalEvent: t, delta: c };
+    _ ? (a.current = c, n(b)) : ar(c, 0) ? (a.current = c, o(), t.target.setPointerCapture(t.pointerId)) : Math.abs(d) > m && (r.current = null);
+  },
+  onPointerUp: (t) => {
+    const d = a.current, _ = t.target;
+    if (_.hasPointerCapture(t.pointerId) && _.releasePointerCapture(t.pointerId), a.current = null, r.current = null, d) {
+      const w = t.currentTarget, m = { originalEvent: t, delta: d };
+      ar(d, 0) && d.y > 200 ? p(m) : u(), w.addEventListener("click", (c) => c.preventDefault(), {
+        once: !0
+      });
+    }
+  }
+}), ar = (r, a = 0) => Math.abs(r.y) > a, Wr = k.bind(Kr), nr = "purpur-drawer-handle", sr = P(
+  ({
+    ["data-testid"]: r = "purpur-drawer-handle",
+    className: a,
+    onSwipeStart: o,
+    onSwipeMove: n,
+    onSwipeCancel: u,
+    onSwipeEnd: p,
+    variant: s = "default",
+    ...i
+  }, l) => {
+    const t = Wr([nr, { [`${nr}--ai`]: s === "ai" }, a]), d = Y.useRef(null), _ = Y.useRef(null), { onPointerDown: w, onPointerMove: m, onPointerUp: c } = qr(
+      _,
+      d,
+      o,
+      n,
+      u,
+      p
+    );
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        className: t,
+        "data-testid": r,
+        onPointerDown: w,
+        onPointerMove: m,
+        onPointerUp: c,
+        ref: l,
+        ...i
+      }
+    );
+  }
+);
+sr.displayName = "DrawerHandle";
+const Xr = {
+  "purpur-drawer-header": "_purpur-drawer-header_1dlfk_1",
+  "purpur-drawer-header__row": "_purpur-drawer-header__row_1dlfk_4",
+  "purpur-drawer-header__row--with-back-button": "_purpur-drawer-header__row--with-back-button_1dlfk_7",
+  "purpur-drawer-header__left": "_purpur-drawer-header__left_1dlfk_10",
+  "purpur-drawer-header__right": "_purpur-drawer-header__right_1dlfk_13",
+  "purpur-drawer-header__close-button": "_purpur-drawer-header__close-button_1dlfk_16",
+  "purpur-drawer-header__back-button--only-icon": "_purpur-drawer-header__back-button--only-icon_1dlfk_27",
+  "purpur-drawer-header__title": "_purpur-drawer-header__title_1dlfk_30"
+}, D = k.bind(Xr), y = "purpur-drawer-header", ir = P(
+  ({
+    ["data-testid"]: r = "purpur-drawer-header",
+    backButton: a,
+    backButtonText: o,
+    backButtonOnlyIcon: n,
+    className: u,
+    closeButtonAriaLabel: p,
+    headerContent: s,
+    onBackButtonClick: i,
+    onCloseClick: l,
+    title: t,
+    variant: d = "default",
+    ..._
+  }, w) => {
+    const m = D([y, { [`${y}--ai`]: d === "ai" }, u]), c = !!(a && o && i), b = d === "ai", A = l ? Y.Fragment : yr;
+    return /* @__PURE__ */ g("div", { className: m, "data-testid": r, ref: w, ..._, children: [
+      /* @__PURE__ */ g(
+        "div",
+        {
+          className: D([
+            `${y}__row`,
+            {
+              [`${y}__row--with-back-button`]: c
+            }
+          ]),
+          "data-testid": `${r}-row`,
+          children: [
+            /* @__PURE__ */ e("div", { className: D(`${y}__left`), children: c ? /* @__PURE__ */ g(
+              B,
+              {
+                "aria-label": n ? o : "",
+                className: D([
+                  `${y}__back-button`,
+                  {
+                    [`${y}__back-button--only-icon`]: n
+                  }
+                ]),
+                "data-testid": `${r}-back-button`,
+                iconOnly: n,
+                negative: b,
+                onClick: i,
+                size: "sm",
+                variant: n ? F.TERTIARY_PURPLE : F.TEXT,
+                children: [
+                  /* @__PURE__ */ e(zr, { size: "sm" }),
+                  !n && o
+                ]
+              }
+            ) : s ? /* @__PURE__ */ g(I, { children: [
+              s,
+              /* @__PURE__ */ e(tr, { asChild: !0, children: /* @__PURE__ */ e(M, { children: t }) })
+            ] }) : /* @__PURE__ */ e(M, { asChild: !0, children: /* @__PURE__ */ e(
+              rr,
+              {
+                className: D(`${y}__title`),
+                "data-testid": `${r}-title`,
+                negative: b,
+                tag: "h2",
+                variant: er.DISPLAY10,
+                tabIndex: -1,
+                children: t
+              }
+            ) }) }),
+            /* @__PURE__ */ e("div", { className: D(`${y}__right`), children: /* @__PURE__ */ e(A, { ...l ? {} : { asChild: !0 }, children: /* @__PURE__ */ e(
+              B,
+              {
+                "aria-label": p,
+                className: D(`${y}__close-button`),
+                iconOnly: !0,
+                negative: b,
+                onClick: l,
+                size: "sm",
+                variant: F.TERTIARY_PURPLE,
+                children: /* @__PURE__ */ e(Sr, { size: "sm" })
+              }
+            ) }) })
+          ]
+        }
+      ),
+      c && (s ? /* @__PURE__ */ g(I, { children: [
+        s,
+        /* @__PURE__ */ e(tr, { asChild: !0, children: /* @__PURE__ */ e(M, { children: t }) })
+      ] }) : /* @__PURE__ */ e(M, { asChild: !0, children: /* @__PURE__ */ e(
+        rr,
+        {
+          "data-testid": `${r}-title-with-back-button`,
+          className: D(`${y}__title`),
+          negative: b,
+          tag: "h2",
+          tabIndex: -1,
+          variant: er.DISPLAY10,
+          children: t
+        }
+      ) }))
+    ] });
+  }
+);
+ir.displayName = "DrawerHeader";
+const Gr = {
+  "purpur-drawer-scroll-area__root": "_purpur-drawer-scroll-area__root_vzgxi_1",
+  "purpur-drawer-scroll-area__root--fit-to-content": "_purpur-drawer-scroll-area__root--fit-to-content_vzgxi_4",
+  "purpur-drawer-scroll-area__viewport": "_purpur-drawer-scroll-area__viewport_vzgxi_10",
+  "purpur-drawer-scroll-area__scrollbar": "_purpur-drawer-scroll-area__scrollbar_vzgxi_14",
+  "purpur-drawer-scroll-area--ai": "_purpur-drawer-scroll-area--ai_vzgxi_25",
+  "purpur-drawer-scroll-area__thumb": "_purpur-drawer-scroll-area__thumb_vzgxi_29"
+}, L = k.bind(Gr), j = "purpur-drawer-scroll-area", T = P(
+  ({
+    ["data-testid"]: r = "purpur-drawer-scroll-area",
+    children: a,
+    className: o,
+    drawerVariant: n = "default",
+    fitToContent: u = !1,
+    ...p
+  }, s) => {
+    const i = L([
+      j,
+      { [`${j}--ai`]: n === "ai" },
+      o
+    ]);
+    return /* @__PURE__ */ e("div", { className: i, "data-testid": r, ref: s, ...p, children: /* @__PURE__ */ g(
+      Cr,
+      {
+        className: L(`${j}__root`, {
+          [`${j}__root--fit-to-content`]: u
+        }),
+        children: [
+          /* @__PURE__ */ e(Or, { className: L(`${j}__viewport`), children: a }),
+          /* @__PURE__ */ e(
+            xr,
+            {
+              className: L(`${j}__scrollbar`),
+              orientation: "vertical",
+              children: /* @__PURE__ */ e(kr, { className: L(`${j}__thumb`) })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+T.displayName = "DrawerScrollArea";
+const C = k.bind(Tr), h = "purpur-drawer-frame", dr = P(
+  ({
+    ["data-testid"]: r = "purpur-drawer-frame",
+    backButton: a,
+    backButtonText: o,
+    backButtonOnlyIcon: n,
+    children: u,
+    className: p,
+    closeButtonAriaLabel: s,
+    fitToContent: i = !1,
+    footerContent: l,
+    headerContent: t,
+    onBackButtonClick: d,
+    onCloseClick: _,
+    onSwipeStart: w,
+    onSwipeMove: m,
+    onSwipeCancel: c,
+    onSwipeEnd: b,
+    title: A,
+    stickyFooter: $,
+    position: z = "right",
+    variant: f = "default",
+    ...S
+  }, E) => {
+    const V = !!(a && o && d), H = f === "ai", R = C([
+      h,
+      {
+        [`${h}--fit-to-content`]: i,
+        [`${h}--sticky-footer`]: $,
+        [`${h}--left`]: z === "left",
+        [`${h}--right`]: z === "right",
+        [`${h}--without-back-button`]: !V,
+        [`${h}--with-back-button`]: V,
+        [`${h}--ai`]: H
+      },
+      p
+    ]);
+    return /* @__PURE__ */ g("div", { className: R, "data-testid": r, ref: E, ...S, children: [
+      /* @__PURE__ */ e(
+        sr,
+        {
+          onSwipeStart: w,
+          onSwipeMove: m,
+          onSwipeCancel: c,
+          onSwipeEnd: b,
+          variant: f
+        }
+      ),
+      /* @__PURE__ */ e(
+        x,
+        {
+          className: C(`${h}__header`),
+          variant: "header",
+          stickyFooter: $,
+          drawerVariant: f,
+          children: /* @__PURE__ */ e(
+            ir,
+            {
+              title: A,
+              headerContent: t,
+              backButtonOnlyIcon: n,
+              backButton: a,
+              backButtonText: o,
+              closeButtonAriaLabel: s,
+              onBackButtonClick: d,
+              onCloseClick: _,
+              variant: f
+            }
+          )
+        }
+      ),
+      $ ? /* @__PURE__ */ g(I, { children: [
+        /* @__PURE__ */ e(
+          T,
+          {
+            className: C(`${h}__body`),
+            "data-testid": `${r}-sticky-footer-scroll-area`,
+            fitToContent: i,
+            drawerVariant: f,
+            children: /* @__PURE__ */ e(x, { stickyFooter: !0, drawerVariant: f, children: u })
+          }
+        ),
+        l && /* @__PURE__ */ e(
+          x,
+          {
+            className: C(`${h}__footer`),
+            "data-testid": `${r}-sticky-footer`,
+            variant: "footer",
+            stickyFooter: $,
+            drawerVariant: f,
+            children: l
+          }
+        )
+      ] }) : /* @__PURE__ */ e(
+        T,
+        {
+          className: C(`${h}__body`),
+          "data-testid": `${r}-scroll-area`,
+          fitToContent: i,
+          drawerVariant: f,
+          children: /* @__PURE__ */ g(
+            "div",
+            {
+              className: C([
+                `${h}__content-container`,
+                { [`${h}__content-container--no-footer`]: !l }
+              ]),
+              children: [
+                /* @__PURE__ */ e(x, { stickyFooter: $, drawerVariant: f, children: u }),
+                l && /* @__PURE__ */ e(
+                  x,
+                  {
+                    "data-testid": `${r}-footer`,
+                    stickyFooter: $,
+                    variant: "footer",
+                    drawerVariant: f,
+                    children: l
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+dr.displayName = "DrawerFrame";
+const Jr = (r, a) => ({
+  onSwipeStart: () => {
+    r.current && r.current.setAttribute("data-swipe", "start");
+  },
+  onSwipeMove: (s) => {
+    if (!r.current)
+      return;
+    const { y: i } = s.delta;
+    r.current.setAttribute("data-swipe", "move"), r.current.style.setProperty("--purpur-drawer-swipe-move-y", `${i}px`);
+  },
+  onSwipeCancel: () => {
+    r.current && (r.current.setAttribute("data-swipe", "cancel"), r.current.style.removeProperty("--purpur-drawer-swipe-move-y"), r.current.style.removeProperty("--purpur-drawer-swipe-end-y"));
+  },
+  onSwipeEnd: (s) => {
+    if (!r.current)
+      return;
+    const { y: i } = s.delta;
+    r.current.setAttribute("data-swipe", "end"), r.current.style.removeProperty("--purpur-drawer-swipe-move-y"), r.current.style.setProperty("--purpur-drawer-swipe-end-y", `${i}px`), a?.(!1);
+  }
+}), O = k.bind(Rr), N = "purpur-drawer-content", ur = P(
+  ({
+    ["data-testid"]: r = "purpur-drawer-content",
+    backButton: a = !1,
+    backButtonText: o,
+    backButtonOnlyIcon: n = !1,
+    bodyText: u,
+    children: p,
+    className: s,
+    closeButtonAriaLabel: i,
+    container: l,
+    disableCloseOnClickOutside: t = !1,
+    fitToContent: d = !1,
+    footerContent: _,
+    headerContent: w,
+    onBackButtonClick: m,
+    onCloseClick: c,
+    stickyFooter: b = !1,
+    title: A,
+    zIndex: $,
+    position: z = "right",
+    ...f
+  }, S) => {
+    const E = $r(or), V = E?.variant ?? "default", H = E?.isModal ?? !0, R = Pr(), q = l === void 0 ? R : l ?? void 0, pr = O([
+      N,
+      {
+        [`${N}--fit-to-content`]: d,
+        [`${N}--left`]: z === "left",
+        [`${N}--right`]: z === "right",
+        [`${N}--ai`]: V === "ai"
+      },
+      s
+    ]), W = Q(null), X = Q(null), lr = (v) => {
+      X.current = v, typeof S == "function" ? S(v) : S && (S.current = v);
+    }, { onSwipeStart: _r, onSwipeMove: wr, onSwipeCancel: hr, onSwipeEnd: fr } = Jr(
+      X,
+      E?.onOpenChange ?? null
+    ), G = /* @__PURE__ */ e(
+      br,
+      {
+        onPointerDownOutside: (v) => {
+          if (t) {
+            v.preventDefault();
+            return;
+          }
+          c && (v.preventDefault(), c());
+        },
+        onEscapeKeyDown: (v) => {
+          c && (v.preventDefault(), c());
+        },
+        onOpenAutoFocus: () => {
+          const v = W.current;
+          if (v) {
+            const J = v.querySelector("h2");
+            J && setTimeout(() => {
+              J.focus();
+            });
+          }
+        },
+        className: pr,
+        "data-testid": r,
+        ref: lr,
+        ...!u && { "aria-describedby": void 0 },
+        ...f,
+        children: /* @__PURE__ */ e(
+          dr,
+          {
+            backButton: a,
+            backButtonText: o,
+            backButtonOnlyIcon: n,
+            closeButtonAriaLabel: i,
+            className: O(`${N}__drawer-frame`),
+            fitToContent: d,
+            footerContent: _,
+            headerContent: w,
+            ref: W,
+            onBackButtonClick: m,
+            onCloseClick: c,
+            onSwipeStart: _r,
+            onSwipeMove: wr,
+            onSwipeCancel: hr,
+            onSwipeEnd: fr,
+            stickyFooter: b,
+            title: A,
+            position: z,
+            variant: V,
+            children: u ? /* @__PURE__ */ g("div", { className: O(`${N}__content-container`), children: [
+              /* @__PURE__ */ e(
+                gr,
+                {
+                  className: O(`${N}__description`),
+                  "data-testid": `${r}-description`,
+                  children: u
+                }
+              ),
+              /* @__PURE__ */ e("div", { children: p })
+            ] }) : p
+          }
+        )
+      }
+    );
+    return H ? /* @__PURE__ */ e(Z, { container: q, children: /* @__PURE__ */ e(
+      Dr,
+      {
+        className: O("purpur-drawer-overlay"),
+        style: $ ? { zIndex: $ } : void 0,
+        "data-testid": `${r}-overlay`,
+        children: G
+      }
+    ) }) : /* @__PURE__ */ e(Z, { container: q, children: /* @__PURE__ */ e(
+      "div",
+      {
+        className: O("purpur-drawer-overlay"),
+        style: $ ? { zIndex: $ } : void 0,
+        "data-testid": `${r}-overlay`,
+        children: G
+      }
+    ) });
+  }
+);
+ur.displayName = "DrawerContent";
+const cr = P(
+  ({ ["data-testid"]: r = "purpur-drawer-trigger", children: a, ...o }, n) => /* @__PURE__ */ e(Nr, { asChild: !0, "data-testid": r, ref: n, ...o, children: a })
+);
+cr.displayName = "DrawerTrigger";
+const K = ({
+  ["data-testid"]: r = "purpur-drawer",
+  children: a,
+  className: o,
+  isModal: n = !0,
+  onOpenChange: u,
+  open: p = !1,
+  variant: s = "default",
+  ...i
+}) => {
+  const [l, t] = Y.useState(p), d = (w) => {
+    t(w), u?.(w);
+  };
+  vr(() => {
+    t(p);
+  }, [p]);
+  const _ = { isModal: n, onOpenChange: d, variant: s };
+  return /* @__PURE__ */ e(or.Provider, { value: _, children: /* @__PURE__ */ e("div", { className: o, "data-testid": r, ...i, children: /* @__PURE__ */ e(jr, { open: l, onOpenChange: d, modal: n, children: a }) }) });
+};
+K.Trigger = cr;
+K.Content = ur;
+K.displayName = "Drawer";
+export {
+  K as D
+};
+//# sourceMappingURL=drawer-Cnk2OKgi.mjs.map