@dmsi/wedgekit-react 2.0.0 → 2.0.1

package/dist/components/Paragraph.js

@@ -0,0 +1,43 @@
+import { jsx as c } from "react/jsx-runtime";
+import { clsx as d } from "../node_modules/clsx/dist/clsx.js";
+import { typography as f, componentPaddingXUsingComponentGap as h } from "../classNames.js";
+function w({
+  className: o,
+  color: e,
+  padded: a,
+  align: t = "left",
+  tall: n,
+  addOverflow: p,
+  children: i,
+  as: l = "p",
+  id: m,
+  testid: s,
+  ...r
+}) {
+  return /* @__PURE__ */ c(
+    l,
+    {
+      id: m,
+      "data-testid": s,
+      ...r,
+      className: d(
+        f.paragraph,
+        o,
+        a && h,
+        t === "left" && "text-left",
+        t === "center" && "text-center",
+        t === "right" && "text-right",
+        n && "!leading-6",
+        p && "whitespace-nowrap text-ellipsis overflow-hidden"
+      ),
+      style: {
+        ...r.style,
+        color: e ? `var(--color-${e})` : void 0
+      },
+      children: i
+    }
+  );
+}
+export {
+  w as Paragraph
+};

package/dist/components/Password.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { InputBase as a } from "./Input.js";
+import { Icon as s } from "./Icon.js";
+import { Tooltip as l } from "./Tooltip.js";
+function y({
+  id: i,
+  testid: o,
+  ...e
+}) {
+  const [t, n] = m(!1);
+  return /* @__PURE__ */ r(
+    a,
+    {
+      id: i,
+      testid: o,
+      ...e,
+      type: t ? "text" : "password",
+      after: /* @__PURE__ */ r(c, { id: i, testid: o, show: t, setShow: n })
+    }
+  );
+}
+function c({ id: i, testid: o, show: e, setShow: t }) {
+  return e ? /* @__PURE__ */ r(l, { message: "Show", children: /* @__PURE__ */ r(
+    s,
+    {
+      id: i ? `${i}-toggle-visibility` : void 0,
+      testid: o ? `${o}-toggle-visibility` : void 0,
+      name: "visibility_off",
+      className: "cursor-pointer",
+      onClick: () => t(!1)
+    }
+  ) }) : /* @__PURE__ */ r(l, { message: "Hide", children: /* @__PURE__ */ r(
+    s,
+    {
+      id: i ? `${i}-toggle-visibility` : void 0,
+      testid: o ? `${o}-toggle-visibility` : void 0,
+      name: "visibility",
+      className: "cursor-pointer",
+      onClick: () => t(!0)
+    }
+  ) });
+}
+export {
+  y as Password
+};

package/dist/components/ProductImagePreview/CarouselPagination.js

@@ -0,0 +1,48 @@
+import { jsx as e } from "react/jsx-runtime";
+import { clsx as r } from "../../node_modules/clsx/dist/clsx.js";
+function c({
+  images: a,
+  currentIndex: l,
+  onSelect: i,
+  className: n
+}) {
+  return a?.length ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: r(
+        "flex items-center justify-center w-full px-4 md:hidden",
+        n
+      ),
+      "aria-label": "Image navigation",
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: "grid gap-2 place-items-center",
+          style: {
+            gridTemplateColumns: `repeat(${Math.min(a.length, 8)}, 1fr)`
+          },
+          role: "tablist",
+          children: a.map((o, t) => /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => i(t),
+              className: r(
+                "w-4 h-4 transition-all duration-200 focus:outline-none",
+                t === l ? "ring-2 ring-brand-400" : "ring ring-neutral-300"
+              ),
+              "aria-label": `Go to image ${t + 1}`,
+              role: "tab",
+              "aria-selected": t === l,
+              tabIndex: t === l ? 0 : -1
+            },
+            t
+          ))
+        }
+      )
+    }
+  ) : null;
+}
+export {
+  c as CarouselPagination
+};

package/dist/components/ProductImagePreview/MobileImageCarousel.js

