@botiverse/raft-ui 0.21.1 → 0.22.0

package/dist/styles.css

@@ -625,9 +625,9 @@ textarea:-webkit-autofill:disabled {
   background-image: linear-gradient(var(--fill-medium), var(--fill-medium));
 }
 
-/* A mark that leads a line of text: the icon or status light at the start of
-   a banner, a toast, a panel notice or a chip sits on the first line of its
-   text, centred on it, and stays there when the text wraps
+/* A mark that leads a line of text: the icon at the start of a banner, a
+   toast or a panel notice, or the status light of a chip, sits on the first
+   line of its text, centred on it, and stays there when the text wraps
    (design/foundations/alignment.md#a-mark-that-leads-text). In Space
    Grotesk's metrics the centre of the line box is the centre of the cap
    height (to 0.006em); Chromium's rounding can lift the letters 0.5px, which
@@ -641,9 +641,10 @@ textarea:-webkit-autofill:disabled {
 
    `lead-dot` places a status light the same way, in a box one line tall,
    and keeps it at its one size beside text, 9px with a 1.5px ink edge
-   (status.md#sizes). It is kept at 9px inside components (Banner,
-   PanelNotice, ToastIcon, Badge, PanelActivity); when placing Status
-   yourself, don't pass a size. */
+   (status.md#sizes). It is kept at 9px inside components (Badge,
+   PanelActivity, a panel header); when placing Status yourself, don't pass
+   a size. A notice never uses a status light to say what kind of notice
+   it is; it leads with its intent's icon (status.md#sizes). */
 @utility lead-icon {
   flex-shrink: 0;
   align-self: start;

package/dist/wip.d.mts

@@ -1,9 +1,10 @@
-import { Ar as SegmentedControlNav, E as MessageQuotedPreviewAuthorDelegatedByProps, Or as SegmentedControlLink, T as MessageQuotedPreviewAuthorDelegatedBy, Vi as Dialog, Wi as DialogClose, _n as MessageItemDelegatedByButton, a as MessageListJumpPillDismissProps, ba as StyledProps, bn as MessageItemDelegatedByNameProps, c as MessageListJumpPillProps, da as DialogTrigger, gn as MessageItemDelegatedBy, hn as MessageItemDelegatedAvatarProps, i as MessageListJumpPillDismiss, jr as SegmentedControlNavProps, kr as SegmentedControlLinkProps, ma as ButtonProps, mn as MessageItemDelegatedAvatar, n as MessageListJumpControlsProps, o as MessageListJumpPillGroup, qi as DialogContentProps, r as MessageListJumpPill, s as MessageListJumpPillGroupProps, t as MessageListJumpControls, ua as DialogTitleProps, vn as MessageItemDelegatedByButtonProps, xn as MessageItemDelegatedByProps, ya as DataAttributes, yn as MessageItemDelegatedByName, zi as TextLinkProps } from "./index-jTmbN7ov.mjs";
+import { $o as VariantProps, Aa as DropdownMenuLinkItemProps, Br as PreviewCardMetaProps, Ci as MobileNavServerPopoverRowBody, Cn as MessageItemDelegatedByProps, Cr as PreviewCardActions, Di as MobileNavServerPopoverRowLabel, Do as DialogFooterNoteProps, Dr as PreviewCardBody, E as MessageQuotedPreviewAuthorDelegatedByProps, Ei as MobileNavServerPopoverRowDescriptionProps, Eo as DialogFooterNote, Fr as PreviewCardFooter, Ir as PreviewCardFooterProps, Li as PopoverBody, Mi as PopoverActionsProps, Nr as PreviewCardEyebrow, Oi as MobileNavServerPopoverRowLabelProps, Or as PreviewCardBodyProps, Pr as PreviewCardEyebrowProps, Ri as PopoverBodyProps, Ro as DialogSheetBack, Si as MobileNavServerPopoverRow, Sn as MessageItemDelegatedByNameProps, So as DialogContentProps, T as MessageQuotedPreviewAuthorDelegatedBy, Ti as MobileNavServerPopoverRowDescription, Uo as DialogTitleProps, Wo as DialogTrigger, Yo as ButtonProps, _i as MobileNavServerPopoverGroup, _n as MessageItemDelegatedAvatarProps, a as MessageListJumpPillDismissProps, bi as MobileNavServerPopoverListProps, bn as MessageItemDelegatedByButtonProps, c as MessageListJumpPillProps, ci as MobileNavServerItem, di as MobileNavServerPopoverContent, dt as MessageReferenceIcon, es as DataAttributes, fi as MobileNavServerPopoverContentProps, fo as DialogCommit, ft as MessageReferenceIconProps, gi as MobileNavServerPopoverDestinationsProps, gn as MessageItemDelegatedAvatar, go as Dialog, hi as MobileNavServerPopoverDestinations, ho as DialogSheetContentProps, i as MessageListJumpPillDismiss, ji as PopoverActions, ka as DropdownMenuLinkItem, ki as MobileNavServerPopoverRowProps, li as MobileNavServerItemProps, mi as MobileNavServerPopoverDestinationProps, mo as DialogSheetContent, n as MessageListJumpControlsProps, o as MessageListJumpPillGroup, pi as MobileNavServerPopoverDestination, po as DialogCommitProps, r as MessageListJumpPill, s as MessageListJumpPillGroupProps, t as MessageListJumpControls, ts as StyledProps, ui as MobileNavServerPopover, uo as TextLinkProps, vi as MobileNavServerPopoverGroupProps, vn as MessageItemDelegatedBy, wi as MobileNavServerPopoverRowBodyProps, wr as PreviewCardActionsProps, xi as MobileNavServerPopoverProps, xn as MessageItemDelegatedByName, yi as MobileNavServerPopoverList, yn as MessageItemDelegatedByButton, yo as DialogClose, zo as DialogSheetBackProps, zr as PreviewCardMeta } from "./index-DT1Hg5N-.mjs";
 import { CSSProperties, ComponentProps, ComponentPropsWithRef, PointerEvent, ReactNode, RefObject } from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
-import { Combobox } from "@base-ui/react/combobox";
 import { PointerSensor, TouchSensor, TouchSensorOptions } from "@dnd-kit/core";
+import { Combobox } from "@base-ui/react/combobox";
+import { Meter as Meter$1 } from "@base-ui/react/meter";
 //#region src/components/combobox-select/combobox-select.types.d.ts
 type ComboboxSelectValue = string | number;
 interface ComboboxSelectOption {
@@ -391,4 +392,153 @@ type InboxItemLeadingBadgeProps = useRender.ComponentProps<"span">;
  */
 export declare function InboxItemLeadingBadge({ className, render, ...props }: InboxItemLeadingBadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
-export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, type CommentCardMetaProps, type CommentCardProps, type CommentCardQuoteProps, type CommentCardTriggerProps, type CommentEntryAuthorProps, type CommentEntryBodyProps, type CommentEntryHeaderProps, type CommentEntryProps, type CommentEntryTimeProps, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, type CommentMarkerProps, type EllipsisProps, type EllipsisState, type EllipsisToggleProps, type HoldThenMoveOptions, type InboxItemLeadingBadgeProps, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, SegmentedControlLink, type SegmentedControlLinkProps, SegmentedControlNav, type SegmentedControlNavProps, type UseCommentMarginFitsOptions };
+//#region src/components/meter/meter.d.ts
+declare const meter: import("tailwind-variants/lite").TVReturnType<{
+  level: {
+    plenty: {};
+    low: {
+      root: string[];
+    };
+    empty: {
+      root: string[];
+    };
+  };
+  size: {
+    sm: {};
+    md: {};
+  };
+}, {
+  root: string[];
+  header: string[];
+  label: string[];
+  value: string[];
+  track: string[];
+  indicator: string[];
+}, undefined, {
+  level: {
+    plenty: {};
+    low: {
+      root: string[];
+    };
+    empty: {
+      root: string[];
+    };
+  };
+  size: {
+    sm: {};
+    md: {};
+  };
+}, {
+  root: string[];
+  header: string[];
+  label: string[];
+  value: string[];
+  track: string[];
+  indicator: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  level: {
+    plenty: {};
+    low: {
+      root: string[];
+    };
+    empty: {
+      root: string[];
+    };
+  };
+  size: {
+    sm: {};
+    md: {};
+  };
+}, {
+  root: string[];
+  header: string[];
+  label: string[];
+  value: string[];
+  track: string[];
+  indicator: string[];
+}>>;
+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`.
+   */
+  used: number;
+  /**
+   * The whole allowance, in the same units as `used`.
+   * @default 100
+   */
+  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`
+   */
+  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.
+   */
+  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.
+ */
+export declare function Meter({ size, used, max, 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>;
+export declare function MeterLabel({ className, ...props }: MeterLabelProps): import("react").JSX.Element;
+type MeterValueProps = Omit<StyledProps<Meter$1.Value.Props>, "children">;
+/** Shows the meter's `valueText`, at the end of `MeterHeader`. */
+export declare function MeterValue({ className, ...props }: MeterValueProps): import("react").JSX.Element;
+type MeterTrackProps = StyledProps<Meter$1.Track.Props>;
+export declare function MeterTrack({ className, ...props }: MeterTrackProps): import("react").JSX.Element;
+type MeterIndicatorProps = StyledProps<Meter$1.Indicator.Props>;
+export declare function MeterIndicator({ className, ...props }: MeterIndicatorProps): import("react").JSX.Element;
+//#endregion
+//#region src/lib/overlay-depth.d.ts
+/**
+ * A modal surface: a centred dialog (Dialog, AlertDialog, or an app's own
+ * modal) or a sheet (Drawer).
+ */
+type OverlayLayerKind = "dialog" | "drawer";
+type OverlayLayerProviderProps = {
+  /**
+   * What the surface is. Use `"dialog"` for an app's own modal, whatever it
+   * looks like: `"drawer"` is for a Base UI Drawer, which nests under another
+   * drawer by itself and only draws its own scrim over a `"dialog"`.
+   */
+  kind: OverlayLayerKind;
+  /** Whether it dims what is under it. A non-modal surface adds nothing. */
+  modal: boolean;
+  children?: ReactNode;
+};
+/**
+ * Tells everything under it that a modal surface is open, so a raft-ui
+ * Dialog, AlertDialog or Drawer opened from inside draws the lighter nested
+ * scrim (design/foundations/elevation.md#stacked-overlays). raft-ui's own
+ * roots add one by themselves; an app's own modal (its own backdrop, Esc and
+ * focus) wraps its scrim and its content in one to join the stack, and reads
+ * `useParentOverlayKind` inside it to pick its own scrim. Modal overlays only:
+ * a non-modal one passes `modal={false}`, adds nothing, and must not call
+ * `useParentOverlayKind` (it would read the layer below as its own).
+ */
+export declare function OverlayLayerProvider({ kind, modal, children }: OverlayLayerProviderProps): import("react").JSX.Element;
+/**
+ * The modal surface this overlay's own surface was opened from, or null when
+ * it is the first. Call it inside the surface's own `OverlayLayerProvider`
+ * (for raft-ui's overlays, inside their root): the last entry is the surface
+ * itself and the one before it is its parent. Not null means the surface is
+ * stacked over another and draws `layer-backdrop-nested` instead of
+ * `layer-backdrop`. Modal overlays only: under `modal={false}` nothing is
+ * added, so the last entry is the parent and this returns the wrong layer. It reads React context, so it sees the surfaces whose
+ * tree this one is rendered in, portals included; one opened from outside
+ * that tree is not stacked on it here.
+ */
+export declare function useParentOverlayKind(): OverlayLayerKind | null;
+//#endregion
+export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, type CommentCardMetaProps, type CommentCardProps, type CommentCardQuoteProps, type CommentCardTriggerProps, type CommentEntryAuthorProps, type CommentEntryBodyProps, type CommentEntryHeaderProps, type CommentEntryProps, type CommentEntryTimeProps, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, type CommentMarkerProps, DialogCommit, type DialogCommitProps, DialogFooterNote, type DialogFooterNoteProps, DialogSheetBack, type DialogSheetBackProps, DialogSheetContent, type DialogSheetContentProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, type EllipsisProps, type EllipsisState, type EllipsisToggleProps, type HoldThenMoveOptions, type InboxItemLeadingBadgeProps, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, type MeterHeaderProps, type MeterIndicatorProps, type MeterLabelProps, type MeterProps, type MeterTrackProps, type MeterValueProps, MobileNavServerItem, type MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, type MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, type MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, type MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, type MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, type MobileNavServerPopoverListProps, type MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, type MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, type MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, type MobileNavServerPopoverRowLabelProps, type MobileNavServerPopoverRowProps, type OverlayLayerKind, type OverlayLayerProviderProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type UseCommentMarginFitsOptions };

package/dist/wip.mjs

@@ -1,4 +1,4 @@
-import { $t as observeTruncation, Bn as TooltipContent, Jt as SegmentedControlLink, Qt as measureElement, Un as TooltipTrigger, Wn as TextLink, Xn as DialogContent, Xt as useOverflowTitle, Yn as DialogClose, Yt as SegmentedControlNav, Zt as measureContent, _ as MessageQuotedPreviewAuthorDelegatedBy, _t as MessageItemDelegatedByName, a as MessageListJumpPill, ar as DialogTrigger, en as readNow, gr as tv, gt as MessageItemDelegatedByButton, ht as MessageItemDelegatedBy, i as MessageListJumpControls, ir as DialogTitle, lr as defaultNativeButton, mr as useTheme, mt as MessageItemDelegatedAvatar, n as useHoldThenMoveTouchSensor, o as MessageListJumpPillDismiss, or as Button$1, pr as useThemeScopeProps, qn as Dialog, s as MessageListJumpPillGroup, t as inboxItem, zn as Tooltip } from "./inbox-item.recipe-DelZxRmY.mjs";
+import { Br as DialogFooterNote, Er as TooltipContent, Gr as DialogSheetBack, Gt as measureContent, In as useHoldThenMoveTouchSensor, Ir as DialogClose, Jr as DialogTrigger, Jt as readNow, Kt as measureElement, Lr as DialogContent, Mr as DialogSheetContent, Pr as Dialog, Qt as PreviewCardBody, Sn as PopoverActions, Tn as PopoverBody, Tr as Tooltip, Wt as useOverflowTitle, Xn as DropdownMenuLinkItem, Xt as PreviewCardActions, Zr as TextLink, _n as MobileNavServerPopoverRow, _t as MessageItemDelegatedByName, a as MessageListJumpPillGroup, ai as useParentOverlayKind, bn as MobileNavServerPopoverRowLabel, ci as useTheme, dn as MobileNavServerPopover, ei as Button$1, fn as MobileNavServerPopoverContent, gn as MobileNavServerPopoverList, gt as MessageItemDelegatedByButton, h as MessageQuotedPreviewAuthorDelegatedBy, hn as MobileNavServerPopoverGroup, ht as MessageItemDelegatedBy, i as MessageListJumpPillDismiss, ii as OverlayLayerProvider, in as PreviewCardMeta, jr as DialogCommit, kr as TooltipTrigger, mn as MobileNavServerPopoverDestinations, mt as MessageItemDelegatedAvatar, n as MessageListJumpControls, nn as PreviewCardFooter, pn as MobileNavServerPopoverDestination, qr as DialogTitle, qt as observeTruncation, r as MessageListJumpPill, ri as defaultNativeButton, si as useThemeScopeProps, t as inboxItem, tn as PreviewCardEyebrow, ui as tv, un as MobileNavServerItem, vn as MobileNavServerPopoverRowBody, yn as MobileNavServerPopoverRowDescription, z as MessageReferenceIcon } from "./inbox-item.recipe-3j4DHKZ2.mjs";
 import { Check, ChevronDown, LoaderCircle, Plus, 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";
@@ -6,6 +6,7 @@ import { Button } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { Combobox } from "@base-ui/react/combobox";
+import { Meter as Meter$1 } from "@base-ui/react/meter";
 //#region src/lib/phone-media.ts
 /**
 * A phone: a touch screen narrower than the desktop layout. The complement, on
@@ -1490,4 +1491,127 @@ function InboxItemLeadingBadge({ className, render, ...props }) {
 	});
 }
 //#endregion
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, Ellipsis, EllipsisToggle, InboxItemLeadingBadge, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, SegmentedControlLink, SegmentedControlNav, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useHoldThenMoveTouchSensor, useTruncated };
+//#region src/components/meter/meter.tsx
+const meter = tv({
+	slots: {
+		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"
+		],
+		header: ["flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5"],
+		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)",
+			"h-2 group-data-[size=sm]/meter:h-1.5",
+			"rounded-sticker"
+		],
+		indicator: [
+			"block h-full bg-(--meter-indicator)",
+			"transition-[width,background-color] duration-200 ease-out",
+			"rounded-[inherit] inset-ring-[1.5px] inset-ring-sticker-ink"
+		]
+	},
+	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)]"
+			] }
+		},
+		size: {
+			sm: {},
+			md: {}
+		}
+	},
+	defaultVariants: {
+		level: "plenty",
+		size: "md"
+	}
+});
+const MeterTextContext = createContext("");
+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.
+*/
+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";
+	const { root } = meter({
+		size,
+		level
+	});
+	return /* @__PURE__ */ jsx(MeterTextContext.Provider, {
+		value: valueText,
+		children: /* @__PURE__ */ jsx(Meter$1.Root, {
+			"data-slot": "meter",
+			"data-size": size,
+			"data-level": level,
+			min: 0,
+			max,
+			value: left,
+			"aria-valuetext": valueText,
+			className: root({ className }),
+			...props
+		})
+	});
+}
+function MeterHeader({ className, ...props }) {
+	const { header } = meter();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "meter-header",
+		className: header({ className }),
+		...props
+	});
+}
+function MeterLabel({ className, ...props }) {
+	const { label } = meter();
+	return /* @__PURE__ */ jsx(Meter$1.Label, {
+		"data-slot": "meter-label",
+		className: label({ className }),
+		...props
+	});
+}
+/** Shows the meter's `valueText`, at the end of `MeterHeader`. */
+function MeterValue({ className, ...props }) {
+	const { value } = meter();
+	const valueText = useContext(MeterTextContext);
+	return /* @__PURE__ */ jsx(Meter$1.Value, {
+		"data-slot": "meter-value",
+		className: value({ className }),
+		...props,
+		children: () => valueText
+	});
+}
+function MeterTrack({ className, ...props }) {
+	const { track } = meter();
+	return /* @__PURE__ */ jsx(Meter$1.Track, {
+		"data-slot": "meter-track",
+		className: track({ className }),
+		...props
+	});
+}
+function MeterIndicator({ className, ...props }) {
+	const { indicator } = meter();
+	return /* @__PURE__ */ jsx(Meter$1.Indicator, {
+		"data-slot": "meter-indicator",
+		className: indicator({ className }),
+		...props
+	});
+}
+//#endregion
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, InboxItemLeadingBadge, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, OverlayLayerProvider, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useHoldThenMoveTouchSensor, useParentOverlayKind, useTruncated };

package/package.json

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