@astra-kit/ui 1.1.0 → 1.2.1

package/dist/components/usage-meter.js

@@ -0,0 +1,1093 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Usage meter (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): shows what fills a fixed allowance and
+* how close it is to the limit. A segmented bar, a rolling total, a status badge and a legend that doubles as the
+* keyboard path. Segments grow in once the meter is seen and re-flow on one spring each when values change; crossing
+* the limit fades in a hatched overage and a limit marker, so going over never relies on colour alone.
+*/
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, motionValue, useMotionValue, useTransform } from "motion/react";
+import { CircleAlert, TriangleAlert } from "lucide-react";
+import { USAGE_METER_DEFAULT_DECIMALS, USAGE_METER_DEFAULT_FREE_LABEL, USAGE_METER_DEFAULT_LOCALE, USAGE_METER_DEFAULT_MESSAGES, USAGE_METER_DEFAULT_OVER_LABEL, USAGE_METER_DEFAULT_WARN_AT, USAGE_METER_FREE_ID, USAGE_METER_REVEAL_AMOUNT, USAGE_METER_REVEAL_STAGGER_S, USAGE_METER_SEGMENT_COLOR_COUNT, USAGE_METER_SEGMENT_GAP_PX, USAGE_METER_SEGMENT_KEY_PREFIX } from "../constants/usage-meter.js";
+import { useHasEnteredView } from "../hooks/use-has-entered-view.js";
+import { useIsHydrated } from "../hooks/use-is-hydrated.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ArcOdometer, startNextFrame, toPhysicalSpring } from "../motion/arc-odometer.js";
+import { ArcTextSwap } from "../motion/arc-text-swap.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH, ARC_SPRING_SMOOTH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SETTLE_SPRING = toPhysicalSpring(ARC_SPRING_SMOOTH);
+const REVEAL_SPRING = toPhysicalSpring({
+	visualDuration: ARC_DURATION.considered + .1,
+	bounce: 0
+});
+const FIT_SPRING = toPhysicalSpring(ARC_SPRING_MORPH, .01);
+/** Icons cross through a small scale and a blur a little stronger than text. */
+const ICON_BLUR_PX = ARC_BLUR.subtle + 1;
+const ICON_ENTER_SCALE = .6;
+/** Smallest span of the bar, so an empty meter with a zero limit never divides by zero. */
+const MINIMUM_SPAN = 1e-6;
+/** Size, in pixels, of the status badge's icon and of the legend's warning icon. */
+const BADGE_ICON_SIZE_PX = 14;
+const LEGEND_ICON_SIZE_PX = 12;
+const PERCENT = 100;
+const popVariants = {
+	hidden: {
+		opacity: 0,
+		scale: ICON_ENTER_SCALE,
+		filter: `blur(${ICON_BLUR_PX}px)`
+	},
+	shown: {
+		opacity: 1,
+		scale: 1,
+		filter: "blur(0px)",
+		transition: {
+			...ARC_SPRING_SNAPPY,
+			opacity: {
+				duration: ARC_DURATION.fast,
+				ease: [...ARC_EASE.enter]
+			},
+			filter: {
+				duration: ARC_DURATION.fast,
+				ease: [...ARC_EASE.enter]
+			}
+		}
+	},
+	gone: {
+		opacity: 0,
+		scale: ICON_ENTER_SCALE,
+		filter: `blur(${ICON_BLUR_PX}px)`,
+		transition: {
+			duration: ARC_DURATION.instant,
+			ease: [...ARC_EASE.standard]
+		}
+	}
+};
+const fadeVariants = {
+	hidden: { opacity: 0 },
+	shown: {
+		opacity: 1,
+		transition: { duration: ARC_DURATION.fast }
+	},
+	gone: {
+		opacity: 0,
+		transition: { duration: ARC_DURATION.instant }
+	}
+};
+/** Category colours: steps of the accent, strongest first, so the meter reads as one allowance rather than a rainbow. */
+const SEGMENT_COLOR_CLASS_NAMES = [
+	"bg-(--accent)",
+	"bg-[color-mix(in_oklab,var(--accent)_62%,var(--surface))]",
+	"bg-[color-mix(in_oklab,var(--accent)_36%,var(--surface))]",
+	"bg-[color-mix(in_oklab,var(--accent)_22%,var(--surface))]"
+];
+/** The free space is the track itself. */
+const TRACK_COLOR_CLASS_NAME = "bg-[color-mix(in_oklab,var(--foreground)_7%,var(--surface))]";
+/**
+* Legend and highlight key of a segment, namespaced apart from the remaining-space item.
+* @param id - The segment's own id.
+* @returns The internal key.
+*/
+function segmentKey(id) {
+	return `${USAGE_METER_SEGMENT_KEY_PREFIX}${id}`;
+}
+/**
+* Colour class of a category by its position.
+* @param index - Position of the category in `segments`.
+* @returns The background class.
+*/
+function segmentColorClassName(index) {
+	return SEGMENT_COLOR_CLASS_NAMES[index % USAGE_METER_SEGMENT_COLOR_COUNT];
+}
+/** The plan status as a compact mark. Its width springs to each new message and the warning icon grows in beside it. */
+function StatusBadge(t0) {
+	const $ = _c(22);
+	const { status, text, reduceMotion } = t0;
+	const inner = useRef(null);
+	const width = useMotionValue("auto");
+	let t1;
+	let t2;
+	if ($[0] !== reduceMotion || $[1] !== width) {
+		t1 = () => {
+			const node = inner.current;
+			if (!node || typeof ResizeObserver === "undefined") {
+				return;
+			}
+			let hasMeasured = false;
+			const observer = new ResizeObserver(() => {
+				const next = node.offsetWidth;
+				if (hasMeasured && !reduceMotion) {
+					animate(width, next, FIT_SPRING);
+				} else {
+					width.jump(next);
+				}
+				hasMeasured = next > 0;
+			});
+			observer.observe(node);
+			return () => observer.disconnect();
+		};
+		t2 = [reduceMotion, width];
+		$[0] = reduceMotion;
+		$[1] = width;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	useLayoutEffect(t1, t2);
+	const Icon = status === "over" ? TriangleAlert : CircleAlert;
+	let t3;
+	if ($[4] !== width) {
+		t3 = { width };
+		$[4] = width;
+		$[5] = t3;
+	} else {
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] !== Icon || $[7] !== reduceMotion || $[8] !== status) {
+		t4 = status !== "ok" ? /* @__PURE__ */ _jsx(motion.span, {
+			className: cn("grid place-items-center", status === "over" ? "text-danger" : "text-warning"),
+			variants: reduceMotion ? fadeVariants : popVariants,
+			initial: "hidden",
+			animate: "shown",
+			exit: "gone",
+			children: /* @__PURE__ */ _jsx(Icon, {
+				size: BADGE_ICON_SIZE_PX,
+				strokeWidth: 2,
+				"aria-hidden": "true"
+			})
+		}, status) : null;
+		$[6] = Icon;
+		$[7] = reduceMotion;
+		$[8] = status;
+		$[9] = t4;
+	} else {
+		t4 = $[9];
+	}
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			mode: "popLayout",
+			initial: false,
+			children: t4
+		});
+		$[10] = t4;
+		$[11] = t5;
+	} else {
+		t5 = $[11];
+	}
+	let t6;
+	if ($[12] !== reduceMotion || $[13] !== text) {
+		t6 = /* @__PURE__ */ _jsx(ArcTextSwap, {
+			text,
+			reduceMotion,
+			className: "min-w-0",
+			lineClassName: "truncate"
+		});
+		$[12] = reduceMotion;
+		$[13] = text;
+		$[14] = t6;
+	} else {
+		t6 = $[14];
+	}
+	let t7;
+	if ($[15] !== t5 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ _jsxs("span", {
+			ref: inner,
+			className: "inline-flex max-w-full min-w-0 flex-none items-center gap-1.5 px-(--space-3) whitespace-nowrap",
+			children: [t5, t6]
+		});
+		$[15] = t5;
+		$[16] = t6;
+		$[17] = t7;
+	} else {
+		t7 = $[17];
+	}
+	let t8;
+	if ($[18] !== status || $[19] !== t3 || $[20] !== t7) {
+		t8 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "usage-meter-status",
+			"data-status": status,
+			style: t3,
+			className: "inline-flex h-7 max-w-full min-w-0 shrink justify-end overflow-hidden rounded-(--radius-pill) bg-surface-muted text-xs leading-none font-medium text-text-secondary transition-[background-color,color] duration-(--duration-standard) ease-(--ease-standard) data-[status=near]:bg-[color-mix(in_oklab,var(--warning)_14%,var(--surface))] data-[status=near]:text-foreground data-[status=over]:bg-[color-mix(in_oklab,var(--danger)_12%,var(--surface))] data-[status=over]:text-foreground",
+			children: t7
+		});
+		$[18] = status;
+		$[19] = t3;
+		$[20] = t7;
+		$[21] = t8;
+	} else {
+		t8 = $[21];
+	}
+	return t8;
+}
+/**
+* The span of the bar: the limit, or everything used once that is more. Computed values read only base values, because
+* a value derived from another derived value can read it stale when several base values jump in the same frame.
+* @param amounts - Used amount of every segment.
+* @param limit - The shown limit.
+* @returns The amount the full bar stands for.
+*/
+function readSpan(amounts, limit) {
+	return Math.max(limit.get(), amounts.reduce((sum, amount) => sum + amount.get(), 0), MINIMUM_SPAN);
+}
+/** One category on the bar. It starts where the ones before it end, so growth anywhere pushes the rest along. */
+function SegmentBar(t0) {
+	const $ = _c(20);
+	const { index, amounts, limit, width, highlight } = t0;
+	let t1;
+	if ($[0] !== amounts || $[1] !== index || $[2] !== limit || $[3] !== width) {
+		t1 = () => {
+			let start = 0;
+			for (let position = 0; position < index; position++) {
+				start = start + amounts[position].get();
+			}
+			return start / readSpan(amounts, limit) * width.get();
+		};
+		$[0] = amounts;
+		$[1] = index;
+		$[2] = limit;
+		$[3] = width;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	const x = useTransform(t1);
+	let t2;
+	if ($[5] !== amounts || $[6] !== index || $[7] !== limit || $[8] !== width) {
+		t2 = () => {
+			const trackWidth = width.get();
+			const span = readSpan(amounts, limit);
+			let start_0 = 0;
+			for (let position_0 = 0; position_0 < index; position_0++) {
+				start_0 = start_0 + amounts[position_0].get();
+			}
+			const amount = amounts[index].get();
+			if (!trackWidth) {
+				return 0;
+			}
+			const size = amount / span * trackWidth;
+			const rest = trackWidth - start_0 / span * trackWidth - size;
+			return Math.max(0, size - Math.min(USAGE_METER_SEGMENT_GAP_PX, size, Math.max(0, rest))) / trackWidth;
+		};
+		$[5] = amounts;
+		$[6] = index;
+		$[7] = limit;
+		$[8] = width;
+		$[9] = t2;
+	} else {
+		t2 = $[9];
+	}
+	const scaleX = useTransform(t2);
+	let t3;
+	if ($[10] !== scaleX || $[11] !== x) {
+		t3 = {
+			x,
+			scaleX,
+			originX: 0
+		};
+		$[10] = scaleX;
+		$[11] = x;
+		$[12] = t3;
+	} else {
+		t3 = $[12];
+	}
+	let t4;
+	if ($[13] !== index) {
+		t4 = cn("absolute inset-0 transition-opacity duration-(--duration-fast) ease-(--ease-standard) data-[highlight=off]:opacity-28", segmentColorClassName(index));
+		$[13] = index;
+		$[14] = t4;
+	} else {
+		t4 = $[14];
+	}
+	let t5;
+	if ($[15] !== highlight || $[16] !== index || $[17] !== t3 || $[18] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "usage-meter-segment",
+			"data-index": index,
+			"data-highlight": highlight,
+			style: t3,
+			className: t4
+		});
+		$[15] = highlight;
+		$[16] = index;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+	} else {
+		t5 = $[19];
+	}
+	return t5;
+}
+/**
+* Formats an amount with the meter's decimals, locale and unit.
+* @param value - Amount to format.
+* @param options - Locale, decimals, unit, and whether trailing zero decimals are dropped (for the limit).
+* @returns The formatted amount, such as "8,4 GB".
+*/
+function formatAmount(value, { locale, decimals, unit, trimZeros = false }) {
+	const number = new Intl.NumberFormat(locale, {
+		minimumFractionDigits: trimZeros ? 0 : decimals,
+		maximumFractionDigits: decimals
+	}).format(value);
+	return unit ? `${number} ${unit}` : number;
+}
+/**
+* A segmented bar showing what uses a fixed allowance, with a rolling total, a status badge and an interactive legend.
+* @param props - Label, segments, limit, unit, legend labels, copy overrides and native div attributes.
+* @returns The usage meter.
+*/
+function UsageMeter(t0) {
+	const $ = _c(72);
+	let className;
+	let label;
+	let limit;
+	let messages;
+	let props;
+	let rawSegments;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	if ($[0] !== t0) {
+		({label, segments: rawSegments, limit, unit: t1, decimals: t2, freeLabel: t3, overLabel: t4, warnAt: t5, messages, locale: t6, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = label;
+		$[3] = limit;
+		$[4] = messages;
+		$[5] = props;
+		$[6] = rawSegments;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else {
+		className = $[1];
+		label = $[2];
+		limit = $[3];
+		messages = $[4];
+		props = $[5];
+		rawSegments = $[6];
+		t1 = $[7];
+		t2 = $[8];
+		t3 = $[9];
+		t4 = $[10];
+		t5 = $[11];
+		t6 = $[12];
+	}
+	const unit = t1 === undefined ? "" : t1;
+	const decimals = t2 === undefined ? USAGE_METER_DEFAULT_DECIMALS : t2;
+	const freeLabel = t3 === undefined ? USAGE_METER_DEFAULT_FREE_LABEL : t3;
+	const overLabel = t4 === undefined ? USAGE_METER_DEFAULT_OVER_LABEL : t4;
+	const warnAt = t5 === undefined ? USAGE_METER_DEFAULT_WARN_AT : t5;
+	const locale = t6 === undefined ? USAGE_METER_DEFAULT_LOCALE : t6;
+	const copy = {
+		...USAGE_METER_DEFAULT_MESSAGES,
+		...messages
+	};
+	const reduceMotion = usePrefersReducedMotion();
+	const isHydrated = useIsHydrated();
+	const root = useRef(null);
+	const trackRef = useRef(null);
+	const legendRef = useRef(null);
+	const hasEnteredView = useHasEnteredView(root, USAGE_METER_REVEAL_AMOUNT);
+	const titleId = useId();
+	let t7;
+	if ($[13] !== titleId) {
+		let t8;
+		if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+			t8 = /[^a-zA-Z0-9_-]/g;
+			$[15] = t8;
+		} else {
+			t8 = $[15];
+		}
+		t7 = titleId.replace(t8, "");
+		$[13] = titleId;
+		$[14] = t7;
+	} else {
+		t7 = $[14];
+	}
+	const hatchId = `usage-meter-hatch${t7}`;
+	const isReady = isHydrated && (hasEnteredView || reduceMotion);
+	const decimalFactor = 10 ** decimals;
+	let t8;
+	if ($[16] !== decimalFactor) {
+		t8 = (value) => Math.round(value * decimalFactor) / decimalFactor;
+		$[16] = decimalFactor;
+		$[17] = t8;
+	} else {
+		t8 = $[17];
+	}
+	const round = t8;
+	let t9;
+	if ($[18] !== round) {
+		t9 = (segment) => ({
+			...segment,
+			value: round(segment.value)
+		});
+		$[18] = round;
+		$[19] = t9;
+	} else {
+		t9 = $[19];
+	}
+	const segments = rawSegments.map(t9);
+	const total = round(segments.reduce(_temp, 0));
+	const free = round(Math.max(0, limit - total));
+	const over = round(Math.max(0, total - limit));
+	const status = total > limit ? "over" : total >= limit * warnAt ? "near" : "ok";
+	let t10;
+	if ($[20] !== decimals || $[21] !== locale || $[22] !== unit) {
+		t10 = (value_0) => formatAmount(value_0, {
+			locale,
+			decimals,
+			unit
+		});
+		$[20] = decimals;
+		$[21] = locale;
+		$[22] = unit;
+		$[23] = t10;
+	} else {
+		t10 = $[23];
+	}
+	const format = t10;
+	const values = {
+		label,
+		unit,
+		limit: formatAmount(limit, {
+			locale,
+			decimals,
+			unit,
+			trimZeros: true
+		}),
+		total: format(total),
+		free: format(free),
+		over: format(over)
+	};
+	const [amountStore] = useState(_temp2);
+	let t11;
+	if ($[24] !== amountStore) {
+		t11 = (segment_1) => {
+			let amount = amountStore.get(segment_1.id);
+			if (!amount) {
+				amount = motionValue(0);
+				amountStore.set(segment_1.id, amount);
+			}
+			return amount;
+		};
+		$[24] = amountStore;
+		$[25] = t11;
+	} else {
+		t11 = $[25];
+	}
+	const amounts = segments.map(t11);
+	const shownLimit = useMotionValue(limit);
+	const trackWidth = useMotionValue(0);
+	const limitX = useTransform(() => Math.round(shownLimit.get() / readSpan(amounts, shownLimit) * trackWidth.get()));
+	const overClip = useTransform(() => `inset(0 0 0 ${Math.round(shownLimit.get() / readSpan(amounts, shownLimit) * trackWidth.get()) + USAGE_METER_SEGMENT_GAP_PX}px)`);
+	const markerOpacity = useMotionValue(0);
+	const amountIds = segments.map(_temp3).join("|");
+	useEffect(() => {
+		const watched = amountIds.split("|").flatMap((id) => amountStore.get(id) ?? []);
+		const isUsageOver = () => watched.reduce(_temp4, 0) > shownLimit.get();
+		let isOver = isUsageOver();
+		markerOpacity.jump(isOver ? 1 : 0);
+		let fading;
+		const check = () => {
+			const next = isUsageOver();
+			if (next === isOver) {
+				return;
+			}
+			isOver = next;
+			fading?.stop();
+			if (reduceMotion) {
+				markerOpacity.jump(next ? 1 : 0);
+			} else {
+				fading = animate(markerOpacity, next ? 1 : 0, {
+					duration: ARC_DURATION.fast,
+					ease: [...ARC_EASE.standard]
+				});
+			}
+		};
+		const stops = [...watched.map((amount_1) => amount_1.on("change", check)), shownLimit.on("change", check)];
+		return () => {
+			stops.forEach(_temp5);
+			fading?.stop();
+		};
+	}, [
+		amountIds,
+		amountStore,
+		markerOpacity,
+		reduceMotion,
+		shownLimit
+	]);
+	let t12;
+	let t13;
+	if ($[26] !== trackWidth) {
+		t12 = () => {
+			const node = trackRef.current;
+			if (!node) {
+				return;
+			}
+			trackWidth.set(node.clientWidth);
+			if (typeof ResizeObserver === "undefined") {
+				return;
+			}
+			const observer = new ResizeObserver(() => trackWidth.set(node.clientWidth));
+			observer.observe(node);
+			return () => observer.disconnect();
+		};
+		t13 = [trackWidth];
+		$[26] = trackWidth;
+		$[27] = t12;
+		$[28] = t13;
+	} else {
+		t12 = $[27];
+		t13 = $[28];
+	}
+	useLayoutEffect(t12, t13);
+	const segmentTargets = JSON.stringify(segments.map(_temp6));
+	const hasRevealed = useRef(false);
+	useEffect(() => {
+		if (!isReady) {
+			return;
+		}
+		const isFirstReveal = !hasRevealed.current;
+		hasRevealed.current = true;
+		const targets = JSON.parse(segmentTargets);
+		const stops_0 = targets.map((t14, index) => {
+			const [id_0, value_1] = t14;
+			const amount_2 = amountStore.get(id_0);
+			if (!amount_2 || amount_2.get() === value_1) {
+				return null;
+			}
+			if (reduceMotion) {
+				amount_2.jump(value_1);
+				return null;
+			}
+			const transition = isFirstReveal ? {
+				...REVEAL_SPRING,
+				delay: index * USAGE_METER_REVEAL_STAGGER_S
+			} : SETTLE_SPRING;
+			return startNextFrame(() => animate(amount_2, value_1, transition));
+		});
+		return () => stops_0.forEach(_temp7);
+	}, [
+		segmentTargets,
+		isReady,
+		reduceMotion,
+		amountStore
+	]);
+	let t15;
+	let t16;
+	if ($[29] !== limit || $[30] !== reduceMotion || $[31] !== shownLimit) {
+		t15 = () => {
+			if (shownLimit.get() === limit) {
+				return;
+			}
+			if (reduceMotion) {
+				shownLimit.jump(limit);
+				return;
+			}
+			return startNextFrame(() => animate(shownLimit, limit, SETTLE_SPRING));
+		};
+		t16 = [
+			limit,
+			reduceMotion,
+			shownLimit
+		];
+		$[29] = limit;
+		$[30] = reduceMotion;
+		$[31] = shownLimit;
+		$[32] = t15;
+		$[33] = t16;
+	} else {
+		t15 = $[32];
+		t16 = $[33];
+	}
+	useEffect(t15, t16);
+	const [hovered, setHovered] = useState(null);
+	const [focused, setFocused] = useState(null);
+	const [pinned, setPinned] = useState(null);
+	const [rovingIndex, setRovingIndex] = useState(0);
+	const items = [...segments.map(_temp8), {
+		id: USAGE_METER_FREE_ID,
+		label: status === "over" ? overLabel : freeLabel,
+		value: status === "over" ? over : free
+	}];
+	const tabStopIndex = Math.min(rovingIndex, items.length - 1);
+	const active = hovered ?? focused ?? pinned;
+	const activeItem = items.find((item) => item.id === active) ?? null;
+	let t17;
+	if ($[34] !== active) {
+		t17 = (id_1) => active ? active === id_1 ? "on" : "off" : undefined;
+		$[34] = active;
+		$[35] = t17;
+	} else {
+		t17 = $[35];
+	}
+	const highlightOf = t17;
+	const idAt = (clientX) => {
+		const rect = trackRef.current?.getBoundingClientRect();
+		if (!rect?.width) {
+			return null;
+		}
+		const at = (clientX - rect.left) / rect.width * Math.max(limit, total);
+		if (at > limit) {
+			return USAGE_METER_FREE_ID;
+		}
+		let end = 0;
+		for (const segment_5 of segments) {
+			end = end + segment_5.value;
+			if (at <= end) {
+				return segmentKey(segment_5.id);
+			}
+		}
+		return USAGE_METER_FREE_ID;
+	};
+	const onTrackMove = (event) => {
+		if (event.pointerType === "mouse") {
+			setHovered(idAt(event.clientX));
+		}
+	};
+	const onTrackTap = (event_0) => {
+		if (event_0.pointerType === "mouse") {
+			return;
+		}
+		const id_2 = idAt(event_0.clientX);
+		setPinned((current) => current === id_2 ? null : id_2);
+	};
+	const onLegendKeyDown = (event_1) => {
+		if (event_1.key === "Escape") {
+			if (pinned || focused) {
+				event_1.preventDefault();
+				setPinned(null);
+			}
+			return;
+		}
+		const targets_0 = {
+			ArrowRight: tabStopIndex + 1,
+			ArrowDown: tabStopIndex + 1,
+			ArrowLeft: tabStopIndex - 1,
+			ArrowUp: tabStopIndex - 1,
+			Home: 0,
+			End: items.length - 1
+		};
+		const next_0 = targets_0[event_1.key];
+		if (next_0 === undefined) {
+			return;
+		}
+		event_1.preventDefault();
+		const index_0 = (next_0 + items.length) % items.length;
+		setRovingIndex(index_0);
+		legendRef.current?.querySelectorAll("button")[index_0]?.focus();
+	};
+	const headline = isReady ? activeItem ? activeItem.value : total : 0;
+	const share = activeItem && limit > 0 ? Math.round(activeItem.value / limit * PERCENT) : 0;
+	const caption = !activeItem ? copy.usedCaption(values) : activeItem.id === USAGE_METER_FREE_ID ? status === "over" ? copy.overCaption(values) : copy.freeCaption(values) : copy.segmentCaption({
+		...values,
+		segment: activeItem.label,
+		share
+	});
+	const badge = status === "over" ? copy.overBadge(values) : status === "near" ? copy.nearBadge(values) : copy.freeBadge(values);
+	let t18;
+	if ($[36] !== format) {
+		t18 = (segment_6) => `${segment_6.label} ${format(segment_6.value)}`;
+		$[36] = format;
+		$[37] = t18;
+	} else {
+		t18 = $[37];
+	}
+	const barSummary = copy.barSummary({
+		...values,
+		status,
+		segments: segments.map(t18).join(", ")
+	});
+	const notice = status === "over" ? `over:${over}` : status;
+	let t19;
+	if ($[38] !== notice) {
+		t19 = {
+			notice,
+			message: ""
+		};
+		$[38] = notice;
+		$[39] = t19;
+	} else {
+		t19 = $[39];
+	}
+	const [announced, setAnnounced] = useState(t19);
+	if (announced.notice !== notice) {
+		const message = status === "over" ? copy.overAnnouncement(values) : status === "near" ? copy.nearAnnouncement(values) : copy.okAnnouncement(values);
+		setAnnounced({
+			notice,
+			message
+		});
+	}
+	let t20;
+	if ($[40] !== className) {
+		t20 = cn("grid min-w-0 gap-(--space-4) text-foreground", className);
+		$[40] = className;
+		$[41] = t20;
+	} else {
+		t20 = $[41];
+	}
+	let t21;
+	if ($[42] !== label || $[43] !== titleId) {
+		t21 = /* @__PURE__ */ _jsx("span", {
+			id: titleId,
+			className: "min-w-0 text-base leading-(--leading-body) font-medium tracking-(--tracking-body) text-balance text-foreground",
+			children: label
+		});
+		$[42] = label;
+		$[43] = titleId;
+		$[44] = t21;
+	} else {
+		t21 = $[44];
+	}
+	let t22;
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = () => setHovered(null);
+		$[45] = t22;
+	} else {
+		t22 = $[45];
+	}
+	let t23;
+	if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = cn("relative isolate h-3.5 overflow-hidden rounded-(--radius-pill) [-webkit-tap-highlight-color:transparent]", TRACK_COLOR_CLASS_NAME);
+		$[46] = t23;
+	} else {
+		t23 = $[46];
+	}
+	const t24 = segments.map((segment_7, index_1) => /* @__PURE__ */ _jsx(SegmentBar, {
+		index: index_1,
+		amounts,
+		limit: shownLimit,
+		width: trackWidth,
+		highlight: highlightOf(segmentKey(segment_7.id))
+	}, segment_7.id));
+	let t25;
+	if ($[47] !== highlightOf) {
+		t25 = highlightOf(USAGE_METER_FREE_ID);
+		$[47] = highlightOf;
+		$[48] = t25;
+	} else {
+		t25 = $[48];
+	}
+	let t26;
+	if ($[49] !== markerOpacity || $[50] !== overClip) {
+		t26 = {
+			clipPath: overClip,
+			opacity: markerOpacity
+		};
+		$[49] = markerOpacity;
+		$[50] = overClip;
+		$[51] = t26;
+	} else {
+		t26 = $[51];
+	}
+	let t27;
+	if ($[52] === Symbol.for("react.memo_cache_sentinel")) {
+		t27 = /* @__PURE__ */ _jsx("rect", {
+			width: 2.5,
+			height: 6,
+			className: "fill-surface"
+		});
+		$[52] = t27;
+	} else {
+		t27 = $[52];
+	}
+	let t28;
+	if ($[53] !== hatchId) {
+		t28 = /* @__PURE__ */ _jsx("defs", { children: /* @__PURE__ */ _jsx("pattern", {
+			id: hatchId,
+			width: 6,
+			height: 6,
+			patternUnits: "userSpaceOnUse",
+			patternTransform: "rotate(45)",
+			children: t27
+		}) });
+		$[53] = hatchId;
+		$[54] = t28;
+	} else {
+		t28 = $[54];
+	}
+	let t29;
+	if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
+		t29 = /* @__PURE__ */ _jsx("rect", {
+			width: "100%",
+			height: "100%",
+			className: "fill-danger opacity-0 transition-opacity duration-(--duration-fast) ease-(--ease-standard) group-data-[highlight=on]/overflow:opacity-100"
+		});
+		$[55] = t29;
+	} else {
+		t29 = $[55];
+	}
+	const t30 = `url(#${hatchId})`;
+	let t31;
+	if ($[56] !== t30) {
+		t31 = /* @__PURE__ */ _jsx("rect", {
+			width: "100%",
+			height: "100%",
+			fill: t30
+		});
+		$[56] = t30;
+		$[57] = t31;
+	} else {
+		t31 = $[57];
+	}
+	let t32;
+	if ($[58] !== t25 || $[59] !== t26 || $[60] !== t28 || $[61] !== t31) {
+		t32 = /* @__PURE__ */ _jsxs(motion.svg, {
+			"data-slot": "usage-meter-overflow",
+			"data-highlight": t25,
+			style: t26,
+			"aria-hidden": "true",
+			focusable: "false",
+			className: "group/overflow pointer-events-none absolute inset-0 size-full",
+			children: [
+				t28,
+				t29,
+				t31
+			]
+		});
+		$[58] = t25;
+		$[59] = t26;
+		$[60] = t28;
+		$[61] = t31;
+		$[62] = t32;
+	} else {
+		t32 = $[62];
+	}
+	let t33;
+	if ($[63] !== limitX || $[64] !== markerOpacity) {
+		t33 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "usage-meter-limit",
+			"aria-hidden": "true",
+			style: {
+				x: limitX,
+				opacity: markerOpacity
+			},
+			className: "pointer-events-none absolute inset-y-0 -left-px w-0.5 rounded-[1px] bg-foreground"
+		});
+		$[63] = limitX;
+		$[64] = markerOpacity;
+		$[65] = t33;
+	} else {
+		t33 = $[65];
+	}
+	const t34 = "usage-meter-legend";
+	const t35 = "group";
+	const t36 = copy.legendLabel(values);
+	const t37 = "-mx-(--space-2) grid grid-cols-[repeat(auto-fit,minmax(108px,1fr))] gap-0.5";
+	const t38 = items.map((item_0, index_2) => {
+		const isOverage = item_0.id === USAGE_METER_FREE_ID && status === "over";
+		const isFree = item_0.id === USAGE_METER_FREE_ID;
+		return /* @__PURE__ */ _jsxs("button", {
+			type: "button",
+			"data-slot": "usage-meter-legend-item",
+			"data-highlight": highlightOf(item_0.id),
+			"aria-pressed": pinned === item_0.id,
+			"aria-label": `${item_0.label}, ${format(item_0.value)}`,
+			tabIndex: index_2 === tabStopIndex ? 0 : -1,
+			onClick: () => {
+				setRovingIndex(index_2);
+				setPinned((current_0) => current_0 === item_0.id ? null : item_0.id);
+			},
+			onFocus: () => {
+				setRovingIndex(index_2);
+				setFocused(item_0.id);
+			},
+			onBlur: () => setFocused(null),
+			onPointerEnter: (event_2) => {
+				if (event_2.pointerType === "mouse") {
+					setHovered(item_0.id);
+				}
+			},
+			onPointerLeave: (event_3) => {
+				if (event_3.pointerType === "mouse") {
+					setHovered(null);
+				}
+			},
+			className: "grid min-w-0 cursor-pointer justify-items-start gap-0.5 rounded-[calc(var(--radius-control)-6px)] border-0 bg-transparent p-(--space-2) text-left [font:inherit] text-inherit [-webkit-tap-highlight-color:transparent] transition-[background-color,opacity] duration-(--duration-fast) ease-(--ease-standard) hover-fine:bg-surface-muted aria-pressed:bg-surface-muted data-[highlight=off]:opacity-45",
+			children: [/* @__PURE__ */ _jsxs("span", {
+				className: "flex max-w-full min-w-0 items-center gap-(--space-2) text-sm leading-(--leading-body) text-text-secondary",
+				children: [/* @__PURE__ */ _jsx("span", {
+					"aria-hidden": "true",
+					className: "grid size-3 flex-none place-items-center",
+					children: /* @__PURE__ */ _jsx(AnimatePresence, {
+						mode: "popLayout",
+						initial: false,
+						children: isOverage ? /* @__PURE__ */ _jsx(motion.span, {
+							className: "col-start-1 row-start-1 grid place-items-center text-danger",
+							variants: reduceMotion ? fadeVariants : popVariants,
+							initial: "hidden",
+							animate: "shown",
+							exit: "gone",
+							children: /* @__PURE__ */ _jsx(TriangleAlert, {
+								size: LEGEND_ICON_SIZE_PX,
+								strokeWidth: 2
+							})
+						}, "alert") : /* @__PURE__ */ _jsx(motion.span, {
+							className: cn("col-start-1 row-start-1 size-2.5 rounded-[3px]", isFree ? cn(TRACK_COLOR_CLASS_NAME, "shadow-[inset_0_0_0_1px_var(--border-strong)]") : segmentColorClassName(index_2)),
+							variants: reduceMotion ? fadeVariants : popVariants,
+							initial: "hidden",
+							animate: "shown",
+							exit: "gone"
+						}, "swatch")
+					})
+				}), /* @__PURE__ */ _jsx("span", {
+					className: "min-w-0 flex-1",
+					children: /* @__PURE__ */ _jsx(ArcTextSwap, {
+						text: item_0.label,
+						reduceMotion,
+						lineClassName: "truncate"
+					})
+				})]
+			}), /* @__PURE__ */ _jsxs("span", {
+				className: "flex items-baseline gap-1 pl-5 text-base leading-(--leading-body) font-medium text-foreground",
+				children: [/* @__PURE__ */ _jsx(ArcOdometer, {
+					value: item_0.value,
+					decimals,
+					locale,
+					reduceMotion
+				}), unit ? /* @__PURE__ */ _jsx("span", {
+					className: "text-sm font-normal text-text-secondary",
+					children: unit
+				}) : null]
+			})]
+		}, item_0.id);
+	});
+	let t39;
+	if ($[66] !== onLegendKeyDown || $[67] !== t36 || $[68] !== t38) {
+		t39 = /* @__PURE__ */ _jsx("div", {
+			ref: legendRef,
+			"data-slot": t34,
+			role: t35,
+			"aria-label": t36,
+			onKeyDown: onLegendKeyDown,
+			className: t37,
+			children: t38
+		});
+		$[66] = onLegendKeyDown;
+		$[67] = t36;
+		$[68] = t38;
+		$[69] = t39;
+	} else {
+		t39 = $[69];
+	}
+	let t40;
+	if ($[70] !== announced.message) {
+		t40 = /* @__PURE__ */ _jsx("p", {
+			className: "sr-only",
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			children: announced.message
+		});
+		$[70] = announced.message;
+		$[71] = t40;
+	} else {
+		t40 = $[71];
+	}
+	return /* @__PURE__ */ _jsxs("div", {
+		ref: root,
+		"data-slot": "usage-meter",
+		"data-status": status,
+		role: "group",
+		"aria-labelledby": titleId,
+		className: t20,
+		...props,
+		children: [
+			/* @__PURE__ */ _jsxs("div", {
+				className: "flex min-h-7 min-w-0 items-center justify-between gap-(--space-3)",
+				children: [t21, /* @__PURE__ */ _jsx(StatusBadge, {
+					status,
+					text: badge,
+					reduceMotion
+				})]
+			}),
+			/* @__PURE__ */ _jsxs("p", {
+				className: "m-0 flex min-w-0 items-baseline gap-(--space-2)",
+				children: [
+					/* @__PURE__ */ _jsx("span", {
+						className: "sr-only",
+						children: copy.usedSummary(values)
+					}),
+					/* @__PURE__ */ _jsx("span", {
+						"aria-hidden": "true",
+						className: "flex-none font-display text-3xl leading-(--leading-display) font-medium tracking-(--tracking-display)",
+						children: /* @__PURE__ */ _jsx(ArcOdometer, {
+							value: headline,
+							decimals,
+							locale,
+							reduceMotion
+						})
+					}),
+					/* @__PURE__ */ _jsx("span", {
+						"data-slot": "usage-meter-caption",
+						"aria-hidden": "true",
+						className: "min-w-0 flex-1 text-sm text-text-secondary",
+						children: /* @__PURE__ */ _jsx(ArcTextSwap, {
+							text: caption,
+							reduceMotion,
+							lineClassName: "truncate"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ _jsxs("div", {
+				className: "relative py-[5px]",
+				children: [/* @__PURE__ */ _jsxs("div", {
+					ref: trackRef,
+					"data-slot": "usage-meter-track",
+					role: "img",
+					"aria-label": barSummary,
+					"data-active": active ?? undefined,
+					onPointerMove: onTrackMove,
+					onPointerLeave: t22,
+					onPointerUp: onTrackTap,
+					className: t23,
+					children: [t24, t32]
+				}), t33]
+			}),
+			t39,
+			t40
+		]
+	});
+}
+function _temp8(segment_4) {
+	return {
+		id: segmentKey(segment_4.id),
+		label: segment_4.label,
+		value: segment_4.value
+	};
+}
+function _temp7(stop_0) {
+	return stop_0?.();
+}
+function _temp6(segment_3) {
+	return [segment_3.id, segment_3.value];
+}
+function _temp5(stop) {
+	return stop();
+}
+function _temp4(sum_0, amount_0) {
+	return sum_0 + amount_0.get();
+}
+function _temp3(segment_2) {
+	return segment_2.id;
+}
+function _temp2() {
+	return new Map();
+}
+function _temp(sum, segment_0) {
+	return sum + segment_0.value;
+}
+export { UsageMeter };