@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/chip-group/chip-group.js

@@ -0,0 +1,148 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { SwapText } from "../lib/swap-text.js";
+import { useHeightFollow } from "../lib/height-follow.js";
+import { useFlip } from "../lib/flip.js";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chip-group/chip-group.tsx
+/** Roving-focus key of the overflow chip; the NUL keeps it from colliding with any option value. */
+const MORE = "\0more";
+/** Stagger between chips revealed by the overflow (ms), at most 300 in all. */
+const STAGGER_MS = 35;
+const ChipGroup = forwardRef(function ChipGroup({ options, value, onValueChange, label, multiple = true, maxVisible = Infinity, moreLabel = (hidden) => `+${hidden} more`, lessLabel = "Show less", className }, ref) {
+	const [expanded, setExpanded] = useState(false);
+	const [pinned, setPinned] = useState(value);
+	const [active, setActive] = useState(null);
+	const foldable = options.length > maxVisible;
+	const visible = !foldable || expanded ? options : options.filter((option, index) => index < maxVisible || pinned.includes(option.value) || value.includes(option.value));
+	const hidden = options.length - visible.length;
+	const showMore = foldable && (expanded || hidden > 0);
+	const keys = [...visible.map((option) => option.value), ...showMore ? [MORE] : []];
+	const tabStop = active !== null && keys.includes(active) ? active : visible.find((option) => value.includes(option.value))?.value ?? keys[0];
+	const group = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, group), [ref]);
+	const frame = useRef(null);
+	const morphKey = `${expanded}|${value.join(",")}`;
+	useFlip(group, morphKey, "var(--duration-morph)", "var(--ease-morph)");
+	useHeightFollow(frame, group, morphKey);
+	const seen = useRef(new Set(options.map((option) => option.value)));
+	const revealedAt = /* @__PURE__ */ new Map();
+	let rank = 0;
+	for (const option of visible) if (!seen.current.has(option.value)) revealedAt.set(option.value, Math.min(rank++ * STAGGER_MS, 300));
+	function toggle(next) {
+		const on = value.includes(next);
+		if (!multiple) {
+			onValueChange(on ? [] : [next]);
+			return;
+		}
+		onValueChange(options.filter((option) => option.value === next ? !on : value.includes(option.value)).map((option) => option.value));
+	}
+	function toggleMore() {
+		if (expanded) setPinned(value);
+		else seen.current = new Set(visible.map((option) => option.value));
+		setExpanded(!expanded);
+	}
+	function onKeyDown(event) {
+		const buttons = Array.from(event.currentTarget.querySelectorAll("button[data-chip]"));
+		const index = buttons.indexOf(document.activeElement);
+		if (index < 0) return;
+		const last = buttons.length - 1;
+		const moves = {
+			ArrowRight: index === last ? 0 : index + 1,
+			ArrowDown: index === last ? 0 : index + 1,
+			ArrowLeft: index === 0 ? last : index - 1,
+			ArrowUp: index === 0 ? last : index - 1,
+			Home: 0,
+			End: last
+		};
+		if (!(event.key in moves)) return;
+		event.preventDefault();
+		buttons[moves[event.key]].focus();
+	}
+	const moreText = expanded ? lessLabel : moreLabel(hidden);
+	return /* @__PURE__ */ jsx("div", {
+		ref: frame,
+		"data-slot": "chip-group-frame",
+		className: "height-follow min-w-0",
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: refs,
+			role: "group",
+			"aria-label": label,
+			"data-slot": "chip-group",
+			onKeyDown,
+			className: cn("relative isolate flex flex-wrap gap-2 box-border font-sans", className),
+			children: [visible.map((option) => {
+				const selected = value.includes(option.value);
+				const delay = revealedAt.get(option.value);
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-flip": "",
+					"data-chip": option.value,
+					"data-slot": "chip",
+					"aria-pressed": selected,
+					tabIndex: tabStop === option.value ? 0 : -1,
+					onClick: () => toggle(option.value),
+					onFocus: () => setActive(option.value),
+					style: delay === void 0 ? void 0 : { animationDelay: `${delay}ms` },
+					className: cn("chip", delay === void 0 ? "" : "motion-safe:animate-chip-reveal"),
+					children: /* @__PURE__ */ jsxs("span", {
+						"data-selected": selected,
+						className: "chip-body",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "chip-check",
+								children: /* @__PURE__ */ jsx("svg", {
+									width: 14,
+									height: 14,
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: 2.5,
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									children: /* @__PURE__ */ jsx("path", {
+										d: "M4 12.5 9.5 18 20 6.5",
+										pathLength: 1
+									})
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "chip-slot"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: option.label
+							})
+						]
+					})
+				}, option.value);
+			}), showMore ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-flip": "",
+				"data-chip": MORE,
+				"data-more": "",
+				"aria-expanded": expanded,
+				tabIndex: tabStop === MORE ? 0 : -1,
+				onClick: toggleMore,
+				onFocus: () => setActive(MORE),
+				className: "chip chip-more",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "chip-body tabular-nums",
+					children: /* @__PURE__ */ jsx(SwapText, {
+						swapKey: moreText,
+						motion: "rise",
+						children: moreText
+					})
+				})
+			}, MORE) : null]
+		})
+	});
+});
+//#endregion
+export { ChipGroup };
+
+//# sourceMappingURL=chip-group.js.map