@@ -0,0 +1,146 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as q, useState as u, useCallback as h, useEffect as C } from "react";
+function H({
+  images: f,
+  currentIndex: s,
+  width: R = 483,
+  height: D = 483,
+  onChangeIndex: d,
+  onImageError: N,
+  className: S = ""
+}) {
+  const l = q(null), [a, b] = u(!1), [w, E] = u(0), [v, g] = u(0), [c, k] = u(0), [m, z] = u(R), n = Math.min(m * 0.6, D * 0.6), p = 16, T = h(
+    (t) => {
+      const e = m / 2, o = n / 2, i = t * (n + p);
+      return e - o - i;
+    },
+    [m, n, p]
+  );
+  C(() => {
+    const t = T(s);
+    g(t), k(t);
+  }, [s, T]), C(() => {
+    const t = () => {
+      if (l.current) {
+        const o = l.current.getBoundingClientRect();
+        z(o.width);
+      }
+    };
+    t();
+    const e = new ResizeObserver(t);
+    return l.current && e.observe(l.current), () => e.disconnect();
+  }, []);
+  const y = h((t) => {
+    b(!0), E(t);
+  }, []), X = h(
+    (t) => {
+      if (!a) return;
+      const o = t - w;
+      g(c + o);
+    },
+    [a, w, c]
+  ), M = h(() => {
+    if (!a) return;
+    b(!1);
+    const t = v - c, e = n / 3;
+    let o = s;
+    t > e && s > 0 ? o = s - 1 : t < -e && s < f.length - 1 && (o = s + 1), o !== s ? d(o) : g(c);
+  }, [
+    a,
+    v,
+    c,
+    s,
+    n,
+    f.length,
+    d
+  ]), P = (t) => {
+    t.preventDefault(), y(t.clientX);
+  }, $ = (t) => {
+    t.preventDefault(), X(t.clientX);
+  }, O = () => {
+    M();
+  }, W = () => {
+    M();
+  }, j = (t) => {
+    y(t.touches[0].clientX);
+  }, L = (t) => {
+    X(t.touches[0].clientX);
+  }, U = () => {
+    M();
+  }, A = h(
+    (t) => {
+      !a && t !== s && d(t);
+    },
+    [a, s, d]
+  );
+  return f.length ? /* @__PURE__ */ r("div", { className: `md:hidden w-full ${S}`, children: /* @__PURE__ */ r(
+    "div",
+    {
+      ref: l,
+      className: "relative overflow-hidden cursor-grab active:cursor-grabbing select-none w-full",
+      style: {
+        height: n
+      },
+      onMouseDown: P,
+      onMouseMove: $,
+      onMouseUp: O,
+      onMouseLeave: W,
+      onTouchStart: j,
+      onTouchMove: L,
+      onTouchEnd: U,
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: "flex items-center",
+          style: {
+            transform: `translateX(${v}px)`,
+            transition: a ? "none" : "transform 0.3s ease-out",
+            gap: `${p}px`
+          },
+          children: f.map((t, e) => {
+            const o = e === s, i = Math.abs(e - s), B = i <= 2;
+            return /* @__PURE__ */ r(
+              "div",
+              {
+                className: "flex-shrink-0 transition-opacity duration-300",
+                style: {
+                  width: n,
+                  height: n,
+                  opacity: o ? 1 : Math.max(0.3, 1 - i * 0.3)
+                },
+                onClick: () => A(e),
+                children: B ? /* @__PURE__ */ r(
+                  "img",
+                  {
+                    src: t.src,
+                    alt: t.alt || `Product image ${e + 1}`,
+                    className: "w-full h-full object-contain",
+                    draggable: !1,
+                    loading: i <= 1 ? "eager" : "lazy",
+                    onError: () => N?.(t.src),
+                    style: {
+                      aspectRatio: "1 / 1"
+                    }
+                  }
+                ) : /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: "w-full h-full bg-neutral-100 rounded-md border border-gray-200",
+                    style: {
+                      aspectRatio: "1 / 1"
+                    },
+                    "aria-hidden": "true"
+                  }
+                )
+              },
+              t.src + e
+            );
+          })
+        }
+      )
+    }
+  ) }) : null;
+}
+export {
+  H as MobileImageCarousel
+};

