@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/card-stack/card-stack.js

@@ -0,0 +1,492 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { Button } from "../button/button.js";
+import { useCallback, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/card-stack/card-stack.tsx
+/** Cards rendered in the stack. The last one waits invisibly one step behind and fades in as it rises. */
+const VISIBLE = 4;
+/** Degrees of rotation per pixel of horizontal travel. */
+const ROTATE = .065;
+/** A release faster than this (px/s) throws the card even when it has only moved a little. */
+const FLICK = 500;
+/** Drag distance at which the cards behind have fully risen. */
+const LIFT_DISTANCE = 160;
+/** Vertical travel is not a decision, so past a small free zone it resists like a rubber band. */
+const FREE_Y = 48;
+const STRETCH_Y = 140;
+/** The stamp is fully shown at 96px of travel and starts at 16px. */
+const STAMP_FROM = 16;
+/** A thrown card is gone this long after it starts (the fade finishes well before); the backstop for a transition that never ends. */
+const FLIGHT_BACKSTOP_MS = 1500;
+const resistY = (raw) => {
+	const distance = Math.abs(raw);
+	return distance <= FREE_Y ? raw : Math.sign(raw) * (FREE_Y + (1 - 1 / ((distance - FREE_Y) * .55 / STRETCH_Y + 1)) * STRETCH_Y);
+};
+const unresistY = (shown) => {
+	const distance = Math.abs(shown);
+	if (distance <= FREE_Y) return shown;
+	const stretch = Math.min(distance - FREE_Y, 139);
+	return Math.sign(shown) * (FREE_Y + (1 / (1 - stretch / STRETCH_Y) - 1) * STRETCH_Y / .55);
+};
+const clampUnit = (value) => Math.min(1, Math.max(0, value));
+/** Where the card is now, mid-flight included: the computed translate, in px. */
+function readOffset(el) {
+	const value = getComputedStyle(el).translate;
+	if (!value || value === "none") return {
+		x: 0,
+		y: 0
+	};
+	const [x, y] = value.split(" ").map(parseFloat);
+	return {
+		x: x || 0,
+		y: y || 0
+	};
+}
+function velocityOf(samples, now) {
+	const recent = samples.filter((sample) => now - sample.t <= 80);
+	const first = recent[0];
+	const last = recent[recent.length - 1];
+	if (!first || !last || first === last || now - last.t > 60) return {
+		x: 0,
+		y: 0
+	};
+	const seconds = (last.t - first.t) / 1e3;
+	return {
+		x: (last.x - first.x) / seconds,
+		y: (last.y - first.y) / seconds
+	};
+}
+const iconProps = {
+	width: 16,
+	height: 16,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.75,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": true
+};
+const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
+	...iconProps,
+	children: /* @__PURE__ */ jsx("path", { d: "M5 12.5 10 17.5 19 7" })
+});
+const CloseIcon = () => /* @__PURE__ */ jsx("svg", {
+	...iconProps,
+	children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6 6 18" })
+});
+const UndoIcon = () => /* @__PURE__ */ jsx("svg", {
+	...iconProps,
+	children: /* @__PURE__ */ jsx("path", { d: "M4 12a8 8 0 1 0 2.5-5.8M4 4v4.5h4.5" })
+});
+/**
+* A control that stays focusable when it has nothing to do: React Aria drops `aria-disabled` and a disabled button would
+* drop focus to the page when the stack runs out, so the attribute is set by hand and the press is guarded.
+*/
+function Control({ disabled, onPress, ...rest }) {
+	const ref = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		if (disabled) ref.current?.setAttribute("aria-disabled", "true");
+		else ref.current?.removeAttribute("aria-disabled");
+	}, [disabled]);
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		ref,
+		className: "aria-disabled:cursor-default aria-disabled:opacity-40",
+		onPress: () => {
+			if (!disabled) onPress();
+		}
+	});
+}
+/** Renders a custom empty state; the reset handler travels as a prop so render never touches the stack's refs. */
+function EmptySlot({ render, onReset }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: render(onReset) });
+}
+const HOME_TRANSITION = (delay) => `translate var(--duration-smooth) var(--ease-smooth) ${delay}ms, rotate var(--duration-smooth) var(--ease-smooth) ${delay}ms, opacity var(--duration-quick) var(--ease-enter) ${delay}ms`;
+const SPRING_BACK = "translate var(--duration-morph) var(--ease-morph), rotate var(--duration-morph) var(--ease-morph)";
+const THROW = "translate var(--duration-calm) var(--ease-calm), rotate var(--duration-calm) var(--ease-calm), opacity 220ms var(--ease-settle) 120ms";
+const REDUCED_FADE = "opacity 150ms linear";
+function StackCard({ id, depth, decision, returnFrom, interactive, zIndex, label, labels, stage, fling, onRelease, onThrown, onGone, children }) {
+	const card = useRef(null);
+	const tilt = useRef(returnFrom?.tilt ?? 1);
+	const drag = useRef(null);
+	const settled = useRef(!returnFrom);
+	const wasDecided = useRef(false);
+	const lift = (value) => stage.current?.style.setProperty("--lift", String(value));
+	/** Writes the card's place and what follows from it (its tilt and its stamps) straight to the DOM: a drag never re-renders. */
+	const place = (el, x, y) => {
+		el.style.translate = `${x}px ${y}px`;
+		el.style.rotate = `${x * ROTATE * tilt.current}deg`;
+		el.style.setProperty("--keep", String(clampUnit((x - STAMP_FROM) / 80)));
+		el.style.setProperty("--pass", String(clampUnit((-16 - x) / 80)));
+	};
+	useIsomorphicLayoutEffect(() => {
+		const el = card.current;
+		if (!el) return;
+		const reduced = prefersReducedMotion();
+		if (decision) {
+			drag.current = null;
+			el.removeAttribute("data-dragging");
+			wasDecided.current = true;
+			const direction = decision === "right" ? 1 : -1;
+			const { x: cx, y: cy } = readOffset(el);
+			const velocity = fling(id) ?? {
+				x: direction * 900,
+				y: -120
+			};
+			const speed = Math.hypot(velocity.x, velocity.y);
+			let ux = velocity.x;
+			let uy = velocity.y;
+			if (speed < 200 || Math.sign(ux) !== direction) {
+				ux = Math.abs(cx) > 8 ? cx : direction;
+				uy = Math.abs(cx) > 8 ? cy * .5 : -.12;
+			}
+			const length = Math.hypot(ux, uy) || 1;
+			ux /= length;
+			uy /= length;
+			if (Math.abs(ux) < .45) {
+				ux = direction * .45;
+				uy = Math.sign(uy || -1) * Math.sqrt(.7975);
+			}
+			const reach = el.offsetWidth * 1.6;
+			const exit = {
+				x: cx + ux * reach,
+				y: cy + uy * reach,
+				tilt: tilt.current
+			};
+			onThrown(id, exit);
+			el.style.setProperty(direction > 0 ? "--keep" : "--pass", "1");
+			if (reduced) el.style.transition = REDUCED_FADE;
+			else {
+				el.style.transition = THROW;
+				place(el, exit.x, exit.y);
+			}
+			el.style.opacity = "0";
+			return;
+		}
+		if (!wasDecided.current && settled.current) return;
+		wasDecided.current = false;
+		const delay = returnFrom?.delay ?? 0;
+		if (!settled.current && !reduced && returnFrom) {
+			el.style.transition = "none";
+			place(el, returnFrom.x, returnFrom.y);
+			el.style.opacity = "0";
+			el.offsetWidth;
+		}
+		settled.current = true;
+		if (reduced) {
+			el.style.transition = `${REDUCED_FADE} ${delay}ms`;
+			place(el, 0, 0);
+		} else {
+			el.style.transition = HOME_TRANSITION(delay);
+			place(el, 0, 0);
+		}
+		el.style.opacity = "1";
+	}, [decision]);
+	const gone = useCallback(() => onGone(id), [onGone, id]);
+	useExitBackstop(decision !== null, gone, FLIGHT_BACKSTOP_MS);
+	function down(event) {
+		if (!interactive || event.button !== 0 || !event.isPrimary) return;
+		if (event.target instanceof Element && event.target.closest("button, a, input, select, textarea, [role='button']")) return;
+		const el = event.currentTarget;
+		const now = readOffset(el);
+		el.style.transition = "none";
+		if (Math.abs(now.x) < 2) {
+			const rect = el.getBoundingClientRect();
+			tilt.current = event.clientY < rect.top + rect.height / 2 ? 1 : -1;
+		}
+		place(el, now.x, now.y);
+		drag.current = {
+			ox: event.clientX - now.x,
+			oy: event.clientY - unresistY(now.y),
+			samples: [{
+				t: event.timeStamp,
+				x: event.clientX,
+				y: event.clientY
+			}]
+		};
+		try {
+			el.setPointerCapture(event.pointerId);
+		} catch {}
+		el.setAttribute("data-dragging", "");
+	}
+	function move(event) {
+		const state = drag.current;
+		if (!state || !interactive) return;
+		const x = event.clientX - state.ox;
+		const y = resistY(event.clientY - state.oy);
+		place(event.currentTarget, x, y);
+		lift(clampUnit(Math.hypot(x, y * .5) / LIFT_DISTANCE));
+		state.samples.push({
+			t: event.timeStamp,
+			x: event.clientX,
+			y: event.clientY
+		});
+		if (state.samples.length > 12) state.samples.shift();
+	}
+	function up(event) {
+		const state = drag.current;
+		drag.current = null;
+		const el = event.currentTarget;
+		el.removeAttribute("data-dragging");
+		if (el.hasPointerCapture(event.pointerId)) el.releasePointerCapture(event.pointerId);
+		if (!state || !interactive) return;
+		const velocity = event.type === "pointercancel" ? {
+			x: 0,
+			y: 0
+		} : velocityOf(state.samples, event.timeStamp);
+		if (onRelease(id, readOffset(el), velocity, el.offsetWidth)) return;
+		el.style.transition = prefersReducedMotion() ? "none" : SPRING_BACK;
+		place(el, 0, 0);
+		lift(0);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "card-stack-slot",
+		style: {
+			"--depth": depth,
+			zIndex
+		},
+		"aria-hidden": interactive ? void 0 : true,
+		ref: (node) => {
+			if (!node) return;
+			if (interactive) node.removeAttribute("inert");
+			else node.setAttribute("inert", "");
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: card,
+			className: "card-stack-card",
+			"data-top": interactive ? "" : void 0,
+			"data-flying": decision ? "" : void 0,
+			role: interactive ? "group" : void 0,
+			"aria-label": interactive ? label : void 0,
+			onPointerDown: down,
+			onPointerMove: move,
+			onPointerUp: up,
+			onPointerCancel: up,
+			onTransitionEnd: (event) => {
+				if (decision && event.target === event.currentTarget && event.propertyName === "opacity") gone();
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "card-stack-face",
+					children: [children, /* @__PURE__ */ jsx("span", {
+						className: "card-stack-shade",
+						"aria-hidden": "true"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "card-stack-stamp",
+					"data-side": "right",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ jsx(CheckIcon, {}), labels.right]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "card-stack-stamp",
+					"data-side": "left",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ jsx(CloseIcon, {}), labels.left]
+				})
+			]
+		})
+	});
+}
+function CardStack({ items, getKey, getLabel, renderCard, onDecide, onUndo, onReset, labels = {
+	left: "Pass",
+	right: "Keep"
+}, outcomes, label = "Cards", renderEmpty, className }) {
+	const hintId = useId();
+	const stage = useRef(null);
+	const [position, setPosition] = useState(0);
+	const [history, setHistory] = useState([]);
+	const [flying, setFlying] = useState([]);
+	const [returning, setReturning] = useState({});
+	const [message, setMessage] = useState("");
+	const exits = useRef({});
+	const flings = useRef(/* @__PURE__ */ new Map());
+	const top = items[position];
+	const remaining = Math.max(0, items.length - position);
+	function decide(decision) {
+		if (!top) return;
+		const key = getKey(top);
+		stage.current?.style.setProperty("--lift", "0");
+		setPosition(position + 1);
+		setHistory([...history, {
+			key,
+			decision
+		}]);
+		setFlying((current) => [...current, key]);
+		setReturning({});
+		const left = remaining - 1;
+		setMessage(`${getLabel(top)}${outcomes ? ` ${outcomes[decision]}` : `: ${labels[decision]}`}. ${left ? `${left} left.` : "All cards reviewed."}`);
+		onDecide?.(top, decision);
+	}
+	function undo() {
+		const last = history[history.length - 1];
+		const item = last && items.find((entry) => getKey(entry) === last.key);
+		if (!last || !item) return;
+		const exit = exits.current[last.key];
+		setPosition(position - 1);
+		setHistory(history.slice(0, -1));
+		setFlying((current) => current.filter((key) => key !== last.key));
+		setReturning(exit ? { [last.key]: {
+			...exit,
+			delay: 0
+		} } : {});
+		setMessage(`${getLabel(item)} restored.`);
+		onUndo?.(item, last.decision);
+	}
+	function reset() {
+		if (!history.length) return;
+		const count = Math.min(VISIBLE, items.length);
+		const back = {};
+		items.slice(0, count).forEach((item, index) => {
+			const key = getKey(item);
+			const exit = exits.current[key];
+			if (exit && index < position) back[key] = {
+				...exit,
+				delay: (count - 1 - index) * 60
+			};
+		});
+		setPosition(0);
+		setHistory([]);
+		setFlying([]);
+		setReturning(back);
+		setMessage("All cards are back in the stack.");
+		onReset?.();
+	}
+	function release(key, offset, velocity, width) {
+		const direction = Math.sign(offset.x);
+		if (!direction || !top || getKey(top) !== key) return false;
+		const flick = Math.abs(velocity.x) > FLICK && Math.sign(velocity.x) === direction && Math.abs(offset.x) > 12;
+		const far = Math.abs(offset.x) > Math.min(width * .35, 140) && !(Math.sign(velocity.x) === -direction && Math.abs(velocity.x) > 300);
+		if (!flick && !far) return false;
+		flings.current.set(key, velocity);
+		decide(direction > 0 ? "right" : "left");
+		return true;
+	}
+	function onKeyDown(event) {
+		if (event.target !== event.currentTarget) return;
+		if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+			event.preventDefault();
+			decide(event.key === "ArrowRight" ? "right" : "left");
+		} else if (event.key === "Backspace" || (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "z") {
+			event.preventDefault();
+			undo();
+		}
+	}
+	const decided = new Map(history.map((entry) => [entry.key, entry.decision]));
+	const windowKeys = new Set(items.slice(position, position + VISIBLE).map(getKey));
+	const rendered = items.filter((item) => windowKeys.has(getKey(item)) || flying.includes(getKey(item)));
+	const empty = position >= items.length && flying.length === 0;
+	const takeFling = useCallback((key) => {
+		const velocity = flings.current.get(key);
+		flings.current.delete(key);
+		return velocity;
+	}, []);
+	const recordExit = useCallback((key, exit) => {
+		exits.current[key] = exit;
+	}, []);
+	const finish = useCallback((key) => setFlying((current) => current.filter((entry) => entry !== key)), []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "card-stack",
+		className: cn("card-stack", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: stage,
+				className: "card-stack-stage",
+				role: "application",
+				"aria-roledescription": "card stack",
+				"aria-label": label,
+				"aria-describedby": hintId,
+				tabIndex: 0,
+				onKeyDown,
+				children: [rendered.map((item) => {
+					const id = getKey(item);
+					const index = items.indexOf(item);
+					const decision = decided.get(id) ?? null;
+					const depth = decision ? 0 : index - position;
+					return /* @__PURE__ */ jsx(StackCard, {
+						id,
+						depth,
+						decision,
+						returnFrom: returning[id],
+						interactive: !decision && depth === 0,
+						zIndex: decision ? 20 + flying.indexOf(id) : VISIBLE - depth,
+						label: `${getLabel(item)}, ${index + 1} of ${items.length}`,
+						labels,
+						stage,
+						fling: takeFling,
+						onRelease: release,
+						onThrown: recordExit,
+						onGone: finish,
+						children: renderCard(item)
+					}, id);
+				}), empty ? /* @__PURE__ */ jsx("div", {
+					className: "card-stack-empty",
+					children: renderEmpty ? /* @__PURE__ */ jsx(EmptySlot, {
+						render: renderEmpty,
+						onReset: reset
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+						className: "m-0 text-base font-medium",
+						children: "All cards reviewed"
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onPress: reset,
+						startIcon: /* @__PURE__ */ jsx(UndoIcon, {}),
+						children: "Start over"
+					})] })
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap justify-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Control, {
+						variant: "outline",
+						disabled: !top,
+						onPress: () => decide("left"),
+						startIcon: /* @__PURE__ */ jsx(CloseIcon, {}),
+						children: labels.left
+					}),
+					/* @__PURE__ */ jsx(Control, {
+						variant: "ghost",
+						disabled: !history.length,
+						onPress: undo,
+						startIcon: /* @__PURE__ */ jsx(UndoIcon, {}),
+						children: "Undo"
+					}),
+					/* @__PURE__ */ jsx(Control, {
+						variant: "primary",
+						disabled: !top,
+						onPress: () => decide("right"),
+						startIcon: /* @__PURE__ */ jsx(CheckIcon, {}),
+						children: labels.right
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				id: hintId,
+				className: "sr-only",
+				children: [
+					"Drag the top card, or use the left and right arrow keys to ",
+					labels.left.toLowerCase(),
+					" or",
+					" ",
+					labels.right.toLowerCase(),
+					" it. Backspace undoes the last decision."
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				role: "status",
+				"aria-live": "polite",
+				children: message
+			})
+		]
+	});
+}
+//#endregion
+export { CardStack };
+
+//# sourceMappingURL=card-stack.js.map

