@yamada-ui/carousel 2.0.8-next-20241022143327 → 2.1.0-dev-20241026110242

package/dist/carousel-control.js

@@ -55,7 +55,7 @@ var useCarouselControl = ({
   ...rest
 }) => {
   var _a, _b;
-  const { carousel } = useCarouselContext();
+  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 onClick = (0, import_react.useCallback)(() => {
@@ -68,12 +68,14 @@ var useCarouselControl = ({
   }, [carousel, isPrev]);
   const getControlProps = (0, import_react.useCallback)(
     (props = {}, ref = null) => ({
+      "aria-controls": id,
+      "aria-label": `Go to ${isPrev ? "previous" : "next"} slide`,
       ...props,
       ref,
       disabled,
       onClick: (0, import_utils.handlerAll)(props.onClick, onClick)
     }),
-    [disabled, onClick]
+    [disabled, id, onClick, isPrev]
   );
   return { getControlProps };
 };
@@ -83,12 +85,11 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var CarouselControlPrev = (0, import_core2.forwardRef)(
   ({ className, ...rest }, ref) => {
     const { orientation } = useCarouselContext();
-    const { getControlProps } = useCarouselControl({ operation: "prev" });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       CarouselControl,
       {
+        ref,
         className: (0, import_utils2.cx)("ui-carousel__control--prev", className),
-        "aria-label": "Go to previous slide",
         icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_icon.ChevronIcon,
           {
@@ -99,7 +100,7 @@ var CarouselControlPrev = (0, import_core2.forwardRef)(
           }
         ),
         operation: "prev",
-        ...getControlProps(rest, ref)
+        ...rest
       }
     );
   }
@@ -109,12 +110,11 @@ CarouselControlPrev.__ui__ = "CarouselControlPrev";
 var CarouselControlNext = (0, import_core2.forwardRef)(
   ({ className, ...rest }, ref) => {
     const { orientation } = useCarouselContext();
-    const { getControlProps } = useCarouselControl({ operation: "next" });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       CarouselControl,
       {
+        ref,
         className: (0, import_utils2.cx)("ui-carousel__control--next", className),
-        "aria-label": "Go to next slide",
         icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_icon.ChevronIcon,
           {
@@ -125,7 +125,7 @@ var CarouselControlNext = (0, import_core2.forwardRef)(
           }
         ),
         operation: "next",
-        ...getControlProps(rest, ref)
+        ...rest
       }
     );
   }
@@ -134,6 +134,7 @@ CarouselControlNext.displayName = "CarouselControlNext";
 CarouselControlNext.__ui__ = "CarouselControlNext";
 var CarouselControl = (0, import_core2.forwardRef)(({ className, operation, ...rest }, ref) => {
   const { styles } = useCarouselContext();
+  const { getControlProps } = useCarouselControl({ operation });
   const css = {
     position: "absolute",
     zIndex: "fallback(kurillin, 9)",
@@ -143,12 +144,11 @@ var CarouselControl = (0, import_core2.forwardRef)(({ className, operation, ...r
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_button.IconButton,
     {
-      ref,
       className: (0, import_utils2.cx)("ui-carousel__control", className),
       colorScheme: ["whiteAlpha", "blackAlpha"],
       isRounded: true,
       __css: css,
-      ...rest
+      ...getControlProps(rest, ref)
     }
   );
 });

package/dist/carousel-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/carousel-control.tsx","../src/use-carousel.ts"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { IconButton } from \"@yamada-ui/button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselControl } from \"./use-carousel\"\n\nexport interface CarouselControlProps extends IconButtonProps {}\n\nexport const CarouselControlPrev = forwardRef<CarouselControlProps, \"button\">(\n  ({ className, ...rest }, ref) => {\n    const { orientation } = useCarouselContext()\n    const { getControlProps } = useCarouselControl({ operation: \"prev\" })\n\n    return (\n      <CarouselControl\n        className={cx(\"ui-carousel__control--prev\", className)}\n        aria-label=\"Go to previous slide\"\n        icon={\n          <ChevronIcon\n            __css={{\n              fontSize: \"1.5em\",\n              transform:\n                orientation === \"vertical\" ? \"rotate(180deg)\" : \"rotate(90deg)\",\n            }}\n          />\n        }\n        operation=\"prev\"\n        {...getControlProps(rest, ref)}\n      />\n    )\n  },\n)\n\nCarouselControlPrev.displayName = \"CarouselControlPrev\"\nCarouselControlPrev.__ui__ = \"CarouselControlPrev\"\n\nexport const CarouselControlNext = forwardRef<CarouselControlProps, \"button\">(\n  ({ className, ...rest }, ref) => {\n    const { orientation } = useCarouselContext()\n    const { getControlProps } = useCarouselControl({ operation: \"next\" })\n\n    return (\n      <CarouselControl\n        className={cx(\"ui-carousel__control--next\", className)}\n        aria-label=\"Go to next slide\"\n        icon={\n          <ChevronIcon\n            __css={{\n              fontSize: \"1.5em\",\n              transform:\n                orientation === \"vertical\" ? \"rotate(0deg)\" : \"rotate(-90deg)\",\n            }}\n          />\n        }\n        operation=\"next\"\n        {...getControlProps(rest, ref)}\n      />\n    )\n  },\n)\n\nCarouselControlNext.displayName = \"CarouselControlNext\"\nCarouselControlNext.__ui__ = \"CarouselControlNext\"\n\nconst CarouselControl = forwardRef<\n  { operation: \"next\" | \"prev\" } & CarouselControlProps,\n  \"button\"\n>(({ className, operation, ...rest }, ref) => {\n  const { styles } = useCarouselContext()\n\n  const css: CSSUIObject = {\n    position: \"absolute\",\n    zIndex: \"fallback(kurillin, 9)\",\n    ...styles.control,\n    ...styles[operation],\n  }\n\n  return (\n    <IconButton\n      ref={ref}\n      className={cx(\"ui-carousel__control\", className)}\n      colorScheme={[\"whiteAlpha\", \"blackAlpha\"]}\n      isRounded\n      __css={css}\n      {...rest}\n    />\n  )\n})\n\nCarouselControl.displayName = \"CarouselControl\"\nCarouselControl.__ui__ = \"CarouselControl\"\n","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 { MouseEvent, RefObject } 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  splitObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { Children, useCallback, useEffect, useRef, useState } 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  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  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\n  const [selectedIndex, setSelectedIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: index,\n    onChange,\n  })\n\n  const isVertical = orientation === \"vertical\"\n\n  const [carouselRef, carousel] = useEmblaCarousel(\n    {\n      align,\n      axis: isVertical ? \"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\n  assignRef(controlRef, carousel)\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    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  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\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        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(false)\n      }),\n    }),\n    [containerProps, gap, slideSize, vars],\n  )\n\n  const getSlidesProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...slidesProps,\n      ...props,\n      ref: carouselRef,\n    }),\n    [slidesProps, carouselRef],\n  )\n\n  return {\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 { selectedIndex, slidesToScroll } = useCarouselContext()\n\n  index = Math.floor((index ?? 0) / slidesToScroll)\n\n  const isSelected = index === selectedIndex\n\n  const getSlideProps: PropGetter = 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 interface UseCarouselControlProps extends IconButtonProps {\n  operation: \"next\" | \"prev\"\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: PropGetter<\"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 { carousel, indexes, selectedIndex } = 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: RequiredPropGetter<\n    { index: number } & HTMLProps<\"button\">,\n    HTMLProps<\"button\">\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":"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","names":["import_core","import_utils"]}
+{"version":3,"sources":["../src/carousel-control.tsx","../src/use-carousel.ts"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { IconButton } from \"@yamada-ui/button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselControl } from \"./use-carousel\"\n\nexport interface CarouselControlProps extends IconButtonProps {}\n\nexport const CarouselControlPrev = forwardRef<CarouselControlProps, \"button\">(\n  ({ className, ...rest }, ref) => {\n    const { orientation } = useCarouselContext()\n\n    return (\n      <CarouselControl\n        ref={ref}\n        className={cx(\"ui-carousel__control--prev\", className)}\n        icon={\n          <ChevronIcon\n            __css={{\n              fontSize: \"1.5em\",\n              transform:\n                orientation === \"vertical\" ? \"rotate(180deg)\" : \"rotate(90deg)\",\n            }}\n          />\n        }\n        operation=\"prev\"\n        {...rest}\n      />\n    )\n  },\n)\n\nCarouselControlPrev.displayName = \"CarouselControlPrev\"\nCarouselControlPrev.__ui__ = \"CarouselControlPrev\"\n\nexport const CarouselControlNext = forwardRef<CarouselControlProps, \"button\">(\n  ({ className, ...rest }, ref) => {\n    const { orientation } = useCarouselContext()\n\n    return (\n      <CarouselControl\n        ref={ref}\n        className={cx(\"ui-carousel__control--next\", className)}\n        icon={\n          <ChevronIcon\n            __css={{\n              fontSize: \"1.5em\",\n              transform:\n                orientation === \"vertical\" ? \"rotate(0deg)\" : \"rotate(-90deg)\",\n            }}\n          />\n        }\n        operation=\"next\"\n        {...rest}\n      />\n    )\n  },\n)\n\nCarouselControlNext.displayName = \"CarouselControlNext\"\nCarouselControlNext.__ui__ = \"CarouselControlNext\"\n\nconst CarouselControl = forwardRef<\n  { operation: \"next\" | \"prev\" } & CarouselControlProps,\n  \"button\"\n>(({ className, operation, ...rest }, ref) => {\n  const { styles } = useCarouselContext()\n  const { getControlProps } = useCarouselControl({ operation })\n\n  const css: CSSUIObject = {\n    position: \"absolute\",\n    zIndex: \"fallback(kurillin, 9)\",\n    ...styles.control,\n    ...styles[operation],\n  }\n\n  return (\n    <IconButton\n      className={cx(\"ui-carousel__control\", className)}\n      colorScheme={[\"whiteAlpha\", \"blackAlpha\"]}\n      isRounded\n      __css={css}\n      {...getControlProps(rest, ref)}\n    />\n  )\n})\n\nCarouselControl.displayName = \"CarouselControl\"\nCarouselControl.__ui__ = \"CarouselControl\"\n","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 [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n  const timeoutId = useRef<any>(undefined)\n  const isVertical = orientation === \"vertical\"\n  const [carouselRef, carousel] = useEmblaCarousel(\n    {\n      align,\n      axis: isVertical ? \"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 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    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        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(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 isSelected = 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(isSelected),\n      role: \"tabpanel\",\n      ...props,\n    }),\n    [id, index, isSelected, 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 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: PropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      \"aria-controls\": id,\n      \"aria-label\": `Go to ${isPrev ? \"previous\" : \"next\"} slide`,\n      ...props,\n      ref,\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n    }),\n    [disabled, id, onClick, isPrev],\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 isVertical = 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 (!isVertical) return\n\n          if (index === lastIndex) {\n            index = 0\n          } else {\n            index += 1\n          }\n\n          onSelect(index)\n        },\n        ArrowLeft: () => {\n          if (isVertical) return\n\n          if (index === 0) {\n            index = lastIndex\n          } else {\n            index -= 1\n          }\n\n          onSelect(index)\n        },\n        ArrowRight: () => {\n          if (isVertical) return\n\n          if (index === lastIndex) {\n            index = 0\n          } else {\n            index += 1\n          }\n\n          onSelect(index)\n        },\n        ArrowUp: () => {\n          if (!isVertical) 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, isVertical],\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 isSelected = 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\": isSelected,\n        \"data-index\": index,\n        \"data-selected\": dataAttr(isSelected),\n        role: \"tab\",\n        tabIndex: isSelected ? 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":"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","names":["import_core","import_utils"]}

package/dist/carousel-control.mjs

@@ -2,8 +2,8 @@
 import {
   CarouselControlNext,
   CarouselControlPrev
-} from "./chunk-PEXGWNKB.mjs";
-import "./chunk-SYCPZC2C.mjs";
+} from "./chunk-HVGHVY6Y.mjs";
+import "./chunk-2HSC64IV.mjs";
 export {
   CarouselControlNext,
   CarouselControlPrev

package/dist/carousel-indicators.js

@@ -49,30 +49,111 @@ var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
   errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
 });
 var useCarouselIndicators = () => {
-  const { carousel, indexes, selectedIndex } = useCarouselContext();
+  const { id, carousel, indexes, orientation, selectedIndex } = useCarouselContext();
+  const refMap = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const isVertical = orientation === "vertical";
+  const onSelect = (0, import_react.useCallback)(
+    (index) => {
+      var _a;
+      const ref = refMap.current.get(index);
+      (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.focus();
+      carousel == null ? void 0 : carousel.scrollTo(index);
+    },
+    [carousel]
+  );
   const onClick = (0, import_react.useCallback)(
-    (ev, index) => {
-      if (!carousel) return;
+    (index) => (ev) => {
       ev.stopPropagation();
-      carousel.scrollTo(index);
+      carousel == null ? void 0 : carousel.scrollTo(index);
     },
     [carousel]
   );
+  const onKeyDown = (0, import_react.useCallback)(
+    (index) => (ev) => {
+      const lastIndex = indexes.length - 1;
+      const actions = {
+        ArrowDown: () => {
+          if (!isVertical) return;
+          if (index === lastIndex) {
+            index = 0;
+          } else {
+            index += 1;
+          }
+          onSelect(index);
+        },
+        ArrowLeft: () => {
+          if (isVertical) return;
+          if (index === 0) {
+            index = lastIndex;
+          } else {
+            index -= 1;
+          }
+          onSelect(index);
+        },
+        ArrowRight: () => {
+          if (isVertical) return;
+          if (index === lastIndex) {
+            index = 0;
+          } else {
+            index += 1;
+          }
+          onSelect(index);
+        },
+        ArrowUp: () => {
+          if (!isVertical) return;
+          if (index === 0) {
+            index = lastIndex;
+          } else {
+            index -= 1;
+          }
+          onSelect(index);
+        },
+        End: () => onSelect(lastIndex),
+        Home: () => onSelect(0)
+      };
+      const action = actions[ev.key];
+      if (!action) return;
+      ev.preventDefault();
+      action(ev);
+    },
+    [indexes, onSelect, isVertical]
+  );
+  (0, import_utils.useUnmountEffect)(() => {
+    refMap.current.clear();
+  });
+  const getIndicatorsProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      "aria-label": "Sliders",
+      "aria-orientation": orientation,
+      role: "tablist",
+      ...props,
+      ref
+    }),
+    [orientation]
+  );
   const getIndicatorProps = (0, import_react.useCallback)(
-    ({ index, ...props }) => {
+    ({ index, ...props }, ref) => {
       const isSelected = 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`,
-        ...props,
-        key: index,
+        "aria-selected": isSelected,
         "data-index": index,
         "data-selected": (0, import_utils.dataAttr)(isSelected),
-        onClick: (0, import_utils.handlerAll)(props.onClick, (ev) => onClick(ev, index))
+        role: "tab",
+        tabIndex: isSelected ? 0 : -1,
+        ...props,
+        key: index,
+        onClick: (0, import_utils.handlerAll)(props.onClick, onClick(index)),
+        onKeyDown: (0, import_utils.handlerAll)(props.onKeyDown, onKeyDown(index))
       };
     },
-    [onClick, selectedIndex]
+    [onClick, onKeyDown, selectedIndex, id]
   );
-  return { indexes, getIndicatorProps };
+  return { indexes, getIndicatorProps, getIndicatorsProps };
 };
 
 // src/carousel-indicators.tsx
@@ -80,7 +161,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var CarouselIndicators = (0, import_core2.forwardRef)(
   ({ className, component, ...rest }, ref) => {
     const { orientation, selectedIndex, styles } = useCarouselContext();
-    const { indexes, getIndicatorProps } = useCarouselIndicators();
+    const { indexes, getIndicatorProps, getIndicatorsProps } = useCarouselIndicators();
     const css = {
       display: "flex",
       justifyContent: "center",
@@ -92,8 +173,8 @@ var CarouselIndicators = (0, import_core2.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_core2.ui.div,
       {
-        ref,
         className: (0, import_utils2.cx)("ui-carousel__indicators", className),
+        ...getIndicatorsProps(rest, ref),
         __css: css,
         ...rest,
         children: indexes.map((index) => {
@@ -117,23 +198,22 @@ var CarouselIndicators = (0, import_core2.forwardRef)(
 );
 CarouselIndicators.displayName = "CarouselIndicators";
 CarouselIndicators.__ui__ = "CarouselIndicators";
-var CarouselIndicator = ({
-  className,
-  ...rest
-}) => {
-  const { styles } = useCarouselContext();
-  const css = { ...styles.indicator };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_core2.ui.button,
-    {
-      type: "button",
-      className: (0, import_utils2.cx)("ui-carousel__indicators__indicator", className),
-      tabIndex: -1,
-      __css: css,
-      ...rest
-    }
-  );
-};
+var CarouselIndicator = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useCarouselContext();
+    const css = { ...styles.indicator };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core2.ui.button,
+      {
+        ref,
+        type: "button",
+        className: (0, import_utils2.cx)("ui-carousel__indicators__indicator", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
 CarouselIndicator.displayName = "CarouselIndicator";
 CarouselIndicator.__ui__ = "CarouselIndicator";
 // Annotate the CommonJS export names for ESM import in node:

package/dist/carousel-indicators.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/carousel-indicators.tsx","../src/use-carousel.ts"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactElement } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport { useCarouselContext, useCarouselIndicators } from \"./use-carousel\"\n\ninterface CarouselIndicatorsOptions {\n  /**\n   * The custom carousel indicator to use.\n   */\n  component?: FC<{ index: number; isSelected: boolean }>\n}\n\nexport interface CarouselIndicatorsProps\n  extends HTMLUIProps,\n    CarouselIndicatorsOptions {}\n\nexport const CarouselIndicators = forwardRef<CarouselIndicatorsProps, \"div\">(\n  ({ className, component, ...rest }, ref) => {\n    const { orientation, selectedIndex, styles } = useCarouselContext()\n    const { indexes, getIndicatorProps } = useCarouselIndicators()\n\n    const css: CSSUIObject = {\n      display: \"flex\",\n      justifyContent: \"center\",\n      position: \"absolute\",\n      zIndex: \"fallback(kurillin, 9)\",\n      ...styles.indicators,\n      ...(orientation === \"vertical\"\n        ? { flexDirection: \"column\" }\n        : { flexDirection: \"row\" }),\n    }\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-carousel__indicators\", className)}\n        __css={css}\n        {...rest}\n      >\n        {indexes.map((index) => {\n          const isSelected = index === selectedIndex\n\n          if (typeof component === \"function\") {\n            const child = component({\n              index,\n              isSelected,\n            }) as null | ReactElement\n\n            if (!child) return null\n\n            const props = getIndicatorProps({ ...child.props, index })\n\n            return cloneElement(child as ReactElement, props)\n          } else {\n            const { key, ...props } = getIndicatorProps({ index })\n\n            return <CarouselIndicator key={key} {...props} />\n          }\n        })}\n      </ui.div>\n    )\n  },\n)\n\nCarouselIndicators.displayName = \"CarouselIndicators\"\nCarouselIndicators.__ui__ = \"CarouselIndicators\"\n\ninterface CarouselIndicatorProps extends HTMLUIProps<\"button\"> {}\n\nconst CarouselIndicator: FC<CarouselIndicatorProps> = ({\n  className,\n  ...rest\n}) => {\n  const { styles } = useCarouselContext()\n\n  const css: CSSUIObject = { ...styles.indicator }\n\n  return (\n    <ui.button\n      type=\"button\"\n      className={cx(\"ui-carousel__indicators__indicator\", className)}\n      tabIndex={-1}\n      __css={css}\n      {...rest}\n    />\n  )\n}\n\nCarouselIndicator.displayName = \"CarouselIndicator\"\nCarouselIndicator.__ui__ = \"CarouselIndicator\"\n","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 { MouseEvent, RefObject } 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  splitObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { Children, useCallback, useEffect, useRef, useState } 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  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  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\n  const [selectedIndex, setSelectedIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: index,\n    onChange,\n  })\n\n  const isVertical = orientation === \"vertical\"\n\n  const [carouselRef, carousel] = useEmblaCarousel(\n    {\n      align,\n      axis: isVertical ? \"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\n  assignRef(controlRef, carousel)\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    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  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\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        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(false)\n      }),\n    }),\n    [containerProps, gap, slideSize, vars],\n  )\n\n  const getSlidesProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...slidesProps,\n      ...props,\n      ref: carouselRef,\n    }),\n    [slidesProps, carouselRef],\n  )\n\n  return {\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 { selectedIndex, slidesToScroll } = useCarouselContext()\n\n  index = Math.floor((index ?? 0) / slidesToScroll)\n\n  const isSelected = index === selectedIndex\n\n  const getSlideProps: PropGetter = 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 interface UseCarouselControlProps extends IconButtonProps {\n  operation: \"next\" | \"prev\"\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: PropGetter<\"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 { carousel, indexes, selectedIndex } = 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: RequiredPropGetter<\n    { index: number } & HTMLProps<\"button\">,\n    HTMLProps<\"button\">\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":"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","names":["import_core","import_utils","import_react"]}
+{"version":3,"sources":["../src/carousel-indicators.tsx","../src/use-carousel.ts"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactElement } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport { useCarouselContext, useCarouselIndicators } from \"./use-carousel\"\n\ninterface CarouselIndicatorsOptions {\n  /**\n   * The custom carousel indicator to use.\n   */\n  component?: FC<{ index: number; isSelected: boolean }>\n}\n\nexport interface CarouselIndicatorsProps\n  extends HTMLUIProps,\n    CarouselIndicatorsOptions {}\n\nexport const CarouselIndicators = forwardRef<CarouselIndicatorsProps, \"div\">(\n  ({ className, component, ...rest }, ref) => {\n    const { orientation, selectedIndex, styles } = useCarouselContext()\n    const { indexes, getIndicatorProps, getIndicatorsProps } =\n      useCarouselIndicators()\n\n    const css: CSSUIObject = {\n      display: \"flex\",\n      justifyContent: \"center\",\n      position: \"absolute\",\n      zIndex: \"fallback(kurillin, 9)\",\n      ...styles.indicators,\n      ...(orientation === \"vertical\"\n        ? { flexDirection: \"column\" }\n        : { flexDirection: \"row\" }),\n    }\n\n    return (\n      <ui.div\n        className={cx(\"ui-carousel__indicators\", className)}\n        {...getIndicatorsProps(rest, ref)}\n        __css={css}\n        {...rest}\n      >\n        {indexes.map((index) => {\n          const isSelected = index === selectedIndex\n\n          if (typeof component === \"function\") {\n            const child = component({\n              index,\n              isSelected,\n            }) as null | ReactElement\n\n            if (!child) return null\n\n            const props = getIndicatorProps({ ...child.props, index })\n\n            return cloneElement(child as ReactElement, props)\n          } else {\n            const { key, ...props } = getIndicatorProps({ index })\n\n            return <CarouselIndicator key={key} {...props} />\n          }\n        })}\n      </ui.div>\n    )\n  },\n)\n\nCarouselIndicators.displayName = \"CarouselIndicators\"\nCarouselIndicators.__ui__ = \"CarouselIndicators\"\n\ninterface CarouselIndicatorProps extends HTMLUIProps<\"button\"> {}\n\nconst CarouselIndicator = forwardRef<CarouselIndicatorProps, \"button\">(\n  ({ className, ...rest }, ref) => {\n    const { styles } = useCarouselContext()\n\n    const css: CSSUIObject = { ...styles.indicator }\n\n    return (\n      <ui.button\n        ref={ref}\n        type=\"button\"\n        className={cx(\"ui-carousel__indicators__indicator\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nCarouselIndicator.displayName = \"CarouselIndicator\"\nCarouselIndicator.__ui__ = \"CarouselIndicator\"\n","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 [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n  const timeoutId = useRef<any>(undefined)\n  const isVertical = orientation === \"vertical\"\n  const [carouselRef, carousel] = useEmblaCarousel(\n    {\n      align,\n      axis: isVertical ? \"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 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    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        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(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 isSelected = 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(isSelected),\n      role: \"tabpanel\",\n      ...props,\n    }),\n    [id, index, isSelected, 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 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: PropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      \"aria-controls\": id,\n      \"aria-label\": `Go to ${isPrev ? \"previous\" : \"next\"} slide`,\n      ...props,\n      ref,\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n    }),\n    [disabled, id, onClick, isPrev],\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 isVertical = 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 (!isVertical) return\n\n          if (index === lastIndex) {\n            index = 0\n          } else {\n            index += 1\n          }\n\n          onSelect(index)\n        },\n        ArrowLeft: () => {\n          if (isVertical) return\n\n          if (index === 0) {\n            index = lastIndex\n          } else {\n            index -= 1\n          }\n\n          onSelect(index)\n        },\n        ArrowRight: () => {\n          if (isVertical) return\n\n          if (index === lastIndex) {\n            index = 0\n          } else {\n            index += 1\n          }\n\n          onSelect(index)\n        },\n        ArrowUp: () => {\n          if (!isVertical) 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, isVertical],\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 isSelected = 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\": isSelected,\n        \"data-index\": index,\n        \"data-selected\": dataAttr(isSelected),\n        role: \"tab\",\n        tabIndex: isSelected ? 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":"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","names":["import_core","import_utils","import_react"]}

package/dist/carousel-indicators.mjs

@@ -1,8 +1,8 @@
 "use client"
 import {
   CarouselIndicators
-} from "./chunk-UTOIPGGP.mjs";
-import "./chunk-SYCPZC2C.mjs";
+} from "./chunk-GXNJ5VYJ.mjs";
+import "./chunk-2HSC64IV.mjs";
 export {
   CarouselIndicators
 };

package/dist/carousel-slide.js

@@ -48,16 +48,21 @@ var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
   errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
 });
 var useCarouselSlide = ({ index }) => {
-  const { selectedIndex, slidesToScroll } = useCarouselContext();
+  const { id, indexes, selectedIndex, slidesToScroll } = useCarouselContext();
   index = Math.floor((index != null ? index : 0) / slidesToScroll);
+  const totalSlides = indexes.length;
   const isSelected = index === selectedIndex;
   const getSlideProps = (0, import_react.useCallback)(
     (props = {}) => ({
-      ...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)(isSelected),
+      role: "tabpanel",
+      ...props
     }),
-    [isSelected, index]
+    [id, index, isSelected, totalSlides]
   );
   return { getSlideProps };
 };

package/dist/carousel-slide.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/carousel-slide.tsx","../src/use-carousel.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { UseCarouselSlideProps } from \"./use-carousel\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselSlide } from \"./use-carousel\"\n\ninterface CarouselSlideOptions {\n  /**\n   * The CSS `width` property.\n   */\n  size?: CSSUIObject[\"width\"]\n}\n\nexport interface CarouselSlideProps\n  extends HTMLUIProps,\n    UseCarouselSlideProps,\n    CarouselSlideOptions {}\n\nexport const CarouselSlide = forwardRef<CarouselSlideProps, \"div\">(\n  ({ className, size, ...rest }, ref) => {\n    const { includeGapInSize, orientation } = useCarouselContext()\n    const { getSlideProps } = useCarouselSlide(rest)\n\n    size ??= \"$slideSize\"\n\n    const css: CSSUIObject = {\n      flex: `0 0 ${size}`,\n      position: \"relative\",\n      ...(includeGapInSize\n        ? { [orientation === \"vertical\" ? \"pb\" : \"pr\"]: \"$gap\" }\n        : { [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"$gap\" }),\n    }\n\n    return (\n      <ui.div\n        className={cx(\"ui-carousel__slide\", className)}\n        __css={css}\n        {...getSlideProps({})}\n      >\n        <CarouselSlideInner ref={ref} {...rest} />\n      </ui.div>\n    )\n  },\n)\n\nCarouselSlide.displayName = \"CarouselSlide\"\nCarouselSlide.__ui__ = \"CarouselSlide\"\n\ninterface CarouselSlideInnerProps extends HTMLUIProps {}\n\nconst CarouselSlideInner = forwardRef<CarouselSlideInnerProps, \"div\">(\n  ({ ...rest }, ref) => {\n    return (\n      <ui.div\n        ref={ref}\n        className=\"ui-carousel__slide__inner\"\n        boxSize=\"100%\"\n        {...rest}\n      />\n    )\n  },\n)\n\nCarouselSlideInner.displayName = \"CarouselSlideInner\"\nCarouselSlideInner.__ui__ = \"CarouselSlideInner\"\n","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 { MouseEvent, RefObject } 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  splitObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { Children, useCallback, useEffect, useRef, useState } 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  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  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\n  const [selectedIndex, setSelectedIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: index,\n    onChange,\n  })\n\n  const isVertical = orientation === \"vertical\"\n\n  const [carouselRef, carousel] = useEmblaCarousel(\n    {\n      align,\n      axis: isVertical ? \"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\n  assignRef(controlRef, carousel)\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    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  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\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        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(false)\n      }),\n    }),\n    [containerProps, gap, slideSize, vars],\n  )\n\n  const getSlidesProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...slidesProps,\n      ...props,\n      ref: carouselRef,\n    }),\n    [slidesProps, carouselRef],\n  )\n\n  return {\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 { selectedIndex, slidesToScroll } = useCarouselContext()\n\n  index = Math.floor((index ?? 0) / slidesToScroll)\n\n  const isSelected = index === selectedIndex\n\n  const getSlideProps: PropGetter = 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 interface UseCarouselControlProps extends IconButtonProps {\n  operation: \"next\" | \"prev\"\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: PropGetter<\"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 { carousel, indexes, selectedIndex } = 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: RequiredPropGetter<\n    { index: number } & HTMLProps<\"button\">,\n    HTMLProps<\"button\">\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;AAEA,IAAAA,eAA+B;AAC/B,IAAAC,gBAAmB;;;ACQnB,kBAAiD;AACjD,oCAAqC;AACrC,mBAOO;AACP,kCAA6B;AAC7B,mBAAmE;AAoB5D,IAAM,CAAC,kBAAkB,kBAAkB,QAChD,4BAA+B;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA6WI,IAAM,mBAAmB,CAAC,EAAE,MAAM,MAA6B;AACpE,QAAM,EAAE,eAAe,eAAe,IAAI,mBAAmB;AAE7D,UAAQ,KAAK,OAAO,wBAAS,KAAK,cAAc;AAEhD,QAAM,aAAa,UAAU;AAE7B,QAAM,oBAA4B;AAAA,IAChC,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;;;ADrYQ;AArBD,IAAM,oBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,MAAM,GAAG,KAAK,GAAG,QAAQ;AACrC,UAAM,EAAE,kBAAkB,YAAY,IAAI,mBAAmB;AAC7D,UAAM,EAAE,cAAc,IAAI,iBAAiB,IAAI;AAE/C,iCAAS;AAET,UAAM,MAAmB;AAAA,MACvB,MAAM,OAAO,IAAI;AAAA,MACjB,UAAU;AAAA,MACV,GAAI,mBACA,EAAE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG,OAAO,IACrD,EAAE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG,OAAO;AAAA,IAC3D;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC,eAAW,kBAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG,cAAc,CAAC,CAAC;AAAA,QAEpB,sDAAC,sBAAmB,KAAW,GAAG,MAAM;AAAA;AAAA,IAC1C;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;AAC5B,cAAc,SAAS;AAIvB,IAAM,yBAAqB;AAAA,EACzB,CAAC,EAAE,GAAG,KAAK,GAAG,QAAQ;AACpB,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,SAAQ;AAAA,QACP,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;","names":["import_core","import_utils"]}
+{"version":3,"sources":["../src/carousel-slide.tsx","../src/use-carousel.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { UseCarouselSlideProps } from \"./use-carousel\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselSlide } from \"./use-carousel\"\n\ninterface CarouselSlideOptions {\n  /**\n   * The CSS `width` property.\n   */\n  size?: CSSUIObject[\"width\"]\n}\n\nexport interface CarouselSlideProps\n  extends HTMLUIProps,\n    UseCarouselSlideProps,\n    CarouselSlideOptions {}\n\nexport const CarouselSlide = forwardRef<CarouselSlideProps, \"div\">(\n  ({ className, size, ...rest }, ref) => {\n    const { includeGapInSize, orientation } = useCarouselContext()\n    const { getSlideProps } = useCarouselSlide(rest)\n\n    size ??= \"$slideSize\"\n\n    const css: CSSUIObject = {\n      flex: `0 0 ${size}`,\n      position: \"relative\",\n      ...(includeGapInSize\n        ? { [orientation === \"vertical\" ? \"pb\" : \"pr\"]: \"$gap\" }\n        : { [orientation === \"vertical\" ? \"mb\" : \"mr\"]: \"$gap\" }),\n    }\n\n    return (\n      <ui.div\n        className={cx(\"ui-carousel__slide\", className)}\n        __css={css}\n        {...getSlideProps({})}\n      >\n        <CarouselSlideInner ref={ref} {...rest} />\n      </ui.div>\n    )\n  },\n)\n\nCarouselSlide.displayName = \"CarouselSlide\"\nCarouselSlide.__ui__ = \"CarouselSlide\"\n\ninterface CarouselSlideInnerProps extends HTMLUIProps {}\n\nconst CarouselSlideInner = forwardRef<CarouselSlideInnerProps, \"div\">(\n  ({ ...rest }, ref) => {\n    return (\n      <ui.div\n        ref={ref}\n        className=\"ui-carousel__slide__inner\"\n        boxSize=\"100%\"\n        {...rest}\n      />\n    )\n  },\n)\n\nCarouselSlideInner.displayName = \"CarouselSlideInner\"\nCarouselSlideInner.__ui__ = \"CarouselSlideInner\"\n","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 [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n  const timeoutId = useRef<any>(undefined)\n  const isVertical = orientation === \"vertical\"\n  const [carouselRef, carousel] = useEmblaCarousel(\n    {\n      align,\n      axis: isVertical ? \"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 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    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        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(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 isSelected = 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(isSelected),\n      role: \"tabpanel\",\n      ...props,\n    }),\n    [id, index, isSelected, 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 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: PropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      \"aria-controls\": id,\n      \"aria-label\": `Go to ${isPrev ? \"previous\" : \"next\"} slide`,\n      ...props,\n      ref,\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n    }),\n    [disabled, id, onClick, isPrev],\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 isVertical = 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 (!isVertical) return\n\n          if (index === lastIndex) {\n            index = 0\n          } else {\n            index += 1\n          }\n\n          onSelect(index)\n        },\n        ArrowLeft: () => {\n          if (isVertical) return\n\n          if (index === 0) {\n            index = lastIndex\n          } else {\n            index -= 1\n          }\n\n          onSelect(index)\n        },\n        ArrowRight: () => {\n          if (isVertical) return\n\n          if (index === lastIndex) {\n            index = 0\n          } else {\n            index += 1\n          }\n\n          onSelect(index)\n        },\n        ArrowUp: () => {\n          if (!isVertical) 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, isVertical],\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 isSelected = 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\": isSelected,\n        \"data-index\": index,\n        \"data-selected\": dataAttr(isSelected),\n        role: \"tab\",\n        tabIndex: isSelected ? 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,eAA+B;AAC/B,IAAAC,gBAAmB;;;ACanB,kBAAiD;AACjD,oCAAqC;AACrC,mBASO;AACP,kCAA6B;AAC7B,mBAQO;AAqBA,IAAM,CAAC,kBAAkB,kBAAkB,QAChD,4BAA+B;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAgXI,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,aAAa,UAAU;AAE7B,QAAM,oBAA4B;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,qBAAiB,uBAAS,UAAU;AAAA,MACpC,MAAM;AAAA,MACN,GAAG;AAAA,IACL;AAAA,IACA,CAAC,IAAI,OAAO,YAAY,WAAW;AAAA,EACrC;AAEA,SAAO,EAAE,cAAc;AACzB;;;AD7ZQ;AArBD,IAAM,oBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,MAAM,GAAG,KAAK,GAAG,QAAQ;AACrC,UAAM,EAAE,kBAAkB,YAAY,IAAI,mBAAmB;AAC7D,UAAM,EAAE,cAAc,IAAI,iBAAiB,IAAI;AAE/C,iCAAS;AAET,UAAM,MAAmB;AAAA,MACvB,MAAM,OAAO,IAAI;AAAA,MACjB,UAAU;AAAA,MACV,GAAI,mBACA,EAAE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG,OAAO,IACrD,EAAE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG,OAAO;AAAA,IAC3D;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC,eAAW,kBAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG,cAAc,CAAC,CAAC;AAAA,QAEpB,sDAAC,sBAAmB,KAAW,GAAG,MAAM;AAAA;AAAA,IAC1C;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;AAC5B,cAAc,SAAS;AAIvB,IAAM,yBAAqB;AAAA,EACzB,CAAC,EAAE,GAAG,KAAK,GAAG,QAAQ;AACpB,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,SAAQ;AAAA,QACP,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;","names":["import_core","import_utils"]}

package/dist/carousel-slide.mjs

@@ -1,8 +1,8 @@
 "use client"
 import {
   CarouselSlide
-} from "./chunk-CXXL47SC.mjs";
-import "./chunk-SYCPZC2C.mjs";
+} from "./chunk-GUUMIIYD.mjs";
+import "./chunk-2HSC64IV.mjs";
 export {
   CarouselSlide
 };