@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/message-quoted-preview/message-quoted-preview.mjs

@@ -0,0 +1,144 @@
+import { MessageEmbed, MessageEmbedContent, MessageEmbedHeader } from "../message-embed/message-embed.mjs";
+import { messageQuotedPreview } from "./message-quoted-preview.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-quoted-preview/message-quoted-preview.tsx
+function MessageQuotedPreview({ className, render, ...props }) {
+	const { root } = messageQuotedPreview();
+	return /* @__PURE__ */ jsx(MessageEmbed, {
+		className: root({ className }),
+		render,
+		...props
+	});
+}
+function MessageQuotedPreviewContent({ className, render, ...props }) {
+	const { content } = messageQuotedPreview();
+	return /* @__PURE__ */ jsx(MessageEmbedContent, {
+		className: content({ className }),
+		render,
+		...props
+	});
+}
+function MessageQuotedPreviewHeader({ className, render, ...props }) {
+	const { header } = messageQuotedPreview();
+	return /* @__PURE__ */ jsx(MessageEmbedHeader, {
+		className: header({ className }),
+		render,
+		...props
+	});
+}
+function MessageQuotedPreviewChannel({ className, render, ...props }) {
+	const { channel } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: channel({ className }) }, props),
+		state: { slot: "message-quoted-preview-channel" }
+	});
+}
+function MessageQuotedPreviewThread({ className, render, ...props }) {
+	const { thread } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: thread({ className }) }, props),
+		state: { slot: "message-quoted-preview-thread" }
+	});
+}
+function MessageQuotedPreviewAuthor({ className, render, ...props }) {
+	const { author } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: author({ className }) }, props),
+		state: { slot: "message-quoted-preview-author" }
+	});
+}
+function MessageQuotedPreviewAuthorName({ className, render, ...props }) {
+	const { authorName } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: authorName({ className }) }, props),
+		state: { slot: "message-quoted-preview-author-name" }
+	});
+}
+function MessageQuotedPreviewAuthorMeta({ className, render, ...props }) {
+	const { authorMeta } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: authorMeta({ className }) }, props),
+		state: { slot: "message-quoted-preview-author-meta" }
+	});
+}
+/**
+* "(sent by Friday)" after `MessageQuotedPreviewAuthorName`, when an assistant
+* sent the quoted message for its author. It never truncates; the author's
+* name gives way instead.
+*/
+function MessageQuotedPreviewAuthorDelegatedBy({ className, render, ...props }) {
+	const { authorDelegatedBy } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: authorDelegatedBy({ className }) }, props),
+		state: { slot: "message-quoted-preview-author-delegated-by" }
+	});
+}
+function MessageQuotedPreviewTimestamp({ className, render, ...props }) {
+	const { timestamp } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: timestamp({ className }) }, props),
+		state: { slot: "message-quoted-preview-timestamp" }
+	});
+}
+function MessageQuotedPreviewText({ className, render, ...props }) {
+	const { text } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: text({ className }) }, props),
+		state: { slot: "message-quoted-preview-text" }
+	});
+}
+function MessageQuotedPreviewAttachments({ className, render, ...props }) {
+	const { attachments } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: attachments({ className }) }, props),
+		state: { slot: "message-quoted-preview-attachments" }
+	});
+}
+function MessageQuotedPreviewAttachment({ className, render, ...props }) {
+	const { attachment } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: attachment({ className }) }, props),
+		state: { slot: "message-quoted-preview-attachment" }
+	});
+}
+function MessageQuotedPreviewLoading({ className, render, ...props }) {
+	const { loading } = messageQuotedPreview();
+	return /* @__PURE__ */ jsx(MessageEmbed, {
+		className: loading({ className }),
+		render,
+		...props
+	});
+}
+function MessageQuotedPreviewUnavailable({ className, render, ...props }) {
+	const { unavailable } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: unavailable({ className }) }, props),
+		state: { slot: "message-quoted-preview-unavailable" }
+	});
+}
+//#endregion
+export { MessageQuotedPreview, MessageQuotedPreviewAttachment, MessageQuotedPreviewAttachments, MessageQuotedPreviewAuthor, MessageQuotedPreviewAuthorDelegatedBy, MessageQuotedPreviewAuthorMeta, MessageQuotedPreviewAuthorName, MessageQuotedPreviewChannel, MessageQuotedPreviewContent, MessageQuotedPreviewHeader, MessageQuotedPreviewLoading, MessageQuotedPreviewText, MessageQuotedPreviewThread, MessageQuotedPreviewTimestamp, MessageQuotedPreviewUnavailable };

