@igne-agency/react-web-ui 0.3.1 → 0.5.0

package/dist/components/composer/composer.d.ts

@@ -1,9 +1,9 @@
-import { type ComponentProps, type ReactNode } from "react";
+import { type ComponentProps, type ComponentPropsWithRef, type ReactNode } from "react";
 import { type ComposerContent, type ComposerSendPayload } from "./composer.context.ts";
 import { type ComposerHandle, createComposerHandle } from "./composer.handle.ts";
-import { ComposerAttachButton, ComposerAttachments, ComposerAttachmentsError } from "./composer-attachments.tsx";
-import { ComposerEditor } from "./composer-editor.tsx";
-import { ComposerMentions } from "./composer-mentions.tsx";
+import { ComposerAttachButton, type ComposerAttachButtonProps, ComposerAttachments, ComposerAttachmentsError, type ComposerAttachmentsErrorProps, type ComposerAttachmentsProps } from "./composer-attachments.tsx";
+import { ComposerEditor, type ComposerEditorProps } from "./composer-editor.tsx";
+import { ComposerMentions, type ComposerMentionsProps } from "./composer-mentions.tsx";
 export type ComposerRootProps = Readonly<{
     children: ReactNode;
     /** The starting draft, with mentions as `@[label](id)`. */
@@ -33,17 +33,40 @@ export type ComposerToolbarProps = Readonly<{
 }>;
 /** The row under the editor holding the counter and the buttons. */
 declare const Toolbar: ({ children, className, }: ComposerToolbarProps) => ReactNode;
+export type ComposerMaxLengthProps = Omit<ComponentPropsWithRef<"span">, "children">;
 /** The `length/maxLength` counter, warning near the limit. Renders nothing without a `maxLength`. */
-declare const MaxLength: () => ReactNode;
+declare const MaxLength: ({ className, ...props }: ComposerMaxLengthProps) => ReactNode;
 export type ComposerSendButtonProps = Readonly<{
     /** The button's accessible name and tooltip, such as "Send". */
     label: string;
     /** @default "primary" */
     variant?: "primary" | "secondary";
+    /** The send glyph. */
+    children: ReactNode;
 }> & Omit<ComponentProps<"button">, "children">;
-/** The icon button that sends the message; disabled while it can't be sent. */
-declare const SendButton: ({ label, variant, ...props }: ComposerSendButtonProps) => ReactNode;
-type ComposerNamespace = Readonly<{
+/** The icon button that sends the message, its children the glyph; disabled while it can't be sent. */
+declare const SendButton: ({ label, variant, children, ...props }: ComposerSendButtonProps) => ReactNode;
+/** The attachment controls the `Composer` prefab renders, and what they say. */
+export type ComposerAttachmentOptions = Omit<ComposerAttachmentsProps, "className"> & ComposerAttachmentsErrorProps & Readonly<{
+    /** The attach button's accessible name and tooltip, such as "Add attachment". */
+    attachLabel: string;
+    /** The attach button's glyph. */
+    attachIcon: ReactNode;
+    accept?: ComposerAttachButtonProps["accept"];
+}>;
+export type ComposerProps = Omit<ComposerRootProps, "children"> & Omit<ComposerEditorProps, "children" | "className"> & Readonly<{
+    /** The `@` typeahead, where the composer takes mentions. */
+    mentions?: ComposerMentionsProps;
+    /** The staged files and the button that adds them, where the composer takes attachments. */
+    attachments?: ComposerAttachmentOptions;
+    /** The send button's accessible name and tooltip, such as "Send". */
+    sendLabel: string;
+    /** The send button's glyph. */
+    sendIcon: ReactNode;
+}>;
+declare const Prefab: ({ label, placeholder, minLines, maxLines, mentions, attachments, sendLabel, sendIcon, ...props }: ComposerProps) => ReactNode;
+/** The parts of a composer, hanging off its prefab. */
+export type ComposerParts = typeof Prefab & Readonly<{
     Root: typeof Root;
     Editor: typeof ComposerEditor;
     Mentions: typeof ComposerMentions;
@@ -58,20 +81,18 @@ type ComposerNamespace = Readonly<{
 /**
  * A message composer: a plain-text editor with `@` mentions, staged
  * attachments, a length counter, and Enter to send (Shift+Enter for a new
- * line).
+ * line). The prefab wires the editor, the attachments and the send button
+ * into one; the parts hanging off it compose a composer by hand.
  *
  * @example
- * <Composer.Root onSend={send} maxLength={2000}>
- * 	<Composer.Attachments label="Attachments" removeLabel="Remove" fileHint={(name, size) => `${name} (${size})`} />
- * 	<Composer.Editor label="Comment">
- * 		<Composer.Mentions label="People to mention" sources={[people]} />
- * 	</Composer.Editor>
- * 	<Composer.Toolbar>
- * 		<Composer.MaxLength />
- * 		<Composer.AttachButton label="Add attachment" />
- * 		<Composer.SendButton label="Send" />
- * 	</Composer.Toolbar>
- * </Composer.Root>
+ * <Composer
+ * 	label="Comment"
+ * 	onSend={send}
+ * 	maxLength={2000}
+ * 	mentions={{ label: "People to mention", sources: [people] }}
+ * 	sendLabel="Send"
+ * 	sendIcon={<SendIcon />}
+ * />
  */
-export declare const Composer: ComposerNamespace;
+export declare const Composer: ComposerParts;
 export {};

package/dist/components/composer/composer.js

@@ -1,4 +1,3 @@
-import SvgArrowForward from "../../vendor/@material-design-icons/svg/outlined/arrow_forward.js";
 import { lengthTone } from "../../lib/text-length.js";
 import { Button } from "../button/button.js";
 import { fieldStateAttributes } from "../field/field-state.js";
@@ -11,9 +10,9 @@ import { ComposerEditor } from "./composer-editor.js";
 import { ComposerMentions } from "./composer-mentions.js";
 import { parseMentionString, toPlainText } from "./mention-text.js";
 import { c } from "react/compiler-runtime";
-import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 // src/components/composer/composer.tsx
 var defaultCanSubmit = ({ value, files }) => value.trim() !== "" || files.length > 0;
 var INTERACTIVE = "button, a, input, textarea, [contenteditable], [tabindex]";
@@ -308,103 +307,247 @@ var Toolbar = (t0) => {
 	return t2;
 };
 /** The `length/maxLength` counter, warning near the limit. Renders nothing without a `maxLength`. */
-var MaxLength = () => {
-	const $ = c(7);
+var MaxLength = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
 	const { maxLength, textLength } = useComposerContext();
 	if (maxLength === void 0) return null;
-	let t0;
-	if ($[0] !== maxLength || $[1] !== textLength) {
-		t0 = lengthTone(textLength, maxLength);
-		$[0] = maxLength;
-		$[1] = textLength;
-		$[2] = t0;
-	} else t0 = $[2];
 	let t1;
-	if ($[3] !== maxLength || $[4] !== t0 || $[5] !== textLength) {
-		t1 = /* @__PURE__ */ jsxs("span", {
-			className: composer_module_default.counter,
-			"data-tone": t0,
+	if ($[3] !== className) {
+		t1 = clsx(composer_module_default.counter, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== maxLength || $[6] !== textLength) {
+		t2 = lengthTone(textLength, maxLength);
+		$[5] = maxLength;
+		$[6] = textLength;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== maxLength || $[9] !== props || $[10] !== t1 || $[11] !== t2 || $[12] !== textLength) {
+		t3 = /* @__PURE__ */ jsxs("span", {
+			...props,
+			className: t1,
+			"data-tone": t2,
 			children: [
 				textLength,
 				"/",
 				maxLength
 			]
 		});
-		$[3] = maxLength;
-		$[4] = t0;
-		$[5] = textLength;
-		$[6] = t1;
-	} else t1 = $[6];
-	return t1;
+		$[8] = maxLength;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = textLength;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
 };
-/** The icon button that sends the message; disabled while it can't be sent. */
+/** The icon button that sends the message, its children the glyph; disabled while it can't be sent. */
 var SendButton = (t0) => {
-	const $ = c(12);
+	const $ = c(14);
+	let children;
 	let label;
 	let props;
 	let t1;
 	if ($[0] !== t0) {
-		({label, variant: t1, ...props} = t0);
+		({label, variant: t1, children, ...props} = t0);
 		$[0] = t0;
-		$[1] = label;
-		$[2] = props;
-		$[3] = t1;
+		$[1] = children;
+		$[2] = label;
+		$[3] = props;
+		$[4] = t1;
 	} else {
-		label = $[1];
-		props = $[2];
-		t1 = $[3];
+		children = $[1];
+		label = $[2];
+		props = $[3];
+		t1 = $[4];
 	}
 	const variant = t1 === void 0 ? "primary" : t1;
 	const { submit, canSend } = useComposerContext();
 	const t2 = !canSend;
 	let t3;
-	if ($[4] !== submit) {
+	if ($[5] !== submit) {
 		t3 = () => {
 			submit();
 		};
-		$[4] = submit;
-		$[5] = t3;
-	} else t3 = $[5];
+		$[5] = submit;
+		$[6] = t3;
+	} else t3 = $[6];
 	let t4;
-	if ($[6] !== label || $[7] !== props || $[8] !== t2 || $[9] !== t3 || $[10] !== variant) {
+	if ($[7] !== children || $[8] !== label || $[9] !== props || $[10] !== t2 || $[11] !== t3 || $[12] !== variant) {
 		t4 = /* @__PURE__ */ jsx(Button, {
 			variant,
 			size: "md",
 			iconOnly: true,
-			icon: SvgArrowForward,
+			icon: children,
 			label,
 			disabled: t2,
 			onClick: t3,
 			...props
 		});
-		$[6] = label;
-		$[7] = props;
-		$[8] = t2;
-		$[9] = t3;
-		$[10] = variant;
-		$[11] = t4;
-	} else t4 = $[11];
+		$[7] = children;
+		$[8] = label;
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = variant;
+		$[13] = t4;
+	} else t4 = $[13];
 	return t4;
 };
+var Prefab = (t0) => {
+	const $ = c(34);
+	let attachments;
+	let label;
+	let maxLines;
+	let mentions;
+	let minLines;
+	let placeholder;
+	let props;
+	let sendIcon;
+	let sendLabel;
+	if ($[0] !== t0) {
+		({label, placeholder, minLines, maxLines, mentions, attachments, sendLabel, sendIcon, ...props} = t0);
+		$[0] = t0;
+		$[1] = attachments;
+		$[2] = label;
+		$[3] = maxLines;
+		$[4] = mentions;
+		$[5] = minLines;
+		$[6] = placeholder;
+		$[7] = props;
+		$[8] = sendIcon;
+		$[9] = sendLabel;
+	} else {
+		attachments = $[1];
+		label = $[2];
+		maxLines = $[3];
+		mentions = $[4];
+		minLines = $[5];
+		placeholder = $[6];
+		props = $[7];
+		sendIcon = $[8];
+		sendLabel = $[9];
+	}
+	let t1;
+	if ($[10] !== attachments) {
+		t1 = attachments === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ComposerAttachments, {
+			label: attachments.label,
+			removeLabel: attachments.removeLabel,
+			removeIcon: attachments.removeIcon,
+			fileIcon: attachments.fileIcon,
+			fileHint: attachments.fileHint
+		}), /* @__PURE__ */ jsx(ComposerAttachmentsError, { tooLargeError: attachments.tooLargeError })] });
+		$[10] = attachments;
+		$[11] = t1;
+	} else t1 = $[11];
+	let t2;
+	if ($[12] !== mentions) {
+		t2 = mentions === void 0 ? null : /* @__PURE__ */ jsx(ComposerMentions, { ...mentions });
+		$[12] = mentions;
+		$[13] = t2;
+	} else t2 = $[13];
+	let t3;
+	if ($[14] !== label || $[15] !== maxLines || $[16] !== minLines || $[17] !== placeholder || $[18] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ComposerEditor, {
+			label,
+			placeholder,
+			minLines,
+			maxLines,
+			children: t2
+		});
+		$[14] = label;
+		$[15] = maxLines;
+		$[16] = minLines;
+		$[17] = placeholder;
+		$[18] = t2;
+		$[19] = t3;
+	} else t3 = $[19];
+	let t4;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(MaxLength, {});
+		$[20] = t4;
+	} else t4 = $[20];
+	let t5;
+	if ($[21] !== attachments) {
+		t5 = attachments === void 0 ? null : /* @__PURE__ */ jsx(ComposerAttachButton, {
+			label: attachments.attachLabel,
+			accept: attachments.accept,
+			children: attachments.attachIcon
+		});
+		$[21] = attachments;
+		$[22] = t5;
+	} else t5 = $[22];
+	let t6;
+	if ($[23] !== sendIcon || $[24] !== sendLabel) {
+		t6 = /* @__PURE__ */ jsx(SendButton, {
+			label: sendLabel,
+			children: sendIcon
+		});
+		$[23] = sendIcon;
+		$[24] = sendLabel;
+		$[25] = t6;
+	} else t6 = $[25];
+	let t7;
+	if ($[26] !== t5 || $[27] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Toolbar, { children: [
+			t4,
+			t5,
+			t6
+		] });
+		$[26] = t5;
+		$[27] = t6;
+		$[28] = t7;
+	} else t7 = $[28];
+	let t8;
+	if ($[29] !== props || $[30] !== t1 || $[31] !== t3 || $[32] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [
+				t1,
+				t3,
+				t7
+			]
+		});
+		$[29] = props;
+		$[30] = t1;
+		$[31] = t3;
+		$[32] = t7;
+		$[33] = t8;
+	} else t8 = $[33];
+	return t8;
+};
 /**
 * A message composer: a plain-text editor with `@` mentions, staged
 * attachments, a length counter, and Enter to send (Shift+Enter for a new
-* line).
+* line). The prefab wires the editor, the attachments and the send button
+* into one; the parts hanging off it compose a composer by hand.
 *
 * @example
-* <Composer.Root onSend={send} maxLength={2000}>
-* 	<Composer.Attachments label="Attachments" removeLabel="Remove" fileHint={(name, size) => `${name} (${size})`} />
-* 	<Composer.Editor label="Comment">
-* 		<Composer.Mentions label="People to mention" sources={[people]} />
-* 	</Composer.Editor>
-* 	<Composer.Toolbar>
-* 		<Composer.MaxLength />
-* 		<Composer.AttachButton label="Add attachment" />
-* 		<Composer.SendButton label="Send" />
-* 	</Composer.Toolbar>
-* </Composer.Root>
+* <Composer
+* 	label="Comment"
+* 	onSend={send}
+* 	maxLength={2000}
+* 	mentions={{ label: "People to mention", sources: [people] }}
+* 	sendLabel="Send"
+* 	sendIcon={<SendIcon />}
+* />
 */