package/dist/chip-group/chip-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-group.js","names":[],"sources":["../../src/chip-group/chip-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useMemo, useRef, useState, type KeyboardEvent } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useFlip } from \"../lib/flip.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * ChipGroup: selectable filter chips for narrowing a list by facets people\n * toggle often, such as topics, statuses or tags.\n *\n * Selecting a chip grows a check in at its start (it draws itself as it\n * scales up from a soft blur), the label slides over, the chip widens on the\n * morph spring, and its neighbours glide to their new places, even across\n * lines. The row follows its own height. Long sets fold behind a \"+N more\"\n * chip; opening it grows the hidden chips in one after another. Arrow keys move\n * between chips, Space or Enter toggles, and each chip is a pressed or\n * unpressed button. Selected reads as a tint plus the check, never colour alone.\n */\nexport interface ChipOption {\n  value: string;\n  label: string;\n}\n\nexport interface ChipGroupProps {\n  options: ChipOption[];\n  value: string[];\n  onValueChange: (value: string[]) => void;\n  /** Accessible name of the group, such as \"Topics\". */\n  label: string;\n  /** Allow several chips at once. In single mode the selected chip can still be cleared. @default true */\n  multiple?: boolean;\n  /** Chips shown before the rest fold behind a \"+N more\" chip. Chips selected when it folds stay in view. */\n  maxVisible?: number;\n  /** Text of the overflow chip. @default (hidden) => `+${hidden} more` */\n  moreLabel?: (hidden: number) => string;\n  /** @default \"Show less\" */\n  lessLabel?: string;\n  /** Extra classes for the group. Merged last. */\n  className?: string;\n}\n\n/** Roving-focus key of the overflow chip; the NUL keeps it from colliding with any option value. */\nconst MORE = \"\\u0000more\";\n/** Stagger between chips revealed by the overflow (ms), at most 300 in all. */\nconst STAGGER_MS = 35;\n\nexport const ChipGroup = forwardRef<HTMLDivElement, ChipGroupProps>(function ChipGroup(\n  {\n    options,\n    value,\n    onValueChange,\n    label,\n    multiple = true,\n    maxVisible = Infinity,\n    moreLabel = (hidden) => `+${hidden} more`,\n    lessLabel = \"Show less\",\n    className,\n  },\n  ref,\n) {\n  const [expanded, setExpanded] = useState(false);\n  // Chips selected when the overflow folds stay in view, so a selection is never hidden.\n  const [pinned, setPinned] = useState<string[]>(value);\n  const [active, setActive] = useState<string | null>(null);\n  const foldable = options.length > maxVisible;\n  const visible =\n    !foldable || expanded\n      ? options\n      : options.filter(\n          (option, index) => index < maxVisible || pinned.includes(option.value) || value.includes(option.value),\n        );\n  const hidden = options.length - visible.length;\n  const showMore = foldable && (expanded || hidden > 0);\n  const keys = [...visible.map((option) => option.value), ...(showMore ? [MORE] : [])];\n  // One chip holds the tab stop: the last one focused, else the first selected, else the first.\n  const tabStop =\n    active !== null && keys.includes(active)\n      ? active\n      : (visible.find((option) => value.includes(option.value))?.value ?? keys[0]);\n\n  const group = useRef<HTMLDivElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, group), [ref]);\n  const frame = useRef<HTMLDivElement>(null);\n  const morphKey = `${expanded}|${value.join(\",\")}`;\n  // Neighbours glide to their new places when a chip widens, even across lines; the row follows its height.\n  useFlip(group, morphKey, \"var(--duration-morph)\", \"var(--ease-morph)\");\n  useHeightFollow(frame, group, morphKey);\n  // Chips that appear after the first render grow in; the ones there from the start never animate.\n  const seen = useRef(new Set(options.map((option) => option.value)));\n  const revealedAt = new Map<string, number>();\n  let rank = 0;\n  for (const option of visible) {\n    if (!seen.current.has(option.value)) revealedAt.set(option.value, Math.min(rank++ * STAGGER_MS, 300));\n  }\n\n  function toggle(next: string) {\n    const on = value.includes(next);\n    if (!multiple) {\n      onValueChange(on ? [] : [next]);\n      return;\n    }\n    onValueChange(\n      options.filter((option) => (option.value === next ? !on : value.includes(option.value))).map((option) => option.value),\n    );\n  }\n\n  function toggleMore() {\n    if (expanded) setPinned(value);\n    // Only the chips this opening reveals grow in; the ones already on screen stay put.\n    else seen.current = new Set(visible.map((option) => option.value));\n    setExpanded(!expanded);\n  }\n\n  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const buttons = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>(\"button[data-chip]\"));\n    const index = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    if (index < 0) return;\n    const last = buttons.length - 1;\n    const moves: Record<string, number> = {\n      ArrowRight: index === last ? 0 : index + 1,\n      ArrowDown: index === last ? 0 : index + 1,\n      ArrowLeft: index === 0 ? last : index - 1,\n      ArrowUp: index === 0 ? last : index - 1,\n      Home: 0,\n      End: last,\n    };\n    if (!(event.key in moves)) return;\n    event.preventDefault();\n    buttons[moves[event.key]!]!.focus();\n  }\n\n  const moreText = expanded ? lessLabel : moreLabel(hidden);\n\n  return (\n    <div ref={frame} data-slot=\"chip-group-frame\" className=\"height-follow min-w-0\">\n      <div\n        ref={refs}\n        role=\"group\"\n        aria-label={label}\n        data-slot=\"chip-group\"\n        onKeyDown={onKeyDown}\n        className={cn(\"relative isolate flex flex-wrap gap-2 box-border font-sans\", className)}\n      >\n        {visible.map((option) => {\n          const selected = value.includes(option.value);\n          const delay = revealedAt.get(option.value);\n          return (\n            <button\n              key={option.value}\n              type=\"button\"\n              data-flip=\"\"\n              data-chip={option.value}\n              data-slot=\"chip\"\n              aria-pressed={selected}\n              tabIndex={tabStop === option.value ? 0 : -1}\n              onClick={() => toggle(option.value)}\n              onFocus={() => setActive(option.value)}\n              style={delay === undefined ? undefined : ({ animationDelay: `${delay}ms` })}\n              className={cn(\"chip\", delay === undefined ? \"\" : \"motion-safe:animate-chip-reveal\")}\n            >\n              <span data-selected={selected} className=\"chip-body\">\n                <span aria-hidden=\"true\" className=\"chip-check\">\n                  <svg width={14} height={14} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 12.5 9.5 18 20 6.5\" pathLength={1} />\n                  </svg>\n                </span>\n                <span aria-hidden=\"true\" className=\"chip-slot\" />\n                <span className=\"truncate\">{option.label}</span>\n              </span>\n            </button>\n          );\n        })}\n        {showMore ? (\n          <button\n            key={MORE}\n            type=\"button\"\n            data-flip=\"\"\n            data-chip={MORE}\n            data-more=\"\"\n            aria-expanded={expanded}\n            tabIndex={tabStop === MORE ? 0 : -1}\n            onClick={toggleMore}\n            onFocus={() => setActive(MORE)}\n            className=\"chip chip-more\"\n          >\n            <span className=\"chip-body tabular-nums\">\n              <SwapText swapKey={moreText} motion=\"rise\">\n                {moreText}\n              </SwapText>\n            </span>\n          </button>\n        ) : null}\n      </div>\n    </div>\n  );\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { ChipGroup, ChipGroupProps, ChipOption } from "./chip-group.js";
+export { ChipGroup, type ChipGroupProps, type ChipOption };

