@botiverse/raft-ui 0.21.0 → 0.21.2

package/dist/wip.mjs

@@ -1,4 +1,4 @@
-import { An as Tooltip, Bn as DialogClose, Fn as TextLink, Gt as readNow, Ht as measureContent, Pn as TooltipTrigger, Rn as Dialog, Ut as measureElement, Vn as DialogContent, Vt as useOverflowTitle, Wt as observeTruncation, Xn as DialogTrigger, Yn as DialogTitle, Zn as Button$1, a as MessageListJumpPillDismiss, ar as useTheme, dt as MessageItemDelegatedAvatar, er as defaultNativeButton, ft as MessageItemDelegatedBy, h as MessageQuotedPreviewAuthorDelegatedBy, i as MessageListJumpPill, ir as useThemeScopeProps, jn as TooltipContent, mt as MessageItemDelegatedByName, o as MessageListJumpPillGroup, pt as MessageItemDelegatedByButton, r as MessageListJumpControls, sr as tv, t as useHoldThenMoveTouchSensor } from "./touch-drag-B7uLTWXe.mjs";
+import { $n as DialogTitle, Fn as TooltipContent, Gn as DialogContent, Gt as measureContent, Hn as Dialog, Jt as readNow, Kt as measureElement, Pn as Tooltip, Rn as TooltipTrigger, Wn as DialogClose, Wt as useOverflowTitle, _ as MessageQuotedPreviewAuthorDelegatedBy, _t as MessageItemDelegatedByName, a as MessageListJumpPill, cr as useThemeScopeProps, dr as tv, er as DialogTrigger, gt as MessageItemDelegatedByButton, ht as MessageItemDelegatedBy, i as MessageListJumpControls, in as DropdownMenuLinkItem, ir as defaultNativeButton, lr as useTheme, mt as MessageItemDelegatedAvatar, n as useHoldThenMoveTouchSensor, o as MessageListJumpPillDismiss, qt as observeTruncation, s as MessageListJumpPillGroup, t as inboxItem, tr as Button$1, zn as TextLink } from "./inbox-item.recipe-CuJPcy-3.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
@@ -1467,4 +1468,150 @@ function useTruncated(ref) {
 	return truncated;
 }
 //#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, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useHoldThenMoveTouchSensor, useTruncated };
+//#region src/components/inbox-item/inbox-item-leading-badge.tsx
+/**
+* A small badge in the bottom-right corner of `InboxItemLeading`, the corner a
+* presence light takes: on a thread row, the thread mark, on the channel's
+* `IconTile` or on the direct message's `Avatar` alike. Put it inside
+* `InboxItemLeading`, after the tile or avatar, with one icon as its child;
+* leave the avatar's `AvatarBadge` out, since the corner holds one mark. It
+* is hidden from assistive technology unless given a `role`.
+*/
+function InboxItemLeadingBadge({ className, render, ...props }) {
+	const { itemLeadingBadge } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-leading-badge",
+		"aria-hidden": props.role ? void 0 : true,
+		className: itemLeadingBadge({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+//#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, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, InboxItemLeadingBadge, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useHoldThenMoveTouchSensor, useTruncated };

package/package.json

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