@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/countdown/countdown.js

@@ -0,0 +1,298 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { useMorphWidth } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { useHeightFollow } from "../lib/height-follow.js";
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/countdown/countdown.tsx
+const DEFAULT_UNITS = [
+	"days",
+	"hours",
+	"minutes",
+	"seconds"
+];
+const SECONDS = {
+	days: 86400,
+	hours: 3600,
+	minutes: 60,
+	seconds: 1
+};
+/** How far each unit counts before carrying into the next, when a larger unit is shown. */
+const LIMIT = {
+	days: Infinity,
+	hours: 24,
+	minutes: 60,
+	seconds: 60
+};
+/** The unit's name, its one-letter form, and its singular for speech. */
+const NAMES = {
+	days: [
+		"Days",
+		"d",
+		"day"
+	],
+	hours: [
+		"Hours",
+		"h",
+		"hour"
+	],
+	minutes: [
+		"Minutes",
+		"m",
+		"minute"
+	],
+	seconds: [
+		"Seconds",
+		"s",
+		"second"
+	]
+};
+/** setTimeout cannot wait longer than this (2^31 - 1 ms, about 24.8 days); a longer wait re-arms itself. */
+const MAX_TIMEOUT = 2147483647;
+/** Wake a few ms after the second turns, so the clock has surely crossed it. */
+const WAKE_MARGIN_MS = 8;
+/** Stagger between digits on the first reading (ms), at most 300 in all. */
+const REVEAL_STAGGER_MS = 35;
+const REVEAL_MAX_DELAY_MS = 300;
+/** How long the first reading takes at most: the longest delay, the smooth spring, and a margin. */
+const REVEAL_SETTLE_MS = 1200;
+const systemClock = () => Date.now();
+/** Offset of a zone from UTC at an instant, in milliseconds. */
+function zoneOffset(epoch, timeZone) {
+	const parts = new Intl.DateTimeFormat("en-US", {
+		timeZone,
+		hourCycle: "h23",
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	}).formatToParts(new Date(epoch));
+	const get = (type) => Number(parts.find((part) => part.type === type)?.value ?? 0);
+	return Date.UTC(get("year"), get("month") - 1, get("day"), get("hour"), get("minute"), get("second")) - Math.floor(epoch / 1e3) * 1e3;
+}
+/** Resolves a countdown target to epoch milliseconds without ever reading the device's own time zone. */
+function toEpoch(target, timeZone) {
+	if (typeof target === "number") return target;
+	if (target instanceof Date) return target.getTime();
+	const wall = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?)?$/.exec(target.trim());
+	if (!wall) return Date.parse(target);
+	const utc = Date.UTC(+wall[1], +wall[2] - 1, +wall[3], +(wall[4] ?? 0), +(wall[5] ?? 0), +(wall[6] ?? 0));
+	if (!timeZone) return utc;
+	return utc - zoneOffset(utc - zoneOffset(utc, timeZone), timeZone);
+}
+/** Whole seconds left, split across the units on show. */
+function partsFor(seconds, units) {
+	return units.map((unit, index) => ({
+		unit,
+		value: index === 0 ? Math.floor(seconds / SECONDS[unit]) : Math.floor(seconds / SECONDS[unit]) % LIMIT[unit]
+	}));
+}
+/** Wheel sizes per column: a tens column that only ever shows 0 to 5 turns on a six-face wheel, so 00 to 59 is a single step. */
+function basesFor(unit, largest, length) {
+	return Array.from({ length }, (_, index) => {
+		return index === length - 2 && length === 2 && !largest ? unit === "hours" ? 3 : 6 : 10;
+	});
+}
+const subscribeVisibility = (notify) => {
+	document.addEventListener("visibilitychange", notify);
+	return () => document.removeEventListener("visibilitychange", notify);
+};
+const pageIsVisible = () => document.visibilityState === "visible";
+const alwaysVisible = () => true;
+/** Whether the node is on screen (at once where IntersectionObserver is missing). */
+function useOnScreen(node) {
+	const [onScreen, setOnScreen] = useState(typeof IntersectionObserver === "undefined");
+	useEffect(() => {
+		const target = node.current;
+		if (!target || typeof IntersectionObserver === "undefined") return;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (entry) setOnScreen(entry.isIntersecting);
+		});
+		observer.observe(target);
+		return () => observer.disconnect();
+	}, [node]);
+	return onScreen;
+}
+/**
+* One digit wheel. It remembers how far it has turned and takes the short way
+* round to each new digit, so it always keeps going the way the time moved.
+*/
+function Wheel({ digit, base, delay, phase }) {
+	const [wheel, setWheel] = useState({
+		digit: 0,
+		turns: 0
+	});
+	let { turns } = wheel;
+	if (wheel.digit !== digit) {
+		const up = (digit - wheel.digit + base) % base;
+		const down = base - up;
+		turns = wheel.turns + (down <= up ? -down : up);
+		setWheel({
+			digit,
+			turns
+		});
+	}
+	const style = {
+		"--wheel": turns,
+		"--base": base
+	};
+	if (phase === "revealing") {
+		style.transitionDelay = `${delay}ms`;
+		style.transitionDuration = "var(--duration-smooth)";
+		style.transitionTimingFunction = "var(--ease-smooth)";
+	}
+	return /* @__PURE__ */ jsxs("span", {
+		style,
+		className: "countdown-wheel",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "counter-sizer",
+			children: "0"
+		}), Array.from({ length: base }, (_, face) => /* @__PURE__ */ jsx("span", {
+			style: { "--face": face },
+			className: "countdown-glyph",
+			children: face
+		}, face))]
+	});
+}
+const Countdown = forwardRef(function Countdown({ target, timeZone, units = DEFAULT_UNITS, variant = "large", completeLabel = "Live now", onComplete, label = "Time remaining", clock = systemClock, className }, ref) {
+	const root = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, root), [ref]);
+	const end = toEpoch(target, timeZone);
+	const valid = Number.isFinite(end);
+	const shownUnits = units.length ? [...units].sort((a, b) => SECONDS[b] - SECONDS[a]) : DEFAULT_UNITS;
+	const pageVisible = useSyncExternalStore(subscribeVisibility, pageIsVisible, alwaysVisible);
+	const onScreen = useOnScreen(root);
+	const running = pageVisible && onScreen && valid;
+	const [now, setNow] = useState(null);
+	const clockRef = useRef(clock);
+	useLayoutEffect(() => {
+		clockRef.current = clock;
+	});
+	useEffect(() => {
+		if (!running) return;
+		let timer;
+		const tick = () => {
+			const time = clockRef.current();
+			setNow(time);
+			const left = end - time;
+			if (left > 0) timer = setTimeout(tick, (left % 1e3 || 1e3) + WAKE_MARGIN_MS);
+		};
+		timer = setTimeout(tick, 0);
+		return () => clearTimeout(timer);
+	}, [end, running]);
+	useEffect(() => {
+		if (!valid) return;
+		const left = end - clockRef.current();
+		if (left <= 0) return;
+		const timer = setTimeout(() => setNow(clockRef.current()), Math.min(MAX_TIMEOUT, left + WAKE_MARGIN_MS));
+		return () => clearTimeout(timer);
+	}, [end, valid]);
+	const left = now === null || !valid ? null : Math.max(0, end - now);
+	const complete = left === 0;
+	const pending = left === null;
+	const onCompleteRef = useRef(onComplete);
+	useLayoutEffect(() => {
+		onCompleteRef.current = onComplete;
+	});
+	const wasRunning = useRef(null);
+	useEffect(() => {
+		if (left === null) return;
+		if (left > 0) {
+			wasRunning.current = end;
+			return;
+		}
+		if (wasRunning.current === end) {
+			wasRunning.current = null;
+			onCompleteRef.current?.();
+		}
+	}, [end, left]);
+	const [phase, setPhase] = useState("pending");
+	if (phase === "pending" && !pending) setPhase("revealing");
+	useEffect(() => {
+		if (phase !== "revealing") return;
+		const timer = setTimeout(() => setPhase("settled"), REVEAL_SETTLE_MS);
+		return () => clearTimeout(timer);
+	}, [phase]);
+	const seconds = left === null ? 0 : Math.ceil(left / 1e3);
+	const parts = partsFor(seconds, shownUnits);
+	const compact = variant === "compact";
+	const frame = useRef(null);
+	const content = useRef(null);
+	const shown = complete ? "done" : "running";
+	useMorphWidth(content, shown);
+	useHeightFollow(frame, content, shown);
+	const completeText = typeof completeLabel === "string" ? completeLabel : "Complete";
+	const spoken = complete ? completeText : pending ? "" : parts.filter((part, index) => part.value > 0 || index === parts.length - 1).filter((part) => seconds < 60 || part.unit !== "seconds").map((part) => `${part.value} ${NAMES[part.unit][2]}${part.value === 1 ? "" : "s"}`).join(", ");
+	return /* @__PURE__ */ jsxs("div", {
+		ref: refs,
+		"data-slot": "countdown",
+		"data-variant": variant,
+		"data-complete": complete ? "" : void 0,
+		"data-pending": pending ? "" : void 0,
+		className: cn("countdown", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: frame,
+			role: "timer",
+			"aria-label": label,
+			className: "countdown-frame height-follow",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "button-slot",
+				children: /* @__PURE__ */ jsx("div", {
+					ref: content,
+					className: "countdown-content",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(SwapText, {
+						swapKey: shown,
+						motion: "glyph",
+						children: complete ? /* @__PURE__ */ jsxs("span", {
+							className: "countdown-done",
+							children: [/* @__PURE__ */ jsx("span", { className: "countdown-pulse" }), completeLabel]
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "countdown-units",
+							children: parts.map((part, group) => {
+								const text = String(part.value).padStart(2, "0");
+								const bases = basesFor(part.unit, group === 0, text.length);
+								return /* @__PURE__ */ jsxs("span", {
+									className: "countdown-unit",
+									children: [!compact && group > 0 ? /* @__PURE__ */ jsx("span", {
+										className: "countdown-colon",
+										children: ":"
+									}) : null, /* @__PURE__ */ jsxs("span", {
+										className: "countdown-group",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "countdown-number",
+											children: [...text].map((char, index) => /* @__PURE__ */ jsx(Wheel, {
+												digit: Number(char),
+												base: bases[index],
+												phase,
+												delay: Math.min((group * 2 + index) * REVEAL_STAGGER_MS, REVEAL_MAX_DELAY_MS)
+											}, `${part.unit}${text.length - index}`))
+										}), /* @__PURE__ */ jsx("span", {
+											className: "countdown-name",
+											children: NAMES[part.unit][compact ? 1 : 0]
+										})]
+									})]
+								}, part.unit);
+							})
+						})
+					})
+				})
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: spoken
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			role: "status",
+			children: complete ? completeText : ""
+		})]
+	});
+});
+//#endregion
+export { Countdown };
+
+//# sourceMappingURL=countdown.js.map

