@dowel-ui/react 0.7.0 → 0.8.0

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

@@ -0,0 +1,98 @@
+//#region src/components/card-stack/card-stack-layout.ts
+const DECK_SCALE_STEP = .08;
+const DECK_RISE = -30;
+const DECK_MAX_RISE = -90;
+function deckCardStyle(index, current, count) {
+	const offset = index - current;
+	const passed = offset < 0;
+	const scale = Math.min(Math.max(1 - offset * DECK_SCALE_STEP, DECK_SCALE_STEP), 2);
+	const rise = Math.max(offset * DECK_RISE, DECK_MAX_RISE);
+	return {
+		transform: `translateY(${String(rise)}px) scale(${String(scale)})`,
+		opacity: passed ? 0 : 1,
+		filter: passed ? "blur(2px)" : "none",
+		zIndex: count - index
+	};
+}
+const SEEDS = [
+	{
+		rot: -.55,
+		dx: .35,
+		dy: -.3,
+		beat: .3,
+		tune: -.2
+	},
+	{
+		rot: .7,
+		dx: -.45,
+		dy: .2,
+		beat: -.4,
+		tune: .35
+	},
+	{
+		rot: -.2,
+		dx: .6,
+		dy: .45,
+		beat: .6,
+		tune: -.45
+	},
+	{
+		rot: .4,
+		dx: -.2,
+		dy: -.5,
+		beat: -.1,
+		tune: .15
+	},
+	{
+		rot: -.8,
+		dx: -.6,
+		dy: .1,
+		beat: .45,
+		tune: .5
+	},
+	{
+		rot: .25,
+		dx: .15,
+		dy: -.15,
+		beat: -.55,
+		tune: -.3
+	}
+];
+/** Degrees a scattered card sits off square, at full scatter. */
+const REST_TILT = 7;
+/** Pixels a scattered card sits off centre, at full scatter. */
+const REST_DRIFT = 6;
+/** Pixels each card rises above the one beneath it in the closed pile. */
+const REST_RISE = 3;
+/** How much smaller each card beneath the top one is in the closed pile. */
+const REST_SHRINK = .025;
+/** Milliseconds between one card starting to move and the next. */
+const STAGGER = 35;
+const DURATION = 420;
+function fanCardStyle(index, count, state) {
+	const seed = SEEDS[index % SEEDS.length] ?? SEEDS[0];
+	const scatter = Math.min(Math.max(state.scatter, 0), 100) / 100;
+	const spread = Math.min(Math.max(state.spread, 0), 100) / 100;
+	const depth = count - 1 - index;
+	const fromCentre = index - (count - 1) / 2;
+	const arc = 10 + spread * 30;
+	const step = count > 1 ? arc / (count - 1) : 0;
+	const x = state.fanned ? 0 : seed.dx * scatter * REST_DRIFT;
+	const y = state.fanned ? 0 : -depth * REST_RISE + seed.dy * scatter * REST_DRIFT;
+	const angle = state.fanned ? fromCentre * step + seed.rot * scatter * .3 * step : seed.rot * scatter * REST_TILT;
+	const scale = state.fanned ? 1 : 1 - depth * REST_SHRINK;
+	const order = state.fanned ? depth : index;
+	const delay = Math.max(0, STAGGER * (order + seed.beat * scatter * .6));
+	const duration = DURATION * (1 + seed.tune * scatter * .45);
+	return {
+		transform: `translate(calc(var(--card-stack-flip, 1) * ${x.toFixed(2)}px), ${y.toFixed(2)}px) rotate(calc(var(--card-stack-flip, 1) * ${angle.toFixed(3)}deg)) scale(${scale.toFixed(3)})`,
+		transformOrigin: "50% calc(50% + 12.5rem)",
+		transitionDelay: `calc(${delay.toFixed(0)}ms * var(--motion-scale, 1))`,
+		transitionDuration: `calc(${duration.toFixed(0)}ms * var(--motion-scale, 1))`,
+		zIndex: index
+	};
+}
+//#endregion
+export { deckCardStyle, fanCardStyle };
+
+//# sourceMappingURL=card-stack-layout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-stack-layout.js","names":[],"sources":["../../../src/components/card-stack/card-stack-layout.ts"],"sourcesContent":["// Ported from SmoothUI Scrollable Card Stack (MIT, © 2024 Eduardo Calvo) and bencho Card stack (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport type { CSSProperties } from \"react\";\n\n/*\n * Where each card sits. Pure functions of index and state, so the component\n * only chooses which one applies, and the geometry can be read (and tested)\n * on its own.\n */\n\n/* Deck: SmoothUI's numbers. Each card behind the top one is 8% smaller and\n * 30px higher, up to three deep; cards already passed fade and blur away. */\nconst DECK_SCALE_STEP = 0.08;\nconst DECK_RISE = -30;\nconst DECK_MAX_RISE = DECK_RISE * 3;\n\nexport function deckCardStyle(index: number, current: number, count: number): CSSProperties {\n  const offset = index - current;\n  const passed = offset < 0;\n  const scale = Math.min(Math.max(1 - offset * DECK_SCALE_STEP, DECK_SCALE_STEP), 2);\n  const rise = Math.max(offset * DECK_RISE, DECK_MAX_RISE);\n\n  return {\n    transform: `translateY(${String(rise)}px) scale(${String(scale)})`,\n    opacity: passed ? 0 : 1,\n    filter: passed ? \"blur(2px)\" : \"none\",\n    zIndex: count - index,\n  };\n}\n\n/*\n * Fan: bencho's idea, our numbers. Every card turns about one pivot far below\n * the pile, so the sideways travel, the drop of the outer cards and their tilt\n * are one rotation rather than three values that never quite agree.\n *\n * The pile is seeded, not random — the same on every render and every copy —\n * so it looks set down by hand rather than squared up by a computer. These\n * seeds are our own; each column is -1..1 and multiplied by `scatter`.\n */\nconst SEEDS = [\n  { rot: -0.55, dx: 0.35, dy: -0.3, beat: 0.3, tune: -0.2 },\n  { rot: 0.7, dx: -0.45, dy: 0.2, beat: -0.4, tune: 0.35 },\n  { rot: -0.2, dx: 0.6, dy: 0.45, beat: 0.6, tune: -0.45 },\n  { rot: 0.4, dx: -0.2, dy: -0.5, beat: -0.1, tune: 0.15 },\n  { rot: -0.8, dx: -0.6, dy: 0.1, beat: 0.45, tune: 0.5 },\n  { rot: 0.25, dx: 0.15, dy: -0.15, beat: -0.55, tune: -0.3 },\n] as const;\n\n/** Degrees a scattered card sits off square, at full scatter. */\nconst REST_TILT = 7;\n/** Pixels a scattered card sits off centre, at full scatter. */\nconst REST_DRIFT = 6;\n/** Pixels each card rises above the one beneath it in the closed pile. */\nconst REST_RISE = 3;\n/** How much smaller each card beneath the top one is in the closed pile. */\nconst REST_SHRINK = 0.025;\n/** Milliseconds between one card starting to move and the next. */\nconst STAGGER = 35;\nconst DURATION = 420;\n\nexport interface FanState {\n  fanned: boolean;\n  /** 0–100. */\n  spread: number;\n  /** 0–100. */\n  scatter: number;\n}\n\nexport function fanCardStyle(index: number, count: number, state: FanState): CSSProperties {\n  const seed = SEEDS[index % SEEDS.length] ?? SEEDS[0];\n  const scatter = Math.min(Math.max(state.scatter, 0), 100) / 100;\n  const spread = Math.min(Math.max(state.spread, 0), 100) / 100;\n  const depth = count - 1 - index;\n  const fromCentre = index - (count - 1) / 2;\n  // The arc is never zero: a stack that does not open reads as broken.\n  const arc = 10 + spread * 30;\n  const step = count > 1 ? arc / (count - 1) : 0;\n\n  const x = state.fanned ? 0 : seed.dx * scatter * REST_DRIFT;\n  const y = state.fanned ? 0 : -depth * REST_RISE + seed.dy * scatter * REST_DRIFT;\n  const angle = state.fanned\n    ? fromCentre * step + seed.rot * scatter * 0.3 * step\n    : seed.rot * scatter * REST_TILT;\n  const scale = state.fanned ? 1 : 1 - depth * REST_SHRINK;\n\n  // Opening starts from the top card; closing from the bottom one. The beat\n  // keeps six cards on one easing from all landing on the same frame.\n  const order = state.fanned ? depth : index;\n  const delay = Math.max(0, STAGGER * (order + seed.beat * scatter * 0.6));\n  const duration = DURATION * (1 + seed.tune * scatter * 0.45);\n\n  return {\n    transform:\n      `translate(calc(var(--card-stack-flip, 1) * ${x.toFixed(2)}px), ${y.toFixed(2)}px) ` +\n      `rotate(calc(var(--card-stack-flip, 1) * ${angle.toFixed(3)}deg)) scale(${scale.toFixed(3)})`,\n    transformOrigin: \"50% calc(50% + 12.5rem)\",\n    transitionDelay: `calc(${delay.toFixed(0)}ms * var(--motion-scale, 1))`,\n    transitionDuration: `calc(${duration.toFixed(0)}ms * var(--motion-scale, 1))`,\n    zIndex: index,\n  };\n}\n"],"mappings":";AAWA,MAAM,kBAAkB;AACxB,MAAM,YAAY;AAClB,MAAM,gBAAgB;AAEtB,SAAgB,cAAc,OAAe,SAAiB,OAA8B;CAC1F,MAAM,SAAS,QAAQ;CACvB,MAAM,SAAS,SAAS;CACxB,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,IAAI,SAAS,iBAAiB,eAAe,GAAG,CAAC;CACjF,MAAM,OAAO,KAAK,IAAI,SAAS,WAAW,aAAa;CAEvD,OAAO;EACL,WAAW,cAAc,OAAO,IAAI,EAAE,YAAY,OAAO,KAAK,EAAE;EAChE,SAAS,SAAS,IAAI;EACtB,QAAQ,SAAS,cAAc;EAC/B,QAAQ,QAAQ;CAClB;AACF;AAWA,MAAM,QAAQ;CACZ;EAAE,KAAK;EAAO,IAAI;EAAM,IAAI;EAAM,MAAM;EAAK,MAAM;CAAK;CACxD;EAAE,KAAK;EAAK,IAAI;EAAO,IAAI;EAAK,MAAM;EAAM,MAAM;CAAK;CACvD;EAAE,KAAK;EAAM,IAAI;EAAK,IAAI;EAAM,MAAM;EAAK,MAAM;CAAM;CACvD;EAAE,KAAK;EAAK,IAAI;EAAM,IAAI;EAAM,MAAM;EAAM,MAAM;CAAK;CACvD;EAAE,KAAK;EAAM,IAAI;EAAM,IAAI;EAAK,MAAM;EAAM,MAAM;CAAI;CACtD;EAAE,KAAK;EAAM,IAAI;EAAM,IAAI;EAAO,MAAM;EAAO,MAAM;CAAK;AAC5D;;AAGA,MAAM,YAAY;;AAElB,MAAM,aAAa;;AAEnB,MAAM,YAAY;;AAElB,MAAM,cAAc;;AAEpB,MAAM,UAAU;AAChB,MAAM,WAAW;AAUjB,SAAgB,aAAa,OAAe,OAAe,OAAgC;CACzF,MAAM,OAAO,MAAM,QAAQ,MAAM,WAAW,MAAM;CAClD,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,MAAM,SAAS,CAAC,GAAG,GAAG,IAAI;CAC5D,MAAM,SAAS,KAAK,IAAI,KAAK,IAAI,MAAM,QAAQ,CAAC,GAAG,GAAG,IAAI;CAC1D,MAAM,QAAQ,QAAQ,IAAI;CAC1B,MAAM,aAAa,SAAS,QAAQ,KAAK;CAEzC,MAAM,MAAM,KAAK,SAAS;CAC1B,MAAM,OAAO,QAAQ,IAAI,OAAO,QAAQ,KAAK;CAE7C,MAAM,IAAI,MAAM,SAAS,IAAI,KAAK,KAAK,UAAU;CACjD,MAAM,IAAI,MAAM,SAAS,IAAI,CAAC,QAAQ,YAAY,KAAK,KAAK,UAAU;CACtE,MAAM,QAAQ,MAAM,SAChB,aAAa,OAAO,KAAK,MAAM,UAAU,KAAM,OAC/C,KAAK,MAAM,UAAU;CACzB,MAAM,QAAQ,MAAM,SAAS,IAAI,IAAI,QAAQ;CAI7C,MAAM,QAAQ,MAAM,SAAS,QAAQ;CACrC,MAAM,QAAQ,KAAK,IAAI,GAAG,WAAW,QAAQ,KAAK,OAAO,UAAU,GAAI;CACvE,MAAM,WAAW,YAAY,IAAI,KAAK,OAAO,UAAU;CAEvD,OAAO;EACL,WACE,8CAA8C,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,8CACpC,MAAM,QAAQ,CAAC,EAAE,cAAc,MAAM,QAAQ,CAAC,EAAE;EAC7F,iBAAiB;EACjB,iBAAiB,QAAQ,MAAM,QAAQ,CAAC,EAAE;EAC1C,oBAAoB,QAAQ,SAAS,QAAQ,CAAC,EAAE;EAChD,QAAQ;CACV;AACF"}

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

