@expcat/tigercat-react 1.4.0 → 2.0.0-preview.1

package/dist/chunk-B5TUTAVX.js

@@ -1,321 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Carousel.tsx
-
-
-
-
-
-
-
-
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var _tigercatcore = require('@expcat/tigercat-core');
-var _jsxruntime = require('react/jsx-runtime');
-var Carousel = _react.forwardRef.call(void 0, 
-  ({
-    autoplay = false,
-    autoplaySpeed = 3e3,
-    dots = true,
-    dotPosition = "bottom",
-    effect = "scroll",
-    arrows = false,
-    infinite = true,
-    speed = 500,
-    initialSlide = 0,
-    pauseOnHover = true,
-    pauseOnFocus = true,
-    className,
-    style,
-    onChange,
-    onBeforeChange,
-    children
-  }, ref) => {
-    const [currentIndex, setCurrentIndex] = _react.useState.call(void 0, initialSlide);
-    const [isPaused, setIsPaused] = _react.useState.call(void 0, false);
-    const containerRef = _react.useRef.call(void 0, null);
-    const touchStartRef = _react.useRef.call(void 0, null);
-    const touchCurrentRef = _react.useRef.call(void 0, null);
-    const onChangeRef = _react.useRef.call(void 0, onChange);
-    const onBeforeChangeRef = _react.useRef.call(void 0, onBeforeChange);
-    onChangeRef.current = onChange;
-    onBeforeChangeRef.current = onBeforeChange;
-    const currentIndexRef = _react.useRef.call(void 0, currentIndex);
-    currentIndexRef.current = currentIndex;
-    const slides = _react.useMemo.call(void 0, () => {
-      return _react2.default.Children.toArray(children).filter((child) => _react2.default.isValidElement(child));
-    }, [children]);
-    const slideCount = slides.length;
-    const navigateByDirection = _react.useCallback.call(void 0, 
-      (direction) => {
-        const current = currentIndexRef.current;
-        const targetIndex = direction === "next" ? _tigercatcore.getNextSlideIndex.call(void 0, current, slideCount, infinite) : _tigercatcore.getPrevSlideIndex.call(void 0, current, slideCount, infinite);
-        if (targetIndex === current) return;
-        _optionalChain([onBeforeChangeRef, 'access', _2 => _2.current, 'optionalCall', _3 => _3(current, targetIndex)]);
-        setCurrentIndex(targetIndex);
-        _optionalChain([onChangeRef, 'access', _4 => _4.current, 'optionalCall', _5 => _5(targetIndex, current)]);
-      },
-      [slideCount, infinite]
-    );
-    const containerClasses = _react.useMemo.call(void 0, 
-      () => _tigercatcore.classNames.call(void 0, _tigercatcore.getCarouselContainerClasses.call(void 0, className)),
-      [className]
-    );
-    const trackClasses = _react.useMemo.call(void 0, () => {
-      return effect === "fade" ? _tigercatcore.carouselTrackFadeClasses : _tigercatcore.carouselTrackScrollClasses;
-    }, [effect]);
-    const trackStyle = _react.useMemo.call(void 0, () => {
-      if (effect === "scroll") {
-        return {
-          transform: _tigercatcore.getScrollTransform.call(void 0, currentIndex),
-          transitionDuration: `${speed}ms`
-        };
-      }
-      return {};
-    }, [effect, currentIndex, speed]);
-    const slideStyle = _react.useMemo.call(void 0, () => ({ transitionDuration: `${speed}ms` }), [speed]);
-    const getSlideClasses = (index) => {
-      const isActive = index === currentIndex;
-      if (effect === "fade") {
-        const positionClass = index === 0 ? "relative" : "absolute inset-0";
-        return _tigercatcore.classNames.call(void 0, 
-          positionClass,
-          "w-full transition-opacity ease-in-out",
-          isActive ? "opacity-100 z-10" : "opacity-0 z-0"
-        );
-      }
-      return _tigercatcore.carouselSlideBaseClasses;
-    };
-    const dotsClasses = _react.useMemo.call(void 0, () => {
-      return _tigercatcore.getCarouselDotsClasses.call(void 0, dotPosition);
-    }, [dotPosition]);
-    const goTo = _react.useCallback.call(void 0, 
-      (index) => {
-        const clampedIndex = _tigercatcore.clampSlideIndex.call(void 0, index, slideCount);
-        if (clampedIndex === currentIndex) return;
-        _optionalChain([onBeforeChange, 'optionalCall', _6 => _6(currentIndex, clampedIndex)]);
-        const prevIndex = currentIndex;
-        setCurrentIndex(clampedIndex);
-        _optionalChain([onChange, 'optionalCall', _7 => _7(clampedIndex, prevIndex)]);
-      },
-      [currentIndex, slideCount, onBeforeChange, onChange]
-    );
-    const next = _react.useCallback.call(void 0, () => {
-      const nextIdx = _tigercatcore.getNextSlideIndex.call(void 0, currentIndex, slideCount, infinite);
-      if (nextIdx !== currentIndex) {
-        goTo(nextIdx);
-      }
-    }, [currentIndex, slideCount, infinite, goTo]);
-    const prev = _react.useCallback.call(void 0, () => {
-      const prevIdx = _tigercatcore.getPrevSlideIndex.call(void 0, currentIndex, slideCount, infinite);
-      if (prevIdx !== currentIndex) {
-        goTo(prevIdx);
-      }
-    }, [currentIndex, slideCount, infinite, goTo]);
-    _react.useImperativeHandle.call(void 0, 
-      ref,
-      () => ({
-        next,
-        prev,
-        goTo
-      }),
-      [next, prev, goTo]
-    );
-    _react.useEffect.call(void 0, () => {
-      if (!autoplay || isPaused) return;
-      const controller = _tigercatcore.createCarouselAutoplayController.call(void 0, {
-        interval: autoplaySpeed,
-        onAdvance: () => {
-          const curr = currentIndexRef.current;
-          const nextIdx = _tigercatcore.getNextSlideIndex.call(void 0, curr, slideCount, infinite);
-          if (nextIdx !== curr) {
-            _optionalChain([onBeforeChangeRef, 'access', _8 => _8.current, 'optionalCall', _9 => _9(curr, nextIdx)]);
-            setCurrentIndex(nextIdx);
-            _optionalChain([onChangeRef, 'access', _10 => _10.current, 'optionalCall', _11 => _11(nextIdx, curr)]);
-          }
-        }
-      });
-      controller.start();
-      return () => controller.stop();
-    }, [autoplay, autoplaySpeed, isPaused, slideCount, infinite]);
-    _react.useEffect.call(void 0, () => {
-      const container = containerRef.current;
-      if (!container || slideCount <= 1) return;
-      const resetTouchGesture = () => {
-        touchStartRef.current = null;
-        touchCurrentRef.current = null;
-      };
-      const handleTouchStart = (event) => {
-        const point = _tigercatcore.getCarouselTouchPoint.call(void 0, event.touches);
-        touchStartRef.current = point;
-        touchCurrentRef.current = point;
-      };
-      const handleTouchMove = (event) => {
-        if (!touchStartRef.current) return;
-        const point = _tigercatcore.getCarouselTouchPoint.call(void 0, event.touches);
-        if (point) {
-          touchCurrentRef.current = point;
-        }
-      };
-      const handleTouchEnd = (event) => {
-        const direction = _tigercatcore.resolveCarouselSwipeDirection.call(void 0, 
-          touchStartRef.current,
-          _nullishCoalesce(_tigercatcore.getCarouselTouchPoint.call(void 0, event.changedTouches), () => ( touchCurrentRef.current))
-        );
-        resetTouchGesture();
-        if (direction) {
-          navigateByDirection(direction);
-        }
-      };
-      const handleTouchCancel = () => {
-        resetTouchGesture();
-      };
-      container.addEventListener("touchstart", handleTouchStart, { passive: true });
-      container.addEventListener("touchmove", handleTouchMove, { passive: true });
-      container.addEventListener("touchend", handleTouchEnd, { passive: true });
-      container.addEventListener("touchcancel", handleTouchCancel, { passive: true });
-      return () => {
-        resetTouchGesture();
-        container.removeEventListener("touchstart", handleTouchStart);
-        container.removeEventListener("touchmove", handleTouchMove);
-        container.removeEventListener("touchend", handleTouchEnd);
-        container.removeEventListener("touchcancel", handleTouchCancel);
-      };
-    }, [navigateByDirection, slideCount]);
-    const handleMouseEnter = _react.useCallback.call(void 0, () => {
-      if (pauseOnHover && autoplay) {
-        setIsPaused(true);
-      }
-    }, [pauseOnHover, autoplay]);
-    const handleMouseLeave = _react.useCallback.call(void 0, () => {
-      if (pauseOnHover && autoplay) {
-        setIsPaused(false);
-      }
-    }, [pauseOnHover, autoplay]);
-    const handleFocus = _react.useCallback.call(void 0, () => {
-      if (pauseOnFocus && autoplay) {
-        setIsPaused(true);
-      }
-    }, [pauseOnFocus, autoplay]);
-    const handleBlur = _react.useCallback.call(void 0, () => {
-      if (pauseOnFocus && autoplay) {
-        setIsPaused(false);
-      }
-    }, [pauseOnFocus, autoplay]);
-    const isPrevArrowDisabled = _react.useMemo.call(void 0, 
-      () => _tigercatcore.isPrevDisabled.call(void 0, currentIndex, slideCount, infinite),
-      [currentIndex, slideCount, infinite]
-    );
-    const isNextArrowDisabled = _react.useMemo.call(void 0, 
-      () => _tigercatcore.isNextDisabled.call(void 0, currentIndex, slideCount, infinite),
-      [currentIndex, slideCount, infinite]
-    );
-    const renderArrowButton = (type, disabled, onClick, path) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "button",
-      {
-        type: "button",
-        className: _tigercatcore.getCarouselArrowClasses.call(void 0, type, disabled),
-        onClick,
-        disabled,
-        "aria-label": type === "prev" ? "Previous slide" : "Next slide",
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            className: "w-6 h-6",
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: path })
-          }
-        )
-      }
-    );
-    const renderArrows = () => {
-      if (!arrows) return null;
-      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        renderArrowButton("prev", isPrevArrowDisabled, prev, _tigercatcore.carouselPrevArrowPath),
-        renderArrowButton("next", isNextArrowDisabled, next, _tigercatcore.carouselNextArrowPath)
-      ] });
-    };
-    const renderDots = () => {
-      if (!dots || slideCount <= 1) return null;
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: dotsClasses, role: "tablist", "aria-label": "Carousel navigation", children: slides.map((_, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "button",
-        {
-          type: "button",
-          className: _tigercatcore.getCarouselDotClasses.call(void 0, index === currentIndex),
-          onClick: () => goTo(index),
-          "aria-label": `Go to slide ${index + 1}`,
-          "aria-current": index === currentIndex ? "true" : "false"
-        },
-        index
-      )) });
-    };
-    const renderSlides = () => {
-      const slideElements = slides.map((slide, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "div",
-        {
-          className: getSlideClasses(index),
-          style: effect === "fade" ? slideStyle : void 0,
-          role: "group",
-          "aria-roledescription": "slide",
-          "aria-label": `Slide ${index + 1} of ${slideCount}`,
-          "aria-hidden": index !== currentIndex,
-          children: slide
-        },
-        index
-      ));
-      if (effect === "fade") {
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.classNames.call(void 0, trackClasses, "h-full"), children: slideElements });
-      }
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: trackClasses, style: trackStyle, children: slideElements });
-    };
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "div",
-      {
-        ref: containerRef,
-        className: containerClasses,
-        style,
-        role: "region",
-        "aria-roledescription": "carousel",
-        "aria-label": "Image carousel",
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        children: [
-          renderSlides(),
-          renderArrows(),
-          renderDots()
-        ]
-      }
-    );
-  }
-);
-Carousel.displayName = "Carousel";
-
-
-
-exports.Carousel = Carousel;