@astra-kit/ui 1.1.0 → 1.2.1

package/dist/motion/arc-odometer.js

@@ -0,0 +1,424 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Rolling digits adapted from Arc's AnimatedCounter and UsageMeter (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli,
+* MIT License. The full license text ships in THIRD_PARTY_NOTICES.md. Internal: the odometer behind `MetricCard` and
+* `UsageMeter`. It is decoration over text that screen readers get elsewhere, so it is always `aria-hidden`.
+*/
+import { useEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, cancelFrame, frame, motion, useMotionValue, useTransform } from "motion/react";
+import { cn } from "../lib/utils.js";
+import { ARC_BLUR, ARC_DURATION, ARC_SPRING_MORPH, ARC_SPRING_SMOOTH, ARC_STAGGER } from "./arc-tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Motion drops inherited velocity on time-defined springs, so values that retarget mid-flight run the same springs
+* written as stiffness and damping.
+* @param spring - Visual duration and bounce of the spring.
+* @param restDelta - Distance at which the spring counts as settled.
+* @returns The equivalent physical spring.
+*/
+export function toPhysicalSpring({ visualDuration, bounce }, restDelta = .001) {
+	const angularFrequency = 2 * Math.PI / (visualDuration * 1.2);
+	return {
+		type: "spring",
+		stiffness: angularFrequency * angularFrequency,
+		damping: 2 * (1 - bounce) * angularFrequency,
+		restDelta,
+		restSpeed: restDelta * 2
+	};
+}
+/**
+* Starts an animation on the next frame, so the render that caused it never swallows a spring's first frames.
+* @param start - Starts the animation and returns its controls.
+* @returns A cleanup that cancels the pending start or stops the running animation.
+*/
+export function startNextFrame(start) {
+	let controls = null;
+	const run = () => {
+		controls = start();
+	};
+	frame.update(run);
+	return () => {
+		cancelFrame(run);
+		controls?.stop();
+	};
+}
+/** Wheels turn on a critically damped spring. */
+const TURN_SPRING = toPhysicalSpring(ARC_SPRING_SMOOTH);
+/** The first reveal from zero takes a little longer, so the digits read as counting up. */
+const REVEAL_SPRING = toPhysicalSpring({
+	visualDuration: ARC_DURATION.considered,
+	bounce: 0
+});
+/** New columns and separators open from zero width on the morph spring. */
+const FIT_SPRING = toPhysicalSpring(ARC_SPRING_MORPH, .01);
+/** Longest stagger, in seconds, between columns revealed together. */
+const REVEAL_STAGGER_LIMIT_S = .25;
+/** Number of glyphs on a wheel. */
+const WHEEL_SIZE = 10;
+const DIGITS = Array.from({ length: WHEEL_SIZE }, (_, digit) => digit);
+/** Distance, in wheel steps, at which a glyph is fully sharp. */
+const SHARP_OFFSET = .02;
+const columnPresence = {
+	initial: {
+		width: 0,
+		opacity: 0
+	},
+	animate: {
+		width: "auto",
+		opacity: 1
+	},
+	exit: {
+		width: 0,
+		opacity: 0
+	}
+};
+/** Each wheel is clipped and feathers out at its edges, so a turning digit fades instead of being cut. */
+const columnClassName = "relative inline-block overflow-hidden [--feather:.16em] -my-(--feather) py-(--feather) [mask-image:linear-gradient(to_bottom,transparent,#000_calc(var(--feather)*1.5),#000_calc(100%_-_var(--feather)*1.5),transparent)]";
+const numberFormats = new Map();
+/**
+* Splits a formatted number into columns keyed by place value, so 999 → 1.000 keeps the ones column the ones column and
+* a new thousands column slides in.
+* @param value - Number to split.
+* @param decimals - Digits after the decimal separator.
+* @param locale - Formatting locale.
+* @returns Digit columns and separators in display order.
+*/
+function partsFor(value, decimals, locale) {
+	const formatKey = `${locale}|${decimals}`;
+	let format = numberFormats.get(formatKey);
+	if (!format) {
+		format = new Intl.NumberFormat(locale, {
+			minimumFractionDigits: decimals,
+			maximumFractionDigits: decimals,
+			numberingSystem: "latn"
+		});
+		numberFormats.set(formatKey, format);
+	}
+	const parts = format.formatToParts(value);
+	let place = parts.reduce((count, part) => count + (part.type === "integer" ? part.value.length : 0), 0);
+	let fraction = 0;
+	let order = 0;
+	return parts.flatMap((part, index) => {
+		if (part.type === "integer") return [...part.value].map((character) => ({
+			key: `i${--place}`,
+			digit: Number(character),
+			order: order++
+		}));
+		if (part.type === "fraction") return [...part.value].map((character) => ({
+			key: `f${fraction++}`,
+			digit: Number(character),
+			order: order++
+		}));
+		const key = part.type === "group" ? `g${place}` : part.type === "decimal" ? "d" : `${part.type}${index}`;
+		return [{
+			key,
+			text: part.value
+		}];
+	});
+}
+/**
+* Formats a number the way the odometer draws it, for the screen-reader copy beside it.
+* @param value - Number to format.
+* @param decimals - Digits after the decimal separator.
+* @param locale - Formatting locale.
+* @returns The formatted number.
+*/
+export function formatOdometerValue(value, decimals, locale) {
+	return partsFor(value, decimals, locale).map((part) => "text" in part ? part.text : part.digit).join("");
+}
+/** One digit on a wheel; its distance from the wheel position sets where it sits and how clearly it shows. */
+function Glyph(t0) {
+	const $ = _c(10);
+	const { position, digit } = t0;
+	let t1;
+	if ($[0] !== digit) {
+		t1 = (current) => ((digit - current) % WHEEL_SIZE + WHEEL_SIZE * 1.5) % WHEEL_SIZE - WHEEL_SIZE / 2;
+		$[0] = digit;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	const offset = useTransform(position, t1);
+	const y = useTransform(offset, _temp);
+	const opacity = useTransform(offset, _temp2);
+	const visibility = useTransform(offset, _temp3);
+	const filter = useTransform(offset, _temp4);
+	let t2;
+	if ($[2] !== filter || $[3] !== opacity || $[4] !== visibility || $[5] !== y) {
+		t2 = {
+			y,
+			opacity,
+			filter,
+			visibility
+		};
+		$[2] = filter;
+		$[3] = opacity;
+		$[4] = visibility;
+		$[5] = y;
+		$[6] = t2;
+	} else {
+		t2 = $[6];
+	}
+	let t3;
+	if ($[7] !== digit || $[8] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(motion.span, {
+			className: "absolute inset-x-0 inset-y-(--feather) text-center",
+			style: t2,
+			children: digit
+		});
+		$[7] = digit;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		t3 = $[9];
+	}
+	return t3;
+}
+function _temp4(current_3) {
+	return Math.abs(current_3) < SHARP_OFFSET || Math.abs(current_3) >= 1 ? "none" : `blur(${(Math.abs(current_3) * ARC_BLUR.subtle).toFixed(2)}px)`;
+}
+function _temp3(current_2) {
+	return Math.abs(current_2) >= 1 ? "hidden" : "visible";
+}
+function _temp2(current_1) {
+	return Math.max(0, 1 - Math.abs(current_1));
+}
+function _temp(current_0) {
+	return `${current_0}em`;
+}
+/** A digit wheel that always turns the way the whole number moved, wrapping 9 → 0 like an odometer. */
+function Column(t0) {
+	const $ = _c(22);
+	const { digit, direction, armed, delay, reduceMotion } = t0;
+	const position = useMotionValue(armed ? 0 : digit);
+	const t1 = armed ? 0 : digit;
+	const t2 = armed ? 0 : digit;
+	const t3 = !armed;
+	let t4;
+	if ($[0] !== t1 || $[1] !== t2 || $[2] !== t3) {
+		t4 = {
+			digit: t1,
+			target: t2,
+			revealed: t3
+		};
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+		$[3] = t4;
+	} else {
+		t4 = $[3];
+	}
+	const wheel = useRef(t4);
+	const running = useRef(null);
+	let t5;
+	let t6;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => () => running.current?.();
+		t6 = [];
+		$[4] = t5;
+		$[5] = t6;
+	} else {
+		t5 = $[4];
+		t6 = $[5];
+	}
+	useEffect(t5, t6);
+	let t7;
+	let t8;
+	if ($[6] !== armed || $[7] !== delay || $[8] !== digit || $[9] !== direction || $[10] !== position || $[11] !== reduceMotion) {
+		t7 = () => {
+			const state = wheel.current;
+			const hasNewDigit = !armed && state.digit !== digit;
+			if (hasNewDigit) {
+				state.target = state.target + (direction < 0 && state.revealed ? -((state.digit - digit + WHEEL_SIZE) % WHEEL_SIZE) : (digit - state.digit + WHEEL_SIZE) % WHEEL_SIZE);
+				state.digit = digit;
+			}
+			if (reduceMotion) {
+				running.current?.();
+				running.current = null;
+				if (!armed) {
+					state.revealed = true;
+				}
+				if (position.get() !== state.target) {
+					position.jump(state.target);
+				}
+				return;
+			}
+			if (!hasNewDigit) {
+				if (!armed) {
+					state.revealed = true;
+				}
+				return;
+			}
+			running.current?.();
+			const target = state.target;
+			const transition = state.revealed ? TURN_SPRING : {
+				...REVEAL_SPRING,
+				delay
+			};
+			state.revealed = true;
+			running.current = startNextFrame(() => animate(position, target, transition));
+		};
+		t8 = [
+			armed,
+			delay,
+			digit,
+			direction,
+			position,
+			reduceMotion
+		];
+		$[6] = armed;
+		$[7] = delay;
+		$[8] = digit;
+		$[9] = direction;
+		$[10] = position;
+		$[11] = reduceMotion;
+		$[12] = t7;
+		$[13] = t8;
+	} else {
+		t7 = $[12];
+		t8 = $[13];
+	}
+	useEffect(t7, t8);
+	let t9;
+	if ($[14] !== reduceMotion) {
+		t9 = reduceMotion ? { duration: 0 } : FIT_SPRING;
+		$[14] = reduceMotion;
+		$[15] = t9;
+	} else {
+		t9 = $[15];
+	}
+	let t10;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ _jsx("span", {
+			className: "invisible",
+			children: "0"
+		});
+		$[16] = t10;
+	} else {
+		t10 = $[16];
+	}
+	let t11;
+	if ($[17] !== position) {
+		t11 = DIGITS.map((item) => /* @__PURE__ */ _jsx(Glyph, {
+			position,
+			digit: item
+		}, item));
+		$[17] = position;
+		$[18] = t11;
+	} else {
+		t11 = $[18];
+	}
+	let t12;
+	if ($[19] !== t11 || $[20] !== t9) {
+		t12 = /* @__PURE__ */ _jsxs(motion.span, {
+			className: columnClassName,
+			...columnPresence,
+			transition: t9,
+			children: [t10, t11]
+		});
+		$[19] = t11;
+		$[20] = t9;
+		$[21] = t12;
+	} else {
+		t12 = $[21];
+	}
+	return t12;
+}
+/**
+* A number that rolls to each new value, digit by digit, in the direction it moved.
+* @param props - Value, decimals, locale, reveal state and motion preference.
+* @returns The odometer, hidden from assistive technology.
+*/
+export function ArcOdometer(t0) {
+	const $ = _c(20);
+	const { value, decimals: t1, locale, armed: t2, reduceMotion, className } = t0;
+	const decimals = t1 === undefined ? 0 : t1;
+	const armed = t2 === undefined ? false : t2;
+	let t3;
+	if ($[0] !== value) {
+		t3 = {
+			value,
+			direction: 1
+		};
+		$[0] = value;
+		$[1] = t3;
+	} else {
+		t3 = $[1];
+	}
+	const [trend, setTrend] = useState(t3);
+	if (trend.value !== value) {
+		setTrend({
+			value,
+			direction: value > trend.value ? 1 : -1
+		});
+	}
+	let t4;
+	if ($[2] !== className) {
+		t4 = cn("relative inline-flex items-start whitespace-nowrap tabular-nums select-none", className);
+		$[2] = className;
+		$[3] = t4;
+	} else {
+		t4 = $[3];
+	}
+	let t5;
+	if ($[4] !== armed || $[5] !== decimals || $[6] !== locale || $[7] !== reduceMotion || $[8] !== trend.direction || $[9] !== value) {
+		let t6;
+		if ($[11] !== armed || $[12] !== reduceMotion || $[13] !== trend.direction) {
+			t6 = (part) => "digit" in part ? /* @__PURE__ */ _jsx(Column, {
+				digit: part.digit,
+				direction: trend.direction,
+				armed,
+				delay: Math.min(part.order * ARC_STAGGER.item, REVEAL_STAGGER_LIMIT_S),
+				reduceMotion
+			}, part.key) : /* @__PURE__ */ _jsx(motion.span, {
+				className: "inline-block overflow-x-clip",
+				...columnPresence,
+				transition: reduceMotion ? { duration: 0 } : FIT_SPRING,
+				children: part.text
+			}, part.key);
+			$[11] = armed;
+			$[12] = reduceMotion;
+			$[13] = trend.direction;
+			$[14] = t6;
+		} else {
+			t6 = $[14];
+		}
+		t5 = partsFor(value, decimals, locale).map(t6);
+		$[4] = armed;
+		$[5] = decimals;
+		$[6] = locale;
+		$[7] = reduceMotion;
+		$[8] = trend.direction;
+		$[9] = value;
+		$[10] = t5;
+	} else {
+		t5 = $[10];
+	}
+	let t6;
+	if ($[15] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t5
+		});
+		$[15] = t5;
+		$[16] = t6;
+	} else {
+		t6 = $[16];
+	}
+	let t7;
+	if ($[17] !== t4 || $[18] !== t6) {
+		t7 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "odometer",
+			"aria-hidden": "true",
+			className: t4,
+			children: t6
+		});
+		$[17] = t4;
+		$[18] = t6;
+		$[19] = t7;
+	} else {
+		t7 = $[19];
+	}
+	return t7;
+}