package/dist/chip-group/index.js

@@ -0,0 +1,2 @@
+import { ChipGroup } from "./chip-group.js";
+export { ChipGroup };

package/dist/countdown/countdown.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+//#region src/countdown/countdown.d.ts
+export type CountdownUnit = "days" | "hours" | "minutes" | "seconds";
+/**
+ * Countdown: the time left until a fixed moment people wait for, such as a
+ * launch, a live event or a deadline. Each digit is a wheel that takes the short
+ * way round, so a tick turns downward and 00 to 59 is a single step; the first
+ * reading rolls up from zero, one digit after another. When the moment passes
+ * the digits give way to `completeLabel` and the box follows the new size.
+ *
+ * The clock runs only while the countdown is on screen and the tab is visible,
+ * and reads the clock again on return, so it never drifts. Completion is armed
+ * separately, so `onComplete` fires on time even while the ticking is paused.
+ *
+ * The digits are a picture. The timer is read as plain text ("1 day, 2 hours,
+ * 5 minutes") that is not announced every second, and finishing is announced
+ * once, politely. Reduced motion jumps.
+ */
+export interface CountdownProps {
+  /**
+   * 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
+   * 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
+   * no zone is given, so the result never depends on the visitor's own time zone.
+   */
+  target: Date | number | string;
+  /** IANA zone for a target string without an offset, such as "America/Los_Angeles". Daylight saving is resolved for the target date. */
+  timeZone?: string;
+  /** 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"] */
+  units?: CountdownUnit[];
+  /** Large digits with unit names, or one compact line for banners and table cells. @default "large" */
+  variant?: "large" | "compact";
+  /** Shown once the target passes. The digits swap into it. @default "Live now" */
+  completeLabel?: ReactNode;
+  /** Fires once, the moment the countdown reaches zero while mounted. It fires on time even when the tab is hidden. */
+  onComplete?: () => void;
+  /** Accessible name, such as "Keynote starts in". @default "Time remaining" */
+  label?: string;
+  /** Clock source in epoch milliseconds. Pass a server-synced clock when the visitor's device time cannot be trusted. @default Date.now */
+  clock?: () => number;
+  /** Extra classes for the countdown. Merged last. */
+  className?: string;
+}
+export declare const Countdown: import("react").ForwardRefExoticComponent<CountdownProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=countdown.d.ts.map

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/picker-parts.js

