@yamada-ui/carousel 1.0.28 → 2.0.0-next-20240513035416

package/dist/carousel-control.d.mts

@@ -0,0 +1,8 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { IconButtonProps } from '@yamada-ui/button';
+
+type CarouselControlProps = IconButtonProps;
+declare const CarouselControlPrev: _yamada_ui_core.Component<"button", IconButtonProps>;
+declare const CarouselControlNext: _yamada_ui_core.Component<"button", IconButtonProps>;
+
+export { CarouselControlNext, CarouselControlPrev, type CarouselControlProps };

package/dist/carousel-control.d.ts

@@ -0,0 +1,8 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { IconButtonProps } from '@yamada-ui/button';
+
+type CarouselControlProps = IconButtonProps;
+declare const CarouselControlPrev: _yamada_ui_core.Component<"button", IconButtonProps>;
+declare const CarouselControlNext: _yamada_ui_core.Component<"button", IconButtonProps>;
+
+export { CarouselControlNext, CarouselControlPrev, type CarouselControlProps };

package/dist/carousel-control.js

@@ -0,0 +1,158 @@
+"use client"
+"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/carousel-control.tsx
+var carousel_control_exports = {};
+__export(carousel_control_exports, {
+  CarouselControlNext: () => CarouselControlNext,
+  CarouselControlPrev: () => CarouselControlPrev
+});
+module.exports = __toCommonJS(carousel_control_exports);
+var import_button = require("@yamada-ui/button");
+var import_core2 = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_utils2 = require("@yamada-ui/utils");
+
+// 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 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,
+      onClick: (0, import_utils.handlerAll)(props.onClick, onClick)
+    }),
+    [disabled, onClick]
+  );
+  return { getControlProps };
+};
+
+// src/carousel-control.tsx
+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,
+      {
+        operation: "prev",
+        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,
+          {
+            __css: {
+              fontSize: "1.5em",
+              transform: orientation === "vertical" ? "rotate(180deg)" : "rotate(90deg)"
+            }
+          }
+        ),
+        ...getControlProps(rest, ref)
+      }
+    );
+  }
+);
+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,
+      {
+        operation: "next",
+        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,
+          {
+            __css: {
+              fontSize: "1.5em",
+              transform: orientation === "vertical" ? "rotate(0deg)" : "rotate(-90deg)"
+            }
+          }
+        ),
+        ...getControlProps(rest, ref)
+      }
+    );
+  }
+);
+var CarouselControl = (0, import_core2.forwardRef)(({ className, operation, ...rest }, ref) => {
+  const { styles } = useCarouselContext();
+  const colorScheme = (0, import_core2.useColorModeValue)("whiteAlpha", "blackAlpha");
+  const css = {
+    position: "absolute",
+    zIndex: "fallback(kurillin, 9)",
+    ...styles.control,
+    ...styles[operation]
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.IconButton,
+    {
+      ref,
+      className: (0, import_utils2.cx)("ui-carousel__control", className),
+      colorScheme,
+      isRounded: true,
+      __css: css,
+      ...rest
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CarouselControlNext,
+  CarouselControlPrev
+});
+//# sourceMappingURL=carousel-control.js.map

package/dist/carousel-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/carousel-control.tsx","../src/use-carousel.ts"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport { IconButton } from \"@yamada-ui/button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef, useColorModeValue } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCarouselContext, useCarouselControl } from \"./use-carousel\"\n\nexport type CarouselControlProps = IconButtonProps\n\nexport const CarouselControlPrev = forwardRef<CarouselControlProps, \"button\">(\n  ({ className, ...rest }, ref) => {\n    const { orientation } = useCarouselContext()\n\n    const { getControlProps } = useCarouselControl({ operation: \"prev\" })\n\n    return (\n      <CarouselControl\n        operation=\"prev\"\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        {...getControlProps(rest, ref)}\n      />\n    )\n  },\n)\n\nexport const CarouselControlNext = forwardRef<CarouselControlProps, \"button\">(\n  ({ className, ...rest }, ref) => {\n    const { orientation } = useCarouselContext()\n\n    const { getControlProps } = useCarouselControl({ operation: \"next\" })\n\n    return (\n      <CarouselControl\n        operation=\"next\"\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        {...getControlProps(rest, ref)}\n      />\n    )\n  },\n)\n\nconst CarouselControl = forwardRef<\n  CarouselControlProps & { operation: \"prev\" | \"next\" },\n  \"button\"\n>(({ className, operation, ...rest }, ref) => {\n  const { styles } = useCarouselContext()\n  const colorScheme = useColorModeValue(\"whiteAlpha\", \"blackAlpha\")\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={colorScheme}\n      isRounded\n      __css={css}\n      {...rest}\n    />\n  )\n})\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n  CSSUIObject,\n  HTMLUIProps,\n  CSSUIProps,\n  UIPropGetter,\n  RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  splitObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType } from \"embla-carousel-react\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\ntype CarouselContext = {\n  carousel: EmblaCarouselType | undefined\n  indexes: number[]\n  selectedIndex: number\n  orientation: \"vertical\" | \"horizontal\"\n  includeGapInSize: boolean\n  slidesToScroll: number\n  slideSize: string | number\n  gap: CSSUIProps[\"gap\"]\n  styles: Record<string, CSSUIObject>\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n  createContext<CarouselContext>({\n    name: \"CarouselContext\",\n    errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n  })\n\nexport type UseCarouselProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"onChange\" | \"draggable\" | \"gap\"\n> & {\n  /**\n   * The index of the carousel slide.\n   */\n  index?: number\n  /**\n   * The initial index of the carousel slide.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The callback invoked when carousel slide selected.\n   */\n  onChange?: (index: number) => void\n  /**\n   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: \"vertical\" | \"horizontal\"\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: \"start\" | \"center\" | \"end\" | number\n  /**\n   * Clear leading and trailing empty space that causes excessive scrolling.\n   * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n   *\n   * @default ''\n   */\n  containScroll?: \"trimSnaps\" | \"keepSnaps\" | \"\"\n  /**\n   * The number of slides that should be scrolled with next or previous buttons.\n   *\n   * @default 1\n   */\n  slidesToScroll?: number\n  /**\n   * If `true`, momentum scrolling will be enabled.\n   *\n   * @default false\n   */\n  dragFree?: boolean\n  /**\n   * If `true`, carousel can be scrolled with mouse and touch interactions.\n   *\n   * @default true\n   */\n  draggable?: boolean\n  /**\n   * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n   *\n   * @default 0\n   */\n  inViewThreshold?: number\n  /**\n   * If `true`, infinite looping.\n   * Automatically falls back to false if slide content isn't enough to loop.\n   *\n   * @default true\n   */\n  loop?: boolean\n  /**\n   * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n   * Note that this option will be ignored if the dragFree option is set to true.\n   *\n   * @default false\n   */\n  skipSnaps?: boolean\n  /**\n   * Adjusts scroll speed when triggered by any of the methods.\n   * Higher numbers enables faster scrolling.\n   *\n   * @default 10\n   */\n  speed?: number\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: number\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: boolean\n  /**\n   * If `true`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: boolean\n  /**\n   * If `true`, gap will be treated as part of the carousel slide size.\n   *\n   * @default true\n   */\n  includeGapInSize?: boolean\n  /**\n   * The CSS `gap` property.\n   *\n   * @default '4'\n   */\n  gap?: CSSUIProps[\"gap\"]\n  /**\n   * The carousel slide width.\n   *\n   * @default '100%'\n   */\n  slideSize?: string | number\n  /**\n   * A callback that return the current scroll amount when the carousel is scrolled.\n   */\n  onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n  index,\n  defaultIndex = 0,\n  onChange,\n  align = \"center\",\n  orientation = \"horizontal\",\n  autoplay = false,\n  stopMouseEnterAutoplay = true,\n  loop = true,\n  speed = 10,\n  delay = 4000,\n  gap = \"fallback(4, 1rem)\",\n  slidesToScroll = 1,\n  draggable = true,\n  dragFree = false,\n  inViewThreshold = 0,\n  skipSnaps = false,\n  containScroll = \"\",\n  slideSize = \"100%\",\n  includeGapInSize = true,\n  onScrollProgress,\n  children,\n  ...rest\n}: UseCarouselProps) => {\n  const computedProps = splitObject(rest, layoutStyleProperties)\n\n  const [selectedIndex, setSelectedIndex] = useControllableState({\n    value: index,\n    defaultValue: defaultIndex,\n    onChange,\n  })\n\n  const isVertical = orientation === \"vertical\"\n\n  const [carouselRef, carousel] = useEmblaCarousel({\n    axis: isVertical ? \"y\" : \"x\",\n    startIndex: defaultIndex,\n    loop,\n    align,\n    slidesToScroll,\n    draggable,\n    dragFree,\n    speed,\n    inViewThreshold,\n    skipSnaps,\n    containScroll,\n  })\n\n  const [indexes, setIndexes] = useState<number[]>([])\n  const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n  const timeoutId = useRef<any>(undefined)\n\n  const onScroll = useCallback(() => {\n    if (!carousel) return\n\n    const progress = Math.round(\n      Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n    )\n\n    onScrollProgress?.(progress)\n  }, [carousel, onScrollProgress])\n\n  const onSelect = useCallback(() => {\n    if (!carousel) return\n\n    const index = carousel.selectedScrollSnap()\n\n    setSelectedIndex(index)\n  }, [carousel, setSelectedIndex])\n\n  useEffect(() => {\n    const isStop = isMouseEnter && stopMouseEnterAutoplay\n    const isLast = !carousel?.canScrollNext()\n\n    if (carousel && autoplay && !isStop && !isLast) {\n      timeoutId.current = setInterval(() => {\n        carousel.scrollNext()\n      }, delay)\n    } else {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n\n      timeoutId.current = undefined\n    }\n\n    return () => {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n    }\n  }, [\n    autoplay,\n    delay,\n    stopMouseEnterAutoplay,\n    carousel,\n    isMouseEnter,\n    loop,\n    selectedIndex,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    carousel.reInit()\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [\n    Children.toArray(children).length,\n    align,\n    orientation,\n    loop,\n    speed,\n    gap,\n    slidesToScroll,\n    draggable,\n    dragFree,\n    inViewThreshold,\n    skipSnaps,\n    containScroll,\n    slideSize,\n    includeGapInSize,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [carousel])\n\n  useUpdateEffect(() => {\n    if (carousel) {\n      carousel.on(\"select\", onSelect)\n      carousel.on(\"scroll\", onScroll)\n\n      onScroll()\n\n      return () => {\n        carousel.off(\"select\", onSelect)\n        carousel.off(\"scroll\", onScroll)\n      }\n    }\n  }, [carousel, onScroll])\n\n  const getContainerProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...computedProps[0],\n      ...props,\n      ref,\n      onMouseEnter: handlerAll(props.onMouseEnter, () => {\n        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(false)\n      }),\n    }),\n    [computedProps],\n  )\n\n  const getSlidesProps: UIPropGetter = useCallback(\n    (props = {}) => ({\n      ...computedProps[1],\n      ...props,\n      ref: carouselRef,\n    }),\n    [computedProps, carouselRef],\n  )\n\n  return {\n    carousel,\n    children,\n    indexes,\n    selectedIndex,\n    orientation,\n    slideSize,\n    gap,\n    slidesToScroll,\n    includeGapInSize,\n    getContainerProps,\n    getSlidesProps,\n  }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport type UseCarouselSlideProps = {\n  index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n  const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n  index = Math.floor((index ?? 0) / (slidesToScroll ?? 1))\n\n  const isSelected = index === selectedIndex\n\n  const getSlideProps: UIPropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      \"data-index\": index,\n      \"data-selected\": dataAttr(isSelected),\n    }),\n    [isSelected, index],\n  )\n\n  return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport type UseCarouselControlProps = IconButtonProps & {\n  operation: \"prev\" | \"next\"\n}\n\nexport const useCarouselControl = ({\n  operation,\n  ...rest\n}: UseCarouselControlProps) => {\n  const { carousel } = useCarouselContext()\n\n  const isPrev = operation === \"prev\"\n\n  const disabled =\n    rest.disabled ??\n    rest.isDisabled ??\n    (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n  const onClick = useCallback(() => {\n    if (!carousel) return\n\n    if (isPrev) {\n      carousel.scrollPrev()\n    } else {\n      carousel.scrollNext()\n    }\n  }, [carousel, isPrev])\n\n  const getControlProps: UIPropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n    }),\n    [disabled, onClick],\n  )\n\n  return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n  const { selectedIndex, carousel, indexes } = useCarouselContext()\n\n  const onClick = useCallback(\n    (ev: MouseEvent, index: number) => {\n      if (!carousel) return\n\n      ev.stopPropagation()\n\n      carousel.scrollTo(index)\n    },\n    [carousel],\n  )\n\n  const getIndicatorProps: RequiredUIPropGetter<\"button\", { index: number }> =\n    useCallback(\n      ({ index, ...props }) => {\n        const isSelected = index === selectedIndex\n\n        return {\n          \"aria-label\": `Go to ${index + 1} slide`,\n          ...props,\n          key: index,\n          \"data-index\": index,\n          \"data-selected\": dataAttr(isSelected),\n          onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n        }\n      },\n      [onClick, selectedIndex],\n    )\n\n  return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n  typeof useCarouselIndicators\n>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAA2B;AAE3B,IAAAA,eAA8C;AAC9C,kBAA4B;AAC5B,IAAAC,gBAAmB;;;ACGnB,kBAAsC;AACtC,oCAAqC;AACrC,mBAMO;AAEP,kCAA6B;AAE7B,mBAAmE;AAc5D,IAAM,CAAC,kBAAkB,kBAAkB,QAChD,4BAA+B;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAuVI,IAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,GAAG;AACL,MAA+B;AAhY/B;AAiYE,QAAM,EAAE,SAAS,IAAI,mBAAmB;AAExC,QAAM,SAAS,cAAc;AAE7B,QAAM,YACJ,gBAAK,aAAL,YACA,KAAK,eADL,YAEC,SAAS,EAAC,qCAAU,mBAAkB,EAAC,qCAAU;AAEpD,QAAM,cAAU,0BAAY,MAAM;AAChC,QAAI,CAAC;AAAU;AAEf,QAAI,QAAQ;AACV,eAAS,WAAW;AAAA,IACtB,OAAO;AACL,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,CAAC;AAErB,QAAM,sBAA0C;AAAA,IAC9C,CAAC,QAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,aAAS,yBAAW,MAAM,SAAS,OAAO;AAAA,IAC5C;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EACpB;AAEA,SAAO,EAAE,gBAAgB;AAC3B;;;ADzYU;AAZH,IAAM,0BAAsB;AAAA,EACjC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,YAAY,IAAI,mBAAmB;AAE3C,UAAM,EAAE,gBAAgB,IAAI,mBAAmB,EAAE,WAAW,OAAO,CAAC;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAW,kBAAG,8BAA8B,SAAS;AAAA,QACrD,cAAW;AAAA,QACX,MACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,WACE,gBAAgB,aAAa,mBAAmB;AAAA,YACpD;AAAA;AAAA,QACF;AAAA,QAED,GAAG,gBAAgB,MAAM,GAAG;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEO,IAAM,0BAAsB;AAAA,EACjC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,YAAY,IAAI,mBAAmB;AAE3C,UAAM,EAAE,gBAAgB,IAAI,mBAAmB,EAAE,WAAW,OAAO,CAAC;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAW,kBAAG,8BAA8B,SAAS;AAAA,QACrD,cAAW;AAAA,QACX,MACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,WACE,gBAAgB,aAAa,iBAAiB;AAAA,YAClD;AAAA;AAAA,QACF;AAAA,QAED,GAAG,gBAAgB,MAAM,GAAG;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEA,IAAM,sBAAkB,yBAGtB,CAAC,EAAE,WAAW,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC5C,QAAM,EAAE,OAAO,IAAI,mBAAmB;AACtC,QAAM,kBAAc,gCAAkB,cAAc,YAAY;AAEhE,QAAM,MAAmB;AAAA,IACvB,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,GAAG,OAAO;AAAA,IACV,GAAG,OAAO,SAAS;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW,kBAAG,wBAAwB,SAAS;AAAA,MAC/C;AAAA,MACA,WAAS;AAAA,MACT,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["import_core","import_utils"]}

package/dist/carousel-control.mjs

@@ -0,0 +1,11 @@
+"use client"
+import {
+  CarouselControlNext,
+  CarouselControlPrev
+} from "./chunk-DDY7Q2IV.mjs";
+import "./chunk-QQ2HS4J4.mjs";
+export {
+  CarouselControlNext,
+  CarouselControlPrev
+};
+//# sourceMappingURL=carousel-control.mjs.map

package/dist/carousel-control.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/carousel-indicators.d.mts

@@ -0,0 +1,17 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { FC } from 'react';
+
+type CarouselIndicatorsOptions = {
+    /**
+     * The custom caroucel indicator to use.
+     */
+    component?: FC<{
+        index: number;
+        isSelected: boolean;
+    }>;
+};
+type CarouselIndicatorsProps = Omit<HTMLUIProps<"div">, "children"> & CarouselIndicatorsOptions;
+declare const CarouselIndicators: _yamada_ui_core.Component<"div", CarouselIndicatorsProps>;
+
+export { CarouselIndicators, type CarouselIndicatorsProps };

package/dist/carousel-indicators.d.ts

@@ -0,0 +1,17 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { FC } from 'react';
+
+type CarouselIndicatorsOptions = {
+    /**
+     * The custom caroucel indicator to use.
+     */
+    component?: FC<{
+        index: number;
+        isSelected: boolean;
+    }>;
+};
+type CarouselIndicatorsProps = Omit<HTMLUIProps<"div">, "children"> & CarouselIndicatorsOptions;
+declare const CarouselIndicators: _yamada_ui_core.Component<"div", CarouselIndicatorsProps>;
+
+export { CarouselIndicators, type CarouselIndicatorsProps };

package/dist/carousel-indicators.js

@@ -0,0 +1,141 @@
+"use client"
+"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/carousel-indicators.tsx
+var carousel_indicators_exports = {};
+__export(carousel_indicators_exports, {
+  CarouselIndicators: () => CarouselIndicators
+});
+module.exports = __toCommonJS(carousel_indicators_exports);
+var import_core2 = require("@yamada-ui/core");
+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 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 {
+        "aria-label": `Go to ${index + 1} slide`,
+        ...props,
+        key: index,
+        "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-indicators.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CarouselIndicators = (0, import_core2.forwardRef)(
+  ({ className, component, ...rest }, ref) => {
+    const { selectedIndex, orientation, styles } = useCarouselContext();
+    const { indexes, getIndicatorProps } = useCarouselIndicators();
+    const css = {
+      position: "absolute",
+      zIndex: "fallback(kurillin, 9)",
+      display: "flex",
+      justifyContent: "center",
+      ...styles.indicators,
+      ...orientation === "vertical" ? { flexDirection: "column" } : { flexDirection: "row" }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core2.ui.div,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-carousel__indicators", className),
+        __css: css,
+        ...rest,
+        children: indexes.map((index) => {
+          const isSelected = index === selectedIndex;
+          if (typeof component === "function") {
+            const child = component({
+              index,
+              isSelected
+            });
+            if (!child)
+              return null;
+            const props = getIndicatorProps({ ...child.props, index });
+            return (0, import_react2.cloneElement)(child, props);
+          } else {
+            const { key, ...props } = getIndicatorProps({ index });
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselIndicator, { ...props }, key);
+          }
+        })
+      }
+    );
+  }
+);
+var CarouselIndicator = ({
+  className,
+  ...rest
+}) => {
+  const { styles } = useCarouselContext();
+  const css = { ...styles.indicator };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core2.ui.button,
+    {
+      type: "button",
+      tabIndex: -1,
+      className: (0, import_utils2.cx)("ui-carousel__indicator", className),
+      __css: css,
+      ...rest
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CarouselIndicators
+});
+//# sourceMappingURL=carousel-indicators.js.map

