@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/dist/chunk-CQFPNZTN.js

@@ -0,0 +1,172 @@
+import {
+  Spinner
+} from "./chunk-SBRRNFOP.js";
+import {
+  ImagePlaceholder
+} from "./chunk-QVWYTQKL.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/ProductImagePreview/ProductPrimaryImage.tsx
+import { useRef, useState, useCallback, useMemo, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ProductPrimaryImage({
+  image,
+  width,
+  height,
+  zoomEnabled = false,
+  zoomLensSize = 140,
+  scrollToZoomEnabled = false,
+  className = "",
+  isPlaceholder = false,
+  onZoomPositionChange,
+  onScrollZoom
+}) {
+  const containerRef = useRef(null);
+  const lastPointRef = useRef(null);
+  const rafRef = useRef(null);
+  const [active, setActive] = useState(false);
+  const [, forceRerender] = useState(0);
+  const [imageLoading, setImageLoading] = useState(true);
+  const [imageError, setImageError] = useState(false);
+  const imageSrc = useMemo(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  const schedule = () => {
+    if (rafRef.current != null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      forceRerender((n) => n + 1);
+    });
+  };
+  const handlePointerEnter = useCallback(() => {
+    if (!zoomEnabled) return;
+    setActive(true);
+    const el = containerRef.current;
+    if (el) {
+      const r = el.getBoundingClientRect();
+      const pt2 = lastPointRef.current;
+      onZoomPositionChange == null ? void 0 : onZoomPositionChange(
+        pt2 ? __spreadProps(__spreadValues({}, pt2), { w: r.width, h: r.height, lensSize: zoomLensSize }) : null,
+        true
+      );
+    }
+  }, [zoomEnabled, onZoomPositionChange, zoomLensSize]);
+  const handlePointerLeave = useCallback(() => {
+    if (!zoomEnabled) return;
+    setActive(false);
+    lastPointRef.current = null;
+    onZoomPositionChange == null ? void 0 : onZoomPositionChange(null, false);
+  }, [zoomEnabled, onZoomPositionChange]);
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!zoomEnabled || !active) return;
+      if (e.pointerType === "touch") return;
+      const el = containerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const rawX = (e.clientX - rect.left) / rect.width;
+      const rawY = (e.clientY - rect.top) / rect.height;
+      const size = zoomLensSize != null ? zoomLensSize : 140;
+      const left = Math.max(
+        0,
+        Math.min(rect.width - size, rawX * rect.width - size / 2)
+      );
+      const top = Math.max(
+        0,
+        Math.min(rect.height - size, rawY * rect.height - size / 2)
+      );
+      const centerXNorm = (left + size / 2) / rect.width;
+      const centerYNorm = (top + size / 2) / rect.height;
+      lastPointRef.current = {
+        x: centerXNorm,
+        y: centerYNorm
+      };
+      schedule();
+      onZoomPositionChange == null ? void 0 : onZoomPositionChange(
+        lastPointRef.current ? __spreadProps(__spreadValues({}, lastPointRef.current), {
+          w: rect.width,
+          h: rect.height,
+          lensSize: zoomLensSize
+        }) : null,
+        true
+      );
+    },
+    [zoomEnabled, active, onZoomPositionChange, zoomLensSize]
+  );
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !scrollToZoomEnabled) return;
+    const handleNativeWheel = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!zoomEnabled || !active) return;
+      const delta = e.deltaY > 0 ? -0.2 : 0.2;
+      onScrollZoom == null ? void 0 : onScrollZoom(delta);
+    };
+    container.addEventListener("wheel", handleNativeWheel, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", handleNativeWheel);
+    };
+  }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
+  if (!image && !isPlaceholder) return null;
+  const pt = lastPointRef.current;
+  let lensStyle;
+  if (pt && active && zoomEnabled) {
+    const size = zoomLensSize;
+    const leftRaw = pt.x * width - size / 2;
+    const topRaw = pt.y * height - size / 2;
+    lensStyle = {
+      width: size,
+      height: size,
+      left: Math.max(0, Math.min(width - size, leftRaw)),
+      top: Math.max(0, Math.min(height - size, topRaw))
+    };
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: [
+        "relative overflow-hidden bg-white rounded flex items-center justify-center select-none",
+        zoomEnabled ? "cursor-crosshair" : "",
+        className
+      ].join(" "),
+      style: { maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" },
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      onPointerMove: handlePointerMove,
+      children: [
+        imageLoading && !imageError && !isPlaceholder && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-neutral-50", children: /* @__PURE__ */ jsx(Spinner, { size: "small" }) }),
+        isPlaceholder ? /* @__PURE__ */ jsx(ImagePlaceholder, { width, height }) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: imageSrc,
+            alt: (image == null ? void 0 : image.alt) || "Product image",
+            className: "object-cover w-full h-full select-none",
+            draggable: false,
+            loading: "lazy",
+            onLoad: () => setImageLoading(false),
+            onError: () => {
+              setImageLoading(false);
+              setImageError(true);
+            }
+          },
+          imageSrc
+        ),
+        zoomEnabled && active && lensStyle && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            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: lensStyle
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  ProductPrimaryImage
+};

package/dist/chunk-EJSPFQCY.js

