@yamada-ui/carousel 1.0.28 → 1.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/carousel-control.d.mts +8 -0
- package/dist/carousel-control.d.ts +8 -0
- package/dist/carousel-control.js +158 -0
- package/dist/carousel-control.js.map +1 -0
- package/dist/carousel-control.mjs +11 -0
- package/dist/carousel-control.mjs.map +1 -0
- package/dist/carousel-indicators.d.mts +17 -0
- package/dist/carousel-indicators.d.ts +17 -0
- package/dist/carousel-indicators.js +141 -0
- package/dist/carousel-indicators.js.map +1 -0
- package/dist/carousel-indicators.mjs +9 -0
- package/dist/carousel-indicators.mjs.map +1 -0
- package/dist/carousel-slide.d.mts +17 -0
- package/dist/carousel-slide.d.ts +17 -0
- package/dist/carousel-slide.js +106 -0
- package/dist/carousel-slide.js.map +1 -0
- package/dist/carousel-slide.mjs +9 -0
- package/dist/carousel-slide.mjs.map +1 -0
- package/dist/carousel.d.mts +144 -0
- package/dist/carousel.d.ts +144 -0
- package/dist/carousel.js +599 -0
- package/dist/carousel.js.map +1 -0
- package/dist/carousel.mjs +12 -0
- package/dist/carousel.mjs.map +1 -0
- package/dist/chunk-ABN4VJ2X.mjs +171 -0
- package/dist/chunk-ABN4VJ2X.mjs.map +1 -0
- package/dist/chunk-DDY7Q2IV.mjs +87 -0
- package/dist/chunk-DDY7Q2IV.mjs.map +1 -0
- package/dist/chunk-QQ2HS4J4.mjs +260 -0
- package/dist/chunk-QQ2HS4J4.mjs.map +1 -0
- package/dist/chunk-SDWORTZY.mjs +72 -0
- package/dist/chunk-SDWORTZY.mjs.map +1 -0
- package/dist/chunk-VQX7S5CU.mjs +50 -0
- package/dist/chunk-VQX7S5CU.mjs.map +1 -0
- package/dist/index.d.mts +9 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +609 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +23 -0
- package/dist/index.mjs.map +1 -0
- package/dist/use-carousel.d.mts +176 -0
- package/dist/use-carousel.d.ts +176 -0
- package/dist/use-carousel.js +292 -0
- package/dist/use-carousel.js.map +1 -0
- package/dist/use-carousel.mjs +18 -0
- package/dist/use-carousel.mjs.map +1 -0
- package/package.json +3 -3
| @@ -0,0 +1,292 @@ | |
| 1 | 
            +
            "use client"
         | 
| 2 | 
            +
            "use strict";
         | 
| 3 | 
            +
            var __create = Object.create;
         | 
| 4 | 
            +
            var __defProp = Object.defineProperty;
         | 
| 5 | 
            +
            var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
         | 
| 6 | 
            +
            var __getOwnPropNames = Object.getOwnPropertyNames;
         | 
| 7 | 
            +
            var __getProtoOf = Object.getPrototypeOf;
         | 
| 8 | 
            +
            var __hasOwnProp = Object.prototype.hasOwnProperty;
         | 
| 9 | 
            +
            var __export = (target, all) => {
         | 
| 10 | 
            +
              for (var name in all)
         | 
| 11 | 
            +
                __defProp(target, name, { get: all[name], enumerable: true });
         | 
| 12 | 
            +
            };
         | 
| 13 | 
            +
            var __copyProps = (to, from, except, desc) => {
         | 
| 14 | 
            +
              if (from && typeof from === "object" || typeof from === "function") {
         | 
| 15 | 
            +
                for (let key of __getOwnPropNames(from))
         | 
| 16 | 
            +
                  if (!__hasOwnProp.call(to, key) && key !== except)
         | 
| 17 | 
            +
                    __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
         | 
| 18 | 
            +
              }
         | 
| 19 | 
            +
              return to;
         | 
| 20 | 
            +
            };
         | 
| 21 | 
            +
            var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
         | 
| 22 | 
            +
              // If the importer is in node compatibility mode or this is not an ESM
         | 
| 23 | 
            +
              // file that has been converted to a CommonJS file using a Babel-
         | 
| 24 | 
            +
              // compatible transform (i.e. "__esModule" has not been set), then set
         | 
| 25 | 
            +
              // "default" to the CommonJS "module.exports" for node compatibility.
         | 
| 26 | 
            +
              isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
         | 
| 27 | 
            +
              mod
         | 
| 28 | 
            +
            ));
         | 
| 29 | 
            +
            var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
         | 
| 30 | 
            +
             | 
| 31 | 
            +
            // src/use-carousel.ts
         | 
| 32 | 
            +
            var use_carousel_exports = {};
         | 
