@yamada-ui/carousel 0.2.6 → 0.2.8

package/dist/carousel-control.js

@@ -49,7 +49,10 @@ var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
   name: "CarouselContext",
   errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
 });
-var useCarouselControl = ({ operation, ...rest }) => {
+var useCarouselControl = ({
+  operation,
+  ...rest
+}) => {
   var _a, _b;
   const { carousel } = useCarouselContext();
   const isPrev = operation === "prev";
@@ -124,29 +127,27 @@ var CarouselControlNext = (0, import_core2.forwardRef)(
     );
   }
 );
-var CarouselControl = (0, import_core2.forwardRef)(
-  ({ className, operation, ...rest }, ref) => {
-    const { styles } = useCarouselContext();
-    const colorScheme = (0, import_core2.useColorModetValue)("whiteAlpha", "blackAlpha");
-    const css = {
-      position: "absolute",
-      zIndex: "kurillin",
-      ...styles.control,
-      ...styles[operation]
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_button.IconButton,
-      {
-        ref,
-        className: (0, import_utils2.cx)("ui-carousel-control", className),
-        colorScheme,
-        isRounded: true,
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
+var CarouselControl = (0, import_core2.forwardRef)(({ className, operation, ...rest }, ref) => {
+  const { styles } = useCarouselContext();
+  const colorScheme = (0, import_core2.useColorModetValue)("whiteAlpha", "blackAlpha");
+  const css = {
+    position: "absolute",
+    zIndex: "kurillin",
+    ...styles.control,
+    ...styles[operation]
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.IconButton,
+    {
+      ref,
+      className: (0, import_utils2.cx)("ui-carousel-control", className),
+      colorScheme,
+      isRounded: true,
+      __css: css,
+      ...rest
+    }
+  );
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CarouselControlNext,

package/dist/carousel-control.mjs

@@ -1,8 +1,8 @@
 import {
   CarouselControlNext,
   CarouselControlPrev
-} from "./chunk-W7IEYNRW.mjs";
-import "./chunk-4P3A5PTO.mjs";
+} from "./chunk-D5HQSKWR.mjs";
+import "./chunk-QR66JOUK.mjs";
 export {
   CarouselControlNext,
   CarouselControlPrev

package/dist/carousel-indicators.js

@@ -89,22 +89,37 @@ var CarouselIndicators = (0, import_core2.forwardRef)(
       ...styles.indicators,
       ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { ref, className: (0, import_utils2.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_runtime.jsx)(CarouselIndicator, { ...props }, key);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core2.ui.div,
+      {
+        ref,
+        className: (0, import_utils2.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_runtime.jsx)(CarouselIndicator, { ...props }, key);
+          }
+        })
       }
-    }) });
+    );
   }
 );
-var CarouselIndicator = ({ className, ...rest }) => {
+var CarouselIndicator = ({
+  className,
+  ...rest
+}) => {
   const { styles } = useCarouselContext();
   const css = { ...styles.indicator };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/carousel-indicators.mjs

@@ -1,7 +1,7 @@
 import {
   CarouselIndicators
-} from "./chunk-YF54MDFK.mjs";
-import "./chunk-4P3A5PTO.mjs";
+} from "./chunk-6FKEASJN.mjs";
+import "./chunk-QR66JOUK.mjs";
 export {
   CarouselIndicators
 };

package/dist/carousel-slide.js

@@ -74,12 +74,31 @@ var CarouselSlide = (0, import_core2.forwardRef)(
       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 }) });
+    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
+      }
+    );
   }
 );
-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 });
-});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CarouselSlide

package/dist/carousel-slide.mjs

@@ -1,7 +1,7 @@
 import {
   CarouselSlide
-} from "./chunk-BWFAE3UJ.mjs";
-import "./chunk-4P3A5PTO.mjs";
+} from "./chunk-T2MDCOCV.mjs";
+import "./chunk-QR66JOUK.mjs";
 export {
   CarouselSlide
 };

