@botiverse/raft-ui 0.49.0 → 0.50.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [0.50.0](https://github.com/botiverse/raft-design/compare/v0.49.0...v0.50.0) (2026-10-29)
+
+### Design System
+
+- **Usage shows what is used:** a Meter fills with what is used, not what is left, and its text always says it ("62% used · resets in 3h", never a bare "62%"). It turns `warning` from 80% used, the same point as 20% left before, so the same data keeps its colour; used up is a full `warning` bar with "Used up". A remaining amount can go in a tooltip ("378 GB free of 994 GB"). Decided on 2026-10-29 (stdrc). ([#879](https://github.com/botiverse/raft-design/pull/879))
+  - Docs: https://raft-design.botiverse.build/components/meter/
+
+### Added
+
+- **Meter `warnAt`:** the share used (0–1, default 0.8) from which it warns. ([#879](https://github.com/botiverse/raft-design/pull/879))
+
+### Changed
+
+- **Meter** draws `used` of `max`; `aria-valuenow` is `used`. `low` (amount left) is deprecated but still honoured: `low={n}` is `warnAt={1 - n / max}`. ([#879](https://github.com/botiverse/raft-design/pull/879))
+
+### Breaking
+
+- **Meter `data-level`** is `normal` / `high` / `full` (was `plenty` / `low` / `empty`). Update selectors and tests that read it. ([#879](https://github.com/botiverse/raft-design/pull/879))
+
 ## [0.49.0](https://github.com/botiverse/raft-design/compare/v0.48.0...v0.49.0) (2026-10-29)
 
 ### Design System

package/dist/wip.d.mts

@@ -853,12 +853,8 @@ export declare function ListRowSkeleton({ variant, leading, description, classNa
 //#endregion
 //#region src/components/meter/meter.d.ts
 declare const meter: import("tailwind-variants/lite").TVReturnType<{
-  level: {
-    plenty: {};
-    low: {
-      root: string[];
-    };
-    empty: {
+  warning: {
+    true: {
       root: string[];
     };
   };
@@ -874,12 +870,8 @@ declare const meter: import("tailwind-variants/lite").TVReturnType<{
   track: string[];
   indicator: string[];
 }, undefined, {
-  level: {
-    plenty: {};
-    low: {
-      root: string[];
-    };
-    empty: {
+  warning: {
+    true: {
       root: string[];
     };
   };
@@ -895,12 +887,8 @@ declare const meter: import("tailwind-variants/lite").TVReturnType<{
   track: string[];
   indicator: string[];
 }, import("tailwind-variants/lite").TVReturnTypeLike<{
-  level: {
-    plenty: {};
-    low: {
-      root: string[];
-    };
-    empty: {
+  warning: {
+    true: {
       root: string[];
     };
   };
@@ -919,7 +907,7 @@ declare const meter: import("tailwind-variants/lite").TVReturnType<{
 type MeterProps = Omit<StyledProps<Meter$1.Root.Props>, "value" | "min" | "max" | "aria-valuetext" | "getAriaValueText" | "format" | "locale"> & Pick<VariantProps<typeof meter>, "size"> & {
   /**
    * How much of the allowance is used, as the provider reports it, from 0 to
-   * `max`. The meter draws and announces what is left: `max - used`.
+   * `max`. The bar fills with it, and it is the meter's `aria-valuenow`.
    */
   used: number;
   /**
@@ -928,25 +916,31 @@ type MeterProps = Omit<StyledProps<Meter$1.Root.Props>, "value" | "min" | "max"
    */
   max?: number;
   /**
-   * When as much as this is left, or less, the meter is low and takes the
-   * warning color ("at or below", unlike HTML's `<meter low>`, which is
-   * strictly below). In the units of `max`, clamped to 0 to `max`.
-   * @default 20% of `max`
+   * The share of `max` used, from 0 to 1, at which the meter takes the
+   * warning color: at or above it. Clamped to 0 to 1.
+   * @default 0.8
+   */
+  warnAt?: number;
+  /**
+   * @deprecated Use `warnAt`, the share used: `low={20}` of 100 is
+   * `warnAt={0.8}`. The amount left, in the units of `max`, at or below
+   * which the meter warns. Ignored when `warnAt` is set.
    */
   low?: number;
   /**
-   * What is left, in words: "38% left · resets in 3h". `MeterValue` shows it,
-   * and it is the meter's `aria-valuetext`, so the caller writes it once.
+   * What is used, in words, with the word: "62% used · resets in 3h".
+   * `MeterValue` shows it, and it is the meter's `aria-valuetext`, so the
+   * caller writes it once.
    */
   valueText: string;
 };
 /**
- * How much of an allowance is left, such as a usage limit that resets. Takes
- * what is `used`; the bar shows what is left, full to start and draining.
- * The info fill, like Progress, until `low` or less is left, then the warning
- * color; never danger, and no success color at full.
+ * How much of an allowance is used, such as a usage limit that resets. The bar
+ * fills as it is used: the info fill, like Progress, until `warnAt` of `max`
+ * is used (80% unless set), then the warning color, and a full warning bar
+ * when used up; never danger, and no success color.
  */
-export declare function Meter({ size, used, max, low, valueText, className, ...props }: MeterProps): import("react").JSX.Element;
+export declare function Meter({ size, used, max, warnAt, low, valueText, className, ...props }: MeterProps): import("react").JSX.Element;
 type MeterHeaderProps = ComponentPropsWithRef<"div">;
 export declare function MeterHeader({ className, ...props }: MeterHeaderProps): import("react").JSX.Element;
 type MeterLabelProps = StyledProps<Meter$1.Label.Props>;

package/dist/wip.mjs

@@ -2008,8 +2008,6 @@ const meter = tv({
 		root: [
 			"group/meter grid w-full min-w-0 gap-1.5",
 			"[--meter-indicator:var(--info)]",
-			"[--meter-track:var(--fill-muted)]",
-			"[--meter-track-edge:transparent]",
 			"[--meter-value:var(--foreground-muted)]",
 			"font-sans"
 		],
@@ -2017,8 +2015,7 @@ const meter = tv({
 		label: ["min-w-0 truncate", "text-footnote font-semibold text-foreground"],
 		value: ["shrink-0 text-right tabular-nums", "text-footnote text-(--meter-value)"],
 		track: [
-			"relative w-full overflow-hidden bg-(--meter-track)",
-			"inset-ring-1 inset-ring-(--meter-track-edge)",
+			"relative w-full overflow-hidden bg-(--fill-muted)",
 			"h-2 group-data-[size=sm]/meter:h-1.5",
 			"rounded-sticker"
 		],
@@ -2029,22 +2026,14 @@ const meter = tv({
 		]
 	},
 	variants: {
-		level: {
-			plenty: {},
-			low: { root: ["[--meter-indicator:var(--warning)]", "[--meter-value:var(--warning-strong)]"] },
-			empty: { root: [
-				"[--meter-track:var(--warning-muted)]",
-				"[--meter-track-edge:var(--warning)]",
-				"[--meter-value:var(--warning-strong)]"
-			] }
-		},
+		warning: { true: { root: ["[--meter-indicator:var(--warning)]", "[--meter-value:var(--warning-strong)]"] } },
 		size: {
 			sm: {},
 			md: {}
 		}
 	},
 	defaultVariants: {
-		level: "plenty",
+		warning: false,
 		size: "md"
 	}
 });
@@ -2053,18 +2042,19 @@ function clamp(value, min, max) {
 	return Math.min(max, Math.max(min, Number.isNaN(value) ? min : value));
 }
 /**
-* How much of an allowance is left, such as a usage limit that resets. Takes
-* what is `used`; the bar shows what is left, full to start and draining.
-* The info fill, like Progress, until `low` or less is left, then the warning
-* color; never danger, and no success color at full.
+* How much of an allowance is used, such as a usage limit that resets. The bar
+* fills as it is used: the info fill, like Progress, until `warnAt` of `max`
+* is used (80% unless set), then the warning color, and a full warning bar
+* when used up; never danger, and no success color.
 */
-function Meter({ size = "md", used, max = 100, low, valueText, className, ...props }) {
-	const left = max - clamp(used, 0, max);
-	const lowAt = clamp(low ?? max * .2, 0, max);
-	const level = left <= 0 ? "empty" : left <= lowAt ? "low" : "plenty";
+function Meter({ size = "md", used, max = 100, warnAt, low, valueText, className, ...props }) {
+	const value = clamp(used, 0, max);
+	const share = max > 0 ? value / max : 1;
+	const warnFrom = warnAt !== void 0 ? clamp(warnAt, 0, 1) : low !== void 0 && max > 0 ? 1 - clamp(low, 0, max) / max : .8;
+	const level = share >= 1 ? "full" : share >= warnFrom ? "high" : "normal";
 	const { root } = meter({
 		size,
-		level
+		warning: level !== "normal"
 	});
 	return /* @__PURE__ */ jsx(MeterTextContext.Provider, {
 		value: valueText,
@@ -2074,7 +2064,7 @@ function Meter({ size = "md", used, max = 100, low, valueText, className, ...pro
 			"data-level": level,
 			min: 0,
 			max,
-			value: left,
+			value,
 			"aria-valuetext": valueText,
 			className: root({ className }),
 			...props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",