| 33 | 
            +
            __export(use_carousel_exports, {
         | 
| 34 | 
            +
              CarouselProvider: () => CarouselProvider,
         | 
| 35 | 
            +
              useCarousel: () => useCarousel,
         | 
| 36 | 
            +
              useCarouselContext: () => useCarouselContext,
         | 
| 37 | 
            +
              useCarouselControl: () => useCarouselControl,
         | 
| 38 | 
            +
              useCarouselIndicators: () => useCarouselIndicators,
         | 
| 39 | 
            +
              useCarouselSlide: () => useCarouselSlide
         | 
| 40 | 
            +
            });
         | 
| 41 | 
            +
            module.exports = __toCommonJS(use_carousel_exports);
         | 
| 42 | 
            +
            var import_core = require("@yamada-ui/core");
         | 
| 43 | 
            +
            var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
         | 
| 44 | 
            +
            var import_utils = require("@yamada-ui/utils");
         | 
| 45 | 
            +
            var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
         | 
| 46 | 
            +
            var import_react = require("react");
         | 
| 47 | 
            +
            var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
         | 
| 48 | 
            +
              name: "CarouselContext",
         | 
| 49 | 
            +
              errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
         | 
| 50 | 
            +
            });
         | 
| 51 | 
            +
            var useCarousel = ({
         | 
| 52 | 
            +
              index,
         | 
| 53 | 
            +
              defaultIndex = 0,
         | 
| 54 | 
            +
              onChange,
         | 
| 55 | 
            +
              align = "center",
         | 
| 56 | 
            +
              orientation = "horizontal",
         | 
| 57 | 
            +
              autoplay = false,
         | 
| 58 | 
            +
              stopMouseEnterAutoplay = true,
         | 
| 59 | 
            +
              loop = true,
         | 
| 60 | 
            +
              speed = 10,
         | 
| 61 | 
            +
              delay = 4e3,
         | 
| 62 | 
            +
              gap = "fallback(4, 1rem)",
         | 
| 63 | 
            +
              slidesToScroll = 1,
         | 
| 64 | 
            +
              draggable = true,
         | 
| 65 | 
            +
              dragFree = false,
         | 
| 66 | 
            +
              inViewThreshold = 0,
         | 
| 67 | 
            +
              skipSnaps = false,
         | 
| 68 | 
            +
              containScroll = "",
         | 
| 69 | 
            +
              slideSize = "100%",
         | 
| 70 | 
            +
              includeGapInSize = true,
         | 
| 71 | 
            +
              onScrollProgress,
         | 
| 72 | 
            +
              children,
         | 
| 73 | 
            +
              ...rest
         | 
| 74 | 
            +
            }) => {
         | 
| 75 | 
            +
              const computedProps = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
         | 
| 76 | 
            +
              const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
         | 
| 77 | 
            +
                value: index,
         | 
| 78 | 
            +
                defaultValue: defaultIndex,
         | 
| 79 | 
            +
                onChange
         | 
| 80 | 
            +
              });
         | 
| 81 | 
            +
              const isVertical = orientation === "vertical";
         | 
| 82 | 
            +
              const [carouselRef, carousel] = (0, import_embla_carousel_react.default)({
         | 
| 83 | 
            +
                axis: isVertical ? "y" : "x",
         | 
| 84 | 
            +
                startIndex: defaultIndex,
         | 
| 85 | 
            +
                loop,
         | 
| 86 | 
            +
                align,
         | 
| 87 | 
            +
                slidesToScroll,
         | 
| 88 | 
            +
                draggable,
         | 
| 89 | 
            +
                dragFree,
         | 
| 90 | 
            +
                speed,
         | 
| 91 | 
            +
                inViewThreshold,
         | 
| 92 | 
            +
                skipSnaps,
         | 
| 93 | 
            +
                containScroll
         | 
| 94 | 
            +
              });
         | 
| 95 | 
            +
              const [indexes, setIndexes] = (0, import_react.useState)([]);
         | 
| 96 | 
            +
              const [isMouseEnter, setIsMouseEnter] = (0, import_react.useState)(false);
         | 
| 97 | 
            +
              const timeoutId = (0, import_react.useRef)(void 0);
         | 
| 98 | 
            +
              const onScroll = (0, import_react.useCallback)(() => {
         | 
| 99 | 
            +
                if (!carousel)
         | 
| 100 | 
            +
                  return;
         | 
| 101 | 
            +
                const progress = Math.round(
         | 
| 102 | 
            +
                  Math.max(0, Math.min(1, carousel.scrollProgress())) * 100
         | 
| 103 | 
            +
                );
         | 
| 104 | 
            +
                onScrollProgress == null ? void 0 : onScrollProgress(progress);
         | 
| 105 | 
            +
              }, [carousel, onScrollProgress]);
         | 
| 106 | 
            +
              const onSelect = (0, import_react.useCallback)(() => {
         | 
| 107 | 
            +
                if (!carousel)
         | 
| 108 | 
            +
                  return;
         | 
| 109 | 
            +
                const index2 = carousel.selectedScrollSnap();
         | 
| 110 | 
            +
                setSelectedIndex(index2);
         | 
| 111 | 
            +
              }, [carousel, setSelectedIndex]);
         | 