package/dist/carousel.js

@@ -99,7 +99,9 @@ var useCarousel = ({
   const onScroll = (0, import_react.useCallback)(() => {
     if (!carousel)
       return;
-    const progress = Math.round(Math.max(0, Math.min(1, carousel.scrollProgress())) * 100);
+    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)(() => {
@@ -124,7 +126,15 @@ var useCarousel = ({
       if (timeoutId.current)
         clearInterval(timeoutId.current);
     };
-  }, [autoplay, delay, stopMouseEnterAutoplay, carousel, isMouseEnter, loop, selectedIndex]);
+  }, [
+    autoplay,
+    delay,
+    stopMouseEnterAutoplay,
+    carousel,
+    isMouseEnter,
+    loop,
+    selectedIndex
+  ]);
   (0, import_utils.useUpdateEffect)(() => {
     if (!carousel)
       return;
@@ -217,7 +227,10 @@ var useCarouselSlide = ({ index }) => {
   );
   return { getSlideProps };
 };
-var useCarouselControl = ({ operation, ...rest }) => {
+var useCarouselControl = ({
+  operation,
+  ...rest
+}) => {
   var _a, _b;
   const { carousel } = useCarouselContext();
   const isPrev = operation === "prev";
@@ -285,12 +298,31 @@ var CarouselSlide = (0, import_core2.forwardRef)(
       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 }) });
+    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
+      }
+    );
   }
 );
-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");
@@ -344,29 +376,27 @@ var CarouselControlNext = (0, import_core3.forwardRef)(
     );
   }
 );