package/dist/carousel-indicators.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/carousel-indicators.tsx","../src/use-carousel.ts"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { FC, ReactElement } from \"react\"\nimport { cloneElement } from \"react\"\nimport { useCarouselContext, useCarouselIndicators } from \"./use-carousel\"\n\ntype CarouselIndicatorsOptions = {\n  /**\n   * The custom caroucel indicator to use.\n   */\n  component?: FC<{ index: number; isSelected: boolean }>\n}\n\nexport type CarouselIndicatorsProps = Omit<HTMLUIProps<\"div\">, \"children\"> &\n  CarouselIndicatorsOptions\n\nexport const CarouselIndicators = forwardRef<CarouselIndicatorsProps, \"div\">(\n  ({ className, component, ...rest }, ref) => {\n    const { selectedIndex, orientation, styles } = useCarouselContext()\n\n    const { indexes, getIndicatorProps } = useCarouselIndicators()\n\n    const css: CSSUIObject = {\n      position: \"absolute\",\n      zIndex: \"fallback(kurillin, 9)\",\n      display: \"flex\",\n      justifyContent: \"center\",\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 ReactElement | null\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\ntype CarouselIndicatorProps = 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      tabIndex={-1}\n      className={cx(\"ui-carousel__indicator\", className)}\n      __css={css}\n      {...rest}\n    />\n  )\n}\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n  CSSUIObject,\n  HTMLUIProps,\n  CSSUIProps,\n  UIPropGetter,\n  RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  splitObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType } from \"embla-carousel-react\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\ntype CarouselContext = {\n  carousel: EmblaCarouselType | undefined\n  indexes: number[]\n  selectedIndex: number\n  orientation: \"vertical\" | \"horizontal\"\n  includeGapInSize: boolean\n  slidesToScroll: number\n  slideSize: string | number\n  gap: CSSUIProps[\"gap\"]\n  styles: Record<string, CSSUIObject>\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n  createContext<CarouselContext>({\n    name: \"CarouselContext\",\n    errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n  })\n\nexport type UseCarouselProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"onChange\" | \"draggable\" | \"gap\"\n> & {\n  /**\n   * The index of the carousel slide.\n   */\n  index?: number\n  /**\n   * The initial index of the carousel slide.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The callback invoked when carousel slide selected.\n   */\n  onChange?: (index: number) => void\n  /**\n   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: \"vertical\" | \"horizontal\"\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: \"start\" | \"center\" | \"end\" | number\n  /**\n   * Clear leading and trailing empty space that causes excessive scrolling.\n   * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n   *\n   * @default ''\n   */\n  containScroll?: \"trimSnaps\" | \"keepSnaps\" | \"\"\n  /**\n   * The number of slides that should be scrolled with next or previous buttons.\n   *\n   * @default 1\n   */\n  slidesToScroll?: number\n  /**\n   * If `true`, momentum scrolling will be enabled.\n   *\n   * @default false\n   */\n  dragFree?: boolean\n  /**\n   * If `true`, carousel can be scrolled with mouse and touch interactions.\n   *\n   * @default true\n   */\n  draggable?: boolean\n  /**\n   * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n   *\n   * @default 0\n   */\n  inViewThreshold?: number\n  /**\n   * If `true`, infinite looping.\n   * Automatically falls back to false if slide content isn't enough to loop.\n   *\n   * @default true\n   */\n  loop?: boolean\n  /**\n   * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n   * Note that this option will be ignored if the dragFree option is set to true.\n   *\n   * @default false\n   */\n  skipSnaps?: boolean\n  /**\n   * Adjusts scroll speed when triggered by any of the methods.\n   * Higher numbers enables faster scrolling.\n   *\n   * @default 10\n   */\n  speed?: number\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: number\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: boolean\n  /**\n   * If `true`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: boolean\n  /**\n   * If `true`, gap will be treated as part of the carousel slide size.\n   *\n   * @default true\n   */\n  includeGapInSize?: boolean\n  /**\n   * The CSS `gap` property.\n   *\n   * @default '4'\n   */\n  gap?: CSSUIProps[\"gap\"]\n  /**\n   * The carousel slide width.\n   *\n   * @default '100%'\n   */\n  slideSize?: string | number\n  /**\n   * A callback that return the current scroll amount when the carousel is scrolled.\n   */\n  onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n  index,\n  defaultIndex = 0,\n  onChange,\n  align = \"center\",\n  orientation = \"horizontal\",\n  autoplay = false,\n  stopMouseEnterAutoplay = true,\n  loop = true,\n  speed = 10,\n  delay = 4000,\n  gap = \"fallback(4, 1rem)\",\n  slidesToScroll = 1,\n  draggable = true,\n  dragFree = false,\n  inViewThreshold = 0,\n  skipSnaps = false,\n  containScroll = \"\",\n  slideSize = \"100%\",\n  includeGapInSize = true,\n  onScrollProgress,\n  children,\n  ...rest\n}: UseCarouselProps) => {\n  const computedProps = splitObject(rest, layoutStyleProperties)\n\n  const [selectedIndex, setSelectedIndex] = useControllableState({\n    value: index,\n    defaultValue: defaultIndex,\n    onChange,\n  })\n\n  const isVertical = orientation === \"vertical\"\n\n  const [carouselRef, carousel] = useEmblaCarousel({\n    axis: isVertical ? \"y\" : \"x\",\n    startIndex: defaultIndex,\n    loop,\n    align,\n    slidesToScroll,\n    draggable,\n    dragFree,\n    speed,\n    inViewThreshold,\n    skipSnaps,\n    containScroll,\n  })\n\n  const [indexes, setIndexes] = useState<number[]>([])\n  const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n  const timeoutId = useRef<any>(undefined)\n\n  const onScroll = useCallback(() => {\n    if (!carousel) return\n\n    const progress = Math.round(\n      Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n    )\n\n    onScrollProgress?.(progress)\n  }, [carousel, onScrollProgress])\n\n  const onSelect = useCallback(() => {\n    if (!carousel) return\n\n    const index = carousel.selectedScrollSnap()\n\n    setSelectedIndex(index)\n  }, [carousel, setSelectedIndex])\n\n  useEffect(() => {\n    const isStop = isMouseEnter && stopMouseEnterAutoplay\n    const isLast = !carousel?.canScrollNext()\n\n    if (carousel && autoplay && !isStop && !isLast) {\n      timeoutId.current = setInterval(() => {\n        carousel.scrollNext()\n      }, delay)\n    } else {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n\n      timeoutId.current = undefined\n    }\n\n    return () => {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n    }\n  }, [\n    autoplay,\n    delay,\n    stopMouseEnterAutoplay,\n    carousel,\n    isMouseEnter,\n    loop,\n    selectedIndex,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    carousel.reInit()\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [\n    Children.toArray(children).length,\n    align,\n    orientation,\n    loop,\n    speed,\n    gap,\n    slidesToScroll,\n    draggable,\n    dragFree,\n    inViewThreshold,\n    skipSnaps,\n    containScroll,\n    slideSize,\n    includeGapInSize,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [carousel])\n\n  useUpdateEffect(() => {\n    if (carousel) {\n      carousel.on(\"select\", onSelect)\n      carousel.on(\"scroll\", onScroll)\n\n      onScroll()\n\n      return () => {\n        carousel.off(\"select\", onSelect)\n        carousel.off(\"scroll\", onScroll)\n      }\n    }\n  }, [carousel, onScroll])\n\n  const getContainerProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...computedProps[0],\n      ...props,\n      ref,\n      onMouseEnter: handlerAll(props.onMouseEnter, () => {\n        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(false)\n      }),\n    }),\n    [computedProps],\n  )\n\n  const getSlidesProps: UIPropGetter = useCallback(\n    (props = {}) => ({\n      ...computedProps[1],\n      ...props,\n      ref: carouselRef,\n    }),\n    [computedProps, carouselRef],\n  )\n\n  return {\n    carousel,\n    children,\n    indexes,\n    selectedIndex,\n    orientation,\n    slideSize,\n    gap,\n    slidesToScroll,\n    includeGapInSize,\n    getContainerProps,\n    getSlidesProps,\n  }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport type UseCarouselSlideProps = {\n  index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n  const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n  index = Math.floor((index ?? 0) / (slidesToScroll ?? 1))\n\n  const isSelected = index === selectedIndex\n\n  const getSlideProps: UIPropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      \"data-index\": index,\n      \"data-selected\": dataAttr(isSelected),\n    }),\n    [isSelected, index],\n  )\n\n  return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport type UseCarouselControlProps = IconButtonProps & {\n  operation: \"prev\" | \"next\"\n}\n\nexport const useCarouselControl = ({\n  operation,\n  ...rest\n}: UseCarouselControlProps) => {\n  const { carousel } = useCarouselContext()\n\n  const isPrev = operation === \"prev\"\n\n  const disabled =\n    rest.disabled ??\n    rest.isDisabled ??\n    (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n  const onClick = useCallback(() => {\n    if (!carousel) return\n\n    if (isPrev) {\n      carousel.scrollPrev()\n    } else {\n      carousel.scrollNext()\n    }\n  }, [carousel, isPrev])\n\n  const getControlProps: UIPropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n    }),\n    [disabled, onClick],\n  )\n\n  return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n  const { selectedIndex, carousel, indexes } = useCarouselContext()\n\n  const onClick = useCallback(\n    (ev: MouseEvent, index: number) => {\n      if (!carousel) return\n\n      ev.stopPropagation()\n\n      carousel.scrollTo(index)\n    },\n    [carousel],\n  )\n\n  const getIndicatorProps: RequiredUIPropGetter<\"button\", { index: number }> =\n    useCallback(\n      ({ index, ...props }) => {\n        const isSelected = index === selectedIndex\n\n        return {\n          \"aria-label\": `Go to ${index + 1} slide`,\n          ...props,\n          key: index,\n          \"data-index\": index,\n          \"data-selected\": dataAttr(isSelected),\n          onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n        }\n      },\n      [onClick, selectedIndex],\n    )\n\n  return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n  typeof useCarouselIndicators\n>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,eAA+B;AAC/B,IAAAC,gBAAmB;AAEnB,IAAAC,gBAA6B;;;ACI7B,kBAAsC;AACtC,oCAAqC;AACrC,mBAMO;AAEP,kCAA6B;AAE7B,mBAAmE;AAc5D,IAAM,CAAC,kBAAkB,kBAAkB,QAChD,4BAA+B;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA6XI,IAAM,wBAAwB,MAAM;AACzC,QAAM,EAAE,eAAe,UAAU,QAAQ,IAAI,mBAAmB;AAEhE,QAAM,cAAU;AAAA,IACd,CAAC,IAAgB,UAAkB;AACjC,UAAI,CAAC;AAAU;AAEf,SAAG,gBAAgB;AAEnB,eAAS,SAAS,KAAK;AAAA,IACzB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,wBACJ;AAAA,IACE,CAAC,EAAE,OAAO,GAAG,MAAM,MAAM;AACvB,YAAM,aAAa,UAAU;AAE7B,aAAO;AAAA,QACL,cAAc,SAAS,QAAQ,CAAC;AAAA,QAChC,GAAG;AAAA,QACH,KAAK;AAAA,QACL,cAAc;AAAA,QACd,qBAAiB,uBAAS,UAAU;AAAA,QACpC,aAAS,yBAAW,MAAM,SAAS,CAAC,OAAO,QAAQ,IAAI,KAAK,CAAC;AAAA,MAC/D;AAAA,IACF;AAAA,IACA,CAAC,SAAS,aAAa;AAAA,EACzB;AAEF,SAAO,EAAE,SAAS,kBAAkB;AACtC;;;ADzYmB;AAzCZ,IAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,WAAW,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC1C,UAAM,EAAE,eAAe,aAAa,OAAO,IAAI,mBAAmB;AAElE,UAAM,EAAE,SAAS,kBAAkB,IAAI,sBAAsB;AAE7D,UAAM,MAAmB;AAAA,MACvB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,GAAG,OAAO;AAAA,MACV,GAAI,gBAAgB,aAChB,EAAE,eAAe,SAAS,IAC1B,EAAE,eAAe,MAAM;AAAA,IAC7B;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,2BAA2B,SAAS;AAAA,QAClD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,kBAAQ,IAAI,CAAC,UAAU;AACtB,gBAAM,aAAa,UAAU;AAE7B,cAAI,OAAO,cAAc,YAAY;AACnC,kBAAM,QAAQ,UAAU;AAAA,cACtB;AAAA,cACA;AAAA,YACF,CAAC;AAED,gBAAI,CAAC;AAAO,qBAAO;AAEnB,kBAAM,QAAQ,kBAAkB,EAAE,GAAG,MAAM,OAAO,MAAM,CAAC;AAEzD,uBAAO,4BAAa,OAAuB,KAAK;AAAA,UAClD,OAAO;AACL,kBAAM,EAAE,KAAK,GAAG,MAAM,IAAI,kBAAkB,EAAE,MAAM,CAAC;AAErD,mBAAO,4CAAC,qBAA6B,GAAG,SAAT,GAAgB;AAAA,UACjD;AAAA,QACF,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAIA,IAAM,oBAAgD,CAAC;AAAA,EACrD;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,IAAI,mBAAmB;AAEtC,QAAM,MAAmB,EAAE,GAAG,OAAO,UAAU;AAE/C,SACE;AAAA,IAAC,gBAAG;AAAA,IAAH;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,eAAW,kBAAG,0BAA0B,SAAS;AAAA,MACjD,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;","names":["import_core","import_utils","import_react"]}

