@jfrader/ui 0.5.0 → 0.6.0

package/dist/{usage-meter-qyQ3rYVv.js → usage-meter-CYvlB6l3.js}

@@ -1,23 +1,25 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./focus-ring-BK5W5_NY.js";
-import { n as r, r as i } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
 import { t as a } from "./use-controlled-state-DpeVQZNR.js";
-import { t as ee } from "./visually-hidden-BJdvqqvn.js";
+import { t as ee } from "./visually-hidden-DgVO3NaB.js";
+import { n as te, r as ne, t as re } from "./usage-model-C0fS47w4.js";
 import { t as o } from "./renderable-DzcIj1Lo.js";
-import { useEffect as s, useId as te, useLayoutEffect as ne, useRef as c, useState as l } from "react";
+import { useEffect as s, useId as ie, useLayoutEffect as ae, useRef as c, useState as l } from "react";
 import { vars as u } from "@jfrader/tokens/vars";
-import { createElement as re } from "@emotion/react";
+import { createElement as oe } from "@emotion/react";
 import { Fragment as d, jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
 //#region src/components/usage-meter/usage-meter.tsx
-var ie = .9, ae = {
+var se = {
 	free: "Remaining",
 	near: "Near limit",
 	over: "Over limit",
 	normal: "Within limit",
 	unavailable: "Unavailable",
 	legend: "Usage categories"
-}, oe = {
+}, ce = {
 	normal: "✓",
 	"near-limit": "!",
 	"over-limit": "!",
@@ -27,7 +29,7 @@ var ie = .9, ae = {
 	"info",
 	"success",
 	"warning"
-], se = e({
+], le = e({
 	display: "grid",
 	gap: u.space[3],
 	minInlineSize: 0,
@@ -36,11 +38,11 @@ var ie = .9, ae = {
 	lineHeight: u.lineHeight.base,
 	color: u.color.text,
 	overflowWrap: "anywhere"
-}), ce = e({ fontWeight: u.fontWeight.medium }), le = e({ color: u.color.textMuted }), ue = e({
+}), ue = e({ fontWeight: u.fontWeight.medium }), de = e({ color: u.color.textMuted }), fe = e({
 	margin: 0,
 	fontSize: "var(--usage-total-size)",
 	fontWeight: u.fontWeight.medium
-}), de = {
+}), pe = {
 	sm: e({
 		"--usage-total-size": u.textSize.md,
 		gap: u.space[2]
@@ -50,14 +52,14 @@ var ie = .9, ae = {
 		"--usage-total-size": u.textSize["3xl"],
 		gap: u.space[4]
 	})
-}, fe = e({
+}, me = e({
 	position: "relative",
 	blockSize: u.space[3],
 	border: `1px solid ${u.color.borderControl}`,
 	backgroundColor: u.color.surfaceInset,
 	borderRadius: u.radius.full,
 	overflow: "hidden",
-	[r]: {
+	[n]: {
 		backgroundColor: "Canvas",
 		borderColor: "CanvasText"
 	}
@@ -70,21 +72,21 @@ var ie = .9, ae = {
 	transitionProperty: "inline-size, inset-inline-start",
 	transitionDuration: u.motion.duration.base,
 	transitionTimingFunction: u.motion.easeStandard,
-	[i]: { transitionDuration: "0s" }
-}), pe = e({
+	[r]: { transitionDuration: "0s" }
+}), he = e({
 	backgroundColor: "var(--usage-tone)",
 	borderInlineEnd: `1px solid ${u.color.surfaceInset}`,
 	"&[data-highlighted=\"true\"]": {
 		outline: `2px solid ${u.color.surfaceInset}`,
 		outlineOffset: "-2px"
 	},
-	[r]: {
+	[n]: {
 		forcedColorAdjust: "none",
 		backgroundColor: "Highlight",
 		borderColor: "CanvasText",
 		outlineColor: "CanvasText"
 	}
-}), me = e({
+}), ge = e({
 	backgroundColor: u.color.surfaceInset,
 	backgroundImage: `repeating-linear-gradient(135deg, transparent, transparent ${u.space[1]}, ${u.color.text} ${u.space[1]}, ${u.color.text} calc(${u.space[1]} + 1px))`,
 	borderInlineStart: `1px solid ${u.color.text}`,
@@ -92,24 +94,24 @@ var ie = .9, ae = {
 		outline: `2px solid ${u.color.text}`,
 		outlineOffset: "-2px"
 	},
-	[r]: {
+	[n]: {
 		forcedColorAdjust: "none",
 		backgroundImage: `repeating-linear-gradient(135deg, Canvas, Canvas ${u.space[1]}, CanvasText ${u.space[1]}, CanvasText calc(${u.space[1]} + 1px))`,
 		borderColor: "CanvasText"
 	}
-}), he = e({
+}), _e = e({
 	"&[data-highlighted=\"true\"]": {
 		outline: `2px solid ${u.color.text}`,
 		outlineOffset: "-2px"
 	},
-	[r]: { "&[data-highlighted=\"true\"]": { outlineColor: "CanvasText" } }
-}), ge = e({
+	[n]: { "&[data-highlighted=\"true\"]": { outlineColor: "CanvasText" } }
+}), ve = e({
 	position: "absolute",
 	insetBlock: 0,
 	insetInlineStart: "var(--usage-start)",
 	borderInlineStart: `2px solid ${u.color.text}`,
-	[r]: { borderColor: "CanvasText" }
-}), _e = e({
+	[n]: { borderColor: "CanvasText" }
+}), ye = e({
 	display: "grid",
 	gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 12rem), 1fr))",
 	gap: u.space[2],
@@ -137,16 +139,16 @@ var ie = .9, ae = {
 		outline: `2px solid ${u.color.text}`,
 		outlineOffset: "-2px"
 	},
-	"&:focus-visible": n,
-	[r]: {
+	"&:focus-visible": t,
+	[n]: {
 		borderColor: "CanvasText",
 		"&:focus-visible": { outlineColor: "Highlight" },
 		"&[aria-pressed=\"true\"]": { outlineColor: "CanvasText" }
 	}
-}), ve = e({
+}), be = e({
 	fontSize: u.textSize.xs,
 	fontWeight: u.fontWeight.medium
-}), ye = e({
+}), xe = e({
 	display: "block",
 	inlineSize: "fit-content",
 	paddingInline: u.space[1],
@@ -154,11 +156,11 @@ var ie = .9, ae = {
 	lineHeight: 1,
 	color: u.color.text,
 	backgroundColor: u.color.surfaceInset,
-	[r]: {
+	[n]: {
 		color: "CanvasText",
 		backgroundColor: "Canvas"
 	}
-}), be = e({
+}), Se = e({
 	marginInlineStart: "auto",
 	color: u.color.textMuted
 });
@@ -177,257 +179,245 @@ function b(e, t) {
 		"--usage-width": `${t * 100}%`
 	};
 }
-function x({ ref: e, label: n, segments: r, limit: i, warnAt: x = ie, size: xe = "md", locale: S, numberFormatOptions: Se, unitLabel: C, labels: Ce, getValueLabel: we, getItemLabel: Te, interactive: w = !0, value: Ee, defaultValue: De = null, onValueChange: Oe, announceChanges: T = !1, statusIcon: ke, slotProps: E, className: Ae, sx: je, "aria-labelledby": D, "aria-describedby": Me, "aria-label": O, ...Ne }) {
-	let k = te(), A = E?.title?.id ?? `${k}-title`, j = E?.status?.id ?? `${k}-status`, M = o(n) && n !== "", N = {
-		...ae,
-		...Ce
-	}, P = new Intl.NumberFormat(S, {
-		maximumFractionDigits: 1,
-		...Se
-	}), F = new Intl.NumberFormat(S, {
-		style: "percent",
-		maximumFractionDigits: 0
-	}), I = new Intl.NumberFormat(S, { maximumFractionDigits: 0 }), L = r.map((e) => ({
+function x({ ref: e, label: t, segments: n, limit: r, warnAt: x = re, size: Ce = "md", locale: we, numberFormatOptions: Te, unitLabel: S, labels: Ee, getValueLabel: De, getItemLabel: Oe, interactive: C = !0, value: ke, defaultValue: Ae = null, onValueChange: je, announceChanges: w = !1, statusIcon: Me, slotProps: T, className: Ne, sx: Pe, "aria-labelledby": E, "aria-describedby": Fe, "aria-label": D, ...Ie }) {
+	let O = ie(), k = T?.title?.id ?? `${O}-title`, A = T?.status?.id ?? `${O}-status`, j = o(t) && t !== "", M = {
+		...se,
+		...Ee
+	}, N = te(we, Te), { amount: P, percent: Le, index: F } = N, I = n.map((e) => ({
 		...e,
 		value: Number.isFinite(e.value) && e.value >= 0 ? e.value : 0
-	})), R = L.reduce((e, t) => e + t.value, 0), z = Number.isFinite(i) && i > 0 && Number.isFinite(R) && Number.isFinite(R / i), B = z ? R > i ? "over-limit" : R >= (Number.isFinite(x) ? Math.min(1, Math.max(0, x)) : ie) * i ? "near-limit" : "normal" : "unavailable", V = {
-		total: R,
-		limit: i,
-		free: z ? Math.max(0, i - R) : 0,
-		over: z ? Math.max(0, R - i) : 0,
-		ratio: z ? R / i : 0,
-		state: B,
-		formattedTotal: Number.isFinite(R) ? P.format(R) : N.unavailable,
-		formattedLimit: z ? P.format(i) : N.unavailable,
-		formattedPercent: z ? F.format(R / i) : N.unavailable
-	}, H = {
-		normal: N.normal,
-		"near-limit": N.near,
-		"over-limit": N.over,
-		unavailable: N.unavailable
-	}[B], U = B === "over-limit" ? `${H}: ${P.format(V.over)}` : H, W = [...L.map((e) => ({
+	})), L = I.reduce((e, t) => e + t.value, 0), R = ne(L, r, {
+		warnAt: x,
+		formats: N,
+		unavailable: M.unavailable
+	}), { state: z } = R, B = z !== "unavailable", V = {
+		normal: M.normal,
+		"near-limit": M.near,
+		"over-limit": M.over,
+		unavailable: M.unavailable
+	}[z], H = z === "over-limit" ? `${V}: ${P.format(R.over)}` : V, U = [...I.map((e) => ({
 		kind: "segment",
 		id: e.id,
 		label: e.label,
 		value: e.value
-	})), ...z ? [{
+	})), ...B ? [{
 		kind: "remainder",
-		label: V.over > 0 ? N.over : N.free,
-		value: V.over > 0 ? V.over : V.free
-	}] : []], [G, Pe] = a(Ee, De, Oe), [Fe, Ie] = l(null), [Le, Re] = l(null), [ze, Be] = l(null), K = c(/* @__PURE__ */ new Map()), q = c(null), Ve = W.find((e) => _(e, G)) ?? null, J = Fe ?? Le ?? Ve, He = W.some((e) => v(e) === ze) ? ze : W[0] && v(W[0]), Ue = c(B), [We, Ge] = l("");
+		label: R.over > 0 ? M.over : M.free,
+		value: R.over > 0 ? R.over : R.free
+	}] : []], [W, Re] = a(ke, Ae, je), [ze, Be] = l(null), [Ve, He] = l(null), [Ue, We] = l(null), G = c(/* @__PURE__ */ new Map()), K = c(null), Ge = U.find((e) => _(e, W)) ?? null, q = ze ?? Ve ?? Ge, Ke = U.some((e) => v(e) === Ue) ? Ue : U[0] && v(U[0]), qe = c(z), [Je, Ye] = l("");
 	s(() => {
-		T && Ue.current !== B && Ge(H), T || Ge(""), Ue.current = B;
+		w && qe.current !== z && Ye(V), w || Ye(""), qe.current = z;
 	}, [
-		B,
-		H,
-		T
+		z,
+		V,
+		w
 	]), s(() => {
-		process.env.NODE_ENV !== "production" && (r.some((e) => !e.id) || new Set(r.map((e) => e.id)).size !== r.length) && console.warn("UsageMeter: segment ids must be nonempty and unique.");
-	}, [r]), s(() => {
-		process.env.NODE_ENV !== "production" && z && !M && !O && !D && console.warn("UsageMeter: the meter needs an accessible name (label, ariaLabel, or labelledBy).");
+		process.env.NODE_ENV !== "production" && (n.some((e) => !e.id) || new Set(n.map((e) => e.id)).size !== n.length) && console.warn("UsageMeter: segment ids must be nonempty and unique.");
+	}, [n]), s(() => {
+		process.env.NODE_ENV !== "production" && B && !j && !D && !E && console.warn("UsageMeter: the meter needs an accessible name (label, ariaLabel, or labelledBy).");
 	}, [
-		z,
-		M,
-		O,
-		D
-	]), ne(() => {
-		let e = q.current;
-		q.current = null, w && e && !W.some((t) => v(t) === e.key) && W.length && K.current.get(v(W[Math.min(e.index, W.length - 1)]))?.focus();
+		B,
+		j,
+		D,
+		E
+	]), ae(() => {
+		let e = K.current;
+		K.current = null, C && e && !U.some((t) => v(t) === e.key) && U.length && G.current.get(v(U[Math.min(e.index, U.length - 1)]))?.focus();
 	});
-	let Ke = (e) => {
-		_(G, e) || Pe(e);
-	}, Y = z ? Math.max(i, R) : 1, X = 0, qe = we?.(V) ?? `${V.formattedTotal} of ${V.formattedLimit}, ${V.formattedPercent}. ${U}`, Z = ke?.(B), Q = E?.root, { css: Je, className: Ye, ...Xe } = Q ?? {}, $ = E?.track;
-	return /* @__PURE__ */ f(t, {
-		className: [Ye, Ae].filter(Boolean).join(" ") || void 0,
+	let J = (e) => {
+		_(W, e) || Re(e);
+	}, Y = B ? Math.max(r, L) : 1, X = 0, Xe = De?.(R) ?? `${R.formattedTotal} of ${R.formattedLimit}, ${R.formattedPercent}. ${H}`, Z = Me?.(z), Q = T?.root, { css: Ze, className: Qe, ...$e } = Q ?? {}, $ = T?.track;
+	return /* @__PURE__ */ f(i, {
+		className: [Qe, Ne].filter(Boolean).join(" ") || void 0,
 		styles: [
-			se,
-			de[xe],
-			Je
+			le,
+			pe[Ce],
+			Ze
 		],
-		sx: je,
-		children: (t) => /* @__PURE__ */ p("div", {
-			...Xe,
-			...Ne,
+		sx: Pe,
+		children: (n) => /* @__PURE__ */ p("div", {
+			...$e,
+			...Ie,
 			ref: e,
 			role: "group",
 			"data-ui": "usage-meter",
-			"data-state": B,
-			"data-size": xe,
-			className: t,
-			"aria-label": O ?? Q?.["aria-label"],
-			"aria-labelledby": y(D, Q?.["aria-labelledby"], M && A),
-			"aria-describedby": y(Me, Q?.["aria-describedby"], j),
+			"data-state": z,
+			"data-size": Ce,
+			className: n,
+			"aria-label": D ?? Q?.["aria-label"],
+			"aria-labelledby": y(E, Q?.["aria-labelledby"], j && k),
+			"aria-describedby": y(Fe, Q?.["aria-describedby"], A),
 			children: [
-				M && /* @__PURE__ */ f("span", {
-					...E?.title,
-					id: A,
+				j && /* @__PURE__ */ f("span", {
+					...T?.title,
+					id: k,
 					"data-ui": "usage-meter-title",
-					css: [ce, E?.title?.css],
-					children: n
+					css: [ue, T?.title?.css],
+					children: t
 				}),
 				/* @__PURE__ */ p("span", {
-					...E?.status,
-					id: j,
+					...T?.status,
+					id: A,
 					"data-ui": "usage-meter-status",
-					css: [le, E?.status?.css],
+					css: [de, T?.status?.css],
 					children: [
 						/* @__PURE__ */ f("span", {
 							"aria-hidden": "true",
-							children: o(Z) && Z !== "" ? Z : oe[B]
+							children: o(Z) && Z !== "" ? Z : ce[z]
 						}),
 						" ",
-						U
+						H
 					]
 				}),
 				/* @__PURE__ */ p("p", {
-					...E?.total,
+					...T?.total,
 					"data-ui": "usage-meter-total",
-					css: [ue, E?.total?.css],
-					children: [z ? /* @__PURE__ */ p(d, { children: [
-						V.formattedTotal,
+					css: [fe, T?.total?.css],
+					children: [B ? /* @__PURE__ */ p(d, { children: [
+						R.formattedTotal,
 						" / ",
-						V.formattedLimit,
+						R.formattedLimit,
 						" · ",
-						V.formattedPercent
-					] }) : V.formattedTotal, o(C) && C !== "" && /* @__PURE__ */ p("span", {
+						R.formattedPercent
+					] }) : R.formattedTotal, o(S) && S !== "" && /* @__PURE__ */ p("span", {
 						"data-ui": "usage-meter-unit",
-						children: [" ", C]
+						children: [" ", S]
 					})]
 				}),
 				/* @__PURE__ */ p("div", {
 					...$,
 					"data-ui": "usage-meter-track",
-					role: z ? "meter" : void 0,
-					"aria-label": $?.["aria-label"] ?? (M ? void 0 : O ?? Q?.["aria-label"]),
-					"aria-labelledby": y($?.["aria-labelledby"], M && A, !M && D, !M && Q?.["aria-labelledby"]),
-					"aria-describedby": y($?.["aria-describedby"], j),
-					"aria-valuemin": z ? 0 : void 0,
-					"aria-valuemax": z ? i : void 0,
-					"aria-valuenow": z ? Math.min(R, i) : void 0,
-					"aria-valuetext": z ? $?.["aria-valuetext"] ?? qe : void 0,
-					css: [fe, $?.css],
+					role: B ? "meter" : void 0,
+					"aria-label": $?.["aria-label"] ?? (j ? void 0 : D ?? Q?.["aria-label"]),
+					"aria-labelledby": y($?.["aria-labelledby"], j && k, !j && E, !j && Q?.["aria-labelledby"]),
+					"aria-describedby": y($?.["aria-describedby"], A),
+					"aria-valuemin": B ? 0 : void 0,
+					"aria-valuemax": B ? r : void 0,
+					"aria-valuenow": B ? Math.min(L, r) : void 0,
+					"aria-valuetext": B ? $?.["aria-valuetext"] ?? Xe : void 0,
+					css: [me, $?.css],
 					children: [
-						z && L.map((e, t) => {
+						B && I.map((e, t) => {
 							let n = X;
-							return X += e.value / Y, /* @__PURE__ */ re("span", {
-								...E?.segment,
+							return X += e.value / Y, /* @__PURE__ */ oe("span", {
+								...T?.segment,
 								key: e.id,
 								"aria-hidden": "true",
 								"data-ui": "usage-meter-segment",
-								"data-highlighted": _(J, {
+								"data-highlighted": _(q, {
 									kind: "segment",
 									id: e.id
 								}),
 								style: {
-									...E?.segment?.style,
+									...T?.segment?.style,
 									...b(n, e.value / Y),
 									"--usage-tone": u.color[e.tone ?? m[t % m.length]]
 								},
 								css: [
 									h,
-									pe,
-									E?.segment?.css
+									he,
+									T?.segment?.css
 								]
 							}, e.value / Y >= .08 && /* @__PURE__ */ f("span", {
-								css: ye,
-								children: I.format(t + 1)
+								css: xe,
+								children: F.format(t + 1)
 							}));
 						}),
-						z && V.free > 0 && /* @__PURE__ */ f("span", {
+						B && R.free > 0 && /* @__PURE__ */ f("span", {
 							"aria-hidden": "true",
 							"data-ui": "usage-meter-remainder",
-							"data-highlighted": J?.kind === "remainder",
-							style: b(R / Y, V.free / Y),
-							css: [h, he]
+							"data-highlighted": q?.kind === "remainder",
+							style: b(L / Y, R.free / Y),
+							css: [h, _e]
 						}),
-						z && V.over > 0 && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("span", {
-							...E?.overage,
+						B && R.over > 0 && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("span", {
+							...T?.overage,
 							"aria-hidden": "true",
 							"data-ui": "usage-meter-overage",
-							"data-highlighted": J?.kind === "remainder",
+							"data-highlighted": q?.kind === "remainder",
 							style: {
-								...E?.overage?.style,
-								...b(i / Y, V.over / Y)
+								...T?.overage?.style,
+								...b(r / Y, R.over / Y)
 							},
 							css: [
 								h,
-								me,
-								E?.overage?.css
+								ge,
+								T?.overage?.css
 							]
 						}), /* @__PURE__ */ f("span", {
-							...E?.limit,
+							...T?.limit,
 							"aria-hidden": "true",
 							"data-ui": "usage-meter-limit",
 							style: {
-								...E?.limit?.style,
-								...b(i / Y, 0)
+								...T?.limit?.style,
+								...b(r / Y, 0)
 							},
-							css: [ge, E?.limit?.css]
+							css: [ve, T?.limit?.css]
 						})] })
 					]
 				}),
 				/* @__PURE__ */ f("ul", {
-					...E?.legend,
+					...T?.legend,
 					"data-ui": "usage-meter-legend",
-					"aria-label": E?.legend?.["aria-label"] ?? N.legend,
-					css: [_e, E?.legend?.css],
-					children: W.map((e, t) => {
-						let n = v(e), r = _(Ve, e), a = /* @__PURE__ */ p(d, { children: [
+					"aria-label": T?.legend?.["aria-label"] ?? M.legend,
+					css: [ye, T?.legend?.css],
+					children: U.map((e, t) => {
+						let n = v(e), i = _(Ge, e), a = /* @__PURE__ */ p(d, { children: [
 							/* @__PURE__ */ p("span", {
-								css: ve,
-								children: [e.kind === "segment" ? I.format(t + 1) : "—", r && /* @__PURE__ */ f("span", {
+								css: be,
+								children: [e.kind === "segment" ? F.format(t + 1) : "—", i && /* @__PURE__ */ f("span", {
 									"aria-hidden": "true",
 									children: " ◆"
 								})]
 							}),
 							/* @__PURE__ */ f("span", { children: e.label }),
 							/* @__PURE__ */ f("span", {
-								css: be,
+								css: Se,
 								children: P.format(e.value)
 							}),
-							z && /* @__PURE__ */ f("span", {
+							B && /* @__PURE__ */ f("span", {
 								css: ee,
-								children: F.format(e.value / i)
+								children: Le.format(e.value / r)
 							})
 						] });
-						return /* @__PURE__ */ f("li", { children: w ? /* @__PURE__ */ f("button", {
-							...E?.item,
+						return /* @__PURE__ */ f("li", { children: C ? /* @__PURE__ */ f("button", {
+							...T?.item,
 							type: "button",
 							"data-ui": "usage-meter-item",
-							"aria-pressed": r,
-							"aria-label": E?.item?.["aria-label"] ?? Te?.(e, V),
-							tabIndex: n === He ? 0 : -1,
-							css: [g, E?.item?.css],
+							"aria-pressed": i,
+							"aria-label": T?.item?.["aria-label"] ?? Oe?.(e, R),
+							tabIndex: n === Ke ? 0 : -1,
+							css: [g, T?.item?.css],
 							ref: (e) => {
-								if (e) return K.current.set(n, e), () => {
-									e.ownerDocument.activeElement === e && (q.current = {
+								if (e) return G.current.set(n, e), () => {
+									e.ownerDocument.activeElement === e && (K.current = {
 										key: n,
 										index: t
-									}), K.current.delete(n);
+									}), G.current.delete(n);
 								};
 							},
 							onClick: (t) => {
-								E?.item?.onClick?.(t), t.defaultPrevented || Ke(r ? null : e.kind === "segment" ? {
+								T?.item?.onClick?.(t), t.defaultPrevented || J(i ? null : e.kind === "segment" ? {
 									kind: "segment",
 									id: e.id
 								} : { kind: "remainder" });
 							},
 							onMouseEnter: (t) => {
-								E?.item?.onMouseEnter?.(t), t.defaultPrevented || Ie(e);
+								T?.item?.onMouseEnter?.(t), t.defaultPrevented || Be(e);
 							},
 							onMouseLeave: (e) => {
-								E?.item?.onMouseLeave?.(e), Ie(null);
+								T?.item?.onMouseLeave?.(e), Be(null);
 							},
 							onFocus: (t) => {
-								E?.item?.onFocus?.(t), Re(e), Be(n);
+								T?.item?.onFocus?.(t), He(e), We(n);
 							},
 							onBlur: (e) => {
-								E?.item?.onBlur?.(e), Re(null);
+								T?.item?.onBlur?.(e), He(null);
 							},
 							onKeyDown: (e) => {
-								if (E?.item?.onKeyDown?.(e), e.defaultPrevented) return;
+								if (T?.item?.onKeyDown?.(e), e.defaultPrevented) return;
 								if (e.key === "Escape") {
-									G != null && (e.preventDefault(), Ke(null));
+									W != null && (e.preventDefault(), J(null));
 									return;
 								}
 								let n = e.currentTarget.ownerDocument.defaultView?.getComputedStyle(e.currentTarget).direction === "rtl", r = {
@@ -435,24 +425,24 @@ function x({ ref: e, label: n, segments: r, limit: i, warnAt: x = ie, size: xe =
 									ArrowLeft: n ? 1 : -1,
 									ArrowDown: 1,
 									ArrowUp: -1
-								}[e.key], i = e.key === "Home" ? 0 : e.key === "End" ? W.length - 1 : r === void 0 ? void 0 : (t + r + W.length) % W.length;
-								i !== void 0 && (e.preventDefault(), K.current.get(v(W[i]))?.focus());
+								}[e.key], i = e.key === "Home" ? 0 : e.key === "End" ? U.length - 1 : r === void 0 ? void 0 : (t + r + U.length) % U.length;
+								i !== void 0 && (e.preventDefault(), G.current.get(v(U[i]))?.focus());
 							},
 							children: a
 						}) : /* @__PURE__ */ f("span", {
 							"data-ui": "usage-meter-item",
-							css: [g, E?.item?.css],
-							className: E?.item?.className,
+							css: [g, T?.item?.css],
+							className: T?.item?.className,
 							children: a
 						}) }, n);
 					})
 				}),
-				T && /* @__PURE__ */ f("span", {
+				w && /* @__PURE__ */ f("span", {
 					"data-ui": "usage-meter-announcement",
 					"aria-live": "polite",
 					"aria-atomic": "true",
 					css: ee,
-					children: We
+					children: Je
 				})
 			]
 		})

package/dist/usage-meter.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as UsageMeter } from "./usage-meter-qyQ3rYVv.js";
+export { t as UsageMeter } from "./usage-meter-CYvlB6l3.js";

package/dist/usage-model-C0fS47w4.js

@@ -0,0 +1,32 @@
+'use client';
+//#region src/components/usage-meter/usage-model.ts
+var e = .9;
+function t(e, t) {
+	return {
+		amount: new Intl.NumberFormat(e, {
+			maximumFractionDigits: 1,
+			...t
+		}),
+		percent: new Intl.NumberFormat(e, {
+			style: "percent",
+			maximumFractionDigits: 0
+		}),
+		index: new Intl.NumberFormat(e, { maximumFractionDigits: 0 })
+	};
+}
+function n(t, n, { warnAt: r = e, formats: i, unavailable: a, formatAmount: o }) {
+	let s = o ?? ((e) => i.amount.format(e)), c = Number.isFinite(n) && n > 0 && Number.isFinite(t) && Number.isFinite(t / n), l = c ? t > n ? "over-limit" : t >= (Number.isFinite(r) ? Math.min(1, Math.max(0, r)) : .9) * n ? "near-limit" : "normal" : "unavailable";
+	return {
+		total: t,
+		limit: n,
+		free: c ? Math.max(0, n - t) : 0,
+		over: c ? Math.max(0, t - n) : 0,
+		ratio: c ? t / n : 0,
+		state: l,
+		formattedTotal: Number.isFinite(t) ? s(t) : a,
+		formattedLimit: c ? s(n) : a,
+		formattedPercent: c ? i.percent.format(t / n) : a
+	};
+}
+//#endregion
+export { t as n, n as r, e as t };