package/dist/card-stack/card-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-stack.js","names":[],"sources":["../../src/card-stack/card-stack.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n  type RefObject,\n  type SVGProps,\n} from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\n\nexport type CardDecision = \"left\" | \"right\";\n\n/**\n * CardStack: a deck of cards reviewed one at a time. Drag or flick the top card\n * left or right, or use the buttons and the arrow keys. The cards behind peek\n * out below it and rise as it leaves; a card in the hand tips the way it is\n * moving and shows a stamp (the action it will take); let go early and it springs\n * home, let go far enough, or fast enough, and it is thrown. Undo brings the\n * last card back from where it left, and Start over deals the deck again.\n *\n * Use it for quick triage where each item deserves a moment of attention:\n * shortlisting destinations, candidates or design options. Use a list or a\n * table when people need to compare items side by side.\n *\n * Keyboard: the stack takes one tab stop; Left and Right decide the top card,\n * Backspace (or Ctrl or Cmd with Z) undoes. Every decision is announced politely\n * and the buttons do the same, so nothing needs a drag. Reduced motion fades the\n * card out and back instead of throwing it.\n */\nexport interface CardStackProps<T> {\n  items: T[];\n  /** A stable key for an item. */\n  getKey: (item: T) => string;\n  /** A short name for the card, used in its accessible label and announcements, such as \"Lisbon\". */\n  getLabel: (item: T) => string;\n  /** The card's content. It fills the card, whose size the stack sets. */\n  renderCard: (item: T) => ReactNode;\n  /** Called when a card is decided. */\n  onDecide?: (item: T, decision: CardDecision) => void;\n  /** Called when a decision is undone. */\n  onUndo?: (item: T, decision: CardDecision) => void;\n  /** Called when the deck is dealt again. */\n  onReset?: () => void;\n  /** Action names for each side, used on the buttons and the stamps that appear while dragging. @default { left: \"Pass\", right: \"Keep\" } */\n  labels?: { left: string; right: string };\n  /** Past tense of each action for announcements, such as \"skipped\" and \"shortlisted\". Without it a decision reads \"Lisbon: Keep\". */\n  outcomes?: { left: string; right: string };\n  /** Accessible name for the stack. @default \"Cards\" */\n  label?: string;\n  /** Shown once every card has been decided. Receives a function that brings all cards back. */\n  renderEmpty?: (reset: () => void) => ReactNode;\n  /** Extra classes for the stack. Merged last. */\n  className?: string;\n}\n\ninterface Point {\n  x: number;\n  y: number;\n}\ntype Exit = Point & { tilt: number };\ntype Return = Exit & { delay: number };\n\n/** Cards rendered in the stack. The last one waits invisibly one step behind and fades in as it rises. */\nconst VISIBLE = 4;\n/** Degrees of rotation per pixel of horizontal travel. */\nconst ROTATE = 0.065;\n/** A release faster than this (px/s) throws the card even when it has only moved a little. */\nconst FLICK = 500;\n/** Drag distance at which the cards behind have fully risen. */\nconst LIFT_DISTANCE = 160;\n/** Vertical travel is not a decision, so past a small free zone it resists like a rubber band. */\nconst FREE_Y = 48;\nconst STRETCH_Y = 140;\n/** The stamp is fully shown at 96px of travel and starts at 16px. */\nconst STAMP_FROM = 16;\nconst STAMP_TO = 96;\n/** A thrown card is gone this long after it starts (the fade finishes well before); the backstop for a transition that never ends. */\nconst FLIGHT_BACKSTOP_MS = 1500;\n\nconst resistY = (raw: number) => {\n  const distance = Math.abs(raw);\n  return distance <= FREE_Y\n    ? raw\n    : Math.sign(raw) *\n        (FREE_Y + (1 - 1 / (((distance - FREE_Y) * 0.55) / STRETCH_Y + 1)) * STRETCH_Y);\n};\nconst unresistY = (shown: number) => {\n  const distance = Math.abs(shown);\n  if (distance <= FREE_Y) return shown;\n  const stretch = Math.min(distance - FREE_Y, STRETCH_Y - 1);\n  return Math.sign(shown) * (FREE_Y + ((1 / (1 - stretch / STRETCH_Y) - 1) * STRETCH_Y) / 0.55);\n};\nconst clampUnit = (value: number) => Math.min(1, Math.max(0, value));\n\n/** Where the card is now, mid-flight included: the computed translate, in px. */\nfunction readOffset(el: HTMLElement): Point {\n  const value = getComputedStyle(el).translate;\n  if (!value || value === \"none\") return { x: 0, y: 0 };\n  const [x, y] = value.split(\" \").map(parseFloat);\n  return { x: x || 0, y: y || 0 };\n}\n\nfunction velocityOf(samples: { t: number; x: number; y: number }[], now: number): Point {\n  const recent = samples.filter((sample) => now - sample.t <= 80);\n  const first = recent[0];\n  const last = recent[recent.length - 1];\n  if (!first || !last || first === last || now - last.t > 60) return { x: 0, y: 0 };\n  const seconds = (last.t - first.t) / 1000;\n  return { x: (last.x - first.x) / seconds, y: (last.y - first.y) / seconds };\n}\n\nconst iconProps: SVGProps<SVGSVGElement> = {\n  width: 16,\n  height: 16,\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  strokeWidth: 1.75,\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\",\n  \"aria-hidden\": true,\n};\nconst CheckIcon = () => (\n  <svg {...iconProps}>\n    <path d=\"M5 12.5 10 17.5 19 7\" />\n  </svg>\n);\nconst CloseIcon = () => (\n  <svg {...iconProps}>\n    <path d=\"M6 6l12 12M18 6 6 18\" />\n  </svg>\n);\nconst UndoIcon = () => (\n  <svg {...iconProps}>\n    <path d=\"M4 12a8 8 0 1 0 2.5-5.8M4 4v4.5h4.5\" />\n  </svg>\n);\n\n/**\n * A control that stays focusable when it has nothing to do: React Aria drops `aria-disabled` and a disabled button would\n * drop focus to the page when the stack runs out, so the attribute is set by hand and the press is guarded.\n */\nfunction Control({\n  disabled,\n  onPress,\n  ...rest\n}: { disabled: boolean; onPress: () => void } & Omit<ButtonProps, \"onPress\" | \"isDisabled\">) {\n  const ref = useRef<HTMLButtonElement>(null);\n  useIsomorphicLayoutEffect(() => {\n    if (disabled) ref.current?.setAttribute(\"aria-disabled\", \"true\");\n    else ref.current?.removeAttribute(\"aria-disabled\");\n  }, [disabled]);\n  return (\n    <Button\n      {...rest}\n      ref={ref}\n      className=\"aria-disabled:cursor-default aria-disabled:opacity-40\"\n      onPress={() => {\n        if (!disabled) onPress();\n      }}\n    />\n  );\n}\n\n/** Renders a custom empty state; the reset handler travels as a prop so render never touches the stack's refs. */\nfunction EmptySlot({\n  render,\n  onReset,\n}: {\n  render: (reset: () => void) => ReactNode;\n  onReset: () => void;\n}) {\n  return <>{render(onReset)}</>;\n}\n\nconst HOME_TRANSITION = (delay: number) =>\n  `translate var(--duration-smooth) var(--ease-smooth) ${delay}ms, rotate var(--duration-smooth) var(--ease-smooth) ${delay}ms, opacity var(--duration-quick) var(--ease-enter) ${delay}ms`;\nconst SPRING_BACK =\n  \"translate var(--duration-morph) var(--ease-morph), rotate var(--duration-morph) var(--ease-morph)\";\nconst THROW =\n  \"translate var(--duration-calm) var(--ease-calm), rotate var(--duration-calm) var(--ease-calm), opacity 220ms var(--ease-settle) 120ms\";\nconst REDUCED_FADE = \"opacity 150ms linear\";\n\ninterface CardProps {\n  id: string;\n  depth: number;\n  decision: CardDecision | null;\n  returnFrom?: Return;\n  interactive: boolean;\n  zIndex: number;\n  label: string;\n  labels: { left: string; right: string };\n  stage: RefObject<HTMLDivElement | null>;\n  fling: (id: string) => Point | undefined;\n  onRelease: (id: string, offset: Point, velocity: Point, width: number) => boolean;\n  onThrown: (id: string, exit: Exit) => void;\n  onGone: (id: string) => void;\n  children: ReactNode;\n}\n\nfunction StackCard({\n  id,\n  depth,\n  decision,\n  returnFrom,\n  interactive,\n  zIndex,\n  label,\n  labels,\n  stage,\n  fling,\n  onRelease,\n  onThrown,\n  onGone,\n  children,\n}: CardProps) {\n  const card = useRef<HTMLDivElement>(null);\n  // Grabbing the top half tips the card the way the hand moves; grabbing the bottom half tips it the other way.\n  const tilt = useRef(returnFrom?.tilt ?? 1);\n  const drag = useRef<{\n    ox: number;\n    oy: number;\n    samples: { t: number; x: number; y: number }[];\n  } | null>(null);\n  const settled = useRef(!returnFrom);\n  const wasDecided = useRef(false);\n\n  const lift = (value: number) => stage.current?.style.setProperty(\"--lift\", String(value));\n  /** Writes the card's place and what follows from it (its tilt and its stamps) straight to the DOM: a drag never re-renders. */\n  const place = (el: HTMLElement, x: number, y: number) => {\n    el.style.translate = `${x}px ${y}px`;\n    el.style.rotate = `${x * ROTATE * tilt.current}deg`;\n    el.style.setProperty(\"--keep\", String(clampUnit((x - STAMP_FROM) / (STAMP_TO - STAMP_FROM))));\n    el.style.setProperty(\"--pass\", String(clampUnit((-STAMP_FROM - x) / (STAMP_TO - STAMP_FROM))));\n  };\n\n  // Leaving the stack (a decision) and coming back (undo, or start over) are the only things that move a card by themselves.\n  useIsomorphicLayoutEffect(() => {\n    const el = card.current;\n    if (!el) return;\n    const reduced = prefersReducedMotion();\n    if (decision) {\n      // A key or button can decide the card mid-drag; the throw takes over from the finger.\n      drag.current = null;\n      el.removeAttribute(\"data-dragging\");\n      wasDecided.current = true;\n      const direction = decision === \"right\" ? 1 : -1;\n      const { x: cx, y: cy } = readOffset(el);\n      // Buttons and keys throw with a default flick; a drag keeps the finger's velocity.\n      const velocity = fling(id) ?? { x: direction * 900, y: -120 };\n      const speed = Math.hypot(velocity.x, velocity.y);\n      // Leave along the flick when it heads the chosen way, otherwise along the drag, otherwise straight out.\n      let ux = velocity.x;\n      let uy = velocity.y;\n      if (speed < 200 || Math.sign(ux) !== direction) {\n        ux = Math.abs(cx) > 8 ? cx : direction;\n        uy = Math.abs(cx) > 8 ? cy * 0.5 : -0.12;\n      }\n      const length = Math.hypot(ux, uy) || 1;\n      ux /= length;\n      uy /= length;\n      if (Math.abs(ux) < 0.45) {\n        ux = direction * 0.45;\n        uy = Math.sign(uy || -1) * Math.sqrt(1 - 0.45 * 0.45);\n      }\n      // Far enough to clear a typical preview or card column; the fade finishes before the spring does.\n      const reach = el.offsetWidth * 1.6;\n      const exit = { x: cx + ux * reach, y: cy + uy * reach, tilt: tilt.current };\n      onThrown(id, exit);\n      el.style.setProperty(direction > 0 ? \"--keep\" : \"--pass\", \"1\");\n      if (reduced) {\n        el.style.transition = REDUCED_FADE;\n      } else {\n        el.style.transition = THROW;\n        place(el, exit.x, exit.y);\n      }\n      el.style.opacity = \"0\";\n      return;\n    }\n    // Undo, or a first mount from where the card left: come back from there, catching any flight in progress.\n    if (!wasDecided.current && settled.current) return;\n    wasDecided.current = false;\n    const delay = returnFrom?.delay ?? 0;\n    if (!settled.current && !reduced && returnFrom) {\n      el.style.transition = \"none\";\n      place(el, returnFrom.x, returnFrom.y);\n      el.style.opacity = \"0\";\n      void el.offsetWidth;\n    }\n    settled.current = true;\n    if (reduced) {\n      el.style.transition = `${REDUCED_FADE} ${delay}ms`;\n      place(el, 0, 0);\n    } else {\n      el.style.transition = HOME_TRANSITION(delay);\n      place(el, 0, 0);\n    }\n    el.style.opacity = \"1\";\n    // Only the decision drives this effect; the return position is read once at that moment.\n  }, [decision]);\n\n  const gone = useCallback(() => onGone(id), [onGone, id]);\n  useExitBackstop(decision !== null, gone, FLIGHT_BACKSTOP_MS);\n\n  function down(event: ReactPointerEvent<HTMLDivElement>) {\n    if (!interactive || event.button !== 0 || !event.isPrimary) return;\n    if (\n      event.target instanceof Element &&\n      event.target.closest(\"button, a, input, select, textarea, [role='button']\")\n    )\n      return;\n    const el = event.currentTarget;\n    // Freeze wherever the card is (it may be mid-way home), then follow the finger.\n    const now = readOffset(el);\n    el.style.transition = \"none\";\n    if (Math.abs(now.x) < 2) {\n      const rect = el.getBoundingClientRect();\n      tilt.current = event.clientY < rect.top + rect.height / 2 ? 1 : -1;\n    }\n    place(el, now.x, now.y);\n    drag.current = {\n      ox: event.clientX - now.x,\n      oy: event.clientY - unresistY(now.y),\n      samples: [{ t: event.timeStamp, x: event.clientX, y: event.clientY }],\n    };\n    try {\n      el.setPointerCapture(event.pointerId);\n    } catch {\n      // A pointer that is no longer active cannot be captured; the drag then follows the card only while the pointer is over it.\n    }\n    el.setAttribute(\"data-dragging\", \"\");\n  }\n  function move(event: ReactPointerEvent<HTMLDivElement>) {\n    const state = drag.current;\n    if (!state || !interactive) return;\n    const x = event.clientX - state.ox;\n    const y = resistY(event.clientY - state.oy);\n    place(event.currentTarget, x, y);\n    // The cards behind rise as this one is dragged away.\n    lift(clampUnit(Math.hypot(x, y * 0.5) / LIFT_DISTANCE));\n    state.samples.push({ t: event.timeStamp, x: event.clientX, y: event.clientY });\n    if (state.samples.length > 12) state.samples.shift();\n  }\n  function up(event: ReactPointerEvent<HTMLDivElement>) {\n    const state = drag.current;\n    drag.current = null;\n    const el = event.currentTarget;\n    el.removeAttribute(\"data-dragging\");\n    if (el.hasPointerCapture(event.pointerId)) el.releasePointerCapture(event.pointerId);\n    if (!state || !interactive) return;\n    const velocity =\n      event.type === \"pointercancel\" ? { x: 0, y: 0 } : velocityOf(state.samples, event.timeStamp);\n    const offset = readOffset(el);\n    if (onRelease(id, offset, velocity, el.offsetWidth)) return;\n    // Below the threshold the card springs home.\n    el.style.transition = prefersReducedMotion() ? \"none\" : SPRING_BACK;\n    place(el, 0, 0);\n    lift(0);\n  }\n\n  return (\n    <div\n      className=\"card-stack-slot\"\n      style={{ \"--depth\": depth, zIndex } as CSSProperties}\n      aria-hidden={interactive ? undefined : true}\n      ref={(node) => {\n        if (!node) return;\n        if (interactive) node.removeAttribute(\"inert\");\n        else node.setAttribute(\"inert\", \"\");\n      }}\n    >\n      <div\n        ref={card}\n        className=\"card-stack-card\"\n        data-top={interactive ? \"\" : undefined}\n        data-flying={decision ? \"\" : undefined}\n        role={interactive ? \"group\" : undefined}\n        aria-label={interactive ? label : undefined}\n        onPointerDown={down}\n        onPointerMove={move}\n        onPointerUp={up}\n        onPointerCancel={up}\n        onTransitionEnd={(event) => {\n          if (decision && event.target === event.currentTarget && event.propertyName === \"opacity\")\n            gone();\n        }}\n      >\n        <div className=\"card-stack-face\">\n          {children}\n          <span className=\"card-stack-shade\" aria-hidden=\"true\" />\n        </div>\n        <span className=\"card-stack-stamp\" data-side=\"right\" aria-hidden=\"true\">\n          <CheckIcon />\n          {labels.right}\n        </span>\n        <span className=\"card-stack-stamp\" data-side=\"left\" aria-hidden=\"true\">\n          <CloseIcon />\n          {labels.left}\n        </span>\n      </div>\n    </div>\n  );\n}\n\nexport function CardStack<T>({\n  items,\n  getKey,\n  getLabel,\n  renderCard,\n  onDecide,\n  onUndo,\n  onReset,\n  labels = { left: \"Pass\", right: \"Keep\" },\n  outcomes,\n  label = \"Cards\",\n  renderEmpty,\n  className,\n}: CardStackProps<T>) {\n  const hintId = useId();\n  const stage = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState(0);\n  const [history, setHistory] = useState<{ key: string; decision: CardDecision }[]>([]);\n  const [flying, setFlying] = useState<string[]>([]);\n  const [returning, setReturning] = useState<Record<string, Return>>({});\n  const [message, setMessage] = useState(\"\");\n  // Where each thrown card left the screen, so undo and start over can bring it back from there. Only those handlers read it,\n  // so it lives in a ref: recording an exit must not re-render the stack in the very frame the throw starts.\n  const exits = useRef<Record<string, Exit>>({});\n  const flings = useRef(new Map<string, Point>());\n  const top = items[position];\n  const remaining = Math.max(0, items.length - position);\n\n  function decide(decision: CardDecision) {\n    if (!top) return;\n    const key = getKey(top);\n    stage.current?.style.setProperty(\"--lift\", \"0\");\n    setPosition(position + 1);\n    setHistory([...history, { key, decision }]);\n    setFlying((current) => [...current, key]);\n    setReturning({});\n    const left = remaining - 1;\n    setMessage(\n      `${getLabel(top)}${outcomes ? ` ${outcomes[decision]}` : `: ${labels[decision]}`}. ${left ? `${left} left.` : \"All cards reviewed.\"}`,\n    );\n    onDecide?.(top, decision);\n  }\n\n  function undo() {\n    const last = history[history.length - 1];\n    const item = last && items.find((entry) => getKey(entry) === last.key);\n    if (!last || !item) return;\n    const exit = exits.current[last.key];\n    setPosition(position - 1);\n    setHistory(history.slice(0, -1));\n    setFlying((current) => current.filter((key) => key !== last.key));\n    setReturning(exit ? { [last.key]: { ...exit, delay: 0 } } : {});\n    setMessage(`${getLabel(item)} restored.`);\n    onUndo?.(item, last.decision);\n  }\n\n  function reset() {\n    if (!history.length) return;\n    // The deck deals itself back: the card that will sit deepest returns first, the top card last.\n    const count = Math.min(VISIBLE, items.length);\n    const back: Record<string, Return> = {};\n    items.slice(0, count).forEach((item, index) => {\n      const key = getKey(item);\n      const exit = exits.current[key];\n      if (exit && index < position) back[key] = { ...exit, delay: (count - 1 - index) * 60 };\n    });\n    setPosition(0);\n    setHistory([]);\n    setFlying([]);\n    setReturning(back);\n    setMessage(\"All cards are back in the stack.\");\n    onReset?.();\n  }\n\n  function release(key: string, offset: Point, velocity: Point, width: number) {\n    const direction = Math.sign(offset.x);\n    if (!direction || !top || getKey(top) !== key) return false;\n    const flick =\n      Math.abs(velocity.x) > FLICK &&\n      Math.sign(velocity.x) === direction &&\n      Math.abs(offset.x) > 12;\n    const far =\n      Math.abs(offset.x) > Math.min(width * 0.35, 140) &&\n      !(Math.sign(velocity.x) === -direction && Math.abs(velocity.x) > 300);\n    if (!flick && !far) return false;\n    flings.current.set(key, velocity);\n    decide(direction > 0 ? \"right\" : \"left\");\n    return true;\n  }\n\n  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    if (event.target !== event.currentTarget) return;\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      decide(event.key === \"ArrowRight\" ? \"right\" : \"left\");\n    } else if (\n      event.key === \"Backspace\" ||\n      ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === \"z\")\n    ) {\n      event.preventDefault();\n      undo();\n    }\n  }\n\n  const decided = new Map(history.map((entry) => [entry.key, entry.decision]));\n  const windowKeys = new Set(items.slice(position, position + VISIBLE).map(getKey));\n  const rendered = items.filter(\n    (item) => windowKeys.has(getKey(item)) || flying.includes(getKey(item)),\n  );\n  const empty = position >= items.length && flying.length === 0;\n  const takeFling = useCallback((key: string) => {\n    const velocity = flings.current.get(key);\n    flings.current.delete(key);\n    return velocity;\n  }, []);\n  const recordExit = useCallback((key: string, exit: Exit) => {\n    exits.current[key] = exit;\n  }, []);\n  const finish = useCallback(\n    (key: string) => setFlying((current) => current.filter((entry) => entry !== key)),\n    [],\n  );\n\n  return (\n    <div data-slot=\"card-stack\" className={cn(\"card-stack\", className)}>\n      <div\n        ref={stage}\n        className=\"card-stack-stage\"\n        // A keyboard widget: a focusable group is not allowed, an application is.\n        role=\"application\"\n        aria-roledescription=\"card stack\"\n        aria-label={label}\n        aria-describedby={hintId}\n        tabIndex={0}\n        onKeyDown={onKeyDown}\n      >\n        {rendered.map((item) => {\n          const id = getKey(item);\n          const index = items.indexOf(item);\n          const decision = decided.get(id) ?? null;\n          const depth = decision ? 0 : index - position;\n          return (\n            <StackCard\n              key={id}\n              id={id}\n              depth={depth}\n              decision={decision}\n              returnFrom={returning[id]}\n              interactive={!decision && depth === 0}\n              zIndex={decision ? 20 + flying.indexOf(id) : VISIBLE - depth}\n              label={`${getLabel(item)}, ${index + 1} of ${items.length}`}\n              labels={labels}\n              stage={stage}\n              fling={takeFling}\n              onRelease={release}\n              onThrown={recordExit}\n              onGone={finish}\n            >\n              {renderCard(item)}\n            </StackCard>\n          );\n        })}\n        {empty ? (\n          <div className=\"card-stack-empty\">\n            {renderEmpty ? (\n              <EmptySlot render={renderEmpty} onReset={reset} />\n            ) : (\n              <>\n                <p className=\"m-0 text-base font-medium\">All cards reviewed</p>\n                <Button variant=\"outline\" onPress={reset} startIcon={<UndoIcon />}>\n                  Start over\n                </Button>\n              </>\n            )}\n          </div>\n        ) : null}\n      </div>\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {/* aria-disabled keeps focus on the button when the stack runs out, instead of dropping it to the page. */}\n        <Control\n          variant=\"outline\"\n          disabled={!top}\n          onPress={() => decide(\"left\")}\n          startIcon={<CloseIcon />}\n        >\n          {labels.left}\n        </Control>\n        <Control variant=\"ghost\" disabled={!history.length} onPress={undo} startIcon={<UndoIcon />}>\n          Undo\n        </Control>\n        <Control\n          variant=\"primary\"\n          disabled={!top}\n          onPress={() => decide(\"right\")}\n          startIcon={<CheckIcon />}\n        >\n          {labels.right}\n        </Control>\n      </div>\n      <p id={hintId} className=\"sr-only\">\n        Drag the top card, or use the left and right arrow keys to {labels.left.toLowerCase()} or{\" \"}\n        {labels.right.toLowerCase()} it. Backspace undoes the last decision.\n      </p>\n      <p className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {message}\n      </p>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/card-stack/index.d.ts

