@astra-kit/ui 0.0.0-stage → 0.0.0

package/dist/components/carousel.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Arc's Carousel (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) as a closed component: one child per
+ * slide, a centered slide row that is dragged, flicked or arrowed through, and a control row under it with an optional
+ * rotation control, the indicator tab list and the arrows. Embla runs inside and is never exposed; the @astra-kit/ui
+ * extensions (`loop`, `duration`, `watchFocus`, `onSettle`, deferred re-initialization, labels and visibility of the
+ * controls) cover media viewers that used Embla's API directly.
+ */
+import * as React from "react";
+/** Props of {@link Carousel}: Arc's carousel API plus the @astra-kit/ui extensions marked below. */
+type CarouselProps = {
+    /** Names the carousel for assistive technology, for example "Fotos del encuentro". */
+    label: string;
+    /** One child per slide. Give each a stable `key` when the list can change. */
+    children: React.ReactNode;
+    /** Controlled active slide. Pair with `onIndexChange`. */
+    index?: number;
+    /** Initial slide when uncontrolled. Defaults to 0. */
+    defaultIndex?: number;
+    /** Called as soon as the active slide changes, when the scroll toward it starts. */
+    onIndexChange?: (index: number) => void;
+    /** Width of one slide as a CSS length; `cqw` is a share of the carousel width. Defaults to `min(80cqw, 340px)`. */
+    slideSize?: string;
+    /** Names each slide and its indicator. Defaults to "Diapositiva 2 de 5". */
+    slideLabel?: (index: number, count: number) => string;
+    /**
+     * Milliseconds per slide. Adds a play control that rotates through the slides; rotation pauses on hover, keyboard
+     * focus, drag, offscreen and in hidden tabs; with reduced motion the control stays but is disabled.
+     */
+    interval?: number;
+    /** Starts rotating on mount. Off by default, so motion begins with the viewer. */
+    autoplay?: boolean;
+    /** Class of the root section. */
+    className?: string;
+    /** @astra-kit/ui: wraps from the last slide to the first and back. Defaults to `false`. */
+    loop?: boolean;
+    /** @astra-kit/ui: speed of a scroll between slides, in Embla's units (higher is slower). Defaults to Embla's 25. */
+    duration?: number;
+    /**
+     * @astra-kit/ui: scrolls to a slide when something inside it receives focus. Defaults to `true`; turn it off when a slide
+     * holds content that keeps focus, such as an embedded player, so it never pulls the carousel back.
+     */
+    watchFocus?: boolean;
+    /** @astra-kit/ui: called once a scroll has come to rest on a slide, the moment to mount heavy slide content. */
+    onSettle?: (index: number) => void;
+    /** @astra-kit/ui: accessible name of the previous arrow. Defaults to "Diapositiva anterior". */
+    previousLabel?: string;
+    /** @astra-kit/ui: accessible name of the next arrow. Defaults to "Diapositiva siguiente". */
+    nextLabel?: string;
+    /** @astra-kit/ui: shows the previous and next arrows. Defaults to `true`. */
+    showControls?: boolean;
+    /** @astra-kit/ui: shows the indicator tab list. Defaults to `true`. */
+    showIndicators?: boolean;
+    /** @astra-kit/ui: class added to every slide panel. */
+    slideClassName?: string;
+    /**
+     * @astra-kit/ui: class of the clipped, focusable viewport around the slide track, for example to give a media viewer a
+     * definite height.
+     */
+    viewportClassName?: string;
+    /** @astra-kit/ui: class of the slide track inside the viewport, which lays the slides out in a row. */
+    trackClassName?: string;
+};
+/**
+ * A centered row of slides browsed by drag, flick, the arrow keys, Home and End, the arrows or the indicator tabs, with
+ * optional rotation. Neighbouring slides stay in view as a hint that there is more, and are inert until selected.
+ * @param props - Arc's carousel props plus the @astra-kit/ui extensions.
+ * @returns The carousel section.
+ */
+declare function Carousel({ label, children, index: controlledIndex, defaultIndex, onIndexChange, slideSize, slideLabel, interval, autoplay, className, loop, duration, watchFocus, onSettle, previousLabel, nextLabel, showControls, showIndicators, slideClassName, viewportClassName, trackClassName, }: CarouselProps): React.JSX.Element;
+export { Carousel };
+export type { CarouselProps };

package/dist/components/carousel.js

