@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/carousel/carousel.js

@@ -0,0 +1,415 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { useIsomorphicLayoutEffect, useReducedMotion } from "../lib/motion.js";
+import { Children, forwardRef, isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/carousel/carousel.tsx
+/** Movement before a mouse press is read as a drag. */
+const SLOP = 6;
+/** Release speed in px/s that always moves at least one slide. */
+const FLICK = 360;
+/**
+* How long a glide may take before the carousel stops waiting for it: one slide,
+* plus more per extra slide (a `loop` wrap crosses them all), capped.
+*/
+const BACKSTOP = {
+	base: 1e3,
+	perSlide: 250,
+	max: 3e3
+};
+/** Where a flick would come to rest: velocity (px/s) projected with a paging deceleration rate. */
+const project = (velocity, rate = .995) => velocity / 1e3 * rate / (1 - rate);
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const defaultSlideLabel = (index, count) => `${index + 1} of ${count}`;
+const PlayGlyph = () => /* @__PURE__ */ jsx("svg", {
+	width: 15,
+	height: 15,
+	viewBox: "0 0 16 16",
+	fill: "currentColor",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M4.5 2.8v10.4a.6.6 0 0 0 .9.5l8.2-5.2a.6.6 0 0 0 0-1L5.4 2.3a.6.6 0 0 0-.9.5Z" })
+});
+const PauseGlyph = () => /* @__PURE__ */ jsxs("svg", {
+	width: 15,
+	height: 15,
+	viewBox: "0 0 16 16",
+	fill: "currentColor",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ jsx("rect", {
+		x: "3.5",
+		y: "2.5",
+		width: "3.2",
+		height: "11",
+		rx: "1"
+	}), /* @__PURE__ */ jsx("rect", {
+		x: "9.3",
+		y: "2.5",
+		width: "3.2",
+		height: "11",
+		rx: "1"
+	})]
+});
+const Chevron = ({ back }) => /* @__PURE__ */ jsx("svg", {
+	width: 18,
+	height: 18,
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.75,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: back ? "M10 3.5 5.5 8l4.5 4.5" : "M6 3.5 10.5 8 6 12.5" })
+});
+const Carousel = forwardRef(function Carousel({ label, children, index: controlledIndex, defaultIndex = 0, onIndexChange, slideSize, slideLabel = defaultSlideLabel, interval, autoplay = false, loop = false, peek = true, labels, className }, ref) {
+	const slides = Children.toArray(children);
+	const count = slides.length;
+	const last = Math.max(0, count - 1);
+	const id = useId();
+	const reduced = useReducedMotion();
+	const [ownIndex, setOwnIndex] = useState(() => clamp(defaultIndex, 0, last));
+	const index = clamp(controlledIndex ?? ownIndex, 0, last);
+	const [playing, setPlaying] = useState(autoplay);
+	const [hovered, setHovered] = useState(false);
+	const [touching, setTouching] = useState(false);
+	const [focusPaused, setFocusPaused] = useState(false);
+	const [inView, setInView] = useState(true);
+	const [pageVisible, setPageVisible] = useState(true);
+	const [announcement, setAnnouncement] = useState("");
+	const root = useRef(null);
+	const rootRef = useMemo(() => mergeRefs(ref, root), [ref]);
+	const viewport = useRef(null);
+	const track = useRef(null);
+	const play = useRef(null);
+	const tabs = useRef([]);
+	const target = useRef(index);
+	const travelling = useRef(null);
+	const backstop = useRef(void 0);
+	const drag = useRef(null);
+	const swallowClick = useRef(false);
+	const canRotate = Boolean(interval) && count > 1 && !reduced;
+	const running = canRotate && playing && !hovered && !touching && !focusPaused && inView && pageVisible;
+	const step = () => {
+		const [first, second] = Array.from(track.current?.children ?? []);
+		return first && second ? second.offsetLeft - first.offsetLeft : first?.offsetWidth ?? 0;
+	};
+	/** The scroll position that centres slide `i`. */
+	const leftOf = (i) => {
+		const node = track.current?.children[i];
+		const box = viewport.current;
+		return node && box ? node.offsetLeft - (box.clientWidth - node.offsetWidth) / 2 : 0;
+	};
+	/** Writes how far each slide and indicator is from the centre, straight from the scroll position. Returns the position in slides. */
+	const paint = useCallback(() => {
+		const box = viewport.current;
+		const size = step();
+		if (!box || !size) return target.current;
+		const position = box.scrollLeft / size;
+		Array.from(track.current?.children ?? []).forEach((slide, i) => {
+			slide.style.setProperty("--d", String(Math.min(1, Math.abs(position - i))));
+		});
+		tabs.current.forEach((tab, i) => {
+			const dot = tab?.firstElementChild;
+			if (dot instanceof HTMLElement) dot.style.setProperty("--e", String(Math.max(0, 1 - Math.abs(clamp(position, 0, last) - i))));
+		});
+		return position;
+	}, [last]);
+	function scrollToIndex(i, smooth) {
+		const box = viewport.current;
+		if (!box) return;
+		const left = leftOf(i);
+		if (!smooth || reduced || Math.abs(box.scrollLeft - left) < 1) {
+			travelling.current = null;
+			box.scrollTo({
+				left,
+				behavior: "auto"
+			});
+			paint();
+			return;
+		}
+		travelling.current = i;
+		clearTimeout(backstop.current);
+		const distance = Math.abs(box.scrollLeft - left) / (step() || 1);
+		const wait = Math.min(BACKSTOP.max, BACKSTOP.base + BACKSTOP.perSlide * Math.max(0, distance - 1));
+		backstop.current = setTimeout(() => travelling.current = null, wait);
+		box.scrollTo({
+			left,
+			behavior: "smooth"
+		});
+	}
+	function commit(next, announce) {
+		target.current = next;
+		if (controlledIndex === void 0) setOwnIndex(next);
+		onIndexChange?.(next);
+		if (announce) setAnnouncement(slideLabel(next, count));
+	}
+	function select(to, announce = true) {
+		const next = clamp(to, 0, last);
+		if (next !== target.current) commit(next, announce);
+		scrollToIndex(next, true);
+	}
+	useIsomorphicLayoutEffect(() => {
+		scrollToIndex(target.current, false);
+		const box = viewport.current;
+		if (!box || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			if (!drag.current && travelling.current === null) scrollToIndex(target.current, false);
+		});
+		observer.observe(box);
+		return () => observer.disconnect();
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		Array.from(track.current?.children ?? []).forEach((slide, i) => slide.toggleAttribute("inert", i !== index));
+	}, [index, count]);
+	useEffect(() => {
+		if (target.current !== index) {
+			target.current = index;
+			scrollToIndex(index, true);
+		}
+	}, [index]);
+	useEffect(() => () => clearTimeout(backstop.current), []);
+	useEffect(() => {
+		const box = viewport.current;
+		if (!box) return;
+		const onScrollEnd = () => {
+			if (travelling.current === null) return;
+			travelling.current = null;
+			clearTimeout(backstop.current);
+		};
+		box.addEventListener("scrollend", onScrollEnd);
+		return () => box.removeEventListener("scrollend", onScrollEnd);
+	}, []);
+	function onScroll() {
+		const position = paint();
+		const box = viewport.current;
+		if (!box || drag.current?.locked) return;
+		if (travelling.current !== null) {
+			if (Math.abs(box.scrollLeft - leftOf(travelling.current)) < 2) travelling.current = null;
+			return;
+		}
+		const next = clamp(Math.round(position), 0, last);
+		if (next !== target.current) commit(next, true);
+	}
+	const advance = () => select(index >= last ? 0 : index + 1, false);
+	/** The slide `by` steps from `from`: clamped at the ends, or around them with `loop`. */
+	const stepFrom = (from, by) => loop ? (from + by + count) % count : clamp(from + by, 0, last);
+	useEffect(() => {
+		const node = root.current;
+		if (!interval || !node) return;
+		const observer = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver(([entry]) => entry && setInView(entry.isIntersecting));
+		observer?.observe(node);
+		const onVisibility = () => setPageVisible(document.visibilityState !== "hidden");
+		document.addEventListener("visibilitychange", onVisibility);
+		return () => {
+			observer?.disconnect();
+			document.removeEventListener("visibilitychange", onVisibility);
+		};
+	}, [interval]);
+	function onPointerDown(event) {
+		if (count < 2 || drag.current || event.pointerType !== "mouse" || event.button !== 0) return;
+		swallowClick.current = false;
+		drag.current = {
+			pointer: event.pointerId,
+			startX: event.clientX,
+			startLeft: event.currentTarget.scrollLeft,
+			from: target.current,
+			locked: false,
+			samples: []
+		};
+	}
+	function onPointerMove(event) {
+		const current = drag.current;
+		if (!current || current.pointer !== event.pointerId) return;
+		const box = event.currentTarget;
+		if (!current.locked) {
+			if (Math.abs(event.clientX - current.startX) < SLOP) return;
+			current.locked = true;
+			current.startX = event.clientX;
+			travelling.current = null;
+			try {
+				box.setPointerCapture(event.pointerId);
+			} catch {}
+			box.dataset.dragging = "";
+		}
+		box.scrollLeft = current.startLeft - (event.clientX - current.startX);
+		current.samples.push([event.timeStamp, box.scrollLeft]);
+		if (current.samples.length > 16) current.samples.shift();
+	}
+	function finish(event, cancelled) {
+		const current = drag.current;
+		if (!current || current.pointer !== event.pointerId) return;
+		drag.current = null;
+		if (!current.locked) return;
+		const box = event.currentTarget;
+		delete box.dataset.dragging;
+		swallowClick.current = true;
+		const recent = current.samples.filter(([time]) => event.timeStamp - time <= 90);
+		const first = recent[0];
+		const lastSample = recent[recent.length - 1];
+		const velocity = !cancelled && first && lastSample && recent.length > 1 && event.timeStamp - lastSample[0] <= 50 && lastSample[0] > first[0] ? (lastSample[1] - first[1]) / (lastSample[0] - first[0]) * 1e3 : 0;
+		const size = step() || 1;
+		let to = Math.round((box.scrollLeft + project(velocity)) / size);
+		if (Math.abs(velocity) > FLICK) {
+			const direction = velocity > 0 ? 1 : -1;
+			if ((to - current.from) * direction < 1) to = current.from + direction;
+		}
+		select(to);
+	}
+	/** A tap on a neighbour brings it to the centre; a click that ends a drag is not a tap. */
+	function onClick(event) {
+		if (swallowClick.current) {
+			swallowClick.current = false;
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		const hit = Array.from(track.current?.children ?? []).findIndex((slide) => {
+			const rect = slide.getBoundingClientRect();
+			return event.clientX >= rect.left && event.clientX <= rect.right;
+		});
+		if (hit >= 0 && hit !== target.current) select(hit);
+	}
+	function onKeyDown(event) {
+		if (event.altKey || event.ctrlKey || event.metaKey || count < 2) return;
+		const node = event.target;
+		if (node.closest("input, textarea, select, [contenteditable]")) return;
+		const from = target.current;
+		const to = event.key === "ArrowLeft" ? stepFrom(from, -1) : event.key === "ArrowRight" ? stepFrom(from, 1) : event.key === "Home" ? 0 : event.key === "End" ? last : null;
+		if (to === null) return;
+		event.preventDefault();
+		const next = clamp(to, 0, last);
+		select(next);
+		if (node.getAttribute("role") === "tab") tabs.current[next]?.focus({ preventScroll: true });
+		else if (track.current?.contains(node)) viewport.current?.focus({ preventScroll: true });
+	}
+	const text = {
+		previous: "Previous slide",
+		next: "Next slide",
+		play: "Start slide rotation",
+		pause: "Pause slide rotation",
+		slides: "Choose a slide",
+		...labels
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		ref: rootRef,
+		"data-slot": "carousel",
+		"aria-roledescription": "carousel",
+		"aria-label": label,
+		"data-loop": loop || void 0,
+		"data-peek": peek ? void 0 : "false",
+		className: cn("carousel", className),
+		style: slideSize && peek ? { "--carousel-slide-size": slideSize } : void 0,
+		onKeyDown,
+		onFocus: (event) => setFocusPaused(event.target !== play.current && event.target.matches(":focus-visible")),
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) setFocusPaused(false);
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: viewport,
+				role: "region",
+				"aria-label": "Slides",
+				tabIndex: 0,
+				"data-slot": "carousel-viewport",
+				className: "carousel-viewport",
+				onScroll,
+				onPointerDown,
+				onPointerMove,
+				onPointerUp: (event) => finish(event, false),
+				onPointerCancel: (event) => finish(event, true),
+				onPointerEnter: (event) => event.pointerType === "mouse" && setHovered(true),
+				onPointerLeave: () => setHovered(false),
+				onTouchStart: () => setTouching(true),
+				onTouchEnd: () => setTouching(false),
+				onTouchCancel: () => setTouching(false),
+				onClickCapture: onClick,
+				onDragStart: (event) => event.preventDefault(),
+				children: /* @__PURE__ */ jsx("div", {
+					ref: track,
+					className: "carousel-track",
+					children: slides.map((slide, i) => /* @__PURE__ */ jsx("div", {
+						id: `${id}-slide-${i}`,
+						role: "tabpanel",
+						"aria-roledescription": "slide",
+						"aria-label": slideLabel(i, count),
+						"data-active": i === index || void 0,
+						className: "carousel-slide",
+						children: slide
+					}, isValidElement(slide) && slide.key != null ? slide.key : i))
+				})
+			}),
+			count > 1 ? /* @__PURE__ */ jsxs("div", {
+				className: "carousel-controls",
+				children: [
+					canRotate ? /* @__PURE__ */ jsx("button", {
+						ref: play,
+						type: "button",
+						"aria-label": playing ? text.pause : text.play,
+						className: "carousel-control",
+						onClick: () => setPlaying(!playing),
+						children: playing ? /* @__PURE__ */ jsx(PauseGlyph, {}) : /* @__PURE__ */ jsx(PlayGlyph, {})
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						role: "tablist",
+						"aria-label": text.slides,
+						className: "carousel-tabs",
+						children: slides.map((_, i) => /* @__PURE__ */ jsx("button", {
+							ref: (node) => {
+								tabs.current[i] = node;
+							},
+							type: "button",
+							role: "tab",
+							"aria-selected": i === index,
+							"aria-controls": `${id}-slide-${i}`,
+							"aria-label": slideLabel(i, count),
+							tabIndex: i === index ? 0 : -1,
+							className: "carousel-tab",
+							onClick: () => select(i),
+							children: /* @__PURE__ */ jsxs("span", {
+								"aria-hidden": "true",
+								className: "carousel-dot",
+								children: [/* @__PURE__ */ jsx("span", { className: "carousel-dot-fill" }), canRotate && playing && i === index ? /* @__PURE__ */ jsx("span", {
+									className: "carousel-drain",
+									style: {
+										animationDuration: `${interval}ms`,
+										animationPlayState: running ? "running" : "paused"
+									},
+									onAnimationEnd: advance
+								}, index) : null]
+							})
+						}, i))
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "carousel-arrows",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": text.previous,
+							"aria-disabled": !loop && index === 0,
+							className: "carousel-control",
+							onClick: () => (loop || target.current > 0) && select(stepFrom(target.current, -1)),
+							children: /* @__PURE__ */ jsx(Chevron, { back: true })
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": text.next,
+							"aria-disabled": !loop && index === last,
+							className: "carousel-control",
+							onClick: () => (loop || target.current < last) && select(stepFrom(target.current, 1)),
+							children: /* @__PURE__ */ jsx(Chevron, {})
+						})]
+					})
+				]
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: announcement
+			})
+		]
+	});
+});
+//#endregion
+export { Carousel };
+
+//# sourceMappingURL=carousel.js.map

