@giddaa-housing/ui 2.0.0 → 3.0.0

package/dist/message.js

@@ -0,0 +1,524 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { CheckCheck } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+//#region src/message.tsx
+const MessageContext = React.createContext(null);
+function useMessageContext() {
+	const context = React.useContext(MessageContext);
+	if (!context) throw new Error("Message parts must be rendered inside <Message>.");
+	return context;
+}
+function toDateTimeAttribute(value) {
+	return value instanceof Date ? value.toISOString() : value;
+}
+function formatTimestamp(value) {
+	if (typeof value === "string") return value;
+	return value.toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: false
+	});
+}
+/** Styles the bubble itself — the surface inside `Message`, not `Message`'s root. */
+const messageVariants = cva("relative flex w-fit min-w-0 flex-col shadow-1 *:data-[slot=message-media]:max-w-full", {
+	variants: {
+		direction: {
+			sent: "items-end bg-surface-brand text-fg-on-brand",
+			received: "items-start bg-surface-raised text-fg-primary"
+		},
+		size: {
+			sm: "max-w-52.5 gap-gdt-xs rounded-[14px] px-2.5 py-gdt-sm",
+			md: "max-w-67.5 gap-1.25 rounded-xl px-gdt-md py-2.5",
+			lg: "max-w-82.5 gap-1.5 rounded-[20px] px-3.5 py-gdt-md",
+			xl: "max-w-100 gap-gdt-sm rounded-2xl px-4.5 py-3.5"
+		}
+	},
+	compoundVariants: [
+		{
+			direction: "sent",
+			size: "sm",
+			class: "rounded-br-sm"
+		},
+		{
+			direction: "sent",
+			size: "md",
+			class: "rounded-br-[5px]"
+		},
+		{
+			direction: "sent",
+			size: "lg",
+			class: "rounded-br-[6px]"
+		},
+		{
+			direction: "sent",
+			size: "xl",
+			class: "rounded-br-md"
+		},
+		{
+			direction: "received",
+			size: "sm",
+			class: "rounded-bl-sm"
+		},
+		{
+			direction: "received",
+			size: "md",
+			class: "rounded-bl-[5px]"
+		},
+		{
+			direction: "received",
+			size: "lg",
+			class: "rounded-bl-[6px]"
+		},
+		{
+			direction: "received",
+			size: "xl",
+			class: "rounded-bl-md"
+		}
+	],
+	defaultVariants: {
+		direction: "sent",
+		size: "md"
+	}
+});
+/** Vertical stack of messages. Owns inter-message spacing only. */
+function MessageGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-group",
+		className: cn("flex min-w-0 flex-col gap-1", "[&>[data-direction=received]+[data-direction=sent]]:mt-1.5 [&>[data-direction=sent]+[data-direction=received]]:mt-1.5", className),
+		...props
+	});
+}
+/**
+* The bubble shell. Owns direction, size, surface, tail corner, and the meta row.
+* Knows nothing about content type — it reacts to whichever slots are present,
+* so attachments drop in without changing this component.
+*
+* The root is a column: the bubble, then an optional footer beneath it. That
+* split exists only so `footer` has somewhere to live outside the surface —
+* without a footer the column collapses to the bubble alone.
+*/
+function Message({ direction = "sent", size = "md", showTimestamp = true, showReadReceipt = true, timestamp, timestampDateTime, status = "read", footer, className, children, ...props }) {
+	const receiptVisible = direction === "sent" && showReadReceipt;
+	const timestampVisible = showTimestamp && timestamp !== void 0;
+	const footerVisible = direction === "sent" && footer !== void 0 && footer !== null && footer !== false;
+	const context = {
+		direction,
+		size,
+		status,
+		timestamp,
+		timestampDateTime,
+		showTimestamp: timestampVisible,
+		showReadReceipt: receiptVisible
+	};
+	return /* @__PURE__ */ jsx(MessageContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "message",
+			"data-direction": direction,
+			"data-size": size,
+			"data-direction-size": `${direction}-${size}`,
+			className: cn("group/message flex min-w-0 flex-col gap-gdt-xs", direction === "sent" ? "items-end self-end" : "items-start self-start", className),
+			...props,
+			children: [/* @__PURE__ */ jsxs("div", {
+				"data-slot": "message-bubble",
+				className: messageVariants({
+					direction,
+					size
+				}),
+				children: [children, timestampVisible || receiptVisible ? /* @__PURE__ */ jsxs(MessageMeta, { children: [timestampVisible ? /* @__PURE__ */ jsx(MessageTimestamp, {}) : null, receiptVisible ? /* @__PURE__ */ jsx(MessageReadReceipt, {}) : null] }) : null]
+			}), footerVisible ? /* @__PURE__ */ jsx(MessageFooter, { children: footer }) : null]
+		})
+	});
+}
+/**
+* Quiet attribution beneath the bubble — "Answered by AI", "Edited", "Sent via
+* SMS". Rendered by the shell from its `footer` prop; exported for callers who
+* compose their own.
+*
+* It owns layout and register only. What it says, and whether that is
+* uppercased, is the caller's — this is a slot, not a label.
+*/
+function MessageFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-footer",
+		className: cn("flex min-w-0 max-w-full items-end gap-2.5 font-medium text-fg-secondary", "[&_svg:not([class*='size-'])]:size-5", "group-data-[size=sm]/message:text-gdt-subtext", "group-data-[size=md]/message:text-gdt-subtext", "group-data-[size=lg]/message:text-gdt-xs", "group-data-[size=xl]/message:text-gdt-sm", className),
+		...props
+	});
+}
+/**
+* The content region for prose. Attachment slots are sibling alternatives.
+* Polymorphic via `render` — pass `render={<p />}` for paragraphs.
+*/
+function MessageContent({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("min-w-0 max-w-full wrap-break-word", "group-data-[size=sm]/message:text-gdt-xs", "group-data-[size=md]/message:text-gdt-sm", "group-data-[size=lg]/message:text-gdt-md", "group-data-[size=xl]/message:text-gdt-lg", className) }, props),
+		render,
+		state: { slot: "message-content" }
+	});
+}
+/** The meta row (timestamp + receipt). Not rendered when both are absent. */
+function MessageMeta({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-meta",
+		className: cn("flex shrink-0 items-center", "group-data-[size=sm]/message:gap-0.75", "group-data-[size=md]/message:gap-gdt-xs", "group-data-[size=lg]/message:gap-1.25", "group-data-[size=xl]/message:gap-1.75", "group-data-[direction=received]/message:text-fg-secondary", className),
+		...props
+	});
+}
+/** Timestamp. Date values get an ISO `dateTime`; display strings require an explicit one. */
+function MessageTimestamp({ className, children, dateTime, ...props }) {
+	const { timestamp, timestampDateTime, showTimestamp } = useMessageContext();
+	if (!showTimestamp || timestamp === void 0) return null;
+	return /* @__PURE__ */ jsx("time", {
+		"data-slot": "message-timestamp",
+		dateTime: dateTime ?? (timestampDateTime ? toDateTimeAttribute(timestampDateTime) : timestamp instanceof Date ? timestamp.toISOString() : void 0),
+		className: cn("whitespace-nowrap", "group-data-[size=sm]/message:text-gdt-subtext", "group-data-[size=md]/message:text-gdt-subtext", "group-data-[size=lg]/message:text-gdt-xs", "group-data-[size=xl]/message:text-gdt-sm", className),
+		...props,
+		children: children ?? formatTimestamp(timestamp)
+	});
+}
+/**
+* Delivery state indicator. Sent-only; returns nothing when the receipt is
+* hidden or the message is received.
+*
+* `failed` renders text rather than a tick, so the message is legible instead of
+* encoded in an icon nobody recognises.
+*
+* The tick is 14px at every size — the design pins it across the whole ladder.
+*/
+function MessageReadReceipt({ className, ...props }) {
+	const { direction, status, showReadReceipt } = useMessageContext();
+	if (!showReadReceipt || direction !== "sent") return null;
+	if (status === "failed") return /* @__PURE__ */ jsx("span", {
+		"data-slot": "message-read-receipt",
+		"data-status": status,
+		className: cn("shrink-0 whitespace-nowrap text-status-danger", "group-data-[size=sm]/message:text-gdt-subtext", "group-data-[size=md]/message:text-gdt-subtext", "group-data-[size=lg]/message:text-gdt-xs", "group-data-[size=xl]/message:text-gdt-sm", className),
+		...props,
+		children: "Failed to send"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "message-read-receipt",
+		"data-status": status,
+		role: "img",
+		"aria-label": status === "read" ? "Read" : "Delivered",
+		className: cn("flex shrink-0 items-center", className),
+		...props,
+		children: /* @__PURE__ */ jsx(CheckCheck, {
+			className: "size-3.5",
+			"aria-hidden": true
+		})
+	});
+}
+/**
+* The media box — the content region for `image` and `video`.
+*
+* A direct child of `Message`, replacing `MessageContent` rather than nesting
+* inside it: Figma's bubble is `[content, meta]` with no wrapper.
+*
+* Owns the fixed per-size dimensions and radius, `bg-surface-overlay`, and the
+* clip. Reads `size` from the shell via `group-data-*` — no spine props of its own.
+*/
+function MessageMedia({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-media",
+		className: cn("relative shrink-0 overflow-hidden bg-surface-overlay", "group-data-[size=sm]/message:h-25 group-data-[size=sm]/message:w-37.5 group-data-[size=sm]/message:rounded-[10px]", "group-data-[size=md]/message:h-32.5 group-data-[size=md]/message:w-50 group-data-[size=md]/message:rounded-lg", "group-data-[size=lg]/message:h-41.25 group-data-[size=lg]/message:w-65 group-data-[size=lg]/message:rounded-xl", "group-data-[size=xl]/message:h-50 group-data-[size=xl]/message:w-[320px] group-data-[size=xl]/message:rounded-[20px]", className),
+		...props
+	});
+}
+/**
+* The image itself. Fills the box and crops via `object-cover`.
+* Polymorphic via `render` for custom loaders.
+*/
+function MessageMediaImage({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "img",
+		props: mergeProps({ className: cn("size-full object-cover", className) }, props),
+		render,
+		state: { slot: "message-media-image" }
+	});
+}
+/**
+* The reserved-slot visual — a centred, decorative icon at
+* `text-fg-caption-placeholder`. Children are the icon.
+*/
+function MessageMediaPlaceholder({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-media-placeholder",
+		"aria-hidden": true,
+		className: cn("flex size-full items-center justify-center text-fg-caption-placeholder", "group-data-[size=sm]/message:[&_svg:not([class*='size-'])]:size-10.5", "group-data-[size=md]/message:[&_svg:not([class*='size-'])]:size-13.75", "group-data-[size=lg]/message:[&_svg:not([class*='size-'])]:size-17.25", "group-data-[size=xl]/message:[&_svg:not([class*='size-'])]:size-21", className),
+		...props
+	});
+}
+/**
+* The play control — a centred brand circle over the media.
+*
+* A real `<button>`, so focus and Enter/Space work without extra wiring.
+* Labelled "Play video" by default; pass `aria-label` to override.
+*
+* The icon is nudged right for optical centring.
+*/
+function MessageMediaPlay({ className, type, "aria-label": ariaLabel = "Play video", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: type ?? "button",
+		"data-slot": "message-media-play",
+		"aria-label": ariaLabel,
+		className: cn("absolute inset-0 m-auto flex items-center justify-center rounded-full bg-surface-brand text-fg-on-brand outline-none focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2", "[&_svg]:translate-x-[1.9px]", "group-data-[size=sm]/message:size-[33px] group-data-[size=sm]/message:[&_svg:not([class*='size-'])]:size-[15px]", "group-data-[size=md]/message:size-9.5 group-data-[size=md]/message:[&_svg:not([class*='size-'])]:size-4.25", "group-data-[size=lg]/message:size-12 group-data-[size=lg]/message:[&_svg:not([class*='size-'])]:size-5.5", "group-data-[size=xl]/message:size-14.5 group-data-[size=xl]/message:[&_svg:not([class*='size-'])]:size-6.75", className)
+	});
+}
+/**
+* The duration badge, inset from the bottom-right of the media box.
+*
+* Children are the already-formatted string — the app owns the value, the
+* component owns the presentation.
+*/
+function MessageMediaDuration({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-media-duration",
+		className: cn("absolute right-gdt-sm bottom-gdt-sm flex items-center whitespace-nowrap rounded-[6px] bg-surface-raised px-1.5 py-0.5 text-fg-primary", "group-data-[size=sm]/message:text-gdt-subtext", "group-data-[size=md]/message:text-gdt-subtext", "group-data-[size=lg]/message:text-gdt-xs", "group-data-[size=xl]/message:text-gdt-sm", className),
+		...props
+	});
+}
+/**
+* The file row — icon chip, filename column, download control.
+*
+* A direct child of `Message`, in the same slot `MessageContent`, `MessageMedia`
+* or `MessageVoice` would occupy. Reads `size` from the shell via `group-data-*`.
+*/
+function MessageFile({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-file",
+		className: cn("flex items-center", "group-data-[size=sm]/message:gap-gdt-sm", "group-data-[size=md]/message:gap-2.25", "group-data-[size=lg]/message:gap-2.5", "group-data-[size=xl]/message:gap-3", className),
+		...props
+	});
+}
+/**
+* The file-type icon chip. Children are the icon.
+*
+* `bg-fg-on-brand` is a foreground token used as a background, for the same
+* reason as `MessageVoicePlay`: it preserves the intended contrast in dark
+* mode.
+*/
+function MessageFileIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-file-icon",
+		className: cn("flex shrink-0 items-center justify-center bg-fg-on-brand text-fg-brand", "group-data-[direction=received]/message:bg-surface-brand group-data-[direction=received]/message:text-fg-on-brand", "group-data-[size=sm]/message:size-[32px] group-data-[size=sm]/message:rounded-[7px]", "group-data-[size=md]/message:size-9.5 group-data-[size=md]/message:rounded-md", "group-data-[size=lg]/message:size-11.5 group-data-[size=lg]/message:rounded-[10px]", "group-data-[size=xl]/message:size-13.5 group-data-[size=xl]/message:rounded-lg", "group-data-[size=sm]/message:[&_svg:not([class*='size-'])]:size-4.5", "group-data-[size=md]/message:[&_svg:not([class*='size-'])]:size-5.25", "group-data-[size=lg]/message:[&_svg:not([class*='size-'])]:size-6.25", "group-data-[size=xl]/message:[&_svg:not([class*='size-'])]:size-7.5", className),
+		...props
+	});
+}
+/**
+* The filename column. `min-w-0` so its children can truncate against the
+* shell's per-size `max-w` rather than pushing the bubble wider.
+*/
+function MessageFileInfo({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-file-info",
+		className: cn("flex min-w-0 flex-col gap-0.5 text-fg-on-brand", "group-data-[direction=received]/message:text-fg-primary", className),
+		...props
+	});
+}
+/** The filename. Follows the body type ladder, semibold. Truncates. */
+function MessageFileName({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "message-file-name",
+		className: cn("truncate font-semibold", "group-data-[size=sm]/message:text-gdt-xs", "group-data-[size=md]/message:text-gdt-sm", "group-data-[size=lg]/message:text-gdt-md", "group-data-[size=xl]/message:text-gdt-lg", className),
+		...props
+	});
+}
+/**
+* The secondary line — size and type, e.g. "248 KB · PDF". Follows the
+* timestamp type ladder. The app formats it; the component only presents it.
+*
+* Received messages use secondary text; sent messages inherit on-brand text.
+*/
+function MessageFileDetail({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "message-file-detail",
+		className: cn("truncate", "group-data-[direction=received]/message:text-fg-secondary", "group-data-[size=sm]/message:text-gdt-subtext", "group-data-[size=md]/message:text-gdt-subtext", "group-data-[size=lg]/message:text-gdt-xs", "group-data-[size=xl]/message:text-gdt-sm", className),
+		...props
+	});
+}
+/**
+* The download control. Defaults to a `<button>`; pass `render={<a download />}`
+* for a direct link. Labelled "Download file" by default.
+*/
+function MessageFileAction({ className, render, type, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			"aria-label": "Download file",
+			type: render ? type : type ?? "button",
+			className: cn("flex size-6 shrink-0 items-center justify-center rounded-sm text-fg-on-brand outline-none focus-visible:ring-2 focus-visible:ring-line-focus", "group-data-[direction=received]/message:text-fg-primary", "group-data-[size=sm]/message:-mx-1 group-data-[size=sm]/message:[&_svg]:size-[16px]", "group-data-[size=md]/message:-mx-0.75 group-data-[size=md]/message:[&_svg]:size-4.5", "group-data-[size=lg]/message:-mx-0.5 group-data-[size=lg]/message:[&_svg]:size-5", "group-data-[size=xl]/message:[&_svg]:size-[24px]", className)
+		}, props),
+		render,
+		state: { slot: "message-file-action" }
+	});
+}
+/** Decorative fallback waveform used when no caller-supplied waveform exists. */
+const WAVEFORM_VIEWBOX_WIDTH = 58;
+const WAVEFORM_VIEWBOX_HEIGHT = 22;
+const WAVEFORM_BAR_WIDTH = 2;
+const WAVEFORM_BAR_PITCH = 4;
+const WAVEFORM_BARS = [
+	6,
+	10,
+	16,
+	11,
+	20,
+	13,
+	8,
+	17,
+	22,
+	11,
+	15,
+	9,
+	14,
+	19,
+	10
+].map((height, index) => ({
+	height,
+	id: `waveform-bar-${index}`,
+	x: index * WAVEFORM_BAR_PITCH,
+	y: (WAVEFORM_VIEWBOX_HEIGHT - height) / 2
+}));
+function WaveformGlyph() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": true,
+		className: "size-full",
+		fill: "currentColor",
+		preserveAspectRatio: "none",
+		role: "presentation",
+		viewBox: `0 0 ${WAVEFORM_VIEWBOX_WIDTH} ${WAVEFORM_VIEWBOX_HEIGHT}`,
+		children: WAVEFORM_BARS.map((bar) => /* @__PURE__ */ jsx("rect", {
+			height: bar.height,
+			rx: 1,
+			width: WAVEFORM_BAR_WIDTH,
+			x: bar.x,
+			y: bar.y
+		}, bar.id))
+	});
+}
+/**
+* The voice-note row — play control alongside a waveform.
+*
+* A direct child of `Message`, in the same slot `MessageContent` or
+* `MessageMedia` would occupy. Reads `size` from the shell via `group-data-*`.
+*/
+function MessageVoice({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-voice",
+		className: cn("flex items-center", "group-data-[size=sm]/message:gap-1.5", "group-data-[size=md]/message:gap-1.75", "group-data-[size=lg]/message:gap-gdt-sm", "group-data-[size=xl]/message:gap-2.5", className),
+		...props
+	});
+}
+/**
+* The play control. A real `<button>`, so focus and Enter/Space work without
+* extra wiring. Labelled "Play voice note" by default; pass `aria-label` to
+* override.
+*
+* Direction controls the visual size and contrast treatment.
+*/
+function MessageVoicePlay({ className, type, "aria-label": ariaLabel = "Play voice note", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: type ?? "button",
+		"data-slot": "message-voice-play",
+		"aria-label": ariaLabel,
+		className: cn("flex shrink-0 items-center justify-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2", "size-7 bg-fg-on-brand text-fg-brand", "[&_svg]:translate-x-[1.4px]", "[&_svg:not([class*='size-'])]:size-[12px]", "group-data-[direction=received]/message:bg-surface-brand group-data-[direction=received]/message:text-fg-on-brand", "group-data-[direction-size=received-sm]/message:size-7", "group-data-[direction-size=received-md]/message:size-8", "group-data-[direction-size=received-lg]/message:size-10", "group-data-[direction-size=received-xl]/message:size-12", "group-data-[direction=received]/message:[&_svg]:translate-x-[1.6px]", "group-data-[direction-size=received-sm]/message:[&_svg:not([class*='size-'])]:size-3", "group-data-[direction-size=received-md]/message:[&_svg:not([class*='size-'])]:size-3.25", "group-data-[direction-size=received-lg]/message:[&_svg:not([class*='size-'])]:size-4.25", "group-data-[direction-size=received-xl]/message:[&_svg:not([class*='size-'])]:size-5", className)
+	});
+}
+/**
+* The waveform. Renders the built-in glyph unless children are supplied.
+*
+* Colour rides on `currentColor`, so the direction flip costs nothing.
+*/
+function MessageVoiceWaveform({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-voice-waveform",
+		className: cn("shrink-0 text-fg-on-brand", "group-data-[direction=received]/message:text-fg-brand", "group-data-[size=sm]/message:h-4.5 group-data-[size=sm]/message:w-14.5", "group-data-[size=md]/message:h-5.5 group-data-[size=md]/message:w-14.5", "group-data-[size=lg]/message:h-6.25 group-data-[size=lg]/message:w-18.25", "group-data-[size=xl]/message:h-7.5 group-data-[size=xl]/message:w-21.75", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(WaveformGlyph, {})
+	});
+}
+/**
+* The clip's length. Children are the already-formatted string — the app owns
+* the value, the component owns the presentation.
+*
+* Follows the timestamp type ladder, and drops to `text-fg-primary` when
+* received rather than inheriting the bubble's `text-fg-on-brand`.
+*/
+function MessageVoiceDuration({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "message-voice-duration",
+		className: cn("shrink-0 whitespace-nowrap", "group-data-[direction=received]/message:text-fg-primary", "group-data-[size=sm]/message:text-gdt-subtext", "group-data-[size=md]/message:text-gdt-subtext", "group-data-[size=lg]/message:text-gdt-xs", "group-data-[size=xl]/message:text-gdt-sm", className),
+		...props
+	});
+}
+/** Variant styling for full-width notices and centred date-divider pills. */
+const markerVariants = cva("group/marker relative flex min-h-gdt-lg items-center gap-gdt-xs text-left text-fg-secondary [&_svg:not([class*='size-'])]:size-gdt-lg [a]:underline [a]:underline-offset-2 [a]:hover:text-fg-primary", {
+	variants: {
+		variant: {
+			default: "w-full",
+			pill: "mx-auto w-fit rounded-full bg-surface-raised px-gdt-sm py-0.5"
+		},
+		size: {
+			sm: "text-gdt-subtext",
+			md: "text-gdt-subtext",
+			lg: "text-gdt-xs",
+			xl: "text-gdt-sm"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+});
+/**
+* A break in the conversation — a date divider, an unread line, a system notice.
+*
+* Deliberately takes no `direction`. A marker is not from anyone; it spans the
+* conversation. Exposing `direction` would be a prop that does nothing in every
+* state.
+*
+* Takes no role by default, because the same component serves three different
+* meanings. Use `render` to give it real semantics where they exist — e.g.
+* `render={<h3 />}` for a date heading, or a `role="separator"` for an unread line.
+*/
+function Marker({ className, variant = "default", size = "md", render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn(markerVariants({
+			variant,
+			size
+		}), className) }, props),
+		render,
+		state: {
+			slot: "marker",
+			variant
+		}
+	});
+}
+/** Decorative icon slot. Always hidden from assistive tech — the content carries the meaning. */
+function MarkerIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "marker-icon",
+		"aria-hidden": "true",
+		className: cn("size-gdt-lg shrink-0 [&_svg:not([class*='size-'])]:size-gdt-lg", className),
+		...props
+	});
+}
+/** The marker's text. Wraps in a full-width row; stays on one line inside a pill. */
+function MarkerContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "marker-content",
+		className: cn("min-w-0 wrap-break-word", "group-data-[variant=pill]/marker:whitespace-nowrap", "*:[a]:underline *:[a]:underline-offset-2 *:[a]:hover:text-fg-primary", className),
+		...props
+	});
+}
+//#endregion
+export { Marker, MarkerContent, MarkerIcon, Message, MessageContent, MessageFile, MessageFileAction, MessageFileDetail, MessageFileIcon, MessageFileInfo, MessageFileName, MessageFooter, MessageGroup, MessageMedia, MessageMediaDuration, MessageMediaImage, MessageMediaPlaceholder, MessageMediaPlay, MessageMeta, MessageReadReceipt, MessageTimestamp, MessageVoice, MessageVoiceDuration, MessageVoicePlay, MessageVoiceWaveform, markerVariants, messageVariants };

