@yamada-ui/carousel 1.0.28 → 2.0.0-next-20240513035416

package/dist/carousel.js

@@ -0,0 +1,599 @@
+"use client"
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/carousel.tsx
+var carousel_exports = {};
+__export(carousel_exports, {
+  Carousel: () => Carousel
+});
+module.exports = __toCommonJS(carousel_exports);
+var import_core5 = require("@yamada-ui/core");
+var import_use_token = require("@yamada-ui/use-token");
+var import_use_value = require("@yamada-ui/use-value");
+var import_utils5 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+
+// src/use-carousel.ts
+var import_core = require("@yamada-ui/core");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_utils = require("@yamada-ui/utils");
+var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
+var import_react = require("react");
+var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
+  name: "CarouselContext",
+  errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
+});
+var useCarousel = ({
+  index,
+  defaultIndex = 0,
+  onChange,
+  align = "center",
+  orientation = "horizontal",
+  autoplay = false,
+  stopMouseEnterAutoplay = true,
+  loop = true,
+  speed = 10,
+  delay = 4e3,
+  gap = "fallback(4, 1rem)",
+  slidesToScroll = 1,
+  draggable = true,
+  dragFree = false,
+  inViewThreshold = 0,
+  skipSnaps = false,
+  containScroll = "",
+  slideSize = "100%",
+  includeGapInSize = true,
+  onScrollProgress,
+  children,
+  ...rest
+}) => {
+  const computedProps = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
+  const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
+    value: index,
+    defaultValue: defaultIndex,
+    onChange
+  });
+  const isVertical = orientation === "vertical";
+  const [carouselRef, carousel] = (0, import_embla_carousel_react.default)({
+    axis: isVertical ? "y" : "x",
+    startIndex: defaultIndex,
+    loop,
+    align,
+    slidesToScroll,
+    draggable,
+    dragFree,
+    speed,
+    inViewThreshold,
+    skipSnaps,
+    containScroll
+  });
+  const [indexes, setIndexes] = (0, import_react.useState)([]);
+  const [isMouseEnter, setIsMouseEnter] = (0, import_react.useState)(false);
+  const timeoutId = (0, import_react.useRef)(void 0);
+  const onScroll = (0, import_react.useCallback)(() => {
+    if (!carousel)
+      return;
+    const progress = Math.round(
+      Math.max(0, Math.min(1, carousel.scrollProgress())) * 100
+    );
+    onScrollProgress == null ? void 0 : onScrollProgress(progress);
+  }, [carousel, onScrollProgress]);
+  const onSelect = (0, import_react.useCallback)(() => {
+    if (!carousel)
+      return;
+    const index2 = carousel.selectedScrollSnap();
+    setSelectedIndex(index2);
+  }, [carousel, setSelectedIndex]);
+  (0, import_react.useEffect)(() => {
+    const isStop = isMouseEnter && stopMouseEnterAutoplay;
+    const isLast = !(carousel == null ? void 0 : carousel.canScrollNext());
+    if (carousel && autoplay && !isStop && !isLast) {
+      timeoutId.current = setInterval(() => {
+        carousel.scrollNext();
+      }, delay);
+    } else {
+      if (timeoutId.current)
+        clearInterval(timeoutId.current);
+      timeoutId.current = void 0;
+    }
+    return () => {
+      if (timeoutId.current)
+        clearInterval(timeoutId.current);
+    };
+  }, [
+    autoplay,
+    delay,
+    stopMouseEnterAutoplay,
+    carousel,
+    isMouseEnter,
+    loop,
+    selectedIndex
+  ]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (!carousel)
+      return;
+    carousel.reInit();
+    const snapList = carousel.scrollSnapList();
+    const indexes2 = snapList.map((_, i) => i);
+    setIndexes(indexes2);
+  }, [
+    import_react.Children.toArray(children).length,
+    align,
+    orientation,
+    loop,
+    speed,
+    gap,
+    slidesToScroll,
+    draggable,
+    dragFree,
+    inViewThreshold,
+    skipSnaps,
+    containScroll,
+    slideSize,
+    includeGapInSize
+  ]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (!carousel)
+      return;
+    const snapList = carousel.scrollSnapList();
+    const indexes2 = snapList.map((_, i) => i);
+    setIndexes(indexes2);
+  }, [carousel]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (carousel) {
+      carousel.on("select", onSelect);
+      carousel.on("scroll", onScroll);
+      onScroll();
+      return () => {
+        carousel.off("select", onSelect);
+        carousel.off("scroll", onScroll);
+      };
+    }
+  }, [carousel, onScroll]);
+  const getContainerProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      ...computedProps[0],
+      ...props,
+      ref,
+      onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
+        setIsMouseEnter(true);
+      }),
+      onMouseLeave: (0, import_utils.handlerAll)(props.onMouseLeave, () => {
+        setIsMouseEnter(false);
+      })
+    }),
+    [computedProps]
+  );
+  const getSlidesProps = (0, import_react.useCallback)(
+    (props = {}) => ({
+      ...computedProps[1],
+      ...props,
+      ref: carouselRef
+    }),
+    [computedProps, carouselRef]
+  );
+  return {
+    carousel,
+    children,
+    indexes,
+    selectedIndex,
+    orientation,
+    slideSize,
+    gap,
+    slidesToScroll,
+    includeGapInSize,
+    getContainerProps,
+    getSlidesProps
+  };
+};
+var useCarouselSlide = ({ index }) => {
+  const { selectedIndex, slidesToScroll } = useCarouselContext();
+  index = Math.floor((index != null ? index : 0) / (slidesToScroll != null ? slidesToScroll : 1));
+  const isSelected = index === selectedIndex;
+  const getSlideProps = (0, import_react.useCallback)(
+    (props = {}) => ({
+      ...props,
+      "data-index": index,
+      "data-selected": (0, import_utils.dataAttr)(isSelected)
+    }),
+    [isSelected, index]
+  );
+  return { getSlideProps };
+};
+var useCarouselControl = ({
+  operation,
+  ...rest
+}) => {
+  var _a, _b;
+  const { carousel } = useCarouselContext();
+  const isPrev = operation === "prev";
+  const disabled = (_b = (_a = rest.disabled) != null ? _a : rest.isDisabled) != null ? _b : isPrev ? !(carousel == null ? void 0 : carousel.canScrollPrev()) : !(carousel == null ? void 0 : carousel.canScrollNext());
+  const onClick = (0, import_react.useCallback)(() => {
+    if (!carousel)
+      return;
+    if (isPrev) {
+      carousel.scrollPrev();
+    } else {
+      carousel.scrollNext();
+    }
+  }, [carousel, isPrev]);
+  const getControlProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      ...props,
+      ref,
+      disabled,
+      onClick: (0, import_utils.handlerAll)(props.onClick, onClick)
+    }),
+    [disabled, onClick]
+  );
+  return { getControlProps };
+};
+var useCarouselIndicators = () => {
+  const { selectedIndex, carousel, indexes } = useCarouselContext();
+  const onClick = (0, import_react.useCallback)(
+    (ev, index) => {
+      if (!carousel)
+        return;
+      ev.stopPropagation();
+      carousel.scrollTo(index);
+    },
+    [carousel]
+  );
+  const getIndicatorProps = (0, import_react.useCallback)(
+    ({ index, ...props }) => {
+      const isSelected = index === selectedIndex;
+      return {
+        "aria-label": `Go to ${index + 1} slide`,
+        ...props,
+        key: index,
+        "data-index": index,
+        "data-selected": (0, import_utils.dataAttr)(isSelected),
+        onClick: (0, import_utils.handlerAll)(props.onClick, (ev) => onClick(ev, index))
+      };
+    },
+    [onClick, selectedIndex]
+  );
+  return { indexes, getIndicatorProps };
+};
+
+// src/carousel-slide.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CarouselSlide = (0, import_core2.forwardRef)(
+  ({ className, size, ...rest }, ref) => {
+    const { slideSize, includeGapInSize, orientation, gap } = useCarouselContext();
+    const { getSlideProps } = useCarouselSlide(rest);
+    size != null ? size : size = slideSize;
+    const css = {
+      position: "relative",
+      flex: `0 0 ${size}`,
+      ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: gap } : { [orientation === "vertical" ? "mb" : "mr"]: gap }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core2.ui.div,
+      {
+        className: (0, import_utils2.cx)("ui-carousel__slide", className),
+        __css: css,
+        ...getSlideProps({}),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselSlideInner, { ref, ...rest })
+      }
+    );
+  }
+);
+var CarouselSlideInner = (0, import_core2.forwardRef)(
+  ({ ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core2.ui.div,
+      {
+        ref,
+        className: "ui-carousel__slide__inner",
+        w: "100%",
+        h: "100%",
+        ...rest
+      }
+    );
+  }
+);
+
+// src/carousel-control.tsx
+var import_button = require("@yamada-ui/button");
+var import_core3 = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_utils3 = require("@yamada-ui/utils");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CarouselControlPrev = (0, import_core3.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { orientation } = useCarouselContext();
+    const { getControlProps } = useCarouselControl({ operation: "prev" });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      CarouselControl,
+      {
+        operation: "prev",
+        className: (0, import_utils3.cx)("ui-carousel__control--prev", className),
+        "aria-label": "Go to previous slide",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_icon.ChevronIcon,
+          {
+            __css: {
+              fontSize: "1.5em",
+              transform: orientation === "vertical" ? "rotate(180deg)" : "rotate(90deg)"
+            }
+          }
+        ),
+        ...getControlProps(rest, ref)
+      }
+    );
+  }
+);
+var CarouselControlNext = (0, import_core3.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { orientation } = useCarouselContext();
+    const { getControlProps } = useCarouselControl({ operation: "next" });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      CarouselControl,
+      {
+        operation: "next",
+        className: (0, import_utils3.cx)("ui-carousel__control--next", className),
+        "aria-label": "Go to next slide",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_icon.ChevronIcon,
+          {
+            __css: {
+              fontSize: "1.5em",
+              transform: orientation === "vertical" ? "rotate(0deg)" : "rotate(-90deg)"
+            }
+          }
+        ),
+        ...getControlProps(rest, ref)
+      }
+    );
+  }
+);
+var CarouselControl = (0, import_core3.forwardRef)(({ className, operation, ...rest }, ref) => {
+  const { styles } = useCarouselContext();
+  const colorScheme = (0, import_core3.useColorModeValue)("whiteAlpha", "blackAlpha");
+  const css = {
+    position: "absolute",
+    zIndex: "fallback(kurillin, 9)",
+    ...styles.control,
+    ...styles[operation]
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_button.IconButton,
+    {
+      ref,
+      className: (0, import_utils3.cx)("ui-carousel__control", className),
+      colorScheme,
+      isRounded: true,
+      __css: css,
+      ...rest
+    }
+  );
+});
+
+// src/carousel-indicators.tsx
+var import_core4 = require("@yamada-ui/core");
+var import_utils4 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CarouselIndicators = (0, import_core4.forwardRef)(
+  ({ className, component, ...rest }, ref) => {
+    const { selectedIndex, orientation, styles } = useCarouselContext();
+    const { indexes, getIndicatorProps } = useCarouselIndicators();
+    const css = {
+      position: "absolute",
+      zIndex: "fallback(kurillin, 9)",
+      display: "flex",
+      justifyContent: "center",
+      ...styles.indicators,
+      ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_core4.ui.div,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-carousel__indicators", className),
+        __css: css,
+        ...rest,
+        children: indexes.map((index) => {
+          const isSelected = index === selectedIndex;
+          if (typeof component === "function") {
+            const child = component({
+              index,
+              isSelected
+            });
+            if (!child)
+              return null;
+            const props = getIndicatorProps({ ...child.props, index });
+            return (0, import_react2.cloneElement)(child, props);
+          } else {
+            const { key, ...props } = getIndicatorProps({ index });
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CarouselIndicator, { ...props }, key);
+          }
+        })
+      }
+    );
+  }
+);
+var CarouselIndicator = ({
+  className,
+  ...rest
+}) => {
+  const { styles } = useCarouselContext();
+  const css = { ...styles.indicator };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_core4.ui.button,
+    {
+      type: "button",
+      tabIndex: -1,
+      className: (0, import_utils4.cx)("ui-carousel__indicator", className),
+      __css: css,
+      ...rest
+    }
+  );
+};
+
+// src/carousel.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Carousel = (0, import_core5.forwardRef)(
+  ({ h, height, minH, minHeight, ...props }, ref) => {
+    var _a, _b;
+    const orientation = (0, import_use_value.useValue)(props.orientation);
+    const align = (0, import_use_value.useValue)(props.align);
+    const autoplay = (0, import_use_value.useValue)(props.autoplay);
+    const stopMouseEnterAutoplay = (0, import_use_value.useValue)(props.stopMouseEnterAutoplay);
+    const loop = (0, import_use_value.useValue)(props.loop);
+    const speed = (0, import_use_value.useValue)(props.speed);
+    const delay = (0, import_use_value.useValue)(props.delay);
+    const slidesToScroll = (0, import_use_value.useValue)(props.slidesToScroll);
+    const draggable = (0, import_use_value.useValue)(props.draggable);
+    const dragFree = (0, import_use_value.useValue)(props.dragFree);
+    const inViewThreshold = (0, import_use_value.useValue)(props.inViewThreshold);
+    const skipSnaps = (0, import_use_value.useValue)(props.skipSnaps);
+    const containScroll = (0, import_use_value.useValue)(props.containScroll);
+    const includeGapInSize = (0, import_use_value.useValue)(props.includeGapInSize);
+    const gap = (_a = (0, import_use_token.useToken)("spaces", (0, import_use_value.useValue)(props.gap))) != null ? _a : (0, import_use_value.useValue)(props.gap);
+    const slideSize = (_b = (0, import_use_token.useToken)("sizes", (0, import_use_value.useValue)(props.slideSize))) != null ? _b : (0, import_use_value.useValue)(props.slideSize);
+    const [styles, mergedProps] = (0, import_core5.useMultiComponentStyle)("Carousel", {
+      ...props,
+      orientation,
+      align,
+      autoplay,
+      stopMouseEnterAutoplay,
+      loop,
+      speed,
+      delay,
+      slidesToScroll,
+      draggable,
+      dragFree,
+      inViewThreshold,
+      skipSnaps,
+      containScroll,
+      includeGapInSize,
+      gap,
+      slideSize
+    });
+    const {
+      className,
+      innerProps,
+      withControls = true,
+      controlProps,
+      controlPrevProps,
+      controlNextProps,
+      withIndicators = true,
+      indicatorsProps,
+      ...computedProps
+    } = (0, import_core5.omitThemeProps)(mergedProps);
+    const computedWithControls = (0, import_use_value.useValue)(withControls);
+    const computedWithIndicators = (0, import_use_value.useValue)(withIndicators);
+    const { getContainerProps, getSlidesProps, children, ...rest } = useCarousel({
+      ...computedProps
+    });
+    const validChildren = (0, import_utils5.getValidChildren)(children);
+    const [customCarouselControlPrev] = (0, import_utils5.findChildren)(
+      validChildren,
+      CarouselControlPrev
+    );
+    const [customCarouselControlNext] = (0, import_utils5.findChildren)(
+      validChildren,
+      CarouselControlNext
+    );
+    const [customCarouselIndicators] = (0, import_utils5.findChildren)(
+      validChildren,
+      CarouselIndicators
+    );
+    const slideChildren = (0, import_utils5.pickChildren)(validChildren, CarouselSlide);
+    const otherChildren = (0, import_utils5.omitChildren)(
+      validChildren,
+      CarouselControlPrev,
+      CarouselControlNext,
+      CarouselIndicators,
+      CarouselSlide
+    );
+    const cloneSlideChildren = slideChildren.map(
+      (child, index) => (0, import_react3.cloneElement)(child, { index })
+    );
+    h != null ? h : h = height;
+    minH != null ? minH : minH = minHeight;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_core5.ui.div,
+      {
+        className: (0, import_utils5.cx)("ui-carousel", className),
+        __css: {
+          position: "relative",
+          h: "fit-content",
+          ...styles.container
+        },
+        ...getContainerProps({}, ref),
+        children: [
+          customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
+          customCarouselControlNext != null ? customCarouselControlNext : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselControlNext, { ...controlProps, ...controlNextProps }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            CarouselSlides,
+            {
+              ...getSlidesProps({
+                ...(0, import_utils5.filterUndefined)({ h, minH }),
+                ...innerProps
+              }),
+              children: cloneSlideChildren
+            }
+          ),
+          customCarouselIndicators != null ? customCarouselIndicators : computedWithIndicators ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselIndicators, { ...indicatorsProps }) : null,
+          otherChildren
+        ]
+      }
+    ) });
+  }
+);
+var CarouselSlides = (0, import_core5.forwardRef)(
+  ({ ...rest }, ref) => {
+    const css = { w: "100%", h: "fit-content", overflow: "hidden" };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { ref, className: "ui-carousel__sliders", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselSlidesInner, { ...rest }) });
+  }
+);
+var CarouselSlidesInner = ({ ...rest }) => {
+  const { orientation, includeGapInSize, gap, styles } = useCarouselContext();
+  const css = {
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    ...styles.inner,
+    ...includeGapInSize ? {
+      var: [{ __prefix: "ui", name: "gap", token: "spaces", value: gap }],
+      [orientation === "vertical" ? "mb" : "mr"]: import_utils5.calc.negate("var(--ui-gap)")
+    } : {}
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { className: "ui-carousel__sliders__inner", __css: css, ...rest });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Carousel
+});
+//# sourceMappingURL=carousel.js.map