package/dist/motion/arc-text-swap.d.ts

@@ -0,0 +1,22 @@
+/** Vertical travel, in em, of new copy rising in and old copy lifting out. */
+export declare const ARC_TEXT_SWAP_OFFSET_EM = 0.3;
+/** Direction new copy enters from: `1` rises from below (a larger value), `-1` drops from above (a smaller one). */
+export type ArcTextSwapDirection = 1 | -1;
+export type ArcTextSwapProps = {
+    /** Copy to show. A new value rolls in over the previous one; without copy the last one leaves. */
+    text: string | undefined;
+    /** Whether the reduced-motion crossfade replaces the rise. */
+    reduceMotion: boolean;
+    /** Side the new copy enters from. */
+    direction?: ArcTextSwapDirection;
+    /** Classes of the positioned slot the outgoing copy pops out against. */
+    className?: string;
+    /** Classes of each line of copy. */
+    lineClassName?: string;
+};
+/**
+ * Rolls changed copy in place: the outgoing line pops out of flow so the slot never holds both widths.
+ * @param props - Copy, motion preference, direction and classes.
+ * @returns The swapping copy.
+ */
+export declare function ArcTextSwap({ text, reduceMotion, direction, className, lineClassName }: ArcTextSwapProps): import("react").JSX.Element;

