beez-ui 2.7.1 → 3.0.1

package/dist/components/primitives/carousel.js

@@ -0,0 +1,928 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Internal carousel composition on Embla with Arc's carousel design (https://uiarc.dev, MIT License, see
+* THIRD_PARTY_NOTICES.md): a focusable, draggable slide area with Arc's grab cursor, round outlined controls on the
+* surface that answer hover on fine pointers and press in, Home and End to reach the edges, and Arc's indicator tab list
+* whose pill stretches and travels with the slides frame by frame. Embla keeps dragging, snapping and looping.
+*
+* Not exported from the package: the public `Carousel` (`../carousel.tsx`) composes these parts behind Arc's closed API.
+*/
+import * as React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { animate, motion, useMotionValue, useTransform } from "motion/react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { CAROUSEL_COPY, CAROUSEL_EDGE_KEYS, CAROUSEL_INDICATOR_LENGTH_PX, CAROUSEL_INDICATORS_SELECTOR, CAROUSEL_KEYS, CAROUSEL_OWN_KEYBOARD_SELECTOR, CAROUSEL_ROOT_SELECTOR } from "../../constants/carousel.js";
+import { usePrefersReducedMotion } from "../../hooks/use-prefers-reduced-motion.js";
+import { ARC_SPRING_SMOOTH } from "../../motion/arc-tokens.js";
+import { cn } from "../../lib/utils.js";
+import { ControlButton } from "../control-button.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CarouselContext = React.createContext(null);
+/**
+* Reads the carousel the part is rendered in.
+* @returns The shared Embla API, scroll actions and edge state.
+*/
+function useCarousel() {
+	const context = React.useContext(CarouselContext);
+	if (!context) {
+		throw new Error("useCarousel must be used within a <Carousel />");
+	}
+	return context;
+}
+/** Arc's round control on the surface: outlined, a fill on hover-capable pointers and a dimmed unavailable state. */
+const carouselControlClassName = "size-(--control-height-sm) touch-manipulation rounded-full border-border bg-surface text-foreground hover-fine:not-aria-disabled:bg-surface-muted aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:bg-surface aria-disabled:text-text-muted aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-[18px]";
+/**
+* The carousel root: a named section that owns the arrow, Home and End keys pressed inside it.
+* @param props - Embla options and API callback plus native section attributes.
+* @returns The carousel section.
+*/
+function Carousel(t0) {
+	const $ = _c(43);
+	let children;
+	let className;
+	let opts;
+	let props;
+	let setApi;
+	if ($[0] !== t0) {
+		({opts, setApi, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = opts;
+		$[4] = props;
+		$[5] = setApi;
+	} else {
+		children = $[1];
+		className = $[2];
+		opts = $[3];
+		props = $[4];
+		setApi = $[5];
+	}
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const [carouselRef, api] = useEmblaCarousel(opts);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+	let t1;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (api_0) => {
+			if (!api_0) {
+				return;
+			}
+			setCanScrollPrev(api_0.canScrollPrev());
+			setCanScrollNext(api_0.canScrollNext());
+		};
+		$[6] = t1;
+	} else {
+		t1 = $[6];
+	}
+	const onSelect = t1;
+	let t2;
+	if ($[7] !== api || $[8] !== shouldReduceMotion) {
+		t2 = () => {
+			api?.scrollPrev(shouldReduceMotion);
+		};
+		$[7] = api;
+		$[8] = shouldReduceMotion;
+		$[9] = t2;
+	} else {
+		t2 = $[9];
+	}
+	const scrollPrev = t2;
+	let t3;
+	if ($[10] !== api || $[11] !== shouldReduceMotion) {
+		t3 = () => {
+			api?.scrollNext(shouldReduceMotion);
+		};
+		$[10] = api;
+		$[11] = shouldReduceMotion;
+		$[12] = t3;
+	} else {
+		t3 = $[12];
+	}
+	const scrollNext = t3;
+	let t4;
+	if ($[13] !== api || $[14] !== scrollNext || $[15] !== scrollPrev || $[16] !== shouldReduceMotion) {
+		t4 = (event) => {
+			if (event.altKey || event.ctrlKey || event.metaKey) {
+				return;
+			}
+			const target = event.target instanceof Element ? event.target : null;
+			const keyboardOwner = target?.closest(CAROUSEL_OWN_KEYBOARD_SELECTOR) ?? null;
+			if (keyboardOwner && event.currentTarget.contains(keyboardOwner) && !keyboardOwner.matches(CAROUSEL_INDICATORS_SELECTOR)) {
+				return;
+			}
+			const closestCarousel = target?.closest(CAROUSEL_ROOT_SELECTOR) ?? null;
+			if (closestCarousel && closestCarousel !== event.currentTarget) {
+				return;
+			}
+			if (!api) {
+				return;
+			}
+			let isHandled = true;
+			if (event.key === CAROUSEL_KEYS.previous) {
+				scrollPrev();
+			} else {
+				if (event.key === CAROUSEL_KEYS.next) {
+					scrollNext();
+				} else {
+					if (event.key === CAROUSEL_EDGE_KEYS.first) {
+						api.scrollTo(0, shouldReduceMotion);
+					} else {
+						if (event.key === CAROUSEL_EDGE_KEYS.last) {
+							api.scrollTo(api.scrollSnapList().length - 1, shouldReduceMotion);
+						} else {
+							isHandled = false;
+						}
+					}
+				}
+			}
+			if (!isHandled) {
+				return;
+			}
+			event.preventDefault();
+			if (target && api.containerNode().contains(target)) {
+				api.rootNode().focus({ preventScroll: true });
+			}
+		};
+		$[13] = api;
+		$[14] = scrollNext;
+		$[15] = scrollPrev;
+		$[16] = shouldReduceMotion;
+		$[17] = t4;
+	} else {
+		t4 = $[17];
+	}
+	const handleKeyDown = t4;
+	let t5;
+	let t6;
+	if ($[18] !== api || $[19] !== setApi) {
+		t5 = () => {
+			if (!api || !setApi) {
+				return;
+			}
+			setApi(api);
+		};
+		t6 = [api, setApi];
+		$[18] = api;
+		$[19] = setApi;
+		$[20] = t5;
+		$[21] = t6;
+	} else {
+		t5 = $[20];
+		t6 = $[21];
+	}
+	React.useEffect(t5, t6);
+	let t7;
+	let t8;
+	if ($[22] !== api) {
+		t7 = () => {
+			if (!api) {
+				return;
+			}
+			let isMounted = true;
+			queueMicrotask(() => {
+				if (isMounted) {
+					onSelect(api);
+				}
+			});
+			api.on("reInit", onSelect);
+			api.on("select", onSelect);
+			return () => {
+				isMounted = false;
+				api?.off("reInit", onSelect);
+				api?.off("select", onSelect);
+			};
+		};
+		t8 = [api, onSelect];
+		$[22] = api;
+		$[23] = t7;
+		$[24] = t8;
+	} else {
+		t7 = $[23];
+		t8 = $[24];
+	}
+	React.useEffect(t7, t8);
+	let t9;
+	if ($[25] !== api || $[26] !== canScrollNext || $[27] !== canScrollPrev || $[28] !== carouselRef || $[29] !== opts || $[30] !== scrollNext || $[31] !== scrollPrev) {
+		t9 = {
+			carouselRef,
+			api,
+			opts,
+			scrollPrev,
+			scrollNext,
+			canScrollPrev,
+			canScrollNext
+		};
+		$[25] = api;
+		$[26] = canScrollNext;
+		$[27] = canScrollPrev;
+		$[28] = carouselRef;
+		$[29] = opts;
+		$[30] = scrollNext;
+		$[31] = scrollPrev;
+		$[32] = t9;
+	} else {
+		t9 = $[32];
+	}
+	let t10;
+	if ($[33] !== className) {
+		t10 = cn("relative", className);
+		$[33] = className;
+		$[34] = t10;
+	} else {
+		t10 = $[34];
+	}
+	let t11;
+	if ($[35] !== children || $[36] !== handleKeyDown || $[37] !== props || $[38] !== t10) {
+		t11 = /* @__PURE__ */ _jsx("section", {
+			onKeyDownCapture: handleKeyDown,
+			className: t10,
+			"aria-roledescription": CAROUSEL_COPY.roleDescription,
+			"data-slot": "carousel",
+			...props,
+			children
+		});
+		$[35] = children;
+		$[36] = handleKeyDown;
+		$[37] = props;
+		$[38] = t10;
+		$[39] = t11;
+	} else {
+		t11 = $[39];
+	}
+	let t12;
+	if ($[40] !== t11 || $[41] !== t9) {
+		t12 = /* @__PURE__ */ _jsx(CarouselContext.Provider, {
+			value: t9,
+			children: t11
+		});
+		$[40] = t11;
+		$[41] = t9;
+		$[42] = t12;
+	} else {
+		t12 = $[42];
+	}
+	return t12;
+}
+/**
+* The clipped, focusable viewport and the slide track. While the track can be dragged it shows Arc's grab cursor on
+* fine pointers, and a grabbing cursor while a drag is held. A click on a neighbouring slide selects it, as in Arc.
+* @param props - Viewport copy and class plus native attributes of the track.
+* @returns The viewport holding the track.
+*/
+function CarouselContent(t0) {
+	const $ = _c(26);
+	let className;
+	let props;
+	let t1;
+	let viewportClassName;
+	if ($[0] !== t0) {
+		({className, viewportLabel: t1, viewportClassName, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = viewportClassName;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		viewportClassName = $[4];
+	}
+	const viewportLabel = t1 === undefined ? CAROUSEL_COPY.viewportLabel : t1;
+	const { carouselRef, api, opts, canScrollPrev, canScrollNext } = useCarousel();
+	const [isDragging, setIsDragging] = React.useState(false);
+	const reduceMotion = usePrefersReducedMotion();
+	const isDraggable = opts?.watchDrag !== false && (canScrollPrev || canScrollNext);
+	let t2;
+	let t3;
+	if ($[5] !== api) {
+		t2 = () => {
+			if (!api) {
+				return;
+			}
+			const handlePointerDown = () => setIsDragging(true);
+			const handlePointerUp = () => setIsDragging(false);
+			api.on("pointerDown", handlePointerDown);
+			api.on("pointerUp", handlePointerUp);
+			return () => {
+				api.off("pointerDown", handlePointerDown);
+				api.off("pointerUp", handlePointerUp);
+			};
+		};
+		t3 = [api];
+		$[5] = api;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	React.useEffect(t2, t3);
+	let t4;
+	if ($[8] !== api || $[9] !== reduceMotion) {
+		t4 = (event) => {
+			if (!api) {
+				return;
+			}
+			const slideIndex = api.slideNodes().findIndex((slide) => {
+				const rect = slide.getBoundingClientRect();
+				return event.clientX >= rect.left && event.clientX <= rect.right;
+			});
+			if (slideIndex < 0 || slideIndex === api.selectedScrollSnap()) {
+				return;
+			}
+			api.scrollTo(slideIndex, reduceMotion);
+		};
+		$[8] = api;
+		$[9] = reduceMotion;
+		$[10] = t4;
+	} else {
+		t4 = $[10];
+	}
+	const handleClick = t4;
+	const t5 = isDraggable && "pointer-fine:cursor-grab pointer-fine:data-dragging:cursor-grabbing";
+	let t6;
+	if ($[11] !== t5 || $[12] !== viewportClassName) {
+		t6 = cn("min-w-0 overflow-hidden rounded-(--radius-panel) outline-none [-webkit-tap-highlight-color:transparent] focus-visible:ring-3 focus-visible:ring-ring/50", t5, viewportClassName);
+		$[11] = t5;
+		$[12] = viewportClassName;
+		$[13] = t6;
+	} else {
+		t6 = $[13];
+	}
+	const t7 = isDraggable && isDragging || undefined;
+	let t8;
+	if ($[14] !== className) {
+		t8 = cn("flex", className);
+		$[14] = className;
+		$[15] = t8;
+	} else {
+		t8 = $[15];
+	}
+	let t9;
+	if ($[16] !== props || $[17] !== t8) {
+		t9 = /* @__PURE__ */ _jsx("div", {
+			className: t8,
+			...props
+		});
+		$[16] = props;
+		$[17] = t8;
+		$[18] = t9;
+	} else {
+		t9 = $[18];
+	}
+	let t10;
+	if ($[19] !== carouselRef || $[20] !== handleClick || $[21] !== t6 || $[22] !== t7 || $[23] !== t9 || $[24] !== viewportLabel) {
+		t10 = /* @__PURE__ */ _jsx("div", {
+			ref: carouselRef,
+			role: "group",
+			"aria-label": viewportLabel,
+			tabIndex: 0,
+			className: t6,
+			"data-slot": "carousel-content",
+			"data-dragging": t7,
+			onClick: handleClick,
+			children: t9
+		});
+		$[19] = carouselRef;
+		$[20] = handleClick;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t9;
+		$[24] = viewportLabel;
+		$[25] = t10;
+	} else {
+		t10 = $[25];
+	}
+	return t10;
+}
+/**
+* One slide. Its trailing margin is the gap to the next slide, so Embla measures it and centers the slide itself. It is
+* a group described as a slide; pass `role="tabpanel"` only when indicator tabs control it.
+* @param props - Native attributes of the slide panel.
+* @returns The slide panel.
+*/
+function CarouselItem(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("me-4 min-w-0 shrink-0 grow-0 basis-full", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			role: "group",
+			"aria-roledescription": CAROUSEL_COPY.slideRoleDescription,
+			"data-slot": "carousel-item",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/**
+* Moves to the previous slide. It stays focusable and reports `aria-disabled` at the first slide, so focus is never
+* lost when the carousel reaches its edge.
+* @param props - Control button attributes; `aria-label` defaults to "Diapositiva anterior".
+* @returns The previous control.
+*/
+function CarouselPrevious(t0) {
+	const $ = _c(16);
+	let className;
+	let onClick;
+	let props;
+	if ($[0] !== t0) {
+		({className, onClick, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = onClick;
+		$[3] = props;
+	} else {
+		className = $[1];
+		onClick = $[2];
+		props = $[3];
+	}
+	const { scrollPrev, canScrollPrev } = useCarousel();
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn(carouselControlClassName, className);
+		$[4] = className;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	const t2 = !canScrollPrev || undefined;
+	let t3;
+	if ($[6] !== canScrollPrev || $[7] !== onClick || $[8] !== scrollPrev) {
+		t3 = (event) => {
+			onClick?.(event);
+			if (canScrollPrev) {
+				scrollPrev();
+			}
+		};
+		$[6] = canScrollPrev;
+		$[7] = onClick;
+		$[8] = scrollPrev;
+		$[9] = t3;
+	} else {
+		t3 = $[9];
+	}
+	let t4;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ _jsx(ChevronLeftIcon, {
+			strokeWidth: 1.75,
+			"aria-hidden": "true"
+		});
+		$[10] = t4;
+	} else {
+		t4 = $[10];
+	}
+	let t5;
+	if ($[11] !== props || $[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
+		t5 = /* @__PURE__ */ _jsx(ControlButton, {
+			"data-slot": "carousel-previous",
+			variant: "outline",
+			size: "icon",
+			className: t1,
+			"aria-label": CAROUSEL_COPY.previous,
+			"aria-disabled": t2,
+			onClick: t3,
+			...props,
+			children: t4
+		});
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t5;
+	} else {
+		t5 = $[15];
+	}
+	return t5;
+}
+/**
+* Moves to the next slide. It stays focusable and reports `aria-disabled` at the last slide.
+* @param props - Control button attributes; `aria-label` defaults to "Diapositiva siguiente".
+* @returns The next control.
+*/
+function CarouselNext(t0) {
+	const $ = _c(16);
+	let className;
+	let onClick;
+	let props;
+	if ($[0] !== t0) {
+		({className, onClick, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = onClick;
+		$[3] = props;
+	} else {
+		className = $[1];
+		onClick = $[2];
+		props = $[3];
+	}
+	const { scrollNext, canScrollNext } = useCarousel();
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn(carouselControlClassName, className);
+		$[4] = className;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	const t2 = !canScrollNext || undefined;
+	let t3;
+	if ($[6] !== canScrollNext || $[7] !== onClick || $[8] !== scrollNext) {
+		t3 = (event) => {
+			onClick?.(event);
+			if (canScrollNext) {
+				scrollNext();
+			}
+		};
+		$[6] = canScrollNext;
+		$[7] = onClick;
+		$[8] = scrollNext;
+		$[9] = t3;
+	} else {
+		t3 = $[9];
+	}
+	let t4;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ _jsx(ChevronRightIcon, {
+			strokeWidth: 1.75,
+			"aria-hidden": "true"
+		});
+		$[10] = t4;
+	} else {
+		t4 = $[10];
+	}
+	let t5;
+	if ($[11] !== props || $[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
+		t5 = /* @__PURE__ */ _jsx(ControlButton, {
+			"data-slot": "carousel-next",
+			variant: "outline",
+			size: "icon",
+			className: t1,
+			"aria-label": CAROUSEL_COPY.next,
+			"aria-disabled": t2,
+			onClick: t3,
+			...props,
+			children: t4
+		});
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t5;
+	} else {
+		t5 = $[15];
+	}
+	return t5;
+}
+/**
+* Default accessible name of one slide and its indicator, for example "Diapositiva 2 de 5".
+* @param index - Zero-based slide position.
+* @param count - Number of slides.
+* @returns The Spanish slide label.
+*/
+function defaultCarouselSlideLabel(index, count) {
+	return `${CAROUSEL_COPY.slideLabelPrefix} ${index + 1} ${CAROUSEL_COPY.slideLabelSeparator} ${count}`;
+}
+/**
+* Continuous slide position, in slides, of a scroll progress between Embla's snap points. Snaps are progress values,
+* so slides of different sizes still map to whole slides at rest.
+* @param progress - Embla's scroll progress, from 0 to 1.
+* @param snaps - Embla's snap points, as scroll progress values.
+* @returns The fractional index of the slide in view.
+*/
+function toSlidePosition(progress, snaps) {
+	const lastIndex = snaps.length - 1;
+	if (lastIndex < 1) return 0;
+	const first = snaps[0] ?? 0;
+	const last = snaps[lastIndex] ?? 1;
+	if (progress <= first) return 0;
+	if (progress >= last) return lastIndex;
+	for (let index = 0; index < lastIndex; index += 1) {
+		const start = snaps[index] ?? 0;
+		const end = snaps[index + 1] ?? 1;
+		if (progress <= end) return end > start ? index + (progress - start) / (end - start) : index;
+	}
+	return lastIndex;
+}
+/**
+* Arc's page indicator: a tab per snap point, where the selected one stretches into a pill that follows the track frame
+* by frame while it is dragged or scrolled. Only the selected tab is in the tab order; activating a tab scrolls to its
+* slide, and while a tab has focus the carousel's arrow, Home and End keys move the focus to the tab of the new slide.
+* It renders once Embla has measured the slides, or from `initialCount` until then. Place it inside `Carousel`.
+* @param props - Optional accessible copy, slide ids and rotation drain plus native attributes of the list.
+* @returns The indicator tab list, or nothing until there is more than one snap point.
+*/
+function CarouselIndicators(t0) {
+	const $ = _c(32);
+	let className;
+	let drain;
+	let getSlideId;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		({className, label: t1, slideLabel: t2, getSlideId, drain, initialCount: t3, initialIndex: t4, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = drain;
+		$[3] = getSlideId;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		className = $[1];
+		drain = $[2];
+		getSlideId = $[3];
+		props = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+	}
+	const label = t1 === undefined ? CAROUSEL_COPY.indicatorsLabel : t1;
+	const slideLabel = t2 === undefined ? defaultCarouselSlideLabel : t2;
+	const initialCount = t3 === undefined ? 0 : t3;
+	const initialIndex = t4 === undefined ? 0 : t4;
+	const { api } = useCarousel();
+	const reduceMotion = usePrefersReducedMotion();
+	const [snapCount, setSnapCount] = React.useState(initialCount);
+	const [selectedIndex, setSelectedIndex] = React.useState(initialIndex);
+	const [isLooping, setIsLooping] = React.useState(false);
+	const position = useMotionValue(initialIndex);
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = [];
+		$[9] = t5;
+	} else {
+		t5 = $[9];
+	}
+	const indicatorRefs = React.useRef(t5);
+	let t6;
+	let t7;
+	if ($[10] !== api || $[11] !== position || $[12] !== reduceMotion) {
+		t6 = () => {
+			if (!api) {
+				return;
+			}
+			let positionAnimation = null;
+			const isLoop = () => api.internalEngine().options.loop;
+			const trackScroll = () => {
+				if (isLoop()) {
+					return;
+				}
+				positionAnimation?.stop();
+				position.set(toSlidePosition(api.scrollProgress(), api.scrollSnapList()));
+			};
+			const syncSelection = () => {
+				const nextIndex = api.selectedScrollSnap();
+				const count = api.scrollSnapList().length;
+				setSnapCount(count);
+				setSelectedIndex(nextIndex);
+				setIsLooping(isLoop());
+				if (isLoop()) {
+					positionAnimation?.stop();
+					const turns = Math.round((position.get() - nextIndex) / count);
+					const destination = nextIndex + turns * count;
+					positionAnimation = reduceMotion ? null : animate(position, destination, {
+						...ARC_SPRING_SMOOTH,
+						onComplete: () => position.jump(nextIndex)
+					});
+					if (reduceMotion) {
+						position.set(nextIndex);
+					}
+				}
+				if (indicatorRefs.current.some(_temp)) {
+					indicatorRefs.current[nextIndex]?.focus({ preventScroll: true });
+				}
+			};
+			const syncAll = () => {
+				syncSelection();
+				if (isLoop()) {
+					positionAnimation?.stop();
+					position.set(api.selectedScrollSnap());
+				} else {
+					trackScroll();
+				}
+			};
+			syncAll();
+			api.on("reInit", syncAll);
+			api.on("select", syncSelection);
+			api.on("scroll", trackScroll);
+			return () => {
+				positionAnimation?.stop();
+				api.off("reInit", syncAll);
+				api.off("select", syncSelection);
+				api.off("scroll", trackScroll);
+			};
+		};
+		t7 = [
+			api,
+			position,
+			reduceMotion
+		];
+		$[10] = api;
+		$[11] = position;
+		$[12] = reduceMotion;
+		$[13] = t6;
+		$[14] = t7;
+	} else {
+		t6 = $[13];
+		t7 = $[14];
+	}
+	React.useEffect(t6, t7);
+	if (snapCount < 2) {
+		return null;
+	}
+	let t8;
+	if ($[15] !== className) {
+		t8 = cn("flex min-w-0 items-center", className);
+		$[15] = className;
+		$[16] = t8;
+	} else {
+		t8 = $[16];
+	}
+	let t9;
+	if ($[17] !== api || $[18] !== drain || $[19] !== getSlideId || $[20] !== isLooping || $[21] !== position || $[22] !== reduceMotion || $[23] !== selectedIndex || $[24] !== slideLabel || $[25] !== snapCount) {
+		t9 = Array.from({ length: snapCount }, (_, index) => /* @__PURE__ */ _jsx(CarouselIndicator, {
+			index,
+			lastIndex: snapCount - 1,
+			isLooping,
+			position,
+			isSelected: index === selectedIndex,
+			drain: index === selectedIndex ? drain : undefined,
+			label: slideLabel(index, snapCount),
+			controls: getSlideId?.(index),
+			indicatorRef: (node) => {
+				indicatorRefs.current[index] = node;
+			},
+			onSelect: () => api?.scrollTo(index, reduceMotion)
+		}, index));
+		$[17] = api;
+		$[18] = drain;
+		$[19] = getSlideId;
+		$[20] = isLooping;
+		$[21] = position;
+		$[22] = reduceMotion;
+		$[23] = selectedIndex;
+		$[24] = slideLabel;
+		$[25] = snapCount;
+		$[26] = t9;
+	} else {
+		t9 = $[26];
+	}
+	let t10;
+	if ($[27] !== label || $[28] !== props || $[29] !== t8 || $[30] !== t9) {
+		t10 = /* @__PURE__ */ _jsx("div", {
+			role: "tablist",
+			"aria-label": label,
+			"data-slot": "carousel-indicators",
+			className: t8,
+			...props,
+			children: t9
+		});
+		$[27] = label;
+		$[28] = props;
+		$[29] = t8;
+		$[30] = t9;
+		$[31] = t10;
+	} else {
+		t10 = $[31];
+	}
+	return t10;
+}
+function _temp(indicator) {
+	return indicator !== null && indicator === document.activeElement;
+}
+/** One tab whose dot grows toward the pill as the track nears its slide, so the pill hands over continuously. */
+function CarouselIndicator(t0) {
+	const $ = _c(22);
+	const { index, lastIndex, isLooping, position, isSelected, drain, label, controls, indicatorRef, onSelect } = t0;
+	let t1;
+	if ($[0] !== index || $[1] !== isLooping || $[2] !== lastIndex) {
+		t1 = (value) => {
+			if (!isLooping) {
+				return Math.max(0, 1 - Math.abs(Math.min(lastIndex, Math.max(0, value)) - index));
+			}
+			const count = lastIndex + 1;
+			const distance = Math.abs(value - index) % count;
+			return Math.max(0, 1 - Math.min(distance, count - distance));
+		};
+		$[0] = index;
+		$[1] = isLooping;
+		$[2] = lastIndex;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	const emphasis = useTransform(position, t1);
+	const length = useTransform(emphasis, _temp2);
+	const t2 = isSelected ? 0 : -1;
+	let t3;
+	if ($[4] !== length) {
+		t3 = { width: length };
+		$[4] = length;
+		$[5] = t3;
+	} else {
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] !== emphasis) {
+		t4 = /* @__PURE__ */ _jsx(motion.span, {
+			className: "absolute inset-0 bg-foreground",
+			style: { opacity: emphasis }
+		});
+		$[6] = emphasis;
+		$[7] = t4;
+	} else {
+		t4 = $[7];
+	}
+	let t5;
+	if ($[8] !== drain) {
+		t5 = drain ? /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "carousel-indicator-drain",
+			className: "absolute inset-0 origin-right bg-border-strong",
+			style: { scaleX: drain }
+		}) : null;
+		$[8] = drain;
+		$[9] = t5;
+	} else {
+		t5 = $[9];
+	}
+	let t6;
+	if ($[10] !== t3 || $[11] !== t4 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ _jsxs(motion.span, {
+			"aria-hidden": "true",
+			className: "relative block h-1.5 overflow-hidden rounded-full bg-border-strong transition-colors duration-(--duration-fast) ease-(--ease-standard) motion-reduce:transition-none hover-fine:group-hover/indicator:bg-text-muted",
+			style: t3,
+			children: [t4, t5]
+		});
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
+	} else {
+		t6 = $[13];
+	}
+	let t7;
+	if ($[14] !== controls || $[15] !== indicatorRef || $[16] !== isSelected || $[17] !== label || $[18] !== onSelect || $[19] !== t2 || $[20] !== t6) {
+		t7 = /* @__PURE__ */ _jsx("button", {
+			ref: indicatorRef,
+			type: "button",
+			role: "tab",
+			"aria-selected": isSelected,
+			"aria-controls": controls,
+			"aria-label": label,
+			tabIndex: t2,
+			"data-slot": "carousel-indicator",
+			className: "group/indicator grid h-(--control-height-sm) shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent px-[5px] py-0 outline-none [-webkit-tap-highlight-color:transparent] focus-visible:ring-3 focus-visible:ring-ring/50 @max-[340px]/carousel:px-1",
+			onClick: onSelect,
+			children: t6
+		});
+		$[14] = controls;
+		$[15] = indicatorRef;
+		$[16] = isSelected;
+		$[17] = label;
+		$[18] = onSelect;
+		$[19] = t2;
+		$[20] = t6;
+		$[21] = t7;
+	} else {
+		t7 = $[21];
+	}
+	return t7;
+}
+function _temp2(value_0) {
+	return CAROUSEL_INDICATOR_LENGTH_PX.dot + (CAROUSEL_INDICATOR_LENGTH_PX.pill - CAROUSEL_INDICATOR_LENGTH_PX.dot) * value_0;
+}
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselIndicators, defaultCarouselSlideLabel, useCarousel };