package/dist/countdown/countdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdown.js","names":[],"sources":["../../src/countdown/countdown.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { useMorphWidth } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\nexport type CountdownUnit = \"days\" | \"hours\" | \"minutes\" | \"seconds\";\n\n/**\n * Countdown: the time left until a fixed moment people wait for, such as a\n * launch, a live event or a deadline. Each digit is a wheel that takes the short\n * way round, so a tick turns downward and 00 to 59 is a single step; the first\n * reading rolls up from zero, one digit after another. When the moment passes\n * the digits give way to `completeLabel` and the box follows the new size.\n *\n * The clock runs only while the countdown is on screen and the tab is visible,\n * and reads the clock again on return, so it never drifts. Completion is armed\n * separately, so `onComplete` fires on time even while the ticking is paused.\n *\n * The digits are a picture. The timer is read as plain text (\"1 day, 2 hours,\n * 5 minutes\") that is not announced every second, and finishing is announced\n * once, politely. Reduced motion jumps.\n */\nexport interface CountdownProps {\n  /**\n   * The moment to count down to. A number is epoch milliseconds, a Date is used as is, and an ISO string with `Z` or an\n   * offset such as `2026-10-06T10:00:00-07:00` is exact. A string without an offset is wall time in `timeZone`, or UTC when\n   * no zone is given, so the result never depends on the visitor's own time zone.\n   */\n  target: Date | number | string;\n  /** IANA zone for a target string without an offset, such as \"America/Los_Angeles\". Daylight saving is resolved for the target date. */\n  timeZone?: string;\n  /** Units to show, largest first. The largest unit absorbs the rest, so hours can pass 24 when days are left out. @default [\"days\", \"hours\", \"minutes\", \"seconds\"] */\n  units?: CountdownUnit[];\n  /** Large digits with unit names, or one compact line for banners and table cells. @default \"large\" */\n  variant?: \"large\" | \"compact\";\n  /** Shown once the target passes. The digits swap into it. @default \"Live now\" */\n  completeLabel?: ReactNode;\n  /** Fires once, the moment the countdown reaches zero while mounted. It fires on time even when the tab is hidden. */\n  onComplete?: () => void;\n  /** Accessible name, such as \"Keynote starts in\". @default \"Time remaining\" */\n  label?: string;\n  /** Clock source in epoch milliseconds. Pass a server-synced clock when the visitor's device time cannot be trusted. @default Date.now */\n  clock?: () => number;\n  /** Extra classes for the countdown. Merged last. */\n  className?: string;\n}\n\nconst DEFAULT_UNITS: CountdownUnit[] = [\"days\", \"hours\", \"minutes\", \"seconds\"];\nconst SECONDS: Record<CountdownUnit, number> = {\n  days: 86_400,\n  hours: 3_600,\n  minutes: 60,\n  seconds: 1,\n};\n/** How far each unit counts before carrying into the next, when a larger unit is shown. */\nconst LIMIT: Record<CountdownUnit, number> = {\n  days: Infinity,\n  hours: 24,\n  minutes: 60,\n  seconds: 60,\n};\n/** The unit's name, its one-letter form, and its singular for speech. */\nconst NAMES: Record<CountdownUnit, [string, string, string]> = {\n  days: [\"Days\", \"d\", \"day\"],\n  hours: [\"Hours\", \"h\", \"hour\"],\n  minutes: [\"Minutes\", \"m\", \"minute\"],\n  seconds: [\"Seconds\", \"s\", \"second\"],\n};\n/** setTimeout cannot wait longer than this (2^31 - 1 ms, about 24.8 days); a longer wait re-arms itself. */\nconst MAX_TIMEOUT = 2_147_483_647;\n/** Wake a few ms after the second turns, so the clock has surely crossed it. */\nconst WAKE_MARGIN_MS = 8;\n/** Stagger between digits on the first reading (ms), at most 300 in all. */\nconst REVEAL_STAGGER_MS = 35;\nconst REVEAL_MAX_DELAY_MS = 300;\n/** How long the first reading takes at most: the longest delay, the smooth spring, and a margin. */\nconst REVEAL_SETTLE_MS = 1200;\n\nconst systemClock = () => Date.now();\n\n/** Offset of a zone from UTC at an instant, in milliseconds. */\nfunction zoneOffset(epoch: number, timeZone: string) {\n  const parts = new Intl.DateTimeFormat(\"en-US\", {\n    timeZone,\n    hourCycle: \"h23\",\n    year: \"numeric\",\n    month: \"2-digit\",\n    day: \"2-digit\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n    second: \"2-digit\",\n  }).formatToParts(new Date(epoch));\n  const get = (type: string) => Number(parts.find((part) => part.type === type)?.value ?? 0);\n  return (\n    Date.UTC(get(\"year\"), get(\"month\") - 1, get(\"day\"), get(\"hour\"), get(\"minute\"), get(\"second\")) -\n    Math.floor(epoch / 1000) * 1000\n  );\n}\n\n/** Resolves a countdown target to epoch milliseconds without ever reading the device's own time zone. */\nfunction toEpoch(target: Date | number | string, timeZone?: string) {\n  if (typeof target === \"number\") return target;\n  if (target instanceof Date) return target.getTime();\n  const wall = /^(\\d{4})-(\\d{2})-(\\d{2})(?:[T ](\\d{2}):(\\d{2})(?::(\\d{2})(?:\\.\\d+)?)?)?$/.exec(\n    target.trim(),\n  );\n  if (!wall) return Date.parse(target);\n  const utc = Date.UTC(\n    +wall[1]!,\n    +wall[2]! - 1,\n    +wall[3]!,\n    +(wall[4] ?? 0),\n    +(wall[5] ?? 0),\n    +(wall[6] ?? 0),\n  );\n  if (!timeZone) return utc;\n  // Two passes settle the offset across a daylight saving change.\n  const guess = utc - zoneOffset(utc, timeZone);\n  return utc - zoneOffset(guess, timeZone);\n}\n\n/** Whole seconds left, split across the units on show. */\nfunction partsFor(seconds: number, units: CountdownUnit[]) {\n  return units.map((unit, index) => ({\n    unit,\n    value:\n      index === 0\n        ? Math.floor(seconds / SECONDS[unit])\n        : Math.floor(seconds / SECONDS[unit]) % LIMIT[unit],\n  }));\n}\n\n/** Wheel sizes per column: a tens column that only ever shows 0 to 5 turns on a six-face wheel, so 00 to 59 is a single step. */\nfunction basesFor(unit: CountdownUnit, largest: boolean, length: number) {\n  return Array.from({ length }, (_, index) => {\n    const tens = index === length - 2 && length === 2 && !largest;\n    return tens ? (unit === \"hours\" ? 3 : 6) : 10;\n  });\n}\n\nconst subscribeVisibility = (notify: () => void) => {\n  document.addEventListener(\"visibilitychange\", notify);\n  return () => document.removeEventListener(\"visibilitychange\", notify);\n};\nconst pageIsVisible = () => document.visibilityState === \"visible\";\nconst alwaysVisible = () => true;\n\n/** Whether the node is on screen (at once where IntersectionObserver is missing). */\nfunction useOnScreen(node: { current: HTMLElement | null }) {\n  const [onScreen, setOnScreen] = useState(typeof IntersectionObserver === \"undefined\");\n  useEffect(() => {\n    const target = node.current;\n    if (!target || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry) setOnScreen(entry.isIntersecting);\n    });\n    observer.observe(target);\n    return () => observer.disconnect();\n  }, [node]);\n  return onScreen;\n}\n\ntype Phase = \"pending\" | \"revealing\" | \"settled\";\n\n/**\n * One digit wheel. It remembers how far it has turned and takes the short way\n * round to each new digit, so it always keeps going the way the time moved.\n */\nfunction Wheel({\n  digit,\n  base,\n  delay,\n  phase,\n}: {\n  digit: number;\n  base: number;\n  delay: number;\n  phase: Phase;\n}) {\n  const [wheel, setWheel] = useState({ digit: 0, turns: 0 });\n  let { turns } = wheel;\n  if (wheel.digit !== digit) {\n    const up = (digit - wheel.digit + base) % base;\n    const down = base - up;\n    turns = wheel.turns + (down <= up ? -down : up);\n    setWheel({ digit, turns });\n  }\n  const style: CSSProperties & Record<string, string | number> = {\n    \"--wheel\": turns,\n    \"--base\": base,\n  };\n  // The first reading rolls on the smooth spring, each digit a beat after the last; every tick after that is snappy.\n  if (phase === \"revealing\") {\n    style.transitionDelay = `${delay}ms`;\n    style.transitionDuration = \"var(--duration-smooth)\";\n    style.transitionTimingFunction = \"var(--ease-smooth)\";\n  }\n  return (\n    <span style={style} className=\"countdown-wheel\">\n      <span className=\"counter-sizer\">0</span>\n      {Array.from({ length: base }, (_, face) => (\n        <span key={face} style={{ \"--face\": face } as CSSProperties} className=\"countdown-glyph\">\n          {face}\n        </span>\n      ))}\n    </span>\n  );\n}\n\nexport const Countdown = forwardRef<HTMLDivElement, CountdownProps>(function Countdown(\n  {\n    target,\n    timeZone,\n    units = DEFAULT_UNITS,\n    variant = \"large\",\n    completeLabel = \"Live now\",\n    onComplete,\n    label = \"Time remaining\",\n    clock = systemClock,\n    className,\n  },\n  ref,\n) {\n  const root = useRef<HTMLDivElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, root), [ref]);\n  const end = toEpoch(target, timeZone);\n  const valid = Number.isFinite(end);\n  const shownUnits = units.length\n    ? [...units].sort((a, b) => SECONDS[b] - SECONDS[a])\n    : DEFAULT_UNITS;\n\n  // The clock only ticks while the countdown is on screen and the tab is visible; coming back reads the clock again, so nothing drifts.\n  const pageVisible = useSyncExternalStore(subscribeVisibility, pageIsVisible, alwaysVisible);\n  const onScreen = useOnScreen(root);\n  const running = pageVisible && onScreen && valid;\n  const [now, setNow] = useState<number | null>(null);\n  const clockRef = useRef(clock);\n  useLayoutEffect(() => {\n    clockRef.current = clock;\n  });\n  useEffect(() => {\n    if (!running) return;\n    let timer: ReturnType<typeof setTimeout>;\n    const tick = () => {\n      const time = clockRef.current();\n      setNow(time);\n      const left = end - time;\n      // Wake just after the next whole second, aligned to the target rather than to when the page loaded.\n      if (left > 0) timer = setTimeout(tick, (left % 1000 || 1000) + WAKE_MARGIN_MS);\n    };\n    timer = setTimeout(tick, 0);\n    return () => clearTimeout(timer);\n  }, [end, running]);\n\n  // Completion is armed separately, so it lands on time even while ticking is paused.\n  useEffect(() => {\n    if (!valid) return;\n    const left = end - clockRef.current();\n    if (left <= 0) return;\n    const timer = setTimeout(\n      () => setNow(clockRef.current()),\n      Math.min(MAX_TIMEOUT, left + WAKE_MARGIN_MS),\n    );\n    return () => clearTimeout(timer);\n  }, [end, valid]);\n\n  const left = now === null || !valid ? null : Math.max(0, end - now);\n  const complete = left === 0;\n  const pending = left === null;\n  const onCompleteRef = useRef(onComplete);\n  useLayoutEffect(() => {\n    onCompleteRef.current = onComplete;\n  });\n  const wasRunning = useRef<number | null>(null);\n  useEffect(() => {\n    if (left === null) return;\n    if (left > 0) {\n      wasRunning.current = end;\n      return;\n    }\n    if (wasRunning.current === end) {\n      wasRunning.current = null;\n      onCompleteRef.current?.();\n    }\n  }, [end, left]);\n\n  const [phase, setPhase] = useState<Phase>(\"pending\");\n  if (phase === \"pending\" && !pending) setPhase(\"revealing\");\n  useEffect(() => {\n    if (phase !== \"revealing\") return;\n    const timer = setTimeout(() => setPhase(\"settled\"), REVEAL_SETTLE_MS);\n    return () => clearTimeout(timer);\n  }, [phase]);\n\n  const seconds = left === null ? 0 : Math.ceil(left / 1000);\n  const parts = partsFor(seconds, shownUnits);\n  const compact = variant === \"compact\";\n\n  // The box follows the size of whatever it holds, so the digits can swap into the finished label without a jump.\n  const frame = useRef<HTMLDivElement>(null);\n  const content = useRef<HTMLDivElement>(null);\n  const shown = complete ? \"done\" : \"running\";\n  useMorphWidth(content, shown);\n  useHeightFollow(frame, content, shown);\n\n  const completeText = typeof completeLabel === \"string\" ? completeLabel : \"Complete\";\n  const spoken = complete\n    ? completeText\n    : pending\n      ? \"\"\n      : parts\n          .filter((part, index) => part.value > 0 || index === parts.length - 1)\n          .filter((part) => seconds < 60 || part.unit !== \"seconds\")\n          .map((part) => `${part.value} ${NAMES[part.unit][2]}${part.value === 1 ? \"\" : \"s\"}`)\n          .join(\", \");\n\n  return (\n    <div\n      ref={refs}\n      data-slot=\"countdown\"\n      data-variant={variant}\n      data-complete={complete ? \"\" : undefined}\n      data-pending={pending ? \"\" : undefined}\n      className={cn(\"countdown\", className)}\n    >\n      <div ref={frame} role=\"timer\" aria-label={label} className=\"countdown-frame height-follow\">\n        <div className=\"button-slot\">\n          <div ref={content} className=\"countdown-content\" aria-hidden=\"true\">\n            <SwapText swapKey={shown} motion=\"glyph\">\n              {complete ? (\n                <span className=\"countdown-done\">\n                  <span className=\"countdown-pulse\" />\n                  {completeLabel}\n                </span>\n              ) : (\n                <span className=\"countdown-units\">\n                  {parts.map((part, group) => {\n                    const text = String(part.value).padStart(2, \"0\");\n                    const bases = basesFor(part.unit, group === 0, text.length);\n                    return (\n                      <span key={part.unit} className=\"countdown-unit\">\n                        {!compact && group > 0 ? <span className=\"countdown-colon\">:</span> : null}\n                        <span className=\"countdown-group\">\n                          <span className=\"countdown-number\">\n                            {[...text].map((char, index) => (\n                              <Wheel\n                                key={`${part.unit}${text.length - index}`}\n                                digit={Number(char)}\n                                base={bases[index]!}\n                                phase={phase}\n                                delay={Math.min(\n                                  (group * 2 + index) * REVEAL_STAGGER_MS,\n                                  REVEAL_MAX_DELAY_MS,\n                                )}\n                              />\n                            ))}\n                          </span>\n                          <span className=\"countdown-name\">\n                            {NAMES[part.unit][compact ? 1 : 0]}\n                          </span>\n                        </span>\n                      </span>\n                    );\n                  })}\n                </span>\n              )}\n            </SwapText>\n          </div>\n        </div>\n        <span className=\"sr-only\">{spoken}</span>\n      </div>\n      {/* Ticking is never announced; finishing is, once. */}\n      <span className=\"sr-only\" role=\"status\">\n        {complete ? completeText : \"\"}\n      </span>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/countdown/index.d.ts