package/dist/carousel-indicators.mjs

@@ -0,0 +1,9 @@
+"use client"
+import {
+  CarouselIndicators
+} from "./chunk-IKJXFLRJ.mjs";
+import "./chunk-QQ2HS4J4.mjs";
+export {
+  CarouselIndicators
+};
+//# sourceMappingURL=carousel-indicators.mjs.map

package/dist/carousel-indicators.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/carousel-slide.d.mts

@@ -0,0 +1,17 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, CSSUIObject } from '@yamada-ui/core';
+import { UseCarouselSlideProps } from './use-carousel.mjs';
+import 'react';
+import '@yamada-ui/button';
+import 'embla-carousel-react';
+
+type CarouselSlideOptions = {
+    /**
+     * The CSS `width` property.
+     */
+    size?: CSSUIObject["width"];
+};
+type CarouselSlideProps = HTMLUIProps<"div"> & UseCarouselSlideProps & CarouselSlideOptions;
+declare const CarouselSlide: _yamada_ui_core.Component<"div", CarouselSlideProps>;
+
+export { CarouselSlide, type CarouselSlideProps };

package/dist/carousel-slide.d.ts

@@ -0,0 +1,17 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, CSSUIObject } from '@yamada-ui/core';
+import { UseCarouselSlideProps } from './use-carousel.js';
+import 'react';
+import '@yamada-ui/button';
+import 'embla-carousel-react';
+
+type CarouselSlideOptions = {
+    /**
+     * The CSS `width` property.
+     */
+    size?: CSSUIObject["width"];
+};
+type CarouselSlideProps = HTMLUIProps<"div"> & UseCarouselSlideProps & CarouselSlideOptions;
+declare const CarouselSlide: _yamada_ui_core.Component<"div", CarouselSlideProps>;
+
+export { CarouselSlide, type CarouselSlideProps };

