@astra-kit/ui 1.0.0 → 1.2.1

package/dist/components/metric-card.js

@@ -0,0 +1,378 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Metric card (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a compact summary for a number that
+* needs context. The number rolls up from zero the first time it scrolls into view and then turns like an odometer in
+* the direction it moved; the label, context and change chip roll in from the same side, and the chip width springs.
+*/
+import { useRef, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { METRIC_CARD_CHANGE_ENTER_SCALE, METRIC_CARD_DEFAULT_LOCALE, METRIC_CARD_REVEAL_AMOUNT, METRIC_CARD_TREND_PATTERN } from "../constants/metric-card.js";
+import { useHasEnteredView } from "../hooks/use-has-entered-view.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ArcOdometer, formatOdometerValue } from "../motion/arc-odometer.js";
+import { ArcTextSwap } from "../motion/arc-text-swap.js";
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { useMorphWidth } from "../motion/use-morph-width.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Reads the first number in a line of copy, so copy that holds a number enters from the side it moved toward.
+* @param text - Copy that may contain a number.
+* @returns The number, or `NaN` when there is none.
+*/
+function amountIn(text) {
+	const match = text.match(/[-−]?\d+(?:[.,]\d+)?/)?.[0];
+	return match ? Number(match.replace("−", "-").replace(",", ".")) : Number.NaN;
+}
+/**
+* Keeps the direction of the last change of a line of copy.
+* @param text - Current copy.
+* @returns `-1` when the number in it went down, otherwise `1`.
+*/
+function useTextDirection(text) {
+	const $ = _c(2);
+	let t0;
+	if ($[0] !== text) {
+		t0 = {
+			text,
+			direction: 1
+		};
+		$[0] = text;
+		$[1] = t0;
+	} else {
+		t0 = $[1];
+	}
+	const [shown, setShown] = useState(t0);
+	if (shown.text !== text) {
+		setShown({
+			text,
+			direction: amountIn(text) < amountIn(shown.text) ? -1 : 1
+		});
+	}
+	return shown.direction;
+}
+/** A line of copy that rolls in from the direction its number moved. */
+function MetricCopy(t0) {
+	const $ = _c(5);
+	const { text, reduceMotion, className } = t0;
+	const direction = useTextDirection(text);
+	let t1;
+	if ($[0] !== className || $[1] !== direction || $[2] !== reduceMotion || $[3] !== text) {
+		t1 = /* @__PURE__ */ _jsx(ArcTextSwap, {
+			text,
+			reduceMotion,
+			direction,
+			className
+		});
+		$[0] = className;
+		$[1] = direction;
+		$[2] = reduceMotion;
+		$[3] = text;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	return t1;
+}
+/** The change copy, whose slot springs to the width of each new value instead of snapping. */
+function ChangeCopy(t0) {
+	const $ = _c(12);
+	const { text, reduceMotion } = t0;
+	const direction = useTextDirection(text);
+	const sizer = useRef(null);
+	const width = useMorphWidth(sizer, text, reduceMotion);
+	let t1;
+	if ($[0] !== width) {
+		t1 = { width };
+		$[0] = width;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== text) {
+		t2 = /* @__PURE__ */ _jsx("span", {
+			ref: sizer,
+			"aria-hidden": "true",
+			className: "pointer-events-none invisible absolute top-0 left-0 whitespace-nowrap",
+			children: text
+		});
+		$[2] = text;
+		$[3] = t2;
+	} else {
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== direction || $[5] !== reduceMotion || $[6] !== text) {
+		t3 = /* @__PURE__ */ _jsx(ArcTextSwap, {
+			text,
+			reduceMotion,
+			direction,
+			className: "inline-flex",
+			lineClassName: "inline-block"
+		});
+		$[4] = direction;
+		$[5] = reduceMotion;
+		$[6] = text;
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	let t4;
+	if ($[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ _jsxs(motion.span, {
+			className: "relative inline-flex max-w-full overflow-x-clip align-top whitespace-nowrap",
+			style: t1,
+			children: [t2, t3]
+		});
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else {
+		t4 = $[11];
+	}
+	return t4;
+}
+/** Chip classes: a neutral outline, or a faint tint with the trend colour on the text when the change is signed. */
+const changeClassName = "inline-flex flex-none rounded-(--radius-pill) border border-border px-2 py-[3px] text-sm text-text-secondary tabular-nums transition-[color,background-color] duration-(--duration-fast) ease-(--ease-standard) data-trend:border-transparent data-[trend=up]:bg-success/11 data-[trend=up]:text-success data-[trend=down]:bg-danger/11 data-[trend=down]:text-danger";
+/**
+* A compact card with a label, an odometer style number, a context line and an optional change chip.
+* @param props - Label, value, suffix, context, change, locale and native article attributes.
+* @returns The metric card.
+*/
+function MetricCard(t0) {
+	const $ = _c(50);
+	let change;
+	let className;
+	let context;
+	let label;
+	let props;
+	let suffix;
+	let t1;
+	let value;
+	if ($[0] !== t0) {
+		({label, value, suffix, context, change, locale: t1, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = change;
+		$[2] = className;
+		$[3] = context;
+		$[4] = label;
+		$[5] = props;
+		$[6] = suffix;
+		$[7] = t1;
+		$[8] = value;
+	} else {
+		change = $[1];
+		className = $[2];
+		context = $[3];
+		label = $[4];
+		props = $[5];
+		suffix = $[6];
+		t1 = $[7];
+		value = $[8];
+	}
+	const locale = t1 === undefined ? METRIC_CARD_DEFAULT_LOCALE : t1;
+	const reduceMotion = usePrefersReducedMotion();
+	const numberRef = useRef(null);
+	const hasEnteredView = useHasEnteredView(numberRef, METRIC_CARD_REVEAL_AMOUNT);
+	const trend = change ? METRIC_CARD_TREND_PATTERN.up.test(change) ? "up" : METRIC_CARD_TREND_PATTERN.down.test(change) ? "down" : undefined : undefined;
+	let t2;
+	if ($[9] !== locale || $[10] !== value) {
+		t2 = formatOdometerValue(value, 0, locale);
+		$[9] = locale;
+		$[10] = value;
+		$[11] = t2;
+	} else {
+		t2 = $[11];
+	}
+	const valueText = `${t2}${suffix ?? ""}`;
+	let t3;
+	if ($[12] !== className) {
+		t3 = cn("min-w-0 rounded-(--radius-surface) border border-border bg-surface p-(--space-6) text-foreground shadow-(--shadow-resting) max-[380px]:p-(--space-4)", className);
+		$[12] = className;
+		$[13] = t3;
+	} else {
+		t3 = $[13];
+	}
+	let t4;
+	if ($[14] !== label || $[15] !== reduceMotion) {
+		t4 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "metric-card-label",
+			className: "min-w-0 text-sm text-text-secondary",
+			children: /* @__PURE__ */ _jsx(MetricCopy, {
+				text: label,
+				reduceMotion
+			})
+		});
+		$[14] = label;
+		$[15] = reduceMotion;
+		$[16] = t4;
+	} else {
+		t4 = $[16];
+	}
+	let t5;
+	if ($[17] !== change || $[18] !== reduceMotion || $[19] !== trend) {
+		t5 = change ? /* @__PURE__ */ _jsx(motion.small, {
+			"data-slot": "metric-card-change",
+			"data-trend": trend,
+			className: changeClassName,
+			initial: {
+				opacity: 0,
+				scale: reduceMotion ? 1 : METRIC_CARD_CHANGE_ENTER_SCALE
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: reduceMotion ? 1 : METRIC_CARD_CHANGE_ENTER_SCALE,
+				transition: {
+					duration: ARC_DURATION.fast,
+					ease: [...ARC_EASE.standard]
+				}
+			},
+			transition: reduceMotion ? { duration: 0 } : ARC_SPRING_SNAPPY,
+			children: /* @__PURE__ */ _jsx(ChangeCopy, {
+				text: change,
+				reduceMotion
+			})
+		}, "change") : null;
+		$[17] = change;
+		$[18] = reduceMotion;
+		$[19] = trend;
+		$[20] = t5;
+	} else {
+		t5 = $[20];
+	}
+	let t6;
+	if ($[21] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t5
+		});
+		$[21] = t5;
+		$[22] = t6;
+	} else {
+		t6 = $[22];
+	}
+	let t7;
+	if ($[23] !== t4 || $[24] !== t6) {
+		t7 = /* @__PURE__ */ _jsxs("div", {
+			className: "mb-(--space-8) flex items-center justify-between gap-(--space-3) max-[380px]:mb-(--space-6) max-[380px]:flex-wrap max-[380px]:items-start",
+			children: [t4, t6]
+		});
+		$[23] = t4;
+		$[24] = t6;
+		$[25] = t7;
+	} else {
+		t7 = $[25];
+	}
+	let t8;
+	if ($[26] !== valueText) {
+		t8 = /* @__PURE__ */ _jsx("span", {
+			className: "sr-only",
+			children: valueText
+		});
+		$[26] = valueText;
+		$[27] = t8;
+	} else {
+		t8 = $[27];
+	}
+	const t9 = !hasEnteredView && !reduceMotion;
+	let t10;
+	if ($[28] !== locale || $[29] !== reduceMotion || $[30] !== t9 || $[31] !== value) {
+		t10 = /* @__PURE__ */ _jsx(ArcOdometer, {
+			value,
+			locale,
+			armed: t9,
+			reduceMotion
+		});
+		$[28] = locale;
+		$[29] = reduceMotion;
+		$[30] = t9;
+		$[31] = value;
+		$[32] = t10;
+	} else {
+		t10 = $[32];
+	}
+	let t11;
+	if ($[33] !== suffix) {
+		t11 = suffix ? /* @__PURE__ */ _jsx("span", {
+			className: "inline-block whitespace-pre",
+			children: suffix
+		}) : null;
+		$[33] = suffix;
+		$[34] = t11;
+	} else {
+		t11 = $[34];
+	}
+	let t12;
+	if ($[35] !== t10 || $[36] !== t11) {
+		t12 = /* @__PURE__ */ _jsxs("span", {
+			"aria-hidden": "true",
+			className: "inline-flex items-start whitespace-nowrap select-none",
+			children: [t10, t11]
+		});
+		$[35] = t10;
+		$[36] = t11;
+		$[37] = t12;
+	} else {
+		t12 = $[37];
+	}
+	let t13;
+	if ($[38] !== t12 || $[39] !== t8) {
+		t13 = /* @__PURE__ */ _jsxs("span", {
+			ref: numberRef,
+			"data-slot": "metric-card-value",
+			className: "relative inline-flex font-display text-3xl leading-none font-medium tracking-(--tracking-display) tabular-nums",
+			children: [t8, t12]
+		});
+		$[38] = t12;
+		$[39] = t8;
+		$[40] = t13;
+	} else {
+		t13 = $[40];
+	}
+	let t14;
+	if ($[41] !== context || $[42] !== reduceMotion) {
+		t14 = /* @__PURE__ */ _jsx("p", {
+			"data-slot": "metric-card-context",
+			className: "mt-(--space-4) text-sm leading-(--leading-body) text-text-muted",
+			children: /* @__PURE__ */ _jsx(MetricCopy, {
+				text: context,
+				reduceMotion
+			})
+		});
+		$[41] = context;
+		$[42] = reduceMotion;
+		$[43] = t14;
+	} else {
+		t14 = $[43];
+	}
+	let t15;
+	if ($[44] !== props || $[45] !== t13 || $[46] !== t14 || $[47] !== t3 || $[48] !== t7) {
+		t15 = /* @__PURE__ */ _jsxs("article", {
+			"data-slot": "metric-card",
+			className: t3,
+			...props,
+			children: [
+				t7,
+				t13,
+				t14
+			]
+		});
+		$[44] = props;
+		$[45] = t13;
+		$[46] = t14;
+		$[47] = t3;
+		$[48] = t7;
+		$[49] = t15;
+	} else {
+		t15 = $[49];
+	}
+	return t15;
+}
+export { MetricCard };

package/dist/components/radio-group.d.ts

@@ -10,8 +10,10 @@ export type RadioGroupOption = {
     disabled?: boolean;
 };
 export type RadioGroupProps = {
-    /** Visible legend of the fieldset, which names the group. */
+    /** Legend of the fieldset, which names the group. */
     label: string;
+    /** Keeps `label` for assistive technology only, for layouts that already show their own label. */
+    hideLabel?: boolean;
     /** Rows in order. Values double as keys, so keep them unique. */
     options: RadioGroupOption[];
     /** Selected value when controlled. */
@@ -27,8 +29,8 @@ export type RadioGroupProps = {
 };
 /**
  * A choice of one option from a visible set, controlled with `value` or uncontrolled with `defaultValue`.
- * @param props - Legend, options, value, change handler, form name and classes.
+ * @param props - Legend, its visibility, options, value, change handler, form name and classes.
  * @returns The fieldset with its legend and option rows.
  */
-declare function RadioGroup({ label, options, value, defaultValue, onValueChange, name, className }: RadioGroupProps): import("react").JSX.Element;
+declare function RadioGroup({ label, hideLabel, options, value, defaultValue, onValueChange, name, className, }: RadioGroupProps): import("react").JSX.Element;
 export { RadioGroup };

package/dist/components/radio-group.js

@@ -208,12 +208,13 @@ function _temp(event) {
 }
 /**
 * A choice of one option from a visible set, controlled with `value` or uncontrolled with `defaultValue`.
-* @param props - Legend, options, value, change handler, form name and classes.
+* @param props - Legend, its visibility, options, value, change handler, form name and classes.
 * @returns The fieldset with its legend and option rows.
 */
 function RadioGroup(t0) {
-	const $ = _c(32);
-	const { label, options, value, defaultValue, onValueChange, name, className } = t0;
+	const $ = _c(33);
+	const { label, hideLabel: t1, options, value, defaultValue, onValueChange, name, className } = t0;
+	const hideLabel = t1 === undefined ? false : t1;
 	const reduceMotion = usePrefersReducedMotion();
 	const generatedId = useId();
 	const legendId = `${generatedId}-legend`;
@@ -224,36 +225,36 @@ function RadioGroup(t0) {
 	const highlightRef = useRef(null);
 	const shownValue = useRef(null);
 	const placedAt = useRef("");
-	let t1;
+	let t2;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = () => optionsRef.current?.querySelector(CHECKED_OPTION_SELECTOR) ?? null;
-		$[0] = t1;
+		t2 = () => optionsRef.current?.querySelector(CHECKED_OPTION_SELECTOR) ?? null;
+		$[0] = t2;
 	} else {
-		t1 = $[0];
+		t2 = $[0];
 	}
-	const findCheckedRow = t1;
-	let t2;
+	const findCheckedRow = t2;
 	let t3;
+	let t4;
 	if ($[1] !== reduceMotion || $[2] !== selectedValue) {
-		t2 = () => {
+		t3 = () => {
 			const hasChanged = shownValue.current !== null && shownValue.current !== selectedValue;
 			placeHighlight(highlightRef.current, findCheckedRow(), placedAt, hasChanged && !reduceMotion);
 			shownValue.current = selectedValue;
 			groupRef.current?.setAttribute(RADIO_GROUP_READY_ATTRIBUTE, "");
 		};
-		t3 = [selectedValue, reduceMotion];
+		t4 = [selectedValue, reduceMotion];
 		$[1] = reduceMotion;
 		$[2] = selectedValue;
-		$[3] = t2;
-		$[4] = t3;
+		$[3] = t3;
+		$[4] = t4;
 	} else {
-		t2 = $[3];
-		t3 = $[4];
+		t3 = $[3];
+		t4 = $[4];
 	}
-	useLayoutEffect(t2, t3);
-	let t4;
+	useLayoutEffect(t3, t4);
+	let t5;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = () => {
+		t5 = () => {
 			const list = optionsRef.current;
 			if (!list || typeof ResizeObserver === "undefined") {
 				return;
@@ -263,15 +264,15 @@ function RadioGroup(t0) {
 			list.querySelectorAll(OPTION_SELECTOR).forEach((row) => observer.observe(row));
 			return () => observer.disconnect();
 		};
-		$[5] = t4;
+		$[5] = t5;
 	} else {
-		t4 = $[5];
+		t5 = $[5];
 	}
-	useEffect(t4);
-	const t5 = name ?? generatedId;
-	let t6;
+	useEffect(t5);
+	const t6 = name ?? generatedId;
+	let t7;
 	if ($[6] !== onValueChange || $[7] !== value) {
-		t6 = (nextValue) => {
+		t7 = (nextValue) => {
 			if (value === undefined) {
 				setUncontrolledValue(nextValue);
 			}
@@ -279,112 +280,114 @@ function RadioGroup(t0) {
 		};
 		$[6] = onValueChange;
 		$[7] = value;
-		$[8] = t6;
+		$[8] = t7;
 	} else {
-		t6 = $[8];
+		t7 = $[8];
 	}
-	let t7;
+	let t8;
 	if ($[9] !== className) {
-		t7 = cn("m-0 grid min-w-0 border-0 p-0", className);
+		t8 = cn("m-0 grid min-w-0 border-0 p-0", className);
 		$[9] = className;
-		$[10] = t7;
+		$[10] = t8;
 	} else {
-		t7 = $[10];
+		t8 = $[10];
 	}
-	let t8;
-	if ($[11] !== label || $[12] !== legendId) {
-		t8 = /* @__PURE__ */ _jsx("legend", {
+	const t9 = hideLabel ? "sr-only" : "mb-(--space-2) p-0 text-sm font-medium text-foreground";
+	let t10;
+	if ($[11] !== label || $[12] !== legendId || $[13] !== t9) {
+		t10 = /* @__PURE__ */ _jsx("legend", {
 			id: legendId,
 			"data-slot": "radio-group-label",
-			className: "mb-(--space-2) p-0 text-sm font-medium text-foreground",
+			className: t9,
 			children: label
 		});
 		$[11] = label;
 		$[12] = legendId;
-		$[13] = t8;
+		$[13] = t9;
+		$[14] = t10;
 	} else {
-		t8 = $[13];
+		t10 = $[14];
 	}
-	let t9;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ _jsx("span", {
+	let t11;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ _jsx("span", {
 			ref: highlightRef,
 			"data-slot": "radio-group-highlight",
 			"aria-hidden": "true",
 			className: "pointer-events-none absolute top-0 left-0 z-1 box-border rounded-(--radius-control) border border-(--control-on) bg-[color-mix(in_oklab,var(--control-on)_5%,transparent)] opacity-0"
 		});
-		$[14] = t9;
+		$[15] = t11;
 	} else {
-		t9 = $[14];
+		t11 = $[15];
 	}
-	let t10;
-	if ($[15] !== options) {
-		t10 = options.map(_temp2);
-		$[15] = options;
-		$[16] = t10;
+	let t12;
+	if ($[16] !== options) {
+		t12 = options.map(_temp2);
+		$[16] = options;
+		$[17] = t12;
 	} else {
-		t10 = $[16];
+		t12 = $[17];
 	}
-	let t11;
-	if ($[17] !== t10) {
-		t11 = /* @__PURE__ */ _jsxs("div", {
+	let t13;
+	if ($[18] !== t12) {
+		t13 = /* @__PURE__ */ _jsxs("div", {
 			ref: optionsRef,
 			"data-slot": "radio-group-options",
 			className: "relative grid w-full gap-(--space-2)",
-			children: [t9, t10]
+			children: [t11, t12]
 		});
-		$[17] = t10;
-		$[18] = t11;
+		$[18] = t12;
+		$[19] = t13;
 	} else {
-		t11 = $[18];
+		t13 = $[19];
 	}
-	let t12;
-	if ($[19] !== legendId || $[20] !== t11 || $[21] !== t7 || $[22] !== t8) {
-		t12 = /* @__PURE__ */ _jsxs("fieldset", {
+	let t14;
+	if ($[20] !== legendId || $[21] !== t10 || $[22] !== t13 || $[23] !== t8) {
+		t14 = /* @__PURE__ */ _jsxs("fieldset", {
 			ref: groupRef,
 			"data-slot": "radio-group",
 			"aria-labelledby": legendId,
-			className: t7,
-			children: [t8, t11]
+			className: t8,
+			children: [t10, t13]
 		});
-		$[19] = legendId;
-		$[20] = t11;
-		$[21] = t7;
-		$[22] = t8;
-		$[23] = t12;
+		$[20] = legendId;
+		$[21] = t10;
+		$[22] = t13;
+		$[23] = t8;
+		$[24] = t14;
 	} else {
-		t12 = $[23];
+		t14 = $[24];
 	}
-	let t13;
-	if ($[24] !== selectedValue || $[25] !== t12 || $[26] !== t5 || $[27] !== t6) {
-		t13 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Root, {
+	let t15;
+	if ($[25] !== selectedValue || $[26] !== t14 || $[27] !== t6 || $[28] !== t7) {
+		t15 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Root, {
 			asChild: true,
-			name: t5,
+			name: t6,
 			value: selectedValue,
-			onValueChange: t6,
-			children: t12
+			onValueChange: t7,
+			children: t14
 		});
-		$[24] = selectedValue;
-		$[25] = t12;
-		$[26] = t5;
+		$[25] = selectedValue;
+		$[26] = t14;
 		$[27] = t6;
-		$[28] = t13;
+		$[28] = t7;
+		$[29] = t15;
 	} else {
-		t13 = $[28];
+		t15 = $[29];
 	}
-	let t14;
-	if ($[29] !== selectedValue || $[30] !== t13) {
-		t14 = /* @__PURE__ */ _jsx(RadioGroupValueContext.Provider, {
+	let t16;
+	if ($[30] !== selectedValue || $[31] !== t15) {
+		t16 = /* @__PURE__ */ _jsx(RadioGroupValueContext.Provider, {
 			value: selectedValue,
-			children: t13
+			children: t15
 		});
-		$[29] = selectedValue;
-		$[30] = t13;
-		$[31] = t14;
+		$[30] = selectedValue;
+		$[31] = t15;
+		$[32] = t16;
 	} else {
-		t14 = $[31];
+		t16 = $[32];
 	}
-	return t14;
+	return t16;
 }
 function _temp2(option) {
 	return /* @__PURE__ */ _jsx(RadioGroupOptionRow, { ...option }, option.value);