-var Composer = {
+var Composer = Object.assign(Prefab, {
 	Root,
 	Editor: ComposerEditor,
 	Mentions: ComposerMentions,
@@ -415,7 +558,7 @@ var Composer = {
 	MaxLength,
 	SendButton,
 	createHandle: createComposerHandle
-};
+});
 function _temp(attachment) {
 	return attachment.file;
 }

package/dist/components/composer/mention-text.js

@@ -1,8 +1,8 @@
 import mention_text_module_default from "./mention-text.module.js";
 import { c } from "react/compiler-runtime";
-import { Fragment } from "react";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
 // src/components/composer/mention-text.tsx
 var MENTION_PATTERN = /@\[(?<name>[^\]]+)\]\((?<id>[^)]+)\)/g;
 /**
@@ -90,6 +90,6 @@ var MentionPill = (t0) => {
 */
 var MentionText = ({ children, renderMention }) => parseMentionString(children).map((token, index) => {
 	const content = token.type === "text" ? token.text : renderMention === void 0 ? /* @__PURE__ */ jsx(MentionPill, { children: token.label }) : renderMention(token);
-	return /* @__PURE__ */ jsx(Fragment, { children: content }, index);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: content }, index);
 });
 export { MentionPill, MentionText, parseMentionString, serializeMention, toPlainText };

