beez-ui 2.5.0 → 2.6.1

package/dist/components/carousel.js

@@ -1,23 +1,21 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
+/**
+* Carousel on Embla with Arc's carousel design (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): round
+* outlined controls on the surface that answer hover on fine pointers and press in, a grab cursor while the track can
+* be dragged, Home and End to reach the edges, and optional Arc indicators whose pill stretches and travels with the
+* slides frame by frame. Embla keeps dragging, snapping, looping and plugins.
+*/
 import * as React from "react";
 import useEmblaCarousel from "embla-carousel-react";
+import { animate, motion, useMotionValue, useTransform } from "motion/react";
+import { CAROUSEL_COPY, CAROUSEL_EDGE_KEYS, CAROUSEL_INDICATOR_LENGTH_PX, 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 { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Arrow keys that move to the previous and next slide along each axis. */
-const CAROUSEL_KEYS = {
-	horizontal: {
-		previous: "ArrowLeft",
-		next: "ArrowRight"
-	},
-	vertical: {
-		previous: "ArrowUp",
-		next: "ArrowDown"
-	}
-};
 const CarouselContext = React.createContext(null);
 function useCarousel() {
 	const context = React.useContext(CarouselContext);
@@ -26,8 +24,10 @@ function useCarousel() {
 	}
 	return context;
 }
+/** Arc's round control on the surface: outlined, a fill on hover-capable pointers and a dimmed disabled state. */
+const carouselControlClassName = "absolute touch-manipulation rounded-full border-border bg-surface text-foreground hover-fine:not-disabled:bg-surface-muted disabled:bg-surface disabled:text-text-muted disabled:opacity-50 [&_svg:not([class*='size-'])]:size-[18px]";
 function Carousel(t0) {
-	const $ = _c(48);
+	const $ = _c(50);
 	let children;
 	let className;
 	let opts;
@@ -111,8 +111,19 @@ function Carousel(t0) {
 	}
 	const scrollNext = t6;
 	let t7;
-	if ($[18] !== orientation || $[19] !== scrollNext || $[20] !== scrollPrev) {
+	if ($[18] !== api || $[19] !== orientation || $[20] !== scrollNext || $[21] !== scrollPrev || $[22] !== shouldReduceMotion) {
 		t7 = (event) => {
+			if (event.altKey || event.ctrlKey || event.metaKey) {
+				return;
+			}
+			const keyboardOwner = event.target instanceof Element ? event.target.closest(CAROUSEL_OWN_KEYBOARD_SELECTOR) : null;
+			if (keyboardOwner && event.currentTarget.contains(keyboardOwner)) {
+				return;
+			}
+			const closestCarousel = event.target instanceof Element ? event.target.closest(CAROUSEL_ROOT_SELECTOR) : null;
+			if (closestCarousel && closestCarousel !== event.currentTarget) {
+				return;
+			}
 			const keys = CAROUSEL_KEYS[orientation];
 			if (event.key === keys.previous) {
 				event.preventDefault();
@@ -121,20 +132,32 @@ function Carousel(t0) {
 				if (event.key === keys.next) {
 					event.preventDefault();
 					scrollNext();
+				} else {
+					if (api && event.key === CAROUSEL_EDGE_KEYS.first) {
+						event.preventDefault();
+						api.scrollTo(0, shouldReduceMotion);
+					} else {
+						if (api && event.key === CAROUSEL_EDGE_KEYS.last) {
+							event.preventDefault();
+							api.scrollTo(api.scrollSnapList().length - 1, shouldReduceMotion);
+						}
+					}
 				}
 			}
 		};
-		$[18] = orientation;
-		$[19] = scrollNext;
-		$[20] = scrollPrev;
-		$[21] = t7;
+		$[18] = api;
+		$[19] = orientation;
+		$[20] = scrollNext;
+		$[21] = scrollPrev;
+		$[22] = shouldReduceMotion;
+		$[23] = t7;
 	} else {
-		t7 = $[21];
+		t7 = $[23];
 	}
 	const handleKeyDown = t7;
 	let t8;
 	let t9;
-	if ($[22] !== api || $[23] !== setApi) {
+	if ($[24] !== api || $[25] !== setApi) {
 		t8 = () => {
 			if (!api || !setApi) {
 				return;
@@ -142,18 +165,18 @@ function Carousel(t0) {
 			setApi(api);
 		};
 		t9 = [api, setApi];
-		$[22] = api;
-		$[23] = setApi;
-		$[24] = t8;
-		$[25] = t9;
+		$[24] = api;
+		$[25] = setApi;
+		$[26] = t8;
+		$[27] = t9;
 	} else {
-		t8 = $[24];
-		t9 = $[25];
+		t8 = $[26];
+		t9 = $[27];
 	}
 	React.useEffect(t8, t9);
 	let t10;
 	let t11;
-	if ($[26] !== api) {
+	if ($[28] !== api) {
 		t10 = () => {
 			if (!api) {
 				return;
@@ -173,17 +196,17 @@ function Carousel(t0) {
 			};
 		};
 		t11 = [api, onSelect];
-		$[26] = api;
-		$[27] = t10;
-		$[28] = t11;
+		$[28] = api;
+		$[29] = t10;
+		$[30] = t11;
 	} else {
-		t10 = $[27];
-		t11 = $[28];
+		t10 = $[29];
+		t11 = $[30];
 	}
 	React.useEffect(t10, t11);
 	const t12 = orientation || (opts?.axis === "y" ? "vertical" : "horizontal");
 	let t13;
-	if ($[29] !== api || $[30] !== canScrollNext || $[31] !== canScrollPrev || $[32] !== carouselRef || $[33] !== opts || $[34] !== scrollNext || $[35] !== scrollPrev || $[36] !== t12) {
+	if ($[31] !== api || $[32] !== canScrollNext || $[33] !== canScrollPrev || $[34] !== carouselRef || $[35] !== opts || $[36] !== scrollNext || $[37] !== scrollPrev || $[38] !== t12) {
 		t13 = {
 			carouselRef,
 			api,
@@ -194,28 +217,28 @@ function Carousel(t0) {
 			canScrollPrev,
 			canScrollNext
 		};
-		$[29] = api;
-		$[30] = canScrollNext;
-		$[31] = canScrollPrev;
-		$[32] = carouselRef;
-		$[33] = opts;
-		$[34] = scrollNext;
-		$[35] = scrollPrev;
-		$[36] = t12;
-		$[37] = t13;
-	} else {
-		t13 = $[37];
+		$[31] = api;
+		$[32] = canScrollNext;
+		$[33] = canScrollPrev;
+		$[34] = carouselRef;
+		$[35] = opts;
+		$[36] = scrollNext;
+		$[37] = scrollPrev;
+		$[38] = t12;
+		$[39] = t13;
+	} else {
+		t13 = $[39];
 	}
 	let t14;
-	if ($[38] !== className) {
+	if ($[40] !== className) {
 		t14 = cn("relative", className);
-		$[38] = className;
-		$[39] = t14;
+		$[40] = className;
+		$[41] = t14;
 	} else {
-		t14 = $[39];
+		t14 = $[41];
 	}
 	let t15;
-	if ($[40] !== children || $[41] !== handleKeyDown || $[42] !== props || $[43] !== t14) {
+	if ($[42] !== children || $[43] !== handleKeyDown || $[44] !== props || $[45] !== t14) {
 		t15 = /* @__PURE__ */ _jsx("div", {
 			onKeyDownCapture: handleKeyDown,
 			className: t14,
@@ -225,30 +248,34 @@ function Carousel(t0) {
 			...props,
 			children
 		});
-		$[40] = children;
-		$[41] = handleKeyDown;
-		$[42] = props;
-		$[43] = t14;
-		$[44] = t15;
+		$[42] = children;
+		$[43] = handleKeyDown;
+		$[44] = props;
+		$[45] = t14;
+		$[46] = t15;
 	} else {
-		t15 = $[44];
+		t15 = $[46];
 	}
 	let t16;
-	if ($[45] !== t13 || $[46] !== t15) {
+	if ($[47] !== t13 || $[48] !== t15) {
 		t16 = /* @__PURE__ */ _jsx(CarouselContext.Provider, {
 			value: t13,
 			children: t15
 		});
-		$[45] = t13;
-		$[46] = t15;
-		$[47] = t16;
+		$[47] = t13;
+		$[48] = t15;
+		$[49] = t16;
 	} else {
-		t16 = $[47];
+		t16 = $[49];
 	}
 	return t16;
 }
+/**
+* The clipped 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.
+*/
 function CarouselContent(t0) {
-	const $ = _c(12);
+	const $ = _c(19);
 	let className;
 	let props;
 	if ($[0] !== t0) {
@@ -260,44 +287,84 @@ function CarouselContent(t0) {
 		className = $[1];
 		props = $[2];
 	}
-	const { carouselRef, orientation } = useCarousel();
-	const t1 = orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col";
+	const { carouselRef, api, opts, orientation, canScrollPrev, canScrollNext } = useCarousel();
+	const [isDragging, setIsDragging] = React.useState(false);
+	const isDraggable = opts?.watchDrag !== false && (canScrollPrev || canScrollNext);
+	let t1;
 	let t2;
-	if ($[3] !== className || $[4] !== t1) {
-		t2 = cn("flex", t1, className);
-		$[3] = className;
+	if ($[3] !== api) {
+		t1 = () => {
+			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);
+			};
+		};
+		t2 = [api];
+		$[3] = api;
 		$[4] = t1;
 		$[5] = t2;
 	} else {
+		t1 = $[4];
 		t2 = $[5];
 	}
-	let t3;
-	if ($[6] !== props || $[7] !== t2) {
-		t3 = /* @__PURE__ */ _jsx("div", {
-			className: t2,
+	React.useEffect(t1, t2);
+	const t3 = isDraggable && "pointer-fine:cursor-grab pointer-fine:data-dragging:cursor-grabbing";
+	let t4;
+	if ($[6] !== t3) {
+		t4 = cn("overflow-hidden", t3);
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t4 = $[7];
+	}
+	const t5 = isDraggable && isDragging || undefined;
+	const t6 = orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col";
+	let t7;
+	if ($[8] !== className || $[9] !== t6) {
+		t7 = cn("flex", t6, className);
+		$[8] = className;
+		$[9] = t6;
+		$[10] = t7;
+	} else {
+		t7 = $[10];
+	}
+	let t8;
+	if ($[11] !== props || $[12] !== t7) {
+		t8 = /* @__PURE__ */ _jsx("div", {
+			className: t7,
 			...props
 		});
-		$[6] = props;
-		$[7] = t2;
-		$[8] = t3;
+		$[11] = props;
+		$[12] = t7;
+		$[13] = t8;
 	} else {
-		t3 = $[8];
+		t8 = $[13];
 	}
-	let t4;
-	if ($[9] !== carouselRef || $[10] !== t3) {
-		t4 = /* @__PURE__ */ _jsx("div", {
+	let t9;
+	if ($[14] !== carouselRef || $[15] !== t4 || $[16] !== t5 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ _jsx("div", {
 			ref: carouselRef,
-			className: "overflow-hidden",
+			className: t4,
 			"data-slot": "carousel-content",
-			children: t3
+			"data-dragging": t5,
+			children: t8
 		});
-		$[9] = carouselRef;
-		$[10] = t3;
-		$[11] = t4;
+		$[14] = carouselRef;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t8;
+		$[18] = t9;
 	} else {
-		t4 = $[11];
+		t9 = $[18];
 	}
-	return t4;
+	return t9;
 }
 function CarouselItem(t0) {
 	const $ = _c(9);
@@ -360,12 +427,12 @@ function CarouselPrevious(t0) {
 		t2 = $[4];
 	}
 	const variant = t1 === undefined ? "outline" : t1;
-	const size = t2 === undefined ? "icon-sm" : t2;
+	const size = t2 === undefined ? "icon-lg" : t2;
 	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 	const t3 = orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90";
 	let t4;
 	if ($[5] !== className || $[6] !== t3) {
-		t4 = cn("absolute touch-manipulation rounded-full", t3, className);
+		t4 = cn(carouselControlClassName, t3, className);
 		$[5] = className;
 		$[6] = t3;
 		$[7] = t4;
@@ -376,7 +443,7 @@ function CarouselPrevious(t0) {
 	let t6;
 	let t7;
 	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ _jsx(ChevronLeftIcon, {});
+		t6 = /* @__PURE__ */ _jsx(ChevronLeftIcon, { strokeWidth: 1.75 });
 		t7 = /* @__PURE__ */ _jsx("span", {
 			className: "sr-only",
 			children: "Previous slide"
@@ -431,12 +498,12 @@ function CarouselNext(t0) {
 		t2 = $[4];
 	}
 	const variant = t1 === undefined ? "outline" : t1;
-	const size = t2 === undefined ? "icon-sm" : t2;
+	const size = t2 === undefined ? "icon-lg" : t2;
 	const { orientation, scrollNext, canScrollNext } = useCarousel();
 	const t3 = orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90";
 	let t4;
 	if ($[5] !== className || $[6] !== t3) {
-		t4 = cn("absolute touch-manipulation rounded-full", t3, className);
+		t4 = cn(carouselControlClassName, t3, className);
 		$[5] = className;
 		$[6] = t3;
 		$[7] = t4;
@@ -447,7 +514,7 @@ function CarouselNext(t0) {
 	let t6;
 	let t7;
 	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ _jsx(ChevronRightIcon, {});
+		t6 = /* @__PURE__ */ _jsx(ChevronRightIcon, { strokeWidth: 1.75 });
 		t7 = /* @__PURE__ */ _jsx("span", {
 			className: "sr-only",
 			children: "Next slide"
@@ -482,4 +549,318 @@ function CarouselNext(t0) {
 	}
 	return t8;
 }
-export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel };
+/**
+* Default accessible name of one 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 trimmed edges and 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 for a carousel: one dot per snap point, where the current one stretches into a pill that
+* follows the track frame by frame while it is dragged or scrolled. The dots are buttons in a named group and the
+* current one carries `aria-current`; activating a dot scrolls to its slide, and when a dot has focus the carousel's
+* arrow, Home and End keys move the focus to the dot of the new slide. It renders
+* once Embla has measured the slides. Place it inside `Carousel`.
+* @param props - Optional accessible copy plus native attributes of the list.
+* @returns The indicator list, or nothing until there is more than one snap point.
+*/
+function CarouselIndicators(t0) {
+	const $ = _c(28);
+	let className;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({className, label: t1, slideLabel: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	const label = t1 === undefined ? CAROUSEL_COPY.indicatorsLabel : t1;
+	const slideLabel = t2 === undefined ? defaultCarouselSlideLabel : t2;
+	const { api, orientation } = useCarousel();
+	const reduceMotion = usePrefersReducedMotion();
+	const [snapCount, setSnapCount] = React.useState(0);
+	const [selectedIndex, setSelectedIndex] = React.useState(0);
+	const [isLooping, setIsLooping] = React.useState(false);
+	const position = useMotionValue(0);
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = [];
+		$[5] = t3;
+	} else {
+		t3 = $[5];
+	}
+	const indicatorRefs = React.useRef(t3);
+	let t4;
+	let t5;
+	if ($[6] !== api || $[7] !== position || $[8] !== reduceMotion) {
+		t4 = () => {
+			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);
+			};
+		};
+		t5 = [
+			api,
+			position,
+			reduceMotion
+		];
+		$[6] = api;
+		$[7] = position;
+		$[8] = reduceMotion;
+		$[9] = t4;
+		$[10] = t5;
+	} else {
+		t4 = $[9];
+		t5 = $[10];
+	}
+	React.useEffect(t4, t5);
+	if (snapCount < 2) {
+		return null;
+	}
+	const t6 = orientation === "vertical" && "flex-col";
+	let t7;
+	if ($[11] !== className || $[12] !== t6) {
+		t7 = cn("flex min-w-0 items-center justify-center", t6, className);
+		$[11] = className;
+		$[12] = t6;
+		$[13] = t7;
+	} else {
+		t7 = $[13];
+	}
+	let t8;
+	if ($[14] !== api || $[15] !== isLooping || $[16] !== orientation || $[17] !== position || $[18] !== reduceMotion || $[19] !== selectedIndex || $[20] !== slideLabel || $[21] !== snapCount) {
+		t8 = Array.from({ length: snapCount }, (_, index) => /* @__PURE__ */ _jsx(CarouselIndicator, {
+			index,
+			lastIndex: snapCount - 1,
+			isLooping,
+			position,
+			isSelected: index === selectedIndex,
+			orientation: orientation ?? "horizontal",
+			label: slideLabel(index, snapCount),
+			indicatorRef: (node) => {
+				indicatorRefs.current[index] = node;
+			},
+			onSelect: () => api?.scrollTo(index, reduceMotion)
+		}, index));
+		$[14] = api;
+		$[15] = isLooping;
+		$[16] = orientation;
+		$[17] = position;
+		$[18] = reduceMotion;
+		$[19] = selectedIndex;
+		$[20] = slideLabel;
+		$[21] = snapCount;
+		$[22] = t8;
+	} else {
+		t8 = $[22];
+	}
+	let t9;
+	if ($[23] !== label || $[24] !== props || $[25] !== t7 || $[26] !== t8) {
+		t9 = /* @__PURE__ */ _jsx("div", {
+			role: "group",
+			"aria-label": label,
+			"data-slot": "carousel-indicators",
+			className: t7,
+			...props,
+			children: t8
+		});
+		$[23] = label;
+		$[24] = props;
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = t9;
+	} else {
+		t9 = $[27];
+	}
+	return t9;
+}
+function _temp(indicator) {
+	return indicator !== null && indicator === document.activeElement;
+}
+/** One dot that grows toward the pill as the track nears its slide, so the pill hands over continuously. */
+function CarouselIndicator(t0) {
+	const $ = _c(24);
+	const { index, lastIndex, isLooping, position, isSelected, orientation, label, 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 || undefined;
+	const t3 = orientation === "horizontal" ? "h-(--control-height-sm) px-[5px]" : "w-(--control-height-sm) py-[5px]";
+	let t4;
+	if ($[4] !== t3) {
+		t4 = cn("group/indicator grid shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 outline-none [-webkit-tap-highlight-color:transparent] focus-visible:ring-3 focus-visible:ring-ring/50", t3);
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		t4 = $[5];
+	}
+	const t5 = orientation === "horizontal" ? "h-1.5" : "w-1.5";
+	let t6;
+	if ($[6] !== t5) {
+		t6 = cn("relative block overflow-hidden rounded-full bg-border-strong transition-colors duration-(--duration-fast) ease-(--ease-standard) motion-reduce:transition-none group-hover/indicator:bg-text-muted", t5);
+		$[6] = t5;
+		$[7] = t6;
+	} else {
+		t6 = $[7];
+	}
+	let t7;
+	if ($[8] !== length || $[9] !== orientation) {
+		t7 = orientation === "horizontal" ? { width: length } : { height: length };
+		$[8] = length;
+		$[9] = orientation;
+		$[10] = t7;
+	} else {
+		t7 = $[10];
+	}
+	let t8;
+	if ($[11] !== emphasis) {
+		t8 = /* @__PURE__ */ _jsx(motion.span, {
+			className: "absolute inset-0 bg-foreground",
+			style: { opacity: emphasis }
+		});
+		$[11] = emphasis;
+		$[12] = t8;
+	} else {
+		t8 = $[12];
+	}
+	let t9;
+	if ($[13] !== t6 || $[14] !== t7 || $[15] !== t8) {
+		t9 = /* @__PURE__ */ _jsx(motion.span, {
+			"aria-hidden": "true",
+			className: t6,
+			style: t7,
+			children: t8
+		});
+		$[13] = t6;
+		$[14] = t7;
+		$[15] = t8;
+		$[16] = t9;
+	} else {
+		t9 = $[16];
+	}
+	let t10;
+	if ($[17] !== indicatorRef || $[18] !== label || $[19] !== onSelect || $[20] !== t2 || $[21] !== t4 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ _jsx("button", {
+			ref: indicatorRef,
+			type: "button",
+			"aria-current": t2,
+			"aria-label": label,
+			"data-slot": "carousel-indicator",
+			className: t4,
+			onClick: onSelect,
+			children: t9
+		});
+		$[17] = indicatorRef;
+		$[18] = label;
+		$[19] = onSelect;
+		$[20] = t2;
+		$[21] = t4;
+		$[22] = t9;
+		$[23] = t10;
+	} else {
+		t10 = $[23];
+	}
+	return t10;
+}
+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, useCarousel };