@yamada-ui/carousel 2.0.7-next-20241005220055 → 2.0.7

package/dist/carousel.d.ts

@@ -8,18 +8,18 @@ import 'react';
 import 'embla-carousel';
 
 interface CarouselOptions {
-    /**
-     * The orientation of the carousel.
-     *
-     * @default 'horizontal'
-     */
-    orientation?: Token<"vertical" | "horizontal">;
     /**
      * The alignment of the carousel.
      *
      * @default 'center'
      */
     align?: Token<AlignmentOptionType>;
+    /**
+     * If `true`, the carousel will be autoplay.
+     *
+     * @default false
+     */
+    autoplay?: Token<boolean>;
     /**
      * Clear leading and trailing empty space that causes excessive scrolling.
      * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.
@@ -28,11 +28,11 @@ interface CarouselOptions {
      */
     containScroll?: Token<ScrollContainOptionType>;
     /**
-     * The number of slides that should be scrolled with next or previous buttons.
+     * The number for the autoplay interval of the carousel.
      *
-     * @default 1
+     * @default 4000
      */
-    slidesToScroll?: Token<number>;
+    delay?: Token<number>;
     /**
      * If `true`, momentum scrolling will be enabled.
      *
@@ -45,6 +45,20 @@ interface CarouselOptions {
      * @default true
      */
     draggable?: Token<boolean>;
+    /**
+     * Set scroll duration when triggered by any of the API methods.
+     * Higher numbers enables slower scrolling.
+     * Drag interactions are not affected because duration is then determined by the drag force.
+     *
+     * @default 25
+     */
+    duration?: Token<number>;
+    /**
+     * If `true`, gap will be treated as part of the carousel slide size.
+     *
+     * @default true
+     */
+    includeGapInSize?: Token<boolean>;
     /**
      * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.
      *
@@ -58,6 +72,12 @@ interface CarouselOptions {
      * @default true
      */
     loop?: Token<boolean>;
+    /**
+     * The orientation of the carousel.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: Token<"horizontal" | "vertical">;
     /**
      * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.
      * Note that this option will be ignored if the dragFree option is set to true.
@@ -66,25 +86,15 @@ interface CarouselOptions {
      */
     skipSnaps?: Token<boolean>;
     /**
-     * Set scroll duration when triggered by any of the API methods.
-     * Higher numbers enables slower scrolling.
-     * Drag interactions are not affected because duration is then determined by the drag force.
-     *
-     * @default 25
-     */
-    duration?: Token<number>;
-    /**
-     * The number for the autoplay interval of the carousel.
-     *
-     * @default 4000
+     * The CSS `width` property.
      */
-    delay?: Token<number>;
+    slideSize?: CSSUIProps["width"];
     /**
-     * If `true`, the carousel will be autoplay.
+     * The number of slides that should be scrolled with next or previous buttons.
      *
-     * @default false
+     * @default 1
      */
-    autoplay?: Token<boolean>;
+    slidesToScroll?: Token<number>;
     /**
      * If `true`, autoplay will pause when the mouse entries over.
      *
@@ -92,49 +102,39 @@ interface CarouselOptions {
      */
     stopMouseEnterAutoplay?: Token<boolean>;
     /**
-     * If `true`, gap will be treated as part of the carousel slide size.
+     * If `true`, display the carousel control buttons.
      *
      * @default true
      */
-    includeGapInSize?: Token<boolean>;
-    /**
-     * The CSS `width` property.
-     */
-    slideSize?: CSSUIProps["width"];
-    /**
-     * Props for carousel inner element.
-     */
-    innerProps?: HTMLUIProps;
+    withControls?: Token<boolean>;
     /**
-     * If `true`, display the carousel control buttons.
+     * If `true`, display the carousel indicator buttons.
      *
      * @default true
      */
-    withControls?: Token<boolean>;
+    withIndicators?: Token<boolean>;
     /**
-     * Props for carousel control element.
+     * Props for next of the carousel control element.
      */
-    controlProps?: CarouselControlProps;
+    controlNextProps?: CarouselControlProps;
     /**
      * Props for previous of the carousel control element.
      */
     controlPrevProps?: CarouselControlProps;
     /**
-     * Props for next of the carousel control element.
-     */
-    controlNextProps?: CarouselControlProps;
-    /**
-     * If `true`, display the carousel indicator buttons.
-     *
-     * @default true
+     * Props for carousel control element.
      */
-    withIndicators?: Token<boolean>;
+    controlProps?: CarouselControlProps;
     /**
      * Props for carousel indicators element.
      */
     indicatorsProps?: CarouselIndicatorsProps;
+    /**
+     * Props for carousel inner element.
+     */
+    innerProps?: HTMLUIProps;
 }