| 112 | 
            +
              (0, import_react.useEffect)(() => {
         | 
| 113 | 
            +
                const isStop = isMouseEnter && stopMouseEnterAutoplay;
         | 
| 114 | 
            +
                const isLast = !(carousel == null ? void 0 : carousel.canScrollNext());
         | 
| 115 | 
            +
                if (carousel && autoplay && !isStop && !isLast) {
         | 
| 116 | 
            +
                  timeoutId.current = setInterval(() => {
         | 
| 117 | 
            +
                    carousel.scrollNext();
         | 
| 118 | 
            +
                  }, delay);
         | 
| 119 | 
            +
                } else {
         | 
| 120 | 
            +
                  if (timeoutId.current)
         | 
| 121 | 
            +
                    clearInterval(timeoutId.current);
         | 
| 122 | 
            +
                  timeoutId.current = void 0;
         | 
| 123 | 
            +
                }
         | 
| 124 | 
            +
                return () => {
         | 
| 125 | 
            +
                  if (timeoutId.current)
         | 
| 126 | 
            +
                    clearInterval(timeoutId.current);
         | 
| 127 | 
            +
                };
         | 
| 128 | 
            +
              }, [
         | 
| 129 | 
            +
                autoplay,
         | 
| 130 | 
            +
                delay,
         | 
| 131 | 
            +
                stopMouseEnterAutoplay,
         | 
| 132 | 
            +
                carousel,
         | 
| 133 | 
            +
                isMouseEnter,
         | 
| 134 | 
            +
                loop,
         | 
| 135 | 
            +
                selectedIndex
         | 
| 136 | 
            +
              ]);
         | 
| 137 | 
            +
              (0, import_utils.useUpdateEffect)(() => {
         | 
| 138 | 
            +
                if (!carousel)
         | 
| 139 | 
            +
                  return;
         | 
| 140 | 
            +
                carousel.reInit();
         | 
| 141 | 
            +
                const snapList = carousel.scrollSnapList();
         | 
| 142 | 
            +
                const indexes2 = snapList.map((_, i) => i);
         | 
| 143 | 
            +
                setIndexes(indexes2);
         | 
| 144 | 
            +
              }, [
         | 
| 145 | 
            +
                import_react.Children.toArray(children).length,
         | 
| 146 | 
            +
                align,
         | 
| 147 | 
            +
                orientation,
         | 
| 148 | 
            +
                loop,
         | 
| 149 | 
            +
                speed,
         | 
| 150 | 
            +
                gap,
         | 
| 151 | 
            +
                slidesToScroll,
         | 
| 152 | 
            +
                draggable,
         | 
| 153 | 
            +
                dragFree,
         | 
| 154 | 
            +
                inViewThreshold,
         | 
| 155 | 
            +
                skipSnaps,
         | 
| 156 | 
            +
                containScroll,
         | 
| 157 | 
            +
                slideSize,
         | 
| 158 | 
            +
                includeGapInSize
         | 
| 159 | 
            +
              ]);
         | 
| 160 | 
            +
              (0, import_utils.useUpdateEffect)(() => {
         | 
| 161 | 
            +
                if (!carousel)
         | 
| 162 | 
            +
                  return;
         | 
| 163 | 
            +
                const snapList = carousel.scrollSnapList();
         | 
| 164 | 
            +
                const indexes2 = snapList.map((_, i) => i);
         | 
| 165 | 
            +
                setIndexes(indexes2);
         | 
| 166 | 
            +
              }, [carousel]);
         | 
| 167 | 
            +
              (0, import_utils.useUpdateEffect)(() => {
         | 
| 168 | 
            +
                if (carousel) {
         | 
| 169 | 
            +
                  carousel.on("select", onSelect);
         | 
| 170 | 
            +
                  carousel.on("scroll", onScroll);
         | 
| 171 | 
            +
                  onScroll();
         | 
| 172 | 
            +
                  return () => {
         | 
| 173 | 
            +
                    carousel.off("select", onSelect);
         | 
| 174 | 
            +
                    carousel.off("scroll", onScroll);
         | 
| 175 | 
            +
                  };
         | 
| 176 | 
            +
                }
         | 
| 177 | 
            +
              }, [carousel, onScroll]);
         | 
| 178 | 
            +
              const getContainerProps = (0, import_react.useCallback)(
         | 
| 179 | 
            +
                (props = {}, ref = null) => ({
         | 
| 180 | 
            +
                  ...computedProps[0],
         | 
| 181 | 
            +
                  ...props,
         | 
| 182 | 
            +
                  ref,
         | 
| 183 | 
            +
                  onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
         | 
| 184 | 
            +
                    setIsMouseEnter(true);
         | 
| 185 | 
            +
                  }),
         | 
| 186 | 
            +
                  onMouseLeave: (0, import_utils.handlerAll)(props.onMouseLeave, () => {
         | 
| 187 | 
            +
                    setIsMouseEnter(false);
         | 
| 188 | 
            +
                  })
         | 
| 189 | 
            +
                }),
         | 
| 190 | 
            +
                [computedProps]
         | 
| 191 | 
            +
              );
         | 