package/dist/components/message-quoted-preview/message-quoted-preview.recipe.mjs

@@ -0,0 +1,38 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/message-quoted-preview/message-quoted-preview.recipe.ts
+const messageQuotedPreview = tv({ slots: {
+	root: [
+		"w-full",
+		"rounded-none border-0 border-l-2 border-line-seam bg-transparent pl-2.5",
+		"text-foreground-muted"
+	],
+	content: ["min-w-0", "p-0"],
+	header: [
+		"flex min-w-0 items-center",
+		"has-data-[slot=message-quoted-preview-author-delegated-by]:flex-wrap",
+		"gap-1.5 p-0 pb-0.5"
+	],
+	channel: ["inline-flex items-start", "gap-1 text-footnote font-semibold text-foreground-hint [&_svg]:size-3.5 [&_svg]:lead-icon"],
+	thread: ["inline-flex items-start", "gap-1 text-footnote font-semibold text-foreground-hint [&_svg]:size-3.5 [&_svg]:lead-icon"],
+	author: ["inline-flex min-w-0 items-center", "gap-1.5"],
+	authorName: ["truncate", "text-footnote font-bold text-foreground-muted"],
+	authorMeta: ["truncate", "text-caption text-foreground-hint"],
+	authorDelegatedBy: ["shrink-0 whitespace-nowrap", "text-footnote text-foreground-muted"],
+	timestamp: ["ml-auto shrink-0", "font-mono text-mono-meta tabular-nums text-foreground-hint"],
+	text: ["line-clamp-2", "text-callout text-foreground-muted"],
+	attachments: ["flex flex-wrap gap-1.5", "mt-1.5"],
+	attachment: [
+		"inline-flex items-center",
+		"h-[22px] gap-1 rounded-chip bg-fill-muted px-1.5",
+		"font-mono text-mono-meta text-foreground-muted [&_svg]:size-3.5"
+	],
+	loading: ["w-full animate-pulse", "rounded-none border-0 border-l-2 border-line-seam bg-transparent pl-2.5"],
+	unavailable: [
+		"block w-full text-left",
+		"border-l-2 border-line-seam pl-2.5",
+		"text-callout text-foreground-hint",
+		"outline-none focus-visible:shadow-focus"
+	]
+} });
+//#endregion
+export { messageQuotedPreview };

package/dist/components/message-replies/index.d.mts

@@ -0,0 +1,2 @@
+import { MessageReplies, MessageRepliesItem, MessageRepliesItemContent, MessageRepliesItemContentProps, MessageRepliesItemProps, MessageRepliesItemSender, MessageRepliesItemSenderProps, MessageRepliesItemTime, MessageRepliesItemTimeProps, MessageRepliesProps, MessageRepliesSummary, MessageRepliesSummaryItem, MessageRepliesSummaryItemProps, MessageRepliesSummaryProps } from "./message-replies.mjs";
+export { MessageReplies, MessageRepliesItem, MessageRepliesItemContent, type MessageRepliesItemContentProps, type MessageRepliesItemProps, MessageRepliesItemSender, type MessageRepliesItemSenderProps, MessageRepliesItemTime, type MessageRepliesItemTimeProps, type MessageRepliesProps, MessageRepliesSummary, MessageRepliesSummaryItem, type MessageRepliesSummaryItemProps, type MessageRepliesSummaryProps };

package/dist/components/message-replies/message-replies.d.mts

