@dmsi/wedgekit-react 0.0.1241 → 1.0.0

package/dist/chunk-X7BKBBIH.js

@@ -1,114 +0,0 @@
-import {
-  Card
-} from "./chunk-F4VE3THQ.js";
-import {
-  Stack
-} from "./chunk-MVDGHWKO.js";
-import {
-  Paragraph
-} from "./chunk-7MBRCM3M.js";
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
-import {
-  typography
-} from "./chunk-SATCWGO7.js";
-
-// src/components/Accordion.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Accordion(props) {
-  const {
-    isOpen,
-    onClick,
-    className,
-    disabled,
-    testid,
-    titleAlign = "center"
-  } = props;
-  const {
-    title,
-    before,
-    after = /* @__PURE__ */ jsx(
-      Icon,
-      {
-        name: "expand_more",
-        className: clsx(
-          "text-icon-primary-normal transform transition-all duration-300 ease-in-out",
-          isOpen ? "rotate-180" : "rotate-0"
-        )
-      }
-    ),
-    children
-  } = props;
-  function handleClick(e) {
-    e.stopPropagation();
-    e.preventDefault();
-    onClick == null ? void 0 : onClick();
-  }
-  return /* @__PURE__ */ jsxs(
-    Card,
-    {
-      className: clsx(
-        "overflow-hidden select-none",
-        { "cursor-pointer": !disabled },
-        className
-      ),
-      selected: isOpen,
-      onClick: handleClick,
-      testid,
-      children: [
-        /* @__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",
-          {
-            className: clsx("grid transition-all duration-300 ease-in-out"),
-            style: {
-              gridTemplateRows: isOpen ? "1fr" : "0fr"
-            },
-            "data-testid": testid ? `${testid}-content-container` : void 0,
-            children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: clsx(
-                  typography.paragraph,
-                  "text-text-primary-normal desktop:pt-desktop-layout-gap",
-                  "flex flex-col gap-desktop-layout-gap"
-                ),
-                onClick: (e) => e.stopPropagation(),
-                children
-              }
-            ) })
-          }
-        )
-      ]
-    }
-  );
-}
-
-export {
-  Accordion
-};

package/dist/chunk-XB2S2QMB.js

@@ -1,67 +0,0 @@
-import {
-  Button
-} from "./chunk-J4IMVWT5.js";
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
-import {
-  layoutGroupGap,
-  layoutPaddding
-} from "./chunk-SATCWGO7.js";
-
-// src/components/ModalButtons.tsx
-import clsx from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var ModalButtons = ({
-  onClose,
-  onContinue,
-  customActions,
-  id,
-  testid,
-  mobileButtonStack = false
-}) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: clsx(
-        "border-t border-neutral-300 flex justify-end",
-        mobileButtonStack && "flex-col ",
-        layoutPaddding,
-        layoutGroupGap
-      ),
-      children: customActions != null ? customActions : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            id: id ? `${id}-close-button` : void 0,
-            testid: testid ? `${testid}-close-button` : void 0,
-            variant: "secondary",
-            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "close", size: 24 }),
-            onClick: onClose,
-            className: "max-sm:w-full",
-            children: "Close"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            id: id ? `${id}-continue-button` : void 0,
-            testid: testid ? `${testid}-continue-button` : void 0,
-            variant: "primary",
-            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "check", size: 24 }),
-            className: "max-sm:w-full",
-            onClick: onContinue,
-            children: "Continue"
-          }
-        )
-      ] })
-    }
-  );
-};
-ModalButtons.displayName = "ModalButtons";
-
-export {
-  ModalButtons
-};

package/dist/chunk-XW4B4CUY.js

@@ -1,329 +0,0 @@
-import {
-  CarouselPagination
-} from "./chunk-MBZ55T2D.js";
-import {
-  MobileImageCarousel
-} from "./chunk-S4XW2XZW.js";
-import {
-  ProductPrimaryImage
-} from "./chunk-65HTZ3R2.js";
-import {
-  Thumbnail
-} from "./chunk-JRNU5BZ4.js";
-import {
-  ZoomWindow
-} from "./chunk-BQNPOGD5.js";
-import {
-  Grid
-} from "./chunk-BWPNXY7T.js";
-import {
-  useMatchesMobile
-} from "./chunk-WVGXD7HT.js";
-import {
-  Stack
-} from "./chunk-MVDGHWKO.js";
-
-// src/components/ProductImagePreview/useProductImagePreview.ts
-import { useCallback, useEffect, useRef, useState, useMemo } from "react";
-function useProductImagePreview(props) {
-  const {
-    images,
-    currentIndex,
-    zoomEnabled = false,
-    zoomFactor = 2,
-    scrollToZoomEnabled = false,
-    onChangeIndex,
-    isMobile = false
-  } = props;
-  const hasImages = !!(images == null ? void 0 : images.length);
-  const safeIndex = hasImages && currentIndex >= 0 && currentIndex < images.length ? currentIndex : 0;
-  const active = useMemo(() => {
-    return hasImages ? images[safeIndex] : void 0;
-  }, [hasImages, images, safeIndex]);
-  const [zoomPoint, setZoomPoint] = useState(null);
-  const [zoomActive, setZoomActive] = useState(false);
-  const [currentZoomFactor, setCurrentZoomFactor] = useState(zoomFactor);
-  const [primaryImagePosition, setPrimaryImagePosition] = useState(null);
-  const primaryImageRef = useRef(null);
-  const cleanupRef = useRef(null);
-  const effectiveZoomEnabled = zoomEnabled && !isMobile;
-  const effectiveScrollToZoomEnabled = scrollToZoomEnabled && !isMobile;
-  useEffect(() => {
-    if (!effectiveZoomEnabled) return;
-    const setupTracking = () => {
-      const element = primaryImageRef.current;
-      if (!element) return;
-      const updatePosition = () => {
-        if (element) {
-          setPrimaryImagePosition(element.getBoundingClientRect());
-        }
-      };
-      updatePosition();
-      const resizeObserver = new ResizeObserver(updatePosition);
-      resizeObserver.observe(element);
-      window.addEventListener("scroll", updatePosition);
-      window.addEventListener("resize", updatePosition);
-      cleanupRef.current = () => {
-        resizeObserver.disconnect();
-        window.removeEventListener("scroll", updatePosition);
-        window.removeEventListener("resize", updatePosition);
-      };
-    };
-    if (primaryImageRef.current) {
-      setupTracking();
-    } else {
-      const frameId = requestAnimationFrame(setupTracking);
-      return () => cancelAnimationFrame(frameId);
-    }
-    return () => {
-      if (cleanupRef.current) {
-        cleanupRef.current();
-        cleanupRef.current = null;
-      }
-    };
-  }, [effectiveZoomEnabled]);
-  const handleSelect = useCallback(
-    (idx) => {
-      if (idx === safeIndex) return;
-      onChangeIndex(idx);
-    },
-    [safeIndex, onChangeIndex]
-  );
-  const handleNext = useCallback(() => {
-    if (!hasImages) return;
-    const nextIndex = (safeIndex + 1) % images.length;
-    onChangeIndex(nextIndex);
-  }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handlePrevious = useCallback(() => {
-    if (!hasImages) return;
-    const previousIndex = safeIndex === 0 ? images.length - 1 : safeIndex - 1;
-    onChangeIndex(previousIndex);
-  }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handleZoomPositionChange = useCallback(
-    (p, active2) => {
-      if (isMobile) return;
-      setZoomPoint(p);
-      setZoomActive(active2);
-    },
-    [isMobile]
-  );
-  const handleScrollZoom = useCallback(
-    (delta) => {
-      if (!effectiveScrollToZoomEnabled) return;
-      const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
-      setCurrentZoomFactor(newZoomFactor);
-    },
-    [effectiveScrollToZoomEnabled, currentZoomFactor]
-  );
-  useEffect(() => {
-    setCurrentZoomFactor(zoomFactor);
-  }, [zoomFactor]);
-  return {
-    // State
-    zoomPoint,
-    zoomActive,
-    currentZoomFactor,
-    primaryImagePosition,
-    hasImages,
-    safeIndex,
-    active,
-    // Refs
-    primaryImageRef,
-    // Handlers
-    handleSelect,
-    handleZoomPositionChange,
-    handleScrollZoom,
-    handleNext,
-    handlePrevious
-  };
-}
-
-// src/components/ProductImagePreview/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var placeholderImageUri = "/placeholder.svg";
-function hasValidImageSource(src) {
-  const normalizedSrc = src == null ? void 0 : src.trim();
-  return !!normalizedSrc && normalizedSrc !== placeholderImageUri && !normalizedSrc.endsWith("/placeholder.svg") && !normalizedSrc.includes("/placeholder.svg?");
-}
-function ProductImagePreview(props) {
-  const {
-    width = 483,
-    height = 483,
-    thumbsPerRow = 4,
-    zoomEnabled = false,
-    scrollToZoomEnabled = false,
-    images,
-    currentIndex,
-    onChangeIndex,
-    zoomLensSize,
-    zoomFactor = 2,
-    zoomWindowScaleFactor = 2.5,
-    zoomWindowOffset = 10,
-    testid
-  } = props;
-  const [failedImageSources, setFailedImageSources] = useState2([]);
-  const imageSourceKey = useMemo2(
-    () => images.map((image) => image.src).join("|"),
-    [images]
-  );
-  const validImages = useMemo2(
-    () => images.filter(
-      (image) => hasValidImageSource(image.src) && failedImageSources.indexOf(image.src) === -1
-    ),
-    [failedImageSources, images]
-  );
-  const handleImageError = useCallback2((src) => {
-    if (!src) return;
-    setFailedImageSources(
-      (previousSources) => previousSources.indexOf(src) >= 0 ? previousSources : [...previousSources, src]
-    );
-  }, []);
-  useEffect2(() => {
-    setFailedImageSources([]);
-  }, [imageSourceKey]);
-  const isMobile = useMatchesMobile();
-  const {
-    zoomPoint,
-    zoomActive,
-    currentZoomFactor,
-    primaryImagePosition,
-    safeIndex,
-    active,
-    primaryImageRef,
-    handleSelect,
-    handleZoomPositionChange,
-    handleScrollZoom
-  } = useProductImagePreview({
-    images: validImages,
-    currentIndex,
-    zoomEnabled,
-    zoomFactor,
-    scrollToZoomEnabled,
-    onChangeIndex,
-    isMobile
-  });
-  if (typeof isMobile === "undefined") return null;
-  if (isMobile && !validImages.length)
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: placeholderImageUri,
-        alt: "Placeholder Image",
-        draggable: false,
-        loading: "eager",
-        style: {
-          aspectRatio: "1 / 1",
-          objectFit: "cover",
-          height: "100%",
-          width: "100%"
-        }
-      }
-    );
-  const effectiveZoomEnabled = zoomEnabled && !isMobile;
-  const showDesktopThumbnails = validImages.length > 1;
-  return /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      sizing: "layout",
-      style: { width, position: "relative" },
-      testid,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4 items-start", children: [
-          /* @__PURE__ */ jsx("div", { ref: primaryImageRef, children: /* @__PURE__ */ jsx(
-            ProductPrimaryImage,
-            {
-              image: active,
-              width,
-              height,
-              zoomEnabled: effectiveZoomEnabled,
-              zoomLensSize,
-              scrollToZoomEnabled: scrollToZoomEnabled && !isMobile,
-              onZoomPositionChange: handleZoomPositionChange,
-              onScrollZoom: handleScrollZoom,
-              isPlaceholder: validImages.length === 0,
-              onImageError: handleImageError
-            }
-          ) }),
-          effectiveZoomEnabled && /* @__PURE__ */ jsx(
-            ZoomWindow,
-            {
-              image: active,
-              width,
-              height,
-              pointer: zoomPoint,
-              active: zoomActive,
-              zoomFactor: currentZoomFactor,
-              scaleFactor: zoomWindowScaleFactor,
-              primaryImagePosition,
-              offset: zoomWindowOffset
-            }
-          )
-        ] }) }),
-        isMobile && /* @__PURE__ */ jsx(
-          MobileImageCarousel,
-          {
-            images: validImages,
-            currentIndex: safeIndex,
-            width,
-            height,
-            onChangeIndex: handleSelect,
-            onImageError: handleImageError
-          }
-        ),
-        showDesktopThumbnails && /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: validImages.length <= 3 ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "flex justify-center gap-4",
-            style: { width: "100%", maxWidth: width },
-            "aria-label": "Product image thumbnails",
-            children: validImages.map((img, i) => /* @__PURE__ */ jsx("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ jsx(
-              Thumbnail,
-              {
-                src: img.src,
-                alt: img.alt || `Thumbnail ${i + 1}`,
-                isActive: i === safeIndex,
-                onClick: () => handleSelect(i),
-                onImageError: handleImageError
-              }
-            ) }, img.src + i))
-          }
-        ) : /* @__PURE__ */ jsx(
-          Grid,
-          {
-            sizing: "layout-group",
-            "aria-label": "Product image thumbnails",
-            style: {
-              width: "100%",
-              maxWidth: width
-            },
-            columns: thumbsPerRow > 12 ? 12 : thumbsPerRow < 1 ? 1 : thumbsPerRow,
-            children: validImages.map((img, i) => /* @__PURE__ */ jsx(
-              Thumbnail,
-              {
-                src: img.src,
-                alt: img.alt || `Thumbnail ${i + 1}`,
-                isActive: i === safeIndex,
-                onClick: () => handleSelect(i),
-                onImageError: handleImageError
-              },
-              img.src + i
-            ))
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          CarouselPagination,
-          {
-            images: validImages,
-            currentIndex: safeIndex,
-            onSelect: handleSelect
-          }
-        )
-      ]
-    }
-  );
-}
-
-export {
-  ProductImagePreview
-};

package/dist/chunk-Y5GD2FJA.js

@@ -1,32 +0,0 @@
-import {
-  ImagePlaceholder
-} from "./chunk-QVWYTQKL.js";
-
-// src/components/SearchResultImage/index.tsx
-import { useState } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-function SearchResultImage({
-  width = 20,
-  height = 20,
-  src,
-  alt
-}) {
-  const [imageError, setImageError] = useState(false);
-  const showPlaceholder = imageError || !src;
-  return /* @__PURE__ */ jsx(Fragment, { children: showPlaceholder ? /* @__PURE__ */ jsx(ImagePlaceholder, { width, height }) : /* @__PURE__ */ jsx(
-    "img",
-    {
-      src,
-      alt,
-      width,
-      height,
-      draggable: false,
-      loading: "lazy",
-      onError: () => setImageError(true)
-    }
-  ) });
-}
-
-export {
-  SearchResultImage
-};