@dmsi/wedgekit-react 0.0.863 → 0.0.865

package/dist/chunk-3N34VVYD.js

@@ -0,0 +1,154 @@
+import {
+  NextButton,
+  PrevButton
+} from "./chunk-YV5FS7NV.js";
+import {
+  SelectedSnapDisplay
+} from "./chunk-Z2HPSFEQ.js";
+import {
+  useMatchesMobile
+} from "./chunk-WVGXD7HT.js";
+
+// src/components/EmblaCarousel/index.tsx
+import { useCallback as useCallback3, useEffect as useEffect3, useRef } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+
+// 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.slideNodes().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 { jsx, jsxs } from "react/jsx-runtime";
+var TWEEN_FACTOR_BASE = 0.2;
+var EmblaCarousel = ({ options, children }) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel(options);
+  const tweenFactor = useRef(0);
+  const tweenNodes = useRef([]);
+  const isMobile = useMatchesMobile();
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick
+  } = usePrevNextButtons(emblaApi);
+  const { selectedSnap, snapCount } = useSelectedSnapDisplay(emblaApi);
+  const setTweenNodes = useCallback3((emblaApi2) => {
+    tweenNodes.current = emblaApi2.slideNodes().map((slideNode) => {
+      return slideNode.querySelector(".embla__parallax__layer");
+    });
+  }, []);
+  const setTweenFactor = useCallback3((emblaApi2) => {
+    tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi2.snapList().length;
+  }, []);
+  const tweenParallax = useCallback3(
+    (emblaApi2, event) => {
+      const engine = emblaApi2.internalEngine();
+      const scrollProgress = emblaApi2.scrollProgress();
+      const slidesInView = emblaApi2.slidesInView();
+      const isScrollEvent = (event == null ? void 0 : event.type) === "scroll";
+      emblaApi2.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, tweenParallax, isMobile, setTweenNodes, setTweenFactor]);
+  return /* @__PURE__ */ jsxs("section", { className: "w-full m-auto grid gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "embla__viewport overflow-hidden", ref: emblaRef, children: /* @__PURE__ */ jsx("div", { className: "embla__container flex touch-pan-y touch-pinch-zoom gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap pb-3", children }) }),
+    /* @__PURE__ */ jsxs("div", { className: "justify-between hidden desktop:flex", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(PrevButton, { onClick: onPrevButtonClick, disabled: prevBtnDisabled }),
+        /* @__PURE__ */ jsx(NextButton, { onClick: onNextButtonClick, disabled: nextBtnDisabled })
+      ] }),
+      /* @__PURE__ */ jsx(
+        SelectedSnapDisplay,
+        {
+          selectedSnap,
+          snapCount
+        }
+      )
+    ] })
+  ] });
+};
+var EmblaCarousel_default = EmblaCarousel;
+
+export {
+  EmblaCarousel,
+  EmblaCarousel_default
+};

package/dist/{chunk-57HL5K5I.js → chunk-4DPSNQCM.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-5IFPG6TS.js";
 import {
   Modal
-} from "./chunk-IPQIZG7U.js";
+} from "./chunk-N36EJLRW.js";
 import {
   Heading2
 } from "./chunk-MXSJF6TW.js";

package/dist/{chunk-BH4UKMXV.js → chunk-5NRKL5CJ.js}

@@ -1,12 +1,12 @@
 import {
   Menu
-} from "./chunk-RFF2EFBX.js";
+} from "./chunk-OM7QLLI2.js";
 import {
   useSubMenuSystem
-} from "./chunk-FXJ7C6RF.js";
+} from "./chunk-PE3EZP56.js";
 import {
   MenuOption
-} from "./chunk-7OLDYFKY.js";
+} from "./chunk-X3NDEFVA.js";
 import {
   Search
 } from "./chunk-FHXCCVOG.js";

package/dist/{chunk-A57PKP6Z.js → chunk-E7XBOMT4.js}

@@ -1,6 +1,6 @@
 import {
   RowDetailModalProvider
-} from "./chunk-57HL5K5I.js";
+} from "./chunk-4DPSNQCM.js";
 import {
   GridContextProvider
 } from "./chunk-M7INAUAJ.js";
@@ -19,19 +19,19 @@ import {
 } from "./chunk-FZ2TEKOE.js";
 import {
   Tooltip
-} from "./chunk-ZL6NXIGS.js";
+} from "./chunk-HT57FLRW.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "./chunk-BH4UKMXV.js";
+} from "./chunk-5NRKL5CJ.js";
 import {
   Menu
-} from "./chunk-RFF2EFBX.js";
+} from "./chunk-OM7QLLI2.js";
 import {
   MenuOption
-} from "./chunk-7OLDYFKY.js";
+} from "./chunk-X3NDEFVA.js";
 import {
   Search
 } from "./chunk-FHXCCVOG.js";
