@dmsi/wedgekit-react 2.0.0 → 2.0.1

package/dist/components/Notification.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { clsx as w } from "../node_modules/clsx/dist/clsx.js";
+import { useState as z } from "react";
+import { Button as v } from "./Button.js";
+import { Paragraph as s } from "./Paragraph.js";
+import { Heading3 as j } from "./Heading.js";
+import { Icon as o } from "./Icon.js";
+import { Stack as m } from "./Stack.js";
+const p = {
+  success: {
+    className: "border-success-400",
+    icon: /* @__PURE__ */ e("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ e(o, { name: "check_circle", size: 24 }) })
+  },
+  warning: {
+    className: "border-warning-400",
+    icon: /* @__PURE__ */ e("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ e(o, { name: "warning", size: 24 }) })
+  },
+  error: {
+    className: "border-critical-400",
+    icon: /* @__PURE__ */ e("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ e(o, { name: "error", size: 24 }) })
+  },
+  info: {
+    className: "border-action-400",
+    icon: /* @__PURE__ */ e("span", { className: "text-icon-on-action-secondary-normal contents", children: /* @__PURE__ */ e(o, { name: "info", size: 24 }) })
+  }
+};
+function O({
+  id: t,
+  testid: a,
+  variant: d = "success",
+  title: i,
+  message: c,
+  enableMessage: u = !0,
+  description: r,
+  enableDescription: f = !1,
+  disclaimer: l,
+  enableDisclaimer: h = !1,
+  card: g = !1,
+  ...b
+}) {
+  const [y, N] = z(!0), { className: x, icon: k } = p[d] ?? p.success;
+  return y ? /* @__PURE__ */ n(
+    "div",
+    {
+      id: t,
+      "data-testid": a,
+      className: w(
+        "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap justify-between items-center border-2 rounded-sm w-full p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding bg-white max-w-240",
+        x,
+        g && "shadow-4"
+      ),
+      ...b,
+      children: [
+        /* @__PURE__ */ n(
+          m,
+          {
+            horizontal: !0,
+            horizontalMobile: !0,
+            items: "start",
+            justify: "start",
+            sizing: "layout",
+            children: [
+              k,
+              /* @__PURE__ */ n(m, { elevation: 0, items: "start", justify: "start", sizing: "component", children: [
+                i && /* @__PURE__ */ e(j, { as: "h3", children: i }),
+                c && u && /* @__PURE__ */ e(s, { as: "p", children: c }),
+                r && f && /* @__PURE__ */ e(s, { as: "p", children: r }),
+                l && h && /* @__PURE__ */ e(s, { as: "p", children: l })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          v,
+          {
+            id: t ? `${t}-close-button` : void 0,
+            testid: a ? `${a}-close-button` : void 0,
+            iconOnly: !0,
+            variant: "tertiary",
+            onClick: () => N(!1),
+            leftIcon: /* @__PURE__ */ e(o, { name: "close", size: 24 })
+          }
+        )
+      ]
+    }
+  ) : null;
+}
+export {
+  O as Notification
+};

package/dist/components/OptionPill.js

@@ -0,0 +1,103 @@
+import { jsxs as h, jsx as d } from "react/jsx-runtime";
+import { clsx as n } from "../node_modules/clsx/dist/clsx.js";
+import { componentPadding as y, componentPaddingYUsingComponentGap as k, componentPaddingMinusBorder as w, componentGap as C, baseTransition as N } from "../classNames.js";
+import { Button as O } from "./Button.js";
+import { Label as P } from "./Label.js";
+import { Icon as $ } from "./Icon.js";
+function L({
+  id: e,
+  testid: o,
+  selected: a = !1,
+  onClick: l,
+  onRemove: i,
+  removable: r = !1,
+  active: c = !1,
+  disabled: t = !1,
+  nowrap: s = !1,
+  children: p,
+  className: m,
+  ...b
+}) {
+  const u = {
+    "data-disabled": t || null,
+    "data-selected": a || null,
+    "data-active": c || null
+  }, f = n(
+    {
+      // Base interactive (only when not disabled)
+      "hover:border-border-action-hover active:border-border-action-active": !t,
+      // Disabled base
+      "data-disabled:cursor-default data-disabled:border-border-primary-normal": t,
+      // Active (Figma: filled blue background, white text)
+      "data-active:bg-background-action-primary-normal data-active:text-white data-active:border-transparent": c && !a,
+      // Selected (filled style) overrides background & border, but keeps outline interaction chain.
+      "data-selected:border-transparent data-selected:bg-background-action-secondary-hover data-selected:outline-border-action-normal data-selected:hover:outline-border-action-hover data-selected:active:outline-border-action-active": a,
+      // Disabled + Selected combination
+      "data-selected:data-disabled:bg-background-action-secondary-disabled data-selected:data-disabled:border-border-action-disabled data-selected:data-disabled:outline-transparent": t && a
+    },
+    !r && y,
+    r && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding"
+  ), v = n(
+    !t && "text-text-primary-normal",
+    t && !a && "text-text-primary-disabled",
+    t && a && "text-text-on-action-primary-disabled"
+  );
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      id: e,
+      "data-testid": o,
+      onClick: x,
+      ...b,
+      ...u,
+      className: n(
+        "flex items-center justify-between cursor-pointer w-fit",
+        s && "shrink-0 whitespace-nowrap",
+        "border border-border-primary-normal rounded-base",
+        "outline-2 outline-transparent -outline-offset-2",
+        C,
+        N,
+        f,
+        m,
+        v
+      ),
+      children: [
+        /* @__PURE__ */ d(
+          P,
+          {
+            id: e ? `${e}-label` : void 0,
+            testid: o ? `${o}-label` : void 0,
+            padded: !0,
+            className: k,
+            children: p
+          }
+        ),
+        r && /* @__PURE__ */ d(
+          O,
+          {
+            id: e ? `${e}-remove-button` : void 0,
+            testid: o ? `${o}-remove-button` : void 0,
+            onClick: g,
+            disabled: t,
+            className: n(
+              "mx-0 h-full w-10 !border-0",
+              w
+            ),
+            iconOnly: !0,
+            variant: "tertiary",
+            leftIcon: /* @__PURE__ */ d($, { name: "close", size: 16 })
+          }
+        )
+      ]
+    }
+  );
+  function x() {
+    t || l?.();
+  }
+  function g() {
+    !r || !i || i();
+  }
+}
+export {
+  L as OptionPill
+};

package/dist/components/OrderCheckIcon.js

@@ -0,0 +1,28 @@
+import { jsx as C } from "react/jsx-runtime";
+function r({
+  testid: t,
+  ...e
+}) {
+  return /* @__PURE__ */ C(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 37 36",
+      fill: "none",
+      width: 37,
+      height: 36,
+      "data-testid": t,
+      ...e,
+      children: /* @__PURE__ */ C(
+        "path",
+        {
+          d: "M18.457 3.00024C19.6493 3.01827 20.8644 3.13827 22.0283 3.41724C22.8321 3.61234 23.3287 4.42237 23.1337 5.22778C22.9402 6.03178 22.1252 6.5272 21.3242 6.33521C20.3928 6.11026 19.4046 6.01526 18.4658 6.00024C15.2603 6.00924 12.2492 7.26586 9.99018 9.53833C7.72976 11.8108 6.49103 14.829 6.49995 18.0344C6.50895 21.2399 7.7656 24.2495 10.038 26.51C12.303 28.7615 15.3065 30.0002 18.4999 30.0002H18.5341C21.7396 29.9912 24.7507 28.7346 27.0097 26.4622C29.2701 24.1882 30.5089 21.1714 30.4999 17.9661C30.4984 17.1382 31.1673 16.4629 31.9951 16.4612H31.9999C32.8263 16.4612 33.4982 17.13 33.4999 17.9563C33.5119 21.9627 31.9625 25.7354 29.1367 28.5764C26.3123 31.4173 22.5503 32.9881 18.5439 33.0002H18.4999C14.5086 33.0002 10.7542 31.4523 7.92378 28.637C5.08288 25.8126 3.51206 22.0505 3.49995 18.0442C3.48795 14.0363 5.03742 10.265 7.86323 7.42407C10.6877 4.58307 14.4505 3.01224 18.457 3.00024ZM27.872 9.51196C28.418 8.89248 29.3642 8.82637 29.9882 9.37231C30.6107 9.91681 30.6739 10.8645 30.1279 11.4885L19.6279 23.4885C19.3549 23.8004 18.9652 23.9852 18.5498 24.0002H18.4999C18.1025 24.0002 17.7214 23.8428 17.4394 23.5608L12.9394 19.0608C12.3529 18.4743 12.353 17.5262 12.9394 16.9397C13.5259 16.3532 14.474 16.3532 15.0605 16.9397L18.4267 20.3059L27.872 9.51196Z",
+          fill: "#1D1E1E"
+        }
+      )
+    }
+  );
+}
+export {
+  r as OrderCheckIcon
+};

package/dist/components/PDFViewer/DownloadIcon.js

@@ -0,0 +1,25 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Button as m } from "../Button.js";
+import { Icon as e } from "../Icon.js";
+import { Tooltip as a } from "../Tooltip.js";
+function f({
+  onClick: t,
+  isDownloading: n,
+  testid: r,
+  colorClassName: i
+}) {
+  return /* @__PURE__ */ o(a, { message: "Download", position: "bottom", children: /* @__PURE__ */ o(
+    m,
+    {
+      testid: r,
+      iconOnly: !0,
+      variant: "tertiary",
+      colorClassName: i,
+      leftIcon: /* @__PURE__ */ o(e, { name: n ? "cached" : "download" }),
+      onClick: t
+    }
+  ) });
+}
+export {
+  f as DownloadIcon
+};

package/dist/components/PDFViewer/PDFElement.js

@@ -0,0 +1,77 @@
+import { jsx as e } from "react/jsx-runtime";
+import { usePdf as p } from "../../node_modules/@mikecousins/react-pdf/dist/index.js";
+import { useRef as c } from "react";
+import { Spinner as s } from "../Spinner.js";
+import { Stack as f } from "../Stack.js";
+import { PdfPage as u } from "./PDFPage.js";
+import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
+function w({
+  b64: n,
+  testid: r,
+  isMobile: a,
+  error: o
+}) {
+  const i = c(null), { pdfDocument: d } = p({
+    file: `data:application/pdf;base64,${n}`,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    scale: a ? 1 : 1.3,
+    canvasRef: i
+  }), l = new Array(d?.numPages ?? 1).fill(null);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "flex flex-col space-y-4",
+      style: a ? void 0 : {
+        minHeight: 871,
+        minWidth: 654
+      },
+      children: d && n && !o ? /* @__PURE__ */ e(f, { sizing: "layout-group", children: l.length > 1 ? l.map((g, t) => /* @__PURE__ */ e(
+        "div",
+        {
+          className: m(
+            "flex justify-center border-border-primary-normal",
+            a ? "border-0" : "border"
+          ),
+          children: /* @__PURE__ */ e(
+            u,
+            {
+              testid: r ? `${r}-pdf_page_${t + 1}` : void 0,
+              file: `data:application/pdf;base64,${n}`,
+              pageNumber: t + 1
+            }
+          )
+        },
+        `${r}-pdf-page-${t + 1}`
+      )) : /* @__PURE__ */ e(
+        "div",
+        {
+          className: m(
+            "flex justify-center border-border-primary-normal",
+            a ? "border-0" : "border"
+          ),
+          children: /* @__PURE__ */ e(
+            "canvas",
+            {
+              "data-testid": r ? `${r}-pdf-content` : void 0,
+              ref: i,
+              style: { width: "100%", height: "auto" }
+            }
+          )
+        }
+      ) }) : /* @__PURE__ */ e(
+        f,
+        {
+          justify: "center",
+          items: "center",
+          height: "full",
+          flexGrow: 1,
+          "data-testid": r ? `${r}-pdf-${o ? "error" : "loading"}` : void 0,
+          children: o || /* @__PURE__ */ e(s, { size: "large" })
+        }
+      )
+    }
+  );
+}
+export {
+  w as PDFElement
+};

package/dist/components/PDFViewer/PDFNavigation.js

@@ -0,0 +1,64 @@
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { Button as o } from "../Button.js";
+import { Heading3 as h } from "../Heading.js";
+import { Icon as a } from "../Icon.js";
+import { Paragraph as u } from "../Paragraph.js";
+import { Stack as c } from "../Stack.js";
+function k({
+  currentIndex: d,
+  total: l,
+  onPrev: m,
+  onNext: p,
+  disablePrev: f,
+  disableNext: s,
+  extraActions: e,
+  testid: i,
+  fileName: t
+}) {
+  return /* @__PURE__ */ r("div", { className: "w-full", children: /* @__PURE__ */ n(
+    c,
+    {
+      horizontal: !0,
+      items: "center",
+      justify: "between",
+      sizing: "layout-group",
+      testid: i ? `${i}-pdf-navigation` : void 0,
+      children: [
+        /* @__PURE__ */ n(c, { horizontal: !0, items: "center", children: [
+          /* @__PURE__ */ r(
+            o,
+            {
+              iconOnly: !0,
+              variant: "tertiary",
+              onClick: m,
+              leftIcon: /* @__PURE__ */ r(a, { name: "chevron_backward" }),
+              disabled: f,
+              testid: i ? `${i}-pdf-file-previous-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ n(h, { className: "text-text-primary-normal whitespace-nowrap", children: [
+            d + 1,
+            " / ",
+            l
+          ] }),
+          /* @__PURE__ */ r(
+            o,
+            {
+              iconOnly: !0,
+              variant: "tertiary",
+              onClick: p,
+              rightIcon: /* @__PURE__ */ r(a, { name: "chevron_forward" }),
+              disabled: s,
+              testid: i ? `${i}-pdf-file-next-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ r(u, { children: t?.endsWith(".pdf") ? t : `${t}.pdf` })
+        ] }),
+        e && /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: e })
+      ]
+    }
+  ) });
+}
+export {
+  k as PdfNavigation
+};

package/dist/components/PDFViewer/PDFPage.js

@@ -0,0 +1,28 @@
+import { jsx as n } from "react/jsx-runtime";
+import { usePdf as a } from "../../node_modules/@mikecousins/react-pdf/dist/index.js";
+import { useRef as i } from "react";
+function p({
+  file: t,
+  pageNumber: e,
+  testid: o,
+  isMobile: s
+}) {
+  const r = i(null), { pdfDocument: f } = a({
+    file: t,
+    page: e,
+    canvasRef: r,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    scale: s ? 1 : 1.3
+  });
+  return f ? /* @__PURE__ */ n(
+    "canvas",
+    {
+      ref: r,
+      "data-testid": o,
+      style: { width: "100%", height: "auto" }
+    }
+  ) : null;
+}
+export {
+  p as PdfPage
+};

package/dist/components/PDFViewer/index.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx as r, jsxs as P } from "react/jsx-runtime";
+import { useState as f, useCallback as D } from "react";
+import { Modal as I } from "../Modal.js";
+import { PDFElement as F } from "./PDFElement.js";
+import { DownloadIcon as L } from "./DownloadIcon.js";
+import { PdfNavigation as R } from "./PDFNavigation.js";
+import { Link as U } from "../Link.js";
+import { Stack as A } from "../Stack.js";
+import { Caption as j } from "../Caption.js";
+function G(h) {
+  const {
+    isOpen: p,
+    onClose: u,
+    encodedPdfs: e,
+    customActions: s,
+    testid: a,
+    isMobile: t,
+    title: b,
+    customFooter: m = !1,
+    withPagination: w = !0,
+    error: g,
+    showMobileDownload: k = !1
+  } = h, [o, c] = f(0), [v, d] = f(!1), x = D(() => {
+    if (d(!0), e[o].downloadURL && !e[o].base64) {
+      const i = document.createElement("a");
+      i.href = e[o].downloadURL || "", i.target = "_blank", i.rel = "noopener noreferrer", document.body.appendChild(i), i.click(), document.body.removeChild(i), d(!1);
+      return;
+    }
+    const n = document.createElement("a"), l = e[o];
+    if (!l) {
+      d(!1);
+      return;
+    }
+    n.href = l.base64 ? `data:application/pdf;base64,${l.base64}` : l.downloadURL || "", n.download = l.fileName.endsWith(".pdf") ? l.fileName : `${l.fileName}.pdf`, document.body.appendChild(n), n.click(), document.body.removeChild(n), d(!1);
+  }, [o, e]);
+  if (!e.length) return null;
+  function C() {
+    o < e.length - 1 && c((n) => n + 1);
+  }
+  function N() {
+    o > 0 && c((n) => n - 1);
+  }
+  function y() {
+    c(0), d(!1), u();
+  }
+  return /* @__PURE__ */ r(
+    I,
+    {
+      testid: a,
+      open: p,
+      customFooter: m,
+      onClose: y,
+      noWrapper: !0,
+      closeOnBackdropClick: !1,
+      showButtons: t ? m && !!s : !!e.length,
+      customActions: e.length && !t && w ? /* @__PURE__ */ r(
+        R,
+        {
+          testid: a,
+          currentIndex: o,
+          total: e.length,
+          onPrev: N,
+          onNext: C,
+          disablePrev: o === 0,
+          disableNext: o === e.length - 1,
+          extraActions: s,
+          fileName: e[o].fileName
+        }
+      ) : s,
+      headerIconAlign: "right",
+      headerIcon: !t || k ? /* @__PURE__ */ r(
+        L,
+        {
+          testid: a ? `${a}-download-icon` : void 0,
+          onClick: x,
+          isDownloading: v,
+          colorClassName: t ? "text-white" : void 0
+        }
+      ) : void 0,
+      title: t ? b ?? e[o].fileName : void 0,
+      size: t ? "screen" : "large",
+      headerClassname: "bg-brand-400 desktop:bg-background-grouped-primary-normal p-mobile-layout-padding text-brand-text-action-primary-normal",
+      headerIconClassname: "text-white desktop:text-icon-primary-normal",
+      children: !e[o].base64 && e[o].downloadURL ? /* @__PURE__ */ P(
+        A,
+        {
+          sizing: "layout",
+          justify: "center",
+          items: "center",
+          height: "full",
+          flexGrow: 1,
+          style: t ? void 0 : {
+            minHeight: "77dvh",
+            minWidth: "30dvw"
+          },
+          children: [
+            /* @__PURE__ */ r(j, { children: "No preview available for this document. Please follow the link below to download." }),
+            /* @__PURE__ */ r(
+              U,
+              {
+                href: e[o].downloadURL,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: e[o].fileName || "Download PDF"
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ r(
+        F,
+        {
+          testid: a,
+          b64: e[o].base64,
+          isMobile: t,
+          error: g
+        }
+      )
+    }
+  );
+}
+export {
+  G as PDFViewer
+};

package/dist/components/Pagination.js

@@ -0,0 +1,117 @@
+import { jsxs as g, jsx as n } from "react/jsx-runtime";
+import { useCallback as w, useMemo as k } from "react";
+import { clsx as t } from "../node_modules/clsx/dist/clsx.js";
+import { Icon as f } from "./Icon.js";
+import { paddingUsingComponentGap as N } from "../classNames.js";
+import { Subheader as $ } from "./Subheader.js";
+function S({
+  totalPages: o,
+  currentPage: e,
+  onPageChange: u,
+  id: h,
+  testid: d,
+  className: y,
+  disabled: s
+}) {
+  const m = w(
+    (r) => {
+      s || u(r);
+    },
+    [u, s]
+  ), x = (r) => {
+    s || (r.key === "ArrowLeft" ? (r.preventDefault(), m(e - 1)) : r.key === "ArrowRight" && (r.preventDefault(), m(e + 1)));
+  }, v = k(() => {
+    if (o <= 5)
+      return Array.from({ length: o }, (a, l) => l + 1);
+    const r = /* @__PURE__ */ new Set();
+    r.add(1), r.add(o), e <= 3 ? (r.add(2), r.add(3), r.add(4)) : e >= o - 2 ? (r.add(o - 1), r.add(o - 2), r.add(o - 3)) : (r.add(e - 1), r.add(e), r.add(e + 1));
+    const b = Array.from(r).sort((a, l) => a - l), i = [];
+    for (let a = 0; a < b.length; a++) {
+      const l = b[a], p = b[a - 1];
+      a > 0 && (l - p === 2 ? i.push(p + 1) : l - p > 2 && i.push("ellipsis")), i.push(l);
+    }
+    return i;
+  }, [o, e]);
+  if (o <= 1) return null;
+  const c = t(
+    "cursor-pointer disabled:cursor-default",
+    N,
+    "w-8 h-8",
+    "flex items-center justify-center",
+    "bg-transparent",
+    "box-content",
+    "hover:bg-background-grouped-secondary-normal",
+    "focus:bg-background-grouped-secondary-normal focus:outline-0",
+    "disabled:bg-transparent disabled:text-text-action-primary-disabled"
+  );
+  return /* @__PURE__ */ g(
+    "nav",
+    {
+      id: h,
+      "data-testid": d,
+      "aria-label": "Pagination",
+      onKeyDown: x,
+      className: t(
+        "flex items-center",
+        "border border-border-primary-normal",
+        "bg-background-grouped-primary-normal",
+        "rounded-sm",
+        y
+      ),
+      children: [
+        /* @__PURE__ */ n(
+          "button",
+          {
+            "data-testid": d ? `${d}-previous-button` : void 0,
+            disabled: s || e <= 1,
+            "aria-label": "Previous page",
+            onClick: () => m(e - 1),
+            className: t(c, "border-r-1 border-border-primary-normal"),
+            children: /* @__PURE__ */ n(f, { name: "keyboard_arrow_left" })
+          }
+        ),
+        /* @__PURE__ */ n("ul", { className: t("flex items-center"), children: v.map((r, b) => {
+          if (r === "ellipsis")
+            return /* @__PURE__ */ n(
+              "li",
+              {
+                className: "w-8 h-8 select-none text-text-action-primary-disabled",
+                children: "…"
+              },
+              `ellipsis-${b}`
+            );
+          const i = r === e;
+          return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+            "button",
+            {
+              "data-testid": d ? `${d}-page-${r}-button` : void 0,
+              "aria-label": `Page ${r}`,
+              "aria-current": i ? "page" : void 0,
+              disabled: s,
+              onClick: () => m(r),
+              className: t(
+                c,
+                i && "border-x-1 bg-background-grouped-secondary-normal border-border-primary-normal"
+              ),
+              children: /* @__PURE__ */ n($, { align: "center", weight: "bold", children: r })
+            }
+          ) }, r);
+        }) }),
+        /* @__PURE__ */ n(
+          "button",
+          {
+            "data-testid": d ? `${d}-next-button` : void 0,
+            disabled: s || e >= o,
+            "aria-label": "Next page",
+            onClick: () => m(e + 1),
+            className: t(c, "border-l-1 border-border-primary-normal"),
+            children: /* @__PURE__ */ n(f, { name: "keyboard_arrow_right" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  S as Pagination
+};