@botiverse/raft-ui 0.48.0 → 0.50.0

package/dist/tokens.json

@@ -1567,6 +1567,51 @@
           }
         }
       }
+    },
+    "cell-hover": {
+      "$description": "A list cell's hover and its menu-open fill (lib/list-cell.ts), drawn on the cell's inset shape. fill-subtle in light. In dark it steps up to 7.5% ink, so the rounded shape reads on a dark surface, where fill-subtle's 3% barely shows. Rows only: the global tiers don't change.",
+      "$value": "{fill.subtle}",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.9843, 0.004, 106.47],
+              "alpha": 0.075
+            }
+          }
+        }
+      }
+    },
+    "cell-press": {
+      "$description": "A list cell's press fill, the same with a mouse and on a touch screen. fill-medium in light. In dark 12% ink, a clear step over the cell's dark hover.",
+      "$value": "{fill.medium}",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.9843, 0.004, 106.47],
+              "alpha": 0.12
+            }
+          }
+        }
+      }
+    },
+    "cell-selected": {
+      "$description": "A list cell that is selected or open beside its list (an active InboxItem, a selected ListRow), and the located highlight on a cell. info-soft in light. In dark the cyan at 38% instead of 18%, so a selected cell stands out from a hovered one.",
+      "$value": "{info.soft}",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.452, 0.0862, 225.67],
+              "alpha": 0.38
+            }
+          }
+        }
+      }
     }
   },
   "line": {

package/dist/wip.d.mts

@@ -1,4 +1,4 @@
-import { $ as MessageListJumpPillProps, Ai as PreviewCardFooter, As as TextLinkProps, B as DragMessages, C as InboxItemProps, Ca as MobileNavServerPopoverRowLabelProps, Ci as PreviewCardBodyProps, Da as PopoverActionsProps, Ea as PopoverActions, Fi as PreviewCardMetaProps, Fs as DialogSheetContentProps, G as dragMessages, H as DragPlace, Hs as DialogContentProps, Is as Dialog, J as MessageListJumpPill, K as MessageListJumpControls, Ks as DialogFooterNote, Ma as PopoverBody, Ms as DialogCommit, Na as PopoverBodyProps, Ns as DialogCommitProps, Oi as PreviewCardEyebrow, Pi as PreviewCardMeta, Ps as DialogSheetContent, Q as MessageListJumpPillGroupProps, R as DEFAULT_DRAG_MESSAGES, Sa as MobileNavServerPopoverRowLabel, Si as PreviewCardBody, To as DropdownMenuLinkItemProps, U as createDragAnnouncements, V as DragNamed, W as dragInstructions, X as MessageListJumpPillDismissProps, Y as MessageListJumpPillDismiss, Z as MessageListJumpPillGroup, _a as MobileNavServerPopoverRow, _t as MessageQuotedPreviewAuthorDelegatedByProps, aa as MobileNavServerPopover, ac as DialogSheetBackProps, ba as MobileNavServerPopoverRowDescription, bc as DataAttributes, ca as MobileNavServerPopoverDestination, ci as AvatarGroupButton, da as MobileNavServerPopoverDestinationsProps, dn as MessageReferenceReadMarkProps, dr as MessageItemDelegatedBy, fa as MobileNavServerPopoverGroup, fr as MessageItemDelegatedByButton, ga as MobileNavServerPopoverProps, gr as MessageItemDelegatedByProps, gt as MessageQuotedPreviewAuthorDelegatedBy, ha as MobileNavServerPopoverListProps, hc as ButtonProps, hr as MessageItemDelegatedByNameProps, ia as MobileNavServerItemProps, ic as DialogSheetBack, ji as PreviewCardFooterProps, ki as PreviewCardEyebrowProps, la as MobileNavServerPopoverDestinationProps, lc as DialogTitleProps, li as AvatarGroupButtonProps, lr as MessageItemDelegatedAvatar, ma as MobileNavServerPopoverList, mr as MessageItemDelegatedByName, nn as MessageReferenceIcon, oa as MobileNavServerPopoverContent, pa as MobileNavServerPopoverGroupProps, pr as MessageItemDelegatedByButtonProps, q as MessageListJumpControlsProps, qs as DialogFooterNoteProps, ra as MobileNavServerItem, rn as MessageReferenceIconProps, sa as MobileNavServerPopoverContentProps, u as InboxItemDensity, ua as MobileNavServerPopoverDestinations, uc as DialogTrigger, un as MessageReferenceReadMark, ur as MessageItemDelegatedAvatarProps, va as MobileNavServerPopoverRowBody, vi as PreviewCardActions, wa as MobileNavServerPopoverRowProps, wo as DropdownMenuLinkItem, xa as MobileNavServerPopoverRowDescriptionProps, xc as StyledProps, ya as MobileNavServerPopoverRowBodyProps, yc as VariantProps, yi as PreviewCardActionsProps, ys as ListRowProps, z as DragAnnouncementSource, zs as DialogClose } from "./inbox-item-VkYFHY84.mjs";
+import { $ as MessageListJumpPillProps, Ai as PreviewCardFooter, As as TextLinkProps, B as DragMessages, C as InboxItemProps, Ca as MobileNavServerPopoverRowLabelProps, Ci as PreviewCardBodyProps, Da as PopoverActionsProps, Ea as PopoverActions, Fi as PreviewCardMetaProps, Fs as DialogSheetContentProps, G as dragMessages, H as DragPlace, Hs as DialogContentProps, Is as Dialog, J as MessageListJumpPill, K as MessageListJumpControls, Ks as DialogFooterNote, Ma as PopoverBody, Ms as DialogCommit, Na as PopoverBodyProps, Ns as DialogCommitProps, Oi as PreviewCardEyebrow, Pi as PreviewCardMeta, Ps as DialogSheetContent, Q as MessageListJumpPillGroupProps, R as DEFAULT_DRAG_MESSAGES, Sa as MobileNavServerPopoverRowLabel, Si as PreviewCardBody, To as DropdownMenuLinkItemProps, U as createDragAnnouncements, V as DragNamed, W as dragInstructions, X as MessageListJumpPillDismissProps, Y as MessageListJumpPillDismiss, Z as MessageListJumpPillGroup, _a as MobileNavServerPopoverRow, _t as MessageQuotedPreviewAuthorDelegatedByProps, aa as MobileNavServerPopover, ac as DialogSheetBackProps, ba as MobileNavServerPopoverRowDescription, bc as DataAttributes, ca as MobileNavServerPopoverDestination, ci as AvatarGroupButton, da as MobileNavServerPopoverDestinationsProps, dn as MessageReferenceReadMarkProps, dr as MessageItemDelegatedBy, fa as MobileNavServerPopoverGroup, fr as MessageItemDelegatedByButton, ga as MobileNavServerPopoverProps, gr as MessageItemDelegatedByProps, gt as MessageQuotedPreviewAuthorDelegatedBy, ha as MobileNavServerPopoverListProps, hc as ButtonProps, hr as MessageItemDelegatedByNameProps, ia as MobileNavServerItemProps, ic as DialogSheetBack, ji as PreviewCardFooterProps, ki as PreviewCardEyebrowProps, la as MobileNavServerPopoverDestinationProps, lc as DialogTitleProps, li as AvatarGroupButtonProps, lr as MessageItemDelegatedAvatar, ma as MobileNavServerPopoverList, mr as MessageItemDelegatedByName, nn as MessageReferenceIcon, oa as MobileNavServerPopoverContent, pa as MobileNavServerPopoverGroupProps, pr as MessageItemDelegatedByButtonProps, q as MessageListJumpControlsProps, qs as DialogFooterNoteProps, ra as MobileNavServerItem, rn as MessageReferenceIconProps, sa as MobileNavServerPopoverContentProps, u as InboxItemDensity, ua as MobileNavServerPopoverDestinations, uc as DialogTrigger, un as MessageReferenceReadMark, ur as MessageItemDelegatedAvatarProps, va as MobileNavServerPopoverRowBody, vi as PreviewCardActions, wa as MobileNavServerPopoverRowProps, wo as DropdownMenuLinkItem, xa as MobileNavServerPopoverRowDescriptionProps, xc as StyledProps, ya as MobileNavServerPopoverRowBodyProps, yc as VariantProps, yi as PreviewCardActionsProps, ys as ListRowProps, z as DragAnnouncementSource, zs as DialogClose } from "./inbox-item-B4nNvpp1.mjs";
 import { CSSProperties, ComponentProps, ComponentPropsWithRef, ReactNode, RefObject } from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
@@ -822,7 +822,8 @@ type InboxItemSkeletonListProps = useRender.ComponentProps<"div"> & InboxItemSke
 /**
  * The list of `InboxItemSkeleton` rows that stands in for a list of
  * `InboxItem` rows while it loads, with nothing between or around the rows
- * that the loaded list doesn't have (no gap, no border, no card). Renders
+ * that the loaded list doesn't have (no border, no card): only the list's
+ * 2px gap, which the loaded list has too (design/patterns/lists.md). Renders
  * `count` rows of the given shape, or its children, once `delay` (1 second by
  * default) has passed. It isn't `aria-busy` itself: it goes away when the
  * content arrives, so mark the region that stays, such as the list's panel or
@@ -852,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[];
     };
   };
@@ -873,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[];
     };
   };
@@ -894,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[];
     };
   };
@@ -918,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;
   /**
@@ -927,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

@@ -1,5 +1,5 @@
 import { cn } from "./cn.mjs";
-import { $ as MessageListJumpPillGroup, $n as PreviewCardActions, A as useDragSensors, Aa as useThemeScopeProps, Ai as Checkbox, B as keepGrabInside, Bi as ListRowMeta, Bn as RadioGroup, Br as MouseOnlyPointerSensor, C as DragRefusalHint, Ca as Button$1, Cr as MobileNavServerPopoverRowLabel, D as MOUSE_DRAG_DISTANCE_PX, Da as OverlayLayerProvider, E as DragRemeasure, Ea as defaultNativeButton, F as DRAG_SIBLING_TRANSITION, Fi as ListRowBottom, G as DEFAULT_DRAG_MESSAGES, Gi as TooltipContent, Gn as InputGroupAddon, Gr as useMouseOnlyPointerSensor, Hi as ListRowTop, Hn as RadioGroupItem, Hr as TOUCH_DRAG_HOLD_MS, I as DROP_GLIDE, J as dragInstructions, Ji as TooltipTrigger, Jn as measureContent, K as SILENT_DRAG_ANNOUNCEMENTS, Kn as InputGroupInput, L as DragLift, Li as ListRowDescription, Ln as AvatarGroupButton, Lt as MessageReferenceReadMark, M as DRAG_KEYBOARD_OFFSET_PX, N as DRAG_LIFT_Z_INDEX, Na as tv, Ni as ListRow, Nt as MessageReferenceIcon, O as listKeyboardCoordinates, Oa as useParentOverlayKind, Or as PopoverBody, P as DRAG_SETTLE, Pi as ListRowBody, Q as MessageListJumpPillDismiss, Qi as DialogSheetContent, R as ORIGIN_OPACITY, S as Skeleton, Sr as MobileNavServerPopoverRowDescription, T as DRAG_KEYBOARD_CODES, Ta as Spinner, Tr as PopoverActions, U as LIFT_CLASS, Un as chipRemoveBase, Ur as TOUCH_DRAG_TOLERANCE_PX, V as useDragSiblingTransition, Vi as ListRowTitle, Vr as TOUCH_DRAG_DISTANCE_PX, Wi as Tooltip, Wn as InputGroup, Wr as useHoldThenMoveTouchSensor, X as MessageListJumpControls, Xn as observeTruncation, Y as dragMessages, Yi as usePopupCollisionPadding, Yn as measureElement, Z as MessageListJumpPill, Zi as DialogCommit, Zn as readNow, _ as InboxItemTrailing, _r as MobileNavServerPopoverDestinations, a as InboxItemContext, ar as PreviewCardFooter, b as useLatestRef, br as MobileNavServerPopoverRow, c as InboxItemLeading, da as DialogSheetBack, dn as MessageItemDelegatedByButton, ea as Dialog, fn as MessageItemDelegatedByName, g as InboxItemTitle, gr as MobileNavServerPopoverDestination, h as InboxItemTimestamp, hr as MobileNavServerPopoverContent, i as InboxItemContent, ii as DropdownMenuLinkItem, ir as PreviewCardEyebrow, j as DRAG_AUTO_SCROLL_ZONE_PX, ja as useTheme, k as useDragAcrossLists, ln as MessageItemDelegatedAvatar, lt as MessageQuotedPreviewAuthorDelegatedBy, ma as DialogTrigger, mr as MobileNavServerPopover, na as DialogClose, o as InboxItemHeading, oa as DialogFooterNote, pa as DialogTitle, pr as MobileNavServerItem, q as createDragAnnouncements, qn as useOverflowTitle, r as InboxItemBody, ra as DialogContent, sr as PreviewCardMeta, t as InboxItem, tr as PreviewCardBody, un as MessageItemDelegatedBy, vr as MobileNavServerPopoverGroup, w as DropPlaceholder, x as hudTextAction, xr as MobileNavServerPopoverRowBody, y as inboxItem, ya as TextLink, yr as MobileNavServerPopoverList, z as cancelDrag, zr as HoldThenMoveTouchSensor } from "./inbox-item-DbZusMRA.mjs";
+import { $ as MessageListJumpPillGroup, $n as PreviewCardActions, A as useDragSensors, Aa as OverlayLayerProvider, Ai as Checkbox, B as keepGrabInside, Bi as ListRowMeta, Bn as RadioGroup, Br as MouseOnlyPointerSensor, C as DragRefusalHint, Cr as MobileNavServerPopoverRowLabel, D as MOUSE_DRAG_DISTANCE_PX, E as DragRemeasure, Ea as Button$1, F as DRAG_SIBLING_TRANSITION, Fi as ListRowBottom, G as DEFAULT_DRAG_MESSAGES, Gn as InputGroupAddon, Gr as useMouseOnlyPointerSensor, Hi as ListRowTop, Hn as RadioGroupItem, Hr as TOUCH_DRAG_HOLD_MS, I as DROP_GLIDE, Ia as tv, J as dragInstructions, Ji as TooltipContent, Jn as measureContent, K as SILENT_DRAG_ANNOUNCEMENTS, Kn as InputGroupInput, L as DragLift, Li as ListRowDescription, Ln as AvatarGroupButton, Lt as MessageReferenceReadMark, M as DRAG_KEYBOARD_OFFSET_PX, N as DRAG_LIFT_Z_INDEX, Na as useThemeScopeProps, Ni as ListRow, Nt as MessageReferenceIcon, O as listKeyboardCoordinates, Oa as Spinner, Or as PopoverBody, P as DRAG_SETTLE, Pa as useTheme, Pi as ListRowBody, Q as MessageListJumpPillDismiss, Qi as usePopupCollisionPadding, R as ORIGIN_OPACITY, S as Skeleton, Sa as TextLink, Sr as MobileNavServerPopoverRowDescription, T as DRAG_KEYBOARD_CODES, Tr as PopoverActions, U as LIFT_CLASS, Un as chipRemoveBase, Ur as TOUCH_DRAG_TOLERANCE_PX, V as useDragSiblingTransition, Vi as ListRowTitle, Vr as TOUCH_DRAG_DISTANCE_PX, Wn as InputGroup, Wr as useHoldThenMoveTouchSensor, X as MessageListJumpControls, Xn as observeTruncation, Y as dragMessages, Yn as measureElement, Z as MessageListJumpPill, Zi as TooltipTrigger, Zn as readNow, _ as InboxItemTrailing, _a as DialogTrigger, _r as MobileNavServerPopoverDestinations, a as InboxItemContext, aa as DialogClose, ar as PreviewCardFooter, b as useLatestRef, br as MobileNavServerPopoverRow, c as InboxItemLeading, dn as MessageItemDelegatedByButton, ea as DialogCommit, fn as MessageItemDelegatedByName, g as InboxItemTitle, ga as DialogTitle, gr as MobileNavServerPopoverDestination, h as InboxItemTimestamp, hr as MobileNavServerPopoverContent, i as InboxItemContent, ii as DropdownMenuLinkItem, ir as PreviewCardEyebrow, j as DRAG_AUTO_SCROLL_ZONE_PX, ja as useParentOverlayKind, k as useDragAcrossLists, ka as defaultNativeButton, la as DialogFooterNote, ln as MessageItemDelegatedAvatar, lt as MessageQuotedPreviewAuthorDelegatedBy, ma as DialogSheetBack, mr as MobileNavServerPopover, o as InboxItemHeading, oa as DialogContent, pr as MobileNavServerItem, q as createDragAnnouncements, qi as Tooltip, qn as useOverflowTitle, r as InboxItemBody, ra as Dialog, sr as PreviewCardMeta, t as InboxItem, ta as DialogSheetContent, tr as PreviewCardBody, un as MessageItemDelegatedBy, vr as MobileNavServerPopoverGroup, w as DropPlaceholder, x as hudTextAction, xr as MobileNavServerPopoverRowBody, y as inboxItem, yr as MobileNavServerPopoverList, z as cancelDrag, zr as HoldThenMoveTouchSensor } from "./inbox-item-DHJOrxB8.mjs";
 import { Check, ChevronDown, LoaderCircle, Plus, Search, X } from "lucide-react";
 import { createContext, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -1867,7 +1867,7 @@ function InboxItemLeadingBadge({ className, render, ...props }) {
 //#endregion
 //#region src/components/inbox-item/inbox-item-skeleton.recipe.ts
 const inboxItemSkeleton = tv({ slots: {
-	list: ["flex min-w-0 flex-col"],
+	list: ["flex min-w-0 flex-col gap-0.5"],
 	row: [
 		"[--inbox-item-skeleton-context:5rem] [--inbox-item-skeleton-title:60%] [--inbox-item-skeleton-body:80%]",
 		"nth-[3n+2]:[--inbox-item-skeleton-context:4rem] nth-[3n+2]:[--inbox-item-skeleton-title:45%] nth-[3n+2]:[--inbox-item-skeleton-body:70%]",
@@ -1927,7 +1927,8 @@ function InboxItemSkeleton({ density, leading = false, context = false, ...props
 /**
 * The list of `InboxItemSkeleton` rows that stands in for a list of
 * `InboxItem` rows while it loads, with nothing between or around the rows
-* that the loaded list doesn't have (no gap, no border, no card). Renders
+* that the loaded list doesn't have (no border, no card): only the list's
+* 2px gap, which the loaded list has too (design/patterns/lists.md). Renders
 * `count` rows of the given shape, or its children, once `delay` (1 second by
 * default) has passed. It isn't `aria-busy` itself: it goes away when the
 * content arrives, so mark the region that stays, such as the list's panel or
@@ -2007,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"
 		],
@@ -2016,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"
 		],
@@ -2028,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"
 	}
 });
@@ -2052,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,
@@ -2073,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.48.0",
+  "version": "0.50.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",