@@ -48,7 +48,7 @@ import {
 import {
   useInfiniteScroll,
   useTableLayout
-} from "./chunk-BXEE6VGQ.js";
+} from "./chunk-KLH67DTH.js";
 import {
   findDocumentRoot
 } from "./chunk-VXWSAIB5.js";

package/dist/{chunk-CJPGHBV5.js → chunk-EGECC3PQ.js}

@@ -1,6 +1,6 @@
 import {
   useMatchesMobile
-} from "./chunk-BXEE6VGQ.js";
+} from "./chunk-WVGXD7HT.js";
 import {
   Stack
 } from "./chunk-MTGNBARV.js";

package/dist/{chunk-ZL6NXIGS.js → chunk-HT57FLRW.js}

@@ -1,6 +1,6 @@
 import {
   useMatchesMobile
-} from "./chunk-BXEE6VGQ.js";
+} from "./chunk-WVGXD7HT.js";
 import {
   componentPadding,
   typography

package/dist/{chunk-BXEE6VGQ.js → chunk-KLH67DTH.js}

@@ -61,24 +61,9 @@ function useInfiniteScroll({
   }, [containerRef, onLoadMore, isLoading, offset, enabled]);
 }
 
-// src/hooks/useMatchesMedia.ts
-import { useLayoutEffect, useState } from "react";
-var useMatchesMedia = (query) => {
-  const [matches, setMatches] = useState();
-  useLayoutEffect(() => {
-    const mediaQueryList = window.matchMedia(query);
-    const listener = () => setMatches(mediaQueryList.matches);
-    listener();
-    mediaQueryList.addEventListener("change", listener);
-    return () => mediaQueryList.removeEventListener("change", listener);
-  }, [query]);
-  return matches;
-};
-var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
-
 // src/hooks/useTableLayout.ts
 import {
-  useState as useState2,
+  useState,
   useEffect as useEffect3,
   useCallback,
   useRef
@@ -86,8 +71,8 @@ import {
 var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
 var getLocalStorageKeyWithPrefix = (key) => `${LocalStoragePrefix}__${key}`;
 function useTableLayout(initialColumns, key, autosync = true) {
-  const [columns, setColumns] = useState2(initialColumns);
-  const [isReady, setIsReady] = useState2(false);
+  const [columns, setColumns] = useState(initialColumns);
+  const [isReady, setIsReady] = useState(false);
   const isReadyRef = useRef(false);
   const keyRef = useRef(key);
   useEffect3(() => {
@@ -152,10 +137,10 @@ function useTableLayout(initialColumns, key, autosync = true) {
 }
 
 // src/hooks/useEditCell.tsx
-import { useRef as useRef2, useState as useState3 } from "react";
+import { useRef as useRef2, useState as useState2 } from "react";
 function useEditCell(initialValue) {
-  const [value, setValue] = useState3(initialValue);
-  const [isEdit, setIsEdit] = useState3(false);
+  const [value, setValue] = useState2(initialValue);
+  const [isEdit, setIsEdit] = useState2(false);
   const inputRef = useRef2(null);
   function changeToEditMode() {
     setIsEdit(true);
@@ -180,8 +165,6 @@ function useEditCell(initialValue) {
 export {
   useKeydown,
   useInfiniteScroll,
-  useMatchesMedia,
-  useMatchesMobile,
   useTableLayout,
   useEditCell
 };

package/dist/{chunk-C5DKGJ4E.js → chunk-KOKA2IJC.js}

@@ -1,3 +1,6 @@
+import {
+  CarouselPagination
+} from "./chunk-MBZ55T2D.js";
 import {
   MobileImageCarousel
 } from "./chunk-2IKT6IHB.js";
@@ -10,15 +13,12 @@ import {
 import {
   ZoomWindow
 } from "./chunk-BQNPOGD5.js";
-import {
-  CarouselPagination
-} from "./chunk-MBZ55T2D.js";
 import {
   Grid
 } from "./chunk-BWPNXY7T.js";
 import {
   useMatchesMobile
-} from "./chunk-BXEE6VGQ.js";
+} from "./chunk-WVGXD7HT.js";
 import {
   Stack
 } from "./chunk-MTGNBARV.js";

package/dist/{chunk-IPQIZG7U.js → chunk-N36EJLRW.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk-E7LGUC2B.js";
 import {
   useMatchesMobile
-} from "./chunk-BXEE6VGQ.js";
+} from "./chunk-WVGXD7HT.js";
 import {
   findDocumentRoot
 } from "./chunk-VXWSAIB5.js";

package/dist/{chunk-RFF2EFBX.js → chunk-OM7QLLI2.js}

@@ -1,9 +1,9 @@
 import {
   useMenuPosition
-} from "./chunk-FXJ7C6RF.js";
+} from "./chunk-PE3EZP56.js";
 import {
   useMatchesMobile
-} from "./chunk-BXEE6VGQ.js";
+} from "./chunk-WVGXD7HT.js";
 import {
   findDocumentRoot
 } from "./chunk-VXWSAIB5.js";

package/dist/{chunk-FXJ7C6RF.js → chunk-PE3EZP56.js}

@@ -1,6 +1,6 @@
 import {
   useMatchesMobile
-} from "./chunk-BXEE6VGQ.js";
+} from "./chunk-WVGXD7HT.js";
 import {
   __spreadValues
 } from "./chunk-ORMEWXMH.js";

package/dist/chunk-WVGXD7HT.js

@@ -0,0 +1,19 @@
+// src/hooks/useMatchesMedia.ts
+import { useLayoutEffect, useState } from "react";
+var useMatchesMedia = (query) => {
+  const [matches, setMatches] = useState();
+  useLayoutEffect(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = () => setMatches(mediaQueryList.matches);
+    listener();
+    mediaQueryList.addEventListener("change", listener);
+    return () => mediaQueryList.removeEventListener("change", listener);
+  }, [query]);
+  return matches;
+};
+var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
+
+export {
+  useMatchesMedia,
+  useMatchesMobile
+};

package/dist/{chunk-7OLDYFKY.js → chunk-X3NDEFVA.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-HXGJVYGQ.js";
 import {
   useMatchesMobile
-} from "./chunk-BXEE6VGQ.js";
+} from "./chunk-WVGXD7HT.js";
 import {
   Caption
 } from "./chunk-PS6UJZVH.js";

package/dist/chunk-YV5FS7NV.js

@@ -0,0 +1,89 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/EmblaCarousel/ArrowButtons.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var arrowButtonStyles = clsx(
+  "appearance-none bg-transparent border cursor-pointer p-2 flex items-center justify-center size-9 rounded-full transition-colors duration-300 ease-in-out"
+);
+var PrevButton = (props) => {
+  const _a = props, { children, disabled } = _a, restProps = __objRest(_a, ["children", "disabled"]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    __spreadProps(__spreadValues({
+      className: clsx(
+        arrowButtonStyles,
+        !disabled && "border-border-primary-normal hover:border-border-action-hover active:border-border-action-active",
+        disabled && "border-border-action-disabled"
+      ),
+      type: "button"
+    }, restProps), {
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: clsx(
+              "size-3 transition-colors duration-300 ease-in-out",
+              !disabled && "text-text-primary-normal",
+              disabled && "text-icon-primary-disabled"
+            ),
+            viewBox: "0 0 532 532",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
+              }
+            )
+          }
+        ),
+        children
+      ]
+    })
+  );
+};
+var NextButton = (props) => {
+  const _a = props, { children, disabled } = _a, restProps = __objRest(_a, ["children", "disabled"]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    __spreadProps(__spreadValues({
+      className: clsx(
+        arrowButtonStyles,
+        !disabled && "border-border-primary-normal hover:border-border-action-hover active:border-border-action-active",
+        disabled && "border-border-action-disabled"
+      ),
+      type: "button"
+    }, restProps), {
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: clsx(
+              "size-3 transition-colors duration-300 ease-in-out",
+              !disabled && "text-text-primary-normal",
+              disabled && "text-icon-primary-disabled"
+            ),
+            viewBox: "0 0 532 532",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
+              }
+            )
+          }
+        ),
+        children
+      ]
+    })
+  );
+};
+
+export {
+  PrevButton,
+  NextButton
+};

package/dist/chunk-Z2HPSFEQ.js

@@ -0,0 +1,14 @@
+// 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
+};

package/dist/{chunk-RTZO2OU7.js → chunk-Z7XANQ47.js}

@@ -1,6 +1,6 @@
 import {
   Tooltip
-} from "./chunk-ZL6NXIGS.js";
+} from "./chunk-HT57FLRW.js";
 import {
   Button
 } from "./chunk-BMAZBFUU.js";