@purpur/library 9.3.0 → 9.4.0

package/dist/date-picker.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./date-picker-DVrcu2QU.js");exports.DatePicker=e.DatePicker;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./date-picker-DYXNB5aU.js");exports.DatePicker=e.DatePicker;
 //# sourceMappingURL=date-picker.cjs.js.map

package/dist/date-picker.es.js

@@ -1,4 +1,4 @@
-import { D as a } from "./date-picker-DwFDRL5Z.mjs";
+import { D as a } from "./date-picker-CbUNbOhn.mjs";
 export {
   a as DatePicker
 };

package/dist/drawer-8Acg4wkV.mjs

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