-var CarouselControl = (0, import_core3.forwardRef)(
-  ({ className, operation, ...rest }, ref) => {
-    const { styles } = useCarouselContext();
-    const colorScheme = (0, import_core3.useColorModetValue)("whiteAlpha", "blackAlpha");
-    const css = {
-      position: "absolute",
-      zIndex: "kurillin",
-      ...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
-      }
-    );
-  }
-);
+var CarouselControl = (0, import_core3.forwardRef)(({ className, operation, ...rest }, ref) => {
+  const { styles } = useCarouselContext();
+  const colorScheme = (0, import_core3.useColorModetValue)("whiteAlpha", "blackAlpha");
+  const css = {
+    position: "absolute",
+    zIndex: "kurillin",
+    ...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");
@@ -385,22 +415,37 @@ var CarouselIndicators = (0, import_core4.forwardRef)(
       ...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);
+    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 }) => {
+var CarouselIndicator = ({
+  className,
+  ...rest
+}) => {
   const { styles } = useCarouselContext();
   const css = { ...styles.indicator };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -472,9 +517,18 @@ var Carousel = (0, import_core5.forwardRef)(
       ...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 [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,
@@ -483,19 +537,34 @@ var Carousel = (0, import_core5.forwardRef)(
       CarouselIndicators,
       CarouselSlide
     );
-    const cloneSlideChildren = slideChildren.map((child, index) => (0, import_react3.cloneElement)(child, { index }));
+    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 },
+        __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 }),
+          /* @__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
         ]
@@ -503,10 +572,12 @@ var Carousel = (0, import_core5.forwardRef)(
     ) });
   }
 );
-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 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 = {

package/dist/carousel.mjs

@@ -1,10 +1,10 @@
 import {
   Carousel
-} from "./chunk-WQL2NFWH.mjs";
-import "./chunk-W7IEYNRW.mjs";
-import "./chunk-YF54MDFK.mjs";
-import "./chunk-BWFAE3UJ.mjs";
-import "./chunk-4P3A5PTO.mjs";
+} from "./chunk-4PHQQK4S.mjs";
+import "./chunk-D5HQSKWR.mjs";
+import "./chunk-6FKEASJN.mjs";
+import "./chunk-T2MDCOCV.mjs";
+import "./chunk-QR66JOUK.mjs";
 export {
   Carousel
 };

package/dist/{chunk-WQL2NFWH.mjs → chunk-4PHQQK4S.mjs}

@@ -1,18 +1,18 @@
 import {
   CarouselControlNext,
   CarouselControlPrev
-} from "./chunk-W7IEYNRW.mjs";
+} from "./chunk-D5HQSKWR.mjs";
 import {
   CarouselIndicators
-} from "./chunk-YF54MDFK.mjs";
+} from "./chunk-6FKEASJN.mjs";
 import {
   CarouselSlide
-} from "./chunk-BWFAE3UJ.mjs";
+} from "./chunk-T2MDCOCV.mjs";
 import {
   CarouselProvider,
   useCarousel,
   useCarouselContext
-} from "./chunk-4P3A5PTO.mjs";
+} from "./chunk-QR66JOUK.mjs";
 
 // src/carousel.tsx
 import {
@@ -88,9 +88,18 @@ var Carousel = forwardRef(
       ...computedProps
     });
     const validChildren = getValidChildren(children);
-    const [customCarouselControlPrev] = findChildren(validChildren, CarouselControlPrev);
-    const [customCarouselControlNext] = findChildren(validChildren, CarouselControlNext);
-    const [customCarouselIndicators] = findChildren(validChildren, CarouselIndicators);
+    const [customCarouselControlPrev] = findChildren(
+      validChildren,
+      CarouselControlPrev
+    );
+    const [customCarouselControlNext] = findChildren(
+      validChildren,
+      CarouselControlNext
+    );
+    const [customCarouselIndicators] = findChildren(
+      validChildren,
+      CarouselIndicators
+    );
     const slideChildren = pickChildren(validChildren, CarouselSlide);
     const otherChildren = omitChildren(
       validChildren,
@@ -99,19 +108,34 @@ var Carousel = forwardRef(
       CarouselIndicators,
       CarouselSlide
     );
-    const cloneSlideChildren = slideChildren.map((child, index) => cloneElement(child, { index }));
+    const cloneSlideChildren = slideChildren.map(
+      (child, index) => cloneElement(child, { index })
+    );
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
     return /* @__PURE__ */ jsx(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ jsxs(
       ui.div,
       {
         className: cx("ui-carousel", className),
-        __css: { position: "relative", h: "fit-content", ...styles.container },
+        __css: {
+          position: "relative",
+          h: "fit-content",
+          ...styles.container
+        },
         ...getContainerProps({}, ref),
         children: [
           customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ jsx(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
           customCarouselControlNext != null ? customCarouselControlNext : computedWithControls ? /* @__PURE__ */ jsx(CarouselControlNext, { ...controlProps, ...controlNextProps }) : null,
-          /* @__PURE__ */ jsx(CarouselSlides, { ...getSlidesProps({ ...filterUndefined({ h, minH }), ...innerProps }), children: cloneSlideChildren }),
+          /* @__PURE__ */ jsx(
+            CarouselSlides,
+            {
+              ...getSlidesProps({
+                ...filterUndefined({ h, minH }),
+                ...innerProps
+              }),
+              children: cloneSlideChildren
+            }
+          ),
           customCarouselIndicators != null ? customCarouselIndicators : computedWithIndicators ? /* @__PURE__ */ jsx(CarouselIndicators, { ...indicatorsProps }) : null,
           otherChildren
         ]
@@ -119,10 +143,12 @@ var Carousel = forwardRef(
     ) });
   }
 );
-var CarouselSlides = forwardRef(({ ...rest }, ref) => {
-  const css = { w: "100%", h: "fit-content", overflow: "hidden" };
-  return /* @__PURE__ */ jsx(ui.div, { ref, className: "ui-carousel-sliders", __css: css, children: /* @__PURE__ */ jsx(CarouselSlidesInner, { ...rest }) });
-});
+var CarouselSlides = forwardRef(
+  ({ ...rest }, ref) => {
+    const css = { w: "100%", h: "fit-content", overflow: "hidden" };
+    return /* @__PURE__ */ jsx(ui.div, { ref, className: "ui-carousel-sliders", __css: css, children: /* @__PURE__ */ jsx(CarouselSlidesInner, { ...rest }) });
+  }
+);
 var CarouselSlidesInner = ({ ...rest }) => {
   const { orientation, includeGapInSize, gap, styles } = useCarouselContext();
   const css = {

package/dist/{chunk-YF54MDFK.mjs → chunk-6FKEASJN.mjs}

@@ -1,7 +1,7 @@
 import {
   useCarouselContext,
   useCarouselIndicators
-} from "./chunk-4P3A5PTO.mjs";
+} from "./chunk-QR66JOUK.mjs";
 
 // src/carousel-indicators.tsx
 import { ui, forwardRef } from "@yamada-ui/core";
@@ -20,22 +20,37 @@ var CarouselIndicators = forwardRef(
       ...styles.indicators,
       ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
     };
-    return /* @__PURE__ */ jsx(ui.div, { ref, className: 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 cloneElement(child, props);
-      } else {
-        const { key, ...props } = getIndicatorProps({ index });
-        return /* @__PURE__ */ jsx(CarouselIndicator, { ...props }, key);
+    return /* @__PURE__ */ jsx(
+      ui.div,
+      {
+        ref,
+        className: 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 cloneElement(child, props);
+          } else {
+            const { key, ...props } = getIndicatorProps({ index });
+            return /* @__PURE__ */ jsx(CarouselIndicator, { ...props }, key);
+          }
+        })
       }
-    }) });
+    );
   }
 );