@@ -0,0 +1,585 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Carousel (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) as a closed component: one child per
+* slide, a centered slide row that is dragged, flicked or arrowed through, and a control row under it with an optional
+* rotation control, the indicator tab list and the arrows. Embla runs inside and is never exposed; the @astra-kit/ui
+* extensions (`loop`, `duration`, `watchFocus`, `onSettle`, deferred re-initialization, labels and visibility of the
+* controls) cover media viewers that used Embla's API directly.
+*/
+import * as React from "react";
+import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
+import { Pause, Play } from "lucide-react";
+import { CAROUSEL_COPY, CAROUSEL_DEFAULT_SLIDE_SIZE, CAROUSEL_ROTATION_ICON_ENTER_SCALE, CAROUSEL_ROTATION_ICON_SIZE_PX, CAROUSEL_SLIDE_SIZE_PROPERTY } from "../constants/carousel.js";
+import { useIsHydrated } from "../hooks/use-is-hydrated.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { cn } from "../lib/utils.js";
+import { ControlButton } from "./control-button.js";
+import { Carousel as CarouselRoot, CarouselContent, CarouselIndicators, CarouselItem, CarouselNext, CarouselPrevious, defaultCarouselSlideLabel } from "./primitives/carousel.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Clamps a slide index to the slides that exist.
+* @param index - Requested index.
+* @param count - Number of slides.
+* @returns An index between 0 and the last slide.
+*/
+function clampSlideIndex(index, count) {
+	return Math.min(Math.max(0, count - 1), Math.max(0, index));
+}
+/** Rotation icon entering from a small, blurred state, as in Arc. */
+const rotationIconHidden = {
+	opacity: 0,
+	scale: CAROUSEL_ROTATION_ICON_ENTER_SCALE,
+	filter: `blur(${ARC_BLUR.subtle}px)`
+};
+const rotationIconRest = {
+	opacity: 1,
+	scale: 1,
+	filter: "blur(0px)"
+};
+const rotationIconEnter = {
+	...ARC_SPRING_SNAPPY,
+	opacity: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.enter]
+	},
+	filter: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.enter]
+	}
+};
+const rotationIconExit = {
+	...rotationIconHidden,
+	transition: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.standard]
+	}
+};
+/**
+* Keeps Embla in step with its slides without ever cutting a scroll short. Embla re-initializes when a slide is added,
+* removed or resized; a re-initialization recreates the engine and aborts a running scroll, so while a scroll or a
+* drag is in progress the request is parked and runs once the carousel comes to rest.
+* @returns Embla's `watchResize` and `watchSlides` callbacks, stable across renders, plus the handle to bind them.
+*/
+function useDeferredReInit() {
+	const $ = _c(5);
+	const apiRef = React.useRef(undefined);
+	const isPointerDownRef = React.useRef(false);
+	const isPendingRef = React.useRef(false);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			const api = apiRef.current;
+			if (!api || api.slideNodes().length === 0) {
+				return false;
+			}
+			return isPointerDownRef.current || !api.internalEngine().scrollBody.settled();
+		};
+		$[0] = t0;
+	} else {
+		t0 = $[0];
+	}
+	const isBusy = t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			if (!isBusy()) {
+				return true;
+			}
+			isPendingRef.current = true;
+			return false;
+		};
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	const deferWhileBusy = t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			const api_0 = apiRef.current;
+			if (!api_0 || !isPendingRef.current || isBusy()) {
+				return;
+			}
+			isPendingRef.current = false;
+			api_0.reInit();
+		};
+		$[2] = t2;
+	} else {
+		t2 = $[2];
+	}
+	const flush = t2;
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (api_1) => {
+			apiRef.current = api_1;
+			if (!api_1) {
+				return;
+			}
+			const handlePointerDown = () => {
+				isPointerDownRef.current = true;
+			};
+			const handlePointerUp = () => {
+				isPointerDownRef.current = false;
+				flush();
+			};
+			const handleSettle = () => queueMicrotask(flush);
+			api_1.on("pointerDown", handlePointerDown);
+			api_1.on("pointerUp", handlePointerUp);
+			api_1.on("settle", handleSettle);
+			return () => {
+				api_1.off("pointerDown", handlePointerDown);
+				api_1.off("pointerUp", handlePointerUp);
+				api_1.off("settle", handleSettle);
+				isPointerDownRef.current = false;
+				isPendingRef.current = false;
+			};
+		};
+		$[3] = t3;
+	} else {
+		t3 = $[3];
+	}
+	const bind = t3;
+	let t4;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {
+			watch: deferWhileBusy,
+			bind
+		};
+		$[4] = t4;
+	} else {
+		t4 = $[4];
+	}
+	return t4;
+}
+/**
+* A centered row of slides browsed by drag, flick, the arrow keys, Home and End, the arrows or the indicator tabs, with
+* optional rotation. Neighbouring slides stay in view as a hint that there is more, and are inert until selected.
+* @param props - Arc's carousel props plus the @astra-kit/ui extensions.
+* @returns The carousel section.
+*/
+function Carousel({ label, children, index: controlledIndex, defaultIndex = 0, onIndexChange, slideSize = CAROUSEL_DEFAULT_SLIDE_SIZE, slideLabel = defaultCarouselSlideLabel, interval, autoplay = false, className, loop = false, duration, watchFocus = true, onSettle, previousLabel = CAROUSEL_COPY.previous, nextLabel = CAROUSEL_COPY.next, showControls = true, showIndicators = true, slideClassName, viewportClassName, trackClassName }) {
+	const slides = React.Children.toArray(children);
+	const count = slides.length;
+	const baseId = React.useId();
+	const getSlideId = React.useCallback((slideIndex) => `${baseId}-slide-${slideIndex}`, [baseId]);
+	const reduceMotion = usePrefersReducedMotion();
+	const isHydrated = useIsHydrated();
+	const [startIndex] = React.useState(() => clampSlideIndex(controlledIndex ?? defaultIndex, count));
+	const [selectedIndex, setSelectedIndex] = React.useState(startIndex);
+	const [api, setApi] = React.useState();
+	const [announcement, setAnnouncement] = React.useState("");
+	const [engineSlideCount, setEngineSlideCount] = React.useState(0);
+	const { watch, bind } = useDeferredReInit();
+	const callbacksRef = React.useRef({
+		onIndexChange,
+		onSettle,
+		slideLabel
+	});
+	React.useLayoutEffect(() => {
+		callbacksRef.current = {
+			onIndexChange,
+			onSettle,
+			slideLabel
+		};
+	});
+	const reportedIndexRef = React.useRef(startIndex);
+	const settledIndexRef = React.useRef(startIndex);
+	const isRotatingRef = React.useRef(false);
+	const pendingDefaultIndexRef = React.useRef(controlledIndex === undefined && defaultIndex > startIndex ? defaultIndex : undefined);
+	const options = {
+		align: "center",
+		containScroll: false,
+		loop,
+		watchFocus,
+		watchResize: watch,
+		watchSlides: watch,
+		...duration === undefined ? {} : { duration }
+	};
+	React.useEffect(() => bind(api), [api, bind]);
+	React.useLayoutEffect(() => {
+		if (!api) return;
+		api.scrollTo(reportedIndexRef.current, true);
+	}, [api]);
+	React.useEffect(() => {
+		if (!api) return;
+		const handleSettle = () => {
+			const settledIndex = api.selectedScrollSnap();
+			if (settledIndex === settledIndexRef.current) return;
+			settledIndexRef.current = settledIndex;
+			callbacksRef.current.onSettle?.(settledIndex);
+		};
+		const handleSelect = () => {
+			const nextIndex = api.selectedScrollSnap();
+			setSelectedIndex(nextIndex);
+			if (nextIndex !== reportedIndexRef.current) {
+				pendingDefaultIndexRef.current = undefined;
+				reportedIndexRef.current = nextIndex;
+				const { onIndexChange: reportIndex, slideLabel: nameSlide } = callbacksRef.current;
+				reportIndex?.(nextIndex);
+				if (!isRotatingRef.current) setAnnouncement(nameSlide(nextIndex, api.slideNodes().length));
+			}
+			isRotatingRef.current = false;
+			if (api.internalEngine().scrollBody.settled() && !api.internalEngine().dragHandler.pointerDown()) handleSettle();
+		};
+		const handleReInit = () => {
+			setEngineSlideCount(api.slideNodes().length);
+			handleSelect();
+			handleSettle();
+		};
+		api.on("select", handleSelect);
+		api.on("settle", handleSettle);
+		api.on("reInit", handleReInit);
+		return () => {
+			api.off("select", handleSelect);
+			api.off("settle", handleSettle);
+			api.off("reInit", handleReInit);
+		};
+	}, [api]);
+	React.useEffect(() => {
+		if (!api || controlledIndex === undefined) return;
+		const nextIndex = clampSlideIndex(controlledIndex, api.slideNodes().length);
+		if (nextIndex === api.selectedScrollSnap()) return;
+		reportedIndexRef.current = nextIndex;
+		api.scrollTo(nextIndex, reduceMotion);
+	}, [
+		api,
+		controlledIndex,
+		engineSlideCount,
+		reduceMotion,
+		selectedIndex
+	]);
+	React.useEffect(() => {
+		const pendingIndex = pendingDefaultIndexRef.current;
+		if (!api || pendingIndex === undefined || api.slideNodes().length <= pendingIndex) return;
+		pendingDefaultIndexRef.current = undefined;
+		reportedIndexRef.current = pendingIndex;
+		settledIndexRef.current = pendingIndex;
+		api.scrollTo(pendingIndex, true);
+	}, [api, engineSlideCount]);
+	const rotation = useRotation({
+		api,
+		count,
+		interval,
+		autoplay,
+		reduceMotion,
+		isHydrated,
+		selectedIndex,
+		loop,
+		isRotatingRef
+	});
+	const visibleIndex = clampSlideIndex(selectedIndex, count);
+	const hasControlRow = count > 1 && (showControls || showIndicators || rotation.hasControl);
+	const hasIndicators = count > 1 && showIndicators;
+	const rootStyle = { [CAROUSEL_SLIDE_SIZE_PROPERTY]: slideSize };
+	return /* @__PURE__ */ _jsxs(CarouselRoot, {
+		opts: options,
+		setApi,
+		"aria-label": label,
+		className: cn("@container/carousel grid w-full min-w-0 grid-cols-[minmax(0,1fr)] gap-4", className),
+		style: rootStyle,
+		onPointerEnter: (event) => {
+			if (event.pointerType === "mouse") rotation.setIsHovered(true);
+		},
+		onPointerLeave: () => rotation.setIsHovered(false),
+		onFocus: (event) => rotation.handleFocus(event.target),
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) rotation.handleFocus(null);
+		},
+		ref: rotation.rootRef,
+		children: [
+			/* @__PURE__ */ _jsx(CarouselContent, {
+				viewportClassName,
+				className: cn("select-none [&_img]:[-webkit-user-drag:none]", trackClassName),
+				children: slides.map((slide, slideIndex) => /* @__PURE__ */ _jsx(CarouselItem, {
+					id: getSlideId(slideIndex),
+					role: hasIndicators ? "tabpanel" : "group",
+					"aria-label": slideLabel(slideIndex, count),
+					inert: slideIndex !== visibleIndex || undefined,
+					className: cn("basis-(--carousel-slide)", slideClassName),
+					children: slide
+				}, React.isValidElement(slide) && slide.key != null ? slide.key : slideIndex))
+			}),
+			hasControlRow ? /* @__PURE__ */ _jsxs("div", {
+				"data-slot": "carousel-controls",
+				className: "flex min-w-0 items-center gap-2 px-[calc((100cqw_-_var(--carousel-slide))/2)] @max-[340px]/carousel:gap-1 @max-[340px]/carousel:px-[max(0px,calc((100cqw_-_var(--carousel-slide))/2_-_var(--spacing)*2))]",
+				children: [
+					rotation.hasControl ? /* @__PURE__ */ _jsx(ControlButton, {
+						ref: rotation.playRef,
+						"data-slot": "carousel-rotation",
+						variant: "outline",
+						size: "icon",
+						className: "size-(--control-height-sm) rounded-full border-border bg-surface text-foreground hover-fine:bg-surface-muted",
+						"aria-label": rotation.isPlaying ? CAROUSEL_COPY.pauseRotation : CAROUSEL_COPY.startRotation,
+						disabled: !rotation.canRotate,
+						onClick: rotation.toggle,
+						children: /* @__PURE__ */ _jsx("span", {
+							className: "grid size-4 place-items-center",
+							children: /* @__PURE__ */ _jsx(AnimatePresence, {
+								initial: false,
+								children: /* @__PURE__ */ _jsx(motion.span, {
+									className: "col-start-1 row-start-1 grid place-items-center",
+									initial: reduceMotion ? { opacity: 0 } : rotationIconHidden,
+									animate: rotationIconRest,
+									exit: reduceMotion ? {
+										opacity: 0,
+										transition: { duration: 0 }
+									} : rotationIconExit,
+									transition: reduceMotion ? { duration: 0 } : rotationIconEnter,
+									children: rotation.isPlaying ? /* @__PURE__ */ _jsx(Pause, {
+										size: CAROUSEL_ROTATION_ICON_SIZE_PX,
+										strokeWidth: 1.75,
+										fill: "currentColor",
+										"aria-hidden": "true"
+									}) : /* @__PURE__ */ _jsx(Play, {
+										size: CAROUSEL_ROTATION_ICON_SIZE_PX,
+										strokeWidth: 1.75,
+										fill: "currentColor",
+										"aria-hidden": "true"
+									})
+								}, rotation.isPlaying ? "pause" : "play")
+							})
+						})
+					}) : null,
+					showIndicators ? /* @__PURE__ */ _jsx(CarouselIndicators, {
+						slideLabel,
+						getSlideId,
+						drain: rotation.drain,
+						initialCount: count,
+						initialIndex: startIndex
+					}) : null,
+					showControls ? /* @__PURE__ */ _jsxs("div", {
+						className: "ms-auto flex flex-none gap-2 @max-[340px]/carousel:gap-1",
+						children: [/* @__PURE__ */ _jsx(CarouselPrevious, { "aria-label": previousLabel }), /* @__PURE__ */ _jsx(CarouselNext, { "aria-label": nextLabel })]
+					}) : null
+				]
+			}) : null,
+			/* @__PURE__ */ _jsx("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: announcement
+			})
+		]
+	});
+}
+/**
+* Arc's slide rotation: each slide stays for `interval` while its pill drains, then the carousel moves on, wrapping to
+* the first slide at the end. Rotation pauses on hover, keyboard focus, drag, offscreen and in hidden tabs; pausing it
+* with the control refills the pill. Reduced motion, once hydrated, makes rotation unavailable and disables the control,
+* which stays in place so the control row keeps its layout after hydration.
+* @param settings - Carousel state the rotation reads.
+* @returns Rotation state and the handlers the carousel binds.
+*/
+function useRotation(t0) {
+	const $ = _c(37);
+	const { api, count, interval, autoplay, reduceMotion, isHydrated, selectedIndex, loop, isRotatingRef } = t0;
+	const [isPlaying, setIsPlaying] = React.useState(autoplay);
+	const [isHovered, setIsHovered] = React.useState(false);
+	const [isFocusPaused, setIsFocusPaused] = React.useState(false);
+	const [isDragging, setIsDragging] = React.useState(false);
+	const [isInView, setIsInView] = React.useState(true);
+	const [isPageVisible, setIsPageVisible] = React.useState(true);
+	const drain = useMotionValue(0);
+	const rootRef = React.useRef(null);
+	const playRef = React.useRef(null);
+	const hasControl = Boolean(interval) && count > 1;
+	const canRotate = hasControl && !(isHydrated && reduceMotion);
+	const isRunning = canRotate && isPlaying && !isHovered && !isFocusPaused && !isDragging && isInView && isPageVisible;
+	let t1;
+	let t2;
+	if ($[0] !== 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];
+		$[0] = api;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	React.useEffect(t1, t2);
+	let t3;
+	if ($[3] !== drain) {
+		t3 = () => {
+			drain.jump(0);
+		};
+		$[3] = drain;
+		$[4] = t3;
+	} else {
+		t3 = $[4];
+	}
+	let t4;
+	if ($[5] !== drain || $[6] !== selectedIndex) {
+		t4 = [drain, selectedIndex];
+		$[5] = drain;
+		$[6] = selectedIndex;
+		$[7] = t4;
+	} else {
+		t4 = $[7];
+	}
+	React.useEffect(t3, t4);
+	let t5;
+	if ($[8] !== api || $[9] !== drain || $[10] !== interval || $[11] !== isRotatingRef || $[12] !== isRunning || $[13] !== loop) {
+		t5 = () => {
+			if (!isRunning || !interval || !api) {
+				return;
+			}
+			const controls = animate(drain, 1, {
+				duration: (1 - drain.get()) * interval / 1e3,
+				ease: "linear",
+				onComplete: () => {
+					isRotatingRef.current = true;
+					if (loop || api.canScrollNext()) {
+						api.scrollNext();
+					} else {
+						api.scrollTo(0);
+					}
+				}
+			});
+			return () => controls.stop();
+		};
+		$[8] = api;
+		$[9] = drain;
+		$[10] = interval;
+		$[11] = isRotatingRef;
+		$[12] = isRunning;
+		$[13] = loop;
+		$[14] = t5;
+	} else {
+		t5 = $[14];
+	}
+	let t6;
+	if ($[15] !== api || $[16] !== drain || $[17] !== interval || $[18] !== isRotatingRef || $[19] !== isRunning || $[20] !== loop || $[21] !== selectedIndex) {
+		t6 = [
+			api,
+			drain,
+			interval,
+			isRotatingRef,
+			isRunning,
+			loop,
+			selectedIndex
+		];
+		$[15] = api;
+		$[16] = drain;
+		$[17] = interval;
+		$[18] = isRotatingRef;
+		$[19] = isRunning;
+		$[20] = loop;
+		$[21] = selectedIndex;
+		$[22] = t6;
+	} else {
+		t6 = $[22];
+	}
+	React.useEffect(t5, t6);
+	let t7;
+	let t8;
+	if ($[23] !== interval) {
+		t7 = () => {
+			const root = rootRef.current;
+			if (!interval || !root) {
+				return;
+			}
+			const observer = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((t9) => {
+				const [entry] = t9;
+				if (entry) {
+					setIsInView(entry.isIntersecting);
+				}
+			});
+			observer?.observe(root);
+			const handleVisibilityChange = () => setIsPageVisible(document.visibilityState !== "hidden");
+			handleVisibilityChange();
+			document.addEventListener("visibilitychange", handleVisibilityChange);
+			return () => {
+				observer?.disconnect();
+				document.removeEventListener("visibilitychange", handleVisibilityChange);
+			};
+		};
+		t8 = [interval];
+		$[23] = interval;
+		$[24] = t7;
+		$[25] = t8;
+	} else {
+		t7 = $[24];
+		t8 = $[25];
+	}
+	React.useEffect(t7, t8);
+	let t9;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = (target) => {
+			if (!(target instanceof Element) || target === playRef.current) {
+				setIsFocusPaused(false);
+				return;
+			}
+			setIsFocusPaused(target.matches(":focus-visible"));
+		};
+		$[26] = t9;
+	} else {
+		t9 = $[26];
+	}
+	const handleFocus = t9;
+	let t10;
+	if ($[27] !== drain || $[28] !== isPlaying || $[29] !== reduceMotion) {
+		t10 = () => {
+			if (!isPlaying) {
+				setIsPlaying(true);
+				return;
+			}
+			setIsPlaying(false);
+			if (reduceMotion) {
+				drain.jump(0);
+			} else {
+				animate(drain, 0, {
+					duration: ARC_DURATION.standard,
+					ease: [...ARC_EASE.standard]
+				});
+			}
+		};
+		$[27] = drain;
+		$[28] = isPlaying;
+		$[29] = reduceMotion;
+		$[30] = t10;
+	} else {
+		t10 = $[30];
+	}
+	const toggle = t10;
+	const t11 = canRotate && isPlaying;
+	const t12 = canRotate ? drain : undefined;
+	let t13;
+	if ($[31] !== canRotate || $[32] !== hasControl || $[33] !== t11 || $[34] !== t12 || $[35] !== toggle) {
+		t13 = {
+			hasControl,
+			canRotate,
+			isPlaying: t11,
+			drain: t12,
+			rootRef,
+			playRef,
+			setIsHovered,
+			handleFocus,
+			toggle
+		};
+		$[31] = canRotate;
+		$[32] = hasControl;
+		$[33] = t11;
+		$[34] = t12;
+		$[35] = toggle;
+		$[36] = t13;
+	} else {
+		t13 = $[36];
+	}
+	return t13;
+}
+export { Carousel };

package/dist/components/checkbox.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root> & {
+    /** Visible label beside the box, tied to it with `htmlFor`. */
+    label?: string;
+    /** Helper copy under the label, linked through `aria-describedby`. */
+    description?: string;
+};
+/**
+ * A choice that can be on, off or indeterminate, controlled or uncontrolled like Radix's checkbox.
+ * @param checkboxProps - Every Radix checkbox prop, including `ref`, plus optional Arc `label` and `description`.
+ * @returns The labelled field when `label` or `description` is passed, otherwise the bare control.
+ */
+declare function Checkbox({ className, label, description, id, checked, defaultChecked, onCheckedChange, "aria-describedby": ariaDescribedBy, ...props }: CheckboxProps): import("react").JSX.Element;
+export { Checkbox };