-interface CarouselProps extends ThemeProps<"Carousel">, Omit<HTMLUIProps, "onChange" | "draggable">, Pick<UseCarouselProps, "index" | "defaultIndex" | "onChange" | "onScrollProgress" | "watchDrag" | "watchResize" | "watchSlides" | "controlRef">, CarouselOptions {
+interface CarouselProps extends ThemeProps<"Carousel">, Omit<HTMLUIProps, "draggable" | "onChange">, Pick<UseCarouselProps, "controlRef" | "defaultIndex" | "index" | "onChange" | "onScrollProgress" | "watchDrag" | "watchResize" | "watchSlides">, CarouselOptions {
 }
 /**
  * `Carousel` is a component that displays multiple elements like a slideshow.

package/dist/carousel.js

@@ -35,7 +35,6 @@ __export(carousel_exports, {
 });
 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");
@@ -57,51 +56,54 @@ var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
   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,
-  duration = 25,
+  children,
+  containScroll = false,
+  controlRef,
+  defaultIndex = 0,
   delay = 4e3,
-  slidesToScroll = 1,
-  draggable = true,
   dragFree = false,
+  draggable = true,
+  duration = 25,
+  includeGapInSize = true,
+  index,
   inViewThreshold = 0,
+  loop = true,
+  orientation = "horizontal",
   skipSnaps = false,
-  containScroll = false,
   slideSize = "100%",
-  includeGapInSize = true,
-  onScrollProgress,
+  slidesToScroll = 1,
+  stopMouseEnterAutoplay = true,
   watchDrag = draggable,
   watchResize = true,
   watchSlides = true,
-  controlRef,
-  children,
+  onChange,
+  onScrollProgress,
   ...rest
 }) => {
-  const [{ gap = "fallback(4, 1rem)", ...containerProps }, slidesProps] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
+  const [
+    { gap = "fallback(4, 1rem)", ...containerProps },
+    { vars, ...slidesProps }
+  ] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
   const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
-    value: index,
     defaultValue: defaultIndex,
+    value: index,
     onChange
   });
   const isVertical = orientation === "vertical";
   const [carouselRef, carousel] = (0, import_embla_carousel_react.default)(
     {
-      axis: isVertical ? "y" : "x",
-      startIndex: defaultIndex,
-      loop,
       align,
-      slidesToScroll,
-      duration,
+      axis: isVertical ? "y" : "x",
+      containScroll,
       dragFree,
+      duration,
       inViewThreshold,
+      loop,
       skipSnaps,
-      containScroll,
+      slidesToScroll,
+      startIndex: defaultIndex,
       watchDrag,
       watchResize,
       watchSlides
@@ -186,11 +188,20 @@ var useCarousel = ({
       };
     }
   }, [carousel, onScroll]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (!carousel) return;
+    if (index === void 0) return;
+    carousel.scrollTo(index);
+  }, [index]);
   const getContainerProps = (0, import_react.useCallback)(
     (props = {}, ref = null) => ({
       ...containerProps,
       ...props,
       ref,
+      vars: (0, import_core.mergeVars)(vars, [
+        { name: "gap", token: "spaces", value: gap },
+        { name: "slideSize", token: "sizes", value: slideSize }
+      ]),
       onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
         setIsMouseEnter(true);
       }),
@@ -198,7 +209,7 @@ var useCarousel = ({
         setIsMouseEnter(false);
       })
     }),
-    [containerProps]
+    [containerProps, gap, slideSize, vars]
   );
   const getSlidesProps = (0, import_react.useCallback)(
     (props = {}) => ({
@@ -211,20 +222,18 @@ var useCarousel = ({
   return {
     carousel,
     children,
+    includeGapInSize,
     indexes,
-    selectedIndex,
     orientation,
-    slideSize,
-    gap,
+    selectedIndex,
     slidesToScroll,
-    includeGapInSize,
     getContainerProps,
     getSlidesProps
   };
 };
 var useCarouselSlide = ({ index }) => {
   const { selectedIndex, slidesToScroll } = useCarouselContext();
-  index = Math.floor((index != null ? index : 0) / (slidesToScroll != null ? slidesToScroll : 1));
+  index = Math.floor((index != null ? index : 0) / slidesToScroll);
   const isSelected = index === selectedIndex;
   const getSlideProps = (0, import_react.useCallback)(
     (props = {}) => ({
@@ -264,7 +273,7 @@ var useCarouselControl = ({
   return { getControlProps };
 };
 var useCarouselIndicators = () => {
-  const { selectedIndex, carousel, indexes } = useCarouselContext();
+  const { carousel, indexes, selectedIndex } = useCarouselContext();
   const onClick = (0, import_react.useCallback)(
     (ev, index) => {
       if (!carousel) return;
@@ -299,7 +308,6 @@ var CarouselControlPrev = (0, import_core2.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       CarouselControl,
       {
-        operation: "prev",
         className: (0, import_utils2.cx)("ui-carousel__control--prev", className),
         "aria-label": "Go to previous slide",
         icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -311,6 +319,7 @@ var CarouselControlPrev = (0, import_core2.forwardRef)(
             }
           }
         ),
+        operation: "prev",
         ...getControlProps(rest, ref)
       }
     );
@@ -325,7 +334,6 @@ var CarouselControlNext = (0, import_core2.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       CarouselControl,
       {
-        operation: "next",
         className: (0, import_utils2.cx)("ui-carousel__control--next", className),
         "aria-label": "Go to next slide",
         icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -337,6 +345,7 @@ var CarouselControlNext = (0, import_core2.forwardRef)(
             }
           }
         ),
+        operation: "next",
         ...getControlProps(rest, ref)
       }
     );
@@ -374,13 +383,13 @@ var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var CarouselIndicators = (0, import_core3.forwardRef)(
   ({ className, component, ...rest }, ref) => {
-    const { selectedIndex, orientation, styles } = useCarouselContext();
+    const { orientation, selectedIndex, styles } = useCarouselContext();
     const { indexes, getIndicatorProps } = useCarouselIndicators();
     const css = {
-      position: "absolute",
-      zIndex: "fallback(kurillin, 9)",
       display: "flex",
       justifyContent: "center",
+      position: "absolute",
+      zIndex: "fallback(kurillin, 9)",
       ...styles.indicators,
       ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
     };
@@ -422,8 +431,8 @@ var CarouselIndicator = ({
     import_core3.ui.button,
     {
       type: "button",
-      tabIndex: -1,
       className: (0, import_utils3.cx)("ui-carousel__indicators__indicator", className),
+      tabIndex: -1,
       __css: css,
       ...rest
     }
@@ -438,13 +447,13 @@ var import_utils4 = require("@yamada-ui/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var CarouselSlide = (0, import_core4.forwardRef)(
   ({ className, size, ...rest }, ref) => {
-    const { slideSize, includeGapInSize, orientation, gap } = useCarouselContext();
+    const { includeGapInSize, orientation } = useCarouselContext();
     const { getSlideProps } = useCarouselSlide(rest);
-    size != null ? size : size = slideSize;
+    size != null ? size : size = "$slideSize";
     const css = {
-      position: "relative",
       flex: `0 0 ${size}`,
-      ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: gap } : { [orientation === "vertical" ? "mb" : "mr"]: gap }
+      position: "relative",
+      ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: "$gap" } : { [orientation === "vertical" ? "mb" : "mr"]: "$gap" }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_core4.ui.div,
@@ -466,8 +475,7 @@ var CarouselSlideInner = (0, import_core4.forwardRef)(
       {
         ref,
         className: "ui-carousel__slide__inner",
-        w: "100%",
-        h: "100%",
+        boxSize: "100%",
         ...rest
       }
     );
@@ -480,7 +488,6 @@ CarouselSlideInner.__ui__ = "CarouselSlideInner";
 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);
@@ -495,43 +502,37 @@ var Carousel = (0, import_core5.forwardRef)(
     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 = (0, import_use_value.useValue)(props.gap);
-    const gap = (_a = (0, import_use_token.useToken)("spaces", _gap)) != null ? _a : _gap;
-    const _slideSize = (0, import_use_value.useValue)(props.slideSize);
-    const slideSize = (_b = (0, import_use_token.useToken)("sizes", _slideSize)) != null ? _b : _slideSize;
     const [styles, mergedProps] = (0, import_core5.useComponentMultiStyle)("Carousel", {
       ...props,
-      orientation,
       align,
       autoplay,
-      stopMouseEnterAutoplay,
-      loop,
-      duration,
+      containScroll,
       delay,
-      slidesToScroll,
-      draggable,
       dragFree,
+      draggable,
+      duration,
+      includeGapInSize,
       inViewThreshold,
+      loop,
+      orientation,
       skipSnaps,
-      containScroll,
-      includeGapInSize,
-      gap,
-      slideSize
+      slidesToScroll,
+      stopMouseEnterAutoplay
     });
     const {
       className,
-      innerProps,
       withControls = true,
-      controlProps,
-      controlPrevProps,
-      controlNextProps,
       withIndicators = true,
+      controlNextProps,
+      controlPrevProps,
+      controlProps,
       indicatorsProps,
+      innerProps,
       ...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({
+    const { children, getContainerProps, getSlidesProps, ...rest } = useCarousel({
       ...computedProps
     });
     const validChildren = (0, import_utils5.getValidChildren)(children);
@@ -558,17 +559,18 @@ var Carousel = (0, import_core5.forwardRef)(
     const cloneSlideChildren = slideChildren.map(
       (child, index) => (0, import_react3.cloneElement)(child, { index })
     );
+    const css = {
+      h: "fit-content",
+      position: "relative",
+      ...styles.container
+    };
     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
-        },
+        __css: css,
         ...getContainerProps({}, ref),
         children: [
           customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
@@ -594,20 +596,19 @@ Carousel.displayName = "Carousel";
 Carousel.__ui__ = "Carousel";
 var CarouselSlides = (0, import_core5.forwardRef)(
   ({ ...rest }, ref) => {
-    const css = { w: "100%", h: "fit-content", overflow: "hidden" };
+    const css = { h: "fit-content", overflow: "hidden", w: "100%" };
     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 }) });
   }
 );
 CarouselSlides.displayName = "CarouselSlides";
 CarouselSlides.__ui__ = "CarouselSlides";
 var CarouselSlidesInner = ({ ...rest }) => {
-  const { orientation, includeGapInSize, gap, styles } = useCarouselContext();
+  const { includeGapInSize, orientation, styles } = useCarouselContext();
   const css = {
     display: "flex",
     flexDirection: orientation === "vertical" ? "column" : "row",
     ...styles.inner,
     ...includeGapInSize ? {
-      vars: [{ name: "gap", token: "spaces", value: gap }],
       [orientation === "vertical" ? "mb" : "mr"]: "calc($gap * -1)"
     } : {}
   };