@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/dist/components/ProductImagePreview/Thumbnail.cjs

@@ -0,0 +1,105 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ProductImagePreview/Thumbnail.tsx
+var Thumbnail_exports = {};
+__export(Thumbnail_exports, {
+  Thumbnail: () => Thumbnail
+});
+module.exports = __toCommonJS(Thumbnail_exports);
+
+// src/components/ImagePlaceholder.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ImagePlaceholder(props) {
+  const clipId = (0, import_react.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 242,
+      height: 243,
+      fill: "none"
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: props.width, height: props.width, fill: "#F7F7F7", rx: 2 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: props.width, height: props.width, fill: "#fff", rx: 2 }) }) })
+      ]
+    })
+  );
+}
+
+// src/components/ProductImagePreview/Thumbnail.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Thumbnail({
+  width,
+  height,
+  src,
+  alt,
+  isActive,
+  onClick,
+  isPlaceholder = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)(ImagePlaceholder, { width: 115, height: 115 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "img",
+        {
+          src,
+          alt,
+          className: "object-cover w-full h-full select-none",
+          draggable: false,
+          loading: "lazy"
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Thumbnail
+});

package/dist/components/ProductImagePreview/Thumbnail.js

@@ -0,0 +1,8 @@
+import {
+  Thumbnail
+} from "../../chunk-HPQWEZJL.js";
+import "../../chunk-QVWYTQKL.js";
+import "../../chunk-ORMEWXMH.js";
+export {
+  Thumbnail
+};

package/dist/components/ProductImagePreview/ZoomWindow.cjs

@@ -0,0 +1,198 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ProductImagePreview/ZoomWindow.tsx
+var ZoomWindow_exports = {};
+__export(ZoomWindow_exports, {
+  ZoomWindow: () => ZoomWindow
+});
+module.exports = __toCommonJS(ZoomWindow_exports);
+var import_react = require("react");
+
+// src/components/Surface.tsx
+var import_clsx = __toESM(require("clsx"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var Surface = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    elevation = 0,
+    id
+  } = _b, props = __objRest(_b, [
+    "children",
+    "className",
+    "elevation",
+    "id"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      id,
+      className: (0, import_clsx.default)(
+        "rounded-base",
+        {
+          "shadow-2": elevation === 2,
+          "shadow-4": elevation === 4,
+          "shadow-16": elevation === 16
+        },
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+};
+Surface.displayName = "Surface";
+
+// src/components/ProductImagePreview/ZoomWindow.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ZoomWindow({
+  image,
+  width,
+  height,
+  pointer,
+  active,
+  zoomFactor = 2,
+  scaleFactor = 2,
+  primaryImagePosition,
+  offset = 10,
+  className = ""
+}) {
+  const imageSrc = (0, import_react.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  if (!image || !active || !pointer) return null;
+  const zoomWindowSize = pointer.lensSize * scaleFactor;
+  const baseW = pointer.w || width;
+  const baseH = pointer.h || height;
+  const scaledW = baseW * zoomFactor;
+  const scaledH = baseH * zoomFactor;
+  const centerX = pointer.x * baseW * zoomFactor;
+  const centerY = pointer.y * baseH * zoomFactor;
+  const imageOffsetX = zoomWindowSize / 2 - centerX;
+  const imageOffsetY = zoomWindowSize / 2 - centerY;
+  const calculatePosition = () => {
+    if (!primaryImagePosition) {
+      return {
+        position: "fixed",
+        zIndex: 999,
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)"
+      };
+    }
+    const lensLeft = primaryImagePosition.left + pointer.x * primaryImagePosition.width - pointer.lensSize / 2;
+    const lensTop = primaryImagePosition.top + pointer.y * primaryImagePosition.height - pointer.lensSize / 2;
+    let left = lensLeft + pointer.lensSize + offset;
+    let top = lensTop;
+    const { innerWidth, innerHeight } = window;
+    if (left + zoomWindowSize > innerWidth) {
+      left = lensLeft - zoomWindowSize - offset;
+    }
+    if (top + zoomWindowSize > innerHeight) {
+      top = lensTop + pointer.lensSize - zoomWindowSize;
+    }
+    if (top < 0) {
+      top = lensTop;
+    }
+    if (left < 0) {
+      left = lensLeft + pointer.lensSize + offset;
+    }
+    return {
+      position: "fixed",
+      zIndex: 999,
+      left,
+      top
+    };
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Surface,
+    {
+      elevation: 16,
+      className,
+      style: __spreadValues({
+        width: zoomWindowSize,
+        height: zoomWindowSize,
+        position: "fixed",
+        zIndex: 999,
+        overflow: "hidden",
+        pointerEvents: "none",
+        userSelect: "none"
+      }, calculatePosition()),
+      "aria-hidden": true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "img",
+        {
+          src: imageSrc,
+          alt: "",
+          className: "pointer-events-none select-none max-w-none object-cover",
+          style: {
+            width: scaledW,
+            height: scaledH,
+            transform: `translate(${imageOffsetX}px, ${imageOffsetY}px)`
+          },
+          draggable: false,
+          loading: "lazy"
+        },
+        imageSrc
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ZoomWindow
+});

package/dist/components/ProductImagePreview/ZoomWindow.js

@@ -0,0 +1,8 @@
+import {
+  ZoomWindow
+} from "../../chunk-BQNPOGD5.js";
+import "../../chunk-AT4AWD6B.js";
+import "../../chunk-ORMEWXMH.js";
+export {
+  ZoomWindow
+};