@@ -0,0 +1,29 @@
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
+import {
+  Button
+} from "./chunk-WWAPK5PH.js";
+
+// src/components/PDFViewer/DownloadIcon.tsx
+import { jsx } from "react/jsx-runtime";
+function DownloadIcon({
+  onClick,
+  isDownloading,
+  testid
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      testid,
+      iconOnly: true,
+      variant: "tertiary",
+      leftIcon: /* @__PURE__ */ jsx(Icon, { name: isDownloading ? "cached" : "download" }),
+      onClick
+    }
+  );
+}
+
+export {
+  DownloadIcon
+};

package/dist/chunk-ER6RCOH3.js

@@ -0,0 +1,97 @@
+// src/components/Grid.tsx
+import { Children } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var COLUMNS_WITH_SIDE_MENU_MAP = {
+  1: "grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  5: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  6: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  7: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  8: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  9: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  10: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  11: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
+  12: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8"
+};
+var COLUMNS_WITHOUT_SIDE_MENU_MAP = {
+  1: "grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+  6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
+  7: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7",
+  8: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
+  9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-9",
+  10: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10",
+  11: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-11",
+  12: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12"
+};
+var getChildCountBasedClasses = (childCount, hasSideMenu) => {
+  if (hasSideMenu) {
+    if (childCount <= 1) return "grid-cols-1";
+    if (childCount <= 2) return "sm:grid-cols-2";
+    if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
+    if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3";
+    return "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6";
+  }
+  if (childCount <= 1) return "grid-cols-1";
+  if (childCount <= 2) return "sm:grid-cols-2";
+  if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
+  if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
+  if (childCount <= 6)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
+  if (childCount === 7)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
+  if (childCount <= 11)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8";
+  return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12";
+};
+var getGridClasses = (childCount, hasSideMenu, columns) => {
+  var _a;
+  if (columns) {
+    const map = hasSideMenu ? COLUMNS_WITH_SIDE_MENU_MAP : COLUMNS_WITHOUT_SIDE_MENU_MAP;
+    return (_a = map[columns]) != null ? _a : map[12];
+  }
+  return getChildCountBasedClasses(childCount, hasSideMenu != null ? hasSideMenu : false);
+};
+var Grid = ({
+  children,
+  sizing = "container",
+  padding,
+  hasSideMenu = false,
+  columns,
+  id,
+  testid,
+  style
+}) => {
+  const childCount = Children.count(children);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: clsx(
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+        sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+        sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+        sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
+        "w-full grid",
+        getGridClasses(childCount, hasSideMenu, columns)
+      ),
+      style,
+      children
+    }
+  );
+};
+
+export {
+  Grid
+};

package/dist/{chunk-4VER5OEU.js → chunk-FBE2HGEF.js}

@@ -1,9 +1,9 @@
-import {
-  Stack
-} from "./chunk-NQXZBWDZ.js";
 import {
   Card
 } from "./chunk-4LXG6QNT.js";
+import {
+  Stack
+} from "./chunk-V6U7LU6M.js";
 import {
   Paragraph
 } from "./chunk-OGIFIPKH.js";
@@ -18,7 +18,14 @@ import {
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Accordion(props) {
-  const { isOpen, onClick, className, disabled, testid } = props;
+  const {
+    isOpen,
+    onClick,
+    className,
+    disabled,
+    testid,
+    titleAlign = "center"
+  } = props;
   const {
     title,
     before,
@@ -51,13 +58,30 @@ function Accordion(props) {
       onClick: handleClick,
       testid,
       children: [
-        /* @__PURE__ */ jsxs(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
-          /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
-            before,
-            typeof title === "string" ? /* @__PURE__ */ jsx(Paragraph, { testid: testid ? `${testid}-title` : void 0, className: "text-text-primary-normal", children: title }) : title
-          ] }),
-          after
-        ] }),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            sizing: "component",
+            horizontal: true,
+            horizontalMobile: true,
+            justify: "between",
+            items: "center",
+            children: [
+              /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", horizontal: true, items: titleAlign, children: [
+                before,
+                typeof title === "string" ? /* @__PURE__ */ jsx(
+                  Paragraph,
+                  {
+                    testid: testid ? `${testid}-title` : void 0,
+                    className: "text-text-primary-normal",
+                    children: title
+                  }
+                ) : title
+              ] }),
+              after
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {

package/dist/chunk-HPQWEZJL.js

@@ -0,0 +1,45 @@
+import {
+  ImagePlaceholder
+} from "./chunk-QVWYTQKL.js";
+
+// src/components/ProductImagePreview/Thumbnail.tsx
+import { jsx } from "react/jsx-runtime";
+function Thumbnail({
+  width,
+  height,
+  src,
+  alt,
+  isActive,
+  onClick,
+  isPlaceholder = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: [
+        "cursor-pointer relative overflow-hidden rounded aspect-square w-full",
+        // base radius, square when no explicit size
+        "focus:outline-none",
+        isActive && !isPlaceholder && "ring-[3px] ring-offset-1 ring-border-action-normal ring-offset-white opacity-70"
+      ].join(" "),
+      style: { maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" },
+      "aria-pressed": isActive && !isPlaceholder ? "true" : "false",
+      children: isPlaceholder ? /* @__PURE__ */ jsx(ImagePlaceholder, { width: 115, height: 115 }) : /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt,
+          className: "object-cover w-full h-full select-none",
+          draggable: false,
+          loading: "lazy"
+        }
+      )
+    }
+  );
+}
+
+export {
+  Thumbnail
+};