-var CarouselIndicator = ({ className, ...rest }) => {
+var CarouselIndicator = ({
+  className,
+  ...rest
+}) => {
   const { styles } = useCarouselContext();
   const css = { ...styles.indicator };
   return /* @__PURE__ */ jsx(

package/dist/{chunk-W7IEYNRW.mjs → chunk-D5HQSKWR.mjs}

@@ -1,7 +1,7 @@
 import {
   useCarouselContext,
   useCarouselControl
-} from "./chunk-4P3A5PTO.mjs";
+} from "./chunk-QR66JOUK.mjs";
 
 // src/carousel-control.tsx
 import { IconButton } from "@yamada-ui/button";
@@ -55,29 +55,27 @@ var CarouselControlNext = forwardRef(
     );
   }
 );
-var CarouselControl = forwardRef(
-  ({ className, operation, ...rest }, ref) => {
-    const { styles } = useCarouselContext();
-    const colorScheme = useColorModetValue("whiteAlpha", "blackAlpha");
-    const css = {
-      position: "absolute",
-      zIndex: "kurillin",
-      ...styles.control,
-      ...styles[operation]
-    };
-    return /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        ref,
-        className: cx("ui-carousel-control", className),
-        colorScheme,
-        isRounded: true,
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
+var CarouselControl = forwardRef(({ className, operation, ...rest }, ref) => {
+  const { styles } = useCarouselContext();
+  const colorScheme = useColorModetValue("whiteAlpha", "blackAlpha");
+  const css = {
+    position: "absolute",
+    zIndex: "kurillin",
+    ...styles.control,
+    ...styles[operation]
+  };
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ref,
+      className: cx("ui-carousel-control", className),
+      colorScheme,
+      isRounded: true,
+      __css: css,
+      ...rest
+    }
+  );
+});
 
 export {
   CarouselControlPrev,

package/dist/{chunk-4P3A5PTO.mjs → chunk-QR66JOUK.mjs}

@@ -1,5 +1,7 @@
 // src/use-carousel.ts
-import { layoutStylesProperties } from "@yamada-ui/core";
+import {
+  layoutStylesProperties
+} from "@yamada-ui/core";
 import { useControllableState } from "@yamada-ui/use-controllable-state";
 import {
   createContext,
@@ -9,7 +11,13 @@ import {
   useUpdateEffect
 } from "@yamada-ui/utils";
 import useEmblaCarousel from "embla-carousel-react";
-import { Children, useCallback, useEffect, useRef, useState } from "react";
+import {
+  Children,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
 var [CarouselProvider, useCarouselContext] = createContext({
   name: "CarouselContext",
   errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
@@ -64,7 +72,9 @@ var useCarousel = ({
   const onScroll = useCallback(() => {
     if (!carousel)
       return;
-    const progress = Math.round(Math.max(0, Math.min(1, carousel.scrollProgress())) * 100);
+    const progress = Math.round(
+      Math.max(0, Math.min(1, carousel.scrollProgress())) * 100
+    );
     onScrollProgress == null ? void 0 : onScrollProgress(progress);
   }, [carousel, onScrollProgress]);
   const onSelect = useCallback(() => {
@@ -89,7 +99,15 @@ var useCarousel = ({
       if (timeoutId.current)
         clearInterval(timeoutId.current);
     };
-  }, [autoplay, delay, stopMouseEnterAutoplay, carousel, isMouseEnter, loop, selectedIndex]);
+  }, [
+    autoplay,
+    delay,
+    stopMouseEnterAutoplay,
+    carousel,
+    isMouseEnter,
+    loop,
+    selectedIndex
+  ]);
   useUpdateEffect(() => {
     if (!carousel)
       return;
@@ -182,7 +200,10 @@ var useCarouselSlide = ({ index }) => {
   );
   return { getSlideProps };
 };
-var useCarouselControl = ({ operation, ...rest }) => {
+var useCarouselControl = ({
+  operation,
+  ...rest
+}) => {
   var _a, _b;
   const { carousel } = useCarouselContext();
   const isPrev = operation === "prev";

package/dist/{chunk-BWFAE3UJ.mjs → chunk-T2MDCOCV.mjs}

@@ -1,10 +1,13 @@
 import {
   useCarouselContext,
   useCarouselSlide
-} from "./chunk-4P3A5PTO.mjs";
+} from "./chunk-QR66JOUK.mjs";
 
 // src/carousel-slide.tsx
-import { ui, forwardRef } from "@yamada-ui/core";
+import {
+  ui,
+  forwardRef
+} from "@yamada-ui/core";
 import { cx } from "@yamada-ui/utils";
 import { jsx } from "react/jsx-runtime";
 var CarouselSlide = forwardRef(
@@ -17,12 +20,31 @@ var CarouselSlide = forwardRef(
       flex: `0 0 ${size}`,
       ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: gap } : { [orientation === "vertical" ? "mb" : "mr"]: gap }
     };
-    return /* @__PURE__ */ jsx(ui.div, { className: cx("ui-carousel-slide", className), __css: css, ...getSlideProps({}), children: /* @__PURE__ */ jsx(CarouselSlideInner, { ref, ...rest }) });
+    return /* @__PURE__ */ jsx(
+      ui.div,
+      {
+        className: cx("ui-carousel-slide", className),
+        __css: css,
+        ...getSlideProps({}),
+        children: /* @__PURE__ */ jsx(CarouselSlideInner, { ref, ...rest })
+      }
+    );
+  }
+);
+var CarouselSlideInner = forwardRef(
+  ({ ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      ui.div,
+      {
+        ref,
+        className: "ui-carousel-slide-inner",
+        w: "100%",
+        h: "100%",
+        ...rest
+      }
+    );
   }
 );
-var CarouselSlideInner = forwardRef(({ ...rest }, ref) => {
-  return /* @__PURE__ */ jsx(ui.div, { ref, className: "ui-carousel-slide-inner", w: "100%", h: "100%", ...rest });
-});
 
 export {
   CarouselSlide

package/dist/index.js

@@ -105,7 +105,9 @@ var useCarousel = ({
   const onScroll = (0, import_react.useCallback)(() => {
     if (!carousel)
       return;
-    const progress = Math.round(Math.max(0, Math.min(1, carousel.scrollProgress())) * 100);
+    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)(() => {
@@ -130,7 +132,15 @@ var useCarousel = ({
       if (timeoutId.current)
         clearInterval(timeoutId.current);
     };
-  }, [autoplay, delay, stopMouseEnterAutoplay, carousel, isMouseEnter, loop, selectedIndex]);
+  }, [
+    autoplay,
+    delay,
+    stopMouseEnterAutoplay,
+    carousel,
+    isMouseEnter,
+    loop,
+    selectedIndex
+  ]);
   (0, import_utils.useUpdateEffect)(() => {
     if (!carousel)
       return;
@@ -223,7 +233,10 @@ var useCarouselSlide = ({ index }) => {
   );
   return { getSlideProps };
 };
-var useCarouselControl = ({ operation, ...rest }) => {
+var useCarouselControl = ({
+  operation,
+  ...rest
+}) => {
   var _a, _b;
   const { carousel } = useCarouselContext();
   const isPrev = operation === "prev";
@@ -334,9 +347,18 @@ var Carousel = (0, import_core2.forwardRef)(
       ...computedProps
     });
     const validChildren = (0, import_utils2.getValidChildren)(children);
-    const [customCarouselControlPrev] = (0, import_utils2.findChildren)(validChildren, CarouselControlPrev);
-    const [customCarouselControlNext] = (0, import_utils2.findChildren)(validChildren, CarouselControlNext);
-    const [customCarouselIndicators] = (0, import_utils2.findChildren)(validChildren, CarouselIndicators);
+    const [customCarouselControlPrev] = (0, import_utils2.findChildren)(
+      validChildren,
+      CarouselControlPrev
+    );
+    const [customCarouselControlNext] = (0, import_utils2.findChildren)(
+      validChildren,
+      CarouselControlNext
+    );
+    const [customCarouselIndicators] = (0, import_utils2.findChildren)(
+      validChildren,
+      CarouselIndicators
+    );
     const slideChildren = (0, import_utils2.pickChildren)(validChildren, CarouselSlide);
     const otherChildren = (0, import_utils2.omitChildren)(
       validChildren,
@@ -345,19 +367,34 @@ var Carousel = (0, import_core2.forwardRef)(
       CarouselIndicators,
       CarouselSlide
     );
-    const cloneSlideChildren = slideChildren.map((child, index) => (0, import_react2.cloneElement)(child, { index }));
+    const cloneSlideChildren = slideChildren.map(
+      (child, index) => (0, import_react2.cloneElement)(child, { index })
+    );
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_core2.ui.div,
       {
         className: (0, import_utils2.cx)("ui-carousel", className),
-        __css: { position: "relative", h: "fit-content", ...styles.container },
+        __css: {
+          position: "relative",
+          h: "fit-content",
+          ...styles.container
+        },
         ...getContainerProps({}, ref),
         children: [
           customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
           customCarouselControlNext != null ? customCarouselControlNext : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselControlNext, { ...controlProps, ...controlNextProps }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselSlides, { ...getSlidesProps({ ...(0, import_utils2.filterUndefined)({ h, minH }), ...innerProps }), children: cloneSlideChildren }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            CarouselSlides,
+            {
+              ...getSlidesProps({
+                ...(0, import_utils2.filterUndefined)({ h, minH }),
+                ...innerProps
+              }),
+              children: cloneSlideChildren
+            }
+          ),
           customCarouselIndicators != null ? customCarouselIndicators : computedWithIndicators ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselIndicators, { ...indicatorsProps }) : null,
           otherChildren
         ]
@@ -365,10 +402,12 @@ var Carousel = (0, import_core2.forwardRef)(
     ) });
   }
 );
-var CarouselSlides = (0, import_core2.forwardRef)(({ ...rest }, ref) => {
-  const css = { w: "100%", h: "fit-content", overflow: "hidden" };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { ref, className: "ui-carousel-sliders", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselSlidesInner, { ...rest }) });
-});
+var CarouselSlides = (0, import_core2.forwardRef)(
+  ({ ...rest }, ref) => {
+    const css = { w: "100%", h: "fit-content", overflow: "hidden" };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { ref, className: "ui-carousel-sliders", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselSlidesInner, { ...rest }) });
+  }
+);
 var CarouselSlidesInner = ({ ...rest }) => {
   const { orientation, includeGapInSize, gap, styles } = useCarouselContext();
   const css = {
@@ -394,12 +433,31 @@ var CarouselSlide = (0, import_core3.forwardRef)(
       flex: `0 0 ${size}`,
       ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: gap } : { [orientation === "vertical" ? "mb" : "mr"]: gap }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core3.ui.div, { className: (0, import_utils3.cx)("ui-carousel-slide", className), __css: css, ...getSlideProps({}), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CarouselSlideInner, { ref, ...rest }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core3.ui.div,
+      {
+        className: (0, import_utils3.cx)("ui-carousel-slide", className),
+        __css: css,
+        ...getSlideProps({}),
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CarouselSlideInner, { ref, ...rest })
+      }
+    );
+  }
+);
+var CarouselSlideInner = (0, import_core3.forwardRef)(
+  ({ ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core3.ui.div,
+      {
+        ref,
+        className: "ui-carousel-slide-inner",
+        w: "100%",
+        h: "100%",
+        ...rest
+      }
+    );
   }
 );
-var CarouselSlideInner = (0, import_core3.forwardRef)(({ ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core3.ui.div, { ref, className: "ui-carousel-slide-inner", w: "100%", h: "100%", ...rest });
-});
 
 // src/carousel-control.tsx
 var import_button = require("@yamada-ui/button");
@@ -453,29 +511,27 @@ var CarouselControlNext = (0, import_core4.forwardRef)(
     );
   }
 );