package/dist/multi-step-form.js

@@ -170,18 +170,22 @@ function MultiStepFormIndicator({ type = "stepper", progressValue, showNextLabel
 								"aria-hidden": "true",
 								className: cn("h-0.5 flex-1 rounded-full bg-line", index === 0 && "bg-transparent", leftComplete && "bg-status-success")
 							}),
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsxs("button", {
 								type: "button",
 								"aria-current": state === "active" ? "step" : void 0,
 								disabled: isValidating,
-								className: cn("flex size-10 shrink-0 items-center justify-center rounded-full border text-gdt-sm font-bold transition-[background-color,border-color,color,box-shadow] focus-visible:border-line-focus focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", state === "complete" && "border-status-success bg-status-success text-fg-on-brand", state === "active" && "border-status-info bg-status-info text-fg-on-brand", state === "upcoming" && "border-line bg-canvas text-fg-caption-placeholder hover:border-line-strong hover:text-fg-primary"),
+								className: cn("relative flex size-10 shrink-0 items-center justify-center rounded-full border text-gdt-sm font-bold transition-[background-color,border-color,color,box-shadow] focus-visible:border-line-focus focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", state === "complete" && "border-status-success bg-status-success text-fg-on-brand", state === "active" && "border-status-info bg-status-info text-fg-on-brand", state === "upcoming" && "border-line bg-canvas text-fg-caption-placeholder hover:border-line-strong hover:text-fg-primary"),
 								onClick: () => {
 									goTo(step.value);
 								},
-								children: state === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {
-									className: "size-4.5",
-									strokeWidth: 2.5
-								}) : index + 1
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "transition-opacity duration-[var(--duration-motion-press)] ease-gdt-out group-data-[state=complete]/multi-step-form-step:opacity-0",
+									children: index + 1
+								}), /* @__PURE__ */ jsx(CheckIcon, {
+									"aria-hidden": "true",
+									strokeWidth: 2.5,
+									className: "absolute inset-0 m-auto size-4.5 scale-95 opacity-0 transition-[opacity,scale] duration-[var(--duration-motion-press)] ease-gdt-out motion-reduce:scale-100 group-data-[state=complete]/multi-step-form-step:scale-100 group-data-[state=complete]/multi-step-form-step:opacity-100"
+								})]
 							}),
 							/* @__PURE__ */ jsx("span", {
 								"aria-hidden": "true",

package/dist/page-header.d.ts

@@ -1,12 +1,12 @@
 //#region src/page-header.d.ts
-declare function DashboardHeader({ border, className, ...props }: React.ComponentProps<"div"> & {
-  border?: boolean;
-}): import("react").JSX.Element;
-declare function DashboardHeaderGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & {
-  orientation?: "horizontal" | "vertical";
+declare function DashboardHeader({ hideBorder, className, ...props }: React.ComponentProps<"div"> & {
+  hideBorder?: boolean;
 }): import("react").JSX.Element;
+declare function DashboardHeaderNavigation({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function DashboardHeaderMain({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function DashboardHeaderGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function DashboardHeaderTitle({ className, ...props }: React.ComponentProps<"h1">): import("react").JSX.Element;
 declare function DashboardHeaderDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
 declare function DashboardHeaderActions({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 //#endregion
-export { DashboardHeader, DashboardHeaderActions, DashboardHeaderDescription, DashboardHeaderGroup, DashboardHeaderTitle };
+export { DashboardHeader, DashboardHeaderActions, DashboardHeaderDescription, DashboardHeaderGroup, DashboardHeaderMain, DashboardHeaderNavigation, DashboardHeaderTitle };

package/dist/page-header.js

@@ -1,31 +1,45 @@
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/page-header.tsx
-function DashboardHeader({ border, className, ...props }) {
+function DashboardHeader({ hideBorder = false, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dashboard-header",
-		className: cn("flex flex-col gap-4", className),
+		className: cn("flex flex-col gap-6", !hideBorder && "border-b border-line-subtle", className),
 		...props
 	});
 }
-function DashboardHeaderGroup({ className, orientation = "vertical", ...props }) {
+function DashboardHeaderNavigation({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dashboard-header-navigation",
+		className: cn("flex min-w-0 flex-wrap items-center gap-4", className),
+		...props
+	});
+}
+function DashboardHeaderMain({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dashboard-header-main",
+		className: cn("flex flex-col gap-4 md:flex-row md:items-center md:justify-between md:gap-6", className),
+		...props
+	});
+}
+function DashboardHeaderGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dashboard-header-group",
-		className: cn("flex", orientation === "horizontal" ? "gap-4 md:gap-6 md:flex-row md:items-center" : "flex-col gap-2", className),
+		className: cn("flex flex-col gap-2", className),
 		...props
 	});
 }
 function DashboardHeaderTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("h1", {
 		"data-slot": "dashboard-header-title",
-		className: cn("text-gdt-h3", className),
+		className: cn("text-fg-primary text-gdt-h3", className),
 		...props
 	});
 }
 function DashboardHeaderDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "dashboard-header-description",
-		className: cn("text-gdt-sm text-fg-secondary", className),
+		className: cn("text-fg-secondary text-gdt-sm", className),
 		...props
 	});
 }
@@ -37,4 +51,4 @@ function DashboardHeaderActions({ className, ...props }) {
 	});
 }
 //#endregion
-export { DashboardHeader, DashboardHeaderActions, DashboardHeaderDescription, DashboardHeaderGroup, DashboardHeaderTitle };
+export { DashboardHeader, DashboardHeaderActions, DashboardHeaderDescription, DashboardHeaderGroup, DashboardHeaderMain, DashboardHeaderNavigation, DashboardHeaderTitle };

package/dist/pagination.d.ts

@@ -1,4 +1,4 @@
-import { n as ButtonLink, t as Button } from "./button-BZIeyUw6.js";
+import { n as ButtonLink, t as Button } from "./button-DW5OijoR.js";
 import * as React from "react";
 //#region src/pagination.d.ts
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;