package/dist/carousel-slide.js

@@ -0,0 +1,106 @@
+"use client"
+"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/carousel-slide.tsx
+var carousel_slide_exports = {};
+__export(carousel_slide_exports, {
+  CarouselSlide: () => CarouselSlide
+});
+module.exports = __toCommonJS(carousel_slide_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+
+// 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 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,
+      "data-index": index,
+      "data-selected": (0, import_utils.dataAttr)(isSelected)
+    }),
+    [isSelected, index]
+  );
+  return { getSlideProps };
+};
+
+// src/carousel-slide.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CarouselSlide = (0, import_core2.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_runtime.jsx)(
+      import_core2.ui.div,
+      {
+        className: (0, import_utils2.cx)("ui-carousel__slide", className),
+        __css: css,
+        ...getSlideProps({}),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselSlideInner, { ref, ...rest })
+      }
+    );
+  }
+);
+var CarouselSlideInner = (0, import_core2.forwardRef)(
+  ({ ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core2.ui.div,
+      {
+        ref,
+        className: "ui-carousel__slide__inner",
+        w: "100%",
+        h: "100%",
+        ...rest
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CarouselSlide
+});
+//# sourceMappingURL=carousel-slide.js.map

package/dist/carousel-slide.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/carousel-slide.tsx","../src/use-carousel.ts"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { UseCarouselSlideProps } from \"./use-carousel\"\nimport { useCarouselContext, useCarouselSlide } from \"./use-carousel\"\n\ntype CarouselSlideOptions = {\n  /**\n   * The CSS `width` property.\n   */\n  size?: CSSUIObject[\"width\"]\n}\n\nexport type CarouselSlideProps = HTMLUIProps<\"div\"> &\n  UseCarouselSlideProps &\n  CarouselSlideOptions\n\nexport const CarouselSlide = forwardRef<CarouselSlideProps, \"div\">(\n  ({ className, size, ...rest }, ref) => {\n    const { slideSize, includeGapInSize, orientation, gap } =\n      useCarouselContext()\n\n    const { getSlideProps } = useCarouselSlide(rest)\n\n    size ??= slideSize\n\n    const css: CSSUIObject = {\n      position: \"relative\",\n      flex: `0 0 ${size}`,\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\ntype CarouselSlideInnerProps = HTMLUIProps<\"div\">\n\nconst CarouselSlideInner = forwardRef<CarouselSlideInnerProps, \"div\">(\n  ({ ...rest }, ref) => {\n    return (\n      <ui.div\n        ref={ref}\n        className=\"ui-carousel__slide__inner\"\n        w=\"100%\"\n        h=\"100%\"\n        {...rest}\n      />\n    )\n  },\n)\n","import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n  CSSUIObject,\n  HTMLUIProps,\n  CSSUIProps,\n  UIPropGetter,\n  RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  splitObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType } from \"embla-carousel-react\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\ntype CarouselContext = {\n  carousel: EmblaCarouselType | undefined\n  indexes: number[]\n  selectedIndex: number\n  orientation: \"vertical\" | \"horizontal\"\n  includeGapInSize: boolean\n  slidesToScroll: number\n  slideSize: string | number\n  gap: CSSUIProps[\"gap\"]\n  styles: Record<string, CSSUIObject>\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n  createContext<CarouselContext>({\n    name: \"CarouselContext\",\n    errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n  })\n\nexport type UseCarouselProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"onChange\" | \"draggable\" | \"gap\"\n> & {\n  /**\n   * The index of the carousel slide.\n   */\n  index?: number\n  /**\n   * The initial index of the carousel slide.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The callback invoked when carousel slide selected.\n   */\n  onChange?: (index: number) => void\n  /**\n   * The orientation of the carousel.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: \"vertical\" | \"horizontal\"\n  /**\n   * The alignment of the carousel.\n   *\n   * @default 'center'\n   */\n  align?: \"start\" | \"center\" | \"end\" | number\n  /**\n   * Clear leading and trailing empty space that causes excessive scrolling.\n   * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n   *\n   * @default ''\n   */\n  containScroll?: \"trimSnaps\" | \"keepSnaps\" | \"\"\n  /**\n   * The number of slides that should be scrolled with next or previous buttons.\n   *\n   * @default 1\n   */\n  slidesToScroll?: number\n  /**\n   * If `true`, momentum scrolling will be enabled.\n   *\n   * @default false\n   */\n  dragFree?: boolean\n  /**\n   * If `true`, carousel can be scrolled with mouse and touch interactions.\n   *\n   * @default true\n   */\n  draggable?: boolean\n  /**\n   * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n   *\n   * @default 0\n   */\n  inViewThreshold?: number\n  /**\n   * If `true`, infinite looping.\n   * Automatically falls back to false if slide content isn't enough to loop.\n   *\n   * @default true\n   */\n  loop?: boolean\n  /**\n   * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n   * Note that this option will be ignored if the dragFree option is set to true.\n   *\n   * @default false\n   */\n  skipSnaps?: boolean\n  /**\n   * Adjusts scroll speed when triggered by any of the methods.\n   * Higher numbers enables faster scrolling.\n   *\n   * @default 10\n   */\n  speed?: number\n  /**\n   * The number for the autoplay interval of the carousel.\n   *\n   * @default 4000\n   */\n  delay?: number\n  /**\n   * If `true`, the carousel will be autoplay.\n   *\n   * @default false\n   */\n  autoplay?: boolean\n  /**\n   * If `true`, autoplay will pause when the mouse entries over.\n   *\n   * @default true\n   */\n  stopMouseEnterAutoplay?: boolean\n  /**\n   * If `true`, gap will be treated as part of the carousel slide size.\n   *\n   * @default true\n   */\n  includeGapInSize?: boolean\n  /**\n   * The CSS `gap` property.\n   *\n   * @default '4'\n   */\n  gap?: CSSUIProps[\"gap\"]\n  /**\n   * The carousel slide width.\n   *\n   * @default '100%'\n   */\n  slideSize?: string | number\n  /**\n   * A callback that return the current scroll amount when the carousel is scrolled.\n   */\n  onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n  index,\n  defaultIndex = 0,\n  onChange,\n  align = \"center\",\n  orientation = \"horizontal\",\n  autoplay = false,\n  stopMouseEnterAutoplay = true,\n  loop = true,\n  speed = 10,\n  delay = 4000,\n  gap = \"fallback(4, 1rem)\",\n  slidesToScroll = 1,\n  draggable = true,\n  dragFree = false,\n  inViewThreshold = 0,\n  skipSnaps = false,\n  containScroll = \"\",\n  slideSize = \"100%\",\n  includeGapInSize = true,\n  onScrollProgress,\n  children,\n  ...rest\n}: UseCarouselProps) => {\n  const computedProps = splitObject(rest, layoutStyleProperties)\n\n  const [selectedIndex, setSelectedIndex] = useControllableState({\n    value: index,\n    defaultValue: defaultIndex,\n    onChange,\n  })\n\n  const isVertical = orientation === \"vertical\"\n\n  const [carouselRef, carousel] = useEmblaCarousel({\n    axis: isVertical ? \"y\" : \"x\",\n    startIndex: defaultIndex,\n    loop,\n    align,\n    slidesToScroll,\n    draggable,\n    dragFree,\n    speed,\n    inViewThreshold,\n    skipSnaps,\n    containScroll,\n  })\n\n  const [indexes, setIndexes] = useState<number[]>([])\n  const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n  const timeoutId = useRef<any>(undefined)\n\n  const onScroll = useCallback(() => {\n    if (!carousel) return\n\n    const progress = Math.round(\n      Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n    )\n\n    onScrollProgress?.(progress)\n  }, [carousel, onScrollProgress])\n\n  const onSelect = useCallback(() => {\n    if (!carousel) return\n\n    const index = carousel.selectedScrollSnap()\n\n    setSelectedIndex(index)\n  }, [carousel, setSelectedIndex])\n\n  useEffect(() => {\n    const isStop = isMouseEnter && stopMouseEnterAutoplay\n    const isLast = !carousel?.canScrollNext()\n\n    if (carousel && autoplay && !isStop && !isLast) {\n      timeoutId.current = setInterval(() => {\n        carousel.scrollNext()\n      }, delay)\n    } else {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n\n      timeoutId.current = undefined\n    }\n\n    return () => {\n      if (timeoutId.current) clearInterval(timeoutId.current)\n    }\n  }, [\n    autoplay,\n    delay,\n    stopMouseEnterAutoplay,\n    carousel,\n    isMouseEnter,\n    loop,\n    selectedIndex,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    carousel.reInit()\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [\n    Children.toArray(children).length,\n    align,\n    orientation,\n    loop,\n    speed,\n    gap,\n    slidesToScroll,\n    draggable,\n    dragFree,\n    inViewThreshold,\n    skipSnaps,\n    containScroll,\n    slideSize,\n    includeGapInSize,\n  ])\n\n  useUpdateEffect(() => {\n    if (!carousel) return\n\n    const snapList = carousel.scrollSnapList()\n    const indexes = snapList.map((_, i) => i)\n\n    setIndexes(indexes)\n  }, [carousel])\n\n  useUpdateEffect(() => {\n    if (carousel) {\n      carousel.on(\"select\", onSelect)\n      carousel.on(\"scroll\", onScroll)\n\n      onScroll()\n\n      return () => {\n        carousel.off(\"select\", onSelect)\n        carousel.off(\"scroll\", onScroll)\n      }\n    }\n  }, [carousel, onScroll])\n\n  const getContainerProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...computedProps[0],\n      ...props,\n      ref,\n      onMouseEnter: handlerAll(props.onMouseEnter, () => {\n        setIsMouseEnter(true)\n      }),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => {\n        setIsMouseEnter(false)\n      }),\n    }),\n    [computedProps],\n  )\n\n  const getSlidesProps: UIPropGetter = useCallback(\n    (props = {}) => ({\n      ...computedProps[1],\n      ...props,\n      ref: carouselRef,\n    }),\n    [computedProps, carouselRef],\n  )\n\n  return {\n    carousel,\n    children,\n    indexes,\n    selectedIndex,\n    orientation,\n    slideSize,\n    gap,\n    slidesToScroll,\n    includeGapInSize,\n    getContainerProps,\n    getSlidesProps,\n  }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport type UseCarouselSlideProps = {\n  index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n  const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n  index = Math.floor((index ?? 0) / (slidesToScroll ?? 1))\n\n  const isSelected = index === selectedIndex\n\n  const getSlideProps: UIPropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      \"data-index\": index,\n      \"data-selected\": dataAttr(isSelected),\n    }),\n    [isSelected, index],\n  )\n\n  return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport type UseCarouselControlProps = IconButtonProps & {\n  operation: \"prev\" | \"next\"\n}\n\nexport const useCarouselControl = ({\n  operation,\n  ...rest\n}: UseCarouselControlProps) => {\n  const { carousel } = useCarouselContext()\n\n  const isPrev = operation === \"prev\"\n\n  const disabled =\n    rest.disabled ??\n    rest.isDisabled ??\n    (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n  const onClick = useCallback(() => {\n    if (!carousel) return\n\n    if (isPrev) {\n      carousel.scrollPrev()\n    } else {\n      carousel.scrollNext()\n    }\n  }, [carousel, isPrev])\n\n  const getControlProps: UIPropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      disabled,\n      onClick: handlerAll(props.onClick, onClick),\n    }),\n    [disabled, onClick],\n  )\n\n  return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n  const { selectedIndex, carousel, indexes } = useCarouselContext()\n\n  const onClick = useCallback(\n    (ev: MouseEvent, index: number) => {\n      if (!carousel) return\n\n      ev.stopPropagation()\n\n      carousel.scrollTo(index)\n    },\n    [carousel],\n  )\n\n  const getIndicatorProps: RequiredUIPropGetter<\"button\", { index: number }> =\n    useCallback(\n      ({ index, ...props }) => {\n        const isSelected = index === selectedIndex\n\n        return {\n          \"aria-label\": `Go to ${index + 1} slide`,\n          ...props,\n          key: index,\n          \"data-index\": index,\n          \"data-selected\": dataAttr(isSelected),\n          onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n        }\n      },\n      [onClick, selectedIndex],\n    )\n\n  return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n  typeof useCarouselIndicators\n>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,eAA+B;AAC/B,IAAAC,gBAAmB;;;ACMnB,kBAAsC;AACtC,oCAAqC;AACrC,mBAMO;AAEP,kCAA6B;AAE7B,mBAAmE;AAc5D,IAAM,CAAC,kBAAkB,kBAAkB,QAChD,4BAA+B;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA8TI,IAAM,mBAAmB,CAAC,EAAE,MAAM,MAA6B;AACpE,QAAM,EAAE,eAAe,eAAe,IAAI,mBAAmB;AAE7D,UAAQ,KAAK,OAAO,wBAAS,MAAM,0CAAkB,EAAE;AAEvD,QAAM,aAAa,UAAU;AAE7B,QAAM,oBAA8B;AAAA,IAClC,CAAC,QAAQ,CAAC,OAAO;AAAA,MACf,GAAG;AAAA,MACH,cAAc;AAAA,MACd,qBAAiB,uBAAS,UAAU;AAAA,IACtC;AAAA,IACA,CAAC,YAAY,KAAK;AAAA,EACpB;AAEA,SAAO,EAAE,cAAc;AACzB;;;AD7UQ;AAvBD,IAAM,oBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,MAAM,GAAG,KAAK,GAAG,QAAQ;AACrC,UAAM,EAAE,WAAW,kBAAkB,aAAa,IAAI,IACpD,mBAAmB;AAErB,UAAM,EAAE,cAAc,IAAI,iBAAiB,IAAI;AAE/C,iCAAS;AAET,UAAM,MAAmB;AAAA,MACvB,UAAU;AAAA,MACV,MAAM,OAAO,IAAI;AAAA,MACjB,GAAI,mBACA,EAAE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG,IAAI,IAClD,EAAE,CAAC,gBAAgB,aAAa,OAAO,IAAI,GAAG,IAAI;AAAA,IACxD;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;AAIA,IAAM,yBAAqB;AAAA,EACzB,CAAC,EAAE,GAAG,KAAK,GAAG,QAAQ;AACpB,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,GAAE;AAAA,QACF,GAAE;AAAA,QACD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["import_core","import_utils"]}

package/dist/carousel-slide.mjs

@@ -0,0 +1,9 @@
+"use client"
+import {
+  CarouselSlide
+} from "./chunk-VQX7S5CU.mjs";
+import "./chunk-QQ2HS4J4.mjs";
+export {
+  CarouselSlide
+};
+//# sourceMappingURL=carousel-slide.mjs.map