@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/components/conversation/conversation.d.ts

@@ -1,6 +1,7 @@
 import { useRender } from "@base-ui/react/use-render";
-import type { ComponentProps, ReactElement, ReactNode } from "react";
-import { type ConversationMessageSide, type ConversationMessageStatus } from "./conversation.context.ts";
+import { type ComponentProps, type ReactElement, type ReactNode } from "react";
+import { type AvatarProps } from "../avatar/index.ts";
+import type { ConversationMessageSide, ConversationMessageStatus } from "./conversation.context.ts";
 import { type ConversationMoment } from "./moment.ts";
 export type ConversationRootProps = useRender.ComponentProps<"div">;
 /**
@@ -30,7 +31,7 @@ export type ConversationMessageProps = Readonly<{
     side: ConversationMessageSide;
 }> & useRender.ComponentProps<"div">;
 /** A burst of messages from one author, aligned to its `side`. */
-declare const Message: ({ side, className, render, ...props }: ConversationMessageProps) => ReactNode;
+declare const Message: ({ side, className, render, ...props }: ConversationMessageProps) => ReactElement;
 export type ConversationMessageBubbleProps = useRender.ComponentProps<"div">;
 /** One message's bubble, pointed toward its author. */
 declare const MessageBubble: ({ className, render, ...props }: ConversationMessageBubbleProps) => ReactElement;
@@ -40,14 +41,9 @@ export type ConversationMessageAuthorProps = Readonly<{
 }> & useRender.ComponentProps<"div">;
 /** The line above a burst: avatar, name, timestamp and read status. */
 declare const MessageAuthor: ({ side, className, render, ...props }: ConversationMessageAuthorProps) => ReactElement;
