@dmsi/wedgekit-react 2.0.0 → 2.0.1

package/dist/components/ProductImagePreview/index.js

@@ -0,0 +1,189 @@
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { Thumbnail as x } from "./Thumbnail.js";
+import { Stack as $ } from "../Stack.js";
+import { Grid as D } from "../Grid.js";
+import { ProductPrimaryImage as G } from "./ProductPrimaryImage.js";
+import { ZoomWindow as K } from "./ZoomWindow.js";
+import { CarouselPagination as L } from "./CarouselPagination.js";
+import { MobileImageCarousel as U } from "./MobileImageCarousel.js";
+import { useMatchesMobile as V } from "../../hooks/useMatchesMedia.js";
+import { useState as q, useMemo as P, useCallback as B, useEffect as H } from "react";
+import { useProductImagePreview as J } from "./useProductImagePreview.js";
+const y = "/placeholder.svg";
+function Q(c) {
+  const a = c?.trim();
+  return !!a && a !== y && !a.endsWith("/placeholder.svg") && !a.includes("/placeholder.svg?");
+}
+function me(c) {
+  const {
+    width: a = 483,
+    height: d = 483,
+    thumbsPerRow: h = 4,
+    zoomEnabled: g = !1,
+    scrollToZoomEnabled: u = !1,
+    images: l,
+    currentIndex: z,
+    onChangeIndex: w,
+    zoomLensSize: E,
+    zoomFactor: S = 2,
+    zoomWindowScaleFactor: C = 2.5,
+    zoomWindowOffset: Z = 10,
+    testid: k
+  } = c, [f, p] = q([]), F = P(
+    () => l.map((e) => e.src).join("|"),
+    [l]
+  ), t = P(
+    () => l.filter(
+      (e) => Q(e.src) && f.indexOf(e.src) === -1
+    ),
+    [f, l]
+  ), n = B((e) => {
+    e && p(
+      (o) => o.indexOf(e) >= 0 ? o : [...o, e]
+    );
+  }, []);
+  H(() => {
+    p([]);
+  }, [F]);
+  const i = V(), {
+    zoomPoint: W,
+    zoomActive: T,
+    currentZoomFactor: j,
+    primaryImagePosition: M,
+    safeIndex: m,
+    active: I,
+    primaryImageRef: N,
+    handleSelect: s,
+    handleZoomPositionChange: A,
+    handleScrollZoom: O
+  } = J({
+    images: t,
+    currentIndex: z,
+    zoomEnabled: g,
+    zoomFactor: S,
+    scrollToZoomEnabled: u,
+    onChangeIndex: w,
+    isMobile: i
+  });
+  if (typeof i > "u") return null;
+  if (i && !t.length)
+    return /* @__PURE__ */ r(
+      "img",
+      {
+        src: y,
+        alt: "Placeholder Image",
+        draggable: !1,
+        loading: "eager",
+        style: {
+          aspectRatio: "1 / 1",
+          objectFit: "cover",
+          height: "100%",
+          width: "100%"
+        }
+      }
+    );
+  const b = g && !i, R = t.length > 1;
+  return /* @__PURE__ */ v(
+    $,
+    {
+      sizing: "layout-group",
+      style: { width: a, position: "relative" },
+      testid: k,
+      children: [
+        /* @__PURE__ */ r("div", { className: "hidden md:block", children: /* @__PURE__ */ v("div", { className: "flex gap-4 items-start", children: [
+          /* @__PURE__ */ r("div", { ref: N, children: /* @__PURE__ */ r(
+            G,
+            {
+              image: I,
+              width: a,
+              height: d,
+              zoomEnabled: b,
+              zoomLensSize: E,
+              scrollToZoomEnabled: u && !i,
+              onZoomPositionChange: A,
+              onScrollZoom: O,
+              isPlaceholder: t.length === 0,
+              onImageError: n
+            }
+          ) }),
+          b && /* @__PURE__ */ r(
+            K,
+            {
+              image: I,
+              width: a,
+              height: d,
+              pointer: W,
+              active: T,
+              zoomFactor: j,
+              scaleFactor: C,
+              primaryImagePosition: M,
+              offset: Z
+            }
+          )
+        ] }) }),
+        i && /* @__PURE__ */ r(
+          U,
+          {
+            images: t,
+            currentIndex: m,
+            width: a,
+            height: d,
+            onChangeIndex: s,
+            onImageError: n
+          }
+        ),
+        R && /* @__PURE__ */ r("div", { className: "hidden md:block", children: t.length <= 3 ? /* @__PURE__ */ r(
+          "div",
+          {
+            className: "flex justify-center gap-4",
+            style: { width: "100%", maxWidth: a },
+            "aria-label": "Product image thumbnails",
+            children: t.map((e, o) => /* @__PURE__ */ r("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ r(
+              x,
+              {
+                src: e.src,
+                alt: e.alt || `Thumbnail ${o + 1}`,
+                isActive: o === m,
+                onClick: () => s(o),
+                onImageError: n
+              }
+            ) }, e.src + o))
+          }
+        ) : /* @__PURE__ */ r(
+          D,
+          {
+            sizing: "layout-group",
+            "aria-label": "Product image thumbnails",
+            style: {
+              width: "100%",
+              maxWidth: a
+            },
+            columns: h > 12 ? 12 : h < 1 ? 1 : h,
+            children: t.map((e, o) => /* @__PURE__ */ r(
+              x,
+              {
+                src: e.src,
+                alt: e.alt || `Thumbnail ${o + 1}`,
+                isActive: o === m,
+                onClick: () => s(o),
+                onImageError: n
+              },
+              e.src + o
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          L,
+          {
+            images: t,
+            currentIndex: m,
+            onSelect: s
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  me as ProductImagePreview
+};

package/dist/components/ProductImagePreview/useProductImagePreview.js

@@ -0,0 +1,85 @@
+import { useMemo as O, useState as u, useRef as P, useEffect as Z, useCallback as i } from "react";
+function B(b) {
+  const {
+    images: o,
+    currentIndex: m,
+    zoomEnabled: E = !1,
+    zoomFactor: d = 2,
+    scrollToZoomEnabled: p = !1,
+    onChangeIndex: s,
+    isMobile: a = !1
+  } = b, r = !!o?.length, n = r && m >= 0 && m < o.length ? m : 0, x = O(() => r ? o[n] : void 0, [r, o, n]), [z, F] = u(null), [C, R] = u(!1), [f, g] = u(d), [A, L] = u(null), v = P(null), l = P(null), h = E && !a, w = p && !a;
+  Z(() => {
+    if (!h) return;
+    const e = () => {
+      const t = v.current;
+      if (!t) return;
+      const c = () => {
+        t && L(t.getBoundingClientRect());
+      };
+      c();
+      const I = new ResizeObserver(c);
+      I.observe(t), window.addEventListener("scroll", c), window.addEventListener("resize", c), l.current = () => {
+        I.disconnect(), window.removeEventListener("scroll", c), window.removeEventListener("resize", c);
+      };
+    };
+    if (v.current)
+      e();
+    else {
+      const t = requestAnimationFrame(e);
+      return () => cancelAnimationFrame(t);
+    }
+    return () => {
+      l.current && (l.current(), l.current = null);
+    };
+  }, [h]);
+  const M = i(
+    (e) => {
+      e !== n && s(e);
+    },
+    [n, s]
+  ), S = i(() => {
+    if (!r) return;
+    const e = (n + 1) % o.length;
+    s(e);
+  }, [r, n, o.length, s]), y = i(() => {
+    if (!r) return;
+    const e = n === 0 ? o.length - 1 : n - 1;
+    s(e);
+  }, [r, n, o.length, s]), T = i(
+    (e, t) => {
+      a || (F(e), R(t));
+    },
+    [a]
+  ), k = i(
+    (e) => {
+      if (!w) return;
+      const t = Math.max(1, Math.min(5, f + e));
+      g(t);
+    },
+    [w, f]
+  );
+  return Z(() => {
+    g(d);
+  }, [d]), {
+    // State
+    zoomPoint: z,
+    zoomActive: C,
+    currentZoomFactor: f,
+    primaryImagePosition: A,
+    hasImages: r,
+    safeIndex: n,
+    active: x,
+    // Refs
+    primaryImageRef: v,
+    // Handlers
+    handleSelect: M,
+    handleZoomPositionChange: T,
+    handleScrollZoom: k,
+    handleNext: S,
+    handlePrevious: y
+  };
+}
+export {
+  B as useProductImagePreview
+};

package/dist/components/ProjectBar.js

@@ -0,0 +1,54 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { clsx as r } from "../node_modules/clsx/dist/clsx.js";
+import { layoutGroupGap as a, paddingYUsingLayoutGroupGap as s, containerPaddingX as p, layoutGap as v } from "../classNames.js";
+import { useMatchesMobile as u } from "../hooks/useMatchesMedia.js";
+import "react";
+function g({
+  left: c,
+  right: e,
+  mobileLeft: i,
+  mobileRight: l,
+  id: t,
+  testid: n
+}) {
+  const d = u() ? {
+    "--color-background-primary-normal": "var(--color-brand-400)",
+    "--color-background-action-primary-normal": "var(--color-neutral-000)",
+    "--color-background-action-primary-hover": "var(--color-critical-100)",
+    "--color-background-action-primary-active": "var(--color-neutral-200)",
+    "--color-background-action-secondary-normal": "var(--color-brand-400)",
+    "--color-background-action-secondary-hover": "var(--color-critical-100)",
+    "--color-text-on-action-primary-normal": "var(--color-brand-400)",
+    "--color-text-primary-normal": "var(--color-neutral-000)",
+    "--color-text-action-primary-normal": "var(--color-neutral-000)",
+    "--color-text-action-primary-hover": "var(--color-critical-500)",
+    "--color-text-action-primary-active": "var(--color-critical-300)",
+    "--color-border-action-normal": "var(--color-neutral-000)",
+    "--color-border-action-hover": "var(--color-critical-500)",
+    "--color-border-action-active": "var(--color-critical-300)"
+  } : {};
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      id: t,
+      "data-testid": n,
+      style: { ...d },
+      className: r(
+        "flex items-center justify-between",
+        "bg-background-primary-normal text-text-primary-normal",
+        s,
+        p,
+        v
+      ),
+      children: [
+        /* @__PURE__ */ o("div", { className: r("hidden desktop:block flex-1 leading-[1]"), children: c }),
+        /* @__PURE__ */ o("div", { className: r("hidden desktop:flex items-center", a), children: e }),
+        /* @__PURE__ */ o("div", { className: r("flex flex-col desktop:hidden"), children: i }),
+        /* @__PURE__ */ o("div", { className: r("flex items-center desktop:hidden", a), children: l })
+      ]
+    }
+  );
+}
+export {
+  g as ProjectBar
+};

package/dist/components/Radio.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { clsx as r } from "../node_modules/clsx/dist/clsx.js";
+import { baseTransition as x, componentGap as g } from "../classNames.js";
+import { Paragraph as f } from "./Paragraph.js";
+function $({
+  className: i,
+  label: s,
+  error: c,
+  disabled: e,
+  checked: l,
+  readOnly: n,
+  id: p,
+  testid: a,
+  ...v
+}) {
+  const t = p, b = e ? "text-primary-disabled" : c ? "text-primary-error" : "text-primary-normal", h = r(
+    !c && !e && "border-border-primary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-focus:border-border-action-hover peer-focus:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active peer-checked:border-0 peer-checked:bg-background-action-secondary-hover"
+  ), y = r(
+    c && !e && "border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-focus:border-border-action-critical-hover peer-focus:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active peer-checked:bg-background-action-critical-secondary-hover peer-checked:border-0 "
+  ), m = r(
+    e && "peer-disabled:bg-background-action-secondary-disabled peer-disabled:border-border-primary-normal peer-checked:border-0"
+  ), u = r(
+    n && "peer-read-only:bg-background-action-secondary-disabled peer-read-only:border-border-primary-normal peer-checked:border-0"
+  );
+  return /* @__PURE__ */ d(
+    "label",
+    {
+      htmlFor: t,
+      "data-testid": a,
+      className: r(
+        "flex items-center",
+        g,
+        e ? "cursor-default" : "cursor-pointer",
+        i
+      ),
+      children: [
+        /* @__PURE__ */ d("div", { className: "relative", children: [
+          /* @__PURE__ */ o(
+            "input",
+            {
+              id: t,
+              "data-testid": a ? `${a}-input` : void 0,
+              type: "radio",
+              className: "sr-only peer",
+              disabled: e,
+              checked: l,
+              readOnly: n,
+              ...v
+            }
+          ),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: r(
+                "size-6 rounded-full border flex items-center justify-center",
+                x,
+                h,
+                y,
+                m,
+                u
+              ),
+              children: l && /* @__PURE__ */ o(
+                k,
+                {
+                  className: r(
+                    "transition-colors",
+                    !c && !e && "text-icon-on-action-secondary-normal hover:text-icon-on-action-secondary-hover active:text-icon-on-action-secondary-active peer-hover:text-icon-on-action-secondary-hover peer-focus:text-icon-on-action-secondary-hover peer-active:text-icon-on-action-secondary-active",
+                    c && !e && "text-icon-action-critical-secondary-normal hover:text-icon-action-critical-secondary-hover active:text-icon-action-critical-secondary-active peer-hover:text-icon-action-critical-secondary-hover peer-focus:text-icon-action-critical-secondary-hover peer-active:text-icon-action-critical-secondary-active",
+                    e && "text-icon-on-action-secondary-disabled",
+                    n && "text-icon-on-action-secondary-disabled"
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        s && /* @__PURE__ */ o(f, { id: t ? `${t}-label` : void 0, testid: a ? `${a}-label` : void 0, padded: !0, color: b, children: s })
+      ]
+    }
+  );
+}
+function k({ className: i }) {
+  return /* @__PURE__ */ d(
+    "svg",
+    {
+      className: i,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ o(
+          "rect",
+          {
+            x: "1",
+            y: "1",
+            width: "22",
+            height: "22",
+            rx: "11",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          }
+        ),
+        /* @__PURE__ */ o("rect", { x: "4", y: "4", width: "16", height: "16", rx: "8", fill: "currentColor" })
+      ]
+    }
+  );
+}
+export {
+  $ as Radio
+};

package/dist/components/Search.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsxs as k, Fragment as C, jsx as R } from "react/jsx-runtime";
+import { useRef as a, useState as S, useId as $, useEffect as M } from "react";
+import { Input as j } from "./Input.js";
+function T({
+  id: r,
+  testid: u,
+  label: q,
+  error: v,
+  children: A,
+  readOnly: f,
+  renderMenu: s,
+  onClick: F,
+  wrapperClassName: I,
+  removeRoundness: g,
+  autocompletePadding: x = !1,
+  ...n
+}) {
+  const m = a(null), d = a(null), p = a(!0), [c, l] = S(!1), [D, w] = S(!1), h = `search-menu-${$()}`;
+  return M(() => {
+    if (p.current) {
+      p.current = !1;
+      return;
+    }
+    m.current?.focus();
+  }, [n.value]), /* @__PURE__ */ k(C, { children: [
+    /* @__PURE__ */ R(
+      j,
+      {
+        id: r,
+        testid: u,
+        variant: "search",
+        inputContainerRef: d,
+        ref: m,
+        label: q,
+        wrapperClassName: I,
+        autocompletePadding: x,
+        onClick: (t) => {
+          if (!(n.disabled || f)) {
+            if (D) {
+              w(!1);
+              return;
+            }
+            F?.(t), l(!c);
+          }
+        },
+        onClear: () => {
+          w(!0);
+        },
+        onKeyDown: (t) => {
+          if (l(!0), ["ArrowUp", "ArrowDown"].includes(t.key)) {
+            t.preventDefault();
+            const o = document.querySelector(
+              `[data-menu="${h}"]`
+            ), y = o?.querySelector("[data-selected]");
+            if (y) {
+              const e = Array.from(
+                o?.querySelectorAll('[role="menuitem"]') || []
+              ), O = e.indexOf(y);
+              let i;
+              t.key === "ArrowDown" ? i = e[O + 1] || e[0] : i = e[O - 1] || e[e.length - 1], i?.focus();
+            } else
+              (t.key === "ArrowDown" ? o?.querySelector('[role="menuitem"]') : o?.querySelector(
+                '[role="menuitem"]:last-child'
+              ))?.focus();
+          }
+        },
+        error: v,
+        readOnly: f,
+        removeRoundness: g,
+        isFocused: s && c,
+        ...n
+      }
+    ),
+    s ? s({
+      id: r ? `${r}-menu` : void 0,
+      testid: u ? `${u}-menu` : void 0,
+      positionTo: d,
+      show: c,
+      setShow: l,
+      topOffset: n.caption ? -16 : null,
+      autoFocusOff: !0,
+      menuName: h
+    }) : A
+  ] });
+}
+export {
+  T as Search
+};

package/dist/components/SearchResultImage/index.js

@@ -0,0 +1,26 @@
+import { jsx as r, Fragment as n } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { ImagePlaceholder as g } from "../ImagePlaceholder.js";
+function u({
+  width: e = 20,
+  height: o = 20,
+  src: a,
+  alt: l
+}) {
+  const [m, t] = s(!1);
+  return /* @__PURE__ */ r(n, { children: m || !a ? /* @__PURE__ */ r(g, { width: e, height: o }) : /* @__PURE__ */ r(
+    "img",
+    {
+      src: a,
+      alt: l,
+      width: e,
+      height: o,
+      draggable: !1,
+      loading: "lazy",
+      onError: () => t(!0)
+    }
+  ) });
+}
+export {
+  u as SearchResultImage
+};

package/dist/components/Select.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsxs as L, Fragment as U, jsx as p } from "react/jsx-runtime";
+import { useRef as f, useState as w, useId as _, useEffect as z, useCallback as G } from "react";
+import { InputBase as H } from "./Input.js";
+import { Icon as J } from "./Icon.js";
+import { clsx as x } from "../node_modules/clsx/dist/clsx.js";
+function b({
+  id: l,
+  testid: I,
+  label: Q,
+  error: T,
+  children: C,
+  readOnly: m,
+  renderMenu: k,
+  onClick: R,
+  className: F,
+  wrapperClassName: K,
+  removeRoundness: N,
+  displayValue: B,
+  value: O,
+  searchable: r,
+  onChange: A,
+  ...a
+}) {
+  const S = f(null), y = f(null), [t, $] = w(!1), [h, v] = w(""), g = `select-menu-${_()}`, u = f(""), c = f(null), [j, d] = w("");
+  z(() => {
+    r && t && S.current?.focus();
+  }, [r, t]);
+  const E = G(() => {
+    y.current?.querySelector("input")?.focus();
+  }, []);
+  function i(e) {
+    $(e), e || (v(""), d(""), u.current = "", c.current && clearTimeout(c.current), r && requestAnimationFrame(E));
+  }
+  const s = r && t;
+  return /* @__PURE__ */ L(U, { children: [
+    /* @__PURE__ */ p(
+      H,
+      {
+        id: l,
+        testid: I,
+        inputContainerRef: y,
+        ref: S,
+        label: Q,
+        after: !m && /* @__PURE__ */ p(
+          "span",
+          {
+            className: x(
+              a.disabled ? "text-icon-action-primary-disabled" : "text-icon-action-primary-normal",
+              "contents"
+            ),
+            children: /* @__PURE__ */ p(J, { name: "keyboard_arrow_down" })
+          }
+        ),
+        maxLength: s ? void 0 : 0,
+        className: x(!s && "!caret-transparent !cursor-default", F),
+        wrapperClassName: K,
+        onKeyDown: (e) => {
+          if (s && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+            e.preventDefault();
+            const n = document.querySelector(
+              `[data-menu="${g}"]`
+            ), D = n?.querySelector("[data-selected]");
+            if (D) {
+              const o = Array.from(
+                n?.querySelectorAll('[role="menuitem"]') ?? []
+              ), q = o.indexOf(D);
+              (e.key === "ArrowDown" ? o[q + 1] ?? o[0] : o[q - 1] ?? o[o.length - 1])?.focus();
+            } else
+              (e.key === "ArrowDown" ? n?.querySelector('[role="menuitem"]') : n?.querySelector('[role="menuitem"]:last-child'))?.focus();
+            return;
+          }
+          if (!t && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+            e.preventDefault(), i(!0);
+            return;
+          }
+          if (!t && (e.key === " " || e.key === "Enter")) {
+            e.preventDefault(), e.target.click();
+            return;
+          }
+          if (t && !r && e.key === " " && !u.current) {
+            e.preventDefault(), i(!1);
+            return;
+          }
+          if (!r && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            e.preventDefault(), c.current && clearTimeout(c.current);
+            const n = u.current + e.key.toLowerCase();
+            u.current = n, c.current = setTimeout(() => {
+              u.current = "", d("");
+            }, 1e3), d(n), t || i(!0);
+          }
+        },
+        onClick: (e) => {
+          a.disabled || m || (i(!t), R?.(e));
+        },
+        error: T,
+        readOnly: m,
+        removeRoundness: N,
+        isFocused: t,
+        ...a,
+        onChange: (e) => {
+          s && v(e.target.value), A?.(e);
+        },
+        value: s ? h : B ?? O ?? (A ? "" : void 0)
+      }
+    ),
+    k ? k({
+      id: l ? `${l}-menu` : void 0,
+      positionTo: y,
+      show: t,
+      setShow: i,
+      topOffset: a.caption ? -16 : null,
+      searchQuery: r ? h : void 0,
+      autoFocusOff: r ? !0 : void 0,
+      menuName: g,
+      typeAheadQuery: r ? void 0 : j || void 0
+    }) : C
+  ] });
+}
+export {
+  b as Select
+};