| 192 | 
            +
              const getSlidesProps = (0, import_react.useCallback)(
         | 
| 193 | 
            +
                (props = {}) => ({
         | 
| 194 | 
            +
                  ...computedProps[1],
         | 
| 195 | 
            +
                  ...props,
         | 
| 196 | 
            +
                  ref: carouselRef
         | 
| 197 | 
            +
                }),
         | 
| 198 | 
            +
                [computedProps, carouselRef]
         | 
| 199 | 
            +
              );
         | 
| 200 | 
            +
              return {
         | 
| 201 | 
            +
                carousel,
         | 
| 202 | 
            +
                children,
         | 
| 203 | 
            +
                indexes,
         | 
| 204 | 
            +
                selectedIndex,
         | 
| 205 | 
            +
                orientation,
         | 
| 206 | 
            +
                slideSize,
         | 
| 207 | 
            +
                gap,
         | 
| 208 | 
            +
                slidesToScroll,
         | 
| 209 | 
            +
                includeGapInSize,
         | 
| 210 | 
            +
                getContainerProps,
         | 
| 211 | 
            +
                getSlidesProps
         | 
| 212 | 
            +
              };
         | 
| 213 | 
            +
            };
         | 
| 214 | 
            +
            var useCarouselSlide = ({ index }) => {
         | 
| 215 | 
            +
              const { selectedIndex, slidesToScroll } = useCarouselContext();
         | 
| 216 | 
            +
              index = Math.floor((index != null ? index : 0) / (slidesToScroll != null ? slidesToScroll : 1));
         | 
| 217 | 
            +
              const isSelected = index === selectedIndex;
         | 
| 218 | 
            +
              const getSlideProps = (0, import_react.useCallback)(
         | 
| 219 | 
            +
                (props = {}) => ({
         | 
| 220 | 
            +
                  ...props,
         | 
| 221 | 
            +
                  "data-index": index,
         | 
| 222 | 
            +
                  "data-selected": (0, import_utils.dataAttr)(isSelected)
         | 
| 223 | 
            +
                }),
         | 
| 224 | 
            +
                [isSelected, index]
         | 
| 225 | 
            +
              );
         | 
| 226 | 
            +
              return { getSlideProps };
         | 
| 227 | 
            +
            };
         | 
| 228 | 
            +
            var useCarouselControl = ({
         | 
| 229 | 
            +
              operation,
         | 
| 230 | 
            +
              ...rest
         | 
| 231 | 
            +
            }) => {
         | 
| 232 | 
            +
              var _a, _b;
         | 
| 233 | 
            +
              const { carousel } = useCarouselContext();
         | 
| 234 | 
            +
              const isPrev = operation === "prev";
         | 
| 235 | 
            +
              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());
         | 
| 236 | 
            +
              const onClick = (0, import_react.useCallback)(() => {
         | 
| 237 | 
            +
                if (!carousel)
         | 
| 238 | 
            +
                  return;
         | 
| 239 | 
            +
                if (isPrev) {
         | 
| 240 | 
            +
                  carousel.scrollPrev();
         | 
| 241 | 
            +
                } else {
         | 
| 242 | 
            +
                  carousel.scrollNext();
         | 
| 243 | 
            +
                }
         | 
| 244 | 
            +
              }, [carousel, isPrev]);
         | 
| 245 | 
            +
              const getControlProps = (0, import_react.useCallback)(
         | 
| 246 | 
            +
                (props = {}, ref = null) => ({
         | 
| 247 | 
            +
                  ...props,
         | 
| 248 | 
            +
                  ref,
         | 
| 249 | 
            +
                  disabled,
         | 
| 250 | 
            +
                  onClick: (0, import_utils.handlerAll)(props.onClick, onClick)
         | 
| 251 | 
            +
                }),
         | 
| 252 | 
            +
                [disabled, onClick]
         | 
| 253 | 
            +
              );
         | 
| 254 | 
            +
              return { getControlProps };
         | 
| 255 | 
            +
            };
         | 
| 256 | 
            +
            var useCarouselIndicators = () => {
         | 
| 257 | 
            +
              const { selectedIndex, carousel, indexes } = useCarouselContext();
         | 
| 258 | 
            +
              const onClick = (0, import_react.useCallback)(
         | 
| 259 | 
            +
                (ev, index) => {
         | 
| 260 | 
            +
                  if (!carousel)
         | 
| 261 | 
            +
                    return;
         | 
| 262 | 
            +
                  ev.stopPropagation();
         | 
| 263 | 
            +
                  carousel.scrollTo(index);
         | 
| 264 | 
            +
                },
         | 
| 265 | 
            +
                [carousel]
         | 
| 266 | 
            +
              );
         | 
| 267 | 
            +
              const getIndicatorProps = (0, import_react.useCallback)(
         | 
| 268 | 
            +
                ({ index, ...props }) => {
         | 
| 269 | 
            +
                  const isSelected = index === selectedIndex;
         | 
| 270 | 
            +
                  return {
         | 
| 271 | 
            +
                    "aria-label": `Go to ${index + 1} slide`,
         | 
| 272 | 
            +
                    ...props,
         | 
| 273 | 
            +
                    key: index,
         | 
| 274 | 
            +
                    "data-index": index,
         | 
| 275 | 
            +
                    "data-selected": (0, import_utils.dataAttr)(isSelected),
         | 
| 276 | 
            +
                    onClick: (0, import_utils.handlerAll)(props.onClick, (ev) => onClick(ev, index))
         | 
| 277 | 
            +
                  };
         | 
| 278 | 
            +
                },
         | 
| 279 | 
            +
                [onClick, selectedIndex]
         | 
| 280 | 
            +
              );
         | 
| 281 | 
            +
              return { indexes, getIndicatorProps };
         | 
| 282 | 
            +
            };
         | 