package/dist/components/confirm-dialog/confirm-dialog.d.ts

@@ -10,8 +10,11 @@ export type ConfirmDialogRootProps = Readonly<{
     onOpenChange: (open: boolean) => void;
     children: ReactNode;
 }>;
+/** The controlled alert dialog: its portal, backdrop and surface. */
 declare const ConfirmDialogRoot: ({ open, onOpenChange, children, }: ConfirmDialogRootProps) => ReactNode;
+/** The question the dialog asks. */
 declare const ConfirmDialogTitle: ({ className, ...props }: AlertDialog.Title.Props) => ReactNode;
+/** What confirming does; renders nothing without children. */
 declare const ConfirmDialogDescription: ({ className, children, ...props }: AlertDialog.Description.Props) => ReactNode;
 /** The row the actions sit on, the way out first. */
 declare const ConfirmDialogFooter: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
@@ -53,21 +56,19 @@ type ConfirmDialogParts = typeof ConfirmDialogShorthand & Readonly<{
     Confirm: typeof ConfirmDialogConfirm;
 }>;
 /**
- * Confirmation over base-ui's AlertDialog, fully controlled via `open` /
- * `onOpenChange`. `onConfirm` may return a promise: the dialog stays busy and
- * undismissable while it is pending, closes when it resolves and stays open when
- * it rejects. `tone="danger"` repoints the confirm action to the error role. The
- * parts hanging off it compose a confirmation with a body of its own.
+ * A controlled confirmation over base-ui's `AlertDialog`. A promise from
+ * `onConfirm` keeps it busy until it settles, closing on resolve and staying open
+ * on reject; the parts hanging off it build one by hand.
  *
  * @example
  * <ConfirmDialog
  * 	open={open}
  * 	onOpenChange={setOpen}
- * 	title="Delete this declaration?"
+ * 	title="Delete this invoice?"
  * 	description="This cannot be undone."
  * 	confirmLabel="Delete"
  * 	cancelLabel="Cancel"
- * 	onConfirm={() => deleteDeclaration(id)}
+ * 	onConfirm={() => deleteInvoice(id)}
  * 	tone="danger"
  * />
  */

