@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/todo-tower/todo-tower.js

@@ -0,0 +1,284 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useRef, useState } from "react";
+import { MotionConfig, animate, motion, useMotionValue, useMotionValueEvent, useReducedMotion, useSpring, useTransform, useVelocity } from "motion/react";
+//#region src/components/todo-tower/todo-tower.tsx
+const PREFIX = "dowel-todo-tower";
+const STYLES = `
+@keyframes ${PREFIX}-drop{from{transform:translateY(-120%);opacity:0}}
+[data-slot=todo-tower-card]{animation:${PREFIX}-drop calc(420ms * var(--motion-scale,1)) cubic-bezier(.5,0,.6,1.25) both;animation-delay:calc(var(--todo-tower-order,0) * 60ms * var(--motion-scale,1))}
+`;
+/** Height of one brick, and the gap-free pitch of the stack, in px. */
+const PITCH = 46;
+/** Milliseconds between ticking a card and removing it: the flick. */
+const EXIT = 350;
+const todoTowerVariants = cva("relative w-[18.75rem] max-w-full touch-none select-none", {
+	variants: {
+		/** Card surface — the source's Fill switch. */
+		fill: {
+			light: "[--todo-tower-card:var(--color-card)] [--todo-tower-ink:var(--color-card-foreground)]",
+			dark: "[--todo-tower-card:var(--color-foreground)] [--todo-tower-ink:var(--color-background)]"
+		},
+		/** A hairline ring on each card — the source's Stroke switch. */
+		stroke: {
+			true: "[&_[data-slot=todo-tower-card]]:shadow-[inset_0_0_0_1px_var(--color-border)]",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		fill: "light",
+		stroke: false
+	}
+});
+/** A stable, id-derived horizontal nudge of ±6–15px, so the pile looks hand-stacked. */
+function nudge(id) {
+	let hash = 0;
+	for (const char of id) hash = hash * 31 + char.charCodeAt(0) | 0;
+	const magnitude = 6 + Math.abs(hash) % 10;
+	return hash % 2 === 0 ? magnitude : -magnitude;
+}
+function reducedMotion() {
+	return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function Row({ item, index, count, leader, leaderIndex, out, still, gravity, slip, checkLabel, onCheck, onGrab }) {
+	const follows = leader !== null && leaderIndex !== null && index <= leaderIndex;
+	const lag = follows ? leaderIndex - index : 0;
+	const targetX = useMotionValue(0);
+	const targetY = useMotionValue(0);
+	const stiffness = lag === 0 ? 2400 : (200 + gravity * 6) / (1 + lag * .6);
+	const damping = lag === 0 ? 80 : 8 + (100 - slip) * .25;
+	const x = useSpring(targetX, {
+		stiffness,
+		damping
+	});
+	const y = useSpring(targetY, {
+		stiffness,
+		damping
+	});
+	const velocity = useVelocity(x);
+	const rotate = useTransform(velocity, (v) => still ? 0 : Math.max(-35, Math.min(35, v * .02 * (1 + lag * .4))));
+	useMotionValueEvent(leader?.x ?? targetX, "change", (value) => {
+		if (follows && leader) targetX.set(value);
+	});
+	useMotionValueEvent(leader?.y ?? targetY, "change", (value) => {
+		if (follows && leader) targetY.set(value);
+	});
+	useEffect(() => {
+		if (follows) return;
+		targetX.set(0);
+		targetY.set(0);
+	}, [
+		follows,
+		targetX,
+		targetY
+	]);
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "todo-tower-row",
+		"data-held": leaderIndex === index || void 0,
+		className: cn("absolute bottom-0 left-1/2 -translate-x-1/2 translate-x-[calc(-50%+var(--todo-tower-x))] translate-y-[var(--todo-tower-y)]", "transition-[translate] duration-[var(--duration-slow)] ease-[cubic-bezier(0.5,0,0.6,1.3)]", "data-[held]:z-3"),
+		style: {
+			"--todo-tower-x": `${String(nudge(item.id))}px`,
+			"--todo-tower-y": `${String(-(count - 1 - index) * PITCH)}px`
+		},
+		onPointerDown: (event) => {
+			onGrab(index, event);
+		},
+		children: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "todo-tower-body",
+			style: {
+				x,
+				y,
+				rotate
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-slot": "todo-tower-card",
+				"data-out": out || void 0,
+				className: cn("flex h-[2.875rem] w-[12.875rem] cursor-grab items-center gap-2.5 rounded-[0.6875rem] px-3.5", "bg-[var(--todo-tower-card)] text-[var(--todo-tower-ink)]", "in-data-[held]:-translate-y-0.5 in-data-[held]:cursor-grabbing", "transition-[translate,rotate,opacity] duration-[var(--duration-slow),var(--duration-slow),var(--duration-normal)] ease-[var(--ease-in-quint)]", "data-[out]:translate-x-[118%] data-[out]:rotate-5 data-[out]:opacity-0 data-[out]:delay-[var(--duration-instant)]"),
+				style: { "--todo-tower-order": count - 1 - index },
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": checkLabel(item.label),
+					"aria-pressed": out,
+					"data-slot": "todo-tower-check",
+					className: cn("grid size-[1.1875rem] shrink-0 place-items-center rounded-md", "shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,currentColor_22%,transparent)] hover:shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,currentColor_38%,transparent)]", "aria-pressed:bg-[var(--todo-tower-ink)] aria-pressed:text-[var(--todo-tower-card)] aria-pressed:shadow-none", focusRing),
+					onPointerDown: (event) => {
+						event.stopPropagation();
+					},
+					onClick: () => {
+						onCheck(item.id);
+					},
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "3.4",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						"aria-hidden": "true",
+						className: cn("size-3", !out && "invisible"),
+						children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					"data-slot": "todo-tower-text",
+					className: cn("truncate text-[0.9375rem] leading-none tracking-[-0.005em] opacity-80", out && "line-through opacity-45"),
+					children: item.label
+				})]
+			})
+		})
+	});
+}
+/** A stack of to-do cards: tick one and it flicks away; grab one and the stack sways. */
+function TodoTower({ className, fill, stroke, items: itemsProp, defaultItems = [], onItemsChange, onComplete, loop = false, gravity = 50, slip = 45, label = "To-dos", checkLabel = (text) => `Done: ${text}`, completedLabel = (text) => `Completed: ${text}`, style, ...props }) {
+	const [inner, setInner] = useState(defaultItems);
+	const items = itemsProp ?? inner;
+	const [round, setRound] = useState(0);
+	const [leaving, setLeaving] = useState([]);
+	const [leaderIndex, setLeaderIndex] = useState(null);
+	const [announced, setAnnounced] = useState("");
+	const reduced = useReducedMotion() ?? false;
+	const leaderX = useMotionValue(0);
+	const leaderY = useMotionValue(0);
+	const grab = useRef(null);
+	const listRef = useRef(null);
+	const timers = useRef([]);
+	const focusIndex = useRef(null);
+	useEffect(() => () => {
+		for (const timer of timers.current) clearTimeout(timer);
+	}, []);
+	useEffect(() => {
+		const index = focusIndex.current;
+		if (index === null) return;
+		focusIndex.current = null;
+		const checks = listRef.current?.querySelectorAll("[data-slot=todo-tower-check]");
+		const target = checks?.[Math.min(index, checks.length - 1)];
+		if (target) target.focus();
+		else listRef.current?.focus();
+	});
+	function remove(id) {
+		const index = items.findIndex((item) => item.id === id);
+		const item = items[index];
+		setLeaving((current) => current.filter((value) => value !== id));
+		if (!item) return;
+		const next = items.filter((value) => value.id !== id);
+		focusIndex.current = index;
+		onComplete?.(item);
+		onItemsChange?.(next);
+		setAnnounced(completedLabel(item.label));
+		if (itemsProp !== void 0) return;
+		if (next.length === 0 && loop) {
+			setInner(defaultItems);
+			setRound((value) => value + 1);
+		} else setInner(next);
+	}
+	function check(id) {
+		if (leaving.includes(id)) return;
+		if (reducedMotion()) {
+			remove(id);
+			return;
+		}
+		setLeaving((current) => [...current, id]);
+		timers.current.push(setTimeout(() => {
+			remove(id);
+		}, EXIT));
+	}
+	function handleGrab(index, event) {
+		if (event.button !== 0 || reduced) return;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		grab.current = {
+			id: event.pointerId,
+			x: event.clientX,
+			y: event.clientY
+		};
+		leaderX.jump(0);
+		leaderY.jump(0);
+		setLeaderIndex(index);
+	}
+	function handleMove(event) {
+		const current = grab.current;
+		if (!current || current.id !== event.pointerId) return;
+		leaderX.set(event.clientX - current.x);
+		leaderY.set(event.clientY - current.y);
+	}
+	function handleRelease(event) {
+		const current = grab.current;
+		if (!current || current.id !== event.pointerId) return;
+		grab.current = null;
+		const options = {
+			type: "spring",
+			stiffness: 180 + gravity * 3,
+			damping: 18
+		};
+		Promise.all([animate(leaderX, 0, {
+			...options,
+			velocity: leaderX.getVelocity()
+		}), animate(leaderY, 0, {
+			...options,
+			velocity: leaderY.getVelocity()
+		})]).then(() => {
+			if (!grab.current) setLeaderIndex(null);
+		});
+	}
+	const leader = leaderIndex === null ? null : {
+		index: leaderIndex,
+		x: leaderX,
+		y: leaderY
+	};
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "todo-tower",
+			className: cn(todoTowerVariants({
+				fill,
+				stroke
+			}), className),
+			style: {
+				height: Math.max(1, items.length) * PITCH + 20,
+				...style
+			},
+			onPointerMove: handleMove,
+			onPointerUp: handleRelease,
+			onPointerCancel: handleRelease,
+			...props,
+			children: [
+				/* @__PURE__ */ jsx("style", {
+					href: PREFIX,
+					precedence: "dowel",
+					children: STYLES
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					ref: listRef,
+					"aria-label": label,
+					tabIndex: -1,
+					className: "absolute inset-0 outline-none",
+					children: items.map((item, index) => /* @__PURE__ */ jsx(Row, {
+						item,
+						index,
+						count: items.length,
+						leader,
+						leaderIndex,
+						out: leaving.includes(item.id),
+						still: reduced,
+						gravity,
+						slip,
+						checkLabel,
+						onCheck: check,
+						onGrab: handleGrab
+					}, item.id))
+				}, round),
+				/* @__PURE__ */ jsx("span", {
+					role: "status",
+					"aria-live": "polite",
+					className: "sr-only",
+					children: announced
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { TodoTower, todoTowerVariants };
+
+//# sourceMappingURL=todo-tower.js.map

package/dist/components/todo-tower/todo-tower.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"todo-tower.js","names":[],"sources":["../../../src/components/todo-tower/todo-tower.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Todo tower (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  MotionConfig,\n  animate,\n  motion,\n  useMotionValue,\n  useMotionValueEvent,\n  useReducedMotion,\n  useSpring,\n  useTransform,\n  useVelocity,\n  type MotionValue,\n} from \"motion/react\";\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type PointerEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A to-do list stacked like bricks on the floor. Ticking a card flicks it off\n * the side and the cards above drop into the gap; grabbing a card drags it,\n * and the cards stacked on top of it sway after it on springs.\n *\n * Deviation from the source: bencho runs a full rigid-body simulation in which\n * cards collide and topple off each other. This keeps the parts of that which\n * carry meaning — the flick, the drop, the sway of a dragged stack — without a\n * physics engine: each card above the one held follows it on a spring that\n * gets looser the higher it sits, and tilts with its own velocity. That is\n * what `motion` is for here (springs carrying a drag's velocity); the flick\n * and the drop are CSS. Dragging is decoration, so it has no keyboard\n * equivalent: every card's \"Done\" is a real button, and that is the action.\n *\n * Added: completion is announced politely, and focus moves to the card that\n * drops into the gap. Under reduced motion there is no sway, flick or drop.\n */\n\nconst PREFIX = \"dowel-todo-tower\";\n\nconst STYLES = `\n@keyframes ${PREFIX}-drop{from{transform:translateY(-120%);opacity:0}}\n[data-slot=todo-tower-card]{animation:${PREFIX}-drop calc(420ms * var(--motion-scale,1)) cubic-bezier(.5,0,.6,1.25) both;animation-delay:calc(var(--todo-tower-order,0) * 60ms * var(--motion-scale,1))}\n`;\n\n/** Height of one brick, and the gap-free pitch of the stack, in px. */\nconst PITCH = 46;\n/** Milliseconds between ticking a card and removing it: the flick. */\nconst EXIT = 350;\n\nconst todoTowerVariants = cva(\"relative w-[18.75rem] max-w-full touch-none select-none\", {\n  variants: {\n    /** Card surface — the source's Fill switch. */\n    fill: {\n      light:\n        \"[--todo-tower-card:var(--color-card)] [--todo-tower-ink:var(--color-card-foreground)]\",\n      dark: \"[--todo-tower-card:var(--color-foreground)] [--todo-tower-ink:var(--color-background)]\",\n    },\n    /** A hairline ring on each card — the source's Stroke switch. */\n    stroke: {\n      true: \"[&_[data-slot=todo-tower-card]]:shadow-[inset_0_0_0_1px_var(--color-border)]\",\n      false: \"\",\n    },\n  },\n  defaultVariants: { fill: \"light\", stroke: false },\n});\n\nexport interface TodoItem {\n  id: string;\n  label: string;\n}\n\n/** A stable, id-derived horizontal nudge of ±6–15px, so the pile looks hand-stacked. */\nfunction nudge(id: string): number {\n  let hash = 0;\n  for (const char of id) hash = (hash * 31 + char.charCodeAt(0)) | 0;\n  const magnitude = 6 + (Math.abs(hash) % 10);\n  return hash % 2 === 0 ? magnitude : -magnitude;\n}\n\nfunction reducedMotion(): boolean {\n  return (\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n\ninterface Leader {\n  index: number;\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n}\n\ninterface RowProps {\n  item: TodoItem;\n  index: number;\n  count: number;\n  leader: Leader | null;\n  leaderIndex: number | null;\n  out: boolean;\n  still: boolean;\n  gravity: number;\n  slip: number;\n  checkLabel: (label: string) => string;\n  onCheck: (id: string) => void;\n  onGrab: (index: number, event: PointerEvent<HTMLLIElement>) => void;\n}\n\nfunction Row({\n  item,\n  index,\n  count,\n  leader,\n  leaderIndex,\n  out,\n  still,\n  gravity,\n  slip,\n  checkLabel,\n  onCheck,\n  onGrab,\n}: RowProps) {\n  const follows = leader !== null && leaderIndex !== null && index <= leaderIndex;\n  const lag = follows ? leaderIndex - index : 0;\n  const targetX = useMotionValue(0);\n  const targetY = useMotionValue(0);\n  // The held card tracks the pointer almost rigidly; each card above it is\n  // looser than the one below, so a tall stack sways like one.\n  const stiffness = lag === 0 ? 2400 : (200 + gravity * 6) / (1 + lag * 0.6);\n  const damping = lag === 0 ? 80 : 8 + (100 - slip) * 0.25;\n  const x = useSpring(targetX, { stiffness, damping });\n  const y = useSpring(targetY, { stiffness, damping });\n  const velocity = useVelocity(x);\n  const rotate = useTransform(velocity, (v) =>\n    still ? 0 : Math.max(-35, Math.min(35, v * 0.02 * (1 + lag * 0.4))),\n  );\n\n  useMotionValueEvent(leader?.x ?? targetX, \"change\", (value) => {\n    if (follows && leader) targetX.set(value);\n  });\n  useMotionValueEvent(leader?.y ?? targetY, \"change\", (value) => {\n    if (follows && leader) targetY.set(value);\n  });\n\n  useEffect(() => {\n    if (follows) return;\n    targetX.set(0);\n    targetY.set(0);\n  }, [follows, targetX, targetY]);\n\n  return (\n    <li\n      data-slot=\"todo-tower-row\"\n      data-held={leaderIndex === index || undefined}\n      className={cn(\n        \"absolute bottom-0 left-1/2 -translate-x-1/2 translate-x-[calc(-50%+var(--todo-tower-x))] translate-y-[var(--todo-tower-y)]\",\n        \"transition-[translate] duration-[var(--duration-slow)] ease-[cubic-bezier(0.5,0,0.6,1.3)]\",\n        \"data-[held]:z-3\",\n      )}\n      style={\n        {\n          \"--todo-tower-x\": `${String(nudge(item.id))}px`,\n          \"--todo-tower-y\": `${String(-(count - 1 - index) * PITCH)}px`,\n        } as CSSProperties\n      }\n      onPointerDown={(event) => {\n        onGrab(index, event);\n      }}\n    >\n      <motion.div data-slot=\"todo-tower-body\" style={{ x, y, rotate }}>\n        <div\n          data-slot=\"todo-tower-card\"\n          data-out={out || undefined}\n          className={cn(\n            \"flex h-[2.875rem] w-[12.875rem] cursor-grab items-center gap-2.5 rounded-[0.6875rem] px-3.5\",\n            \"bg-[var(--todo-tower-card)] text-[var(--todo-tower-ink)]\",\n            \"in-data-[held]:-translate-y-0.5 in-data-[held]:cursor-grabbing\",\n            \"transition-[translate,rotate,opacity] duration-[var(--duration-slow),var(--duration-slow),var(--duration-normal)] ease-[var(--ease-in-quint)]\",\n            \"data-[out]:translate-x-[118%] data-[out]:rotate-5 data-[out]:opacity-0 data-[out]:delay-[var(--duration-instant)]\",\n          )}\n          style={{ \"--todo-tower-order\": count - 1 - index } as CSSProperties}\n        >\n          <button\n            type=\"button\"\n            aria-label={checkLabel(item.label)}\n            aria-pressed={out}\n            data-slot=\"todo-tower-check\"\n            className={cn(\n              \"grid size-[1.1875rem] shrink-0 place-items-center rounded-md\",\n              \"shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,currentColor_22%,transparent)] hover:shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,currentColor_38%,transparent)]\",\n              \"aria-pressed:bg-[var(--todo-tower-ink)] aria-pressed:text-[var(--todo-tower-card)] aria-pressed:shadow-none\",\n              focusRing,\n            )}\n            onPointerDown={(event) => {\n              // The check is a button, not a handle.\n              event.stopPropagation();\n            }}\n            onClick={() => {\n              onCheck(item.id);\n            }}\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3.4\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              aria-hidden=\"true\"\n              className={cn(\"size-3\", !out && \"invisible\")}\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </button>\n          <span\n            data-slot=\"todo-tower-text\"\n            className={cn(\n              \"truncate text-[0.9375rem] leading-none tracking-[-0.005em] opacity-80\",\n              out && \"line-through opacity-45\",\n            )}\n          >\n            {item.label}\n          </span>\n        </div>\n      </motion.div>\n    </li>\n  );\n}\n\nexport interface TodoTowerProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\">,\n    VariantProps<typeof todoTowerVariants> {\n  /** Controlled to-dos, top of the stack first. */\n  items?: TodoItem[];\n  /** Initial to-dos when uncontrolled, top of the stack first. */\n  defaultItems?: TodoItem[];\n  /** Called with the remaining to-dos after one is completed. */\n  onItemsChange?: (items: TodoItem[]) => void;\n  /** Called with the to-do that was completed. */\n  onComplete?: (item: TodoItem) => void;\n  /** Re-drop the whole stack once the last card is done (uncontrolled only). */\n  loop?: boolean;\n  /** How hard the stack pulls back together, 0–100. */\n  gravity?: number;\n  /** How loosely the cards above a held one sway, 0–100. */\n  slip?: number;\n  /** The list's accessible name. */\n  label?: string;\n  /** The check button's name for a to-do. */\n  checkLabel?: (label: string) => string;\n  /** Announced when a to-do is completed. */\n  completedLabel?: (label: string) => string;\n}\n\n/** A stack of to-do cards: tick one and it flicks away; grab one and the stack sways. */\nexport function TodoTower({\n  className,\n  fill,\n  stroke,\n  items: itemsProp,\n  defaultItems = [],\n  onItemsChange,\n  onComplete,\n  loop = false,\n  gravity = 50,\n  slip = 45,\n  label = \"To-dos\",\n  checkLabel = (text) => `Done: ${text}`,\n  completedLabel = (text) => `Completed: ${text}`,\n  style,\n  ...props\n}: TodoTowerProps) {\n  const [inner, setInner] = useState(defaultItems);\n  const items = itemsProp ?? inner;\n  const [round, setRound] = useState(0);\n  const [leaving, setLeaving] = useState<string[]>([]);\n  const [leaderIndex, setLeaderIndex] = useState<number | null>(null);\n  const [announced, setAnnounced] = useState(\"\");\n  const reduced = useReducedMotion() ?? false;\n  const leaderX = useMotionValue(0);\n  const leaderY = useMotionValue(0);\n  const grab = useRef<{ id: number; x: number; y: number } | null>(null);\n  const listRef = useRef<HTMLUListElement | null>(null);\n  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);\n  const focusIndex = useRef<number | null>(null);\n\n  useEffect(\n    () => () => {\n      for (const timer of timers.current) clearTimeout(timer);\n    },\n    [],\n  );\n\n  // After a card leaves, focus the one that dropped into its place.\n  useEffect(() => {\n    const index = focusIndex.current;\n    if (index === null) return;\n    focusIndex.current = null;\n    const checks = listRef.current?.querySelectorAll<HTMLElement>(\n      \"[data-slot=todo-tower-check]\",\n    );\n    const target = checks?.[Math.min(index, checks.length - 1)];\n    if (target) target.focus();\n    else listRef.current?.focus();\n  });\n\n  function remove(id: string) {\n    const index = items.findIndex((item) => item.id === id);\n    const item = items[index];\n    setLeaving((current) => current.filter((value) => value !== id));\n    if (!item) return;\n    const next = items.filter((value) => value.id !== id);\n    focusIndex.current = index;\n    onComplete?.(item);\n    onItemsChange?.(next);\n    setAnnounced(completedLabel(item.label));\n    if (itemsProp !== undefined) return;\n    if (next.length === 0 && loop) {\n      setInner(defaultItems);\n      setRound((value) => value + 1);\n    } else {\n      setInner(next);\n    }\n  }\n\n  function check(id: string) {\n    if (leaving.includes(id)) return;\n    if (reducedMotion()) {\n      remove(id);\n      return;\n    }\n    setLeaving((current) => [...current, id]);\n    timers.current.push(\n      setTimeout(() => {\n        remove(id);\n      }, EXIT),\n    );\n  }\n\n  function handleGrab(index: number, event: PointerEvent<HTMLLIElement>) {\n    if (event.button !== 0 || reduced) return;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    grab.current = { id: event.pointerId, x: event.clientX, y: event.clientY };\n    leaderX.jump(0);\n    leaderY.jump(0);\n    setLeaderIndex(index);\n  }\n\n  function handleMove(event: PointerEvent<HTMLDivElement>) {\n    const current = grab.current;\n    if (!current || current.id !== event.pointerId) return;\n    leaderX.set(event.clientX - current.x);\n    leaderY.set(event.clientY - current.y);\n  }\n\n  function handleRelease(event: PointerEvent<HTMLDivElement>) {\n    const current = grab.current;\n    if (!current || current.id !== event.pointerId) return;\n    grab.current = null;\n    // Thrown: the stack springs home carrying the throw's velocity.\n    const options = { type: \"spring\", stiffness: 180 + gravity * 3, damping: 18 } as const;\n    void Promise.all([\n      animate(leaderX, 0, { ...options, velocity: leaderX.getVelocity() }),\n      animate(leaderY, 0, { ...options, velocity: leaderY.getVelocity() }),\n    ]).then(() => {\n      if (!grab.current) setLeaderIndex(null);\n    });\n  }\n\n  const leader: Leader | null =\n    leaderIndex === null ? null : { index: leaderIndex, x: leaderX, y: leaderY };\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <div\n        data-slot=\"todo-tower\"\n        className={cn(todoTowerVariants({ fill, stroke }), className)}\n        style={{ height: Math.max(1, items.length) * PITCH + 20, ...style }}\n        onPointerMove={handleMove}\n        onPointerUp={handleRelease}\n        onPointerCancel={handleRelease}\n        {...props}\n      >\n        <style href={PREFIX} precedence=\"dowel\">\n          {STYLES}\n        </style>\n        <ul\n          key={round}\n          ref={listRef}\n          aria-label={label}\n          tabIndex={-1}\n          className=\"absolute inset-0 outline-none\"\n        >\n          {items.map((item, index) => (\n            <Row\n              key={item.id}\n              item={item}\n              index={index}\n              count={items.length}\n              leader={leader}\n              leaderIndex={leaderIndex}\n              out={leaving.includes(item.id)}\n              still={reduced}\n              gravity={gravity}\n              slip={slip}\n              checkLabel={checkLabel}\n              onCheck={check}\n              onGrab={handleGrab}\n            />\n          ))}\n        </ul>\n        <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n          {announced}\n        </span>\n      </div>\n    </MotionConfig>\n  );\n}\n\nexport { todoTowerVariants };\n"],"mappings":";;;;;;;;AA8CA,MAAM,SAAS;AAEf,MAAM,SAAS;aACF,OAAO;wCACoB,OAAO;;;AAI/C,MAAM,QAAQ;;AAEd,MAAM,OAAO;AAEb,MAAM,oBAAoB,IAAI,2DAA2D;CACvF,UAAU;;EAER,MAAM;GACJ,OACE;GACF,MAAM;EACR;;EAEA,QAAQ;GACN,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAS,QAAQ;CAAM;AAClD,CAAC;;AAQD,SAAS,MAAM,IAAoB;CACjC,IAAI,OAAO;CACX,KAAK,MAAM,QAAQ,IAAI,OAAQ,OAAO,KAAK,KAAK,WAAW,CAAC,IAAK;CACjE,MAAM,YAAY,IAAK,KAAK,IAAI,IAAI,IAAI;CACxC,OAAO,OAAO,MAAM,IAAI,YAAY,CAAC;AACvC;AAEA,SAAS,gBAAyB;CAChC,OACE,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kCAAkC,CAAC,CAAC;AAE1D;AAuBA,SAAS,IAAI,EACX,MACA,OACA,OACA,QACA,aACA,KACA,OACA,SACA,MACA,YACA,SACA,UACW;CACX,MAAM,UAAU,WAAW,QAAQ,gBAAgB,QAAQ,SAAS;CACpE,MAAM,MAAM,UAAU,cAAc,QAAQ;CAC5C,MAAM,UAAU,eAAe,CAAC;CAChC,MAAM,UAAU,eAAe,CAAC;CAGhC,MAAM,YAAY,QAAQ,IAAI,QAAQ,MAAM,UAAU,MAAM,IAAI,MAAM;CACtE,MAAM,UAAU,QAAQ,IAAI,KAAK,KAAK,MAAM,QAAQ;CACpD,MAAM,IAAI,UAAU,SAAS;EAAE;EAAW;CAAQ,CAAC;CACnD,MAAM,IAAI,UAAU,SAAS;EAAE;EAAW;CAAQ,CAAC;CACnD,MAAM,WAAW,YAAY,CAAC;CAC9B,MAAM,SAAS,aAAa,WAAW,MACrC,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,IAAI,IAAI,OAAQ,IAAI,MAAM,GAAI,CAAC,CACpE;CAEA,oBAAoB,QAAQ,KAAK,SAAS,WAAW,UAAU;EAC7D,IAAI,WAAW,QAAQ,QAAQ,IAAI,KAAK;CAC1C,CAAC;CACD,oBAAoB,QAAQ,KAAK,SAAS,WAAW,UAAU;EAC7D,IAAI,WAAW,QAAQ,QAAQ,IAAI,KAAK;CAC1C,CAAC;CAED,gBAAgB;EACd,IAAI,SAAS;EACb,QAAQ,IAAI,CAAC;EACb,QAAQ,IAAI,CAAC;CACf,GAAG;EAAC;EAAS;EAAS;CAAO,CAAC;CAE9B,OACE,oBAAC,MAAD;EACE,aAAU;EACV,aAAW,gBAAgB,SAAS,KAAA;EACpC,WAAW,GACT,8HACA,6FACA,iBACF;EACA,OACE;GACE,kBAAkB,GAAG,OAAO,MAAM,KAAK,EAAE,CAAC,EAAE;GAC5C,kBAAkB,GAAG,OAAO,EAAE,QAAQ,IAAI,SAAS,KAAK,EAAE;EAC5D;EAEF,gBAAgB,UAAU;GACxB,OAAO,OAAO,KAAK;EACrB;EAEA,UAAA,oBAAC,OAAO,KAAR;GAAY,aAAU;GAAkB,OAAO;IAAE;IAAG;IAAG;GAAO;GAC5D,UAAA,qBAAC,OAAD;IACE,aAAU;IACV,YAAU,OAAO,KAAA;IACjB,WAAW,GACT,+FACA,4DACA,kEACA,iJACA,mHACF;IACA,OAAO,EAAE,sBAAsB,QAAQ,IAAI,MAAM;IAVnD,UAAA,CAYE,oBAAC,UAAD;KACE,MAAK;KACL,cAAY,WAAW,KAAK,KAAK;KACjC,gBAAc;KACd,aAAU;KACV,WAAW,GACT,gEACA,iKACA,+GACA,SACF;KACA,gBAAgB,UAAU;MAExB,MAAM,gBAAgB;KACxB;KACA,eAAe;MACb,QAAQ,KAAK,EAAE;KACjB;KAEA,UAAA,oBAAC,OAAD;MACE,SAAQ;MACR,MAAK;MACL,QAAO;MACP,aAAY;MACZ,eAAc;MACd,gBAAe;MACf,eAAY;MACZ,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW;MAE3C,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;KACxB,CAAA;IACC,CAAA,GACR,oBAAC,QAAD;KACE,aAAU;KACV,WAAW,GACT,yEACA,OAAO,yBACT;KAEC,UAAA,KAAK;IACF,CAAA,CACH;;EACK,CAAA;CACV,CAAA;AAER;;AA6BA,SAAgB,UAAU,EACxB,WACA,MACA,QACA,OAAO,WACP,eAAe,CAAC,GAChB,eACA,YACA,OAAO,OACP,UAAU,IACV,OAAO,IACP,QAAQ,UACR,cAAc,SAAS,SAAS,QAChC,kBAAkB,SAAS,cAAc,QACzC,OACA,GAAG,SACc;CACjB,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,QAAQ,aAAa;CAC3B,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CACpC,MAAM,CAAC,SAAS,cAAc,SAAmB,CAAC,CAAC;CACnD,MAAM,CAAC,aAAa,kBAAkB,SAAwB,IAAI;CAClE,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAC7C,MAAM,UAAU,iBAAiB,KAAK;CACtC,MAAM,UAAU,eAAe,CAAC;CAChC,MAAM,UAAU,eAAe,CAAC;CAChC,MAAM,OAAO,OAAoD,IAAI;CACrE,MAAM,UAAU,OAAgC,IAAI;CACpD,MAAM,SAAS,OAAwC,CAAC,CAAC;CACzD,MAAM,aAAa,OAAsB,IAAI;CAE7C,sBACc;EACV,KAAK,MAAM,SAAS,OAAO,SAAS,aAAa,KAAK;CACxD,GACA,CAAC,CACH;CAGA,gBAAgB;EACd,MAAM,QAAQ,WAAW;EACzB,IAAI,UAAU,MAAM;EACpB,WAAW,UAAU;EACrB,MAAM,SAAS,QAAQ,SAAS,iBAC9B,8BACF;EACA,MAAM,SAAS,SAAS,KAAK,IAAI,OAAO,OAAO,SAAS,CAAC;EACzD,IAAI,QAAQ,OAAO,MAAM;OACpB,QAAQ,SAAS,MAAM;CAC9B,CAAC;CAED,SAAS,OAAO,IAAY;EAC1B,MAAM,QAAQ,MAAM,WAAW,SAAS,KAAK,OAAO,EAAE;EACtD,MAAM,OAAO,MAAM;EACnB,YAAY,YAAY,QAAQ,QAAQ,UAAU,UAAU,EAAE,CAAC;EAC/D,IAAI,CAAC,MAAM;EACX,MAAM,OAAO,MAAM,QAAQ,UAAU,MAAM,OAAO,EAAE;EACpD,WAAW,UAAU;EACrB,aAAa,IAAI;EACjB,gBAAgB,IAAI;EACpB,aAAa,eAAe,KAAK,KAAK,CAAC;EACvC,IAAI,cAAc,KAAA,GAAW;EAC7B,IAAI,KAAK,WAAW,KAAK,MAAM;GAC7B,SAAS,YAAY;GACrB,UAAU,UAAU,QAAQ,CAAC;EAC/B,OACE,SAAS,IAAI;CAEjB;CAEA,SAAS,MAAM,IAAY;EACzB,IAAI,QAAQ,SAAS,EAAE,GAAG;EAC1B,IAAI,cAAc,GAAG;GACnB,OAAO,EAAE;GACT;EACF;EACA,YAAY,YAAY,CAAC,GAAG,SAAS,EAAE,CAAC;EACxC,OAAO,QAAQ,KACb,iBAAiB;GACf,OAAO,EAAE;EACX,GAAG,IAAI,CACT;CACF;CAEA,SAAS,WAAW,OAAe,OAAoC;EACrE,IAAI,MAAM,WAAW,KAAK,SAAS;EACnC,MAAM,cAAc,kBAAkB,MAAM,SAAS;EACrD,KAAK,UAAU;GAAE,IAAI,MAAM;GAAW,GAAG,MAAM;GAAS,GAAG,MAAM;EAAQ;EACzE,QAAQ,KAAK,CAAC;EACd,QAAQ,KAAK,CAAC;EACd,eAAe,KAAK;CACtB;CAEA,SAAS,WAAW,OAAqC;EACvD,MAAM,UAAU,KAAK;EACrB,IAAI,CAAC,WAAW,QAAQ,OAAO,MAAM,WAAW;EAChD,QAAQ,IAAI,MAAM,UAAU,QAAQ,CAAC;EACrC,QAAQ,IAAI,MAAM,UAAU,QAAQ,CAAC;CACvC;CAEA,SAAS,cAAc,OAAqC;EAC1D,MAAM,UAAU,KAAK;EACrB,IAAI,CAAC,WAAW,QAAQ,OAAO,MAAM,WAAW;EAChD,KAAK,UAAU;EAEf,MAAM,UAAU;GAAE,MAAM;GAAU,WAAW,MAAM,UAAU;GAAG,SAAS;EAAG;EAC5E,QAAa,IAAI,CACf,QAAQ,SAAS,GAAG;GAAE,GAAG;GAAS,UAAU,QAAQ,YAAY;EAAE,CAAC,GACnE,QAAQ,SAAS,GAAG;GAAE,GAAG;GAAS,UAAU,QAAQ,YAAY;EAAE,CAAC,CACrE,CAAC,CAAC,CAAC,WAAW;GACZ,IAAI,CAAC,KAAK,SAAS,eAAe,IAAI;EACxC,CAAC;CACH;CAEA,MAAM,SACJ,gBAAgB,OAAO,OAAO;EAAE,OAAO;EAAa,GAAG;EAAS,GAAG;CAAQ;CAE7E,OACE,oBAAC,cAAD;EAAc,eAAc;EAC1B,UAAA,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,kBAAkB;IAAE;IAAM;GAAO,CAAC,GAAG,SAAS;GAC5D,OAAO;IAAE,QAAQ,KAAK,IAAI,GAAG,MAAM,MAAM,IAAI,QAAQ;IAAI,GAAG;GAAM;GAClE,eAAe;GACf,aAAa;GACb,iBAAiB;GACjB,GAAI;GAPN,UAAA;IASE,oBAAC,SAAD;KAAO,MAAM;KAAQ,YAAW;KAC7B,UAAA;IACI,CAAA;IACP,oBAAC,MAAD;KAEE,KAAK;KACL,cAAY;KACZ,UAAU;KACV,WAAU;KAET,UAAA,MAAM,KAAK,MAAM,UAChB,oBAAC,KAAD;MAEQ;MACC;MACP,OAAO,MAAM;MACL;MACK;MACb,KAAK,QAAQ,SAAS,KAAK,EAAE;MAC7B,OAAO;MACE;MACH;MACM;MACZ,SAAS;MACT,QAAQ;KACT,GAbM,KAAK,EAaX,CACF;IACC,GAvBG,KAuBH;IACJ,oBAAC,QAAD;KAAM,MAAK;KAAS,aAAU;KAAS,WAAU;KAC9C,UAAA;IACG,CAAA;GACH;;CACO,CAAA;AAElB"}

package/dist/components/tooltip/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["radix-ui"],
 	registryDependencies: [],
 	files: ["tooltip.tsx"],
-	a11y: "Opens on focus as well as hover, and Escape dismisses it. Never put essential or interactive content in a tooltip: it is unreachable on touch and vanishes on blur. For an icon-only button, prefer aria-label for the name and use the tooltip only to repeat it visually."
+	a11y: "Opens on focus as well as hover, and Escape dismisses it. Never put essential or interactive content in a tooltip: it is unreachable on touch and vanishes on blur. For an icon-only button, prefer aria-label for the name and use the tooltip only to repeat it visually. The opening pop is decoration and stops under reduced motion."
 });
 //#endregion
 export { meta };

package/dist/components/tooltip/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/tooltip/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"tooltip\",\n  title: \"Tooltip\",\n  description: \"A short label revealed on hover or keyboard focus.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"tooltip.tsx\"],\n  a11y:\n    \"Opens on focus as well as hover, and Escape dismisses it. Never put essential or \" +\n    \"interactive content in a tooltip: it is unreachable on touch and vanishes on blur. For an \" +\n    \"icon-only button, prefer aria-label for the name and use the tooltip only to repeat it \" +\n    \"visually.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,aAAa;CACrB,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/tooltip/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"tooltip\",\n  title: \"Tooltip\",\n  description: \"A short label revealed on hover or keyboard focus.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"tooltip.tsx\"],\n  a11y:\n    \"Opens on focus as well as hover, and Escape dismisses it. Never put essential or \" +\n    \"interactive content in a tooltip: it is unreachable on touch and vanishes on blur. For an \" +\n    \"icon-only button, prefer aria-label for the name and use the tooltip only to repeat it \" +\n    \"visually. The opening pop is decoration and stops under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,aAAa;CACrB,MACE;AAIJ,CAAC"}

