@destyler/carousel 0.0.7-beta.7 → 0.1.0

package/dist/index.js

@@ -0,0 +1,718 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { addDomEvent, ariaAttr, createScope, dataAttr, getEventKey, getEventTarget, getTabbables, isFocusable, queryAll, raf, trackPointerMove } from "@destyler/dom";
+import { findSnapPoint, getScrollSnapPositions } from "@destyler/scroll-snap";
+import { add, compact, createSplitProps, isEqual, isObject, nextIndex, prevIndex, remove, uniq } from "@destyler/utils";
+import { createMachine, ref } from "@destyler/xstate";
+import { createProps } from "@destyler/types";
+
+//#region src/anatomy.ts
+const anatomy = createAnatomy("carousel").parts("root", "itemGroup", "item", "control", "nextTrigger", "prevTrigger", "indicatorGroup", "indicator", "autoplayTrigger");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/dom.ts
+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");
+	}
+});
+
+//#endregion
+//#region src/connect.ts
+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$1) {
+			const isInView = state.context.slidesInView.includes(props$1.index);
+			return normalize.element({
+				...parts.item.attrs,
+				"id": dom.getItemId(state.context, props$1.index),
+				"dir": state.context.dir,
+				"role": "group",
+				"data-index": props$1.index,
+				"data-inview": dataAttr(isInView),
+				"aria-roledescription": "slide",
+				"data-orientation": state.context.orientation,
+				"aria-label": state.context.slideCount ? translations.item(props$1.index, state.context.slideCount) : void 0,
+				"aria-hidden": ariaAttr(!isInView),
+				"style": { scrollSnapAlign: getSnapAlign(state.context, props$1) }
+			});
+		},
+		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(event$1) {
+							if (horizontal) return;
+							send({
+								type: "PAGE.NEXT",
+								src
+							});
+							event$1.preventDefault();
+						},
+						ArrowUp(event$1) {
+							if (horizontal) return;
+							send({
+								type: "PAGE.PREV",
+								src
+							});
+							event$1.preventDefault();
+						},
+						ArrowRight(event$1) {
+							if (!horizontal) return;
+							send({
+								type: "PAGE.NEXT",
+								src
+							});
+							event$1.preventDefault();
+						},
+						ArrowLeft(event$1) {
+							if (!horizontal) return;
+							send({
+								type: "PAGE.PREV",
+								src
+							});
+							event$1.preventDefault();
+						},
+						Home(event$1) {
+							send({
+								type: "PAGE.SET",
+								index: 0,
+								src
+							});
+							event$1.preventDefault();
+						},
+						End(event$1) {
+							send({
+								type: "PAGE.SET",
+								index: pageSnapPoints.length - 1,
+								src
+							});
+							event$1.preventDefault();
+						}
+					};
+					const key = getEventKey(event, {
+						dir: state.context.dir,
+						orientation: state.context.orientation
+					});
+					const exec = keyMap[key];
+					exec?.(event);
+				}
+			});
+		},
+		getIndicatorProps(props$1) {
+			return normalize.button({
+				...parts.indicator.attrs,
+				"dir": state.context.dir,
+				"id": dom.getIndicatorId(state.context, props$1.index),
+				"type": "button",
+				"data-orientation": state.context.orientation,
+				"data-index": props$1.index,
+				"data-readonly": dataAttr(props$1.readOnly),
+				"data-current": dataAttr(props$1.index === state.context.page),
+				"aria-label": translations.indicator(props$1.index),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (props$1.readOnly) return;
+					send({
+						type: "PAGE.SET",
+						index: props$1.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$1) {
+	const { snapAlign = "start", index } = props$1;
+	const perMove = ctx.slidesPerMove === "auto" ? Math.floor(ctx.slidesPerPage) : ctx.slidesPerMove;
+	const shouldSnap = (index + perMove) % perMove === 0;
+	return shouldSnap ? snapAlign : void 0;
+}
+
+//#endregion
+//#region src/machine.ts
+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: .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: (ctx$1) => ctx$1.dir === "rtl",
+			isHorizontal: (ctx$1) => ctx$1.orientation === "horizontal",
+			canScrollNext: (ctx$1) => ctx$1.loop || ctx$1.page < ctx$1.pageSnapPoints.length - 1,
+			canScrollPrev: (ctx$1) => ctx$1.loop || ctx$1.page > 0,
+			autoplayInterval: (ctx$1) => isObject(ctx$1.autoplay) ? ctx$1.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(ctx$1, _evt, { send }) {
+				const el = dom.getItemGroupEl(ctx$1);
+				if (!el) return;
+				const win = dom.getWin(ctx$1);
+				const observer = new win.MutationObserver(() => {
+					send({
+						type: "SNAP.REFRESH",
+						src: "slide.mutation"
+					});
+					dom.syncTabIndex(ctx$1);
+				});
+				dom.syncTabIndex(ctx$1);
+				observer.observe(el, {
+					childList: true,
+					subtree: true
+				});
+				return () => observer.disconnect();
+			},
+			trackSlideResize(ctx$1, _evt, { send }) {
+				const el = dom.getItemGroupEl(ctx$1);
+				if (!el) return;
+				const win = dom.getWin(ctx$1);
+				const observer = new win.ResizeObserver(() => {
+					send({
+						type: "SNAP.REFRESH",
+						src: "slide.resize"
+					});
+				});
+				dom.getItemEls(ctx$1).forEach((slide) => observer.observe(slide));
+				return () => observer.disconnect();
+			},
+			trackSlideIntersections(ctx$1) {
+				const el = dom.getItemGroupEl(ctx$1);
+				const win = dom.getWin(ctx$1);
+				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);
+					}, ctx$1.slidesInView);
+					ctx$1.slidesInView = uniq(slidesInView);
+				}, {
+					root: el,
+					threshold: ctx$1.inViewThreshold
+				});
+				dom.getItemEls(ctx$1).forEach((slide) => observer.observe(slide));
+				return () => observer.disconnect();
+			},
+			trackScroll(ctx$1) {
+				const el = dom.getItemGroupEl(ctx$1);
+				if (!el) return;
+				const onScrollEnd = () => {
+					if (ctx$1.slidesInView.length === 0) return;
+					const scrollPosition = ctx$1.isHorizontal ? el.scrollLeft : el.scrollTop;
+					const page = ctx$1.pageSnapPoints.findIndex((point) => Math.abs(point - scrollPosition) < 1);
+					if (page === -1) return;
+					set.page(ctx$1, page);
+				};
+				const onScroll = () => {
+					clearTimeout(ctx$1.timeoutRef.current);
+					ctx$1.timeoutRef.current = setTimeout(() => {
+						onScrollEnd?.();
+					}, 150);
+				};
+				return addDomEvent(el, "scroll", onScroll, { passive: true });
+			},
+			trackDocumentVisibility(ctx$1, _evt, { send }) {
+				const doc = dom.getDoc(ctx$1);
+				const onVisibilityChange = () => {
+					if (doc.visibilityState === "visible") return;
+					send({
+						type: "AUTOPLAY.PAUSE",
+						src: "doc.hidden"
+					});
+				};
+				return addDomEvent(doc, "visibilitychange", onVisibilityChange);
+			},
+			trackPointerMove(ctx$1, _evt, { send }) {
+				const doc = dom.getDoc(ctx$1);
+				return trackPointerMove(doc, {
+					onPointerMove({ event }) {
+						send({
+							type: "DRAGGING",
+							left: -event.movementX,
+							top: -event.movementY
+						});
+					},
+					onPointerUp() {
+						send({ type: "DRAGGING.END" });
+					}
+				});
+			}
+		},
+		actions: {
+			resetScrollPosition(ctx$1) {
+				const el = dom.getItemGroupEl(ctx$1);
+				el.scrollTo(0, 0);
+			},
+			clearScrollEndTimer(ctx$1) {
+				if (ctx$1.timeoutRef.current == null) return;
+				clearTimeout(ctx$1.timeoutRef.current);
+				ctx$1.timeoutRef.current = void 0;
+			},
+			scrollToPage(ctx$1, evt) {
+				const behavior = evt.instant ? "instant" : "smooth";
+				const index = clamp(evt.index ?? ctx$1.page, 0, ctx$1.pageSnapPoints.length - 1);
+				const el = dom.getItemGroupEl(ctx$1);
+				const axis = ctx$1.isHorizontal ? "left" : "top";
+				el.scrollTo({
+					[axis]: ctx$1.pageSnapPoints[index],
+					behavior
+				});
+			},
+			setNextPage(ctx$1) {
+				const page = nextIndex(ctx$1.pageSnapPoints, ctx$1.page, { loop: ctx$1.loop });
+				set.page(ctx$1, page);
+			},
+			setPrevPage(ctx$1) {
+				const page = prevIndex(ctx$1.pageSnapPoints, ctx$1.page, { loop: ctx$1.loop });
+				set.page(ctx$1, page);
+			},
+			setMatchingPage(ctx$1, evt) {
+				const snapPoint = findSnapPoint(dom.getItemGroupEl(ctx$1), ctx$1.isHorizontal ? "x" : "y", (node) => node.dataset.index === evt.index.toString());
+				if (snapPoint == null) return;
+				const page = ctx$1.pageSnapPoints.indexOf(snapPoint);
+				set.page(ctx$1, page);
+			},
+			setPage(ctx$1, evt) {
+				set.page(ctx$1, evt.index ?? ctx$1.page);
+			},
+			clampPage(ctx$1) {
+				const index = clamp(ctx$1.page, 0, ctx$1.pageSnapPoints.length - 1);
+				set.page(ctx$1, index);
+			},
+			setSnapPoints(ctx$1) {
+				queueMicrotask(() => {
+					const el = dom.getItemGroupEl(ctx$1);
+					const scrollSnapPoints = getScrollSnapPositions(el);
+					ctx$1.pageSnapPoints = ctx$1.isHorizontal ? scrollSnapPoints.x : scrollSnapPoints.y;
+				});
+			},
+			disableScrollSnap(ctx$1) {
+				const el = dom.getItemGroupEl(ctx$1);
+				const styles = getComputedStyle(el);
+				el.dataset.scrollSnapType = styles.getPropertyValue("scroll-snap-type");
+				el.style.setProperty("scroll-snap-type", "none");
+			},
+			scrollSlides(ctx$1, evt) {
+				const el = dom.getItemGroupEl(ctx$1);
+				el.scrollBy({
+					left: evt.left,
+					top: evt.top,
+					behavior: "instant"
+				});
+			},
+			endDragging(ctx$1) {
+				const el = dom.getItemGroupEl(ctx$1);
+				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(ctx$1, evt) {
+				if (evt.src !== "indicator") return;
+				const el = dom.getActiveIndicatorEl(ctx$1);
+				raf(() => el.focus({ preventScroll: true }));
+			},
+			invokeDragStart(ctx$1) {
+				ctx$1.onDragStatusChange?.({
+					type: "dragging.start",
+					isDragging: true,
+					page: ctx$1.page
+				});
+			},
+			invokeDragging(ctx$1) {
+				ctx$1.onDragStatusChange?.({
+					type: "dragging",
+					isDragging: true,
+					page: ctx$1.page
+				});
+			},
+			invokeDraggingEnd(ctx$1) {
+				ctx$1.onDragStatusChange?.({
+					type: "dragging.end",
+					isDragging: false,
+					page: ctx$1.page
+				});
+			},
+			invokeAutoplay(ctx$1) {
+				ctx$1.onAutoplayStatusChange?.({
+					type: "autoplay",
+					isPlaying: true,
+					page: ctx$1.page
+				});
+			},
+			invokeAutoplayStart(ctx$1) {
+				ctx$1.onAutoplayStatusChange?.({
+					type: "autoplay.start",
+					isPlaying: true,
+					page: ctx$1.page
+				});
+			},
+			invokeAutoplayEnd(ctx$1) {
+				ctx$1.onAutoplayStatusChange?.({
+					type: "autoplay.stop",
+					isPlaying: false,
+					page: ctx$1.page
+				});
+			}
+		},
+		delays: { AUTOPLAY_INTERVAL: (ctx$1) => ctx$1.autoplayInterval }
+	});
+}
+
+//#endregion
+//#region src/props.ts
+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);
+
+//#endregion
+export { anatomy, connect, indicatorProps, itemProps, machine, props, splitIndicatorProps, splitItemProps, splitProps };