package/dist/carousel/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","names":[],"sources":["../../src/carousel/carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { useIsomorphicLayoutEffect, useReducedMotion } from \"../lib/motion.js\";\n\n/**\n * Carousel: a row of slides people browse by swiping, a trackpad, dragging\n * with a mouse, the arrow keys, or the controls below it. Use it for a short,\n * ordered set of peers such as products or case studies, where the neighbours\n * stay in view as a hint that there is more.\n *\n * The slides sit on a native scroll-snap track, so touch and trackpad swipes\n * are the browser's own. The active slide is centred; its neighbours shrink and\n * dim with their distance, and each page indicator stretches into a pill as the\n * track nears its slide, all written straight from the scroll position without a\n * re-render. A mouse can drag the track, and a flick carries on to the next\n * slide. Arrow keys, Home and End move between slides from the track or the\n * indicators. `interval` adds a play control that rotates through the slides;\n * rotation pauses on hover, keyboard focus and touch, while the carousel is off\n * screen or the tab is hidden, and is unavailable under reduced motion (where\n * scrolling also jumps instead of gliding).\n *\n * `loop` wraps the ends: next on the last slide goes to the first, previous on\n * the first to the last, from the controls and the arrow keys alike (a swipe\n * or drag still stops at the end of the track). `peek={false}` shows one slide\n * at a time across the full width, with no neighbours in view, for a viewer\n * such as a single creative asset.\n */\nexport interface CarouselProps {\n  /** Names the carousel for assistive technology, such as \"From the Harbour suites\". */\n  label: string;\n  /** One child per slide. */\n  children: ReactNode;\n  /** Controlled active slide. Pair with `onIndexChange`. */\n  index?: number;\n  /** @default 0 */\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Width of one slide as a CSS length; `cqw` is a share of the carousel's width. @default \"min(80cqw, 340px)\" */\n  slideSize?: string;\n  /** Names each slide and its indicator. @default (index, count) => `${index + 1} of ${count}` */\n  slideLabel?: (index: number, count: number) => string;\n  /** Milliseconds per slide. Adds a play control that rotates through the slides. */\n  interval?: number;\n  /** Starts rotating on mount. Off by default, so motion begins with the viewer. @default false */\n  autoplay?: boolean;\n  /**\n   * Wraps around at the ends: next on the last slide goes to the first and\n   * previous on the first goes to the last, from the controls and the arrow\n   * keys. The controls are then never disabled. Home and End still go to the\n   * first and last slide; a swipe or drag stops at the end of the track.\n   * @default false\n   */\n  loop?: boolean;\n  /**\n   * Neighbouring slides peek in at the sides. `false` shows one slide at a\n   * time across the full width (`slideSize` is ignored), with the controls\n   * spanning it too.\n   * @default true\n   */\n  peek?: boolean;\n  /** Names of the controls, for translation. */\n  labels?: {\n    /** @default \"Previous slide\" */\n    previous?: string;\n    /** @default \"Next slide\" */\n    next?: string;\n    /** @default \"Start slide rotation\" */\n    play?: string;\n    /** @default \"Pause slide rotation\" */\n    pause?: string;\n    /** Names the group of indicators. @default \"Choose a slide\" */\n    slides?: string;\n  };\n  /** Extra classes for the carousel. Merged last. */\n  className?: string;\n}\n\n/** Movement before a mouse press is read as a drag. */\nconst SLOP = 6;\n/** Release speed in px/s that always moves at least one slide. */\nconst FLICK = 360;\n/**\n * How long a glide may take before the carousel stops waiting for it: one slide,\n * plus more per extra slide (a `loop` wrap crosses them all), capped.\n */\nconst BACKSTOP = { base: 1000, perSlide: 250, max: 3000 };\n/** Where a flick would come to rest: velocity (px/s) projected with a paging deceleration rate. */\nconst project = (velocity: number, rate = 0.995) => ((velocity / 1000) * rate) / (1 - rate);\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\nconst defaultSlideLabel = (index: number, count: number) => `${index + 1} of ${count}`;\n\nconst PlayGlyph = () => (\n  <svg width={15} height={15} viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M4.5 2.8v10.4a.6.6 0 0 0 .9.5l8.2-5.2a.6.6 0 0 0 0-1L5.4 2.3a.6.6 0 0 0-.9.5Z\" />\n  </svg>\n);\nconst PauseGlyph = () => (\n  <svg width={15} height={15} viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n    <rect x=\"3.5\" y=\"2.5\" width=\"3.2\" height=\"11\" rx=\"1\" />\n    <rect x=\"9.3\" y=\"2.5\" width=\"3.2\" height=\"11\" rx=\"1\" />\n  </svg>\n);\nconst Chevron = ({ back }: { back?: boolean }) => (\n  <svg width={18} height={18} viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth={1.75} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <path d={back ? \"M10 3.5 5.5 8l4.5 4.5\" : \"M6 3.5 10.5 8 6 12.5\"} />\n  </svg>\n);\n\ntype Drag = { pointer: number; startX: number; startLeft: number; from: number; locked: boolean; samples: [number, number][] };\n\nexport const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel(\n  {\n    label,\n    children,\n    index: controlledIndex,\n    defaultIndex = 0,\n    onIndexChange,\n    slideSize,\n    slideLabel = defaultSlideLabel,\n    interval,\n    autoplay = false,\n    loop = false,\n    peek = true,\n    labels,\n    className,\n  },\n  ref,\n) {\n  const slides = Children.toArray(children);\n  const count = slides.length;\n  const last = Math.max(0, count - 1);\n  const id = useId();\n  const reduced = useReducedMotion();\n  const [ownIndex, setOwnIndex] = useState(() => clamp(defaultIndex, 0, last));\n  const index = clamp(controlledIndex ?? ownIndex, 0, last);\n  const [playing, setPlaying] = useState(autoplay);\n  const [hovered, setHovered] = useState(false);\n  const [touching, setTouching] = useState(false);\n  const [focusPaused, setFocusPaused] = useState(false);\n  const [inView, setInView] = useState(true);\n  const [pageVisible, setPageVisible] = useState(true);\n  const [announcement, setAnnouncement] = useState(\"\");\n\n  const root = useRef<HTMLElement | null>(null);\n  const rootRef = useMemo(() => mergeRefs(ref, root), [ref]);\n  const viewport = useRef<HTMLDivElement>(null);\n  const track = useRef<HTMLDivElement>(null);\n  const play = useRef<HTMLButtonElement>(null);\n  const tabs = useRef<(HTMLButtonElement | null)[]>([]);\n  // The slide the carousel is on, as the component last decided it (state lags a render behind).\n  const target = useRef(index);\n  // Set while a scroll we started is in flight, so the in-between slides are not reported as the viewer's choice.\n  const travelling = useRef<number | null>(null);\n  const backstop = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const drag = useRef<Drag | null>(null);\n  const swallowClick = useRef(false);\n\n  const canRotate = Boolean(interval) && count > 1 && !reduced;\n  const running = canRotate && playing && !hovered && !touching && !focusPaused && inView && pageVisible;\n\n  const step = () => {\n    const [first, second] = Array.from(track.current?.children ?? []) as HTMLElement[];\n    return first && second ? second.offsetLeft - first.offsetLeft : (first?.offsetWidth ?? 0);\n  };\n  /** The scroll position that centres slide `i`. */\n  const leftOf = (i: number) => {\n    const node = track.current?.children[i] as HTMLElement | undefined;\n    const box = viewport.current;\n    return node && box ? node.offsetLeft - (box.clientWidth - node.offsetWidth) / 2 : 0;\n  };\n\n  /** Writes how far each slide and indicator is from the centre, straight from the scroll position. Returns the position in slides. */\n  const paint = useCallback(() => {\n    const box = viewport.current;\n    const size = step();\n    if (!box || !size) return target.current;\n    const position = box.scrollLeft / size;\n    Array.from(track.current?.children ?? []).forEach((slide, i) => {\n      (slide as HTMLElement).style.setProperty(\"--d\", String(Math.min(1, Math.abs(position - i))));\n    });\n    tabs.current.forEach((tab, i) => {\n      const dot = tab?.firstElementChild;\n      if (dot instanceof HTMLElement) dot.style.setProperty(\"--e\", String(Math.max(0, 1 - Math.abs(clamp(position, 0, last) - i))));\n    });\n    return position;\n  }, [last]);\n\n  function scrollToIndex(i: number, smooth: boolean) {\n    const box = viewport.current;\n    if (!box) return;\n    const left = leftOf(i);\n    if (!smooth || reduced || Math.abs(box.scrollLeft - left) < 1) {\n      travelling.current = null;\n      box.scrollTo({ left, behavior: \"auto\" });\n      paint();\n      return;\n    }\n    travelling.current = i;\n    clearTimeout(backstop.current);\n    // A scroll that never reports arriving (a resize mid-flight) must not hold the carousel deaf to the viewer's own swipes.\n    // The glide normally ends on `scrollend`; this timer is the fallback, scaled to the\n    // distance so a long wrap is not cut short.\n    const distance = Math.abs(box.scrollLeft - left) / (step() || 1);\n    const wait = Math.min(\n      BACKSTOP.max,\n      BACKSTOP.base + BACKSTOP.perSlide * Math.max(0, distance - 1),\n    );\n    backstop.current = setTimeout(() => (travelling.current = null), wait);\n    box.scrollTo({ left, behavior: \"smooth\" });\n  }\n\n  function commit(next: number, announce: boolean) {\n    target.current = next;\n    if (controlledIndex === undefined) setOwnIndex(next);\n    onIndexChange?.(next);\n    if (announce) setAnnouncement(slideLabel(next, count));\n  }\n\n  function select(to: number, announce = true) {\n    const next = clamp(to, 0, last);\n    if (next !== target.current) commit(next, announce);\n    scrollToIndex(next, true);\n  }\n\n  // The start slide is in place before first paint, so nothing glides on mount; later resizes keep the carousel on its slide.\n  useIsomorphicLayoutEffect(() => {\n    scrollToIndex(target.current, false);\n    const box = viewport.current;\n    if (!box || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      if (!drag.current && travelling.current === null) scrollToIndex(target.current, false);\n    });\n    observer.observe(box);\n    return () => observer.disconnect();\n  }, []);\n\n  // The viewer's own slides, inert unless active, are the only ones in the tab order or the accessibility tree's reach.\n  useIsomorphicLayoutEffect(() => {\n    Array.from(track.current?.children ?? []).forEach((slide, i) => slide.toggleAttribute(\"inert\", i !== index));\n  }, [index, count]);\n\n  // A controlled index that moves by itself brings the carousel along.\n  useEffect(() => {\n    if (target.current !== index) {\n      target.current = index;\n      scrollToIndex(index, true);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- only a changed index matters\n  }, [index]);\n\n  useEffect(() => () => clearTimeout(backstop.current), []);\n\n  // A glide is over when the browser says the scroll has ended, however long it took.\n  useEffect(() => {\n    const box = viewport.current;\n    if (!box) return;\n    const onScrollEnd = () => {\n      if (travelling.current === null) return;\n      travelling.current = null;\n      clearTimeout(backstop.current);\n    };\n    box.addEventListener(\"scrollend\", onScrollEnd);\n    return () => box.removeEventListener(\"scrollend\", onScrollEnd);\n  }, []);\n\n  function onScroll() {\n    const position = paint();\n    const box = viewport.current;\n    if (!box || drag.current?.locked) return;\n    if (travelling.current !== null) {\n      if (Math.abs(box.scrollLeft - leftOf(travelling.current)) < 2) travelling.current = null;\n      return;\n    }\n    const next = clamp(Math.round(position), 0, last);\n    if (next !== target.current) commit(next, true);\n  }\n\n  const advance = () => select(index >= last ? 0 : index + 1, false);\n  /** The slide `by` steps from `from`: clamped at the ends, or around them with `loop`. */\n  const stepFrom = (from: number, by: number) => (loop ? (from + by + count) % count : clamp(from + by, 0, last));\n\n  useEffect(() => {\n    const node = root.current;\n    if (!interval || !node) return;\n    const observer = typeof IntersectionObserver === \"undefined\" ? null : new IntersectionObserver(([entry]) => entry && setInView(entry.isIntersecting));\n    observer?.observe(node);\n    const onVisibility = () => setPageVisible(document.visibilityState !== \"hidden\");\n    document.addEventListener(\"visibilitychange\", onVisibility);\n    return () => {\n      observer?.disconnect();\n      document.removeEventListener(\"visibilitychange\", onVisibility);\n    };\n  }, [interval]);\n\n  function onPointerDown(event: PointerEvent<HTMLDivElement>) {\n    if (count < 2 || drag.current || event.pointerType !== \"mouse\" || event.button !== 0) return;\n    swallowClick.current = false;\n    drag.current = { pointer: event.pointerId, startX: event.clientX, startLeft: event.currentTarget.scrollLeft, from: target.current, locked: false, samples: [] };\n  }\n\n  function onPointerMove(event: PointerEvent<HTMLDivElement>) {\n    const current = drag.current;\n    if (!current || current.pointer !== event.pointerId) return;\n    const box = event.currentTarget;\n    if (!current.locked) {\n      if (Math.abs(event.clientX - current.startX) < SLOP) return;\n      // The slop is consumed, so the track starts moving from the pointer without a jump. Snapping is off while it is held.\n      current.locked = true;\n      current.startX = event.clientX;\n      travelling.current = null;\n      try {\n        box.setPointerCapture(event.pointerId);\n      } catch {\n        // The pointer already ended; the drag simply stops following it.\n      }\n      box.dataset.dragging = \"\";\n    }\n    box.scrollLeft = current.startLeft - (event.clientX - current.startX);\n    current.samples.push([event.timeStamp, box.scrollLeft]);\n    if (current.samples.length > 16) current.samples.shift();\n  }\n\n  function finish(event: PointerEvent<HTMLDivElement>, cancelled: boolean) {\n    const current = drag.current;\n    if (!current || current.pointer !== event.pointerId) return;\n    drag.current = null;\n    if (!current.locked) return;\n    const box = event.currentTarget;\n    delete box.dataset.dragging;\n    swallowClick.current = true;\n    const recent = current.samples.filter(([time]) => event.timeStamp - time <= 90);\n    const first = recent[0];\n    const lastSample = recent[recent.length - 1];\n    const velocity =\n      !cancelled && first && lastSample && recent.length > 1 && event.timeStamp - lastSample[0] <= 50 && lastSample[0] > first[0]\n        ? ((lastSample[1] - first[1]) / (lastSample[0] - first[0])) * 1000\n        : 0;\n    const size = step() || 1;\n    // The landing slide comes from where the flick would carry the track, not from where the pointer let go.\n    let to = Math.round((box.scrollLeft + project(velocity)) / size);\n    if (Math.abs(velocity) > FLICK) {\n      const direction = velocity > 0 ? 1 : -1;\n      if ((to - current.from) * direction < 1) to = current.from + direction;\n    }\n    select(to);\n  }\n\n  /** A tap on a neighbour brings it to the centre; a click that ends a drag is not a tap. */\n  function onClick(event: MouseEvent<HTMLDivElement>) {\n    if (swallowClick.current) {\n      swallowClick.current = false;\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    const hit = Array.from(track.current?.children ?? []).findIndex((slide) => {\n      const rect = slide.getBoundingClientRect();\n      return event.clientX >= rect.left && event.clientX <= rect.right;\n    });\n    if (hit >= 0 && hit !== target.current) select(hit);\n  }\n\n  function onKeyDown(event: KeyboardEvent<HTMLElement>) {\n    if (event.altKey || event.ctrlKey || event.metaKey || count < 2) return;\n    const node = event.target as HTMLElement;\n    if (node.closest(\"input, textarea, select, [contenteditable]\")) return;\n    const from = target.current;\n    const to =\n      event.key === \"ArrowLeft\" ? stepFrom(from, -1) : event.key === \"ArrowRight\" ? stepFrom(from, 1) : event.key === \"Home\" ? 0 : event.key === \"End\" ? last : null;\n    if (to === null) return;\n    event.preventDefault();\n    const next = clamp(to, 0, last);\n    select(next);\n    if (node.getAttribute(\"role\") === \"tab\") tabs.current[next]?.focus({ preventScroll: true });\n    else if (track.current?.contains(node)) viewport.current?.focus({ preventScroll: true });\n  }\n\n  const text = { previous: \"Previous slide\", next: \"Next slide\", play: \"Start slide rotation\", pause: \"Pause slide rotation\", slides: \"Choose a slide\", ...labels };\n\n  return (\n    <section\n      ref={rootRef}\n      data-slot=\"carousel\"\n      aria-roledescription=\"carousel\"\n      aria-label={label}\n      data-loop={loop || undefined}\n      data-peek={peek ? undefined : \"false\"}\n      className={cn(\"carousel\", className)}\n      style={slideSize && peek ? ({ \"--carousel-slide-size\": slideSize } as CSSProperties) : undefined}\n      onKeyDown={onKeyDown}\n      onFocus={(event) => setFocusPaused(event.target !== play.current && event.target.matches(\":focus-visible\"))}\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) setFocusPaused(false);\n      }}\n    >\n      <div\n        ref={viewport}\n        role=\"region\"\n        aria-label=\"Slides\"\n        tabIndex={0}\n        data-slot=\"carousel-viewport\"\n        className=\"carousel-viewport\"\n        onScroll={onScroll}\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onPointerUp={(event) => finish(event, false)}\n        onPointerCancel={(event) => finish(event, true)}\n        onPointerEnter={(event) => event.pointerType === \"mouse\" && setHovered(true)}\n        onPointerLeave={() => setHovered(false)}\n        onTouchStart={() => setTouching(true)}\n        onTouchEnd={() => setTouching(false)}\n        onTouchCancel={() => setTouching(false)}\n        onClickCapture={onClick}\n        onDragStart={(event) => event.preventDefault()}\n      >\n        <div ref={track} className=\"carousel-track\">\n          {slides.map((slide, i) => (\n            <div\n              key={isValidElement(slide) && slide.key != null ? slide.key : i}\n              id={`${id}-slide-${i}`}\n              role=\"tabpanel\"\n              aria-roledescription=\"slide\"\n              aria-label={slideLabel(i, count)}\n              data-active={i === index || undefined}\n              className=\"carousel-slide\"\n            >\n              {slide}\n            </div>\n          ))}\n        </div>\n      </div>\n      {count > 1 ? (\n        <div className=\"carousel-controls\">\n          {canRotate ? (\n            <button\n              ref={play}\n              type=\"button\"\n              aria-label={playing ? text.pause : text.play}\n              className=\"carousel-control\"\n              onClick={() => setPlaying(!playing)}\n            >\n              {playing ? <PauseGlyph /> : <PlayGlyph />}\n            </button>\n          ) : null}\n          <div role=\"tablist\" aria-label={text.slides} className=\"carousel-tabs\">\n            {slides.map((_, i) => (\n              <button\n                key={i}\n                ref={(node) => {\n                  tabs.current[i] = node;\n                }}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={i === index}\n                aria-controls={`${id}-slide-${i}`}\n                aria-label={slideLabel(i, count)}\n                tabIndex={i === index ? 0 : -1}\n                className=\"carousel-tab\"\n                onClick={() => select(i)}\n              >\n                <span aria-hidden=\"true\" className=\"carousel-dot\">\n                  <span className=\"carousel-dot-fill\" />\n                  {canRotate && playing && i === index ? (\n                    <span\n                      key={index}\n                      className=\"carousel-drain\"\n                      style={{ animationDuration: `${interval}ms`, animationPlayState: running ? \"running\" : \"paused\" }}\n                      onAnimationEnd={advance}\n                    />\n                  ) : null}\n                </span>\n              </button>\n            ))}\n          </div>\n          <div className=\"carousel-arrows\">\n            <button\n              type=\"button\"\n              aria-label={text.previous}\n              aria-disabled={!loop && index === 0}\n              className=\"carousel-control\"\n              onClick={() => (loop || target.current > 0) && select(stepFrom(target.current, -1))}\n            >\n              <Chevron back />\n            </button>\n            <button\n              type=\"button\"\n              aria-label={text.next}\n              aria-disabled={!loop && index === last}\n              className=\"carousel-control\"\n              onClick={() => (loop || target.current < last) && select(stepFrom(target.current, 1))}\n            >\n              <Chevron />\n            </button>\n          </div>\n        </div>\n      ) : null}\n      <span className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n        {announcement}\n      </span>\n    </section>\n  );\n});\n"],"mappings":"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"}

