@yamada-ui/carousel 2.1.6 → 2.1.7-dev-20241202030831

package/dist/{chunk-2HSC64IV.mjs → chunk-Z4DY52L2.mjs}

@@ -65,13 +65,13 @@ var useCarousel = ({
     onChange
   });
   const [indexes, setIndexes] = useState([]);
-  const [isMouseEnter, setIsMouseEnter] = useState(false);
+  const [mouseEnter, setMouseEnter] = useState(false);
   const timeoutId = useRef(void 0);
-  const isVertical = orientation === "vertical";
+  const vertical = orientation === "vertical";
   const [carouselRef, carousel] = useEmblaCarousel(
     {
       align,
-      axis: isVertical ? "y" : "x",
+      axis: vertical ? "y" : "x",
       containScroll,
       dragFree,
       duration,
@@ -101,9 +101,9 @@ var useCarousel = ({
     setSelectedIndex(index2);
   }, [carousel, setSelectedIndex]);
   useEffect(() => {
-    const isStop = isMouseEnter && stopMouseEnterAutoplay;
-    const isLast = !(carousel == null ? void 0 : carousel.canScrollNext());
-    if (carousel && autoplay && !isStop && !isLast) {
+    const stop = mouseEnter && stopMouseEnterAutoplay;
+    const last = !(carousel == null ? void 0 : carousel.canScrollNext());
+    if (carousel && autoplay && !stop && !last) {
       timeoutId.current = setInterval(() => {
         carousel.scrollNext();
       }, delay);
@@ -119,7 +119,7 @@ var useCarousel = ({
     delay,
     stopMouseEnterAutoplay,
     carousel,
-    isMouseEnter,
+    mouseEnter,
     loop,
     selectedIndex
   ]);
@@ -179,10 +179,10 @@ var useCarousel = ({
         { name: "slideSize", token: "sizes", value: slideSize }
       ]),
       onMouseEnter: handlerAll(props.onMouseEnter, () => {
-        setIsMouseEnter(true);
+        setMouseEnter(true);
       }),
       onMouseLeave: handlerAll(props.onMouseLeave, () => {
-        setIsMouseEnter(false);
+        setMouseEnter(false);
       })
     }),
     [containerProps, gap, slideSize, vars]
@@ -214,18 +214,18 @@ var useCarouselSlide = ({ index }) => {
   const { id, indexes, selectedIndex, slidesToScroll } = useCarouselContext();
   index = Math.floor((index != null ? index : 0) / slidesToScroll);
   const totalSlides = indexes.length;
-  const isSelected = index === selectedIndex;
+  const selected = index === selectedIndex;
   const getSlideProps = useCallback(
     (props = {}) => ({
       id: `${id}-${index + 1}`,
       "aria-label": `${index + 1} of ${totalSlides}`,
       "aria-roledescription": "slide",
       "data-index": index,
-      "data-selected": dataAttr(isSelected),
+      "data-selected": dataAttr(selected),
       role: "tabpanel",
       ...props
     }),
-    [id, index, isSelected, totalSlides]
+    [id, index, selected, totalSlides]
   );
   return { getSlideProps };
 };
@@ -235,33 +235,33 @@ var useCarouselControl = ({
 }) => {
   var _a, _b;
   const { id, carousel } = useCarouselContext();
-  const isPrev = operation === "prev";
-  const disabled = (_b = (_a = rest.disabled) != null ? _a : rest.isDisabled) != null ? _b : isPrev ? !(carousel == null ? void 0 : carousel.canScrollPrev()) : !(carousel == null ? void 0 : carousel.canScrollNext());
+  const prev = operation === "prev";
+  const disabled = (_b = (_a = rest.disabled) != null ? _a : rest.isDisabled) != null ? _b : prev ? !(carousel == null ? void 0 : carousel.canScrollPrev()) : !(carousel == null ? void 0 : carousel.canScrollNext());
   const onClick = useCallback(() => {
     if (!carousel) return;
-    if (isPrev) {
+    if (prev) {
       carousel.scrollPrev();
     } else {
       carousel.scrollNext();
     }
-  }, [carousel, isPrev]);
+  }, [carousel, prev]);
   const getControlProps = useCallback(
     (props = {}, ref = null) => ({
       "aria-controls": id,
-      "aria-label": `Go to ${isPrev ? "previous" : "next"} slide`,
+      "aria-label": `Go to ${prev ? "previous" : "next"} slide`,
       ...props,
       ref,
       disabled,
       onClick: handlerAll(props.onClick, onClick)
     }),
-    [disabled, id, onClick, isPrev]
+    [disabled, id, onClick, prev]
   );
   return { getControlProps };
 };
 var useCarouselIndicators = () => {
   const { id, carousel, indexes, orientation, selectedIndex } = useCarouselContext();
   const refMap = useRef(/* @__PURE__ */ new Map());
-  const isVertical = orientation === "vertical";
+  const vertical = orientation === "vertical";
   const onSelect = useCallback(
     (index) => {
       var _a;
@@ -283,7 +283,7 @@ var useCarouselIndicators = () => {
       const lastIndex = indexes.length - 1;
       const actions = {
         ArrowDown: () => {
-          if (!isVertical) return;
+          if (!vertical) return;
           if (index === lastIndex) {
             index = 0;
           } else {
@@ -292,7 +292,7 @@ var useCarouselIndicators = () => {
           onSelect(index);
         },
         ArrowLeft: () => {
-          if (isVertical) return;
+          if (vertical) return;
           if (index === 0) {
             index = lastIndex;
           } else {
@@ -301,7 +301,7 @@ var useCarouselIndicators = () => {
           onSelect(index);
         },
         ArrowRight: () => {
-          if (isVertical) return;
+          if (vertical) return;
           if (index === lastIndex) {
             index = 0;
           } else {
@@ -310,7 +310,7 @@ var useCarouselIndicators = () => {
           onSelect(index);
         },
         ArrowUp: () => {
-          if (!isVertical) return;
+          if (!vertical) return;
           if (index === 0) {
             index = lastIndex;
           } else {
@@ -326,7 +326,7 @@ var useCarouselIndicators = () => {
       ev.preventDefault();
       action(ev);
     },
-    [indexes, onSelect, isVertical]
+    [indexes, onSelect, vertical]
   );
   useUnmountEffect(() => {
     refMap.current.clear();
@@ -343,18 +343,18 @@ var useCarouselIndicators = () => {
   );
   const getIndicatorProps = useCallback(
     ({ index, ...props }, ref) => {
-      const isSelected = index === selectedIndex;
+      const selected = index === selectedIndex;
       const internalRef = createRef();
       refMap.current.set(index, internalRef);
       return {
         ref: mergeRefs(ref, internalRef),
         "aria-controls": `${id}-${index + 1}`,
         "aria-label": `Go to ${index + 1} slide`,
-        "aria-selected": isSelected,
+        "aria-selected": selected,
         "data-index": index,
-        "data-selected": dataAttr(isSelected),
+        "data-selected": dataAttr(selected),
         role: "tab",
-        tabIndex: isSelected ? 0 : -1,
+        tabIndex: selected ? 0 : -1,
         ...props,
         key: index,
         onClick: handlerAll(props.onClick, onClick(index)),
@@ -374,4 +374,4 @@ export {
   useCarouselControl,
   useCarouselIndicators
 };
-//# sourceMappingURL=chunk-2HSC64IV.mjs.map
+//# sourceMappingURL=chunk-Z4DY52L2.mjs.map

package/dist/chunk-Z4DY52L2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-carousel.ts"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n  CSSUIObject,\n  CSSUIProps,\n  HTMLProps,\n  HTMLUIProps,\n  PropGetter,\n  RequiredPropGetter,\n} from \"@yamada-ui/core\"\nimport type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\"\nimport type {\n  KeyboardEvent,\n  KeyboardEventHandler,\n  MouseEvent,\n  RefObject,\n} from \"react\"\nimport { layoutStyleProperties, mergeVars } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n  assignRef,\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  splitObject,\n  useUnmountEffect,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport {\n  Children,\n  createRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\"\n\nexport type AlignmentOptionType = EmblaOptionsType[\"align\"]\nexport type ScrollContainOptionType = EmblaOptionsType[\"containScroll\"]\nexport type SlidesInViewOptionsType = EmblaOptionsType[\"inViewThreshold\"]\nexport type DragHandlerOptionType = EmblaOptionsType[\"watchDrag\"]\nexport type ResizeHandlerOptionType = EmblaOptionsType[\"watchResize\"]\nexport type SlidesHandlerOptionType = EmblaOptionsType[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\n\ninterface CarouselContext {\n  id: string\n  carousel: CarouselControl | undefined\n  includeGapInSize: boolean\n  indexes: number[]\n  orientation: \"horizontal\" | \"vertical\"\n  selectedIndex: number\n  slidesToScroll: number\n  styles: { [key: string]: CSSUIObject | undefined }\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 interface UseCarouselProps\n  extends Omit<HTMLUIProps, \"draggable\" | \"gap\" | \"onChange\"> {\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: AlignmentOptionType\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: boolean\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 false\n   */\n  containScroll?: ScrollContainOptionType\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<CarouselControl | undefined>\n  /**\n   * The initial index of the carousel slide.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: 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   * Set scroll duration when triggered by any of the API methods.\n   * Higher numbers enables slower scrolling.\n   * Drag interactions are not affected because duration is then determined by the drag force.\n   *\n   * @default 25\n   */\n  duration?: number\n  /**\n   * The CSS `gap` property.\n   *\n   * @default '4'\n   */\n  gap?: CSSUIProps[\"gap\"]\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 index of the carousel slide.\n   */\n  index?: number\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?: SlidesInViewOptionsType\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   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: \"horizontal\" | \"vertical\"\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   * The carousel slide width.\n   *\n   * @default '100%'\n   */\n  slideSize?: CSSUIProps[\"width\"]\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`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: boolean\n  /**\n   * Enables for scrolling the carousel with mouse and touch interactions.\n   * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n   *\n   * @default true\n   */\n  watchDrag?: DragHandlerOptionType\n  /**\n   * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n   * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n   *\n   * @default true\n   */\n  watchResize?: ResizeHandlerOptionType\n  /**\n   * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n   * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n   *\n   * @default true\n   */\n  watchSlides?: SlidesHandlerOptionType\n  /**\n   * The callback invoked when carousel slide selected.\n   */\n  onChange?: (index: number) => void\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  id,\n  align = \"center\",\n  autoplay = false,\n  children,\n  containScroll = false,\n  controlRef,\n  defaultIndex = 0,\n  delay = 4000,\n  dragFree = false,\n  draggable = true,\n  duration = 25,\n  includeGapInSize = true,\n  index,\n  inViewThreshold = 0,\n  loop = true,\n  orientation = \"horizontal\",\n  skipSnaps = false,\n  slideSize = \"100%\",\n  slidesToScroll = 1,\n  stopMouseEnterAutoplay = true,\n  watchDrag = draggable,\n  watchResize = true,\n  watchSlides = true,\n  onChange,\n  onScrollProgress,\n  ...rest\n}: UseCarouselProps) => {\n  const [\n    { gap = \"fallback(4, 1rem)\", ...containerProps },\n    { vars, ...slidesProps },\n  ] = splitObject(rest, layoutStyleProperties)\n  const [selectedIndex, setSelectedIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: index,\n    onChange,\n  })\n  const [indexes, setIndexes] = useState<number[]>([])\n  const [mouseEnter, setMouseEnter] = useState<boolean>(false)\n  const timeoutId = useRef<any>(undefined)\n  const vertical = orientation === \"vertical\"\n  const [carouselRef, carousel] = useEmblaCarousel(\n    {\n      align,\n      axis: vertical ? \"y\" : \"x\",\n      containScroll,\n      dragFree,\n      duration,\n      inViewThreshold,\n      loop,\n      skipSnaps,\n      slidesToScroll,\n      startIndex: defaultIndex,\n      watchDrag,\n      watchResize,\n      watchSlides,\n    },\n    [],\n  )\n  const uuid = useId()\n\n  id ??= uuid\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 stop = mouseEnter && stopMouseEnterAutoplay\n    const last = !carousel?.canScrollNext()\n\n    if (carousel && autoplay && !stop && !last) {\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    mouseEnter,\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    duration,\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  useUpdateEffect(() => {\n    if (!carousel) return\n\n    if (index === undefined) return\n\n    carousel.scrollTo(index)\n  }, [index])\n\n  assignRef(controlRef, carousel)\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      \"aria-roledescription\": \"carousel\",\n      ...containerProps,\n      ...props,\n      ref,\n      vars: mergeVars(vars, [\n        { name: \"gap\", token: \"spaces\", value: gap },\n        { name: \"slideSize\", token: \"sizes\", value: slideSize },\n      ]),\n      onMouseEnter: handlerAll(props.onMouseEnter, () => {\n        setMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setMouseEnter(false)\n      }),\n    }),\n    [containerProps, gap, slideSize, vars],\n  )\n\n  const getSlidesProps: PropGetter = useCallback(\n    (props = {}) => ({\n      id,\n      \"aria-live\": autoplay ? \"off\" : \"polite\",\n      ...slidesProps,\n      ...props,\n      ref: carouselRef,\n    }),\n    [slidesProps, id, carouselRef, autoplay],\n  )\n\n  return {\n    id,\n    carousel,\n    children,\n    includeGapInSize,\n    indexes,\n    orientation,\n    selectedIndex,\n    slidesToScroll,\n    getContainerProps,\n    getSlidesProps,\n  }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport interface UseCarouselSlideProps {\n  index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n  const { id, indexes, selectedIndex, slidesToScroll } = useCarouselContext()\n\n  index = Math.floor((index ?? 0) / slidesToScroll)\n\n  const totalSlides = indexes.length\n  const selected = index === selectedIndex\n\n  const getSlideProps: PropGetter = useCallback(\n    (props = {}) => ({\n      id: `${id}-${index + 1}`,\n      \"aria-label\": `${index + 1} of ${totalSlides}`,\n      \"aria-roledescription\": \"slide\",\n      \"data-index\": index,\n      \"data-selected\": dataAttr(selected),\n      role: \"tabpanel\",\n      ...props,\n    }),\n    [id, index, selected, totalSlides],\n  )\n\n  return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport interface UseCarouselControlProps extends IconButtonProps {\n  operation: \"next\" | \"prev\"\n}\n\nexport const useCarouselControl = ({\n  operation,\n  ...rest\n}: UseCarouselControlProps) => {\n  const { id, carousel } = useCarouselContext()\n\n  const prev = operation === \"prev\"\n\n  const disabled =\n    rest.disabled ??\n    rest.isDisabled ??\n    (prev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n  const onClick = useCallback(() => {\n    if (!carousel) return\n\n    if (prev) {\n      carousel.scrollPrev()\n    } else {\n      carousel.scrollNext()\n    }\n  }, [carousel, prev])\n\n  const getControlProps: PropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      \"aria-controls\": id,\n      \"aria-label\": `Go to ${prev ? \"previous\" : \"next\"} slide`,\n      ...props,\n      ref,\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n    }),\n    [disabled, id, onClick, prev],\n  )\n\n  return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n  const { id, carousel, indexes, orientation, selectedIndex } =\n    useCarouselContext()\n  const refMap = useRef<Map<number, RefObject<HTMLButtonElement>>>(new Map())\n  const vertical = orientation === \"vertical\"\n\n  const onSelect = useCallback(\n    (index: number) => {\n      const ref = refMap.current.get(index)\n\n      ref?.current?.focus()\n      carousel?.scrollTo(index)\n    },\n    [carousel],\n  )\n\n  const onClick = useCallback(\n    (index: number) => (ev: MouseEvent) => {\n      ev.stopPropagation()\n\n      carousel?.scrollTo(index)\n    },\n    [carousel],\n  )\n\n  const onKeyDown = useCallback(\n    (index: number) => (ev: KeyboardEvent) => {\n      const lastIndex = indexes.length - 1\n\n      const actions: { [key: string]: KeyboardEventHandler } = {\n        ArrowDown: () => {\n          if (!vertical) return\n\n          if (index === lastIndex) {\n            index = 0\n          } else {\n            index += 1\n          }\n\n          onSelect(index)\n        },\n        ArrowLeft: () => {\n          if (vertical) return\n\n          if (index === 0) {\n            index = lastIndex\n          } else {\n            index -= 1\n          }\n\n          onSelect(index)\n        },\n        ArrowRight: () => {\n          if (vertical) return\n\n          if (index === lastIndex) {\n            index = 0\n          } else {\n            index += 1\n          }\n\n          onSelect(index)\n        },\n        ArrowUp: () => {\n          if (!vertical) return\n\n          if (index === 0) {\n            index = lastIndex\n          } else {\n            index -= 1\n          }\n\n          onSelect(index)\n        },\n        End: () => onSelect(lastIndex),\n        Home: () => onSelect(0),\n      }\n\n      const action = actions[ev.key]\n\n      if (!action) return\n\n      ev.preventDefault()\n      action(ev)\n    },\n    [indexes, onSelect, vertical],\n  )\n\n  useUnmountEffect(() => {\n    refMap.current.clear()\n  })\n\n  const getIndicatorsProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      \"aria-label\": \"Sliders\",\n      \"aria-orientation\": orientation,\n      role: \"tablist\",\n      ...props,\n      ref,\n    }),\n    [orientation],\n  )\n\n  const getIndicatorProps: RequiredPropGetter<\n    { index: number } & HTMLProps<\"button\">,\n    HTMLProps<\"button\">\n  > = useCallback(\n    ({ index, ...props }, ref) => {\n      const selected = index === selectedIndex\n      const internalRef = createRef<HTMLButtonElement>()\n\n      refMap.current.set(index, internalRef)\n\n      return {\n        ref: mergeRefs(ref, internalRef),\n        \"aria-controls\": `${id}-${index + 1}`,\n        \"aria-label\": `Go to ${index + 1} slide`,\n        \"aria-selected\": selected,\n        \"data-index\": index,\n        \"data-selected\": dataAttr(selected),\n        role: \"tab\",\n        tabIndex: selected ? 0 : -1,\n        ...props,\n        key: index,\n        onClick: handlerAll(props.onClick, onClick(index)),\n        onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n      }\n    },\n    [onClick, onKeyDown, selectedIndex, id],\n  )\n\n  return { indexes, getIndicatorProps, getIndicatorsProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n  typeof useCarouselIndicators\n>\n"],"mappings":";;;AAgBA,SAAS,uBAAuB,iBAAiB;AACjD,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,sBAAsB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAqBA,IAAM,CAAC,kBAAkB,kBAAkB,IAChD,cAA+B;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAsJI,IAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB;AAAA,EACA,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,yBAAyB;AAAA,EACzB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM;AAAA,IACJ,EAAE,MAAM,qBAAqB,GAAG,eAAe;AAAA,IAC/C,EAAE,MAAM,GAAG,YAAY;AAAA,EACzB,IAAI,YAAY,MAAM,qBAAqB;AAC3C,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB;AAAA,IAC7D,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAmB,CAAC,CAAC;AACnD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAkB,KAAK;AAC3D,QAAM,YAAY,OAAY,MAAS;AACvC,QAAM,WAAW,gBAAgB;AACjC,QAAM,CAAC,aAAa,QAAQ,IAAI;AAAA,IAC9B;AAAA,MACE;AAAA,MACA,MAAM,WAAW,MAAM;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AACA,QAAM,OAAO,MAAM;AAEnB,yBAAO;AAEP,QAAM,WAAW,YAAY,MAAM;AACjC,QAAI,CAAC,SAAU;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,WAAW,YAAY,MAAM;AACjC,QAAI,CAAC,SAAU;AAEf,UAAMA,SAAQ,SAAS,mBAAmB;AAE1C,qBAAiBA,MAAK;AAAA,EACxB,GAAG,CAAC,UAAU,gBAAgB,CAAC;AAE/B,YAAU,MAAM;AACd,UAAM,OAAO,cAAc;AAC3B,UAAM,OAAO,EAAC,qCAAU;AAExB,QAAI,YAAY,YAAY,CAAC,QAAQ,CAAC,MAAM;AAC1C,gBAAU,UAAU,YAAY,MAAM;AACpC,iBAAS,WAAW;AAAA,MACtB,GAAG,KAAK;AAAA,IACV,OAAO;AACL,UAAI,UAAU,QAAS,eAAc,UAAU,OAAO;AAEtD,gBAAU,UAAU;AAAA,IACtB;AAEA,WAAO,MAAM;AACX,UAAI,UAAU,QAAS,eAAc,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,kBAAgB,MAAM;AACpB,QAAI,CAAC,SAAU;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,SAAS,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,kBAAgB,MAAM;AACpB,QAAI,CAAC,SAAU;AAEf,UAAM,WAAW,SAAS,eAAe;AACzC,UAAMA,WAAU,SAAS,IAAI,CAAC,GAAG,MAAM,CAAC;AAExC,eAAWA,QAAO;AAAA,EACpB,GAAG,CAAC,QAAQ,CAAC;AAEb,kBAAgB,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,kBAAgB,MAAM;AACpB,QAAI,CAAC,SAAU;AAEf,QAAI,UAAU,OAAW;AAEzB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,YAAY,QAAQ;AAE9B,QAAM,oBAAgC;AAAA,IACpC,CAAC,QAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,wBAAwB;AAAA,MACxB,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA,MAAM,UAAU,MAAM;AAAA,QACpB,EAAE,MAAM,OAAO,OAAO,UAAU,OAAO,IAAI;AAAA,QAC3C,EAAE,MAAM,aAAa,OAAO,SAAS,OAAO,UAAU;AAAA,MACxD,CAAC;AAAA,MACD,cAAc,WAAW,MAAM,cAAc,MAAM;AACjD,sBAAc,IAAI;AAAA,MACpB,CAAC;AAAA,MACD,cAAc,WAAW,MAAM,cAAc,MAAM;AACjD,sBAAc,KAAK;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,gBAAgB,KAAK,WAAW,IAAI;AAAA,EACvC;AAEA,QAAM,iBAA6B;AAAA,IACjC,CAAC,QAAQ,CAAC,OAAO;AAAA,MACf;AAAA,MACA,aAAa,WAAW,QAAQ;AAAA,MAChC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,KAAK;AAAA,IACP;AAAA,IACA,CAAC,aAAa,IAAI,aAAa,QAAQ;AAAA,EACzC;AAEA,SAAO;AAAA,IACL;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,IAAI,SAAS,eAAe,eAAe,IAAI,mBAAmB;AAE1E,UAAQ,KAAK,OAAO,wBAAS,KAAK,cAAc;AAEhD,QAAM,cAAc,QAAQ;AAC5B,QAAM,WAAW,UAAU;AAE3B,QAAM,gBAA4B;AAAA,IAChC,CAAC,QAAQ,CAAC,OAAO;AAAA,MACf,IAAI,GAAG,EAAE,IAAI,QAAQ,CAAC;AAAA,MACtB,cAAc,GAAG,QAAQ,CAAC,OAAO,WAAW;AAAA,MAC5C,wBAAwB;AAAA,MACxB,cAAc;AAAA,MACd,iBAAiB,SAAS,QAAQ;AAAA,MAClC,MAAM;AAAA,MACN,GAAG;AAAA,IACL;AAAA,IACA,CAAC,IAAI,OAAO,UAAU,WAAW;AAAA,EACnC;AAEA,SAAO,EAAE,cAAc;AACzB;AAQO,IAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,GAAG;AACL,MAA+B;AA/c/B;AAgdE,QAAM,EAAE,IAAI,SAAS,IAAI,mBAAmB;AAE5C,QAAM,OAAO,cAAc;AAE3B,QAAM,YACJ,gBAAK,aAAL,YACA,KAAK,eADL,YAEC,OAAO,EAAC,qCAAU,mBAAkB,EAAC,qCAAU;AAElD,QAAM,UAAU,YAAY,MAAM;AAChC,QAAI,CAAC,SAAU;AAEf,QAAI,MAAM;AACR,eAAS,WAAW;AAAA,IACtB,OAAO;AACL,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,QAAM,kBAAwC;AAAA,IAC5C,CAAC,QAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,iBAAiB;AAAA,MACjB,cAAc,SAAS,OAAO,aAAa,MAAM;AAAA,MACjD,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,SAAS,WAAW,MAAM,SAAS,OAAO;AAAA,IAC5C;AAAA,IACA,CAAC,UAAU,IAAI,SAAS,IAAI;AAAA,EAC9B;AAEA,SAAO,EAAE,gBAAgB;AAC3B;AAIO,IAAM,wBAAwB,MAAM;AACzC,QAAM,EAAE,IAAI,UAAU,SAAS,aAAa,cAAc,IACxD,mBAAmB;AACrB,QAAM,SAAS,OAAkD,oBAAI,IAAI,CAAC;AAC1E,QAAM,WAAW,gBAAgB;AAEjC,QAAM,WAAW;AAAA,IACf,CAAC,UAAkB;AA3fvB;AA4fM,YAAM,MAAM,OAAO,QAAQ,IAAI,KAAK;AAEpC,uCAAK,YAAL,mBAAc;AACd,2CAAU,SAAS;AAAA,IACrB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,UAAU;AAAA,IACd,CAAC,UAAkB,CAAC,OAAmB;AACrC,SAAG,gBAAgB;AAEnB,2CAAU,SAAS;AAAA,IACrB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkB,CAAC,OAAsB;AACxC,YAAM,YAAY,QAAQ,SAAS;AAEnC,YAAM,UAAmD;AAAA,QACvD,WAAW,MAAM;AACf,cAAI,CAAC,SAAU;AAEf,cAAI,UAAU,WAAW;AACvB,oBAAQ;AAAA,UACV,OAAO;AACL,qBAAS;AAAA,UACX;AAEA,mBAAS,KAAK;AAAA,QAChB;AAAA,QACA,WAAW,MAAM;AACf,cAAI,SAAU;AAEd,cAAI,UAAU,GAAG;AACf,oBAAQ;AAAA,UACV,OAAO;AACL,qBAAS;AAAA,UACX;AAEA,mBAAS,KAAK;AAAA,QAChB;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,SAAU;AAEd,cAAI,UAAU,WAAW;AACvB,oBAAQ;AAAA,UACV,OAAO;AACL,qBAAS;AAAA,UACX;AAEA,mBAAS,KAAK;AAAA,QAChB;AAAA,QACA,SAAS,MAAM;AACb,cAAI,CAAC,SAAU;AAEf,cAAI,UAAU,GAAG;AACf,oBAAQ;AAAA,UACV,OAAO;AACL,qBAAS;AAAA,UACX;AAEA,mBAAS,KAAK;AAAA,QAChB;AAAA,QACA,KAAK,MAAM,SAAS,SAAS;AAAA,QAC7B,MAAM,MAAM,SAAS,CAAC;AAAA,MACxB;AAEA,YAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,UAAI,CAAC,OAAQ;AAEb,SAAG,eAAe;AAClB,aAAO,EAAE;AAAA,IACX;AAAA,IACA,CAAC,SAAS,UAAU,QAAQ;AAAA,EAC9B;AAEA,mBAAiB,MAAM;AACrB,WAAO,QAAQ,MAAM;AAAA,EACvB,CAAC;AAED,QAAM,qBAAiC;AAAA,IACrC,CAAC,QAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,cAAc;AAAA,MACd,oBAAoB;AAAA,MACpB,MAAM;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,oBAGF;AAAA,IACF,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC5B,YAAM,WAAW,UAAU;AAC3B,YAAM,cAAc,UAA6B;AAEjD,aAAO,QAAQ,IAAI,OAAO,WAAW;AAErC,aAAO;AAAA,QACL,KAAK,UAAU,KAAK,WAAW;AAAA,QAC/B,iBAAiB,GAAG,EAAE,IAAI,QAAQ,CAAC;AAAA,QACnC,cAAc,SAAS,QAAQ,CAAC;AAAA,QAChC,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,iBAAiB,SAAS,QAAQ;AAAA,QAClC,MAAM;AAAA,QACN,UAAU,WAAW,IAAI;AAAA,QACzB,GAAG;AAAA,QACH,KAAK;AAAA,QACL,SAAS,WAAW,MAAM,SAAS,QAAQ,KAAK,CAAC;AAAA,QACjD,WAAW,WAAW,MAAM,WAAW,UAAU,KAAK,CAAC;AAAA,MACzD;AAAA,IACF;AAAA,IACA,CAAC,SAAS,WAAW,eAAe,EAAE;AAAA,EACxC;AAEA,SAAO,EAAE,SAAS,mBAAmB,mBAAmB;AAC1D;","names":["index","indexes"]}

package/dist/index.js

@@ -99,13 +99,13 @@ var useCarousel = ({
     onChange
   });
   const [indexes, setIndexes] = (0, import_react.useState)([]);
-  const [isMouseEnter, setIsMouseEnter] = (0, import_react.useState)(false);
+  const [mouseEnter, setMouseEnter] = (0, import_react.useState)(false);
   const timeoutId = (0, import_react.useRef)(void 0);
-  const isVertical = orientation === "vertical";
+  const vertical = orientation === "vertical";
   const [carouselRef, carousel] = (0, import_embla_carousel_react.default)(
     {
       align,
-      axis: isVertical ? "y" : "x",
+      axis: vertical ? "y" : "x",
       containScroll,
       dragFree,
       duration,
@@ -135,9 +135,9 @@ var useCarousel = ({
     setSelectedIndex(index2);
   }, [carousel, setSelectedIndex]);
   (0, import_react.useEffect)(() => {
-    const isStop = isMouseEnter && stopMouseEnterAutoplay;
-    const isLast = !(carousel == null ? void 0 : carousel.canScrollNext());
-    if (carousel && autoplay && !isStop && !isLast) {
+    const stop = mouseEnter && stopMouseEnterAutoplay;
+    const last = !(carousel == null ? void 0 : carousel.canScrollNext());
+    if (carousel && autoplay && !stop && !last) {
       timeoutId.current = setInterval(() => {
         carousel.scrollNext();
       }, delay);
@@ -153,7 +153,7 @@ var useCarousel = ({
     delay,
     stopMouseEnterAutoplay,
     carousel,
-    isMouseEnter,
+    mouseEnter,
     loop,
     selectedIndex
   ]);
@@ -213,10 +213,10 @@ var useCarousel = ({
         { name: "slideSize", token: "sizes", value: slideSize }
       ]),
       onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
-        setIsMouseEnter(true);
+        setMouseEnter(true);
       }),
       onMouseLeave: (0, import_utils.handlerAll)(props.onMouseLeave, () => {
-        setIsMouseEnter(false);
+        setMouseEnter(false);
       })
     }),
     [containerProps, gap, slideSize, vars]
@@ -248,18 +248,18 @@ var useCarouselSlide = ({ index }) => {
   const { id, indexes, selectedIndex, slidesToScroll } = useCarouselContext();
   index = Math.floor((index != null ? index : 0) / slidesToScroll);
   const totalSlides = indexes.length;
-  const isSelected = index === selectedIndex;
+  const selected = index === selectedIndex;
   const getSlideProps = (0, import_react.useCallback)(
     (props = {}) => ({
       id: `${id}-${index + 1}`,
       "aria-label": `${index + 1} of ${totalSlides}`,
       "aria-roledescription": "slide",
       "data-index": index,
-      "data-selected": (0, import_utils.dataAttr)(isSelected),
+      "data-selected": (0, import_utils.dataAttr)(selected),
       role: "tabpanel",
       ...props
     }),
-    [id, index, isSelected, totalSlides]
+    [id, index, selected, totalSlides]
   );
   return { getSlideProps };
 };
@@ -269,33 +269,33 @@ var useCarouselControl = ({
 }) => {
   var _a, _b;
   const { id, carousel } = useCarouselContext();
-  const isPrev = operation === "prev";
-  const disabled = (_b = (_a = rest.disabled) != null ? _a : rest.isDisabled) != null ? _b : isPrev ? !(carousel == null ? void 0 : carousel.canScrollPrev()) : !(carousel == null ? void 0 : carousel.canScrollNext());
+  const prev = operation === "prev";
+  const disabled = (_b = (_a = rest.disabled) != null ? _a : rest.isDisabled) != null ? _b : prev ? !(carousel == null ? void 0 : carousel.canScrollPrev()) : !(carousel == null ? void 0 : carousel.canScrollNext());
   const onClick = (0, import_react.useCallback)(() => {
     if (!carousel) return;
-    if (isPrev) {
+    if (prev) {
       carousel.scrollPrev();
     } else {
       carousel.scrollNext();
     }
-  }, [carousel, isPrev]);
+  }, [carousel, prev]);
   const getControlProps = (0, import_react.useCallback)(
     (props = {}, ref = null) => ({
       "aria-controls": id,
-      "aria-label": `Go to ${isPrev ? "previous" : "next"} slide`,
+      "aria-label": `Go to ${prev ? "previous" : "next"} slide`,
       ...props,
       ref,
       disabled,
       onClick: (0, import_utils.handlerAll)(props.onClick, onClick)
     }),
-    [disabled, id, onClick, isPrev]
+    [disabled, id, onClick, prev]
   );
   return { getControlProps };
 };
 var useCarouselIndicators = () => {
   const { id, carousel, indexes, orientation, selectedIndex } = useCarouselContext();
   const refMap = (0, import_react.useRef)(/* @__PURE__ */ new Map());
-  const isVertical = orientation === "vertical";
+  const vertical = orientation === "vertical";
   const onSelect = (0, import_react.useCallback)(
     (index) => {
       var _a;
@@ -317,7 +317,7 @@ var useCarouselIndicators = () => {
       const lastIndex = indexes.length - 1;
       const actions = {
         ArrowDown: () => {
-          if (!isVertical) return;
+          if (!vertical) return;
           if (index === lastIndex) {
             index = 0;
           } else {
@@ -326,7 +326,7 @@ var useCarouselIndicators = () => {
           onSelect(index);
         },
         ArrowLeft: () => {
-          if (isVertical) return;
+          if (vertical) return;
           if (index === 0) {
             index = lastIndex;
           } else {
@@ -335,7 +335,7 @@ var useCarouselIndicators = () => {
           onSelect(index);
         },
         ArrowRight: () => {
-          if (isVertical) return;
+          if (vertical) return;
           if (index === lastIndex) {
             index = 0;
           } else {
@@ -344,7 +344,7 @@ var useCarouselIndicators = () => {
           onSelect(index);
         },
         ArrowUp: () => {
-          if (!isVertical) return;
+          if (!vertical) return;
           if (index === 0) {
             index = lastIndex;
           } else {
@@ -360,7 +360,7 @@ var useCarouselIndicators = () => {
       ev.preventDefault();
       action(ev);
     },
-    [indexes, onSelect, isVertical]
+    [indexes, onSelect, vertical]
   );
   (0, import_utils.useUnmountEffect)(() => {
     refMap.current.clear();
@@ -377,18 +377,18 @@ var useCarouselIndicators = () => {
   );
   const getIndicatorProps = (0, import_react.useCallback)(
     ({ index, ...props }, ref) => {
-      const isSelected = index === selectedIndex;
+      const selected = index === selectedIndex;
       const internalRef = (0, import_react.createRef)();
       refMap.current.set(index, internalRef);
       return {
         ref: (0, import_utils.mergeRefs)(ref, internalRef),
         "aria-controls": `${id}-${index + 1}`,
         "aria-label": `Go to ${index + 1} slide`,
-        "aria-selected": isSelected,
+        "aria-selected": selected,
         "data-index": index,
-        "data-selected": (0, import_utils.dataAttr)(isSelected),
+        "data-selected": (0, import_utils.dataAttr)(selected),
         role: "tab",
-        tabIndex: isSelected ? 0 : -1,
+        tabIndex: selected ? 0 : -1,
         ...props,
         key: index,
         onClick: (0, import_utils.handlerAll)(props.onClick, onClick(index)),
@@ -466,7 +466,7 @@ var CarouselControl = (0, import_core2.forwardRef)(({ className, operation, ...r
     {
       className: (0, import_utils2.cx)("ui-carousel__control", className),
       colorScheme: ["whiteAlpha", "blackAlpha"],
-      isRounded: true,
+      fullRounded: true,
       __css: css,
       ...getControlProps(rest, ref)
     }
@@ -500,11 +500,11 @@ var CarouselIndicators = (0, import_core3.forwardRef)(
         __css: css,
         ...rest,
         children: indexes.map((index) => {
-          const isSelected = index === selectedIndex;
+          const selected = index === selectedIndex;
           if (typeof component === "function") {
             const child = component({
               index,
-              isSelected
+              selected
             });
             if (!child) return null;
             const props = getIndicatorProps({ ...child.props, index });