@yamada-ui/carousel 0.1.0

package/dist/index.js

@@ -0,0 +1,529 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Carousel: () => Carousel,
+  CarouselControlNext: () => CarouselControlNext,
+  CarouselControlPrev: () => CarouselControlPrev,
+  CarouselIndicators: () => CarouselIndicators,
+  CarouselSlide: () => CarouselSlide
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/carousel.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_use_token = require("@yamada-ui/use-token");
+var import_use_value = require("@yamada-ui/use-value");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/use-carousel.ts
+var import_core = require("@yamada-ui/core");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_utils = require("@yamada-ui/utils");
+var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
+var import_react = require("react");
+var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
+  name: "CarouselContext",
+  errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
+});
+var useCarousel = ({
+  index,
+  defaultIndex = 0,
+  onChange,
+  align = "center",
+  orientation = "horizontal",
+  autoplay = false,
+  stopMouseEnterAutoplay = true,
+  loop = true,
+  speed = 10,
+  delay = 4e3,
+  gap = "md",
+  slidesToScroll = 1,
+  draggable = true,
+  dragFree = false,
+  inViewThreshold = 0,
+  skipSnaps = false,
+  containScroll = "",
+  slideSize = "100%",
+  includeGapInSize = true,
+  onScrollProgress,
+  children,
+  ...rest
+}) => {
+  const computedProps = (0, import_utils.splitObject)(rest, import_core.layoutStylesProperties);
+  const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
+    value: index,
+    defaultValue: defaultIndex,
+    onChange
+  });
+  const isVertical = orientation === "vertical";
+  const [carouselRef, carousel] = (0, import_embla_carousel_react.default)({
+    axis: isVertical ? "y" : "x",
+    startIndex: defaultIndex,
+    loop,
+    align,
+    slidesToScroll,
+    draggable,
+    dragFree,
+    speed,
+    inViewThreshold,
+    skipSnaps,
+    containScroll
+  });
+  const [indexes, setIndexes] = (0, import_react.useState)([]);
+  const [isMouseEnter, setIsMouseEnter] = (0, import_react.useState)(false);
+  const timeoutId = (0, import_react.useRef)(void 0);
+  const onScroll = (0, import_react.useCallback)(() => {
+    if (!carousel)
+      return;
+    const progress = Math.round(Math.max(0, Math.min(1, carousel.scrollProgress())) * 100);
+    onScrollProgress == null ? void 0 : onScrollProgress(progress);
+  }, [carousel, onScrollProgress]);
+  const onSelect = (0, import_react.useCallback)(() => {
+    if (!carousel)
+      return;
+    const index2 = carousel.selectedScrollSnap();
+    setSelectedIndex(index2);
+  }, [carousel, setSelectedIndex]);
+  (0, import_react.useEffect)(() => {
+    const isStop = isMouseEnter && stopMouseEnterAutoplay;
+    const isLast = !(carousel == null ? void 0 : carousel.canScrollNext());
+    if (carousel && autoplay && !isStop && !isLast) {
+      timeoutId.current = setInterval(() => {
+        carousel.scrollNext();
+      }, delay);
+    } else {
+      if (timeoutId.current)
+        clearInterval(timeoutId.current);
+      timeoutId.current = void 0;
+    }
+    return () => {
+      if (timeoutId.current)
+        clearInterval(timeoutId.current);
+    };
+  }, [autoplay, delay, stopMouseEnterAutoplay, carousel, isMouseEnter, loop, selectedIndex]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (!carousel)
+      return;
+    carousel.reInit();
+    const snapList = carousel.scrollSnapList();
+    const indexes2 = snapList.map((_, i) => i);
+    setIndexes(indexes2);
+  }, [
+    import_react.Children.toArray(children).length,
+    align,
+    orientation,
+    loop,
+    speed,
+    gap,
+    slidesToScroll,
+    draggable,
+    dragFree,
+    inViewThreshold,
+    skipSnaps,
+    containScroll,
+    slideSize,
+    includeGapInSize
+  ]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (!carousel)
+      return;
+    const snapList = carousel.scrollSnapList();
+    const indexes2 = snapList.map((_, i) => i);
+    setIndexes(indexes2);
+  }, [carousel]);
+  (0, import_utils.useUpdateEffect)(() => {
+    if (carousel) {
+      carousel.on("select", onSelect);
+      carousel.on("scroll", onScroll);
+      onScroll();
+      return () => {
+        carousel.off("select", onSelect);
+        carousel.off("scroll", onScroll);
+      };
+    }
+  }, [carousel, onScroll]);
+  const getContainerProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      ...computedProps[0],
+      ...props,
+      ref,
+      onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
+        setIsMouseEnter(true);
+      }),
+      onMouseLeave: (0, import_utils.handlerAll)(props.onMouseLeave, () => {
+        setIsMouseEnter(false);
+      })
+    }),
+    [computedProps]
+  );
+  const getSlidesProps = (0, import_react.useCallback)(
+    (props = {}) => ({
+      ...computedProps[1],
+      ...props,
+      ref: carouselRef
+    }),
+    [computedProps, carouselRef]
+  );
+  return {
+    carousel,
+    children,
+    indexes,
+    selectedIndex,
+    orientation,
+    slideSize,
+    gap,
+    slidesToScroll,
+    includeGapInSize,
+    getContainerProps,
+    getSlidesProps
+  };
+};
+var useCarouselSlide = ({ index }) => {
+  const { selectedIndex, slidesToScroll } = useCarouselContext();
+  index = Math.floor((index != null ? index : 0) / (slidesToScroll != null ? slidesToScroll : 1));
+  const isSelected = index === selectedIndex;
+  const getSlideProps = (0, import_react.useCallback)(
+    (props = {}) => ({
+      ...props,
+      role: "carousel-slide",
+      "data-index": index,
+      "data-selected": (0, import_utils.dataAttr)(isSelected)
+    }),
+    [isSelected, index]
+  );
+  return { getSlideProps };
+};
+var useCarouselControl = ({ operation, ...rest }) => {
+  var _a, _b;
+  const { 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)(() => {
+    if (!carousel)
+      return;
+    if (isPrev) {
+      carousel.scrollPrev();
+    } else {
+      carousel.scrollNext();
+    }
+  }, [carousel, isPrev]);
+  const getControlProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      ...props,
+      ref,
+      disabled,
+      role: "carousel-control",
+      onClick: (0, import_utils.handlerAll)(props.onClick, onClick)
+    }),
+    [disabled, onClick]
+  );
+  return { getControlProps };
+};
+var useCarouselIndicators = () => {
+  const { selectedIndex, carousel, indexes } = useCarouselContext();
+  const onClick = (0, import_react.useCallback)(
+    (ev, index) => {
+      if (!carousel)
+        return;
+      ev.stopPropagation();
+      carousel.scrollTo(index);
+    },
+    [carousel]
+  );
+  const getIndicatorProps = (0, import_react.useCallback)(
+    ({ index, ...props } = {}) => {
+      const isSelected = index === selectedIndex;
+      return {
+        ...props,
+        key: index,
+        role: "carousel-indicator",
+        "data-index": index,
+        "data-selected": (0, import_utils.dataAttr)(isSelected),
+        onClick: (0, import_utils.handlerAll)(props.onClick, (ev) => onClick(ev, index))
+      };
+    },
+    [onClick, selectedIndex]
+  );
+  return { indexes, getIndicatorProps };
+};
+
+// src/carousel.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Carousel = (0, import_core2.forwardRef)(
+  ({ h, height, minH, minHeight, ...props }, ref) => {
+    var _a, _b;
+    const orientation = (0, import_use_value.useValue)(props.orientation);
+    const align = (0, import_use_value.useValue)(props.align);
+    const autoplay = (0, import_use_value.useValue)(props.autoplay);
+    const stopMouseEnterAutoplay = (0, import_use_value.useValue)(props.stopMouseEnterAutoplay);
+    const loop = (0, import_use_value.useValue)(props.loop);
+    const speed = (0, import_use_value.useValue)(props.speed);
+    const delay = (0, import_use_value.useValue)(props.delay);
+    const slidesToScroll = (0, import_use_value.useValue)(props.slidesToScroll);
+    const draggable = (0, import_use_value.useValue)(props.draggable);
+    const dragFree = (0, import_use_value.useValue)(props.dragFree);
+    const inViewThreshold = (0, import_use_value.useValue)(props.inViewThreshold);
+    const skipSnaps = (0, import_use_value.useValue)(props.skipSnaps);
+    const containScroll = (0, import_use_value.useValue)(props.containScroll);
+    const includeGapInSize = (0, import_use_value.useValue)(props.includeGapInSize);
+    const gap = (_a = (0, import_use_token.useToken)("spaces", (0, import_use_value.useValue)(props.gap))) != null ? _a : (0, import_use_value.useValue)(props.gap);
+    const slideSize = (_b = (0, import_use_token.useToken)("sizes", (0, import_use_value.useValue)(props.slideSize))) != null ? _b : (0, import_use_value.useValue)(props.slideSize);
+    const [styles, mergedProps] = (0, import_core2.useMultiComponentStyle)("Carousel", {
+      ...props,
+      orientation,
+      align,
+      autoplay,
+      stopMouseEnterAutoplay,
+      loop,
+      speed,
+      delay,
+      slidesToScroll,
+      draggable,
+      dragFree,
+      inViewThreshold,
+      skipSnaps,
+      containScroll,
+      includeGapInSize,
+      gap,
+      slideSize
+    });
+    const {
+      className,
+      inner,
+      withControls = true,
+      controlProps,
+      controlPrevProps,
+      controlNextProps,
+      withIndicators = true,
+      indicatorsProps,
+      ...computedProps
+    } = (0, import_core2.omitThemeProps)(mergedProps);
+    const computedWithControls = (0, import_use_value.useValue)(withControls);
+    const computedWithIndicators = (0, import_use_value.useValue)(withIndicators);
+    const { getContainerProps, getSlidesProps, children, ...rest } = useCarousel({
+      ...computedProps
+    });
+    const validChildren = (0, import_utils2.getValidChildren)(children);
+    const [customCarouselControlPrev] = (0, import_utils2.findChildren)(validChildren, CarouselControlPrev);
+    const [customCarouselControlNext] = (0, import_utils2.findChildren)(validChildren, CarouselControlNext);
+    const [customCarouselIndicators] = (0, import_utils2.findChildren)(validChildren, CarouselIndicators);
+    const slideChildren = (0, import_utils2.pickChildren)(validChildren, CarouselSlide);
+    const otherChildren = (0, import_utils2.omitChildren)(
+      validChildren,
+      CarouselControlPrev,
+      CarouselControlNext,
+      CarouselIndicators,
+      CarouselSlide
+    );
+    const cloneSlideChildren = slideChildren.map((child, index) => (0, import_react2.cloneElement)(child, { index }));
+    h != null ? h : h = height;
+    minH != null ? minH : minH = minHeight;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_core2.ui.div,
+      {
+        className: (0, import_utils2.cx)("ui-carousel", className),
+        __css: { position: "relative", h: "fit-content", ...styles.container },
+        ...getContainerProps({}, ref),
+        children: [
+          customCarouselControlPrev != null ? customCarouselControlPrev : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselControlPrev, { ...controlProps, ...controlPrevProps }) : null,
+          customCarouselControlNext != null ? customCarouselControlNext : computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselControlNext, { ...controlProps, ...controlNextProps }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselSlides, { ...getSlidesProps({ ...(0, import_utils2.filterUndefined)({ h, minH }), ...inner }), children: cloneSlideChildren }),
+          customCarouselIndicators != null ? customCarouselIndicators : computedWithIndicators ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselIndicators, { ...indicatorsProps }) : null,
+          otherChildren
+        ]
+      }
+    ) });
+  }
+);
+var CarouselSlides = (0, import_core2.forwardRef)(({ ...rest }, ref) => {
+  const css = { w: "100%", h: "fit-content", overflow: "hidden" };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { ref, className: "ui-carousel-sliders", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselSlidesInner, { ...rest }) });
+});
+var CarouselSlidesInner = ({ ...rest }) => {
+  const { orientation, includeGapInSize, gap, styles } = useCarouselContext();
+  const css = {
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    ...styles.inner,
+    ...includeGapInSize ? { [orientation === "vertical" ? "mb" : "mr"]: `-${gap}` } : {}
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.ui.div, { className: "ui-carousel-sliders-inner", __css: css, ...rest });
+};
+
+// src/carousel-slide.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_utils3 = require("@yamada-ui/utils");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CarouselSlide = (0, import_core3.forwardRef)(
+  ({ className, size, ...rest }, ref) => {
+    const { slideSize, includeGapInSize, orientation, gap } = useCarouselContext();
+    const { getSlideProps } = useCarouselSlide(rest);
+    size != null ? size : size = slideSize;
+    const css = {
+      position: "relative",
+      flex: `0 0 ${size}`,
+      ...includeGapInSize ? { [orientation === "vertical" ? "pb" : "pr"]: gap } : { [orientation === "vertical" ? "mb" : "mr"]: gap }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core3.ui.div, { className: (0, import_utils3.cx)("ui-carousel-slide", className), __css: css, ...getSlideProps({}), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CarouselSlideInner, { ref, ...rest }) });
+  }
+);
+var CarouselSlideInner = (0, import_core3.forwardRef)(({ ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core3.ui.div, { ref, className: "ui-carousel-slide-inner", w: "100%", h: "100%", ...rest });
+});
+
+// src/carousel-control.tsx
+var import_button = require("@yamada-ui/button");
+var import_core4 = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_utils4 = require("@yamada-ui/utils");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CarouselControlPrev = (0, import_core4.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { orientation } = useCarouselContext();
+    const { getControlProps } = useCarouselControl({ operation: "prev" });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      CarouselControl,
+      {
+        operation: "prev",
+        className: (0, import_utils4.cx)("ui-carousel-control-prev", className),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_icon.ChevronIcon,
+          {
+            __css: {
+              fontSize: "1.5em",
+              transform: orientation === "vertical" ? "rotate(180deg)" : "rotate(90deg)"
+            }
+          }
+        ),
+        ...getControlProps(rest, ref)
+      }
+    );
+  }
+);
+var CarouselControlNext = (0, import_core4.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { orientation } = useCarouselContext();
+    const { getControlProps } = useCarouselControl({ operation: "next" });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      CarouselControl,
+      {
+        operation: "next",
+        className: (0, import_utils4.cx)("ui-carousel-control-next", className),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_icon.ChevronIcon,
+          {
+            __css: {
+              fontSize: "1.5em",
+              transform: orientation === "vertical" ? "rotate(0deg)" : "rotate(-90deg)"
+            }
+          }
+        ),
+        ...getControlProps(rest, ref)
+      }
+    );
+  }
+);
+var CarouselControl = (0, import_core4.forwardRef)(
+  ({ className, operation, ...rest }, ref) => {
+    const { styles } = useCarouselContext();
+    const colorScheme = (0, import_core4.useColorModetValue)("whiteAlpha", "blackAlpha");
+    const css = {
+      position: "absolute",
+      zIndex: "kurillin",
+      ...styles.control,
+      ...styles[operation]
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_button.IconButton,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-carousel-control", className),
+        colorScheme,
+        isRound: true,
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+
+// src/carousel-indicators.tsx
+var import_core5 = require("@yamada-ui/core");
+var import_utils5 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CarouselIndicators = (0, import_core5.forwardRef)(
+  ({ className, component = CarouselIndicator, ...rest }, ref) => {
+    const { selectedIndex, orientation, styles } = useCarouselContext();
+    const { indexes, getIndicatorProps } = useCarouselIndicators();
+    const cloneChildren = indexes.map((index) => {
+      const isSelected = index === selectedIndex;
+      const child = component({ index, isSelected });
+      if (!child)
+        return null;
+      const props = getIndicatorProps({ ...child.props, index });
+      return (0, import_react3.cloneElement)(child, props);
+    });
+    const css = {
+      position: "absolute",
+      zIndex: "kurillin",
+      display: "flex",
+      justifyContent: "center",
+      ...styles.indicators,
+      ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { ref, className: (0, import_utils5.cx)("ui-carousel-indicators", className), __css: css, ...rest, children: cloneChildren });
+  }
+);
+var CarouselIndicator = ({ className, ...rest }) => {
+  const { styles } = useCarouselContext();
+  const css = { ...styles.indicator };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_core5.ui.button,
+    {
+      type: "button",
+      tabIndex: -1,
+      className: (0, import_utils5.cx)("ui-carousel-indicator", className),
+      __css: css,
+      ...rest
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Carousel,
+  CarouselControlNext,
+  CarouselControlPrev,
+  CarouselIndicators,
+  CarouselSlide
+});

package/dist/index.mjs

@@ -0,0 +1,21 @@
+import {
+  Carousel
+} from "./chunk-PQ3S6YEB.mjs";
+import {
+  CarouselControlNext,
+  CarouselControlPrev
+} from "./chunk-FDF2QUCY.mjs";
+import {
+  CarouselIndicators
+} from "./chunk-UMRTZXZW.mjs";
+import {
+  CarouselSlide
+} from "./chunk-BWFAE3UJ.mjs";
+import "./chunk-4P3A5PTO.mjs";
+export {
+  Carousel,
+  CarouselControlNext,
+  CarouselControlPrev,
+  CarouselIndicators,
+  CarouselSlide
+};

package/dist/use-carousel.d.ts

@@ -0,0 +1,82 @@
+import * as _yamada_ui_utils from '@yamada-ui/utils';
+import { PropGetter, RequiredPropGetter } from '@yamada-ui/utils';
+import * as react from 'react';
+import { IconButtonProps } from '@yamada-ui/button';
+import { HTMLUIProps, CSSUIObject } from '@yamada-ui/core';
+import { EmblaCarouselType } from 'embla-carousel-react';
+
+type Orientation = 'vertical' | 'horizontal';
+type Align = 'start' | 'center' | 'end' | number;
+type ContainScroll = '' | 'trimSnaps' | 'keepSnaps';
+type CarouselContext = {
+    carousel: EmblaCarouselType | undefined;
+    indexes: number[];
+    selectedIndex: number;
+    orientation: Orientation;
+    includeGapInSize: boolean;
+    slidesToScroll: number;
+    slideSize: string | number;
+    gap: string | number;
+    styles: Record<string, CSSUIObject>;
+};
+declare const CarouselProvider: react.Provider<CarouselContext>;
+declare const useCarouselContext: () => CarouselContext;
+type UseCarouselProps = Omit<HTMLUIProps<'div'>, 'onChange' | 'draggable' | 'gap'> & {
+    index?: number;
+    defaultIndex?: number;
+    onChange?: (index: number) => void;
+    orientation?: Orientation;
+    align?: Align;
+    containScroll?: ContainScroll;
+    slidesToScroll?: number;
+    dragFree?: boolean;
+    draggable?: boolean;
+    inViewThreshold?: number;
+    loop?: boolean;
+    skipSnaps?: boolean;
+    speed?: number;
+    delay?: number;
+    autoplay?: boolean;
+    stopMouseEnterAutoplay?: boolean;
+    includeGapInSize?: boolean;
+    gap?: string | number;
+    slideSize?: string | number;
+    onScrollProgress?: (progress: number) => void;
+};
+declare const useCarousel: ({ index, defaultIndex, onChange, align, orientation, autoplay, stopMouseEnterAutoplay, loop, speed, delay, gap, slidesToScroll, draggable, dragFree, inViewThreshold, skipSnaps, containScroll, slideSize, includeGapInSize, onScrollProgress, children, ...rest }: UseCarouselProps) => {
+    carousel: EmblaCarouselType | undefined;
+    children: react.ReactNode;
+    indexes: number[];
+    selectedIndex: number;
+    orientation: Orientation;
+    slideSize: string | number;
+    gap: string | number;
+    slidesToScroll: number;
+    includeGapInSize: boolean;
+    getContainerProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    getSlidesProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+};
+type UseCarouselReturn = ReturnType<typeof useCarousel>;
+type UseCarouselSlideProps = {
+    index?: number;
+};
+declare const useCarouselSlide: ({ index }: UseCarouselSlideProps) => {
+    getSlideProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+};
+type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>;
+type UseCarouselControlProps = IconButtonProps & {
+    operation: 'prev' | 'next';
+};
+declare const useCarouselControl: ({ operation, ...rest }: UseCarouselControlProps) => {
+    getControlProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+};
+type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>;
+declare const useCarouselIndicators: () => {
+    indexes: number[];
+    getIndicatorProps: RequiredPropGetter<{
+        index: number;
+    }, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+};
+type UseCarouselIndicatorsReturn = ReturnType<typeof useCarouselIndicators>;
+
+export { Align, CarouselProvider, ContainScroll, Orientation, UseCarouselControlProps, UseCarouselControlReturn, UseCarouselIndicatorsReturn, UseCarouselProps, UseCarouselReturn, UseCarouselSlideProps, UseCarouselSlideReturn, useCarousel, useCarouselContext, useCarouselControl, useCarouselIndicators, useCarouselSlide };