-var CarouselControl = (0, import_core4.forwardRef)(
-  ({ className, operation, ...rest }, ref) => {
-    const { styles } = useCarouselContext();
-    const colorScheme = (0, import_core4.useColorModetValue)("whiteAlpha", "blackAlpha");
-    const css = {
-      position: "absolute",
-      zIndex: "kurillin",
-      ...styles.control,
-      ...styles[operation]
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_button.IconButton,
-      {
-        ref,
-        className: (0, import_utils4.cx)("ui-carousel-control", className),
-        colorScheme,
-        isRounded: true,
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
+var CarouselControl = (0, import_core4.forwardRef)(({ className, operation, ...rest }, ref) => {
+  const { styles } = useCarouselContext();
+  const colorScheme = (0, import_core4.useColorModetValue)("whiteAlpha", "blackAlpha");
+  const css = {
+    position: "absolute",
+    zIndex: "kurillin",
+    ...styles.control,
+    ...styles[operation]
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_button.IconButton,
+    {
+      ref,
+      className: (0, import_utils4.cx)("ui-carousel-control", className),
+      colorScheme,
+      isRounded: true,
+      __css: css,
+      ...rest
+    }
+  );
+});
 
 // src/carousel-indicators.tsx
 var import_core5 = require("@yamada-ui/core");
@@ -494,22 +550,37 @@ var CarouselIndicators = (0, import_core5.forwardRef)(
       ...styles.indicators,
       ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { ref, className: (0, import_utils5.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_react3.cloneElement)(child, props);
-      } else {
-        const { key, ...props } = getIndicatorProps({ index });
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselIndicator, { ...props }, key);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_core5.ui.div,
+      {
+        ref,
+        className: (0, import_utils5.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_react3.cloneElement)(child, props);
+          } else {
+            const { key, ...props } = getIndicatorProps({ index });
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CarouselIndicator, { ...props }, key);
+          }
+        })
       }
-    }) });
+    );
   }
 );