package/dist/components/confirm-dialog/confirm-dialog.js

@@ -3,9 +3,9 @@ import { Button } from "../button/button.js";
 import { Spinner } from "../spinner/spinner.js";
 import confirm_dialog_module_default from "./confirm-dialog.module.js";
 import { c } from "react/compiler-runtime";
-import { createContext, useContext, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useRef, useState } from "react";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 // src/components/confirm-dialog/confirm-dialog.tsx
 var ConfirmContext = createContext({
@@ -72,6 +72,7 @@ var useConfirmAttempt = (close) => {
 	} else t3 = $[8];
 	return t3;
 };
+/** The controlled alert dialog: its portal, backdrop and surface. */
 var ConfirmDialogRoot = (t0) => {
 	const $ = c(19);
 	const { open, onOpenChange, children } = t0;
@@ -142,6 +143,7 @@ var ConfirmDialogRoot = (t0) => {
 	} else t8 = $[18];
 	return t8;
 };
+/** The question the dialog asks. */
 var ConfirmDialogTitle = (t0) => {
 	const $ = c(8);
 	let className;
@@ -173,6 +175,7 @@ var ConfirmDialogTitle = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** What confirming does; renders nothing without children. */
 var ConfirmDialogDescription = (t0) => {
 	const $ = c(8);
 	let children;
@@ -370,21 +373,19 @@ var ConfirmDialogShorthand = (t0) => {
 	return t6;
 };
 /**
-* Confirmation over base-ui's AlertDialog, fully controlled via `open` /
-* `onOpenChange`. `onConfirm` may return a promise: the dialog stays busy and
-* undismissable while it is pending, closes when it resolves and stays open when
-* it rejects. `tone="danger"` repoints the confirm action to the error role. The
-* parts hanging off it compose a confirmation with a body of its own.
+* A controlled confirmation over base-ui's `AlertDialog`. A promise from
+* `onConfirm` keeps it busy until it settles, closing on resolve and staying open
+* on reject; the parts hanging off it build one by hand.
 *
 * @example
 * <ConfirmDialog
 * 	open={open}
 * 	onOpenChange={setOpen}
-* 	title="Delete this declaration?"
+* 	title="Delete this invoice?"
 * 	description="This cannot be undone."
 * 	confirmLabel="Delete"
 * 	cancelLabel="Cancel"
-* 	onConfirm={() => deleteDeclaration(id)}
+* 	onConfirm={() => deleteInvoice(id)}
 * 	tone="danger"
 * />
 */

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

@@ -1,9 +1,4 @@
-import { type Context } from "react";
 /** Whose message it is: the viewer's, the other party's, or a colleague's. */
 export type ConversationMessageSide = "own" | "other" | "colleague";
 /** Whether the other party has read a message. */
 export type ConversationMessageStatus = "read" | "unread";
-export type ConversationMessageContextValue = Readonly<{
-    side: ConversationMessageSide;
-}>;
-export declare const ConversationMessageContext: Context<ConversationMessageContextValue | null>;