@@ -0,0 +1,17 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-replies/message-replies.d.ts
+export type MessageRepliesProps = useRender.ComponentProps<"button">;
+export declare function MessageReplies({ className, render, ...props }: MessageRepliesProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageRepliesSummaryProps = useRender.ComponentProps<"span">;
+export declare function MessageRepliesSummary({ className, render, ...props }: MessageRepliesSummaryProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageRepliesSummaryItemProps = useRender.ComponentProps<"span">;
+export declare function MessageRepliesSummaryItem({ className, render, ...props }: MessageRepliesSummaryItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageRepliesItemProps = useRender.ComponentProps<"span">;
+export declare function MessageRepliesItem({ className, render, ...props }: MessageRepliesItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageRepliesItemSenderProps = useRender.ComponentProps<"span">;
+export declare function MessageRepliesItemSender({ className, render, ...props }: MessageRepliesItemSenderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageRepliesItemContentProps = useRender.ComponentProps<"span">;
+export declare function MessageRepliesItemContent({ className, render, ...props }: MessageRepliesItemContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageRepliesItemTimeProps = useRender.ComponentProps<"time">;
+export declare function MessageRepliesItemTime({ className, render, ...props }: MessageRepliesItemTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/message-replies/message-replies.mjs

@@ -0,0 +1,79 @@
+import { messageEmbed } from "../message-embed/message-embed.recipe.mjs";
+import { messageReplies } from "./message-replies.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-replies/message-replies.tsx
+function MessageReplies({ className, render, ...props }) {
+	const { root } = messageReplies();
+	const { root: embedRoot } = messageEmbed();
+	const defaultProps = { className: embedRoot({ className: root({ className }) }) };
+	return useRender({
+		defaultTagName: "button",
+		render: render ?? /* @__PURE__ */ jsx("button", { type: "button" }),
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-embed" }
+	});
+}
+function MessageRepliesSummary({ className, render, ...props }) {
+	const { summary } = messageReplies();
+	const defaultProps = { className: summary({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-replies-summary" }
+	});
+}
+function MessageRepliesSummaryItem({ className, render, ...props }) {
+	const { summaryItem } = messageReplies();
+	const defaultProps = { className: summaryItem({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-replies-summary-item" }
+	});
+}
+function MessageRepliesItem({ className, render, ...props }) {
+	const { reply } = messageReplies();
+	const defaultProps = { className: reply({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-replies-item" }
+	});
+}
+function MessageRepliesItemSender({ className, render, ...props }) {
+	const { sender } = messageReplies();
+	const defaultProps = { className: sender({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-replies-item-sender" }
+	});
+}
+function MessageRepliesItemContent({ className, render, ...props }) {
+	const { content } = messageReplies();
+	const defaultProps = { className: content({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-replies-item-content" }
+	});
+}
+function MessageRepliesItemTime({ className, render, ...props }) {
+	const { time } = messageReplies();
+	const defaultProps = { className: time({ className }) };
+	return useRender({
+		defaultTagName: "time",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-replies-item-time" }
+	});
+}
+//#endregion
+export { MessageReplies, MessageRepliesItem, MessageRepliesItemContent, MessageRepliesItemSender, MessageRepliesItemTime, MessageRepliesSummary, MessageRepliesSummaryItem };

package/dist/components/message-replies/message-replies.recipe.mjs

@@ -0,0 +1,25 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/message-replies/message-replies.recipe.ts
+const messageReplies = tv({ slots: {
+	root: [
+		"group/message-replies flex min-w-0 w-full flex-col text-left",
+		"transition-colors focus-visible:keyboard:outline-1 focus-visible:keyboard:outline-line-strong",
+		"mt-2 max-w-[480px] gap-1 rounded-container border-0 px-2.5 py-2",
+		"bg-fill-muted text-foreground-muted hover:overlay-subtle active:overlay-medium",
+		"focus-visible:outline-none focus-visible:shadow-focus"
+	],
+	summary: [
+		"flex shrink-0 flex-wrap items-center transition-colors",
+		"gap-1.5 text-footnote font-bold text-foreground-muted has-[strong]:text-foreground",
+		"[&_strong]:inline-flex [&_strong]:h-5 [&_strong]:min-w-5 [&_strong]:items-center [&_strong]:justify-center",
+		"[&_strong]:rounded-sticker [&_strong]:px-1.5 [&_strong]:font-mono [&_strong]:text-mono-meta [&_strong]:font-bold",
+		"[&_strong]:bg-attention [&_strong]:text-sticker-ink [&_strong]:inset-ring-[1.5px] [&_strong]:inset-ring-sticker-ink [&_strong]:ring-[1.5px] [&_strong]:ring-sticker-edge"
+	],
+	summaryItem: ["inline-flex items-center gap-0.5 align-middle", "[&_svg]:size-3.5"],
+	reply: ["flex min-w-0 items-center", "gap-1.5 text-footnote"],
+	sender: ["min-w-0 shrink truncate", "font-semibold text-foreground-muted"],
+	content: ["min-w-0 flex-1 truncate", "text-foreground-hint"],
+	time: ["ml-auto shrink-0", "font-mono text-mono-meta tabular-nums text-foreground-hint"]
+} });
+//#endregion
+export { messageReplies };

package/dist/components/message-translation/index.d.mts

@@ -0,0 +1,2 @@
+import { MessageItemTranslationAction, MessageItemTranslationActionProps, MessageItemTranslationFailedStatus, MessageItemTranslationFailedStatusProps, MessageItemTranslationOriginal, MessageItemTranslationOriginalLabel, MessageItemTranslationOriginalLabelProps, MessageItemTranslationOriginalProps, MessageItemTranslationProgressTrack, MessageItemTranslationProgressTrackProps, MessageItemTranslationRetryAction, MessageItemTranslationRetryActionProps, MessageItemTranslationStatus, MessageItemTranslationStatusProps } from "./message-translation.mjs";
+export { MessageItemTranslationAction, type MessageItemTranslationActionProps, MessageItemTranslationFailedStatus, type MessageItemTranslationFailedStatusProps, MessageItemTranslationOriginal, MessageItemTranslationOriginalLabel, type MessageItemTranslationOriginalLabelProps, type MessageItemTranslationOriginalProps, MessageItemTranslationProgressTrack, type MessageItemTranslationProgressTrackProps, MessageItemTranslationRetryAction, type MessageItemTranslationRetryActionProps, MessageItemTranslationStatus, type MessageItemTranslationStatusProps };

package/dist/components/message-translation/message-translation.d.mts

@@ -0,0 +1,20 @@
+import { MarkdownBlockquoteProps } from "../markdown/markdown-parts.mjs";
+import { ProgressTrackProps } from "../progress/progress.mjs";
+import "../progress/index.mjs";
+import { ComponentProps } from "react";
+//#region src/components/message-translation/message-translation.d.ts
+export type MessageItemTranslationOriginalProps = MarkdownBlockquoteProps;
+export declare function MessageItemTranslationOriginal({ className, ...props }: MessageItemTranslationOriginalProps): import("react").JSX.Element;
+export type MessageItemTranslationOriginalLabelProps = ComponentProps<"div">;
+export declare function MessageItemTranslationOriginalLabel({ className, ...props }: MessageItemTranslationOriginalLabelProps): import("react").JSX.Element;
+export type MessageItemTranslationStatusProps = ComponentProps<"div">;
+export declare function MessageItemTranslationStatus({ className, ...props }: MessageItemTranslationStatusProps): import("react").JSX.Element;
+export type MessageItemTranslationProgressTrackProps = ProgressTrackProps;
+export declare function MessageItemTranslationProgressTrack({ className, ...props }: MessageItemTranslationProgressTrackProps): import("react").JSX.Element;
+export type MessageItemTranslationFailedStatusProps = ComponentProps<"div">;
+export declare function MessageItemTranslationFailedStatus({ className, ...props }: MessageItemTranslationFailedStatusProps): import("react").JSX.Element;
+export type MessageItemTranslationActionProps = ComponentProps<"button">;
+export declare function MessageItemTranslationAction({ className, ...props }: MessageItemTranslationActionProps): import("react").JSX.Element;
+export type MessageItemTranslationRetryActionProps = ComponentProps<"button">;
+export declare function MessageItemTranslationRetryAction({ className, ...props }: MessageItemTranslationRetryActionProps): import("react").JSX.Element;
+//#endregion

package/dist/components/message-translation/message-translation.mjs

@@ -0,0 +1,64 @@
+import { MarkdownBlockquote } from "../markdown/markdown-parts.mjs";
+import { ProgressTrack } from "../progress/progress.mjs";
+import { messageTranslation } from "./message-translation.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/message-translation/message-translation.tsx
+function MessageItemTranslationOriginal({ className, ...props }) {
+	const { translationOriginal } = messageTranslation();
+	return /* @__PURE__ */ jsx(MarkdownBlockquote, {
+		"data-slot": "message-item-translation-original",
+		className: translationOriginal({ className }),
+		...props
+	});
+}
+function MessageItemTranslationOriginalLabel({ className, ...props }) {
+	const { translationOriginalLabel } = messageTranslation();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-item-translation-original-label",
+		className: translationOriginalLabel({ className }),
+		...props
+	});
+}
+function MessageItemTranslationStatus({ className, ...props }) {
+	const { translationStatus } = messageTranslation();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-item-translation-status",
+		className: translationStatus({ className }),
+		...props
+	});
+}
+function MessageItemTranslationProgressTrack({ className, ...props }) {
+	const { translationProgressTrack } = messageTranslation();
+	return /* @__PURE__ */ jsx(ProgressTrack, {
+		className: translationProgressTrack({ className }),
+		...props
+	});
+}
+function MessageItemTranslationFailedStatus({ className, ...props }) {
+	const { translationFailedStatus } = messageTranslation();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-item-translation-status",
+		className: translationFailedStatus({ className }),
+		...props
+	});
+}
+function MessageItemTranslationAction({ className, ...props }) {
+	const { translationAction } = messageTranslation();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "message-item-translation-action",
+		className: translationAction({ className }),
+		...props
+	});
+}
+function MessageItemTranslationRetryAction({ className, ...props }) {
+	const { translationRetryAction } = messageTranslation();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "message-item-translation-retry-action",
+		className: translationRetryAction({ className }),
+		...props
+	});
+}
+//#endregion
+export { MessageItemTranslationAction, MessageItemTranslationFailedStatus, MessageItemTranslationOriginal, MessageItemTranslationOriginalLabel, MessageItemTranslationProgressTrack, MessageItemTranslationRetryAction, MessageItemTranslationStatus };

package/dist/components/message-translation/message-translation.recipe.mjs

@@ -0,0 +1,27 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/message-translation/message-translation.recipe.ts
+const messageTranslation = tv({ slots: {
+	translationOriginal: ["not-italic", "mt-1"],
+	translationOriginalLabel: ["mb-0.5 font-mono text-mono-meta text-foreground-hint"],
+	translationStatus: ["inline-flex items-center gap-1.5", "mt-1 font-mono text-mono-meta text-foreground-hint [&_svg]:size-3"],
+	translationFailedStatus: [
+		"inline-flex items-center gap-1.5",
+		"mt-1 font-mono text-mono-meta text-warning-strong",
+		"[&_svg]:size-3"
+	],
+	translationProgressTrack: ["h-1"],
+	translationAction: [
+		"inline-flex items-center gap-1",
+		"rounded-[2px] font-sans text-caption font-semibold text-foreground",
+		"decoration-[1.5px] underline-offset-[3px] hover:underline",
+		"outline-none focus-visible:shadow-focus"
+	],
+	translationRetryAction: [
+		"inline-flex items-center gap-1",
+		"rounded-[2px] font-sans text-caption font-semibold text-foreground",
+		"decoration-[1.5px] underline-offset-[3px] hover:underline",
+		"outline-none focus-visible:shadow-focus"
+	]
+} });
+//#endregion
+export { messageTranslation };

package/dist/components/meter/index.d.mts

@@ -0,0 +1,2 @@
+import { Meter, MeterHeader, MeterHeaderProps, MeterIndicator, MeterIndicatorProps, MeterLabel, MeterLabelProps, MeterProps, MeterTrack, MeterTrackProps, MeterValue, MeterValueProps } from "./meter.mjs";
+export { Meter, MeterHeader, type MeterHeaderProps, MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, type MeterProps, MeterTrack, type MeterTrackProps, MeterValue, type MeterValueProps };

package/dist/components/meter/meter.d.mts

@@ -0,0 +1,107 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { VariantProps } from "../../lib/tv.mjs";
+import { ComponentPropsWithRef } from "react";
+import { Meter } from "@base-ui/react/meter";
+//#region src/components/meter/meter.d.ts
+declare const meter: import("tailwind-variants/lite").TVReturnType<{
+  warning: {
+    true: {
+      root: string[];
+    };
+  };
+  size: {
+    sm: {};
+    md: {};
+  };
+}, {
+  root: string[];
+  header: string[];
+  label: string[];
+  value: string[];
+  track: string[];
+  indicator: string[];
+}, undefined, {
+  warning: {
+    true: {
+      root: string[];
+    };
+  };
+  size: {
+    sm: {};
+    md: {};
+  };
+}, {
+  root: string[];
+  header: string[];
+  label: string[];
+  value: string[];
+  track: string[];
+  indicator: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  warning: {
+    true: {
+      root: string[];
+    };
+  };
+  size: {
+    sm: {};
+    md: {};
+  };
+}, {
+  root: string[];
+  header: string[];
+  label: string[];
+  value: string[];
+  track: string[];
+  indicator: string[];
+}>>;
+export type MeterProps = Omit<StyledProps<Meter.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 bar fills with it, and it is the meter's `aria-valuenow`.
+   */
+  used: number;
+  /**
+   * The whole allowance, in the same units as `used`.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * 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 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 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.
+ */
+declare function Meter$1({ size, used, max, warnAt, low, valueText, className, ...props }: MeterProps): import("react").JSX.Element;
+export type MeterHeaderProps = ComponentPropsWithRef<"div">;
+export declare function MeterHeader({ className, ...props }: MeterHeaderProps): import("react").JSX.Element;
+export type MeterLabelProps = StyledProps<Meter.Label.Props>;
+export declare function MeterLabel({ className, ...props }: MeterLabelProps): import("react").JSX.Element;
+export type MeterValueProps = Omit<StyledProps<Meter.Value.Props>, "children">;
+/** Shows the meter's `valueText`, at the end of `MeterHeader`. */
+export declare function MeterValue({ className, ...props }: MeterValueProps): import("react").JSX.Element;
+export type MeterTrackProps = StyledProps<Meter.Track.Props>;
+export declare function MeterTrack({ className, ...props }: MeterTrackProps): import("react").JSX.Element;
+export type MeterIndicatorProps = StyledProps<Meter.Indicator.Props>;
+export declare function MeterIndicator({ className, ...props }: MeterIndicatorProps): import("react").JSX.Element;
+//#endregion
+export { Meter$1 as Meter };

package/dist/components/meter/meter.mjs

@@ -0,0 +1,118 @@
+import { tv } from "../../lib/tv.mjs";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+//#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-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-(--fill-muted)",
+			"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: {
+		warning: { true: { root: ["[--meter-indicator:var(--warning)]", "[--meter-value:var(--warning-strong)]"] } },
+		size: {
+			sm: {},
+			md: {}
+		}
+	},
+	defaultVariants: {
+		warning: false,
+		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 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$1({ 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,
+		warning: level !== "normal"
+	});
+	return /* @__PURE__ */ jsx(MeterTextContext.Provider, {
+		value: valueText,
+		children: /* @__PURE__ */ jsx(Meter.Root, {
+			"data-slot": "meter",
+			"data-size": size,
+			"data-level": level,
+			min: 0,
+			max,
+			value,
+			"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.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.Value, {
+		"data-slot": "meter-value",
+		className: value({ className }),
+		...props,
+		children: () => valueText
+	});
+}
+function MeterTrack({ className, ...props }) {
+	const { track } = meter();
+	return /* @__PURE__ */ jsx(Meter.Track, {
+		"data-slot": "meter-track",
+		className: track({ className }),
+		...props
+	});
+}
+function MeterIndicator({ className, ...props }) {
+	const { indicator } = meter();
+	return /* @__PURE__ */ jsx(Meter.Indicator, {
+		"data-slot": "meter-indicator",
+		className: indicator({ className }),
+		...props
+	});
+}
+//#endregion
+export { Meter$1 as Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue };

package/dist/components/mobile-nav/index.d.mts

@@ -0,0 +1,3 @@
+import { MobileNavItem, MobileNavItemProps, MobileNavLabel, MobileNavLabelProps, MobileNavRoot, MobileNavRootProps } from "./mobile-nav.mjs";
+import { MobileNavServerItem, MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, MobileNavServerPopoverListProps, MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, MobileNavServerPopoverRowLabelProps, MobileNavServerPopoverRowProps } from "./mobile-nav-server.mjs";
+export { MobileNavItem, type MobileNavItemProps, MobileNavLabel, type MobileNavLabelProps, MobileNavRoot, type MobileNavRootProps, 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 };