package/dist/components/ProductImagePreview/ProductPrimaryImage.js

@@ -0,0 +1,138 @@
+import { jsxs as b, jsx as Y } from "react/jsx-runtime";
+import { useRef as M, useState as _, useMemo as G, useCallback as d, useEffect as J } from "react";
+const R = "/placeholder.svg";
+function Q({
+  image: p,
+  width: u,
+  height: f,
+  zoomEnabled: n = !1,
+  zoomLensSize: c = 140,
+  scrollToZoomEnabled: m = !1,
+  className: W = "",
+  isPlaceholder: y = !1,
+  onImageError: j,
+  onZoomPositionChange: s,
+  onScrollZoom: N
+}) {
+  const h = M(null), i = M(null), g = M(null), [a, P] = _(!1), [, X] = _(0), o = G(() => p?.src, [p?.src]), k = () => {
+    g.current == null && (g.current = requestAnimationFrame(() => {
+      g.current = null, X((t) => t + 1);
+    }));
+  }, A = d(() => {
+    if (!n) return;
+    P(!0);
+    const t = h.current;
+    if (t) {
+      const r = t.getBoundingClientRect(), e = i.current;
+      s?.(
+        e ? { ...e, w: r.width, h: r.height, lensSize: c } : null,
+        !0
+      );
+    }
+  }, [n, s, c]), B = d(() => {
+    n && (P(!1), i.current = null, s?.(null, !1));
+  }, [n, s]), F = d(
+    (t) => {
+      if (y || !n || !a || t.pointerType === "touch") return;
+      const r = h.current;
+      if (!r) return;
+      const e = r.getBoundingClientRect(), x = (t.clientX - e.left) / e.width, I = (t.clientY - e.top) / e.height, l = c ?? 140, q = Math.max(
+        0,
+        Math.min(e.width - l, x * e.width - l / 2)
+      ), D = Math.max(
+        0,
+        Math.min(e.height - l, I * e.height - l / 2)
+      ), T = (q + l / 2) / e.width, U = (D + l / 2) / e.height;
+      i.current = {
+        x: T,
+        y: U
+      }, k(), s?.(
+        i.current ? {
+          ...i.current,
+          w: e.width,
+          h: e.height,
+          lensSize: c
+        } : null,
+        !0
+      );
+    },
+    [y, n, a, c, s]
+  );
+  J(() => {
+    const t = h.current;
+    if (!t || !m) return;
+    const r = (e) => {
+      if (e.preventDefault(), e.stopPropagation(), !n || !a) return;
+      const x = e.deltaY > 0 ? -0.2 : 0.2;
+      N?.(x);
+    };
+    return t.addEventListener("wheel", r, { passive: !1 }), () => {
+      t.removeEventListener("wheel", r);
+    };
+  }, [m, n, a, N]);
+  const H = d(
+    (t) => {
+      j?.(o);
+      const r = t.currentTarget;
+      r.src !== R && (r.src = R);
+    },
+    [o, j]
+  ), v = i.current;
+  let w;
+  if (v && a && n) {
+    const t = c, r = v.x * u - t / 2, e = v.y * f - t / 2;
+    w = {
+      width: t,
+      height: t,
+      left: Math.max(0, Math.min(u - t, r)),
+      top: Math.max(0, Math.min(f - t, e))
+    };
+  }
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      ref: h,
+      className: [
+        "relative overflow-hidden bg-white rounded flex items-center justify-center select-none",
+        n ? "cursor-crosshair" : "",
+        W
+      ].join(" "),
+      onPointerEnter: A,
+      onPointerLeave: B,
+      onPointerMove: F,
+      children: [
+        /* @__PURE__ */ Y(
+          "img",
+          {
+            src: o ?? R,
+            alt: p?.alt || "Product image",
+            style: {
+              maxWidth: u,
+              maxHeight: f,
+              minWidth: u,
+              minHeight: f,
+              aspectRatio: "1 / 1",
+              objectFit: "contain",
+              userSelect: "none"
+            },
+            draggable: !1,
+            loading: "lazy",
+            onError: H
+          },
+          o
+        ),
+        n && a && w && /* @__PURE__ */ Y(
+          "div",
+          {
+            "aria-hidden": !0,
+            className: "absolute pointer-events-none border border-white/70 shadow-[0_0_0_1px_rgba(0,0,0,0.15)] rounded-md bg-white/10 backdrop-blur-[1px]",
+            style: w
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Q as ProductPrimaryImage
+};

package/dist/components/ProductImagePreview/Thumbnail.js

@@ -0,0 +1,46 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { ImagePlaceholder as g } from "../ImagePlaceholder.js";
+function h({
+  width: a,
+  height: n,
+  src: o,
+  alt: i,
+  isActive: t,
+  onClick: l,
+  isPlaceholder: e = !1,
+  onImageError: s
+}) {
+  const [f, m] = u(!1);
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      onClick: l,
+      className: [
+        "cursor-pointer relative overflow-hidden rounded aspect-square w-full",
+        // base radius, square when no explicit size
+        "focus:outline-none",
+        t && !e && "ring-[3px] ring-offset-1 ring-border-action-normal ring-offset-white opacity-70"
+      ].join(" "),
+      style: { maxWidth: a, maxHeight: n, aspectRatio: "1 / 1" },
+      "aria-pressed": t && !e ? "true" : "false",
+      children: e ? /* @__PURE__ */ r(g, { width: 115, height: 115 }) : /* @__PURE__ */ r(
+        "img",
+        {
+          src: f ? "/placeholder.svg" : o,
+          alt: i,
+          className: "object-contain w-full h-full select-none",
+          draggable: !1,
+          loading: "lazy",
+          onError: () => {
+            s?.(o), m(!0);
+          }
+        }
+      )
+    }
+  );
+}
+export {
+  h as Thumbnail
+};

package/dist/components/ProductImagePreview/ZoomWindow.js

@@ -0,0 +1,74 @@
+import { jsx as x } from "react/jsx-runtime";
+import { useMemo as Y } from "react";
+import { Surface as $ } from "../Surface.js";
+function N({
+  image: i,
+  width: u,
+  height: w,
+  pointer: e,
+  active: S,
+  zoomFactor: c = 2,
+  scaleFactor: z = 2,
+  primaryImagePosition: t,
+  offset: o = 10,
+  className: g = ""
+}) {
+  const a = Y(() => i?.src, [i?.src]);
+  if (!i || !S || !e) return null;
+  const n = e.lensSize * z, r = e.w || u, h = e.h || w, v = r * c, W = h * c, b = e.x * r * c, m = e.y * h * c, H = n / 2 - b, j = n / 2 - m;
+  return /* @__PURE__ */ x(
+    $,
+    {
+      elevation: 16,
+      className: g,
+      style: {
+        width: n,
+        height: n,
+        position: "fixed",
+        zIndex: 999,
+        overflow: "hidden",
+        pointerEvents: "none",
+        userSelect: "none",
+        ...(() => {
+          if (!t)
+            return {
+              position: "fixed",
+              zIndex: 999,
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)"
+            };
+          const d = t.left + e.x * t.width - e.lensSize / 2, f = t.top + e.y * t.height - e.lensSize / 2;
+          let s = d + e.lensSize + o, l = f;
+          const { innerWidth: O, innerHeight: X } = window;
+          return s + n > O && (s = d - n - o), l + n > X && (l = f + e.lensSize - n), l < 0 && (l = f), s < 0 && (s = d + e.lensSize + o), {
+            position: "fixed",
+            zIndex: 999,
+            left: s,
+            top: l
+          };
+        })()
+      },
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ x(
+        "img",
+        {
+          src: a,
+          alt: "",
+          className: "pointer-events-none select-none max-w-none object-cover",
+          style: {
+            width: v,
+            height: W,
+            transform: `translate(${H}px, ${j}px)`
+          },
+          draggable: !1,
+          loading: "lazy"
+        },
+        a
+      )
+    }
+  );
+}
+export {
+  N as ZoomWindow
+};