@@ -0,0 +1,2 @@
+import { Countdown, CountdownProps, CountdownUnit } from "./countdown.js";
+export { Countdown, type CountdownProps, type CountdownUnit };

package/dist/countdown/index.js

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

package/dist/date-picker/date-picker.d.ts

@@ -0,0 +1,51 @@
+import { PickerSharedProps, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants } from "./picker-parts.js";
+import { DateRangePicker, DateRangePickerMessages, DateRangePickerProps, DateRangePickerValue, DateRangePreset, defaultDateRangePresets } from "./date-range-picker.js";
+import { DateValue } from "@internationalized/date";
+//#region src/date-picker/date-picker.d.ts
+/**
+ * DatePicker and DateRangePicker: a field-sized trigger that shows the chosen
+ * value as words, opening a Popover with the Calendar in it and a typed date
+ * field above the calendar.
+ *
+ * WHY A TRIGGER AND NOT React Aria's segmented DatePicker. The segmented field
+ * shows `dd/mm/yyyy` digits in the field itself, which is exactly what a
+ * native `<input type="date">` shows; a product that prints dates as
+ * "1 Sep 2026" everywhere else wants the field to say that too. The typed
+ * field is still there, inside the popover, because a calendar alone makes a
+ * date years away a long walk of "previous month" presses.
+ *
+ * Values are `DateValue` objects (ADR 0006), the type Calendar already takes,
+ * and the import stays `import type`: the default display formats with
+ * `Intl.DateTimeFormat` over `value.toDate("UTC")`, an instance method, so the
+ * package still contributes zero bytes.
+ *
+ * Every class string below is a STATIC literal, for the same reason as every
+ * other component here: Tailwind scans source text.
+ */
+/** Props for {@link DatePicker}. */
+export interface DatePickerProps extends PickerSharedProps {
+  /**
+   * The footer's status line when a day is chosen, followed by the day.
+   *
+   * @default "Selected"
+   */
+  selectedStatusLabel?: string;
+  /**
+   * The footer's status line while no day is chosen.
+   *
+   * @default "Choose a day"
+   */
+  emptyStatusLabel?: string;
+  /** The chosen day (controlled). `null` is none. */
+  value?: DateValue | null;
+  /** The day chosen at first (uncontrolled). */
+  defaultValue?: DateValue | null;
+  /** Told the new day, or `null` when cleared. */
+  onChange?: (value: DateValue | null) => void;
+  /** Label of the typed date field inside the popover. @default "Type a date" */
+  typedLabel?: string;
+}
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { DateRangePicker, type DateRangePickerMessages, type DateRangePickerProps, type DateRangePickerValue, type DateRangePreset, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets };
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/date-picker/date-picker.js

