@dmsi/wedgekit-react 0.0.1242 → 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-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
-};

package/dist/chunk-YKEPPS2I.js

@@ -1,192 +0,0 @@
-// src/components/ProductImagePreview/MobileImageCarousel.tsx
-import { useRef, useEffect, useState, useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-function MobileImageCarousel({
-  images,
-  currentIndex,
-  width = 483,
-  height = 483,
-  onChangeIndex,
-  onImageError,
-  className = ""
-}) {
-  const containerRef = useRef(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [startX, setStartX] = useState(0);
-  const [currentTranslate, setCurrentTranslate] = useState(0);
-  const [prevTranslate, setPrevTranslate] = useState(0);
-  const [containerWidth, setContainerWidth] = useState(width);
-  const imageSize = Math.min(containerWidth * 0.6, height * 0.6);
-  const gap = 16;
-  const getTranslateX = useCallback(
-    (index) => {
-      const containerCenter = containerWidth / 2;
-      const imageCenter = imageSize / 2;
-      const totalOffset = index * (imageSize + gap);
-      return containerCenter - imageCenter - totalOffset;
-    },
-    [containerWidth, imageSize, gap]
-  );
-  useEffect(() => {
-    const translateX = getTranslateX(currentIndex);
-    setCurrentTranslate(translateX);
-    setPrevTranslate(translateX);
-  }, [currentIndex, getTranslateX]);
-  useEffect(() => {
-    const updateContainerWidth = () => {
-      if (containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        setContainerWidth(rect.width);
-      }
-    };
-    updateContainerWidth();
-    const resizeObserver = new ResizeObserver(updateContainerWidth);
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-    return () => resizeObserver.disconnect();
-  }, []);
-  const handleStart = useCallback((clientX) => {
-    setIsDragging(true);
-    setStartX(clientX);
-  }, []);
-  const handleMove = useCallback(
-    (clientX) => {
-      if (!isDragging) return;
-      const currentPosition = clientX;
-      const diff = currentPosition - startX;
-      setCurrentTranslate(prevTranslate + diff);
-    },
-    [isDragging, startX, prevTranslate]
-  );
-  const handleEnd = useCallback(() => {
-    if (!isDragging) return;
-    setIsDragging(false);
-    const moved = currentTranslate - prevTranslate;
-    const threshold = imageSize / 3;
-    let newIndex = currentIndex;
-    if (moved > threshold && currentIndex > 0) {
-      newIndex = currentIndex - 1;
-    } else if (moved < -threshold && currentIndex < images.length - 1) {
-      newIndex = currentIndex + 1;
-    }
-    if (newIndex !== currentIndex) {
-      onChangeIndex(newIndex);
-    } else {
-      setCurrentTranslate(prevTranslate);
-    }
-  }, [
-    isDragging,
-    currentTranslate,
-    prevTranslate,
-    currentIndex,
-    imageSize,
-    images.length,
-    onChangeIndex
-  ]);
-  const handleMouseDown = (e) => {
-    e.preventDefault();
-    handleStart(e.clientX);
-  };
-  const handleMouseMove = (e) => {
-    e.preventDefault();
-    handleMove(e.clientX);
-  };
-  const handleMouseUp = () => {
-    handleEnd();
-  };
-  const handleMouseLeave = () => {
-    handleEnd();
-  };
-  const handleTouchStart = (e) => {
-    handleStart(e.touches[0].clientX);
-  };
-  const handleTouchMove = (e) => {
-    handleMove(e.touches[0].clientX);
-  };
-  const handleTouchEnd = () => {
-    handleEnd();
-  };
-  const handleImageClick = useCallback(
-    (index) => {
-      if (!isDragging && index !== currentIndex) {
-        onChangeIndex(index);
-      }
-    },
-    [isDragging, currentIndex, onChangeIndex]
-  );
-  if (!images.length) return null;
-  return /* @__PURE__ */ jsx("div", { className: `md:hidden w-full ${className}`, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className: "relative overflow-hidden cursor-grab active:cursor-grabbing select-none w-full",
-      style: {
-        height: imageSize
-      },
-      onMouseDown: handleMouseDown,
-      onMouseMove: handleMouseMove,
-      onMouseUp: handleMouseUp,
-      onMouseLeave: handleMouseLeave,
-      onTouchStart: handleTouchStart,
-      onTouchMove: handleTouchMove,
-      onTouchEnd: handleTouchEnd,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "flex items-center",
-          style: {
-            transform: `translateX(${currentTranslate}px)`,
-            transition: isDragging ? "none" : "transform 0.3s ease-out",
-            gap: `${gap}px`
-          },
-          children: images.map((image, index) => {
-            const isActive = index === currentIndex;
-            const distance = Math.abs(index - currentIndex);
-            const shouldRender = distance <= 2;
-            return /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "flex-shrink-0 transition-opacity duration-300",
-                style: {
-                  width: imageSize,
-                  height: imageSize,
-                  opacity: isActive ? 1 : Math.max(0.3, 1 - distance * 0.3)
-                },
-                onClick: () => handleImageClick(index),
-                children: shouldRender ? /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: image.src,
-                    alt: image.alt || `Product image ${index + 1}`,
-                    className: "w-full h-full object-contain",
-                    draggable: false,
-                    loading: distance <= 1 ? "eager" : "lazy",
-                    onError: () => onImageError == null ? void 0 : onImageError(image.src),
-                    style: {
-                      aspectRatio: "1 / 1"
-                    }
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "w-full h-full bg-neutral-100 rounded-md border border-gray-200",
-                    style: {
-                      aspectRatio: "1 / 1"
-                    },
-                    "aria-hidden": "true"
-                  }
-                )
-              },
-              image.src + index
-            );
-          })
-        }
-      )
-    }
-  ) });
-}
-
-export {
-  MobileImageCarousel
-};