-var CarouselIndicator = ({ className, ...rest }) => {
+var CarouselIndicator = ({
+  className,
+  ...rest
+}) => {
   const { styles } = useCarouselContext();
   const css = { ...styles.indicator };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(

package/dist/index.mjs

@@ -1,17 +1,17 @@
 import {
   Carousel
-} from "./chunk-WQL2NFWH.mjs";
+} from "./chunk-4PHQQK4S.mjs";
 import {
   CarouselControlNext,
   CarouselControlPrev
-} from "./chunk-W7IEYNRW.mjs";
+} from "./chunk-D5HQSKWR.mjs";
 import {
   CarouselIndicators
-} from "./chunk-YF54MDFK.mjs";
+} from "./chunk-6FKEASJN.mjs";
 import {
   CarouselSlide
-} from "./chunk-BWFAE3UJ.mjs";
-import "./chunk-4P3A5PTO.mjs";
+} from "./chunk-T2MDCOCV.mjs";
+import "./chunk-QR66JOUK.mjs";
 export {
   Carousel,
   CarouselControlNext,

package/dist/use-carousel.js

@@ -97,7 +97,9 @@ var useCarousel = ({
   const onScroll = (0, import_react.useCallback)(() => {
     if (!carousel)
       return;
-    const progress = Math.round(Math.max(0, Math.min(1, carousel.scrollProgress())) * 100);
+    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)(() => {
@@ -122,7 +124,15 @@ var useCarousel = ({
       if (timeoutId.current)
         clearInterval(timeoutId.current);
     };
-  }, [autoplay, delay, stopMouseEnterAutoplay, carousel, isMouseEnter, loop, selectedIndex]);
+  }, [
+    autoplay,
+    delay,
+    stopMouseEnterAutoplay,
+    carousel,
+    isMouseEnter,
+    loop,
+    selectedIndex
+  ]);
   (0, import_utils.useUpdateEffect)(() => {
     if (!carousel)
       return;
@@ -215,7 +225,10 @@ var useCarouselSlide = ({ index }) => {
   );
   return { getSlideProps };
 };
-var useCarouselControl = ({ operation, ...rest }) => {
+var useCarouselControl = ({
+  operation,
+  ...rest
+}) => {
   var _a, _b;
   const { carousel } = useCarouselContext();
   const isPrev = operation === "prev";

package/dist/use-carousel.mjs

@@ -5,7 +5,7 @@ import {
   useCarouselControl,
   useCarouselIndicators,
   useCarouselSlide
-} from "./chunk-4P3A5PTO.mjs";
+} from "./chunk-QR66JOUK.mjs";
 export {
   CarouselProvider,
   useCarousel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/carousel",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Yamada UI carousel component",
   "keywords": [
     "yamada",
@@ -36,13 +36,13 @@
   },
   "dependencies": {
     "embla-carousel-react": "^7.0.0",
-    "@yamada-ui/button": "0.2.6",
-    "@yamada-ui/core": "0.5.1",
-    "@yamada-ui/icon": "0.2.6",
-    "@yamada-ui/use-controllable-state": "0.1.4",
-    "@yamada-ui/use-token": "0.1.18",
-    "@yamada-ui/use-value": "0.1.18",
-    "@yamada-ui/utils": "0.1.3"
+    "@yamada-ui/button": "0.2.8",
+    "@yamada-ui/core": "0.5.3",
+    "@yamada-ui/icon": "0.2.8",
+    "@yamada-ui/use-controllable-state": "0.1.5",
+    "@yamada-ui/use-token": "0.1.20",
+    "@yamada-ui/use-value": "0.1.20",
+    "@yamada-ui/utils": "0.1.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0",