@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/message-item/message-item.recipe.d.mts

@@ -0,0 +1,101 @@
+import { VariantProps } from "../../lib/tv.mjs";
+//#region src/components/message-item/message-item.recipe.d.ts
+export declare const messageItem: import("tailwind-variants/lite").TVReturnType<{
+  compact: {
+    true: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  gutter: string[];
+  avatarSlot: string[];
+  continuationTime: string[];
+  content: string[];
+  header: string[];
+  senderGroup: string[];
+  sender: string[];
+  senderButton: string[];
+  senderBadges: string[];
+  meta: string[];
+  time: string[];
+  inlineStatus: string[];
+  delegatedBy: string[];
+  delegatedByName: string[];
+  delegatedByButton: string[];
+  delegatedAvatar: string[];
+  edited: string[];
+  body: string[];
+  searchMatch: string[];
+  embedded: string[];
+  attachments: string[];
+  footer: string[];
+  toolbar: string[];
+  toolbarButton: string[];
+}, undefined, {
+  compact: {
+    true: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  gutter: string[];
+  avatarSlot: string[];
+  continuationTime: string[];
+  content: string[];
+  header: string[];
+  senderGroup: string[];
+  sender: string[];
+  senderButton: string[];
+  senderBadges: string[];
+  meta: string[];
+  time: string[];
+  inlineStatus: string[];
+  delegatedBy: string[];
+  delegatedByName: string[];
+  delegatedByButton: string[];
+  delegatedAvatar: string[];
+  edited: string[];
+  body: string[];
+  searchMatch: string[];
+  embedded: string[];
+  attachments: string[];
+  footer: string[];
+  toolbar: string[];
+  toolbarButton: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  compact: {
+    true: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  gutter: string[];
+  avatarSlot: string[];
+  continuationTime: string[];
+  content: string[];
+  header: string[];
+  senderGroup: string[];
+  sender: string[];
+  senderButton: string[];
+  senderBadges: string[];
+  meta: string[];
+  time: string[];
+  inlineStatus: string[];
+  delegatedBy: string[];
+  delegatedByName: string[];
+  delegatedByButton: string[];
+  delegatedAvatar: string[];
+  edited: string[];
+  body: string[];
+  searchMatch: string[];
+  embedded: string[];
+  attachments: string[];
+  footer: string[];
+  toolbar: string[];
+  toolbarButton: string[];
+}>>;
+export type MessageItemVariantProps = VariantProps<typeof messageItem>;
+//#endregion

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

@@ -0,0 +1,114 @@
+import { tv } from "../../lib/tv.mjs";
+import { searchHit } from "../../lib/search-hit.mjs";
+//#region src/components/message-item/message-item.recipe.ts
+const sender = [
+	"min-w-0 truncate",
+	"text-subhead font-bold text-foreground",
+	"rounded-[2px] outline-none focus-visible:shadow-focus"
+];
+const messageItem = tv({
+	slots: {
+		root: [
+			"group/message relative flex h-fit gap-3",
+			"hover:[--mi-toolbar-opacity:1] hover:[--mi-toolbar-pe:auto] focus-within:[--mi-toolbar-opacity:1] focus-within:[--mi-toolbar-pe:auto]",
+			"has-data-popup-open:[--mi-toolbar-opacity:1] has-data-popup-open:[--mi-toolbar-pe:auto]",
+			"hover:[--mi-header-mask:linear-gradient(to_left,transparent_calc(var(--mi-toolbar-width)+8px),black_calc(var(--mi-toolbar-width)+20px))]",
+			"focus-within:[--mi-header-mask:linear-gradient(to_left,transparent_calc(var(--mi-toolbar-width)+8px),black_calc(var(--mi-toolbar-width)+20px))]",
+			"has-data-popup-open:[--mi-header-mask:linear-gradient(to_left,transparent_calc(var(--mi-toolbar-width)+8px),black_calc(var(--mi-toolbar-width)+20px))]",
+			"min-h-0 px-2 py-timeline-row border-t-(length:--spacing-timeline-turn) border-transparent bg-clip-padding",
+			"hover:[--mi-ct-color:var(--foreground-hint)] has-data-popup-open:[--mi-ct-color:var(--foreground-hint)]",
+			"bg-(--mi-row-fill) [--mi-row-fill:var(--located-fill)]",
+			"not-data-located:hover:[--mi-row-fill:var(--fill-subtle)]",
+			"data-popup-open:[--mi-row-fill:var(--fill-subtle)] has-data-popup-open:[--mi-row-fill:var(--fill-subtle)]",
+			"has-data-[slot=message-item-search-match]:[--mi-row-fill:var(--info-soft)] has-data-[slot=message-item-search-match]:hover:[--mi-row-fill:var(--info-soft)]",
+			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:[--mi-row-fill:var(--info-soft)]",
+			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:hover:[--mi-row-fill:var(--info-soft)]",
+			"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground"
+		],
+		gutter: ["relative shrink-0 self-stretch", "w-[35px]"],
+		avatarSlot: [
+			"relative shrink-0 self-start",
+			"flex w-[35px] justify-center",
+			"[&_[data-slot=avatar][data-size=md]]:size-(--mi-avatar,35px)"
+		],
+		continuationTime: [
+			"absolute right-0 select-none whitespace-nowrap tabular-nums",
+			"top-[calc((var(--text-body--line-height)-var(--text-mono-meta--line-height))/2)]",
+			"font-mono text-mono-meta",
+			"text-(--mi-ct-color,transparent)"
+		],
+		content: ["min-w-0 flex-1", "text-body text-foreground"],
+		header: [
+			"mb-px flex min-w-0 items-baseline gap-1.5 overflow-hidden",
+			"mask-(--mi-header-mask,none)",
+			"has-data-[slot=message-item-delegated-by]:[--mi-owner-basis:3rem] has-data-[slot=message-item-delegated-by]:[--mi-owner-flex:1_0]"
+		],
+		senderGroup: [
+			"flex min-w-0 items-baseline gap-1.5 overflow-hidden",
+			"flex-[var(--mi-owner-flex,0_1)_var(--mi-owner-basis,auto)] max-w-max",
+			"*:data-[slot=message-item-meta]:basis-0 *:data-[slot=message-item-meta]:grow",
+			"*:data-[slot=message-item-meta]:-ms-1.5 *:data-[slot=message-item-meta]:before:inline-block *:data-[slot=message-item-meta]:before:w-1.5 *:data-[slot=message-item-meta]:before:content-['']"
+		],
+		sender,
+		senderButton: [
+			...sender,
+			"cursor-pointer",
+			"decoration-[1.5px] underline-offset-[3px] hover:underline"
+		],
+		senderBadges: ["inline-flex shrink-0 items-center gap-1"],
+		meta: ["min-w-0 truncate", "text-caption text-foreground-hint"],
+		time: ["shrink-0 whitespace-nowrap", "font-mono text-mono-meta tabular-nums text-foreground-hint"],
+		inlineStatus: ["shrink-0", "text-caption text-foreground-hint"],
+		delegatedBy: [
+			"inline-grid grid-flow-col items-baseline",
+			"min-w-min shrink whitespace-pre-wrap",
+			"has-data-[slot=message-item-delegated-by-name]:max-w-[45%] has-data-[slot=message-item-delegated-by-name]:whitespace-pre",
+			"has-data-[slot=message-item-delegated-by-button]:max-w-[45%] has-data-[slot=message-item-delegated-by-button]:whitespace-pre",
+			"text-caption text-foreground-muted"
+		],
+		delegatedByName: ["min-w-0 truncate"],
+		delegatedByButton: [
+			"min-w-0 truncate",
+			"cursor-pointer decoration-1 underline-offset-[3px] hover:underline",
+			"rounded-[2px] outline-none focus-visible:shadow-focus"
+		],
+		delegatedAvatar: [
+			"size-[19px] group-data-[size=md]/avatar:size-[19px]",
+			"rounded-sticker outline-none",
+			"bg-layer-canvas bg-[linear-gradient(var(--mi-row-fill,transparent),var(--mi-row-fill,transparent))]",
+			"data-deleted:*:data-[slot=avatar]:grayscale data-deleted:*:data-[slot=avatar]:opacity-dimmed",
+			"shadow-[0_0_0_1.5px_var(--mi-row-fill,transparent),0_0_0_1.5px_var(--layer-canvas)]",
+			"dark:shadow-[0_0_0_3px_var(--mi-row-fill,transparent),0_0_0_3px_var(--layer-canvas)]"
+		],
+		edited: ["ms-1 whitespace-nowrap", "text-caption text-foreground-hint"],
+		body: [
+			"wrap-break-word select-text",
+			"**:select-text",
+			"text-body text-foreground",
+			"selection:bg-selection"
+		],
+		searchMatch: searchHit,
+		embedded: ["min-w-0", "mt-2"],
+		attachments: ["stack-y-2", "mt-2"],
+		footer: ["mt-1.5 flex flex-wrap items-center gap-1.5"],
+		toolbar: [
+			"absolute z-20 flex items-center",
+			"opacity-(--mi-toolbar-opacity,0)",
+			"[pointer-events:var(--mi-toolbar-pe,none)]",
+			"top-[-18px] right-3 gap-1 overflow-visible rounded-container p-1",
+			"bg-layer-popover ring-1 ring-line-seam ring-inset shadow-float"
+		],
+		toolbarButton: [
+			"inline-flex shrink-0 items-center justify-center",
+			"[&_svg]:shrink-0",
+			"size-7 rounded-chip border-0 bg-transparent p-0",
+			"text-foreground-muted hover:bg-fill-medium active:bg-fill-medium",
+			"data-popup-open:bg-fill-medium data-active:text-foreground",
+			"outline-none focus-visible:shadow-focus",
+			"[&_svg]:size-4"
+		]
+	},
+	variants: { compact: { true: { root: ["border-t-0"] } } }
+});
+//#endregion
+export { messageItem };

package/dist/components/message-item/message-multi-select.d.mts

@@ -0,0 +1,15 @@
+import { CheckboxProps } from "../checkbox/checkbox.mjs";
+import "../checkbox/index.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-multi-select.d.ts
+export type MessageMultiSelectProps = useRender.ComponentProps<"div">;
+export declare function MessageMultiSelect({ className, render, ...props }: MessageMultiSelectProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageMultiSelectToolbarProps = useRender.ComponentProps<"div">;
+/** Shared select-mode toolbar shell. Consumers compose the count and actions as children. */
+export declare function MessageMultiSelectToolbar({ className, render, ...props }: MessageMultiSelectToolbarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageMultiSelectToolbarActionsProps = useRender.ComponentProps<"div">;
+/** The toolbar's actions, at its end, 4px apart like every floating toolbar's buttons. */
+export declare function MessageMultiSelectToolbarActions({ className, render, ...props }: MessageMultiSelectToolbarActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageMultiSelectCheckboxProps = CheckboxProps;
+export declare function MessageMultiSelectCheckbox({ className, ...props }: MessageMultiSelectCheckboxProps): import("react").JSX.Element;
+//#endregion

package/dist/components/message-item/message-multi-select.mjs

@@ -0,0 +1,49 @@
+import { Checkbox } from "../checkbox/checkbox.mjs";
+import { messageMultiSelect } from "./message-multi-select.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-item/message-multi-select.tsx
+function MessageMultiSelect({ className, render, ...props }) {
+	const { root } = messageMultiSelect();
+	const defaultProps = { className: root({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-multi-select" }
+	});
+}
+/** Shared select-mode toolbar shell. Consumers compose the count and actions as children. */
+function MessageMultiSelectToolbar({ className, render, ...props }) {
+	const { toolbar } = messageMultiSelect();
+	const defaultProps = { className: toolbar({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-multi-select-toolbar" }
+	});
+}
+/** The toolbar's actions, at its end, 4px apart like every floating toolbar's buttons. */
+function MessageMultiSelectToolbarActions({ className, render, ...props }) {
+	const { toolbarActions } = messageMultiSelect();
+	const defaultProps = { className: toolbarActions({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-multi-select-toolbar-actions" }
+	});
+}
+function MessageMultiSelectCheckbox({ className, ...props }) {
+	const { checkbox } = messageMultiSelect();
+	return /* @__PURE__ */ jsx(Checkbox, {
+		"data-slot": "message-multi-select-checkbox",
+		className: checkbox({ className }),
+		shape: "square",
+		...props
+	});
+}
+//#endregion
+export { MessageMultiSelect, MessageMultiSelectCheckbox, MessageMultiSelectToolbar, MessageMultiSelectToolbarActions };

package/dist/components/message-item/message-multi-select.recipe.mjs

@@ -0,0 +1,23 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/message-item/message-multi-select.recipe.ts
+const messageMultiSelect = tv({ slots: {
+	root: ["flex min-h-0 min-w-0 flex-1 flex-col"],
+	checkbox: [
+		"self-start",
+		"data-checked:shadow-none data-indeterminate:shadow-none",
+		"hover:data-checked:shadow-none hover:data-indeterminate:shadow-none",
+		"mt-2 rounded-sticker"
+	],
+	toolbar: [
+		"flex items-center",
+		"gap-2 rounded-container py-1 pr-1 pl-2.5",
+		"**:data-[slot=button]:h-7 **:data-[slot=button]:w-auto **:data-[slot=button]:min-w-7",
+		"**:data-[slot=button]:rounded-chip",
+		"**:data-[slot=button]:after:inset-x-[-3px] **:data-[slot=button]:first:after:left-[-9.5px] **:data-[slot=button]:last:after:right-[-9.5px]",
+		"pointer-coarse:**:data-[slot=button]:after:inset-y-[-9.5px]",
+		"bg-layer-popover ring-1 ring-line-seam shadow-float"
+	],
+	toolbarActions: ["flex min-w-0 flex-1 flex-wrap items-center justify-end", "gap-1"]
+} });
+//#endregion
+export { messageMultiSelect };

package/dist/components/message-item/message-reaction.d.mts

@@ -0,0 +1,39 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { DropdownMenuContentProps } from "../dropdown-menu/dropdown-menu.mjs";
+import "../dropdown-menu/index.mjs";
+import { TooltipContentProps } from "../tooltip/tooltip.mjs";
+import "../tooltip/index.mjs";
+import { useRender } from "@base-ui/react/use-render";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/components/message-item/message-reaction.d.ts
+export type MessageReactionChipProps = Omit<StyledProps<Toggle.Props>, "type">;
+export declare function MessageReactionChip({ className, ...props }: MessageReactionChipProps): import("react").JSX.Element;
+export type MessageReactionErrorIndicatorProps = useRender.ComponentProps<"span">;
+export declare function MessageReactionErrorIndicator({ className, render, ...props }: MessageReactionErrorIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReactionGlyphProps = useRender.ComponentProps<"span">;
+export declare function MessageReactionGlyph({ className, render, ...props }: MessageReactionGlyphProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReactionCountProps = useRender.ComponentProps<"span">;
+export declare function MessageReactionCount({ children, className, render, ...props }: MessageReactionCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReactionAddButtonProps = useRender.ComponentProps<"button">;
+export declare function MessageReactionAddButton({ className, render, ...props }: MessageReactionAddButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReactionQuickRowProps = useRender.ComponentProps<"div">;
+export declare function MessageReactionQuickRow({ className, render, ...props }: MessageReactionQuickRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReactionQuickButtonProps = useRender.ComponentProps<"button">;
+export declare function MessageReactionQuickButton({ className, render, ...props }: MessageReactionQuickButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReactionPickerStaticProps = useRender.ComponentProps<"div">;
+export declare function MessageReactionPickerStatic({ className, render, ...props }: MessageReactionPickerStaticProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReactionPickerContentProps = DropdownMenuContentProps;
+export declare function MessageReactionPickerContent({ className, ...props }: MessageReactionPickerContentProps): import("react").JSX.Element;
+export type MessageReactionTooltipContentProps = TooltipContentProps;
+export declare function MessageReactionTooltipContent({ className, ...props }: MessageReactionTooltipContentProps): import("react").JSX.Element;
+export type MessageReactionTooltipNamesProps = useRender.ComponentProps<"span">;
+export declare function MessageReactionTooltipNames({ className, render, ...props }: MessageReactionTooltipNamesProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReactionTooltipNameProps = useRender.ComponentProps<"span">;
+export declare function MessageReactionTooltipName({ className, render, ...props }: MessageReactionTooltipNameProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReactionTooltipNameTextProps = useRender.ComponentProps<"span">;
+export declare function MessageReactionTooltipNameText({ className, render, ...props }: MessageReactionTooltipNameTextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReactionTooltipSeparatorProps = useRender.ComponentProps<"span">;
+export declare function MessageReactionTooltipSeparator({ className, render, ...props }: MessageReactionTooltipSeparatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReactionTooltipMetaProps = useRender.ComponentProps<"span">;
+export declare function MessageReactionTooltipMeta({ className, render, ...props }: MessageReactionTooltipMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/message-item/message-reaction.mjs

@@ -0,0 +1,188 @@
+import { TooltipContent } from "../tooltip/tooltip.mjs";
+import { DropdownMenuContent } from "../dropdown-menu/dropdown-menu.mjs";
+import { messageReaction, reactionCountKeyframes, reactionCountTiming } from "./message-reaction.recipe.mjs";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/components/message-item/message-reaction.tsx
+function MessageReactionChip({ className, ...props }) {
+	const { chip } = messageReaction();
+	return /* @__PURE__ */ jsx(Toggle, {
+		...props,
+		type: "button",
+		"data-slot": "message-reaction-chip",
+		className: chip({ className })
+	});
+}
+function MessageReactionErrorIndicator({ className, render, ...props }) {
+	const { errorIndicator } = messageReaction();
+	const defaultProps = {
+		className: errorIndicator({ className }),
+		role: "status"
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-error-indicator" }
+	});
+}
+function MessageReactionGlyph({ className, render, ...props }) {
+	const { glyph: glyphSlot } = messageReaction();
+	const defaultProps = { className: glyphSlot({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-glyph" }
+	});
+}
+function MessageReactionCount({ children, className, render, ...props }) {
+	const elementRef = useRef(null);
+	const value = typeof children === "number" && Number.isFinite(children) ? children : null;
+	const previousValue = useRef(value);
+	useEffect(() => {
+		const previous = previousValue.current;
+		previousValue.current = value;
+		if (value === null || previous === null || value === previous) return;
+		const element = elementRef.current;
+		const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+		if (!element?.animate || reducedMotion.matches) return;
+		const animation = element.animate(reactionCountKeyframes, reactionCountTiming);
+		const handleMotionChange = () => {
+			if (reducedMotion.matches) animation.cancel();
+		};
+		reducedMotion.addEventListener("change", handleMotionChange);
+		return () => {
+			animation.cancel();
+			reducedMotion.removeEventListener("change", handleMotionChange);
+		};
+	}, [value]);
+	const { count } = messageReaction();
+	const defaultProps = {
+		className: count({ className }),
+		children,
+		ref: elementRef
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-count" }
+	});
+}
+function MessageReactionAddButton({ className, render, ...props }) {
+	const { addButton } = messageReaction();
+	const defaultProps = {
+		type: "button",
+		className: addButton({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-add-button" }
+	});
+}
+function MessageReactionQuickRow({ className, render, ...props }) {
+	const { quickRow } = messageReaction();
+	const defaultProps = { className: quickRow({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-quick-row" }
+	});
+}
+function MessageReactionQuickButton({ className, render, ...props }) {
+	const { quickButton } = messageReaction();
+	const defaultProps = {
+		type: "button",
+		className: quickButton({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-quick-button" }
+	});
+}
+function MessageReactionPickerStatic({ className, render, ...props }) {
+	const { pickerStatic } = messageReaction();
+	const defaultProps = { className: pickerStatic({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-picker-static" }
+	});
+}
+function MessageReactionPickerContent({ className, ...props }) {
+	const { pickerContent } = messageReaction();
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-slot": "message-reaction-picker",
+		className: pickerContent({ className }),
+		...props
+	});
+}
+function MessageReactionTooltipContent({ className, ...props }) {
+	const { tooltip } = messageReaction();
+	return /* @__PURE__ */ jsx(TooltipContent, {
+		className: tooltip({ className }),
+		...props
+	});
+}
+function MessageReactionTooltipNames({ className, render, ...props }) {
+	const { tooltipNames } = messageReaction();
+	const defaultProps = { className: tooltipNames({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-tooltip-names" }
+	});
+}
+function MessageReactionTooltipName({ className, render, ...props }) {
+	const { tooltipName } = messageReaction();
+	const defaultProps = { className: tooltipName({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-tooltip-name" }
+	});
+}
+function MessageReactionTooltipNameText({ className, render, ...props }) {
+	const { tooltipNameText } = messageReaction();
+	const defaultProps = { className: tooltipNameText({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-tooltip-name-text" }
+	});
+}
+function MessageReactionTooltipSeparator({ className, render, ...props }) {
+	const { tooltipSeparator } = messageReaction();
+	const defaultProps = { className: tooltipSeparator({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-tooltip-separator" }
+	});
+}
+function MessageReactionTooltipMeta({ className, render, ...props }) {
+	const { tooltipMeta } = messageReaction();
+	const defaultProps = { className: tooltipMeta({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-tooltip-meta" }
+	});
+}
+//#endregion
+export { MessageReactionAddButton, MessageReactionChip, MessageReactionCount, MessageReactionErrorIndicator, MessageReactionGlyph, MessageReactionPickerContent, MessageReactionPickerStatic, MessageReactionQuickButton, MessageReactionQuickRow, MessageReactionTooltipContent, MessageReactionTooltipMeta, MessageReactionTooltipName, MessageReactionTooltipNameText, MessageReactionTooltipNames, MessageReactionTooltipSeparator };

package/dist/components/message-item/message-reaction.recipe.mjs

@@ -0,0 +1,76 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/message-item/message-reaction.recipe.ts
+const reactionCountKeyframes = [
+	{
+		opacity: .7,
+		transform: "translateY(1px) scale(0.92)",
+		offset: 0
+	},
+	{
+		opacity: 1,
+		transform: "translateY(-1px) scale(1.16)",
+		offset: .45
+	},
+	{
+		opacity: 1,
+		transform: "translateY(0) scale(1)",
+		offset: 1
+	}
+];
+const reactionCountTiming = {
+	duration: 180,
+	easing: "cubic-bezier(0.2, 0, 0.2, 1)"
+};
+const messageReaction = tv({ slots: {
+	chip: [
+		"inline-flex min-w-0 max-w-full items-center overflow-hidden whitespace-nowrap",
+		"transition-colors",
+		"h-6 gap-1 rounded-chip px-[7px] text-callout text-foreground",
+		"bg-fill-muted hover:overlay-medium active:overlay-medium",
+		"data-pressed:bg-attention-soft",
+		"has-data-[slot=message-reaction-error-indicator]:bg-warning-soft",
+		"outline-none focus-visible:shadow-focus",
+		"[&_[data-slot=message-reaction-glyph]>svg]:size-4"
+	],
+	errorIndicator: ["sr-only"],
+	glyph: ["inline-flex items-center justify-center leading-none", "[&>svg]:size-[13px] [&>svg]:shrink-0"],
+	count: ["inline-block origin-center font-mono tabular-nums", "text-mono-meta font-bold"],
+	addButton: [
+		"inline-flex min-w-0 items-center justify-center",
+		"transition-colors",
+		"[&_svg]:shrink-0",
+		"h-6 rounded-chip px-1.5 [&_svg]:size-4",
+		"bg-fill-muted text-foreground-muted hover:overlay-medium active:overlay-medium",
+		"outline-none focus-visible:shadow-focus"
+	],
+	quickRow: [
+		"flex shrink-0 items-center",
+		"justify-between gap-0.5 bg-layer-popover px-0.75 py-0",
+		"[&>[role=menuitem]]:size-9 [&>[role=menuitem]]:p-0 *:[[role=menuitem]]:justify-center"
+	],
+	quickButton: [
+		"flex items-center justify-center",
+		"bg-transparent transition-colors",
+		"size-9 rounded-chip p-0 text-xl leading-none text-foreground-muted",
+		"hover:bg-brand-soft data-highlighted:bg-brand-soft active:bg-brand-soft",
+		"outline-none focus-visible:shadow-focus"
+	],
+	pickerContent: [
+		"inline-flex items-center",
+		"min-w-0 flex-row gap-0.5 p-1",
+		"[&>[role=menuitem]]:size-9 [&>[role=menuitem]]:p-0"
+	],
+	pickerStatic: [
+		"inline-flex items-center",
+		"min-w-0 flex-row gap-0.5 rounded-container p-1",
+		"bg-layer-popover ring-1 ring-line-seam shadow-float outline-none"
+	],
+	tooltip: ["inline-block max-w-[280px]", "px-2.5 py-1 text-footnote font-medium"],
+	tooltipNames: ["flex max-w-60 flex-wrap items-center gap-y-0.5"],
+	tooltipName: ["inline-flex min-w-0 items-baseline leading-5"],
+	tooltipNameText: ["max-w-28 truncate"],
+	tooltipSeparator: ["shrink-0", "text-foreground-on-hud/70"],
+	tooltipMeta: ["leading-5", "text-foreground-on-hud/70"]
+} });
+//#endregion
+export { messageReaction, reactionCountKeyframes, reactionCountTiming };

package/dist/components/message-item/message-reference.d.mts

@@ -0,0 +1,50 @@
+import { MessageReferenceChipVariant, MessageReferenceTextVariant } from "./message-reference.recipe.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message-item/message-reference.d.ts
+type SpanProps = useRender.ComponentProps<"span">;
+export type MessageReferenceTextProps = SpanProps & {
+  variant?: MessageReferenceTextVariant;
+};
+export declare function MessageReferenceText({ className, render, variant, ...props }: MessageReferenceTextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReferenceIndicatorProps = useRender.ComponentProps<"span">;
+export declare function MessageReferenceIndicator({ className, render, ...props }: MessageReferenceIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReferenceReadMarkProps = useRender.ComponentProps<"span">;
+/**
+ * The read receipt on a mention: a bare lime check (10px, no box) at the
+ * mention's top right, once the one mentioned has read the message. Put it
+ * last inside the mention, and render nothing until then. The check is
+ * decorative; `children` is what a screen reader says instead ("Read"),
+ * visually hidden.
+ */
+export declare function MessageReferenceReadMark({ children, className, render, ...props }: MessageReferenceReadMarkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReferenceChipProps = SpanProps & {
+  variant?: MessageReferenceChipVariant;
+  /**
+   * Stops the chip at `min(100%, 24em)`; a longer `MessageReferenceLabel`
+   * truncates at the end. For words Raft doesn't write, such as an app's title.
+   */
+  capped?: boolean;
+};
+export declare function MessageReferenceChip({ className, render, variant, capped, ...props }: MessageReferenceChipProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReferenceLabelProps = useRender.ComponentProps<"span">;
+export declare function MessageReferenceLabel({ className, render, ...props }: MessageReferenceLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReferenceSuffixProps = useRender.ComponentProps<"span">;
+/** A short note after a chip's label in muted machine type, such as `msg` on a
+ *  link to a message. It lines up with the label by the middle of its letters. */
+export declare function MessageReferenceSuffix({ className, render, ...props }: MessageReferenceSuffixProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReferenceIconProps = useRender.ComponentProps<"span">;
+/**
+ * The chip's leading icon when it is not a plain svg: an image or a `3xs`
+ * Avatar, such as an app's registered icon. It holds one child at 14px,
+ * centred on the chip. Put it first in the chip.
+ */
+export declare function MessageReferenceIcon({ className, render, ...props }: MessageReferenceIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReferencePendingProps = SpanProps & {
+  /** The same cap as `MessageReferenceChip`'s, so the chip that replaces it keeps its width. */
+  capped?: boolean;
+};
+export declare function MessageReferencePending({ className, render, capped, ...props }: MessageReferencePendingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MessageReferenceUnavailableProps = SpanProps;
+export declare function MessageReferenceUnavailable({ className, render, ...props }: MessageReferenceUnavailableProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export type { MessageReferenceChipVariant, MessageReferenceTextVariant };