package/dist/chunk-YULGJORA.js

@@ -1,259 +0,0 @@
-import {
-  SelectedSnapDisplay
-} from "./chunk-Z2HPSFEQ.js";
-import {
-  NextButton,
-  PrevButton
-} from "./chunk-7IPESTQS.js";
-import {
-  useMatchesMobile
-} from "./chunk-WVGXD7HT.js";
-
-// src/components/EmblaCarousel/index.tsx
-import React, { useCallback as useCallback3, useEffect as useEffect3, useRef } from "react";
-import useEmblaCarousel from "embla-carousel-react";
-import Autoplay from "embla-carousel-autoplay";
-
-// src/components/EmblaCarousel/useSelectedSnapDisplay.ts
-import { useCallback, useEffect, useState } from "react";
-var useSelectedSnapDisplay = (emblaApi) => {
-  const [selectedSnap, setSelectedSnap] = useState(0);
-  const [snapCount, setSnapCount] = useState(0);
-  const updateScrollSnapState = useCallback((emblaApi2) => {
-    setSnapCount(emblaApi2.snapList().length);
-    setSelectedSnap(emblaApi2.selectedSnap());
-  }, []);
-  useEffect(() => {
-    if (!emblaApi) return;
-    updateScrollSnapState(emblaApi);
-    emblaApi.on("select", updateScrollSnapState);
-    emblaApi.on("reinit", updateScrollSnapState);
-  }, [emblaApi, updateScrollSnapState]);
-  return {
-    selectedSnap,
-    snapCount
-  };
-};
-
-// src/components/EmblaCarousel/usePrevNextButtons.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
-var usePrevNextButtons = (emblaApi) => {
-  const [prevBtnDisabled, setPrevBtnDisabled] = useState2(true);
-  const [nextBtnDisabled, setNextBtnDisabled] = useState2(true);
-  const onPrevButtonClick = useCallback2(() => {
-    if (!emblaApi) return;
-    emblaApi.goToPrev();
-  }, [emblaApi]);
-  const onNextButtonClick = useCallback2(() => {
-    if (!emblaApi) return;
-    emblaApi.goToNext();
-  }, [emblaApi]);
-  const onSelect = useCallback2((emblaApi2) => {
-    setPrevBtnDisabled(!emblaApi2.canGoToPrev());
-    setNextBtnDisabled(!emblaApi2.canGoToNext());
-  }, []);
-  useEffect2(() => {
-    if (!emblaApi) return;
-    onSelect(emblaApi);
-    emblaApi.on("reinit", onSelect).on("select", onSelect);
-  }, [emblaApi, onSelect]);
-  return {
-    prevBtnDisabled,
-    nextBtnDisabled,
-    onPrevButtonClick,
-    onNextButtonClick
-  };
-};
-
-// src/components/EmblaCarousel/index.tsx
-import clsx from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var TWEEN_FACTOR_BASE = 0.2;
-var EmblaCarousel = ({
-  options,
-  children,
-  testid,
-  leftRightChevrons = false,
-  autoplay = false,
-  chevronThemeColor = false
-}) => {
-  const autoplayPlugin = Autoplay({ delay: 4e3 });
-  const [emblaRef, emblaApi] = useEmblaCarousel(
-    options,
-    autoplay ? [autoplayPlugin] : []
-  );
-  const emblaRootRef = useRef(null);
-  const [emblaHeight, setEmblaHeight] = React.useState(
-    void 0
-  );
-  useEffect3(() => {
-    if (!emblaApi || !leftRightChevrons) return;
-    const updateHeight = () => {
-      const selectedIndex = emblaApi.selectedSnap();
-      const slide = emblaApi.slideNodes()[selectedIndex];
-      if (slide && emblaRootRef.current) {
-        setEmblaHeight(slide.offsetHeight);
-      }
-    };
-    updateHeight();
-    emblaApi.on("select", updateHeight).on("reinit", updateHeight);
-    return () => {
-      emblaApi.off("select", updateHeight);
-      emblaApi.off("reinit", updateHeight);
-    };
-  }, [emblaApi, leftRightChevrons]);
-  useEffect3(() => {
-    var _a, _b;
-    if (!emblaApi || !autoplay) return;
-    (_b = (_a = emblaApi.plugins()) == null ? void 0 : _a.autoplay) == null ? void 0 : _b.play();
-  }, [emblaApi, autoplay]);
-  const {
-    prevBtnDisabled,
-    nextBtnDisabled,
-    onPrevButtonClick,
-    onNextButtonClick
-  } = usePrevNextButtons(emblaApi);
-  const { selectedSnap, snapCount } = useSelectedSnapDisplay(emblaApi);
-  const tweenFactor = useRef(0);
-  const tweenNodes = useRef([]);
-  const isMobile = useMatchesMobile();
-  const setTweenNodes = useCallback3((api) => {
-    tweenNodes.current = api.slideNodes().map((slideNode) => {
-      return slideNode.querySelector(".embla__parallax__layer");
-    });
-  }, []);
-  const setTweenFactor = useCallback3((api) => {
-    tweenFactor.current = TWEEN_FACTOR_BASE * api.snapList().length;
-  }, []);
-  const tweenParallax = useCallback3(
-    (api, event) => {
-      const engine = api.internalEngine();
-      const scrollProgress = api.scrollProgress();
-      const slidesInView = api.slidesInView();
-      const isScrollEvent = (event == null ? void 0 : event.type) === "scroll";
-      api.snapList().forEach((scrollSnap, snapIndex) => {
-        let diffToTarget = scrollSnap - scrollProgress;
-        const slidesInSnap = engine.scrollSnapList.slidesBySnap[snapIndex];
-        slidesInSnap.forEach((slideIndex) => {
-          if (isScrollEvent && !slidesInView.includes(slideIndex)) return;
-          if (engine.options.loop) {
-            engine.slideLooper.loopPoints.forEach((loopItem) => {
-              const target = loopItem.target();
-              if (slideIndex === loopItem.index && target !== 0) {
-                const sign = Math.sign(target);
-                if (sign === -1)
-                  diffToTarget = scrollSnap - (1 + scrollProgress);
-                if (sign === 1)
-                  diffToTarget = scrollSnap + (1 - scrollProgress);
-              }
-            });
-          }
-          const translate = diffToTarget * (-1 * tweenFactor.current) * 100;
-          const tweenNode = tweenNodes.current[slideIndex];
-          if (tweenNode) {
-            tweenNode.style.transform = `translateX(${translate}%)`;
-          }
-        });
-      });
-    },
-    []
-  );
-  useEffect3(() => {
-    if (!emblaApi || !isMobile) return;
-    setTweenNodes(emblaApi);
-    setTweenFactor(emblaApi);
-    tweenParallax(emblaApi);
-    emblaApi.on("reinit", setTweenNodes).on("reinit", setTweenFactor).on("reinit", tweenParallax).on("scroll", tweenParallax).on("slidefocus", tweenParallax);
-  }, [emblaApi, isMobile, setTweenNodes, setTweenFactor, tweenParallax]);
-  const handlePrev = () => {
-    var _a, _b;
-    onPrevButtonClick();
-    (_b = (_a = emblaApi == null ? void 0 : emblaApi.plugins()) == null ? void 0 : _a.autoplay) == null ? void 0 : _b.reset();
-  };
-  const handleNext = () => {
-    var _a, _b;
-    onNextButtonClick();
-    (_b = (_a = emblaApi == null ? void 0 : emblaApi.plugins()) == null ? void 0 : _a.autoplay) == null ? void 0 : _b.reset();
-  };
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: "w-full m-auto grid gap-4 relative",
-      "data-testid": testid,
-      ref: leftRightChevrons ? emblaRootRef : void 0,
-      style: leftRightChevrons && emblaHeight ? { height: emblaHeight, transition: "height 0.3s ease" } : void 0,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "embla__viewport overflow-hidden", ref: emblaRef, children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(
-              "embla__container flex touch-pan-y touch-pinch-zoom",
-              !leftRightChevrons && "desktop:pb-3 gap-2"
-            ),
-            children
-          }
-        ) }),
-        !leftRightChevrons ? /* @__PURE__ */ jsxs("div", { className: "justify-between hidden desktop:flex", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              PrevButton,
-              {
-                circleChevron: true,
-                onClick: handlePrev,
-                disabled: prevBtnDisabled
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              NextButton,
-              {
-                circleChevron: true,
-                onClick: handleNext,
-                disabled: nextBtnDisabled
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            SelectedSnapDisplay,
-            {
-              selectedSnap,
-              snapCount
-            }
-          )
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            PrevButton,
-            {
-              className: "absolute top-1/2 -translate-y-1/2 left-0 border-transparent! size-10! desktop:size-12!",
-              iconClassName: clsx(
-                "size-6! desktop:size-8!",
-                chevronThemeColor && "text-text-link-normal group-hover:text-text-link-hover group-active:text-text-link-active",
-                !chevronThemeColor && "text-white group-hover:text-text-link-normal group-active:text-text-link-active"
-              ),
-              onClick: handlePrev,
-              disabled: prevBtnDisabled
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            NextButton,
-            {
-              className: "absolute top-1/2 -translate-y-1/2 right-0 border-transparent! size-10! desktop:size-12!",
-              iconClassName: clsx(
-                "size-6! desktop:size-8!",
-                chevronThemeColor && "text-text-link-normal group-hover:text-text-link-hover group-active:text-text-link-active",
-                !chevronThemeColor && "text-white group-hover:text-text-link-normal group-active:text-text-link-active"
-              ),
-              onClick: handleNext,
-              disabled: nextBtnDisabled
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-var EmblaCarousel_default = EmblaCarousel;
-
-export {
-  EmblaCarousel,
-  EmblaCarousel_default
-};

package/dist/chunk-Z2HPSFEQ.js

@@ -1,14 +0,0 @@
-// src/components/EmblaCarousel/SelectedSnapDisplay.tsx
-import { jsxs } from "react/jsx-runtime";
-var SelectedSnapDisplay = (props) => {
-  const { selectedSnap, snapCount } = props;
-  return /* @__PURE__ */ jsxs("div", { className: "embla__selected-snap-display", children: [
-    selectedSnap + 1,
-    " / ",
-    snapCount
-  ] });
-};
-
-export {
-  SelectedSnapDisplay
-};