| 283 | 
            +
            // Annotate the CommonJS export names for ESM import in node:
         | 
| 284 | 
            +
            0 && (module.exports = {
         | 
| 285 | 
            +
              CarouselProvider,
         | 
| 286 | 
            +
              useCarousel,
         | 
| 287 | 
            +
              useCarouselContext,
         | 
| 288 | 
            +
              useCarouselControl,
         | 
| 289 | 
            +
              useCarouselIndicators,
         | 
| 290 | 
            +
              useCarouselSlide
         | 
| 291 | 
            +
            });
         | 
| 292 | 
            +
            //# sourceMappingURL=use-carousel.js.map
         | 
| @@ -0,0 +1 @@ | |
| 1 | 
            +
            {"version":3,"sources":["../src/use-carousel.ts"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n  CSSUIObject,\n  HTMLUIProps,\n  CSSUIProps,\n  UIPropGetter,\n  RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  splitObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType } from \"embla-carousel-react\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\ntype CarouselContext = {\n  carousel: EmblaCarouselType | undefined\n  indexes: number[]\n  selectedIndex: number\n  orientation: \"vertical\" | \"horizontal\"\n  includeGapInSize: boolean\n  slidesToScroll: number\n  slideSize: string | number\n  gap: CSSUIProps[\"gap\"]\n  styles: Record<string, CSSUIObject>\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n  createContext<CarouselContext>({\n    name: \"CarouselContext\",\n    errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n  })\n\nexport type UseCarouselProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"onChange\" | \"draggable\" | \"gap\"\n> & {\n  /**\n   * The index of the carousel slide.\n   */\n  index?: number\n  /**\n   * The initial index of the carousel slide.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The callback invoked when carousel slide selected.\n   */\n  onChange?: (index: number) => void\n  /**\n   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: \"vertical\" | \"horizontal\"\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: \"start\" | \"center\" | \"end\" | number\n  /**\n   * Clear leading and trailing empty space that causes excessive scrolling.\n   * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n   *\n   * @default ''\n   */\n  containScroll?: \"trimSnaps\" | \"keepSnaps\" | \"\"\n  /**\n   * The number of slides that should be scrolled with next or previous buttons.\n   *\n   * @default 1\n   */\n  slidesToScroll?: number\n  /**\n   * If `true`, momentum scrolling will be enabled.\n   *\n   * @default false\n   */\n  dragFree?: boolean\n  /**\n   * If `true`, carousel can be scrolled with mouse and touch interactions.\n   *\n   * @default true\n   */\n  draggable?: boolean\n  /**\n   * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n   *\n   * @default 0\n   */\n  inViewThreshold?: number\n  /**\n   * If `true`, infinite looping.\n   * Automatically falls back to false if slide content isn't enough to loop.\n   *\n   * @default true\n   */\n  loop?: boolean\n  /**\n   * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n   * Note that this option will be ignored if the dragFree option is set to true.\n   *\n   * @default false\n   */\n  skipSnaps?: boolean\n  /**\n   * Adjusts scroll speed when triggered by any of the methods.\n   * Higher numbers enables faster scrolling.\n   *\n   * @default 10\n   */\n  speed?: number\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: number\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: boolean\n  /**\n   * If `true`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: boolean\n  /**\n   * If `true`, gap will be treated as part of the carousel slide size.\n   *\n   * @default true\n   */\n  includeGapInSize?: boolean\n  /**\n   * The CSS `gap` property.\n   *\n   * @default '4'\n   */\n  gap?: CSSUIProps[\"gap\"]\n  /**\n   * The carousel slide width.\n   *\n   * @default '100%'\n   */\n  slideSize?: string | number\n  /**\n   * A callback that return the current scroll amount when the carousel is scrolled.\n   */\n  onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n  index,\n  defaultIndex = 0,\n  onChange,\n  align = \"center\",\n  orientation = \"horizontal\",\n  autoplay = false,\n  stopMouseEnterAutoplay = true,\n  loop = true,\n  speed = 10,\n  delay = 4000,\n  gap = \"fallback(4, 1rem)\",\n  slidesToScroll = 1,\n  draggable = true,\n  dragFree = false,\n  inViewThreshold = 0,\n  skipSnaps = false,\n  containScroll = \"\",\n  slideSize = \"100%\",\n  includeGapInSize = true,\n  onScrollProgress,\n  children,\n  ...rest\n}: UseCarouselProps) => {\n  const computedProps = splitObject(rest, layoutStyleProperties)\n\n  const [selectedIndex, setSelectedIndex] = useControllableState({\n    value: index,\n    defaultValue: defaultIndex,\n    onChange,\n  })\n\n  const isVertical = orientation === \"vertical\"\n\n  const [carouselRef, carousel] = useEmblaCarousel({\n    axis: isVertical ? \"y\" : \"x\",\n    startIndex: defaultIndex,\n    loop,\n    align,\n    slidesToScroll,\n    draggable,\n    dragFree,\n    speed,\n    inViewThreshold,\n    skipSnaps,\n    containScroll,\n  })\n\n  const [indexes, setIndexes] = useState<number[]>([])\n  const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n  const timeoutId = useRef<any>(undefined)\n\n  const onScroll = useCallback(() => {\n    if (!carousel) return\n\n    const progress = Math.round(\n      Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n    )\n\n    onScrollProgress?.(progress)\n  }, [carousel, onScrollProgress])\n\n  const onSelect = useCallback(() => {\n    if (!carousel) return\n\n    const index = carousel.selectedScrollSnap()\n\n    setSelectedIndex(index)\n  }, [carousel, setSelectedIndex])\n\n  useEffect(() => {\n    const isStop = isMouseEnter && stopMouseEnterAutoplay\n    const isLast = !carousel?.canScrollNext()\n\n    if (carousel && autoplay && !isStop && !isLast) {\n      timeoutId.current = setInterval(() => {\n        carousel.scrollNext()\n      }, delay)\n    } else {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n\n      timeoutId.current = undefined\n    }\n\n    return () => {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n    }\n  }, [\n    autoplay,\n    delay,\n    stopMouseEnterAutoplay,\n    carousel,\n    isMouseEnter,\n    loop,\n    selectedIndex,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    carousel.reInit()\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [\n    Children.toArray(children).length,\n    align,\n    orientation,\n    loop,\n    speed,\n    gap,\n    slidesToScroll,\n    draggable,\n    dragFree,\n    inViewThreshold,\n    skipSnaps,\n    containScroll,\n    slideSize,\n    includeGapInSize,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [carousel])\n\n  useUpdateEffect(() => {\n    if (carousel) {\n      carousel.on(\"select\", onSelect)\n      carousel.on(\"scroll\", onScroll)\n\n      onScroll()\n\n      return () => {\n        carousel.off(\"select\", onSelect)\n        carousel.off(\"scroll\", onScroll)\n      }\n    }\n  }, [carousel, onScroll])\n\n  const getContainerProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...computedProps[0],\n      ...props,\n      ref,\n      onMouseEnter: handlerAll(props.onMouseEnter, () => {\n        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(false)\n      }),\n    }),\n    [computedProps],\n  )\n\n  const getSlidesProps: UIPropGetter = useCallback(\n    (props = {}) => ({\n      ...computedProps[1],\n      ...props,\n      ref: carouselRef,\n    }),\n    [computedProps, carouselRef],\n  )\n\n  return {\n    carousel,\n    children,\n    indexes,\n    selectedIndex,\n    orientation,\n    slideSize,\n    gap,\n    slidesToScroll,\n    includeGapInSize,\n    getContainerProps,\n    getSlidesProps,\n  }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport type UseCarouselSlideProps = {\n  index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n  const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n  index = Math.floor((index ?? 0) / (slidesToScroll ?? 1))\n\n  const isSelected = index === selectedIndex\n\n  const getSlideProps: UIPropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      \"data-index\": index,\n      \"data-selected\": dataAttr(isSelected),\n    }),\n    [isSelected, index],\n  )\n\n  return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport type UseCarouselControlProps = IconButtonProps & {\n  operation: \"prev\" | \"next\"\n}\n\nexport const useCarouselControl = ({\n  operation,\n  ...rest\n}: UseCarouselControlProps) => {\n  const { carousel } = useCarouselContext()\n\n  const isPrev = operation === \"prev\"\n\n  const disabled =\n    rest.disabled ??\n    rest.isDisabled ??\n    (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n  const onClick = useCallback(() => {\n    if (!carousel) return\n\n    if (isPrev) {\n      carousel.scrollPrev()\n    } else {\n      carousel.scrollNext()\n    }\n  }, [carousel, isPrev])\n\n  const getControlProps: UIPropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n    }),\n    [disabled, onClick],\n  )\n\n  return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n  const { selectedIndex, carousel, indexes } = useCarouselContext()\n\n  const onClick = useCallback(\n    (ev: MouseEvent, index: number) => {\n      if (!carousel) return\n\n      ev.stopPropagation()\n\n      carousel.scrollTo(index)\n    },\n    [carousel],\n  )\n\n  const getIndicatorProps: RequiredUIPropGetter<\"button\", { index: number }> =\n    useCallback(\n      ({ index, ...props }) => {\n        const isSelected = index === selectedIndex\n\n        return {\n          \"aria-label\": `Go to ${index + 1} slide`,\n          ...props,\n          key: index,\n          \"data-index\": index,\n          \"data-selected\": dataAttr(isSelected),\n          onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n        }\n      },\n      [onClick, selectedIndex],\n    )\n\n  return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n  typeof useCarouselIndicators\n>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,kBAAsC;AACtC,oCAAqC;AACrC,mBAMO;AAEP,kCAA6B;AAE7B,mBAAmE;AAc5D,IAAM,CAAC,kBAAkB,kBAAkB,QAChD,4BAA+B;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA8HI,IAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,WAAW;AAAA,EACX,yBAAyB;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM,oBAAgB,0BAAY,MAAM,iCAAqB;AAE7D,QAAM,CAAC,eAAe,gBAAgB,QAAI,oDAAqB;AAAA,IAC7D,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,EACF,CAAC;AAED,QAAM,aAAa,gBAAgB;AAEnC,QAAM,CAAC,aAAa,QAAQ,QAAI,4BAAAA,SAAiB;AAAA,IAC/C,MAAM,aAAa,MAAM;AAAA,IACzB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAmB,CAAC,CAAC;AACnD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAkB,KAAK;AAE/D,QAAM,gBAAY,qBAAY,MAAS;AAEvC,QAAM,eAAW,0BAAY,MAAM;AACjC,QAAI,CAAC;AAAU;AAEf,UAAM,WAAW,KAAK;AAAA,MACpB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,SAAS,eAAe,CAAC,CAAC,IAAI;AAAA,IACxD;AAEA,yDAAmB;AAAA,EACrB,GAAG,CAAC,UAAU,gBAAgB,CAAC;AAE/B,QAAM,eAAW,0BAAY,MAAM;AACjC,QAAI,CAAC;AAAU;AAEf,UAAMC,SAAQ,SAAS,mBAAmB;AAE1C,qBAAiBA,MAAK;AAAA,EACxB,GAAG,CAAC,UAAU,gBAAgB,CAAC;AAE/B,8BAAU,MAAM;AACd,UAAM,SAAS,gBAAgB;AAC/B,UAAM,SAAS,EAAC,qCAAU;AAE1B,QAAI,YAAY,YAAY,CAAC,UAAU,CAAC,QAAQ;AAC9C,gBAAU,UAAU,YAAY,MAAM;AACpC,iBAAS,WAAW;AAAA,MACtB,GAAG,KAAK;AAAA,IACV,OAAO;AACL,UAAI,UAAU;AAAS,sBAAc,UAAU,OAAO;AAEtD,gBAAU,UAAU;AAAA,IACtB;AAEA,WAAO,MAAM;AACX,UAAI,UAAU;AAAS,sBAAc,UAAU,OAAO;AAAA,IACxD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,QAAI,CAAC;AAAU;AAEf,aAAS,OAAO;AAEhB,UAAM,WAAW,SAAS,eAAe;AACzC,UAAMC,WAAU,SAAS,IAAI,CAAC,GAAG,MAAM,CAAC;AAExC,eAAWA,QAAO;AAAA,EACpB,GAAG;AAAA,IACD,sBAAS,QAAQ,QAAQ,EAAE;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,QAAI,CAAC;AAAU;AAEf,UAAM,WAAW,SAAS,eAAe;AACzC,UAAMA,WAAU,SAAS,IAAI,CAAC,GAAG,MAAM,CAAC;AAExC,eAAWA,QAAO;AAAA,EACpB,GAAG,CAAC,QAAQ,CAAC;AAEb,oCAAgB,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,GAAG,UAAU,QAAQ;AAC9B,eAAS,GAAG,UAAU,QAAQ;AAE9B,eAAS;AAET,aAAO,MAAM;AACX,iBAAS,IAAI,UAAU,QAAQ;AAC/B,iBAAS,IAAI,UAAU,QAAQ;AAAA,MACjC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,QAAM,wBAAkC;AAAA,IACtC,CAAC,QAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG,cAAc,CAAC;AAAA,MAClB,GAAG;AAAA,MACH;AAAA,MACA,kBAAc,yBAAW,MAAM,cAAc,MAAM;AACjD,wBAAgB,IAAI;AAAA,MACtB,CAAC;AAAA,MACD,kBAAc,yBAAW,MAAM,cAAc,MAAM;AACjD,wBAAgB,KAAK;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,qBAA+B;AAAA,IACnC,CAAC,QAAQ,CAAC,OAAO;AAAA,MACf,GAAG,cAAc,CAAC;AAAA,MAClB,GAAG;AAAA,MACH,KAAK;AAAA,IACP;AAAA,IACA,CAAC,eAAe,WAAW;AAAA,EAC7B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAQO,IAAM,mBAAmB,CAAC,EAAE,MAAM,MAA6B;AACpE,QAAM,EAAE,eAAe,eAAe,IAAI,mBAAmB;AAE7D,UAAQ,KAAK,OAAO,wBAAS,MAAM,0CAAkB,EAAE;AAEvD,QAAM,aAAa,UAAU;AAE7B,QAAM,oBAA8B;AAAA,IAClC,CAAC,QAAQ,CAAC,OAAO;AAAA,MACf,GAAG;AAAA,MACH,cAAc;AAAA,MACd,qBAAiB,uBAAS,UAAU;AAAA,IACtC;AAAA,IACA,CAAC,YAAY,KAAK;AAAA,EACpB;AAEA,SAAO,EAAE,cAAc;AACzB;AAQO,IAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,GAAG;AACL,MAA+B;AAhY/B;AAiYE,QAAM,EAAE,SAAS,IAAI,mBAAmB;AAExC,QAAM,SAAS,cAAc;AAE7B,QAAM,YACJ,gBAAK,aAAL,YACA,KAAK,eADL,YAEC,SAAS,EAAC,qCAAU,mBAAkB,EAAC,qCAAU;AAEpD,QAAM,cAAU,0BAAY,MAAM;AAChC,QAAI,CAAC;AAAU;AAEf,QAAI,QAAQ;AACV,eAAS,WAAW;AAAA,IACtB,OAAO;AACL,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,CAAC;AAErB,QAAM,sBAA0C;AAAA,IAC9C,CAAC,QAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,aAAS,yBAAW,MAAM,SAAS,OAAO;AAAA,IAC5C;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EACpB;AAEA,SAAO,EAAE,gBAAgB;AAC3B;AAIO,IAAM,wBAAwB,MAAM;AACzC,QAAM,EAAE,eAAe,UAAU,QAAQ,IAAI,mBAAmB;AAEhE,QAAM,cAAU;AAAA,IACd,CAAC,IAAgB,UAAkB;AACjC,UAAI,CAAC;AAAU;AAEf,SAAG,gBAAgB;AAEnB,eAAS,SAAS,KAAK;AAAA,IACzB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,wBACJ;AAAA,IACE,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AACvB,YAAM,aAAa,UAAU;AAE7B,aAAO;AAAA,QACL,cAAc,SAAS,QAAQ,CAAC;AAAA,QAChC,GAAG;AAAA,QACH,KAAK;AAAA,QACL,cAAc;AAAA,QACd,qBAAiB,uBAAS,UAAU;AAAA,QACpC,aAAS,yBAAW,MAAM,SAAS,CAAC,OAAO,QAAQ,IAAI,KAAK,CAAC;AAAA,MAC/D;AAAA,IACF;AAAA,IACA,CAAC,SAAS,aAAa;AAAA,EACzB;AAEF,SAAO,EAAE,SAAS,kBAAkB;AACtC;","names":["useEmblaCarousel","index","indexes"]}
         | 