@@ -0,0 +1,2 @@
+import { CardDecision, CardStack, CardStackProps } from "./card-stack.js";
+export { type CardDecision, CardStack, type CardStackProps };

package/dist/card-stack/index.js

@@ -0,0 +1,2 @@
+import { CardStack } from "./card-stack.js";
+export { CardStack };

package/dist/carousel/carousel.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from "react";
+//#region src/carousel/carousel.d.ts
+/**
+ * Carousel: a row of slides people browse by swiping, a trackpad, dragging
+ * with a mouse, the arrow keys, or the controls below it. Use it for a short,
+ * ordered set of peers such as products or case studies, where the neighbours
+ * stay in view as a hint that there is more.
+ *
+ * The slides sit on a native scroll-snap track, so touch and trackpad swipes
+ * are the browser's own. The active slide is centred; its neighbours shrink and
+ * dim with their distance, and each page indicator stretches into a pill as the
+ * track nears its slide, all written straight from the scroll position without a
+ * re-render. A mouse can drag the track, and a flick carries on to the next
+ * slide. Arrow keys, Home and End move between slides from the track or the
+ * indicators. `interval` adds a play control that rotates through the slides;
+ * rotation pauses on hover, keyboard focus and touch, while the carousel is off
+ * screen or the tab is hidden, and is unavailable under reduced motion (where
+ * scrolling also jumps instead of gliding).
+ */
+export interface CarouselProps {
+  /** Names the carousel for assistive technology, such as "From the Harbour suites". */
+  label: string;
+  /** One child per slide. */
+  children: ReactNode;
+  /** Controlled active slide. Pair with `onIndexChange`. */
+  index?: number;
+  /** @default 0 */
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** Width of one slide as a CSS length; `cqw` is a share of the carousel's width. @default "min(80cqw, 340px)" */
+  slideSize?: string;
+  /** Names each slide and its indicator. @default (index, count) => `${index + 1} of ${count}` */
+  slideLabel?: (index: number, count: number) => string;
+  /** Milliseconds per slide. Adds a play control that rotates through the slides. */
+  interval?: number;
+  /** Starts rotating on mount. Off by default, so motion begins with the viewer. @default false */
+  autoplay?: boolean;
+  /** Names of the controls, for translation. */
+  labels?: {
+    /** @default "Previous slide" */
+    previous?: string;
+    /** @default "Next slide" */
+    next?: string;
+    /** @default "Start slide rotation" */
+    play?: string;
+    /** @default "Pause slide rotation" */
+    pause?: string;
+    /** Names the group of indicators. @default "Choose a slide" */
+    slides?: string;
+  };
+  /** Extra classes for the carousel. Merged last. */
+  className?: string;
+}
+export declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=carousel.d.ts.map