-export type ConversationMessageAvatarProps = Readonly<{
-    /** Display name; drives the initials and stable tone of the avatar. */
-    name: string;
-    /** Diameter relative to the surrounding font size (in `em`). @default 1.5 */
-    size?: number;
-}>;
-/** The author's `Avatar`, sized for the author line. */
-declare const MessageAvatar: ({ name, size, }: ConversationMessageAvatarProps) => ReactNode;
+export type ConversationMessageAvatarProps = AvatarProps;
+/** The author's `Avatar`, sized for the author line: 1.5em unless `size` says otherwise. */
+declare const MessageAvatar: ({ size, className, ...props }: ConversationMessageAvatarProps) => ReactNode;
 export type ConversationMessageTimestampProps = Readonly<{
     date: ConversationMoment;
     /** Shows the date as well as the time. @default false */
@@ -76,19 +72,59 @@ declare const MessageFiles: ({ className, render, ...props }: ConversationMessag
 export type ConversationMessageFilesDownloadAllProps = Readonly<{
     /** The button's accessible name and tooltip, such as "Download all files". */
     label: string;
+    /** The download glyph. */
+    children: ReactNode;
 }> & Omit<useRender.ComponentProps<"button">, "children">;
-/** An icon button that downloads every file of a message. */
-declare const MessageFilesDownloadAll: ({ label, render, ...props }: ConversationMessageFilesDownloadAllProps) => ReactElement;
+/** An icon button that downloads every file of a message; its children are the glyph. */
+declare const MessageFilesDownloadAll: ({ label, children, render, ...props }: ConversationMessageFilesDownloadAllProps) => ReactElement;
 export type ConversationScrollToBottomProps = Readonly<{
     /** The button's accessible name and tooltip, such as "Scroll to latest". */
     label: string;
+    /** The jump glyph, such as a down arrow. */
+    children: ReactNode;
 }> & Omit<useRender.ComponentProps<"button">, "children">;
-/** An icon button, pinned to the log's bottom corner, that jumps to the latest message. */
-declare const ScrollToBottom: ({ label, className, render, ...props }: ConversationScrollToBottomProps) => ReactElement;
+/** An icon button, pinned to the log's bottom corner, that jumps to the latest message; its children are the glyph. */
+declare const ScrollToBottom: ({ label, children, className, render, ...props }: ConversationScrollToBottomProps) => ReactElement;
 export type ConversationEmptyStateProps = useRender.ComponentProps<"div">;
 /** What the log shows before there are any messages. */
 declare const EmptyState: ({ className, render, ...props }: ConversationEmptyStateProps) => ReactElement;
-type ConversationNamespace = Readonly<{
+/** One message, as the `Conversation` prefab takes it. */
+export type ConversationMessage = Readonly<{
+    id: string;
+    /** Who sent it. Consecutive messages with the same author form one burst. */
+    authorId: string;
+    /** The author's display name, shown above the burst and drawn as initials. */
+    authorName: string;
+    side: ConversationMessageSide;
+    sentAt: ConversationMoment;
+    /** The message's text. */
+    body: ReactNode;
+    /** Whether the other party has read it. A burst shows its last message's status. */
+    status?: ConversationMessageStatus;
+    /** The files sent with it, such as `SentAttachmentTile`s, laid out as a row. */
+    files?: ReactNode;
+}>;
+export type ConversationProps = Omit<ConversationRootProps, "children"> & Readonly<{
+    /** The messages, oldest first. */
+    messages: ReadonlyArray<ConversationMessage>;
+    /** What the separator says for today's messages, such as "Today". */
+    todayLabel: string;
+    /** What the separator says for yesterday's messages, such as "Yesterday". */
+    yesterdayLabel: string;
+    /** What a read message's status is announced as, such as "Read". */
+    readLabel: string;
+    /** What an unread message's status is announced as, such as "Unread". */
+    unreadLabel: string;
+    /** Cuts each message's text off after this many lines. */
+    lineClamp?: number;
+    /** What the log shows while there are no messages. */
+    empty?: ReactNode;
+    /** Anything after the messages, such as a `ScrollToBottom`. */
+    children?: ReactNode;
+}>;
+declare const Prefab: ({ messages, todayLabel, yesterdayLabel, readLabel, unreadLabel, lineClamp, empty, children, ...props }: ConversationProps) => ReactElement;
+/** The parts of a conversation, hanging off its prefab. */
+export type ConversationParts = typeof Prefab & Readonly<{
     Root: typeof Root;
     EmptyState: typeof EmptyState;
     Group: typeof Group;
@@ -107,20 +143,18 @@ type ConversationNamespace = Readonly<{
 }>;
 /**
  * A message thread: a log of day groups, each a run of author bursts with their
- * bubbles, timestamps, read status and files. Group the messages with
- * `groupByDay` and `groupByBurst`.
+ * bubbles, timestamps, read status and files. The prefab groups `messages` by
+ * day and by author in the provider's time zone; the parts hanging off it build
+ * a log by hand, grouped with `groupByDay` and `groupByBurst`.
  *
  * @example
- * <Conversation.Root>
- * 	<Conversation.Group>
- * 		<Conversation.DateSeparator date={day.date} todayLabel="Today" yesterdayLabel="Yesterday" />
- * 		<Conversation.Message side="own">
- * 			<Conversation.MessageBubble>
- * 				<Conversation.MessageContent>{body}</Conversation.MessageContent>
- * 			</Conversation.MessageBubble>
- * 		</Conversation.Message>
- * 	</Conversation.Group>
- * </Conversation.Root>
+ * <Conversation
+ * 	messages={messages}
+ * 	todayLabel="Today"
+ * 	yesterdayLabel="Yesterday"
+ * 	readLabel="Read"
+ * 	unreadLabel="Unread"
+ * />
  */
-export declare const Conversation: ConversationNamespace;
+export declare const Conversation: ConversationParts;
 export {};

package/dist/components/conversation/conversation.js

@@ -1,17 +1,16 @@
-import SvgDownload from "../../vendor/@material-design-icons/svg/outlined/download.js";
-import SvgKeyboardArrowDown from "../../vendor/@material-design-icons/svg/outlined/keyboard_arrow_down.js";
 import { Avatar } from "../avatar/avatar.js";
 import { Button } from "../button/button.js";
 import { useLocale } from "../locale-provider/locale-provider.js";
 import { useTimeZone } from "../time-zone-provider/time-zone-provider.js";
-import { ConversationMessageContext } from "./conversation.context.js";
 import conversation_module_default from "./conversation.module.js";
+import { groupByBurst, groupByDay } from "./group-messages.js";
 import { toZonedDateTime } from "./moment.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
 import { Intl, Temporal } from "temporal-polyfill";
 // src/components/conversation/conversation.tsx
 var MISSING = "-";
@@ -209,7 +208,7 @@ var DateSeparator = (t0) => {
 };
 /** A burst of messages from one author, aligned to its `side`. */
 var Message = (t0) => {
-	const $ = c(19);
+	const $ = c(14);
 	let className;
 	let props;
 	let render;
@@ -256,24 +255,7 @@ var Message = (t0) => {
 		$[12] = t2;
 		$[13] = t3;
 	} else t3 = $[13];
-	const element = useRender(t3);
-	let t4;
-	if ($[14] !== side) {
-		t4 = { side };
-		$[14] = side;
-		$[15] = t4;
-	} else t4 = $[15];
-	let t5;
-	if ($[16] !== element || $[17] !== t4) {
-		t5 = /* @__PURE__ */ jsx(ConversationMessageContext, {
-			value: t4,
-			children: element
-		});
-		$[16] = element;
-		$[17] = t4;
-		$[18] = t5;
-	} else t5 = $[18];
-	return t5;
+	return useRender(t3);
 };
 /** One message's bubble, pointed toward its author. */
 var MessageBubble = (t0) => {
@@ -364,23 +346,43 @@ var MessageAuthor = (t0) => {
 	} else t3 = $[13];
 	return useRender(t3);
 };
-/** The author's `Avatar`, sized for the author line. */
+/** The author's `Avatar`, sized for the author line: 1.5em unless `size` says otherwise. */
 var MessageAvatar = (t0) => {
-	const $ = c(3);
-	const { name, size: t1 } = t0;
+	const $ = c(10);
+	let className;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({size: t1, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+	}
 	const size = t1 === void 0 ? 1.5 : t1;
 	let t2;
-	if ($[0] !== name || $[1] !== size) {
-		t2 = /* @__PURE__ */ jsx(Avatar, {
-			name,
+	if ($[4] !== className) {
+		t2 = clsx(conversation_module_default.messageAvatar, className);
+		$[4] = className;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== props || $[7] !== size || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Avatar, {
+			...props,
 			size,
-			className: conversation_module_default.messageAvatar
+			className: t2
 		});
-		$[0] = name;
-		$[1] = size;
-		$[2] = t2;
-	} else t2 = $[2];
-	return t2;
+		$[6] = props;
+		$[7] = size;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
 };
 /** When a message was sent, in the provider's locale and time zone. */
 var MessageTimestamp = (t0) => {
@@ -586,30 +588,34 @@ var MessageFiles = (t0) => {
 	} else t5 = $[8];
 	return t4(t5);
 };
-/** An icon button that downloads every file of a message. */
+/** An icon button that downloads every file of a message; its children are the glyph. */
 var MessageFilesDownloadAll = (t0) => {
-	const $ = c(12);
+	const $ = c(13);
 	let t1;
 	let t2;
 	let t3;
 	let t4;
 	if ($[0] !== t0) {
-		const { label, render, ...props } = t0;
+		const { label, children, render, ...props } = t0;
 		t4 = useRender;
 		t1 = "button";
-		if ($[5] !== label || $[6] !== render) {
+		if ($[5] !== children || $[6] !== label || $[7] !== render) {
 			t2 = render ?? /* @__PURE__ */ jsx(Button, {
 				variant: "tertiary",
 				size: "sm",
 				iconOnly: true,
-				icon: SvgDownload,
+				icon: children,
 				label
 			});
-			$[5] = label;
-			$[6] = render;
-			$[7] = t2;
-		} else t2 = $[7];
-		t3 = mergeProps({ type: "button" }, props);
+			$[5] = children;
+			$[6] = label;
+			$[7] = render;
+			$[8] = t2;
+		} else t2 = $[8];
+		t3 = mergeProps({
+			type: "button",
+			children: render === void 0 ? void 0 : children
+		}, props);
 		$[0] = t0;
 		$[1] = t1;
 		$[2] = t2;
@@ -622,44 +628,46 @@ var MessageFilesDownloadAll = (t0) => {
 		t4 = $[4];
 	}
 	let t5;
-	if ($[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+	if ($[9] !== t1 || $[10] !== t2 || $[11] !== t3) {
 		t5 = {
 			defaultTagName: t1,
 			render: t2,
 			props: t3
 		};
-		$[8] = t1;
-		$[9] = t2;
-		$[10] = t3;
-		$[11] = t5;
-	} else t5 = $[11];
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t5;
+	} else t5 = $[12];
 	return t4(t5);
 };
-/** An icon button, pinned to the log's bottom corner, that jumps to the latest message. */
+/** An icon button, pinned to the log's bottom corner, that jumps to the latest message; its children are the glyph. */
 var ScrollToBottom = (t0) => {
-	const $ = c(12);
+	const $ = c(13);
 	let t1;
 	let t2;
 	let t3;
 	let t4;
 	if ($[0] !== t0) {
-		const { label, className, render, ...props } = t0;
+		const { label, children, className, render, ...props } = t0;
 		t4 = useRender;
 		t1 = "button";
-		if ($[5] !== label || $[6] !== render) {
+		if ($[5] !== children || $[6] !== label || $[7] !== render) {
 			t2 = render ?? /* @__PURE__ */ jsx(Button, {
 				variant: "tertiary",
 				iconOnly: true,
-				icon: SvgKeyboardArrowDown,
+				icon: children,
 				label
 			});
-			$[5] = label;
-			$[6] = render;
-			$[7] = t2;
-		} else t2 = $[7];
+			$[5] = children;
+			$[6] = label;
+			$[7] = render;
+			$[8] = t2;
+		} else t2 = $[8];
 		t3 = mergeProps({
 			type: "button",
-			className: clsx(conversation_module_default.scrollToBottom, className)
+			className: clsx(conversation_module_default.scrollToBottom, className),
+			children: render === void 0 ? void 0 : children
 		}, props);
 		$[0] = t0;
 		$[1] = t1;
@@ -673,17 +681,17 @@ var ScrollToBottom = (t0) => {
 		t4 = $[4];
 	}
 	let t5;
-	if ($[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+	if ($[9] !== t1 || $[10] !== t2 || $[11] !== t3) {
 		t5 = {
 			defaultTagName: t1,
 			render: t2,
 			props: t3
 		};
-		$[8] = t1;
-		$[9] = t2;
-		$[10] = t3;
-		$[11] = t5;
-	} else t5 = $[11];
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t5;
+	} else t5 = $[12];
 	return t4(t5);
 };
 /** What the log shows before there are any messages. */
@@ -724,24 +732,121 @@ var EmptyState = (t0) => {
 	} else t5 = $[8];
 	return t4(t5);
 };
+var Prefab = (t0) => {
+	const $ = c(24);
+	let children;
+	let empty;
+	let lineClamp;
+	let messages;
+	let props;
+	let readLabel;
+	let todayLabel;
+	let unreadLabel;
+	let yesterdayLabel;
+	if ($[0] !== t0) {
+		({messages, todayLabel, yesterdayLabel, readLabel, unreadLabel, lineClamp, empty, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = empty;
+		$[3] = lineClamp;
+		$[4] = messages;
+		$[5] = props;
+		$[6] = readLabel;
+		$[7] = todayLabel;
+		$[8] = unreadLabel;
+		$[9] = yesterdayLabel;
+	} else {
+		children = $[1];
+		empty = $[2];
+		lineClamp = $[3];
+		messages = $[4];
+		props = $[5];
+		readLabel = $[6];
+		todayLabel = $[7];
+		unreadLabel = $[8];
+		yesterdayLabel = $[9];
+	}
+	const days = groupByDay(messages, _temp, useTimeZone());
+	let t1;
+	if ($[10] !== readLabel || $[11] !== unreadLabel) {
+		t1 = {
+			read: readLabel,
+			unread: unreadLabel
+		};
+		$[10] = readLabel;
+		$[11] = unreadLabel;
+		$[12] = t1;
+	} else t1 = $[12];
+	const statusLabel = t1;
+	const T0 = Root;
+	const t2 = days.length === 0 && empty !== void 0 ? /* @__PURE__ */ jsx(EmptyState, { children: empty }) : null;
+	let t3;
+	if ($[13] !== lineClamp || $[14] !== statusLabel || $[15] !== todayLabel || $[16] !== yesterdayLabel) {
+		t3 = (day) => /* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(DateSeparator, {
+			date: day.date,
+			todayLabel,
+			yesterdayLabel
+		}), groupByBurst(day.items, _temp2).map((burst) => {
+			const [first] = burst.items;
+			const { status } = burst.items.at(-1) ?? first;
+			return /* @__PURE__ */ jsxs(Message, {
+				side: first.side,
+				children: [/* @__PURE__ */ jsxs(MessageAuthor, { children: [
+					/* @__PURE__ */ jsx(MessageAvatar, { name: first.authorName }),
+					first.authorName,
+					/* @__PURE__ */ jsx(MessageTimestamp, { date: first.sentAt }),
+					status === void 0 ? null : /* @__PURE__ */ jsx(MessageReadIndicator, {
+						status,
+						label: statusLabel[status]
+					})
+				] }), burst.items.map((message_1) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MessageBubble, { children: /* @__PURE__ */ jsx(MessageContent, {
+					lineClamp,
+					children: message_1.body
+				}) }), message_1.files === void 0 ? null : /* @__PURE__ */ jsx(MessageFiles, { children: message_1.files })] }, message_1.id))]
+			}, burst.key);
+		})] }, day.key);
+		$[13] = lineClamp;
+		$[14] = statusLabel;
+		$[15] = todayLabel;
+		$[16] = yesterdayLabel;
+		$[17] = t3;
+	} else t3 = $[17];
+	const t4 = days.map(t3);
+	let t5;
+	if ($[18] !== T0 || $[19] !== children || $[20] !== props || $[21] !== t2 || $[22] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(T0, {
+			...props,
+			children: [
+				t2,
+				t4,
+				children
+			]
+		});
+		$[18] = T0;
+		$[19] = children;
+		$[20] = props;
+		$[21] = t2;
+		$[22] = t4;
+		$[23] = t5;
+	} else t5 = $[23];
+	return t5;
+};
 /**
 * A message thread: a log of day groups, each a run of author bursts with their
-* bubbles, timestamps, read status and files. Group the messages with
-* `groupByDay` and `groupByBurst`.
+* bubbles, timestamps, read status and files. The prefab groups `messages` by
+* day and by author in the provider's time zone; the parts hanging off it build
+* a log by hand, grouped with `groupByDay` and `groupByBurst`.
 *
 * @example
-* <Conversation.Root>
-* 	<Conversation.Group>
-* 		<Conversation.DateSeparator date={day.date} todayLabel="Today" yesterdayLabel="Yesterday" />
-* 		<Conversation.Message side="own">
-* 			<Conversation.MessageBubble>
-* 				<Conversation.MessageContent>{body}</Conversation.MessageContent>
-* 			</Conversation.MessageBubble>
-* 		</Conversation.Message>
-* 	</Conversation.Group>
-* </Conversation.Root>
+* <Conversation
+* 	messages={messages}
+* 	todayLabel="Today"
+* 	yesterdayLabel="Yesterday"
+* 	readLabel="Read"
+* 	unreadLabel="Unread"
+* />
 */
-var Conversation = {
+var Conversation = Object.assign(Prefab, {
 	Root,
 	EmptyState,
 	Group,
@@ -757,5 +862,11 @@ var Conversation = {
 	MessageFiles,
 	MessageFilesDownloadAll,
 	ScrollToBottom
-};
+});
+function _temp(message) {
+	return message.sentAt;
+}
+function _temp2(message_0) {
+	return message_0.authorId;
+}
 export { Conversation };

package/dist/components/conversation/index.d.ts

@@ -1,4 +1,4 @@
-export type { ConversationMessageContextValue, ConversationMessageSide, ConversationMessageStatus, } from "./conversation.context.ts";
+export type { ConversationMessageSide, ConversationMessageStatus, } from "./conversation.context.ts";
 export * from "./conversation.tsx";
 export * from "./group-messages.ts";
 export type { ConversationMoment } from "./moment.ts";

package/dist/components/date-field/date-field.d.ts

@@ -1,9 +1,11 @@
 import { type ReactNode } from "react";
-import type { CalendarLabels } from "../../lib/calendar/temporal.tsx";
+import type { CalendarIcons, CalendarLabels } from "../../lib/calendar/temporal.tsx";
 import { type FieldBlurHandler, type FieldProps } from "../field/index.ts";
-export type DateFieldProps = FieldProps & CalendarLabels & Readonly<{
+export type DateFieldProps = FieldProps & CalendarLabels & CalendarIcons & Readonly<{
     /** Accessible name of the button that opens the calendar, such as "Open calendar". */
     openCalendarLabel: string;
+    /** The icon of the button that opens the calendar. */
+    openCalendarIcon: ReactNode;
     /**
      * An ISO plain date, such as `"2026-07-24"`. A date-time or an instant is
      * read as the day it falls on in the `TimeZoneProvider`'s zone.
@@ -30,7 +32,7 @@ export type DateFieldProps = FieldProps & CalendarLabels & Readonly<{
  *
  * @example
  * <DateField
- * 	label="Treatment date"
+ * 	label="Service date"
  * 	optionalLabel="optional"
  * 	openCalendarLabel="Open calendar"
  * 	previousMonthLabel="Previous month"
@@ -38,8 +40,12 @@ export type DateFieldProps = FieldProps & CalendarLabels & Readonly<{
  * 	monthLabel="Month"
  * 	yearLabel="Year"
  * 	noMatchingYearLabel="No matching year."
+ * 	openCalendarIcon={<CalendarTodayIcon />}
+ * 	previousIcon={<ChevronLeftIcon />}
+ * 	nextIcon={<ChevronRightIcon />}
+ * 	checkIcon={<CheckIcon />}
  * 	value={date}
  * 	onValueChange={setDate}
  * />
  */
-export declare const DateField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, openCalendarLabel, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, value, defaultValue, onValueChange, onBlur, minValue, maxValue, name, disabled, readOnly, className, }: DateFieldProps) => ReactNode;
+export declare const DateField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, openCalendarLabel, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, openCalendarIcon, previousIcon, nextIcon, checkIcon, expandIcon, value, defaultValue, onValueChange, onBlur, minValue, maxValue, name, disabled, readOnly, className, }: DateFieldProps) => ReactNode;