package/dist/components/tooltip/tooltip.d.ts

@@ -8,6 +8,10 @@ import { ComponentPropsWithRef } from "react";
  * never be the only place information appears, because it is unreachable on
  * touch devices and disappears the moment attention moves. If the content is
  * essential, put it in the interface.
+ *
+ * It pops toward the side it opens on: a few pixels of travel away from the
+ * trigger plus a slight overshoot in scale. The instant re-open when moving
+ * between tooltips is not animated, and the pop stops under reduced motion.
  */
 declare const TooltipProvider: import("react").FC<Tooltip.TooltipProviderProps>;
 declare const TooltipTrigger: import("react").ForwardRefExoticComponent<Tooltip.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../../src/components/tooltip/tooltip.tsx"],"mappings":";;;;;;;;;;;cAea,iCAAe,GAAA,QAAA;cACf,gCAAc,0BAAA,QAAA,sCAAA,cAAA;KAEf,eAAe,6BAA6B,QAAiB;;;;;iBAMzD,YAAU,aAAa,SAAS,+BAAY,IAAA;KAQhD,sBAAsB,6BAA6B,QAAiB;iBAEhE,iBACd,WACA,YACA,aACG,SACF,sCAAmB,IAAA"}
+{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../../src/components/tooltip/tooltip.tsx"],"mappings":";;;;;;;;;;;;;;;cAoBa,iCAAe,GAAA,QAAA;cACf,gCAAc,0BAAA,QAAA,sCAAA,cAAA;KAEf,eAAe,6BAA6B,QAAiB;;;;;iBAMzD,YAAU,aAAa,SAAS,+BAAY,IAAA;KAoBhD,sBAAsB,6BAA6B,QAAiB;iBAEhE,iBACd,WACA,YACA,aACG,SACF,sCAAmB,IAAA"}

package/dist/components/tooltip/tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../lib/utils.js";
 import { Tooltip } from "radix-ui";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/tooltip/tooltip.tsx
 /**
 * A short label revealed on hover or focus.
@@ -10,6 +10,10 @@ import { jsx } from "react/jsx-runtime";
 * never be the only place information appears, because it is unreachable on
 * touch devices and disappears the moment attention moves. If the content is
 * essential, put it in the interface.
+*
+* It pops toward the side it opens on: a few pixels of travel away from the
+* trigger plus a slight overshoot in scale. The instant re-open when moving
+* between tooltips is not animated, and the pop stops under reduced motion.
 */
 const TooltipProvider = Tooltip.Provider;
 const TooltipTrigger = Tooltip.Trigger;
@@ -23,14 +27,26 @@ function Tooltip$1({ children, ...props }) {
 		children
 	}) });
 }