@@ -11,7 +11,7 @@ const datePickerLabelVariants = cva(["text-sm leading-(--leading-normal) text-fo
 const datePickerTriggerVariants = cva([
 	"group-data-[invalid]:border-destructive-strong",
 	fieldSurfaceVariants(),
-	"[&:where([data-pressed])]:border-foreground",
+	"[&:where([data-pressed])]:border-border-strong",
 	"data-[hovered]:not-data-[disabled]:bg-muted data-[pressed]:bg-muted",
 	"group/trigger",
 	"flex items-center justify-between gap-2 text-start",

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

@@ -1 +1 @@
-{"version":3,"file":"picker-parts.js","names":["AriaDateField","AriaLabel","AriaDateInput","AriaDateSegment"],"sources":["../../src/date-picker/picker-parts.tsx"],"sourcesContent":["\"use client\";\n\nimport type { DateValue } from \"@internationalized/date\";\nimport { cva } from \"class-variance-authority\";\nimport { useMemo, useState, type ReactNode } from \"react\";\nimport {\n  DateField as AriaDateField,\n  DateInput as AriaDateInput,\n  DateSegment as AriaDateSegment,\n  Label as AriaLabel,\n  useLocale,\n} from \"react-aria-components\";\n\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/*\n * The pieces DatePicker and DateRangePicker share: the field's classes, the\n * glyphs, the typed date field, and the value helpers. Neither file imports the\n * other, so the two pickers can each own their motion.\n */\n\nexport const datePickerVariants = cva([\"group flex w-full flex-col gap-1.5 box-border font-sans\"]);\n\nexport const datePickerLabelVariants = cva([\"text-sm leading-(--leading-normal) text-foreground\"]);\n\n/** The trigger: the field surface Input, Textarea and Select share. */\nexport const datePickerTriggerVariants = cva(\n  [\n    \"group-data-[invalid]:border-destructive-strong\",\n    fieldSurfaceVariants(),\n    // While the list is open the trigger is pressed and focus is inside it, so the\n    // border and fill keep what they had. Ordinary variants: the base background is\n    // a plain class, which a zero-specificity rule would lose to.\n    \"[&:where([data-pressed])]:border-foreground\",\n    \"data-[hovered]:not-data-[disabled]:bg-muted data-[pressed]:bg-muted\",\n    \"group/trigger\",\n    \"flex items-center justify-between gap-2 text-start\",\n    \"text-base leading-(--leading-normal) cursor-pointer\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  ],\n  {\n    variants: {\n      /** The same rungs and tokens as Input, Select and Button. */\n      size: {\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm)\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md)\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/** The typed date's box, inside the popover: the field surface at the small rung. */\nexport const datePickerInputVariants = cva([\n  fieldSurfaceVariants(),\n  \"flex items-center\",\n  \"h-(--density-control-h-sm) px-(--density-control-pad-sm)\",\n  \"text-base leading-(--leading-normal)\",\n]);\n\n/** One part (day, month, year) of the typed date. */\nexport const datePickerSegmentVariants = cva([\n  \"rounded-2xs px-0.5 tabular-nums outline-none\",\n  \"data-[placeholder]:text-muted-foreground\",\n  \"data-[focused]:bg-primary data-[focused]:text-primary-foreground\",\n  \"data-[type=literal]:px-0\",\n]);\n\nexport const descriptionClass = \"text-sm leading-(--leading-normal) text-muted-foreground\";\n// The open list covers the hint; fading it keeps its first letters from showing past the list's corner.\nexport const hintClass =\n  \"motion-safe:transition-opacity motion-safe:duration-(--duration-quick) motion-safe:ease-settle group-has-[[aria-expanded=true]]:opacity-0\";\nexport const errorClass = \"text-sm leading-(--leading-normal) text-destructive-strong\";\n\nexport function CalendarGlyph() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"text-muted-foreground\"\n    >\n      <rect x=\"2.5\" y=\"3.5\" width=\"11\" height=\"10\" rx=\"1.5\" />\n      <path d=\"M2.5 6.5h11M5.5 2v3M10.5 2v3\" />\n    </svg>\n  );\n}\n\n/** \"15 Sept 2026\" in the locale React Aria reports. A calendar day has no zone, so UTC is exact. */\n/** The chevron turns half a turn while the list is open, on the gentle spring. */\nexport function Chevron() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n    >\n      <path d=\"m4 6 4 4 4-4\" />\n    </svg>\n  );\n}\n\nexport const pickerFooterButtonVariants = cva([\n  \"picker-footer-button cursor-pointer rounded-md border-0 bg-transparent px-2 py-1\",\n  \"text-xs text-muted-foreground outline-none\",\n  \"data-[hovered]:bg-muted data-[hovered]:text-foreground\",\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\nexport function useDayFormat(): (value: DateValue) => string {\n  const { locale } = useLocale();\n  return useMemo(() => {\n    const format = new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeZone: \"UTC\" });\n    return (value: DateValue) => format.format(value.toDate(\"UTC\"));\n  }, [locale]);\n}\n\n/** A value that may be controlled or not, without a dependency on react-stately. */\nexport function useValue<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void) {\n  const [inner, setInner] = useState<T>(defaultValue);\n  const current = value === undefined ? inner : value;\n  const set = (next: T) => {\n    if (value === undefined) setInner(next);\n    onChange?.(next);\n  };\n  return [current, set] as const;\n}\n\n/** The typed date inside the popover. Reports only whole dates, or null once every part is cleared. */\nexport function TypedDate({\n  label,\n  value,\n  onChange,\n  minValue,\n  maxValue,\n}: {\n  label: string;\n  value: DateValue | null;\n  onChange: (value: DateValue | null) => void;\n  minValue?: DateValue;\n  maxValue?: DateValue;\n}) {\n  return (\n    <AriaDateField\n      value={value}\n      onChange={onChange}\n      minValue={minValue}\n      maxValue={maxValue}\n      data-slot=\"date-picker-typed\"\n      className=\"flex min-w-0 flex-1 flex-col gap-1\"\n    >\n      <AriaLabel className={descriptionClass}>{label}</AriaLabel>\n      <AriaDateInput data-slot=\"date-picker-input\" className={datePickerInputVariants()}>\n        {(segment) => <AriaDateSegment segment={segment} className={datePickerSegmentVariants()} />}\n      </AriaDateInput>\n    </AriaDateField>\n  );\n}\n\nexport interface PickerSharedProps {\n  /**\n   * Accessible name, shown above the trigger. **Required**, as on Select: the\n   * trigger's name is this label followed by the value it shows.\n   */\n  label: string;\n  /** Hide the label visually while keeping it on the accessibility tree. @default false */\n  labelHidden?: boolean;\n  /** A quieter line under the trigger, read with it. */\n  description?: ReactNode;\n  /** Why the value is wrong, under the trigger. Draws the invalid edge. */\n  errorMessage?: ReactNode;\n  /** Shown on the trigger while nothing is chosen. @default \"Choose a date\" */\n  placeholder?: string;\n  /** The earliest day that may be chosen, typed or picked. */\n  minValue?: DateValue;\n  /** The latest day that may be chosen, typed or picked. */\n  maxValue?: DateValue;\n  /** Offer the Calendar's Clear button, for a value that may be left empty. @default false */\n  clearable?: boolean;\n  /** Visible text of the Clear button. @default \"Clear\" */\n  clearLabel?: string;\n  /** Disable the trigger. */\n  isDisabled?: boolean;\n  /** Height rung, shared with Input and Select. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** How a chosen day is written on the trigger. @default the locale's medium date */\n  formatValue?: (value: DateValue) => string;\n  /** Extra classes on the root. Merged last through `cn()`, so the consumer wins. */\n  className?: string;\n}\n\n"],"mappings":";;;;;;;AAqBA,MAAa,qBAAqB,IAAI,CAAC,yDAAyD,CAAC;AAEjG,MAAa,0BAA0B,IAAI,CAAC,oDAAoD,CAAC;;AAGjG,MAAa,4BAA4B,IACvC;CACE;CACA,qBAAqB;CAIrB;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;;AAER,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;AAGA,MAAa,0BAA0B,IAAI;CACzC,qBAAqB;CACrB;CACA;CACA;AACF,CAAC;;AAGD,MAAa,4BAA4B,IAAI;CAC3C;CACA;CACA;CACA;AACF,CAAC;AAED,MAAa,mBAAmB;AAEhC,MAAa,YACX;AACF,MAAa,aAAa;AAE1B,SAAgB,gBAAgB;CAC9B,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EACf,WAAU;EARZ,UAAA,CAUE,oBAAC,QAAD;GAAM,GAAE;GAAM,GAAE;GAAM,OAAM;GAAK,QAAO;GAAK,IAAG;EAAO,CAAA,GACvD,oBAAC,QAAD,EAAM,GAAE,+BAAgC,CAAA,CACrC;;AAET;;;AAIA,SAAgB,UAAU;CACxB,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EACf,WAAU;EAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;CACrB,CAAA;AAET;AAEA,MAAa,6BAA6B,IAAI;CAC5C;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,SAAgB,eAA6C;CAC3D,MAAM,EAAE,WAAW,UAAU;CAC7B,OAAO,cAAc;EACnB,MAAM,SAAS,IAAI,KAAK,eAAe,QAAQ;GAAE,WAAW;GAAU,UAAU;EAAM,CAAC;EACvF,QAAQ,UAAqB,OAAO,OAAO,MAAM,OAAO,KAAK,CAAC;CAChE,GAAG,CAAC,MAAM,CAAC;AACb;;AAGA,SAAgB,SAAY,OAAsB,cAAiB,UAA8B;CAC/F,MAAM,CAAC,OAAO,YAAY,SAAY,YAAY;CAClD,MAAM,UAAU,UAAU,KAAA,IAAY,QAAQ;CAC9C,MAAM,OAAO,SAAY;EACvB,IAAI,UAAU,KAAA,GAAW,SAAS,IAAI;EACtC,WAAW,IAAI;CACjB;CACA,OAAO,CAAC,SAAS,GAAG;AACtB;;AAGA,SAAgB,UAAU,EACxB,OACA,OACA,UACA,UACA,YAOC;CACD,OACE,qBAACA,WAAD;EACS;EACG;EACA;EACA;EACV,aAAU;EACV,WAAU;EANZ,UAAA,CAQE,oBAACC,OAAD;GAAW,WAAW;GAAmB,UAAA;EAAiB,CAAA,GAC1D,oBAACC,WAAD;GAAe,aAAU;GAAoB,WAAW,wBAAwB;GAC5E,WAAA,YAAY,oBAACC,aAAD;IAA0B;IAAS,WAAW,0BAA0B;GAAI,CAAA;EAC7E,CAAA,CACF;;AAEnB"}
+{"version":3,"file":"picker-parts.js","names":["AriaDateField","AriaLabel","AriaDateInput","AriaDateSegment"],"sources":["../../src/date-picker/picker-parts.tsx"],"sourcesContent":["\"use client\";\n\nimport type { DateValue } from \"@internationalized/date\";\nimport { cva } from \"class-variance-authority\";\nimport { useMemo, useState, type ReactNode } from \"react\";\nimport {\n  DateField as AriaDateField,\n  DateInput as AriaDateInput,\n  DateSegment as AriaDateSegment,\n  Label as AriaLabel,\n  useLocale,\n} from \"react-aria-components\";\n\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/*\n * The pieces DatePicker and DateRangePicker share: the field's classes, the\n * glyphs, the typed date field, and the value helpers. Neither file imports the\n * other, so the two pickers can each own their motion.\n */\n\nexport const datePickerVariants = cva([\"group flex w-full flex-col gap-1.5 box-border font-sans\"]);\n\nexport const datePickerLabelVariants = cva([\"text-sm leading-(--leading-normal) text-foreground\"]);\n\n/** The trigger: the field surface Input, Textarea and Select share. */\nexport const datePickerTriggerVariants = cva(\n  [\n    \"group-data-[invalid]:border-destructive-strong\",\n    fieldSurfaceVariants(),\n    // While the list is open the trigger is pressed and focus is inside it, so the\n    // border and fill keep what they had. Ordinary variants: the base background is\n    // a plain class, which a zero-specificity rule would lose to.\n    \"[&:where([data-pressed])]:border-border-strong\",\n    \"data-[hovered]:not-data-[disabled]:bg-muted data-[pressed]:bg-muted\",\n    \"group/trigger\",\n    \"flex items-center justify-between gap-2 text-start\",\n    \"text-base leading-(--leading-normal) cursor-pointer\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  ],\n  {\n    variants: {\n      /** The same rungs and tokens as Input, Select and Button. */\n      size: {\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm)\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md)\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/** The typed date's box, inside the popover: the field surface at the small rung. */\nexport const datePickerInputVariants = cva([\n  fieldSurfaceVariants(),\n  \"flex items-center\",\n  \"h-(--density-control-h-sm) px-(--density-control-pad-sm)\",\n  \"text-base leading-(--leading-normal)\",\n]);\n\n/** One part (day, month, year) of the typed date. */\nexport const datePickerSegmentVariants = cva([\n  \"rounded-2xs px-0.5 tabular-nums outline-none\",\n  \"data-[placeholder]:text-muted-foreground\",\n  \"data-[focused]:bg-primary data-[focused]:text-primary-foreground\",\n  \"data-[type=literal]:px-0\",\n]);\n\nexport const descriptionClass = \"text-sm leading-(--leading-normal) text-muted-foreground\";\n// The open list covers the hint; fading it keeps its first letters from showing past the list's corner.\nexport const hintClass =\n  \"motion-safe:transition-opacity motion-safe:duration-(--duration-quick) motion-safe:ease-settle group-has-[[aria-expanded=true]]:opacity-0\";\nexport const errorClass = \"text-sm leading-(--leading-normal) text-destructive-strong\";\n\nexport function CalendarGlyph() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"text-muted-foreground\"\n    >\n      <rect x=\"2.5\" y=\"3.5\" width=\"11\" height=\"10\" rx=\"1.5\" />\n      <path d=\"M2.5 6.5h11M5.5 2v3M10.5 2v3\" />\n    </svg>\n  );\n}\n\n/** \"15 Sept 2026\" in the locale React Aria reports. A calendar day has no zone, so UTC is exact. */\n/** The chevron turns half a turn while the list is open, on the gentle spring. */\nexport function Chevron() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n    >\n      <path d=\"m4 6 4 4 4-4\" />\n    </svg>\n  );\n}\n\nexport const pickerFooterButtonVariants = cva([\n  \"picker-footer-button cursor-pointer rounded-md border-0 bg-transparent px-2 py-1\",\n  \"text-xs text-muted-foreground outline-none\",\n  \"data-[hovered]:bg-muted data-[hovered]:text-foreground\",\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\nexport function useDayFormat(): (value: DateValue) => string {\n  const { locale } = useLocale();\n  return useMemo(() => {\n    const format = new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeZone: \"UTC\" });\n    return (value: DateValue) => format.format(value.toDate(\"UTC\"));\n  }, [locale]);\n}\n\n/** A value that may be controlled or not, without a dependency on react-stately. */\nexport function useValue<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void) {\n  const [inner, setInner] = useState<T>(defaultValue);\n  const current = value === undefined ? inner : value;\n  const set = (next: T) => {\n    if (value === undefined) setInner(next);\n    onChange?.(next);\n  };\n  return [current, set] as const;\n}\n\n/** The typed date inside the popover. Reports only whole dates, or null once every part is cleared. */\nexport function TypedDate({\n  label,\n  value,\n  onChange,\n  minValue,\n  maxValue,\n}: {\n  label: string;\n  value: DateValue | null;\n  onChange: (value: DateValue | null) => void;\n  minValue?: DateValue;\n  maxValue?: DateValue;\n}) {\n  return (\n    <AriaDateField\n      value={value}\n      onChange={onChange}\n      minValue={minValue}\n      maxValue={maxValue}\n      data-slot=\"date-picker-typed\"\n      className=\"flex min-w-0 flex-1 flex-col gap-1\"\n    >\n      <AriaLabel className={descriptionClass}>{label}</AriaLabel>\n      <AriaDateInput data-slot=\"date-picker-input\" className={datePickerInputVariants()}>\n        {(segment) => <AriaDateSegment segment={segment} className={datePickerSegmentVariants()} />}\n      </AriaDateInput>\n    </AriaDateField>\n  );\n}\n\nexport interface PickerSharedProps {\n  /**\n   * Accessible name, shown above the trigger. **Required**, as on Select: the\n   * trigger's name is this label followed by the value it shows.\n   */\n  label: string;\n  /** Hide the label visually while keeping it on the accessibility tree. @default false */\n  labelHidden?: boolean;\n  /** A quieter line under the trigger, read with it. */\n  description?: ReactNode;\n  /** Why the value is wrong, under the trigger. Draws the invalid edge. */\n  errorMessage?: ReactNode;\n  /** Shown on the trigger while nothing is chosen. @default \"Choose a date\" */\n  placeholder?: string;\n  /** The earliest day that may be chosen, typed or picked. */\n  minValue?: DateValue;\n  /** The latest day that may be chosen, typed or picked. */\n  maxValue?: DateValue;\n  /** Offer the Calendar's Clear button, for a value that may be left empty. @default false */\n  clearable?: boolean;\n  /** Visible text of the Clear button. @default \"Clear\" */\n  clearLabel?: string;\n  /** Disable the trigger. */\n  isDisabled?: boolean;\n  /** Height rung, shared with Input and Select. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** How a chosen day is written on the trigger. @default the locale's medium date */\n  formatValue?: (value: DateValue) => string;\n  /** Extra classes on the root. Merged last through `cn()`, so the consumer wins. */\n  className?: string;\n}\n\n"],"mappings":";;;;;;;AAqBA,MAAa,qBAAqB,IAAI,CAAC,yDAAyD,CAAC;AAEjG,MAAa,0BAA0B,IAAI,CAAC,oDAAoD,CAAC;;AAGjG,MAAa,4BAA4B,IACvC;CACE;CACA,qBAAqB;CAIrB;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;;AAER,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;AAGA,MAAa,0BAA0B,IAAI;CACzC,qBAAqB;CACrB;CACA;CACA;AACF,CAAC;;AAGD,MAAa,4BAA4B,IAAI;CAC3C;CACA;CACA;CACA;AACF,CAAC;AAED,MAAa,mBAAmB;AAEhC,MAAa,YACX;AACF,MAAa,aAAa;AAE1B,SAAgB,gBAAgB;CAC9B,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EACf,WAAU;EARZ,UAAA,CAUE,oBAAC,QAAD;GAAM,GAAE;GAAM,GAAE;GAAM,OAAM;GAAK,QAAO;GAAK,IAAG;EAAO,CAAA,GACvD,oBAAC,QAAD,EAAM,GAAE,+BAAgC,CAAA,CACrC;;AAET;;;AAIA,SAAgB,UAAU;CACxB,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EACf,WAAU;EAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;CACrB,CAAA;AAET;AAEA,MAAa,6BAA6B,IAAI;CAC5C;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,SAAgB,eAA6C;CAC3D,MAAM,EAAE,WAAW,UAAU;CAC7B,OAAO,cAAc;EACnB,MAAM,SAAS,IAAI,KAAK,eAAe,QAAQ;GAAE,WAAW;GAAU,UAAU;EAAM,CAAC;EACvF,QAAQ,UAAqB,OAAO,OAAO,MAAM,OAAO,KAAK,CAAC;CAChE,GAAG,CAAC,MAAM,CAAC;AACb;;AAGA,SAAgB,SAAY,OAAsB,cAAiB,UAA8B;CAC/F,MAAM,CAAC,OAAO,YAAY,SAAY,YAAY;CAClD,MAAM,UAAU,UAAU,KAAA,IAAY,QAAQ;CAC9C,MAAM,OAAO,SAAY;EACvB,IAAI,UAAU,KAAA,GAAW,SAAS,IAAI;EACtC,WAAW,IAAI;CACjB;CACA,OAAO,CAAC,SAAS,GAAG;AACtB;;AAGA,SAAgB,UAAU,EACxB,OACA,OACA,UACA,UACA,YAOC;CACD,OACE,qBAACA,WAAD;EACS;EACG;EACA;EACA;EACV,aAAU;EACV,WAAU;EANZ,UAAA,CAQE,oBAACC,OAAD;GAAW,WAAW;GAAmB,UAAA;EAAiB,CAAA,GAC1D,oBAACC,WAAD;GAAe,aAAU;GAAoB,WAAW,wBAAwB;GAC5E,WAAA,YAAY,oBAACC,aAAD;IAA0B;IAAS,WAAW,0BAA0B;GAAI,CAAA;EAC7E,CAAA,CACF;;AAEnB"}