| @@ -0,0 +1,18 @@ | |
| 1 | 
            +
            "use client"
         | 
| 2 | 
            +
            import {
         | 
| 3 | 
            +
              CarouselProvider,
         | 
| 4 | 
            +
              useCarousel,
         | 
| 5 | 
            +
              useCarouselContext,
         | 
| 6 | 
            +
              useCarouselControl,
         | 
| 7 | 
            +
              useCarouselIndicators,
         | 
| 8 | 
            +
              useCarouselSlide
         | 
| 9 | 
            +
            } from "./chunk-QQ2HS4J4.mjs";
         | 
| 10 | 
            +
            export {
         | 
| 11 | 
            +
              CarouselProvider,
         | 
| 12 | 
            +
              useCarousel,
         | 
| 13 | 
            +
              useCarouselContext,
         | 
| 14 | 
            +
              useCarouselControl,
         | 
| 15 | 
            +
              useCarouselIndicators,
         | 
| 16 | 
            +
              useCarouselSlide
         | 
| 17 | 
            +
            };
         | 
| 18 | 
            +
            //# sourceMappingURL=use-carousel.mjs.map
         | 
| @@ -0,0 +1 @@ | |
| 1 | 
            +
            {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
         | 
    
        package/package.json
    CHANGED
    
    | @@ -1,6 +1,6 @@ | |
| 1 1 | 
             
            {
         | 
| 2 2 | 
             
              "name": "@yamada-ui/carousel",
         | 
| 3 | 
            -
              "version": "1.0. | 
| 3 | 
            +
              "version": "1.0.29",
         | 
| 4 4 | 
             
              "description": "Yamada UI carousel component",
         | 
| 5 5 | 
             
              "keywords": [
         | 
| 6 6 | 
             
                "yamada",
         | 
| @@ -37,10 +37,10 @@ | |
| 37 37 | 
             
              },
         | 
| 38 38 | 
             
              "dependencies": {
         | 
| 39 39 | 
             
                "embla-carousel-react": "^7.0.0",
         | 
| 40 | 
            -
                "@yamada-ui/button": "1.0.28",
         | 
| 41 40 | 
             
                "@yamada-ui/core": "1.6.7",
         | 
| 42 | 
            -
                "@yamada-ui/ | 
| 41 | 
            +
                "@yamada-ui/button": "1.0.28",
         | 
| 43 42 | 
             
                "@yamada-ui/use-controllable-state": "1.0.13",
         | 
| 43 | 
            +
                "@yamada-ui/icon": "1.0.25",
         | 
| 44 44 | 
             
                "@yamada-ui/use-token": "1.1.13",
         | 
| 45 45 | 
             
                "@yamada-ui/use-value": "1.1.13",
         | 
| 46 46 | 
             
                "@yamada-ui/utils": "1.2.0"
         |