+const PREFIX = "dowel-tooltip";
+const STYLES = `
+@keyframes ${PREFIX}-in{from{opacity:0;transform:translate(var(--${PREFIX}-x,0),var(--${PREFIX}-y,0)) scale(.95)}}
+[data-slot=tooltip-content][data-side=top]{--${PREFIX}-y:4px}
+[data-slot=tooltip-content][data-side=bottom]{--${PREFIX}-y:-4px}
+[data-slot=tooltip-content][data-side=left]{--${PREFIX}-x:4px}
+[data-slot=tooltip-content][data-side=right]{--${PREFIX}-x:-4px}
+`;
 function TooltipContent({ className, sideOffset = 6, children, ...props }) {
-	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Content, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Content, {
 		"data-slot": "tooltip-content",
 		sideOffset,
-		className: cn("z-[var(--z-tooltip)] max-w-64 rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md", "origin-[var(--radix-tooltip-content-transform-origin)] text-balance", "data-[state=closed]:animate-float-out data-[state=delayed-open]:animate-float-in", className),
+		className: cn("z-[var(--z-tooltip)] max-w-64 rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md", "origin-[var(--radix-tooltip-content-transform-origin)] text-balance", "data-[state=closed]:animate-float-out", "data-[state=delayed-open]:animate-[dowel-tooltip-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]", className),
 		...props,
 		children
-	}) });
+	}) })] });
 }
 //#endregion
 export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["TooltipPrimitive","Tooltip"],"sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A short label revealed on hover or focus.\n *\n * A tooltip supplements a control that is already understandable — it must\n * never be the only place information appears, because it is unreachable on\n * touch devices and disappears the moment attention moves. If the content is\n * essential, put it in the interface.\n */\nexport const TooltipProvider = TooltipPrimitive.Provider;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport type TooltipProps = ComponentPropsWithRef<typeof TooltipPrimitive.Root>;\n\n/**\n * Self-providing, so a single tooltip works without app-level setup. Wrap a\n * subtree in TooltipProvider to share open/close timing across many tooltips.\n */\nexport function Tooltip({ children, ...props }: TooltipProps) {\n  return (\n    <TooltipPrimitive.Provider>\n      <TooltipPrimitive.Root {...props}>{children}</TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n\nexport type TooltipContentProps = ComponentPropsWithRef<typeof TooltipPrimitive.Content>;\n\nexport function TooltipContent({\n  className,\n  sideOffset = 6,\n  children,\n  ...props\n}: TooltipContentProps) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-[var(--z-tooltip)] max-w-64 rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md\",\n          \"origin-[var(--radix-tooltip-content-transform-origin)] text-balance\",\n          \"data-[state=closed]:animate-float-out data-[state=delayed-open]:animate-float-in\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAa,kBAAkBA,QAAiB;AAChD,MAAa,iBAAiBA,QAAiB;;;;;AAQ/C,SAAgBC,UAAQ,EAAE,UAAU,GAAG,SAAuB;CAC5D,OACE,oBAACD,QAAiB,UAAlB,EAAA,UACE,oBAACA,QAAiB,MAAlB;EAAuB,GAAI;EAAQ;CAAgC,CAAA,EAC1C,CAAA;AAE/B;AAIA,SAAgB,eAAe,EAC7B,WACA,aAAa,GACb,UACA,GAAG,SACmB;CACtB,OACE,oBAACA,QAAiB,QAAlB,EAAA,UACE,oBAACA,QAAiB,SAAlB;EACE,aAAU;EACE;EACZ,WAAW,GACT,0GACA,uEACA,oFACA,SACF;EACA,GAAI;EAEH;CACuB,CAAA,EACH,CAAA;AAE7B"}
