@dmsi/wedgekit-react 0.0.916 → 0.0.918

package/dist/components/index.cjs

@@ -8662,6 +8662,7 @@ function AccessCardGroup(props) {
 // src/components/EmblaCarousel/index.tsx
 var import_react43 = require("react");
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"), 1);
+var import_embla_carousel_autoplay = __toESM(require("embla-carousel-autoplay"), 1);
 
 // src/components/EmblaCarousel/SelectedSnapDisplay.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
@@ -8699,17 +8700,18 @@ var useSelectedSnapDisplay = (emblaApi) => {
 var import_clsx44 = __toESM(require("clsx"), 1);
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var arrowButtonStyles = (0, import_clsx44.default)(
-  "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"
+  "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 group"
 );
 var PrevButton = (props) => {
-  const _a = props, { children, disabled } = _a, restProps = __objRest(_a, ["children", "disabled"]);
+  const _a = props, { children, disabled, className, iconClassName, circleChevron } = _a, restProps = __objRest(_a, ["children", "disabled", "className", "iconClassName", "circleChevron"]);
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "button",
     __spreadProps(__spreadValues({
       className: (0, import_clsx44.default)(
         arrowButtonStyles,
         !disabled && "border-border-primary-normal hover:border-border-action-hover active:border-border-action-active",
-        disabled && "border-border-action-disabled"
+        disabled && "border-border-action-disabled",
+        className
       ),
       type: "button"
     }, restProps), {
@@ -8719,8 +8721,9 @@ var PrevButton = (props) => {
           {
             className: (0, import_clsx44.default)(
               "size-3 transition-colors duration-300 ease-in-out",
-              !disabled && "text-text-primary-normal",
-              disabled && "text-icon-primary-disabled"
+              !disabled && circleChevron && "text-text-primary-normal",
+              disabled && "text-icon-primary-disabled",
+              iconClassName
             ),
             viewBox: "0 0 532 532",
             children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
@@ -8738,14 +8741,15 @@ var PrevButton = (props) => {
   );
 };
 var NextButton = (props) => {
-  const _a = props, { children, disabled } = _a, restProps = __objRest(_a, ["children", "disabled"]);
+  const _a = props, { children, disabled, className, iconClassName, circleChevron } = _a, restProps = __objRest(_a, ["children", "disabled", "className", "iconClassName", "circleChevron"]);
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "button",
     __spreadProps(__spreadValues({
       className: (0, import_clsx44.default)(
         arrowButtonStyles,
         !disabled && "border-border-primary-normal hover:border-border-action-hover active:border-border-action-active",
-        disabled && "border-border-action-disabled"
+        disabled && "border-border-action-disabled",
+        className
       ),
       type: "button"
     }, restProps), {
@@ -8755,8 +8759,9 @@ var NextButton = (props) => {
           {
             className: (0, import_clsx44.default)(
               "size-3 transition-colors duration-300 ease-in-out",
-              !disabled && "text-text-primary-normal",
-              disabled && "text-icon-primary-disabled"
+              !disabled && circleChevron && "text-text-primary-normal",
+              disabled && "text-icon-primary-disabled",
+              iconClassName
             ),
             viewBox: "0 0 532 532",
             children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
@@ -8805,13 +8810,27 @@ var usePrevNextButtons = (emblaApi) => {
 };
 
 // src/components/EmblaCarousel/index.tsx
+var import_clsx45 = __toESM(require("clsx"), 1);
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var TWEEN_FACTOR_BASE = 0.2;
-var EmblaCarousel = ({ options, children }) => {
-  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)(options);
-  const tweenFactor = (0, import_react43.useRef)(0);
-  const tweenNodes = (0, import_react43.useRef)([]);
-  const isMobile = useMatchesMobile();
+var EmblaCarousel = ({
+  options,
+  children,
+  testid,
+  leftRightChevrons = false,
+  autoplay = false,
+  chevronThemeColor = false
+}) => {
+  const autoplayPlugin = (0, import_embla_carousel_autoplay.default)({ delay: 4e3 });
+  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)(
+    options,
+    autoplay ? [autoplayPlugin] : []
+  );
+  (0, import_react43.useEffect)(() => {
+    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,
@@ -8819,21 +8838,24 @@ var EmblaCarousel = ({ options, children }) => {
     onNextButtonClick
   } = usePrevNextButtons(emblaApi);
   const { selectedSnap, snapCount } = useSelectedSnapDisplay(emblaApi);
-  const setTweenNodes = (0, import_react43.useCallback)((emblaApi2) => {
-    tweenNodes.current = emblaApi2.slideNodes().map((slideNode) => {
+  const tweenFactor = (0, import_react43.useRef)(0);
+  const tweenNodes = (0, import_react43.useRef)([]);
+  const isMobile = useMatchesMobile();
+  const setTweenNodes = (0, import_react43.useCallback)((api) => {
+    tweenNodes.current = api.slideNodes().map((slideNode) => {
       return slideNode.querySelector(".embla__parallax__layer");
     });
   }, []);
-  const setTweenFactor = (0, import_react43.useCallback)((emblaApi2) => {
-    tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi2.snapList().length;
+  const setTweenFactor = (0, import_react43.useCallback)((api) => {
+    tweenFactor.current = TWEEN_FACTOR_BASE * api.snapList().length;
   }, []);
   const tweenParallax = (0, import_react43.useCallback)(
-    (emblaApi2, event) => {
-      const engine = emblaApi2.internalEngine();
-      const scrollProgress = emblaApi2.scrollProgress();
-      const slidesInView = emblaApi2.slidesInView();
+    (api, event) => {
+      const engine = api.internalEngine();
+      const scrollProgress = api.scrollProgress();
+      const slidesInView = api.slidesInView();
       const isScrollEvent = (event == null ? void 0 : event.type) === "scroll";
-      emblaApi2.snapList().forEach((scrollSnap, snapIndex) => {
+      api.snapList().forEach((scrollSnap, snapIndex) => {
         let diffToTarget = scrollSnap - scrollProgress;
         const slidesInSnap = engine.scrollSnapList.slidesBySnap[snapIndex];
         slidesInSnap.forEach((slideIndex) => {
@@ -8843,12 +8865,10 @@ var EmblaCarousel = ({ options, children }) => {
               const target = loopItem.target();
               if (slideIndex === loopItem.index && target !== 0) {
                 const sign = Math.sign(target);
-                if (sign === -1) {
+                if (sign === -1)
                   diffToTarget = scrollSnap - (1 + scrollProgress);
-                }
-                if (sign === 1) {
+                if (sign === 1)
                   diffToTarget = scrollSnap + (1 - scrollProgress);
-                }
               }
             });
           }
@@ -8868,13 +8888,46 @@ var EmblaCarousel = ({ options, children }) => {
     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__ */ (0, import_jsx_runtime69.jsxs)("section", { className: "w-full m-auto grid gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "embla__viewport overflow-hidden", ref: emblaRef, children: /* @__PURE__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "justify-between hidden desktop:flex", children: [
+  }, [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__ */ (0, import_jsx_runtime69.jsxs)("section", { className: "w-full m-auto grid gap-4 relative", "data-testid": testid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "embla__viewport overflow-hidden", ref: emblaRef, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      "div",
+      {
+        className: (0, import_clsx45.default)(
+          "embla__container flex touch-pan-y touch-pinch-zoom",
+          !leftRightChevrons && "pb-3"
+        ),
+        children
+      }
+    ) }),
+    !leftRightChevrons ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "justify-between hidden desktop:flex", children: [
       /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PrevButton, { onClick: onPrevButtonClick, disabled: prevBtnDisabled }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(NextButton, { onClick: onNextButtonClick, disabled: nextBtnDisabled })
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          PrevButton,
+          {
+            circleChevron: true,
+            onClick: handlePrev,
+            disabled: prevBtnDisabled
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          NextButton,
+          {
+            circleChevron: true,
+            onClick: handleNext,
+            disabled: nextBtnDisabled
+          }
+        )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         SelectedSnapDisplay,
@@ -8883,6 +8936,33 @@ var EmblaCarousel = ({ options, children }) => {
           snapCount
         }
       )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        PrevButton,
+        {
+          className: "absolute top-1/2 -translate-y-1/2 left-0 border-transparent! size-10! desktop:size-12!",
+          iconClassName: (0, import_clsx45.default)(
+            "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__ */ (0, import_jsx_runtime69.jsx)(
+        NextButton,
+        {
+          className: "absolute top-1/2 -translate-y-1/2 right-0 border-transparent! size-10! desktop:size-12!",
+          iconClassName: (0, import_clsx45.default)(
+            "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
+        }
+      )
     ] })
   ] });
 };

package/dist/components/index.css

@@ -563,6 +563,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
@@ -756,10 +759,18 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-6\! {
+    width: calc(var(--spacing) * 6) !important;
+    height: calc(var(--spacing) * 6) !important;
+  }
   .size-9 {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .size-10\! {
+    width: calc(var(--spacing) * 10) !important;
+    height: calc(var(--spacing) * 10) !important;
+  }
   .\!h-4\.5 {
     height: calc(var(--spacing) * 4.5) !important;
   }
@@ -1004,6 +1015,10 @@
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-2\/4 {
     --tw-translate-y: calc(2/4 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1463,6 +1478,9 @@
   .border-transparent {
     border-color: transparent;
   }
+  .border-transparent\! {
+    border-color: transparent !important;
+  }
   .border-warning-400 {
     border-color: var(--color-warning-400);
   }
@@ -2782,6 +2800,25 @@
       }
     }
   }
+  .group-hover\:text-text-link-hover {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-text-link-hover);
+      }
+    }
+  }
+  .group-hover\:text-text-link-normal {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-text-link-normal);
+      }
+    }
+  }
+  .group-active\:text-text-link-active {
+    &:is(:where(.group):active *) {
+      color: var(--color-text-link-active);
+    }
+  }
   .group-data-\[checked\]\:translate-x-3 {
     &:is(:where(.group)[data-checked] *) {
       --tw-translate-x: calc(var(--spacing) * 3);
@@ -4265,6 +4302,18 @@
       display: none;
     }
   }
+  .desktop\:size-8\! {
+    @container root (width >= 48rem) {
+      width: calc(var(--spacing) * 8) !important;
+      height: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .desktop\:size-12\! {
+    @container root (width >= 48rem) {
+      width: calc(var(--spacing) * 12) !important;
+      height: calc(var(--spacing) * 12) !important;
+    }
+  }
   .desktop\:h-\[190px\] {
     @container root (width >= 48rem) {
       height: 190px;

package/dist/components/index.js

@@ -19,7 +19,7 @@ import {
 } from "../chunk-Y5GD2FJA.js";
 import {
   EmblaCarousel
-} from "../chunk-3N34VVYD.js";
+} from "../chunk-ZACRFGND.js";
 import "../chunk-EJVCDJ7U.js";
 import "../chunk-27DJTEAB.js";
 import {
@@ -27,7 +27,7 @@ import {
 } from "../chunk-5IFPG6TS.js";
 import "../chunk-XWYDWH4W.js";
 import "../chunk-AJ5M6MVX.js";
-import "../chunk-YV5FS7NV.js";
+import "../chunk-7IPESTQS.js";
 import "../chunk-Z2HPSFEQ.js";
 import "../chunk-AT4AWD6B.js";
 import "../chunk-EWGHVZL5.js";

package/dist/index.css

@@ -541,6 +541,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
@@ -734,10 +737,18 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-6\! {
+    width: calc(var(--spacing) * 6) !important;
+    height: calc(var(--spacing) * 6) !important;
+  }
   .size-9 {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .size-10\! {
+    width: calc(var(--spacing) * 10) !important;
+    height: calc(var(--spacing) * 10) !important;
+  }
   .\!h-4\.5 {
     height: calc(var(--spacing) * 4.5) !important;
   }
@@ -982,6 +993,10 @@
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-2\/4 {
     --tw-translate-y: calc(2/4 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1441,6 +1456,9 @@
   .border-transparent {
     border-color: transparent;
   }
+  .border-transparent\! {
+    border-color: transparent !important;
+  }
   .border-warning-400 {
     border-color: var(--color-warning-400);
   }
@@ -2760,6 +2778,25 @@
       }
     }
   }
+  .group-hover\:text-text-link-hover {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-text-link-hover);
+      }
+    }
+  }
+  .group-hover\:text-text-link-normal {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-text-link-normal);
+      }
+    }
+  }
+  .group-active\:text-text-link-active {
+    &:is(:where(.group):active *) {
+      color: var(--color-text-link-active);
+    }
+  }
   .group-data-\[checked\]\:translate-x-3 {
     &:is(:where(.group)[data-checked] *) {
       --tw-translate-x: calc(var(--spacing) * 3);
@@ -4243,6 +4280,18 @@
       display: none;
     }
   }
+  .desktop\:size-8\! {
+    @container root (width >= 48rem) {
+      width: calc(var(--spacing) * 8) !important;
+      height: calc(var(--spacing) * 8) !important;
+    }
+  }
+  .desktop\:size-12\! {
+    @container root (width >= 48rem) {
+      width: calc(var(--spacing) * 12) !important;
+      height: calc(var(--spacing) * 12) !important;
+    }
+  }
   .desktop\:h-\[190px\] {
     @container root (width >= 48rem) {
       height: 190px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.916",
+  "version": "0.0.918",
   "type": "module",
   "scripts": {
     "build": "tsup",
@@ -62,6 +62,7 @@
     "@tanstack/react-virtual": "^3.13.12",
     "clsx": "^2.1.1",
     "embla-carousel": "^9.0.0-rc01",
+    "embla-carousel-autoplay": "^9.0.0-rc01",
     "embla-carousel-react": "^9.0.0-rc01",
     "pdfjs-dist": "^5.4.149",
     "react-use": "^17.6.0"