package/dist/carousel/index.d.ts

@@ -0,0 +1,2 @@
+import { Carousel, CarouselProps } from "./carousel.js";
+export { Carousel, type CarouselProps };

package/dist/carousel/index.js

@@ -0,0 +1,2 @@
+import { Carousel } from "./carousel.js";
+export { Carousel };

package/dist/checkbox/checkbox.js

@@ -43,10 +43,10 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 */
 const checkboxVariants = cva([selectionLabelVariants()]);
 const checkboxBoxVariants = cva([
-	"inline-flex size-4 shrink-0 items-center justify-center",
-	"rounded-2xs border-(length:--border-width)",
+	"inline-flex size-4.5 shrink-0 items-center justify-center",
+	"rounded-checkbox border-(length:--border-width)",
 	"box-border",
-	"bg-background border-border text-primary-foreground",
+	"bg-surface border-control-edge text-primary-foreground",
 	"checkbox-box",
 	"group-data-[selected]:border-primary-strong",
 	"group-data-[indeterminate]:border-primary-strong",
@@ -71,7 +71,7 @@ const Checkbox$1 = forwardRef(function Checkbox$2({ className, children, ...prop
 				"data-mark": isIndeterminate ? "indeterminate" : isSelected ? "check" : void 0,
 				viewBox: "0 0 18 18",
 				fill: "none",
-				className: "absolute -inset-px size-4 overflow-visible",
+				className: "absolute -inset-px size-4.5 overflow-visible",
 				children: /* @__PURE__ */ jsx("path", {
 					className: "checkbox-mark",
 					pathLength: "1",

package/dist/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["Checkbox","AriaCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Checkbox as AriaCheckbox,\n  type CheckboxProps as AriaCheckboxProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * Checkbox, rebuilt on React Aria.\n *\n * THE CENSUS FOUND ZERO CALL SITES. It is ported anyway because forms and\n * table row selection are unbuildable without it, but that fact changes what\n * this is: with no usage to be faithful to and no call site to break, it is a\n * rewrite rather than a restyling. Four things the legacy component got\n * wrong are therefore simply fixed rather than carried:\n *\n * - **No accessible name.** It rendered a bare `<input type=\"checkbox\">` with\n *   no label, no `aria-label` and no `id`, so every use was an axe `label`\n *   violation. Here the label is `children`, and React Aria wraps the input\n *   in it.\n * - **The fill never showed.** `checked:bg-primary` on a native input with no\n *   `appearance-none` is painted over by the user-agent checkbox.\n * - **`border-primary` cannot be a boundary.** Brand orange is 2.44:1 on\n *   white, under even the 3:1 non-text floor (WCAG 1.4.11).\n * - **`focus-visible:ring-2` is a box-shadow**, which forced-colors discards,\n *   taking the only focus indication with it.\n *\n * React Aria renders a `<label>` around a visually-hidden real `<input>` and\n * NOTHING else -- there is no visual box in the box. Drawing one, and keeping\n * it in step with `data-selected` / `data-indeterminate`, is what this\n * component owns.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\n/**\n * The label geometry now lives in lib/selection-control.ts, shared with\n * Radio and Switch. Three controls with the same 24px target and the same\n * typography is the Rule of Three, and this migration has twice found a\n * legacy pair that styled one surface twice and silently drifted.\n */\nexport const checkboxVariants = cva([selectionLabelVariants()]);\n\nexport const checkboxBoxVariants = cva([\n  \"inline-flex size-4 shrink-0 items-center justify-center\",\n  \"rounded-2xs border-(length:--border-width)\",\n\n  // box-border: the size is the whole square, border included.\n  \"box-border\",\n\n  \"bg-background border-border text-primary-foreground\",\n\n  // Border colour eases, the square presses to .95 and springs back (see checkbox-box).\n  \"checkbox-box\",\n\n  // The border takes the strong tone once chosen; the colour itself is the fill below.\n  \"group-data-[selected]:border-primary-strong\",\n  \"group-data-[indeterminate]:border-primary-strong\",\n  // Hover darkens an unchosen box's border.\n  \"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground\",\n\n  selectionRingVariants(),\n]);\n\nexport interface CheckboxProps\n  extends Omit<AriaCheckboxProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The label, and the control's accessible name.\n   *\n   * Omit it only for a genuinely label-less checkbox -- a table row selector\n   * -- and pass `aria-label` instead. A checkbox with neither has no\n   * accessible name, which is what every legacy call site would have been.\n   */\n  children?: ReactNode;\n  /** Extra classes for the label. Merged last, so they win conflicts. */\n  className?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <AriaCheckbox\n      {...props}\n      // inputRef, not ref: AriaCheckbox's own ref targets the label it\n      // renders around a visually-hidden native input, and a label cannot\n      // be focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"checkbox\"\n      // `group` is load-bearing: React Aria puts data-selected,\n      // data-indeterminate and data-focus-visible on the LABEL, and CSS\n      // cannot look upward from the box to them.\n      className={cn(checkboxVariants(), className)}\n    >\n      {({ isSelected, isIndeterminate }) => (\n        <>\n          {/*\n            aria-hidden: the real <input> already carries the state. A\n            decorative box announced as well would say everything twice.\n          */}\n          <span aria-hidden=\"true\" data-slot=\"checkbox-box\" className={checkboxBoxVariants()}>\n            <span data-slot=\"checkbox-fill\" className=\"checkbox-fill\" />\n            {/*\n              One mark, always rendered: the state decides what it shows. Both\n              states can be true at once (a \"select all\" box that has been\n              partially cleared) and indeterminate wins, which the path's\n              `d` carries in CSS -- the same precedence the old two-glyph\n              branch pinned in JS.\n            */}\n            <svg\n              data-slot=\"checkbox-mark\"\n              data-mark={isIndeterminate ? \"indeterminate\" : isSelected ? \"check\" : undefined}\n              viewBox=\"0 0 18 18\"\n              fill=\"none\"\n              className=\"absolute -inset-px size-4 overflow-visible\"\n            >\n              <path\n                className=\"checkbox-mark\"\n                pathLength=\"1\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </span>\n          {children == null ? null : <span data-slot=\"checkbox-label\">{children}</span>}\n        </>\n      )}\n    </AriaCheckbox>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,mBAAmB,IAAI,CAAC,uBAAuB,CAAC,CAAC;AAE9D,MAAa,sBAAsB,IAAI;CACrC;CACA;CAGA;CAEA;CAGA;CAGA;CACA;CAEA;CAEA,sBAAsB;AACxB,CAAC;AAgBD,MAAaA,aAAW,WAA4C,SAASA,WAC3E,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;CACA,OACE,oBAACC,UAAD;EACE,GAAI;EAKJ,UAAU;EACV,aAAU;EAIV,WAAW,GAAG,iBAAiB,GAAG,SAAS;EAEzC,WAAA,EAAE,YAAY,sBACd,qBAAA,YAAA,EAAA,UAAA,CAKE,qBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAe,WAAW,oBAAoB;GAAjF,UAAA,CACE,oBAAC,QAAD;IAAM,aAAU;IAAgB,WAAU;GAAiB,CAAA,GAQ3D,oBAAC,OAAD;IACE,aAAU;IACV,aAAW,kBAAkB,kBAAkB,aAAa,UAAU,KAAA;IACtE,SAAQ;IACR,MAAK;IACL,WAAU;IAEV,UAAA,oBAAC,QAAD;KACE,WAAU;KACV,YAAW;KACX,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA,CACD;EACL,CAAA,GAAA,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAkB;EAAe,CAAA,CAC5E,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC"}
+{"version":3,"file":"checkbox.js","names":["Checkbox","AriaCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Checkbox as AriaCheckbox,\n  type CheckboxProps as AriaCheckboxProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * Checkbox, rebuilt on React Aria.\n *\n * THE CENSUS FOUND ZERO CALL SITES. It is ported anyway because forms and\n * table row selection are unbuildable without it, but that fact changes what\n * this is: with no usage to be faithful to and no call site to break, it is a\n * rewrite rather than a restyling. Four things the legacy component got\n * wrong are therefore simply fixed rather than carried:\n *\n * - **No accessible name.** It rendered a bare `<input type=\"checkbox\">` with\n *   no label, no `aria-label` and no `id`, so every use was an axe `label`\n *   violation. Here the label is `children`, and React Aria wraps the input\n *   in it.\n * - **The fill never showed.** `checked:bg-primary` on a native input with no\n *   `appearance-none` is painted over by the user-agent checkbox.\n * - **`border-primary` cannot be a boundary.** Brand orange is 2.44:1 on\n *   white, under even the 3:1 non-text floor (WCAG 1.4.11).\n * - **`focus-visible:ring-2` is a box-shadow**, which forced-colors discards,\n *   taking the only focus indication with it.\n *\n * React Aria renders a `<label>` around a visually-hidden real `<input>` and\n * NOTHING else -- there is no visual box in the box. Drawing one, and keeping\n * it in step with `data-selected` / `data-indeterminate`, is what this\n * component owns.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\n/**\n * The label geometry now lives in lib/selection-control.ts, shared with\n * Radio and Switch. Three controls with the same 24px target and the same\n * typography is the Rule of Three, and this migration has twice found a\n * legacy pair that styled one surface twice and silently drifted.\n */\nexport const checkboxVariants = cva([selectionLabelVariants()]);\n\nexport const checkboxBoxVariants = cva([\n  \"inline-flex size-4.5 shrink-0 items-center justify-center\",\n  \"rounded-checkbox border-(length:--border-width)\",\n\n  // box-border: the size is the whole square, border included.\n  \"box-border\",\n\n  \"bg-surface border-control-edge text-primary-foreground\",\n\n  // Border colour eases, the square presses to .95 and springs back (see checkbox-box).\n  \"checkbox-box\",\n\n  // The border takes the strong tone once chosen; the colour itself is the fill below.\n  \"group-data-[selected]:border-primary-strong\",\n  \"group-data-[indeterminate]:border-primary-strong\",\n  // Hover darkens an unchosen box's border.\n  \"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground\",\n\n  selectionRingVariants(),\n]);\n\nexport interface CheckboxProps\n  extends Omit<AriaCheckboxProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The label, and the control's accessible name.\n   *\n   * Omit it only for a genuinely label-less checkbox -- a table row selector\n   * -- and pass `aria-label` instead. A checkbox with neither has no\n   * accessible name, which is what every legacy call site would have been.\n   */\n  children?: ReactNode;\n  /** Extra classes for the label. Merged last, so they win conflicts. */\n  className?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <AriaCheckbox\n      {...props}\n      // inputRef, not ref: AriaCheckbox's own ref targets the label it\n      // renders around a visually-hidden native input, and a label cannot\n      // be focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"checkbox\"\n      // `group` is load-bearing: React Aria puts data-selected,\n      // data-indeterminate and data-focus-visible on the LABEL, and CSS\n      // cannot look upward from the box to them.\n      className={cn(checkboxVariants(), className)}\n    >\n      {({ isSelected, isIndeterminate }) => (\n        <>\n          {/*\n            aria-hidden: the real <input> already carries the state. A\n            decorative box announced as well would say everything twice.\n          */}\n          <span aria-hidden=\"true\" data-slot=\"checkbox-box\" className={checkboxBoxVariants()}>\n            <span data-slot=\"checkbox-fill\" className=\"checkbox-fill\" />\n            {/*\n              One mark, always rendered: the state decides what it shows. Both\n              states can be true at once (a \"select all\" box that has been\n              partially cleared) and indeterminate wins, which the path's\n              `d` carries in CSS -- the same precedence the old two-glyph\n              branch pinned in JS.\n            */}\n            <svg\n              data-slot=\"checkbox-mark\"\n              data-mark={isIndeterminate ? \"indeterminate\" : isSelected ? \"check\" : undefined}\n              viewBox=\"0 0 18 18\"\n              fill=\"none\"\n              className=\"absolute -inset-px size-4.5 overflow-visible\"\n            >\n              <path\n                className=\"checkbox-mark\"\n                pathLength=\"1\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </span>\n          {children == null ? null : <span data-slot=\"checkbox-label\">{children}</span>}\n        </>\n      )}\n    </AriaCheckbox>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,mBAAmB,IAAI,CAAC,uBAAuB,CAAC,CAAC;AAE9D,MAAa,sBAAsB,IAAI;CACrC;CACA;CAGA;CAEA;CAGA;CAGA;CACA;CAEA;CAEA,sBAAsB;AACxB,CAAC;AAgBD,MAAaA,aAAW,WAA4C,SAASA,WAC3E,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;CACA,OACE,oBAACC,UAAD;EACE,GAAI;EAKJ,UAAU;EACV,aAAU;EAIV,WAAW,GAAG,iBAAiB,GAAG,SAAS;EAEzC,WAAA,EAAE,YAAY,sBACd,qBAAA,YAAA,EAAA,UAAA,CAKE,qBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAe,WAAW,oBAAoB;GAAjF,UAAA,CACE,oBAAC,QAAD;IAAM,aAAU;IAAgB,WAAU;GAAiB,CAAA,GAQ3D,oBAAC,OAAD;IACE,aAAU;IACV,aAAW,kBAAkB,kBAAkB,aAAa,UAAU,KAAA;IACtE,SAAQ;IACR,MAAK;IACL,WAAU;IAEV,UAAA,oBAAC,QAAD;KACE,WAAU;KACV,YAAW;KACX,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA,CACD;EACL,CAAA,GAAA,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAkB;EAAe,CAAA,CAC5E,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC"}

package/dist/chip-group/chip-group.d.ts

@@ -0,0 +1,37 @@
+//#region src/chip-group/chip-group.d.ts
+/**
+ * ChipGroup: selectable filter chips for narrowing a list by facets people
+ * toggle often, such as topics, statuses or tags.
+ *
+ * Selecting a chip grows a check in at its start (it draws itself as it
+ * scales up from a soft blur), the label slides over, the chip widens on the
+ * morph spring, and its neighbours glide to their new places, even across
+ * lines. The row follows its own height. Long sets fold behind a "+N more"
+ * chip; opening it grows the hidden chips in one after another. Arrow keys move
+ * between chips, Space or Enter toggles, and each chip is a pressed or
+ * unpressed button. Selected reads as a tint plus the check, never colour alone.
+ */
+export interface ChipOption {
+  value: string;
+  label: string;
+}
+export interface ChipGroupProps {
+  options: ChipOption[];
+  value: string[];
+  onValueChange: (value: string[]) => void;
+  /** Accessible name of the group, such as "Topics". */
+  label: string;
+  /** Allow several chips at once. In single mode the selected chip can still be cleared. @default true */
+  multiple?: boolean;
+  /** Chips shown before the rest fold behind a "+N more" chip. Chips selected when it folds stay in view. */
+  maxVisible?: number;
+  /** Text of the overflow chip. @default (hidden) => `+${hidden} more` */
+  moreLabel?: (hidden: number) => string;
+  /** @default "Show less" */
+  lessLabel?: string;
+  /** Extra classes for the group. Merged last. */
+  className?: string;
+}
+export declare const ChipGroup: import("react").ForwardRefExoticComponent<ChipGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=chip-group.d.ts.map