+{"version":3,"file":"tooltip.js","names":["TooltipPrimitive","Tooltip"],"sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AnimatedTooltip (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A short label revealed on hover or focus.\n *\n * A tooltip supplements a control that is already understandable — it must\n * never be the only place information appears, because it is unreachable on\n * touch devices and disappears the moment attention moves. If the content is\n * essential, put it in the interface.\n *\n * It pops toward the side it opens on: a few pixels of travel away from the\n * trigger plus a slight overshoot in scale. The instant re-open when moving\n * between tooltips is not animated, and the pop stops under reduced motion.\n */\nexport const TooltipProvider = TooltipPrimitive.Provider;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport type TooltipProps = ComponentPropsWithRef<typeof TooltipPrimitive.Root>;\n\n/**\n * Self-providing, so a single tooltip works without app-level setup. Wrap a\n * subtree in TooltipProvider to share open/close timing across many tooltips.\n */\nexport function Tooltip({ children, ...props }: TooltipProps) {\n  return (\n    <TooltipPrimitive.Provider>\n      <TooltipPrimitive.Root {...props}>{children}</TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n\nconst PREFIX = \"dowel-tooltip\";\n\n/* Travel comes from the side Radix placed the tooltip on (a physical side, so\n * no RTL flip is needed): it starts 4px back toward the trigger. */\nconst STYLES = `\n@keyframes ${PREFIX}-in{from{opacity:0;transform:translate(var(--${PREFIX}-x,0),var(--${PREFIX}-y,0)) scale(.95)}}\n[data-slot=tooltip-content][data-side=top]{--${PREFIX}-y:4px}\n[data-slot=tooltip-content][data-side=bottom]{--${PREFIX}-y:-4px}\n[data-slot=tooltip-content][data-side=left]{--${PREFIX}-x:4px}\n[data-slot=tooltip-content][data-side=right]{--${PREFIX}-x:-4px}\n`;\n\nexport type TooltipContentProps = ComponentPropsWithRef<typeof TooltipPrimitive.Content>;\n\nexport function TooltipContent({\n  className,\n  sideOffset = 6,\n  children,\n  ...props\n}: TooltipContentProps) {\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n          data-slot=\"tooltip-content\"\n          sideOffset={sideOffset}\n          className={cn(\n            \"z-[var(--z-tooltip)] max-w-64 rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md\",\n            \"origin-[var(--radix-tooltip-content-transform-origin)] text-balance\",\n            \"data-[state=closed]:animate-float-out\",\n            // Spelled out because Tailwind reads class names from the source.\n            \"data-[state=delayed-open]:animate-[dowel-tooltip-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAa,kBAAkBA,QAAiB;AAChD,MAAa,iBAAiBA,QAAiB;;;;;AAQ/C,SAAgBC,UAAQ,EAAE,UAAU,GAAG,SAAuB;CAC5D,OACE,oBAACD,QAAiB,UAAlB,EAAA,UACE,oBAACA,QAAiB,MAAlB;EAAuB,GAAI;EAAQ;CAAgC,CAAA,EAC1C,CAAA;AAE/B;AAEA,MAAM,SAAS;AAIf,MAAM,SAAS;aACF,OAAO,+CAA+C,OAAO,cAAc,OAAO;+CAChD,OAAO;kDACJ,OAAO;gDACT,OAAO;iDACN,OAAO;;AAKxD,SAAgB,eAAe,EAC7B,WACA,aAAa,GACb,UACA,GAAG,SACmB;CACtB,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,MAAM;EAAQ,YAAW;EAC7B,UAAA;CACI,CAAA,GACP,oBAACA,QAAiB,QAAlB,EAAA,UACE,oBAACA,QAAiB,SAAlB;EACE,aAAU;EACE;EACZ,WAAW,GACT,0GACA,uEACA,yCAEA,8GACA,SACF;EACA,GAAI;EAEH;CACuB,CAAA,EACH,CAAA,CACzB,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,2 @@
+import { TweetCard, TweetCardAuthor, TweetCardMedia, TweetCardMetrics, TweetCardProps, TweetCardSkeleton, truncate, tweetCardAvatarVariants, tweetCardVariants } from "./tweet-card.js";
+export { TweetCard, type TweetCardAuthor, type TweetCardMedia, type TweetCardMetrics, type TweetCardProps, TweetCardSkeleton, truncate, tweetCardAvatarVariants, tweetCardVariants };

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

@@ -0,0 +1,2 @@
+import { TweetCard, TweetCardSkeleton, truncate, tweetCardAvatarVariants, tweetCardVariants } from "./tweet-card.js";
+export { TweetCard, TweetCardSkeleton, truncate, tweetCardAvatarVariants, tweetCardVariants };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/tweet-card/meta.ts
+const meta = defineMeta({
+	name: "tweet-card",
+	title: "Tweet Card",
+	description: "A social post drawn from props — author, text, photos, date and counts — with a link out to the original. No network, no embed script.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["avatar", "skeleton"],
+	files: ["tweet-card.tsx"],
+	a11y: "An article named by its author, with the post in a blockquote citing its URL. URLs, @mentions and #hashtags in string text become real links. The link to the post is a real, named link revealed on hover and on keyboard focus, and always shown on devices that cannot hover. The avatar is decorative (the name beside it is the link); verification is announced as text, counts are read in full (\"1200 likes\", not \"1.2K\"), and the date is a <time> element. Photos need alt text."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/tweet-card/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"tweet-card\",\n  title: \"Tweet Card\",\n  description:\n    \"A social post drawn from props — author, text, photos, date and counts — with a link out to the original. No network, no embed script.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"avatar\", \"skeleton\"],\n  files: [\"tweet-card.tsx\"],\n  a11y:\n    \"An article named by its author, with the post in a blockquote citing its URL. URLs, @mentions and \" +\n    \"#hashtags in string text become real links. The link to the post is a real, named link revealed on \" +\n    \"hover and on keyboard focus, and always shown on devices that cannot hover. The avatar is decorative \" +\n    \"(the name beside it is the link); verification is announced as text, counts are read in full \" +\n    '(\"1200 likes\", not \"1.2K\"), and the date is a <time> element. Photos need alt text.',\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,UAAU,UAAU;CAC3C,OAAO,CAAC,gBAAgB;CACxB,MACE;AAKJ,CAAC"}

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

@@ -0,0 +1,57 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/tweet-card/tweet-card.d.ts
+declare const tweetCardVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** The avatar's corner shape — the source's `avatarRounded`. */
+declare const tweetCardAvatarVariants: (props?: ({
+  avatarShape?: "circle" | "rounded" | "rounded-md" | "rounded-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TweetCardAuthor {
+  name: string;
+  /** Without the leading "@". */
+  handle: string;
+  /** Image URL. Initials are shown while it loads and if it fails. */
+  avatar?: string;
+  verified?: boolean;
+  /** Profile URL. Defaults to the handle on x.com. */
+  href?: string;
+}
+interface TweetCardMedia {
+  src: string;
+  /** Describe the image; an empty string marks it decorative. */
+  alt: string;
+  width?: number;
+  height?: number;
+}
+interface TweetCardMetrics {
+  replies?: number;
+  reposts?: number;
+  likes?: number;
+  views?: number;
+}
+interface TweetCardProps extends Omit<ComponentPropsWithRef<"article">, "children">, VariantProps<typeof tweetCardAvatarVariants> {
+  author: TweetCardAuthor;
+  /** A string is linked: URLs, @mentions and #hashtags. Pass nodes to control it. */
+  text: ReactNode;
+  /** Up to four photos, laid out as the source did. */
+  media?: TweetCardMedia[];
+  timestamp?: Date | string;
+  metrics?: TweetCardMetrics;
+  /** The post's URL. Adds the "view post" link. */
+  href?: string;
+  /** Where the author sits. */
+  userInfoPosition?: "top" | "bottom";
+  /** BCP 47 locale for the date and counts. */
+  locale?: string;
+  /** Name of the link to the post. */
+  linkLabel?: string;
+}
+/** Truncates a long handle, as the source did at 16 characters. */
+declare function truncate(value: string, length: number): string;
+/** A social post rendered from props — no network, no embed script. */
+declare function TweetCard({ className, author, text, media, timestamp, metrics, href, userInfoPosition, avatarShape, locale, linkLabel, id, ...props }: TweetCardProps): import("react").JSX.Element;
+/** Placeholder while a post loads — the source's TweetSkeleton. */
+declare function TweetCardSkeleton({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+//#endregion
+export { TweetCard, TweetCardAuthor, TweetCardMedia, TweetCardMetrics, TweetCardProps, TweetCardSkeleton, truncate, tweetCardAvatarVariants, tweetCardVariants };
+//# sourceMappingURL=tweet-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tweet-card.d.ts","names":[],"sources":["../../../src/components/tweet-card/tweet-card.tsx"],"mappings":";;;cAsBM,oBAAiB,iDAAA;;cAQjB,0BAAuB;;6CAY3B;UAEe;EACf;;EAEA;;EAEA;EACA;;EAEA;;UAGe;EACf;;EAEA;EACA;EACA;;UAGe;EACf;EACA;EACA;EACA;;UAGe,uBAEb,KAAK,+CACL,oBAAoB;EACtB,QAAQ;;EAER,MAAM;;EAEN,QAAQ;EACR,YAAY;EACZ,UAAU;;EAEV;;EAEA;;EAEA;;EAEA;;;iBA2Cc,SAAS,eAAe;;iBA0ExB,YACd,WACA,QACA,MACA,OACA,WACA,SACA,MACA,kBACA,aACA,QACA,WACA,OACG,SACF,iCAAc,IAAA;;iBAoID,oBAAoB,cAAc,SAAS,+CAA4B,IAAA"}