package/dist/motion/arc-text-swap.js

@@ -0,0 +1,142 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Text swap adapted from Arc (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli, MIT License.
+* The full license text ships in THIRD_PARTY_NOTICES.md. Internal: shared by the Arc-derived data displays (metric
+* card, usage meter, timeline, stepper and empty state) to roll changed copy in place.
+*/
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
+import { cn } from "../lib/utils.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE } from "./arc-tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Vertical travel, in em, of new copy rising in and old copy lifting out. */
+export const ARC_TEXT_SWAP_OFFSET_EM = .3;
+/** New copy rises out of a soft blur from the side it moved toward; the old copy leaves a little faster. */
+const riseVariants = {
+	hidden: (direction) => ({
+		opacity: 0,
+		y: `${ARC_TEXT_SWAP_OFFSET_EM * direction}em`,
+		filter: `blur(${ARC_BLUR.soft}px)`
+	}),
+	shown: {
+		opacity: 1,
+		y: 0,
+		filter: "blur(0px)",
+		transition: {
+			duration: ARC_DURATION.standard,
+			ease: [...ARC_EASE.enter]
+		}
+	},
+	gone: (direction) => ({
+		opacity: 0,
+		y: `${-ARC_TEXT_SWAP_OFFSET_EM * direction}em`,
+		filter: `blur(${ARC_BLUR.subtle}px)`,
+		transition: {
+			duration: ARC_DURATION.fast,
+			ease: [...ARC_EASE.standard]
+		}
+	})
+};
+/** With reduced motion, copy only crossfades in place. */
+const fadeVariants = {
+	hidden: {
+		opacity: 0,
+		y: 0,
+		filter: "blur(0px)"
+	},
+	shown: {
+		opacity: 1,
+		y: 0,
+		filter: "blur(0px)",
+		transition: { duration: ARC_DURATION.instant }
+	},
+	gone: {
+		opacity: 0,
+		y: 0,
+		filter: "blur(0px)",
+		transition: { duration: ARC_DURATION.instant }
+	}
+};
+/** Outgoing copies are hidden from assistive technology while they fade, so only the current copy is read. */
+function SwapLine(props) {
+	const $ = _c(3);
+	const isPresent = useIsPresent();
+	const t0 = isPresent ? props["aria-hidden"] : true;
+	let t1;
+	if ($[0] !== props || $[1] !== t0) {
+		t1 = /* @__PURE__ */ _jsx(motion.span, {
+			...props,
+			"aria-hidden": t0
+		});
+		$[0] = props;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t1 = $[2];
+	}
+	return t1;
+}
+/**
+* Rolls changed copy in place: the outgoing line pops out of flow so the slot never holds both widths.
+* @param props - Copy, motion preference, direction and classes.
+* @returns The swapping copy.
+*/
+export function ArcTextSwap(t0) {
+	const $ = _c(13);
+	const { text, reduceMotion, direction: t1, className, lineClassName } = t0;
+	const direction = t1 === undefined ? 1 : t1;
+	let t2;
+	if ($[0] !== className) {
+		t2 = cn("relative block max-w-full", className);
+		$[0] = className;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	let t3;
+	if ($[2] !== direction || $[3] !== lineClassName || $[4] !== reduceMotion || $[5] !== text) {
+		t3 = text ? /* @__PURE__ */ _jsx(SwapLine, {
+			className: cn("block", lineClassName),
+			custom: direction,
+			variants: reduceMotion ? fadeVariants : riseVariants,
+			initial: "hidden",
+			animate: "shown",
+			exit: "gone",
+			children: text
+		}, text) : null;
+		$[2] = direction;
+		$[3] = lineClassName;
+		$[4] = reduceMotion;
+		$[5] = text;
+		$[6] = t3;
+	} else {
+		t3 = $[6];
+	}
+	let t4;
+	if ($[7] !== direction || $[8] !== t3) {
+		t4 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			mode: "popLayout",
+			initial: false,
+			custom: direction,
+			children: t3
+		});
+		$[7] = direction;
+		$[8] = t3;
+		$[9] = t4;
+	} else {
+		t4 = $[9];
+	}
+	let t5;
+	if ($[10] !== t2 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ _jsx("span", {
+			className: t2,
+			children: t4
+		});
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else {
+		t5 = $[12];
+	}
+	return t5;
+}

package/dist/motion/arc-tokens.d.ts

@@ -45,6 +45,7 @@ export declare const ARC_SPRING_CSS: {
 export declare const ARC_STAGGER: {
     readonly char: 0.016;
     readonly item: 0.035;
+    readonly line: 0.08;
 };
 /** Blur radii in pixels for brief content crossfades. */
 export declare const ARC_BLUR: {

package/dist/motion/arc-tokens.js

@@ -64,7 +64,8 @@ export const ARC_SPRING_CSS = {
 /** Stagger steps in seconds; keep a whole staggered entrance under roughly 0.4s. */
 export const ARC_STAGGER = {
 	char: .016,
-	item: .035
+	item: .035,
+	line: .08
 };
 /** Blur radii in pixels for brief content crossfades. */
 export const ARC_BLUR = {