@destyler/carousel 0.0.7-beta.1

package/dist/index.mjs

@@ -0,0 +1,674 @@
+import { createAnatomy } from '@zag-js/anatomy';
+import { getEventKey, addDomEvent, trackPointerMove } from '@zag-js/dom-event';
+import { createScope, queryAll, getTabbables, dataAttr, getEventTarget, isFocusable, ariaAttr, raf } from '@zag-js/dom-query';
+import { createMachine, ref } from '@zag-js/core';
+import { findSnapPoint, getScrollSnapPositions } from '@zag-js/scroll-snap';
+import { compact, isObject, add, remove, uniq, nextIndex, prevIndex, isEqual, createSplitProps } from '@zag-js/utils';
+import { createProps } from '@zag-js/types';
+
+const anatomy = createAnatomy("carousel").parts(
+  "root",
+  "itemGroup",
+  "item",
+  "control",
+  "nextTrigger",
+  "prevTrigger",
+  "indicatorGroup",
+  "indicator",
+  "autoplayTrigger"
+);
+const parts = anatomy.build();
+
+const dom = createScope({
+  getRootId: (ctx) => ctx.ids?.root ?? `carousel:${ctx.id}`,
+  getItemId: (ctx, index) => ctx.ids?.item?.(index) ?? `carousel:${ctx.id}:item:${index}`,
+  getItemGroupId: (ctx) => ctx.ids?.itemGroup ?? `carousel:${ctx.id}:item-group`,
+  getNextTriggerId: (ctx) => ctx.ids?.nextTrigger ?? `carousel:${ctx.id}:next-trigger`,
+  getPrevTriggerId: (ctx) => ctx.ids?.prevTrigger ?? `carousel:${ctx.id}:prev-trigger`,
+  getIndicatorGroupId: (ctx) => ctx.ids?.indicatorGroup ?? `carousel:${ctx.id}:indicator-group`,
+  getIndicatorId: (ctx, index) => ctx.ids?.indicator?.(index) ?? `carousel:${ctx.id}:indicator:${index}`,
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getItemGroupEl: (ctx) => dom.getById(ctx, dom.getItemGroupId(ctx)),
+  getItemEl: (ctx, index) => dom.getById(ctx, dom.getItemId(ctx, index)),
+  getItemEls: (ctx) => queryAll(dom.getItemGroupEl(ctx), `[data-part=item]`),
+  getActiveIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx, ctx.page)),
+  syncTabIndex(ctx) {
+    const el = dom.getItemGroupEl(ctx);
+    if (!el)
+      return;
+    const tabbables = getTabbables(el);
+    if (tabbables.length > 0) {
+      el.removeAttribute("tabindex");
+    } else {
+      el.setAttribute("tabindex", "0");
+    }
+  }
+});
+
+function connect(state, send, normalize) {
+  const isPlaying = state.matches("autoplay");
+  const isDragging = state.matches("dragging");
+  const canScrollNext = state.context.canScrollNext;
+  const canScrollPrev = state.context.canScrollPrev;
+  const horizontal = state.context.isHorizontal;
+  const pageSnapPoints = Array.from(state.context.pageSnapPoints);
+  const page = state.context.page;
+  const slidesPerPage = state.context.slidesPerPage;
+  const padding = state.context.padding;
+  const translations = state.context.translations;
+  return {
+    isPlaying,
+    isDragging,
+    page,
+    pageSnapPoints,
+    canScrollNext,
+    canScrollPrev,
+    getProgress() {
+      return page / pageSnapPoints.length;
+    },
+    scrollToIndex(index, instant) {
+      send({ type: "INDEX.SET", index, instant });
+    },
+    scrollTo(index, instant) {
+      send({ type: "PAGE.SET", index, instant });
+    },
+    scrollNext(instant) {
+      send({ type: "PAGE.NEXT", instant });
+    },
+    scrollPrev(instant) {
+      send({ type: "PAGE.PREV", instant });
+    },
+    play() {
+      send("AUTOPLAY.START");
+    },
+    pause() {
+      send("AUTOPLAY.PAUSE");
+    },
+    isInView(index) {
+      return Array.from(state.context.slidesInView).includes(index);
+    },
+    refresh() {
+      send({ type: "SNAP.REFRESH" });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        "id": dom.getRootId(state.context),
+        "role": "region",
+        "aria-roledescription": "carousel",
+        "data-orientation": state.context.orientation,
+        "dir": state.context.dir,
+        "style": {
+          "--slides-per-page": slidesPerPage,
+          "--slide-spacing": state.context.spacing,
+          "--slide-item-size": "calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))"
+        }
+      });
+    },
+    getItemGroupProps() {
+      return normalize.element({
+        ...parts.itemGroup.attrs,
+        "id": dom.getItemGroupId(state.context),
+        "data-orientation": state.context.orientation,
+        "data-dragging": dataAttr(isDragging),
+        "dir": state.context.dir,
+        "aria-live": isPlaying ? "off" : "polite",
+        onMouseDown(event) {
+          if (!state.context.allowMouseDrag)
+            return;
+          if (event.button !== 0)
+            return;
+          if (event.defaultPrevented)
+            return;
+          const target = getEventTarget(event);
+          if (isFocusable(target) && target !== event.currentTarget)
+            return;
+          event.preventDefault();
+          send({ type: "DRAGGING.START" });
+        },
+        "style": {
+          display: "grid",
+          gap: "var(--slide-spacing)",
+          scrollSnapType: [horizontal ? "x" : "y", state.context.snapType].join(" "),
+          gridAutoFlow: horizontal ? "column" : "row",
+          scrollbarWidth: "none",
+          overscrollBehavior: "contain",
+          [horizontal ? "gridAutoColumns" : "gridAutoRows"]: "var(--slide-item-size)",
+          [horizontal ? "scrollPaddingInline" : "scrollPaddingBlock"]: padding,
+          [horizontal ? "paddingInline" : "paddingBlock"]: padding,
+          [horizontal ? "overflowX" : "overflowY"]: "auto"
+        }
+      });
+    },
+    getItemProps(props) {
+      const isInView = state.context.slidesInView.includes(props.index);
+      return normalize.element({
+        ...parts.item.attrs,
+        "id": dom.getItemId(state.context, props.index),
+        "dir": state.context.dir,
+        "role": "group",
+        "data-index": props.index,
+        "data-inview": dataAttr(isInView),
+        "aria-roledescription": "slide",
+        "data-orientation": state.context.orientation,
+        "aria-label": state.context.slideCount ? translations.item(props.index, state.context.slideCount) : void 0,
+        "aria-hidden": ariaAttr(!isInView),
+        "style": {
+          scrollSnapAlign: getSnapAlign(state.context, props)
+        }
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        "data-orientation": state.context.orientation
+      });
+    },
+    getPrevTriggerProps() {
+      return normalize.button({
+        ...parts.prevTrigger.attrs,
+        "id": dom.getPrevTriggerId(state.context),
+        "type": "button",
+        "disabled": !canScrollPrev,
+        "dir": state.context.dir,
+        "aria-label": translations.prevTrigger,
+        "data-orientation": state.context.orientation,
+        "aria-controls": dom.getItemGroupId(state.context),
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          send({ type: "PAGE.PREV", src: "trigger" });
+        }
+      });
+    },
+    getNextTriggerProps() {
+      return normalize.button({
+        ...parts.nextTrigger.attrs,
+        "dir": state.context.dir,
+        "id": dom.getNextTriggerId(state.context),
+        "type": "button",
+        "aria-label": translations.nextTrigger,
+        "data-orientation": state.context.orientation,
+        "aria-controls": dom.getItemGroupId(state.context),
+        "disabled": !canScrollNext,
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          send({ type: "PAGE.NEXT", src: "trigger" });
+        }
+      });
+    },
+    getIndicatorGroupProps() {
+      return normalize.element({
+        ...parts.indicatorGroup.attrs,
+        "dir": state.context.dir,
+        "id": dom.getIndicatorGroupId(state.context),
+        "data-orientation": state.context.orientation,
+        onKeyDown(event) {
+          if (event.defaultPrevented)
+            return;
+          const src = "indicator";
+          const keyMap = {
+            ArrowDown(event2) {
+              if (horizontal)
+                return;
+              send({ type: "PAGE.NEXT", src });
+              event2.preventDefault();
+            },
+            ArrowUp(event2) {
+              if (horizontal)
+                return;
+              send({ type: "PAGE.PREV", src });
+              event2.preventDefault();
+            },
+            ArrowRight(event2) {
+              if (!horizontal)
+                return;
+              send({ type: "PAGE.NEXT", src });
+              event2.preventDefault();
+            },
+            ArrowLeft(event2) {
+              if (!horizontal)
+                return;
+              send({ type: "PAGE.PREV", src });
+              event2.preventDefault();
+            },
+            Home(event2) {
+              send({ type: "PAGE.SET", index: 0, src });
+              event2.preventDefault();
+            },
+            End(event2) {
+              send({ type: "PAGE.SET", index: pageSnapPoints.length - 1, src });
+              event2.preventDefault();
+            }
+          };
+          const key = getEventKey(event, {
+            dir: state.context.dir,
+            orientation: state.context.orientation
+          });
+          const exec = keyMap[key];
+          exec?.(event);
+        }
+      });
+    },
+    getIndicatorProps(props) {
+      return normalize.button({
+        ...parts.indicator.attrs,
+        "dir": state.context.dir,
+        "id": dom.getIndicatorId(state.context, props.index),
+        "type": "button",
+        "data-orientation": state.context.orientation,
+        "data-index": props.index,
+        "data-readonly": dataAttr(props.readOnly),
+        "data-current": dataAttr(props.index === state.context.page),
+        "aria-label": translations.indicator(props.index),
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          if (props.readOnly)
+            return;
+          send({ type: "PAGE.SET", index: props.index, src: "indicator" });
+        }
+      });
+    },
+    getAutoplayTriggerProps() {
+      return normalize.button({
+        ...parts.autoplayTrigger.attrs,
+        "type": "button",
+        "data-orientation": state.context.orientation,
+        "data-pressed": dataAttr(isPlaying),
+        "aria-label": isPlaying ? translations.autoplayStop : translations.autoplayStart,
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          send({ type: isPlaying ? "AUTOPLAY.PAUSE" : "AUTOPLAY.START" });
+        }
+      });
+    }
+  };
+}
+function getSnapAlign(ctx, props) {
+  const { snapAlign = "start", index } = props;
+  const perMove = ctx.slidesPerMove === "auto" ? Math.floor(ctx.slidesPerPage) : ctx.slidesPerMove;
+  const shouldSnap = (index + perMove) % perMove === 0;
+  return shouldSnap ? snapAlign : void 0;
+}
+
+const DEFAULT_SLIDES_PER_PAGE = 1;
+const DEFAULT_SLIDES_PER_MOVE = "auto";
+const invoke = {
+  pageChange: (ctx) => {
+    ctx.onPageChange?.({
+      page: ctx.page,
+      pageSnapPoint: ctx.pageSnapPoints[ctx.page]
+    });
+  }
+};
+const set = {
+  page: (ctx, value) => {
+    const page = clamp(value, 0, ctx.pageSnapPoints.length - 1);
+    if (isEqual(ctx.page, page))
+      return;
+    ctx.page = page;
+    invoke.pageChange(ctx);
+  }
+};
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function getPageSnapPoints(totalSlides, slidesPerMove, slidesPerPage) {
+  if (totalSlides == null)
+    return [];
+  const snapPoints = [];
+  const perMove = slidesPerMove === "auto" ? Math.floor(slidesPerPage) : slidesPerMove;
+  for (let i = 0; i < totalSlides - 1; i += perMove) snapPoints.push(i);
+  return snapPoints;
+}
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "carousel",
+      initial: ctx.autoplay ? "autoplay" : "idle",
+      context: {
+        dir: "ltr",
+        page: 0,
+        orientation: "horizontal",
+        snapType: "mandatory",
+        loop: false,
+        slidesPerPage: DEFAULT_SLIDES_PER_PAGE,
+        slidesPerMove: DEFAULT_SLIDES_PER_MOVE,
+        spacing: "0px",
+        autoplay: false,
+        allowMouseDrag: false,
+        inViewThreshold: 0.6,
+        ...ctx,
+        timeoutRef: ref({ current: void 0 }),
+        translations: {
+          nextTrigger: "Next slide",
+          prevTrigger: "Previous slide",
+          indicator: (index) => `Go to slide ${index + 1}`,
+          item: (index, count) => `${index + 1} of ${count}`,
+          autoplayStart: "Start slide rotation",
+          autoplayStop: "Stop slide rotation",
+          ...ctx.translations
+        },
+        pageSnapPoints: getPageSnapPoints(
+          ctx.slideCount,
+          ctx.slidesPerMove ?? DEFAULT_SLIDES_PER_MOVE,
+          ctx.slidesPerPage ?? DEFAULT_SLIDES_PER_PAGE
+        ),
+        slidesInView: []
+      },
+      computed: {
+        isRtl: (ctx2) => ctx2.dir === "rtl",
+        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+        canScrollNext: (ctx2) => ctx2.loop || ctx2.page < ctx2.pageSnapPoints.length - 1,
+        canScrollPrev: (ctx2) => ctx2.loop || ctx2.page > 0,
+        autoplayInterval: (ctx2) => isObject(ctx2.autoplay) ? ctx2.autoplay.delay : 4e3
+      },
+      watch: {
+        slidesPerPage: ["setSnapPoints"],
+        slidesPerMove: ["setSnapPoints"],
+        page: ["scrollToPage", "focusIndicatorEl"],
+        orientation: ["setSnapPoints", "scrollToPage"]
+      },
+      on: {
+        "PAGE.NEXT": {
+          target: "idle",
+          actions: ["clearScrollEndTimer", "setNextPage"]
+        },
+        "PAGE.PREV": {
+          target: "idle",
+          actions: ["clearScrollEndTimer", "setPrevPage"]
+        },
+        "PAGE.SET": {
+          target: "idle",
+          actions: ["clearScrollEndTimer", "setPage"]
+        },
+        "INDEX.SET": {
+          target: "idle",
+          actions: ["clearScrollEndTimer", "setMatchingPage"]
+        },
+        "SNAP.REFRESH": {
+          actions: ["setSnapPoints", "clampPage"]
+        }
+      },
+      activities: ["trackSlideMutation", "trackSlideIntersections", "trackSlideResize"],
+      entry: ["resetScrollPosition", "setSnapPoints", "setPage"],
+      exit: ["clearScrollEndTimer"],
+      states: {
+        idle: {
+          activities: ["trackScroll"],
+          on: {
+            "DRAGGING.START": {
+              target: "dragging",
+              actions: ["invokeDragStart"]
+            },
+            "AUTOPLAY.START": {
+              target: "autoplay",
+              actions: ["invokeAutoplayStart"]
+            }
+          }
+        },
+        dragging: {
+          activities: ["trackPointerMove"],
+          entry: ["disableScrollSnap"],
+          on: {
+            "DRAGGING": {
+              actions: ["scrollSlides", "invokeDragging"]
+            },
+            "DRAGGING.END": {
+              target: "idle",
+              actions: ["endDragging", "invokeDraggingEnd"]
+            }
+          }
+        },
+        autoplay: {
+          activities: ["trackDocumentVisibility", "trackScroll"],
+          exit: ["invokeAutoplayEnd"],
+          every: {
+            AUTOPLAY_INTERVAL: ["setNextPage", "invokeAutoplay"]
+          },
+          on: {
+            "DRAGGING.START": {
+              target: "dragging",
+              actions: ["invokeDragStart"]
+            },
+            "AUTOPLAY.PAUSE": "idle"
+          }
+        }
+      }
+    },
+    {
+      activities: {
+        trackSlideMutation(ctx2, _evt, { send }) {
+          const el = dom.getItemGroupEl(ctx2);
+          if (!el)
+            return;
+          const win = dom.getWin(ctx2);
+          const observer = new win.MutationObserver(() => {
+            send({ type: "SNAP.REFRESH", src: "slide.mutation" });
+            dom.syncTabIndex(ctx2);
+          });
+          dom.syncTabIndex(ctx2);
+          observer.observe(el, { childList: true, subtree: true });
+          return () => observer.disconnect();
+        },
+        trackSlideResize(ctx2, _evt, { send }) {
+          const el = dom.getItemGroupEl(ctx2);
+          if (!el)
+            return;
+          const win = dom.getWin(ctx2);
+          const observer = new win.ResizeObserver(() => {
+            send({ type: "SNAP.REFRESH", src: "slide.resize" });
+          });
+          dom.getItemEls(ctx2).forEach((slide) => observer.observe(slide));
+          return () => observer.disconnect();
+        },
+        trackSlideIntersections(ctx2) {
+          const el = dom.getItemGroupEl(ctx2);
+          const win = dom.getWin(ctx2);
+          const observer = new win.IntersectionObserver(
+            (entries) => {
+              const slidesInView = entries.reduce((acc, entry) => {
+                const target = entry.target;
+                const index = Number(target.dataset.index ?? "-1");
+                if (index == null || Number.isNaN(index) || index === -1)
+                  return acc;
+                return entry.isIntersecting ? add(acc, index) : remove(acc, index);
+              }, ctx2.slidesInView);
+              ctx2.slidesInView = uniq(slidesInView);
+            },
+            {
+              root: el,
+              threshold: ctx2.inViewThreshold
+            }
+          );
+          dom.getItemEls(ctx2).forEach((slide) => observer.observe(slide));
+          return () => observer.disconnect();
+        },
+        trackScroll(ctx2) {
+          const el = dom.getItemGroupEl(ctx2);
+          if (!el)
+            return;
+          const onScrollEnd = () => {
+            if (ctx2.slidesInView.length === 0)
+              return;
+            const scrollPosition = ctx2.isHorizontal ? el.scrollLeft : el.scrollTop;
+            const page = ctx2.pageSnapPoints.findIndex((point) => Math.abs(point - scrollPosition) < 1);
+            if (page === -1)
+              return;
+            set.page(ctx2, page);
+          };
+          const onScroll = () => {
+            clearTimeout(ctx2.timeoutRef.current);
+            ctx2.timeoutRef.current = setTimeout(() => {
+              onScrollEnd?.();
+            }, 150);
+          };
+          return addDomEvent(el, "scroll", onScroll, { passive: true });
+        },
+        trackDocumentVisibility(ctx2, _evt, { send }) {
+          const doc = dom.getDoc(ctx2);
+          const onVisibilityChange = () => {
+            if (doc.visibilityState === "visible")
+              return;
+            send({ type: "AUTOPLAY.PAUSE", src: "doc.hidden" });
+          };
+          return addDomEvent(doc, "visibilitychange", onVisibilityChange);
+        },
+        trackPointerMove(ctx2, _evt, { send }) {
+          const doc = dom.getDoc(ctx2);
+          return trackPointerMove(doc, {
+            onPointerMove({ event }) {
+              send({ type: "DRAGGING", left: -event.movementX, top: -event.movementY });
+            },
+            onPointerUp() {
+              send({ type: "DRAGGING.END" });
+            }
+          });
+        }
+      },
+      actions: {
+        resetScrollPosition(ctx2) {
+          const el = dom.getItemGroupEl(ctx2);
+          el.scrollTo(0, 0);
+        },
+        clearScrollEndTimer(ctx2) {
+          if (ctx2.timeoutRef.current == null)
+            return;
+          clearTimeout(ctx2.timeoutRef.current);
+          ctx2.timeoutRef.current = void 0;
+        },
+        scrollToPage(ctx2, evt) {
+          const behavior = evt.instant ? "instant" : "smooth";
+          const index = clamp(evt.index ?? ctx2.page, 0, ctx2.pageSnapPoints.length - 1);
+          const el = dom.getItemGroupEl(ctx2);
+          const axis = ctx2.isHorizontal ? "left" : "top";
+          el.scrollTo({ [axis]: ctx2.pageSnapPoints[index], behavior });
+        },
+        setNextPage(ctx2) {
+          const page = nextIndex(ctx2.pageSnapPoints, ctx2.page, { loop: ctx2.loop });
+          set.page(ctx2, page);
+        },
+        setPrevPage(ctx2) {
+          const page = prevIndex(ctx2.pageSnapPoints, ctx2.page, { loop: ctx2.loop });
+          set.page(ctx2, page);
+        },
+        setMatchingPage(ctx2, evt) {
+          const snapPoint = findSnapPoint(
+            dom.getItemGroupEl(ctx2),
+            ctx2.isHorizontal ? "x" : "y",
+            (node) => node.dataset.index === evt.index.toString()
+          );
+          if (snapPoint == null)
+            return;
+          const page = ctx2.pageSnapPoints.indexOf(snapPoint);
+          set.page(ctx2, page);
+        },
+        setPage(ctx2, evt) {
+          set.page(ctx2, evt.index ?? ctx2.page);
+        },
+        clampPage(ctx2) {
+          const index = clamp(ctx2.page, 0, ctx2.pageSnapPoints.length - 1);
+          set.page(ctx2, index);
+        },
+        setSnapPoints(ctx2) {
+          queueMicrotask(() => {
+            const el = dom.getItemGroupEl(ctx2);
+            const scrollSnapPoints = getScrollSnapPositions(el);
+            ctx2.pageSnapPoints = ctx2.isHorizontal ? scrollSnapPoints.x : scrollSnapPoints.y;
+          });
+        },
+        disableScrollSnap(ctx2) {
+          const el = dom.getItemGroupEl(ctx2);
+          const styles = getComputedStyle(el);
+          el.dataset.scrollSnapType = styles.getPropertyValue("scroll-snap-type");
+          el.style.setProperty("scroll-snap-type", "none");
+        },
+        scrollSlides(ctx2, evt) {
+          const el = dom.getItemGroupEl(ctx2);
+          el.scrollBy({ left: evt.left, top: evt.top, behavior: "instant" });
+        },
+        endDragging(ctx2) {
+          const el = dom.getItemGroupEl(ctx2);
+          const startX = el.scrollLeft;
+          const startY = el.scrollTop;
+          const snapPositions = getScrollSnapPositions(el);
+          const closestX = snapPositions.x.reduce((closest, curr) => {
+            return Math.abs(curr - startX) < Math.abs(closest - startX) ? curr : closest;
+          }, snapPositions.x[0]);
+          const closestY = snapPositions.y.reduce((closest, curr) => {
+            return Math.abs(curr - startY) < Math.abs(closest - startY) ? curr : closest;
+          }, snapPositions.y[0]);
+          raf(() => {
+            el.scrollTo({ left: closestX, top: closestY, behavior: "smooth" });
+            const scrollSnapType = el.dataset.scrollSnapType;
+            if (scrollSnapType) {
+              el.style.removeProperty("scroll-snap-type");
+              delete el.dataset.scrollSnapType;
+            }
+          });
+        },
+        focusIndicatorEl(ctx2, evt) {
+          if (evt.src !== "indicator")
+            return;
+          const el = dom.getActiveIndicatorEl(ctx2);
+          raf(() => el.focus({ preventScroll: true }));
+        },
+        invokeDragStart(ctx2) {
+          ctx2.onDragStatusChange?.({ type: "dragging.start", isDragging: true, page: ctx2.page });
+        },
+        invokeDragging(ctx2) {
+          ctx2.onDragStatusChange?.({ type: "dragging", isDragging: true, page: ctx2.page });
+        },
+        invokeDraggingEnd(ctx2) {
+          ctx2.onDragStatusChange?.({ type: "dragging.end", isDragging: false, page: ctx2.page });
+        },
+        invokeAutoplay(ctx2) {
+          ctx2.onAutoplayStatusChange?.({ type: "autoplay", isPlaying: true, page: ctx2.page });
+        },
+        invokeAutoplayStart(ctx2) {
+          ctx2.onAutoplayStatusChange?.({ type: "autoplay.start", isPlaying: true, page: ctx2.page });
+        },
+        invokeAutoplayEnd(ctx2) {
+          ctx2.onAutoplayStatusChange?.({ type: "autoplay.stop", isPlaying: false, page: ctx2.page });
+        }
+      },
+      delays: {
+        AUTOPLAY_INTERVAL: (ctx2) => ctx2.autoplayInterval
+      }
+    }
+  );
+}
+
+const props = createProps()([
+  "dir",
+  "getRootNode",
+  "id",
+  "ids",
+  "loop",
+  "page",
+  "onPageChange",
+  "orientation",
+  "slideCount",
+  "slidesPerPage",
+  "slidesPerMove",
+  "spacing",
+  "padding",
+  "autoplay",
+  "allowMouseDrag",
+  "inViewThreshold",
+  "translations",
+  "snapType",
+  "onDragStatusChange",
+  "onAutoplayStatusChange"
+]);
+const splitProps = createSplitProps(props);
+const indicatorProps = createProps()(["index", "readOnly"]);
+const splitIndicatorProps = createSplitProps(indicatorProps);
+const itemProps = createProps()(["index", "snapAlign"]);
+const splitItemProps = createSplitProps(itemProps);
+
+export { anatomy, connect, indicatorProps, itemProps, machine, props, splitIndicatorProps, splitItemProps, splitProps };