@@ -0,0 +1,29 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/card-stack/card-stack.d.ts
+declare const cardStackVariants: (props?: ({
+  variant?: "deck" | "fan" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CardStackProps extends ComponentPropsWithRef<"div">, VariantProps<typeof cardStackVariants> {
+  /** One card per child. */
+  children: ReactNode;
+  /** `deck` only: the card on top (controlled). */
+  index?: number;
+  /** `deck` only: the card on top at first (uncontrolled). */
+  defaultIndex?: number;
+  /** `deck` only: called when the reader moves to another card. */
+  onIndexChange?: (index: number) => void;
+  /** `deck` only: names each card for assistive technology. Defaults to "2 of 5". */
+  getCardLabel?: (index: number, count: number) => string;
+  /** `fan` only: forces the fan open or shut. Leave unset to follow hover and focus. */
+  open?: boolean;
+  /** `fan` only: the width of the fan, 0–100. It is an arc the cards share, not a gap. */
+  spread?: number;
+  /** `fan` only: how far the pile is from squared-up, 0–100. */
+  scatter?: number;
+}
+/** A pile of cards: a stepped deck, or a pile that fans out. */
+declare function CardStack({ variant, index, defaultIndex, onIndexChange, getCardLabel, open, spread, scatter, ...props }: CardStackProps): import("react").JSX.Element;
+//#endregion
+export { CardStack, CardStackProps, cardStackVariants };
+//# sourceMappingURL=card-stack.d.ts.map

package/dist/components/card-stack/card-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-stack.d.ts","names":[],"sources":["../../../src/components/card-stack/card-stack.tsx"],"mappings":";;;cAsCM,oBAAiB;;6CAUrB;UAOe,uBACP,8BAA8B,oBAAoB;;EAE1D,UAAU;;EAEV;;EAEA;;EAEA,iBAAiB;;EAEjB,gBAAgB,eAAe;;EAE/B;;EAEA;;EAEA;;;iBAsBc,YACd,SACA,OACA,cACA,eACA,cACA,MACA,QACA,YACG,SACF,iCAAc,IAAA"}

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

@@ -0,0 +1,229 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { deckCardStyle, fanCardStyle } from "./card-stack-layout.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Children, useEffect, useRef, useState } from "react";
+//#region src/components/card-stack/card-stack.tsx
+const WHEEL_THRESHOLD = 20;
+const WHEEL_INTERVAL = 300;
+const SWIPE_THRESHOLD = 60;
+const cardStackVariants = cva("relative flex flex-col items-center", {
+	variants: { variant: {
+		deck: "gap-4",
+		fan: "rtl:[--card-stack-flip:-1]"
+	} },
+	defaultVariants: { variant: "deck" }
+});
+const cardShell = cn("col-start-1 row-start-1", "transition-[transform,opacity,filter,scale] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]");
+const defaultLabel = (index, count) => `${String(index + 1)} of ${String(count)}`;
+/** A pile of cards: a stepped deck, or a pile that fans out. */
+function CardStack({ variant = "deck", index, defaultIndex, onIndexChange, getCardLabel, open, spread, scatter, ...props }) {
+	return variant === "fan" ? /* @__PURE__ */ jsx(Fan, {
+		open,
+		spread,
+		scatter,
+		...props
+	}) : /* @__PURE__ */ jsx(Deck, {
+		index,
+		defaultIndex,
+		onIndexChange,
+		getCardLabel,
+		...props
+	});
+}
+function isRtl(element) {
+	return element.closest("[dir]")?.getAttribute("dir") === "rtl";
+}
+function Deck({ className, children, index, defaultIndex = 0, onIndexChange, getCardLabel = defaultLabel, ...props }) {
+	const cards = Children.toArray(children);
+	const count = cards.length;
+	const [uncontrolled, setUncontrolled] = useState(defaultIndex);
+	const current = Math.min(Math.max(index ?? uncontrolled, 0), Math.max(count - 1, 0));
+	const [announcement, setAnnouncement] = useState("");
+	const stage = useRef(null);
+	const dots = useRef([]);
+	const lastWheel = useRef(Number.NEGATIVE_INFINITY);
+	const touchStart = useRef(null);
+	function go(target, focusDot = false) {
+		const next = Math.min(Math.max(target, 0), count - 1);
+		if (next === current) return false;
+		if (index === void 0) setUncontrolled(next);
+		onIndexChange?.(next);
+		setAnnouncement(`Card ${getCardLabel(next, count)}`);
+		if (focusDot) dots.current[next]?.focus();
+		return true;
+	}
+	const step = useRef(go);
+	const currentRef = useRef(current);
+	useEffect(() => {
+		step.current = go;
+		currentRef.current = current;
+	});
+	useEffect(() => {
+		const element = stage.current;
+		if (!element) return;
+		const onWheel = (event) => {
+			if (Math.abs(event.deltaY) < WHEEL_THRESHOLD) return;
+			const now = event.timeStamp;
+			if (now - lastWheel.current < WHEEL_INTERVAL) {
+				event.preventDefault();
+				return;
+			}
+			if (step.current(currentRef.current + Math.sign(event.deltaY))) {
+				lastWheel.current = now;
+				event.preventDefault();
+			}
+		};
+		element.addEventListener("wheel", onWheel, { passive: false });
+		return () => element.removeEventListener("wheel", onWheel);
+	}, []);
+	function handleKeyDown(event) {
+		const forward = isRtl(event.currentTarget) ? "ArrowLeft" : "ArrowRight";
+		const backward = forward === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+		const target = {
+			ArrowDown: current + 1,
+			[forward]: current + 1,
+			ArrowUp: current - 1,
+			[backward]: current - 1,
+			Home: 0,
+			End: count - 1
+		}[event.key];
+		if (target === void 0) return;
+		event.preventDefault();
+		go(target, true);
+	}
+	function handleTouchMove(event) {
+		const start = touchStart.current;
+		const touch = event.touches[0];
+		if (start === null || !touch) return;
+		const delta = start - touch.clientY;
+		if (Math.abs(delta) < SWIPE_THRESHOLD) return;
+		touchStart.current = null;
+		go(current + Math.sign(delta));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		role: "region",
+		"aria-roledescription": "carousel",
+		"aria-label": props["aria-labelledby"] ? void 0 : "Cards",
+		"data-slot": "card-stack",
+		"data-variant": "deck",
+		className: cn(cardStackVariants({ variant: "deck" }), className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: stage,
+				"data-slot": "card-stack-stage",
+				className: "grid touch-none place-items-center pt-24 [perspective:1000px]",
+				onTouchStart: (event) => {
+					touchStart.current = event.touches[0]?.clientY ?? null;
+				},
+				onTouchMove: handleTouchMove,
+				onTouchEnd: () => {
+					touchStart.current = null;
+				},
+				children: cards.map((card, i) => {
+					const active = i === current;
+					return /* @__PURE__ */ jsx("div", {
+						role: "group",
+						"aria-roledescription": "slide",
+						"aria-label": getCardLabel(i, count),
+						"aria-hidden": active ? void 0 : true,
+						inert: !active,
+						"data-slot": "card-stack-card",
+						"data-active": active,
+						className: cn(cardShell, "data-[active=true]:hover:scale-[1.02]"),
+						style: deckCardStyle(i, current, count),
+						children: card
+					}, i);
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "group",
+				"aria-label": "Choose a card",
+				className: "flex items-center gap-2",
+				children: cards.map((_, i) => /* @__PURE__ */ jsx("button", {
+					ref: (element) => {
+						dots.current[i] = element;
+					},
+					type: "button",
+					tabIndex: i === current ? 0 : -1,
+					"aria-label": `Card ${getCardLabel(i, count)}`,
+					"aria-current": i === current ? "true" : void 0,
+					"data-slot": "card-stack-indicator",
+					className: cn("relative size-2 rounded-full bg-border-strong after:absolute after:-inset-2", "transition-[background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "hover:bg-muted-foreground aria-current:scale-125 aria-current:bg-primary", focusRing),
+					onClick: () => go(i),
+					onKeyDown: handleKeyDown
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: announcement
+			})
+		]
+	});
+}
+function Fan({ className, children, open, spread = 55, scatter = 40, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }) {
+	const cards = Children.toArray(children);
+	const [hovered, setHovered] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const [lifted, setLifted] = useState(null);
+	const fanned = open ?? (hovered || focused);
+	return /* @__PURE__ */ jsx("div", {
+		role: "list",
+		"aria-label": props["aria-labelledby"] ? void 0 : "Cards",
+		"data-slot": "card-stack",
+		"data-variant": "fan",
+		"data-state": fanned ? "open" : "closed",
+		className: cn(cardStackVariants({ variant: "fan" }), "grid place-items-center", className),
+		onPointerEnter: (event) => {
+			onPointerEnter?.(event);
+			setHovered(true);
+		},
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			setHovered(false);
+			setLifted(null);
+		},
+		onFocus: (event) => {
+			onFocus?.(event);
+			setFocused(true);
+		},
+		onBlur: (event) => {
+			onBlur?.(event);
+			if (!event.currentTarget.contains(event.relatedTarget)) {
+				setFocused(false);
+				setLifted(null);
+			}
+		},
+		...props,
+		children: cards.map((card, i) => {
+			const up = fanned && lifted === i;
+			return /* @__PURE__ */ jsx("div", {
+				role: "listitem",
+				"data-slot": "card-stack-card",
+				className: cardShell,
+				style: fanCardStyle(i, cards.length, {
+					fanned,
+					spread,
+					scatter
+				}),
+				onPointerEnter: () => setLifted(i),
+				onFocus: () => setLifted(i),
+				children: /* @__PURE__ */ jsx("div", {
+					"data-slot": "card-stack-face",
+					"data-lifted": up || void 0,
+					className: "transition-[translate] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)] data-lifted:-translate-y-4",
+					children: card
+				})
+			}, i);
+		})
+	});
+}
+//#endregion
+export { CardStack, cardStackVariants };
+
+//# sourceMappingURL=card-stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-stack.js","names":[],"sources":["../../../src/components/card-stack/card-stack.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Scrollable Card Stack (MIT, © 2024 Eduardo Calvo) and bencho Card stack (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  Children,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n  type TouchEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\nimport { deckCardStyle, fanCardStyle } from \"./card-stack-layout\";\n\n/*\n * One pile of cards, two ways of going through it (ADR 0014, families not\n * copies):\n *\n * - `deck` (SmoothUI Scrollable Card Stack): one card on top, the rest\n *   receding behind it. Wheel, swipe, arrow keys or the indicator dots step\n *   through them one at a time. It is a carousel, and says so.\n * - `fan` (bencho Card stack): a loose, seeded pile that fans out into an arc\n *   on hover or focus; the card under the pointer lifts out of the fan.\n *\n * Both are CSS transitions on inline transforms. The source springs were\n * driven by discrete steps and hover, never by a gesture's velocity, so\n * `ease-overshoot` carries the bounce and the motion scale stops it.\n */\n\nconst WHEEL_THRESHOLD = 20;\nconst WHEEL_INTERVAL = 300;\nconst SWIPE_THRESHOLD = 60;\n\nconst cardStackVariants = cva(\"relative flex flex-col items-center\", {\n  variants: {\n    variant: {\n      deck: \"gap-4\",\n      fan: \"rtl:[--card-stack-flip:-1]\",\n    },\n  },\n  defaultVariants: {\n    variant: \"deck\",\n  },\n});\n\nconst cardShell = cn(\n  \"col-start-1 row-start-1\",\n  \"transition-[transform,opacity,filter,scale] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]\",\n);\n\nexport interface CardStackProps\n  extends ComponentPropsWithRef<\"div\">, VariantProps<typeof cardStackVariants> {\n  /** One card per child. */\n  children: ReactNode;\n  /** `deck` only: the card on top (controlled). */\n  index?: number;\n  /** `deck` only: the card on top at first (uncontrolled). */\n  defaultIndex?: number;\n  /** `deck` only: called when the reader moves to another card. */\n  onIndexChange?: (index: number) => void;\n  /** `deck` only: names each card for assistive technology. Defaults to \"2 of 5\". */\n  getCardLabel?: (index: number, count: number) => string;\n  /** `fan` only: forces the fan open or shut. Leave unset to follow hover and focus. */\n  open?: boolean;\n  /** `fan` only: the width of the fan, 0–100. It is an arc the cards share, not a gap. */\n  spread?: number;\n  /** `fan` only: how far the pile is from squared-up, 0–100. */\n  scatter?: number;\n}\n\nconst defaultLabel = (index: number, count: number) =>\n  `${String(index + 1)} of ${String(count)}`;\n\ntype Shared = Omit<\n  CardStackProps,\n  | \"variant\"\n  | \"index\"\n  | \"defaultIndex\"\n  | \"onIndexChange\"\n  | \"getCardLabel\"\n  | \"open\"\n  | \"spread\"\n  | \"scatter\"\n>;\ntype DeckProps = Shared &\n  Pick<CardStackProps, \"index\" | \"defaultIndex\" | \"onIndexChange\" | \"getCardLabel\">;\ntype FanProps = Shared & Pick<CardStackProps, \"open\" | \"spread\" | \"scatter\">;\n\n/** A pile of cards: a stepped deck, or a pile that fans out. */\nexport function CardStack({\n  variant = \"deck\",\n  index,\n  defaultIndex,\n  onIndexChange,\n  getCardLabel,\n  open,\n  spread,\n  scatter,\n  ...props\n}: CardStackProps) {\n  return variant === \"fan\" ? (\n    <Fan open={open} spread={spread} scatter={scatter} {...props} />\n  ) : (\n    <Deck\n      index={index}\n      defaultIndex={defaultIndex}\n      onIndexChange={onIndexChange}\n      getCardLabel={getCardLabel}\n      {...props}\n    />\n  );\n}\n\nfunction isRtl(element: Element) {\n  return element.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n}\n\nfunction Deck({\n  className,\n  children,\n  index,\n  defaultIndex = 0,\n  onIndexChange,\n  getCardLabel = defaultLabel,\n  ...props\n}: DeckProps) {\n  const cards = Children.toArray(children);\n  const count = cards.length;\n  const [uncontrolled, setUncontrolled] = useState(defaultIndex);\n  const current = Math.min(Math.max(index ?? uncontrolled, 0), Math.max(count - 1, 0));\n  const [announcement, setAnnouncement] = useState(\"\");\n  const stage = useRef<HTMLDivElement>(null);\n  const dots = useRef<(HTMLButtonElement | null)[]>([]);\n  const lastWheel = useRef(Number.NEGATIVE_INFINITY);\n  const touchStart = useRef<number | null>(null);\n\n  function go(target: number, focusDot = false) {\n    const next = Math.min(Math.max(target, 0), count - 1);\n    if (next === current) return false;\n    if (index === undefined) setUncontrolled(next);\n    onIndexChange?.(next);\n    setAnnouncement(`Card ${getCardLabel(next, count)}`);\n    if (focusDot) dots.current[next]?.focus();\n    return true;\n  }\n\n  // The wheel listener must be non-passive to keep the page from scrolling\n  // while it steps the deck — but only while there is a card to step to, so\n  // the page scrolls on as normal once either end is reached.\n  const step = useRef(go);\n  const currentRef = useRef(current);\n  useEffect(() => {\n    step.current = go;\n    currentRef.current = current;\n  });\n  useEffect(() => {\n    const element = stage.current;\n    if (!element) return;\n    const onWheel = (event: WheelEvent) => {\n      if (Math.abs(event.deltaY) < WHEEL_THRESHOLD) return;\n      const now = event.timeStamp;\n      if (now - lastWheel.current < WHEEL_INTERVAL) {\n        event.preventDefault();\n        return;\n      }\n      if (step.current(currentRef.current + Math.sign(event.deltaY))) {\n        lastWheel.current = now;\n        event.preventDefault();\n      }\n    };\n    element.addEventListener(\"wheel\", onWheel, { passive: false });\n    return () => element.removeEventListener(\"wheel\", onWheel);\n  }, []);\n\n  // The dots are the keyboard's way in, and behave like a tab list: one tab\n  // stop, arrows to move, Home and End to jump.\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n    const forward = isRtl(event.currentTarget) ? \"ArrowLeft\" : \"ArrowRight\";\n    const backward = forward === \"ArrowLeft\" ? \"ArrowRight\" : \"ArrowLeft\";\n    const targets: Record<string, number> = {\n      ArrowDown: current + 1,\n      [forward]: current + 1,\n      ArrowUp: current - 1,\n      [backward]: current - 1,\n      Home: 0,\n      End: count - 1,\n    };\n    const target = targets[event.key];\n    if (target === undefined) return;\n    event.preventDefault();\n    go(target, true);\n  }\n\n  function handleTouchMove(event: TouchEvent<HTMLDivElement>) {\n    const start = touchStart.current;\n    const touch = event.touches[0];\n    if (start === null || !touch) return;\n    const delta = start - touch.clientY;\n    if (Math.abs(delta) < SWIPE_THRESHOLD) return;\n    touchStart.current = null;\n    go(current + Math.sign(delta));\n  }\n\n  return (\n    <div\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      aria-label={props[\"aria-labelledby\"] ? undefined : \"Cards\"}\n      data-slot=\"card-stack\"\n      data-variant=\"deck\"\n      className={cn(cardStackVariants({ variant: \"deck\" }), className)}\n      {...props}\n    >\n      <div\n        ref={stage}\n        data-slot=\"card-stack-stage\"\n        className=\"grid touch-none place-items-center pt-24 [perspective:1000px]\"\n        onTouchStart={(event) => {\n          touchStart.current = event.touches[0]?.clientY ?? null;\n        }}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={() => {\n          touchStart.current = null;\n        }}\n      >\n        {cards.map((card, i) => {\n          const active = i === current;\n          return (\n            <div\n              key={i}\n              role=\"group\"\n              aria-roledescription=\"slide\"\n              aria-label={getCardLabel(i, count)}\n              aria-hidden={active ? undefined : true}\n              inert={!active}\n              data-slot=\"card-stack-card\"\n              data-active={active}\n              className={cn(cardShell, \"data-[active=true]:hover:scale-[1.02]\")}\n              style={deckCardStyle(i, current, count)}\n            >\n              {card}\n            </div>\n          );\n        })}\n      </div>\n      <div role=\"group\" aria-label=\"Choose a card\" className=\"flex items-center gap-2\">\n        {cards.map((_, i) => (\n          <button\n            key={i}\n            ref={(element) => {\n              dots.current[i] = element;\n            }}\n            type=\"button\"\n            tabIndex={i === current ? 0 : -1}\n            aria-label={`Card ${getCardLabel(i, count)}`}\n            aria-current={i === current ? \"true\" : undefined}\n            data-slot=\"card-stack-indicator\"\n            className={cn(\n              \"relative size-2 rounded-full bg-border-strong after:absolute after:-inset-2\",\n              \"transition-[background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n              \"hover:bg-muted-foreground aria-current:scale-125 aria-current:bg-primary\",\n              focusRing,\n            )}\n            onClick={() => go(i)}\n            onKeyDown={handleKeyDown}\n          />\n        ))}\n      </div>\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {announcement}\n      </span>\n    </div>\n  );\n}\n\nfunction Fan({\n  className,\n  children,\n  open,\n  spread = 55,\n  scatter = 40,\n  onPointerEnter,\n  onPointerLeave,\n  onFocus,\n  onBlur,\n  ...props\n}: FanProps) {\n  const cards = Children.toArray(children);\n  const [hovered, setHovered] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [lifted, setLifted] = useState<number | null>(null);\n  const fanned = open ?? (hovered || focused);\n\n  return (\n    <div\n      role=\"list\"\n      aria-label={props[\"aria-labelledby\"] ? undefined : \"Cards\"}\n      data-slot=\"card-stack\"\n      data-variant=\"fan\"\n      data-state={fanned ? \"open\" : \"closed\"}\n      className={cn(\n        cardStackVariants({ variant: \"fan\" }),\n        \"grid place-items-center\",\n        className,\n      )}\n      onPointerEnter={(event) => {\n        onPointerEnter?.(event);\n        setHovered(true);\n      }}\n      onPointerLeave={(event) => {\n        onPointerLeave?.(event);\n        setHovered(false);\n        setLifted(null);\n      }}\n      onFocus={(event) => {\n        onFocus?.(event);\n        setFocused(true);\n      }}\n      onBlur={(event) => {\n        onBlur?.(event);\n        if (!event.currentTarget.contains(event.relatedTarget)) {\n          setFocused(false);\n          setLifted(null);\n        }\n      }}\n      {...props}\n    >\n      {cards.map((card, i) => {\n        const up = fanned && lifted === i;\n        return (\n          <div\n            key={i}\n            role=\"listitem\"\n            data-slot=\"card-stack-card\"\n            className={cardShell}\n            style={fanCardStyle(i, cards.length, { fanned, spread, scatter })}\n            onPointerEnter={() => setLifted(i)}\n            onFocus={() => setLifted(i)}\n          >\n            <div\n              data-slot=\"card-stack-face\"\n              data-lifted={up || undefined}\n              className=\"transition-[translate] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)] data-lifted:-translate-y-4\"\n            >\n              {card}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport { cardStackVariants };\n"],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/card-stack/meta.ts
+const meta = defineMeta({
+	name: "card-stack",
+	title: "Card Stack",
+	description: "A pile of cards you step through as a receding deck, or that fans out into an arc on hover and focus.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["card-stack.tsx", "card-stack-layout.ts"],
+	a11y: "The deck is a carousel region (aria-roledescription=\"carousel\") of labelled slides; only the top card is exposed — the others are aria-hidden and inert. Indicator dots are buttons with a roving tabindex and aria-current; arrow keys (mirrored in right-to-left layouts), Home and End step the deck and move focus with it, and a polite status region announces the new card. Wheel and swipe are conveniences on top of that, and the wheel releases the page at either end. The fan is a labelled list that opens on focus as well as hover; its motion is decoration and settles instantly under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/card-stack/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"card-stack\",\n  title: \"Card Stack\",\n  description:\n    \"A pile of cards you step through as a receding deck, or that fans out into an arc on hover and focus.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"card-stack.tsx\", \"card-stack-layout.ts\"],\n  a11y:\n    'The deck is a carousel region (aria-roledescription=\"carousel\") of labelled slides; only the top card is ' +\n    \"exposed — the others are aria-hidden and inert. Indicator dots are buttons with a roving tabindex and \" +\n    \"aria-current; arrow keys (mirrored in right-to-left layouts), Home and End step the deck and move focus \" +\n    \"with it, and a polite status region announces the new card. Wheel and swipe are conveniences on top of \" +\n    \"that, and the wheel releases the page at either end. The fan is a labelled list that opens on focus as \" +\n    \"well as hover; its motion is decoration and settles instantly under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,kBAAkB,sBAAsB;CAChD,MACE;AAMJ,CAAC"}

package/dist/components/carousel-3d/carousel-3d.d.ts

@@ -0,0 +1,43 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/carousel-3d/carousel-3d.d.ts
+declare const carousel3dVariants: (props?: ({
+  variant?: "arc" | "coverflow" | null | undefined;
+  size?: "sm" | "md" | "lg" | null | undefined;
+  spread?: "hover" | "always" | "never" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The card face: an image, custom content, or a neutral numbered tile. */
+declare const carousel3dCardVariants: (props?: ({
+  tone?: "media" | "mono" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface Carousel3DItem {
+  /** Visible caption under the active slide, and the name of its dot. */
+  title: string;
+  /** Image URL shown as the card when `tone="media"` and no `content` is given. */
+  image?: string;
+  /** Alternative text for `image`. Defaults to empty: the title already names the slide. */
+  alt?: string;
+  /** Custom card content. Replaces the image or the numbered tile. */
+  content?: ReactNode;
+}
+interface Carousel3DProps extends Omit<ComponentPropsWithRef<"section">, "children">, VariantProps<typeof carousel3dVariants>, VariantProps<typeof carousel3dCardVariants> {
+  items: Carousel3DItem[];
+  /** Controlled index of the current slide. */
+  index?: number;
+  /** Initial slide when uncontrolled. Defaults to the middle one, as in the source. */
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** Wrap from the last slide to the first, and back. The strip rewinds rather than circling. */
+  loop?: boolean;
+  previousLabel?: string;
+  nextLabel?: string;
+  /** Name of the dot list. */
+  dotsLabel?: string;
+  /** Label of each slide, announced with its position. */
+  slideLabel?: (index: number, count: number) => string;
+}
+/** A 3D carousel: an arc of cards or a CoverFlow path, driven by buttons, dots, keys and swipe. */
+declare function Carousel3D({ className, items, index: indexProp, defaultIndex, onIndexChange, loop, variant, size, spread, tone, previousLabel, nextLabel, dotsLabel, slideLabel, ref, "aria-label": ariaLabel, ...props }: Carousel3DProps): import("react").JSX.Element;
+//#endregion
+export { Carousel3D, Carousel3DItem, Carousel3DProps, carousel3dCardVariants, carousel3dVariants };
+//# sourceMappingURL=carousel-3d.d.ts.map

package/dist/components/carousel-3d/carousel-3d.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-3d.d.ts","names":[],"sources":["../../../src/components/carousel-3d/carousel-3d.tsx"],"mappings":";;;cAkCM,qBAAkB;;;;6CA8BvB;;cAGK,yBAAsB;;6CAa3B;UAEgB;;EAEf;;EAEA;;EAEA;;EAEA,UAAU;;UAGK,wBAEb,KAAK,+CACL,oBAAoB,qBACpB,oBAAoB;EACtB,OAAO;;EAEP;;EAEA;EACA,iBAAiB;;EAEjB;EACA;EACA;;EAEA;;EAEA,cAAc,eAAe;;;iBAmEf,aACd,WACA,OACA,OAAO,WACP,cACA,eACA,MACA,SACA,MACA,QACA,MACA,eACA,WACA,WACA,YACA,mBACc,cACX,SACF,kCAAe,IAAA"}