@astra-kit/ui 1.1.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/stepper.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from "react";
+import type { StepperDetails, StepperMessages, StepperOrientation, StepperStatus } from "../constants/stepper.js";
+export type { StepperDetails, StepperMessages, StepperOrientation, StepperStatus };
+export type StepperStep = {
+    /** Stable key, so each step keeps its own motion when the list changes. */
+    id: string;
+    label: string;
+    /** A short hint under the label. */
+    description?: string;
+    /** Marks the step as failed: the marker morphs into an alert and this message replaces the description. */
+    error?: string;
+};
+export type StepperProps = Omit<HTMLAttributes<HTMLElement>, "children" | "role"> & {
+    /** Steps in order. */
+    steps: StepperStep[];
+    /** Index of the step in progress. `steps.length` marks the whole flow complete. */
+    current: number;
+    /** Layout direction. Defaults to `"horizontal"`. */
+    orientation?: StepperOrientation;
+    /** Called with the index of a completed step when it is chosen. Without it the stepper is read only. */
+    onStepSelect?: (index: number) => void;
+    /** `"current"` shows only the active step's description. Errors always show. Defaults to `"all"`. */
+    details?: StepperDetails;
+    /** Markers only. Horizontal steppers switch to this below 30rem on their own. */
+    compact?: boolean;
+    /** Accessible name of the stepper. Defaults to "Progreso". */
+    label?: string;
+    /** Announced, and shown in the compact caption, once every step is complete. Defaults to "Todos los pasos completados". */
+    completeLabel?: string;
+    /** Replaces any of the Spanish screen-reader statuses and the step announcement. */
+    messages?: Partial<StepperMessages>;
+};
+/**
+ * A horizontal or vertical steps indicator driven by the current index, with optional navigation back to completed steps.
+ * @param props - Steps, current index, orientation, selection callback, copy and native attributes.
+ * @returns The stepper: a labelled `nav` when interactive, otherwise a `role="group"`.
+ */
+declare function Stepper({ steps, current, orientation, onStepSelect, details, compact, label, completeLabel, messages, className, ...props }: StepperProps): import("react").JSX.Element;
+export { Stepper };