@yamada-ui/carousel 1.0.27 → 1.0.28-dev-20240501105325

package/dist/carousel.js

@@ -1,599 +0,0 @@
-"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__indicators__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