@@ -0,0 +1,241 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { prefersReducedMotion } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { useFlip } from "../lib/flip.js";
+import { Calendar as Calendar$1 } from "../calendar/calendar.js";
+import { Popover as Popover$1 } from "../popover/popover.js";
+import { CalendarGlyph, Chevron, TypedDate, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, descriptionClass, errorClass, hintClass, pickerFooterButtonVariants, useDayFormat, useValue } from "./picker-parts.js";
+import { DateRangePicker, defaultDateRangePresets } from "./date-range-picker.js";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Button, Dialog, DialogTrigger, useLocale } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/date-picker/date-picker.tsx
+/** The shell both pickers share: label, trigger, popover, description and error. */
+function PickerShell({ slot, shown, valueNode, props, triggerRef, children }) {
+	const id = useId();
+	const labelId = `${id}-label`;
+	const valueId = `${id}-value`;
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const invalid = props.errorMessage != null;
+	const describedBy = [props.description != null && descriptionId, invalid && errorId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": slot,
+		"data-invalid": invalid || void 0,
+		className: cn(datePickerVariants(), props.className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: cn(datePickerLabelVariants(), props.labelHidden && "sr-only"),
+				children: props.label
+			}),
+			/* @__PURE__ */ jsxs(DialogTrigger, { children: [/* @__PURE__ */ jsxs(Button, {
+				ref: triggerRef,
+				"data-slot": "date-picker-trigger",
+				"aria-labelledby": `${labelId} ${valueId}`,
+				"aria-describedby": describedBy || void 0,
+				isDisabled: props.isDisabled,
+				className: datePickerTriggerVariants({ size: props.size }),
+				children: [
+					/* @__PURE__ */ jsx(CalendarGlyph, {}),
+					valueNode ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						id: valueId,
+						"data-slot": "date-picker-value",
+						className: "sr-only",
+						children: shown ?? props.placeholder ?? "Choose a date"
+					}), valueNode] }) : /* @__PURE__ */ jsx("span", {
+						id: valueId,
+						"data-slot": "date-picker-value",
+						className: cn("min-w-0 flex-1 truncate", shown === null && "text-muted-foreground"),
+						children: shown ?? props.placeholder ?? "Choose a date"
+					}),
+					/* @__PURE__ */ jsx(Chevron, {})
+				]
+			}), /* @__PURE__ */ jsx(Popover$1, {
+				entrance: "none",
+				placement: "bottom start",
+				className: "picker-pop w-auto origin-[22px_-4px] overflow-y-auto",
+				children: /* @__PURE__ */ jsx(Dialog, {
+					"aria-label": props.label,
+					"data-slot": "date-picker-dialog",
+					className: "flex flex-col gap-3 outline-none",
+					children: ({ close }) => children(close)
+				})
+			})] }),
+			props.description == null ? null : /* @__PURE__ */ jsx("span", {
+				id: descriptionId,
+				"data-slot": "date-picker-description",
+				className: cn(descriptionClass, hintClass),
+				children: props.description
+			}),
+			invalid ? /* @__PURE__ */ jsx("span", {
+				id: errorId,
+				"data-slot": "date-picker-error",
+				className: errorClass,
+				children: props.errorMessage
+			}) : null
+		]
+	});
+}
+/** The pieces of a formatted day, so each can roll on its own: a later date rises, an earlier one drops. */
+function useDayParts() {
+	const { locale } = useLocale();
+	return useMemo(() => {
+		const format = new Intl.DateTimeFormat(locale, {
+			dateStyle: "medium",
+			timeZone: "UTC"
+		});
+		return (value) => format.formatToParts(value.toDate("UTC"));
+	}, [locale]);
+}
+/** Which way a value moved in time, so its text rolls in that direction. */
+function useDirection(value) {
+	const key = value ? String(value) : null;
+	const [previous, setPrevious] = useState(value);
+	const [direction, setDirection] = useState(1);
+	if ((previous ? String(previous) : null) !== key) {
+		setPrevious(value);
+		setDirection(value && previous && value.compare(previous) < 0 ? -1 : 1);
+	}
+	return direction;
+}
+/**
+* The value the eye sees, in a trigger. Each part of a date rolls on its own
+* (a part that did not change holds still), parts after a wider or narrower one
+* slide along instead of jumping, and a value and the placeholder swap as wholes.
+* Nothing animates on first mount. The caller keeps the plain text for screen
+* readers; this copy is `aria-hidden`.
+*/
+function AnimatedValue({ parts, placeholder, direction }) {
+	const ref = useRef(null);
+	const text = parts ? parts.map((part) => part.value).join("") : "";
+	useFlip(ref, text);
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"aria-hidden": "true",
+		className: "flex min-w-0 flex-1 overflow-hidden",
+		children: /* @__PURE__ */ jsx(SwapText, {
+			swapKey: parts ? "value" : "placeholder",
+			dir: parts ? 1 : -1,
+			motion: "roll",
+			className: "inline-flex min-w-0 max-w-full",
+			children: parts ? /* @__PURE__ */ jsx("span", {
+				className: "inline-flex whitespace-pre tabular-nums",
+				children: parts.map((part, index) => /* @__PURE__ */ jsx("span", {
+					"data-flip": "",
+					className: "inline-flex whitespace-pre",
+					children: part.type === "literal" ? /* @__PURE__ */ jsx("span", {
+						className: "whitespace-pre",
+						children: part.value
+					}) : /* @__PURE__ */ jsx(SwapText, {
+						swapKey: part.value,
+						dir: direction,
+						motion: "roll",
+						className: "inline-block whitespace-pre",
+						children: part.value
+					})
+				}, `${index}-${part.type}`))
+			}) : /* @__PURE__ */ jsx("span", {
+				"data-slot": "date-picker-placeholder",
+				className: "truncate text-muted-foreground",
+				children: placeholder
+			})
+		})
+	});
+}
+/**
+* The footer of a picker's calendar: Clear on one side and a status line on the
+* other, which confirms a pick (the new line rises in while the old one lifts
+* away).
+*/
+function PickerFooter({ status, statusKey, clearable, clearLabel, canClear, onClear }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "date-picker-footer",
+		className: "flex items-center justify-between gap-2 border-t-(length:--border-width) border-border pt-3 text-xs text-muted-foreground",
+		children: [clearable ? /* @__PURE__ */ jsx(Button, {
+			slot: null,
+			"data-slot": "date-picker-clear",
+			isDisabled: !canClear,
+			onPress: onClear,
+			className: pickerFooterButtonVariants(),
+			children: clearLabel
+		}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {
+			"aria-live": "polite",
+			className: "grid min-w-0 justify-items-end",
+			children: /* @__PURE__ */ jsx(SwapText, {
+				swapKey: statusKey,
+				className: "block max-w-full truncate",
+				children: status
+			})
+		})]
+	});
+}
+const DatePicker = forwardRef(function DatePicker({ value, defaultValue = null, onChange, typedLabel = "Type a date", selectedStatusLabel = "Selected", emptyStatusLabel = "Choose a day", ...props }, ref) {
+	const [current, setCurrent] = useValue(value, defaultValue, onChange);
+	const defaultFormat = useDayFormat();
+	const dayParts = useDayParts();
+	const format = props.formatValue ?? defaultFormat;
+	const direction = useDirection(current);
+	const closeTimer = useRef(void 0);
+	useEffect(() => () => window.clearTimeout(closeTimer.current), []);
+	const parts = current ? props.formatValue ? [{
+		type: "value",
+		value: format(current)
+	}] : dayParts(current) : null;
+	return /* @__PURE__ */ jsx(PickerShell, {
+		slot: "date-picker",
+		shown: current ? format(current) : null,
+		valueNode: /* @__PURE__ */ jsx(AnimatedValue, {
+			parts,
+			placeholder: props.placeholder ?? "Choose a date",
+			direction
+		}),
+		props,
+		triggerRef: ref,
+		children: (close) => {
+			/** A picked day lets the disc glide onto it and the footer confirm it, then the calendar returns to the field. */
+			const pick = (next) => {
+				setCurrent(next);
+				window.clearTimeout(closeTimer.current);
+				if (!next || prefersReducedMotion()) close();
+				else closeTimer.current = window.setTimeout(close, 300);
+			};
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(TypedDate, {
+					label: typedLabel,
+					value: current,
+					minValue: props.minValue,
+					maxValue: props.maxValue,
+					onChange: (next) => {
+						if (next || props.clearable) setCurrent(next);
+					}
+				}),
+				/* @__PURE__ */ jsx(Calendar$1, {
+					label: props.label,
+					labelHidden: true,
+					autoFocus: true,
+					value: current,
+					minValue: props.minValue,
+					maxValue: props.maxValue,
+					onChange: (next) => pick(next)
+				}),
+				/* @__PURE__ */ jsx(PickerFooter, {
+					status: current ? `${selectedStatusLabel} ${format(current)}` : emptyStatusLabel,
+					statusKey: current ? String(current) : "none",
+					clearable: Boolean(props.clearable),
+					clearLabel: props.clearLabel ?? "Clear",
+					canClear: current !== null,
+					onClear: () => {
+						window.clearTimeout(closeTimer.current);
+						pick(null);
+					}
+				})
+			] });
+		}
+	});
+});
+//#endregion
+export { DatePicker, DateRangePicker, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets };
+
+//# sourceMappingURL=date-picker.js.map