@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/inbox-item/inbox-item-skeleton.mjs

@@ -0,0 +1,89 @@
+import { Skeleton } from "../skeleton/skeleton.mjs";
+import { InboxItem, InboxItemBody, InboxItemContent, InboxItemContext, InboxItemHeading, InboxItemLeading, InboxItemTimestamp, InboxItemTitle, InboxItemTrailing } from "./inbox-item.mjs";
+import { inboxItemSkeleton } from "./inbox-item-skeleton.recipe.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/inbox-item/inbox-item-skeleton.tsx
+/**
+* A placeholder for one `InboxItem` while the list loads. It is an
+* `InboxItem` itself, with the same parts as the loaded row (an optional
+* leading block, the context line, the title, the excerpt, the timestamp),
+* each holding a bar instead of text. The padding, the divider and every
+* line's height are the loaded row's, so nothing moves when the content
+* arrives. Match `density`, `leading` and `context` to the rows it stands for.
+* Hidden from assistive technology: mark the region that stays while the
+* list loads `aria-busy`.
+*/
+function InboxItemSkeleton({ density, leading = false, context = false, ...props }) {
+	const slots = inboxItemSkeleton();
+	const bar = (width) => /* @__PURE__ */ jsx(Skeleton, {
+		variant: "line",
+		className: slots.bar({ className: width })
+	});
+	return /* @__PURE__ */ jsxs(InboxItem, {
+		"aria-hidden": true,
+		"data-skeleton": "",
+		density,
+		disabled: true,
+		...props,
+		className: slots.row({ className: props.className }),
+		children: [
+			leading ? /* @__PURE__ */ jsx(InboxItemLeading, { children: /* @__PURE__ */ jsx(Skeleton, { className: slots.leading() }) }) : null,
+			/* @__PURE__ */ jsxs(InboxItemContent, { children: [
+				context ? /* @__PURE__ */ jsx(InboxItemContext, { children: /* @__PURE__ */ jsx("span", {
+					className: slots.line(),
+					children: bar(slots.contextBar())
+				}) }) : null,
+				/* @__PURE__ */ jsx(InboxItemHeading, { children: /* @__PURE__ */ jsx(InboxItemTitle, {
+					className: slots.title(),
+					children: bar(slots.titleBar())
+				}) }),
+				/* @__PURE__ */ jsx(InboxItemBody, { children: bar(slots.bodyBar()) })
+			] }),
+			/* @__PURE__ */ jsx(InboxItemTrailing, { children: /* @__PURE__ */ jsx(InboxItemTimestamp, { children: bar(slots.timestampBar()) }) })
+		]
+	});
+}
+/**
+* The list of `InboxItemSkeleton` rows that stands in for a list of
+* `InboxItem` rows while it loads, with nothing between or around the rows
+* that the loaded list doesn't have (no border, no card): only the list's
+* 2px gap, which the loaded list has too (design/patterns/lists.md). Renders
+* `count` rows of the given shape, or its children, once `delay` (1 second by
+* default) has passed. It isn't `aria-busy` itself: it goes away when the
+* content arrives, so mark the region that stays, such as the list's panel or
+* viewport, `aria-busy` while it loads.
+*/
+function InboxItemSkeletonList({ count = 6, delay = 1e3, density, leading, context, children, className, render, ...props }) {
+	const { list } = inboxItemSkeleton();
+	const shown = useDelayPassed(delay);
+	const defaultProps = {
+		"data-slot": "inbox-item-skeleton-list",
+		"data-waiting": shown ? void 0 : "",
+		className: list({ className }),
+		children: shown ? children ?? Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(InboxItemSkeleton, {
+			density,
+			leading,
+			context
+		}, index)) : null
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** Whether `delay` milliseconds have passed since mount; at once for `0`. */
+function useDelayPassed(delay) {
+	const [passed, setPassed] = useState(false);
+	useEffect(() => {
+		if (delay <= 0) return;
+		const timer = setTimeout(() => setPassed(true), delay);
+		return () => clearTimeout(timer);
+	}, [delay]);
+	return passed || delay <= 0;
+}
+//#endregion
+export { InboxItemSkeleton, InboxItemSkeletonList };

package/dist/components/inbox-item/inbox-item-skeleton.recipe.mjs

@@ -0,0 +1,20 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/inbox-item/inbox-item-skeleton.recipe.ts
+const inboxItemSkeleton = tv({ slots: {
+	list: ["flex min-w-0 flex-col gap-0.5"],
+	row: [
+		"[--inbox-item-skeleton-context:5rem] [--inbox-item-skeleton-title:60%] [--inbox-item-skeleton-body:80%]",
+		"nth-[3n+2]:[--inbox-item-skeleton-context:4rem] nth-[3n+2]:[--inbox-item-skeleton-title:45%] nth-[3n+2]:[--inbox-item-skeleton-body:70%]",
+		"nth-[3n]:[--inbox-item-skeleton-context:6rem] nth-[3n]:[--inbox-item-skeleton-title:55%] nth-[3n]:[--inbox-item-skeleton-body:75%]"
+	],
+	leading: ["size-[35px]"],
+	line: ["min-w-0 flex-1"],
+	title: ["pl-0"],
+	bar: ["inline-block h-[0.75em] max-w-full align-middle"],
+	contextBar: ["w-(--inbox-item-skeleton-context)"],
+	titleBar: ["w-(--inbox-item-skeleton-title)"],
+	bodyBar: ["w-(--inbox-item-skeleton-body)"],
+	timestampBar: ["w-9"]
+} });
+//#endregion
+export { inboxItemSkeleton };

package/dist/components/inbox-item/inbox-item.d.mts

@@ -0,0 +1,71 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/inbox-item/inbox-item.d.ts
+/**
+ * `compact`: one line for the title and one for the excerpt, the row centred
+ * on its leading visual, and the trailing column set on the same two 20px
+ * lines (a conversation list). Leave it unset for the default two-line rows.
+ */
+export type InboxItemDensity = "compact";
+export type InboxItemProps = useRender.ComponentProps<"div"> & {
+  active?: boolean;
+  density?: InboxItemDensity;
+  disabled?: boolean;
+};
+export declare function InboxItem({ active, className, density, disabled, render, ...props }: InboxItemProps): import("react").JSX.Element;
+export type InboxItemTriggerProps = Omit<useRender.ComponentProps<"button">, "type">;
+export declare function InboxItemTrigger({ className, onClick, render, ...props }: InboxItemTriggerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * A leading visual before the content: a 36px avatar, a channel tile. The
+ * divider between rows starts after it.
+ */
+export type InboxItemLeadingProps = useRender.ComponentProps<"div">;
+export declare function InboxItemLeading({ className, render, ...props }: InboxItemLeadingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type InboxItemSelectionProps = useRender.ComponentProps<"div">;
+export declare function InboxItemSelection({ className, render, ...props }: InboxItemSelectionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type InboxItemContentProps = useRender.ComponentProps<"div">;
+export declare function InboxItemContent({ className, render, ...props }: InboxItemContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type InboxItemContextProps = useRender.ComponentProps<"div">;
+export declare function InboxItemContext({ className, render, ...props }: InboxItemContextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type InboxItemSubtitleProps = useRender.ComponentProps<"div">;
+export declare function InboxItemSubtitle({ className, render, ...props }: InboxItemSubtitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type InboxItemHeadingProps = useRender.ComponentProps<"div">;
+export declare function InboxItemHeading({ className, render, ...props }: InboxItemHeadingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type InboxItemTitleProps = useRender.ComponentProps<"div">;
+export declare function InboxItemTitle({ className, render, ...props }: InboxItemTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type InboxItemTrailingProps = useRender.ComponentProps<"div">;
+export declare function InboxItemTrailing({ className, render, ...props }: InboxItemTrailingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type InboxItemTimestampProps = useRender.ComponentProps<"span">;
+export declare function InboxItemTimestamp({ className, render, ...props }: InboxItemTimestampProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Marks at the end of a line: a mention, muted, an unread count. A 20px line
+ * of its own in `InboxItemTrailing`, so it sits beside the excerpt.
+ */
+export type InboxItemMarksProps = useRender.ComponentProps<"div">;
+export declare function InboxItemMarks({ className, render, ...props }: InboxItemMarksProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Takes the pointer inside the content, which otherwise lets it through to
+ * the trigger, so a badge's tooltip opens on hover. A click on it still opens
+ * the item: it is passed on to `InboxItemTrigger`.
+ */
+export type InboxItemHoverTargetProps = useRender.ComponentProps<"span">;
+export declare function InboxItemHoverTarget({ className, onClick, render, ...props }: InboxItemHoverTargetProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type InboxItemBodyProps = useRender.ComponentProps<"p">;
+export declare function InboxItemBody({ className, render, ...props }: InboxItemBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type InboxItemMessageProps = useRender.ComponentProps<"p">;
+export declare function InboxItemMessage({ className, render, ...props }: InboxItemMessageProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type InboxItemSenderProps = useRender.ComponentProps<"span">;
+export declare function InboxItemSender({ className, render, ...props }: InboxItemSenderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type InboxItemMetadataProps = useRender.ComponentProps<"div">;
+export declare function InboxItemMetadata({ className, render, ...props }: InboxItemMetadataProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type InboxItemActionsProps = useRender.ComponentProps<"div"> & {
+  /**
+   * `hover`: with a mouse, the actions stay hidden until the row is hovered,
+   * holds focus, is `active` or has a menu open, and then take the place of
+   * the rest of `InboxItemTrailing` (the timestamp, the marks, the attention
+   * dot), which steps aside. On a touch screen (`pointer: coarse`) they show
+   * at rest and the rest of the trailing column moves over to make room.
+   */
+  reveal?: "hover";
+};
+export declare function InboxItemActions({ className, render, reveal, ...props }: InboxItemActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/inbox-item/inbox-item.mjs

@@ -0,0 +1,276 @@
+import { inboxItem } from "./inbox-item.recipe.mjs";
+import { createContext, useContext } from "react";
+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/inbox-item/inbox-item.tsx
+const InboxItemDisabledContext = createContext(false);
+const InboxItemDensityContext = createContext(void 0);
+function InboxItem({ active = false, className, density, disabled = false, render, ...props }) {
+	const { item } = inboxItem({ density });
+	const defaultProps = {
+		"aria-disabled": disabled || void 0,
+		"data-active": active ? "true" : void 0,
+		"data-density": density,
+		"data-disabled": disabled ? "true" : void 0,
+		"data-slot": "inbox-item",
+		className: item({ className: `group/inbox-item ${className ?? ""}`.trim() })
+	};
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+	return /* @__PURE__ */ jsx(InboxItemDisabledContext.Provider, {
+		value: disabled,
+		children: /* @__PURE__ */ jsx(InboxItemDensityContext.Provider, {
+			value: density,
+			children: element
+		})
+	});
+}
+function InboxItemTrigger({ className, onClick, render, ...props }) {
+	const disabled = useContext(InboxItemDisabledContext);
+	const { itemTrigger } = inboxItem();
+	const defaultProps = {
+		type: render ? void 0 : "button",
+		"aria-disabled": disabled || void 0,
+		"data-disabled": disabled ? "true" : void 0,
+		"data-slot": "inbox-item-open",
+		disabled: render ? void 0 : disabled,
+		tabIndex: disabled && render ? -1 : void 0,
+		className: itemTrigger({ className }),
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			onClick?.(event);
+		}
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemLeading({ className, render, ...props }) {
+	const { itemLeading } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-leading",
+		className: itemLeading({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemSelection({ className, render, ...props }) {
+	const { itemSelection } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-selection",
+		className: itemSelection({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemContent({ className, render, ...props }) {
+	const { itemContent } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-content",
+		className: itemContent({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemContext({ className, render, ...props }) {
+	const { itemContext } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-context",
+		className: itemContext({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemSubtitle({ className, render, ...props }) {
+	const { itemSubtitle } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-subtitle",
+		className: itemSubtitle({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemHeading({ className, render, ...props }) {
+	const { itemHeading } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-heading",
+		className: itemHeading({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemTitle({ className, render, ...props }) {
+	const density = useContext(InboxItemDensityContext);
+	const { itemTitle } = inboxItem({ density });
+	const defaultProps = {
+		"data-slot": "inbox-item-title",
+		className: itemTitle({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemTrailing({ className, render, ...props }) {
+	const density = useContext(InboxItemDensityContext);
+	const { itemTrailing } = inboxItem({ density });
+	const defaultProps = {
+		"data-slot": "inbox-item-trailing",
+		className: itemTrailing({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemTimestamp({ className, render, ...props }) {
+	const density = useContext(InboxItemDensityContext);
+	const { itemTimestamp } = inboxItem({ density });
+	const defaultProps = {
+		"data-slot": "inbox-item-timestamp",
+		className: itemTimestamp({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemMarks({ className, render, ...props }) {
+	const { itemMarks } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-marks",
+		className: itemMarks({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemHoverTarget({ className, onClick, render, ...props }) {
+	const { itemHoverTarget } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-hover-target",
+		className: itemHoverTarget({ className }),
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			const trigger = event.currentTarget.closest("[data-slot=inbox-item]")?.querySelector("[data-slot=inbox-item-open]");
+			if (!trigger) return;
+			trigger.dispatchEvent(new MouseEvent("click", {
+				bubbles: true,
+				cancelable: true,
+				detail: event.detail,
+				altKey: event.altKey,
+				ctrlKey: event.ctrlKey,
+				metaKey: event.metaKey,
+				shiftKey: event.shiftKey
+			}));
+		}
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemBody({ className, render, ...props }) {
+	const density = useContext(InboxItemDensityContext);
+	const { itemBody } = inboxItem({ density });
+	const defaultProps = {
+		"data-slot": "inbox-item-body",
+		className: itemBody({ className })
+	};
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemMessage({ className, render, ...props }) {
+	const density = useContext(InboxItemDensityContext);
+	const { itemMessage } = inboxItem({ density });
+	const defaultProps = {
+		"data-slot": "inbox-item-message",
+		className: itemMessage({ className })
+	};
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemSender({ className, render, ...props }) {
+	const { itemSender } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-sender",
+		className: itemSender({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemMetadata({ className, render, ...props }) {
+	const { itemMetadata } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-metadata",
+		className: itemMetadata({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemActions({ className, render, reveal, ...props }) {
+	const density = useContext(InboxItemDensityContext);
+	const { itemActions } = inboxItem({
+		density,
+		reveal
+	});
+	const defaultProps = {
+		"data-reveal": reveal,
+		"data-slot": "inbox-item-actions",
+		className: itemActions({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { InboxItem, InboxItemActions, InboxItemBody, InboxItemContent, InboxItemContext, InboxItemHeading, InboxItemHoverTarget, InboxItemLeading, InboxItemMarks, InboxItemMessage, InboxItemMetadata, InboxItemSelection, InboxItemSender, InboxItemSubtitle, InboxItemTimestamp, InboxItemTitle, InboxItemTrailing, InboxItemTrigger };

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

@@ -0,0 +1,137 @@
+import { tv } from "../../lib/tv.mjs";
+import { listCell, listCellStates } from "../../lib/list-cell.mjs";
+//#region src/components/inbox-item/inbox-item.recipe.ts
+const inboxItem = tv({
+	slots: {
+		item: [
+			"relative grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-3 text-left",
+			"has-data-[slot=inbox-item-selection]:grid-cols-[auto_minmax(0,1fr)_auto]",
+			"has-data-[slot=inbox-item-leading]:grid-cols-[auto_minmax(0,1fr)_auto]",
+			"has-data-[slot=inbox-item-selection]:has-data-[slot=inbox-item-leading]:grid-cols-[auto_auto_minmax(0,1fr)_auto]",
+			"gap-x-3 gap-y-0 rounded-none border-0 py-3",
+			listCell,
+			listCellStates,
+			"data-[active=true]:before:bg-fill-cell-selected",
+			"data-disabled:pointer-events-none",
+			"has-[[data-slot=inbox-item-open]:focus-visible]:keyboard:before:inset-ring-2 has-[[data-slot=inbox-item-open]:focus-visible]:keyboard:before:inset-ring-foreground",
+			"not-data-[density=compact]:has-data-[slot=inbox-item-trailing]:[--inbox-item-content-display:grid] not-data-[density=compact]:has-data-[slot=inbox-item-trailing]:[--inbox-item-content-end:-1]"
+		],
+		itemTrigger: ["absolute inset-0 z-0 outline-none"],
+		itemLeading: ["pointer-events-none relative z-10 flex size-9 shrink-0 items-center justify-center"],
+		itemLeadingBadge: [
+			"absolute -right-0.5 -bottom-0.5 z-10 inline-flex size-3.5 items-center justify-center",
+			"rounded-[3px] border border-sticker-ink outline-2 outline-layer-canvas outline-solid",
+			"bg-layer-canvas bg-[linear-gradient(var(--info-soft),var(--info-soft))] text-foreground",
+			"[&_svg]:size-2.5 [&_svg]:shrink-0"
+		],
+		itemSelection: ["relative z-10 flex size-5 shrink-0 items-center justify-center"],
+		itemContent: [
+			"pointer-events-none relative z-10 min-w-0 flex-1 text-left",
+			"-col-start-3 col-end-(--inbox-item-content-end) row-start-1",
+			"[display:var(--inbox-item-content-display,block)] grid-cols-subgrid"
+		],
+		itemContext: [
+			"col-span-full nth-[-n+2]:col-[1/2]",
+			"flex min-w-0 items-center",
+			"mb-0.5 gap-1.5 py-0",
+			"text-caption text-foreground-hint"
+		],
+		itemSubtitle: [
+			"col-span-full nth-[-n+2]:col-[1/2]",
+			"min-w-0",
+			"mt-0.5 mb-0 py-0",
+			"text-caption text-foreground-hint"
+		],
+		itemHeading: [
+			"col-span-full nth-[-n+2]:col-[1/2]",
+			"flex min-w-0 items-start gap-2",
+			"mb-0"
+		],
+		itemTitle: [
+			"relative line-clamp-2 min-w-0 flex-1 pl-[18px]",
+			"[&>svg]:absolute [&>svg]:top-[calc((1lh-14px)/2)] [&>svg]:left-0 [&>svg]:size-3.5",
+			"font-sans text-subhead font-semibold text-foreground-muted",
+			"group-data-[unread=true]/inbox-item:font-bold group-data-[unread=true]/inbox-item:text-foreground",
+			"[&>svg]:text-foreground-hint"
+		],
+		itemTrailing: [
+			"pointer-events-none relative z-10 col-[-2/-1] row-start-1",
+			"flex shrink-0",
+			"mt-0 flex-col items-end gap-2 pt-px",
+			"max-md:flex-col max-md:items-end max-md:gap-2",
+			"after:hidden after:size-2.5 after:-mb-px after:shrink-0 after:rounded-[2px] after:border-[1.5px] after:border-sticker-ink after:bg-attention-400",
+			"group-data-[unread=true]/inbox-item:after:block",
+			"*:not-data-[reveal=hover]:opacity-[calc(1-var(--inbox-item-reveal-aside,0)*var(--inbox-item-revealed,0))] after:opacity-[calc(1-var(--inbox-item-reveal-aside,0)*var(--inbox-item-revealed,0))]",
+			"*:not-data-[reveal=hover]:mr-(--inbox-item-aside-room,0px) after:mr-(--inbox-item-aside-room,0px)",
+			"*:not-data-[reveal=hover]:transition-opacity after:transition-opacity",
+			"pointer-fine:has-[>[data-reveal=hover]]:[--inbox-item-reveal-aside:1]",
+			"pointer-coarse:has-[>[data-reveal=hover]]:[--inbox-item-aside-room:--spacing(11)]",
+			"group-hover/inbox-item:[--inbox-item-revealed:1] group-focus-within/inbox-item:[--inbox-item-revealed:1]",
+			"group-data-[active=true]/inbox-item:[--inbox-item-revealed:1] group-data-popup-open/inbox-item:[--inbox-item-revealed:1]",
+			"has-[>[data-reveal=hover]_[data-popup-open]]:[--inbox-item-revealed:1]"
+		],
+		itemMarks: ["flex h-5 shrink-0 items-center justify-end gap-1.5", "text-foreground-hint"],
+		itemHoverTarget: ["pointer-events-auto"],
+		itemTimestamp: ["shrink-0 whitespace-nowrap text-right tabular-nums", "font-mono text-mono-meta text-foreground-hint"],
+		itemBody: [
+			"col-span-full nth-[-n+2]:col-[1/2]",
+			"line-clamp-2",
+			"mt-0.5 text-callout text-foreground-muted"
+		],
+		itemMessage: [
+			"col-span-full nth-[-n+2]:col-[1/2]",
+			"min-w-0",
+			"mt-0.5 line-clamp-2 text-callout text-foreground-muted"
+		],
+		itemSender: ["font-semibold text-foreground"],
+		itemMetadata: [
+			"col-span-full nth-[-n+2]:col-[1/2]",
+			"flex min-h-5 flex-wrap items-center gap-1.5",
+			"mt-2"
+		],
+		itemActions: [
+			"pointer-events-auto flex shrink-0 items-center",
+			"order-last gap-0.5",
+			"*:data-[slot=panel-action]:h-8 *:data-[slot=panel-action]:min-w-8 [&>[data-slot=panel-action]>svg]:size-[18px]",
+			"*:data-[slot=panel-toggle-action]:h-8 *:data-[slot=panel-toggle-action]:min-w-8 [&>[data-slot=panel-toggle-action]>svg]:size-[18px]",
+			"[&>[data-slot=panel-toggle-action][data-pressed]]:border-transparent",
+			"[&>[data-slot=panel-toggle-action][data-pressed]]:bg-transparent",
+			"[&>[data-slot=panel-toggle-action][data-pressed]]:text-foreground",
+			"[&>[data-slot=panel-toggle-action][data-pressed]]:hover:bg-fill-medium [&>[data-slot=panel-toggle-action][data-pressed]]:active:bg-fill-medium",
+			"pointer-coarse:gap-3",
+			"pointer-coarse:*:data-[slot=panel-action]:after:absolute pointer-coarse:*:data-[slot=panel-action]:after:-inset-1.5",
+			"pointer-coarse:*:data-[slot=panel-toggle-action]:after:absolute pointer-coarse:*:data-[slot=panel-toggle-action]:after:-inset-1.5"
+		]
+	},
+	variants: {
+		density: { compact: {
+			item: ["items-center"],
+			itemTitle: ["line-clamp-1", "pl-0 has-[>svg]:pl-[18px]"],
+			itemTrailing: [
+				"gap-0 pt-0",
+				"max-md:gap-0",
+				"group-data-[unread=true]/inbox-item:after:hidden"
+			],
+			itemTimestamp: ["leading-5"],
+			itemBody: ["line-clamp-1", "mt-0"],
+			itemMessage: ["line-clamp-1", "mt-0"]
+		} },
+		reveal: { hover: { itemActions: [
+			"absolute top-0 right-0 z-10",
+			"pointer-events-none opacity-0 transition-opacity",
+			"group-hover/inbox-item:pointer-events-auto group-hover/inbox-item:opacity-100",
+			"group-focus-within/inbox-item:pointer-events-auto group-focus-within/inbox-item:opacity-100",
+			"group-data-[active=true]/inbox-item:pointer-events-auto group-data-[active=true]/inbox-item:opacity-100",
+			"group-data-popup-open/inbox-item:pointer-events-auto group-data-popup-open/inbox-item:opacity-100",
+			"has-data-popup-open:pointer-events-auto has-data-popup-open:opacity-100",
+			"pointer-coarse:pointer-events-auto pointer-coarse:opacity-100 pointer-coarse:only:static"
+		] } }
+	},
+	compoundVariants: [{
+		density: "compact",
+		reveal: "hover",
+		class: { itemActions: ["top-1/2 -translate-y-1/2", "pointer-coarse:only:translate-y-0"] }
+	}]
+});
+//#endregion
+export { inboxItem };

package/dist/components/inbox-item/index.d.mts

@@ -0,0 +1,2 @@
+import { InboxItem, InboxItemActions, InboxItemActionsProps, InboxItemBody, InboxItemBodyProps, InboxItemContent, InboxItemContentProps, InboxItemContext, InboxItemContextProps, InboxItemDensity, InboxItemHeading, InboxItemHeadingProps, InboxItemHoverTarget, InboxItemHoverTargetProps, InboxItemLeading, InboxItemLeadingProps, InboxItemMarks, InboxItemMarksProps, InboxItemMessage, InboxItemMessageProps, InboxItemMetadata, InboxItemMetadataProps, InboxItemProps, InboxItemSelection, InboxItemSelectionProps, InboxItemSender, InboxItemSenderProps, InboxItemSubtitle, InboxItemSubtitleProps, InboxItemTimestamp, InboxItemTimestampProps, InboxItemTitle, InboxItemTitleProps, InboxItemTrailing, InboxItemTrailingProps, InboxItemTrigger, InboxItemTriggerProps } from "./inbox-item.mjs";
+export { InboxItem, InboxItemActions, type InboxItemActionsProps, InboxItemBody, type InboxItemBodyProps, InboxItemContent, type InboxItemContentProps, InboxItemContext, type InboxItemContextProps, type InboxItemDensity, InboxItemHeading, type InboxItemHeadingProps, InboxItemHoverTarget, type InboxItemHoverTargetProps, InboxItemLeading, type InboxItemLeadingProps, InboxItemMarks, type InboxItemMarksProps, InboxItemMessage, type InboxItemMessageProps, InboxItemMetadata, type InboxItemMetadataProps, type InboxItemProps, InboxItemSelection, type InboxItemSelectionProps, InboxItemSender, type InboxItemSenderProps, InboxItemSubtitle, type InboxItemSubtitleProps, InboxItemTimestamp, type InboxItemTimestampProps, InboxItemTitle, type InboxItemTitleProps, InboxItemTrailing, type InboxItemTrailingProps, InboxItemTrigger, type InboxItemTriggerProps };

package/dist/components/inline-code/index.d.mts

@@ -0,0 +1,2 @@
+import { InlineCode, InlineCodeProps } from "./inline-code.mjs";
+export { InlineCode, type InlineCodeProps };

package/dist/components/inline-code/inline-code.d.mts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/inline-code/inline-code.d.ts
+export type InlineCodeProps = ComponentPropsWithRef<"code"> & {
+  /** `message` renders the borderless, baseline-aligned in-message treatment. */
+  appearance?: "default" | "message";
+};
+export declare function InlineCode({ className, appearance, ...props }: InlineCodeProps): import("react").JSX.Element;
+//#endregion

package/dist/components/inline-code/inline-code.mjs

@@ -0,0 +1,30 @@
+import { tv } from "../../lib/tv.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inline-code/inline-code.tsx
+const inlineCode = tv({
+	slots: { root: [
+		"rounded-sticker px-1 py-px",
+		"font-mono text-[0.875em] font-normal text-foreground wrap-anywhere",
+		"bg-fill-muted"
+	] },
+	variants: { appearance: {
+		default: {},
+		message: { root: [
+			"inline border-0 px-1 align-baseline",
+			"[font-size:0.875em] leading-[1.3em] font-normal",
+			"wrap-anywhere",
+			"rounded-sticker bg-fill-muted pt-[calc(1px-0.0275em)] pb-[calc(1px+0.0275em)] text-foreground"
+		] }
+	} },
+	defaultVariants: { appearance: "default" }
+});
+function InlineCode({ className, appearance, ...props }) {
+	const { root } = inlineCode({ appearance });
+	return /* @__PURE__ */ jsx("code", {
+		"data-slot": "inline-code",
+		className: root({ className }),
+		...props
+	});
+}
+//#endregion
+export { InlineCode };

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

@@ -0,0 +1,2 @@
+import { Input, InputProps } from "./input.mjs";
+export { Input, type InputProps };

package/dist/components/input/input.d.mts

@@ -0,0 +1,16 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { DataAttributes } from "../../lib/data-attributes.mjs";
+import { WithoutChildren } from "../../lib/without-children.mjs";
+import { Input } from "@base-ui/react/input";
+//#region src/components/input/input.d.ts
+export type InputBehaviorProps = {
+  /**
+   * Add common password-manager ignore hints for non-credential fields where
+   * extension overlays would obscure custom UI.
+   */
+  suppressPasswordManager?: boolean;
+};
+export type InputProps = WithoutChildren<StyledProps<Input.Props>> & InputBehaviorProps & DataAttributes;
+declare function Input$1({ suppressPasswordManager, className, "data-invalid": dataInvalid, ...props }: InputProps): import("react").JSX.Element;
+//#endregion
+export { Input$1 as Input };