@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,400 @@
+import { useBusyPhase } from "../../lib/hooks/use-busy-phase.js";
+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 { AlertDialog } from "@base-ui/react/alert-dialog";
+// src/components/confirm-dialog/confirm-dialog.tsx
+var ConfirmContext = createContext({
+	pending: false,
+	confirm: (onConfirm) => {
+		onConfirm();
+	},
+	reset: () => void 0
+});
+var useConfirmAttempt = (close) => {
+	const $ = c(9);
+	const [pending, setPending] = useState(false);
+	const current = useRef(null);
+	let t0;
+	if ($[0] !== close) {
+		t0 = (token, resolved) => {
+			if (current.current !== token) return;
+			current.current = null;
+			setPending(false);
+			if (resolved) close();
+		};
+		$[0] = close;
+		$[1] = t0;
+	} else t0 = $[1];
+	const settle = t0;
+	let t1;
+	if ($[2] !== close || $[3] !== settle) {
+		t1 = (onConfirm) => {
+			if (current.current !== null) return;
+			const result = onConfirm();
+			if (!(result instanceof Promise)) {
+				close();
+				return;
+			}
+			const token_0 = Symbol("confirm");
+			current.current = token_0;
+			setPending(true);
+			result.then(() => settle(token_0, true), () => settle(token_0, false));
+		};
+		$[2] = close;
+		$[3] = settle;
+		$[4] = t1;
+	} else t1 = $[4];
+	const confirm = t1;
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			current.current = null;
+			setPending(false);
+		};
+		$[5] = t2;
+	} else t2 = $[5];
+	const reset = t2;
+	let t3;
+	if ($[6] !== confirm || $[7] !== pending) {
+		t3 = {
+			pending,
+			confirm,
+			reset
+		};
+		$[6] = confirm;
+		$[7] = pending;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+var ConfirmDialogRoot = (t0) => {
+	const $ = c(19);
+	const { open, onOpenChange, children } = t0;
+	let t1;
+	if ($[0] !== onOpenChange) {
+		t1 = () => onOpenChange(false);
+		$[0] = onOpenChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	const attempt = useConfirmAttempt(t1);
+	let t2;
+	if ($[2] !== attempt.pending || $[3] !== onOpenChange) {
+		t2 = (next) => {
+			if (!attempt.pending) onOpenChange(next);
+		};
+		$[2] = attempt.pending;
+		$[3] = onOpenChange;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== attempt) {
+		t3 = (next_0) => {
+			if (!next_0) attempt.reset();
+		};
+		$[5] = attempt;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(AlertDialog.Backdrop, { className: confirm_dialog_module_default.backdrop });
+		$[7] = t4;
+	} else t4 = $[7];
+	const t5 = attempt.pending || void 0;
+	let t6;
+	if ($[8] !== attempt || $[9] !== children) {
+		t6 = /* @__PURE__ */ jsx(ConfirmContext, {
+			value: attempt,
+			children
+		});
+		$[8] = attempt;
+		$[9] = children;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t5 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [t4, /* @__PURE__ */ jsx(AlertDialog.Popup, {
+			className: confirm_dialog_module_default.popup,
+			"aria-busy": t5,
+			children: t6
+		})] });
+		$[11] = t5;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== open || $[15] !== t2 || $[16] !== t3 || $[17] !== t7) {
+		t8 = /* @__PURE__ */ jsx(AlertDialog.Root, {
+			open,
+			onOpenChange: t2,
+			onOpenChangeComplete: t3,
+			children: t7
+		});
+		$[14] = open;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	return t8;
+};
+var ConfirmDialogTitle = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(confirm_dialog_module_default.title, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(AlertDialog.Title, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var ConfirmDialogDescription = (t0) => {
+	const $ = c(8);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== children || $[5] !== className || $[6] !== props) {
+		t1 = children ? /* @__PURE__ */ jsx(AlertDialog.Description, {
+			className: clsx(confirm_dialog_module_default.description, className),
+			...props,
+			children
+		}) : null;
+		$[4] = children;
+		$[5] = className;
+		$[6] = props;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+};
+/** The row the actions sit on, the way out first. */
+var ConfirmDialogFooter = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(confirm_dialog_module_default.actions, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** Closes without acting. Disabled while a confirm is pending. */
+var ConfirmDialogCancel = (t0) => {
+	const $ = c(5);
+	const { children } = t0;
+	const { pending } = useContext(ConfirmContext);
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== pending || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(AlertDialog.Close, {
+			disabled: pending,
+			render: t1
+		});
+		$[2] = pending;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+/** Acts, then closes once the action has settled. */
+var ConfirmDialogConfirm = (t0) => {
+	const $ = c(14);
+	const { onConfirm, destructive: t1, children } = t0;
+	const destructive = t1 === void 0 ? false : t1;
+	const { pending, confirm } = useContext(ConfirmContext);
+	let t2;
+	if ($[0] !== pending) {
+		t2 = { busy: pending };
+		$[0] = pending;
+		$[1] = t2;
+	} else t2 = $[1];
+	const phase = useBusyPhase(t2);
+	const t3 = destructive ? "danger" : "brand";
+	const t4 = pending || void 0;
+	const t5 = pending || void 0;
+	let t6;
+	if ($[2] !== confirm || $[3] !== onConfirm) {
+		t6 = () => confirm(onConfirm);
+		$[2] = confirm;
+		$[3] = onConfirm;
+		$[4] = t6;
+	} else t6 = $[4];
+	let t7;
+	if ($[5] !== phase) {
+		t7 = phase === "fresh" ? null : /* @__PURE__ */ jsx(Spinner, { size: 1 });
+		$[5] = phase;
+		$[6] = t7;
+	} else t7 = $[6];
+	let t8;
+	if ($[7] !== children || $[8] !== t3 || $[9] !== t4 || $[10] !== t5 || $[11] !== t6 || $[12] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Button, {
+			variant: "primary",
+			tone: t3,
+			"aria-busy": t4,
+			"aria-disabled": t5,
+			onClick: t6,
+			children: [t7, children]
+		});
+		$[7] = children;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = t7;
+		$[13] = t8;
+	} else t8 = $[13];
+	return t8;
+};
+var ConfirmDialogShorthand = (t0) => {
+	const $ = c(19);
+	const { open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, destructive } = t0;
+	let t1;
+	if ($[0] !== title) {
+		t1 = /* @__PURE__ */ jsx(ConfirmDialogTitle, { children: title });
+		$[0] = title;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== description) {
+		t2 = /* @__PURE__ */ jsx(ConfirmDialogDescription, { children: description });
+		$[2] = description;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== cancelLabel) {
+		t3 = /* @__PURE__ */ jsx(ConfirmDialogCancel, { children: cancelLabel });
+		$[4] = cancelLabel;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== confirmLabel || $[7] !== destructive || $[8] !== onConfirm) {
+		t4 = /* @__PURE__ */ jsx(ConfirmDialogConfirm, {
+			onConfirm,
+			destructive,
+			children: confirmLabel
+		});
+		$[6] = confirmLabel;
+		$[7] = destructive;
+		$[8] = onConfirm;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t3 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(ConfirmDialogFooter, { children: [t3, t4] });
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== onOpenChange || $[14] !== open || $[15] !== t1 || $[16] !== t2 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(ConfirmDialogRoot, {
+			open,
+			onOpenChange,
+			children: [
+				t1,
+				t2,
+				t5
+			]
+		});
+		$[13] = onOpenChange;
+		$[14] = open;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	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. `destructive` repoints the confirm action to the error role. The
+* parts hanging off it compose a confirmation with a body of its own.
+*
+* @example
+* <ConfirmDialog
+* 	open={open}
+* 	onOpenChange={setOpen}
+* 	title="Delete this declaration?"
+* 	description="This cannot be undone."
+* 	confirmLabel="Delete"
+* 	cancelLabel="Cancel"
+* 	onConfirm={() => deleteDeclaration(id)}
+* 	destructive
+* />
+*/
+var ConfirmDialog = Object.assign(ConfirmDialogShorthand, {
+	Root: ConfirmDialogRoot,
+	Title: ConfirmDialogTitle,
+	Description: ConfirmDialogDescription,
+	Footer: ConfirmDialogFooter,
+	Cancel: ConfirmDialogCancel,
+	Confirm: ConfirmDialogConfirm
+});
+export { ConfirmDialog };

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

@@ -0,0 +1,14 @@
+import './confirm-dialog.css';// src/components/confirm-dialog/confirm-dialog.module.scss
+var backdrop = "_backdrop_19j93_3";
+var popup = "_popup_19j93_28";
+var title = "_title_19j93_52";
+var description = "_description_19j93_57";
+var actions = "_actions_19j93_61";
+var confirm_dialog_module_default = {
+	backdrop,
+	popup,
+	title,
+	description,
+	actions
+};
+export { actions, backdrop, confirm_dialog_module_default as default, description, popup, title };

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

@@ -0,0 +1,2 @@
+export * from "./confirm-dialog.tsx";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/confirm-dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

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

@@ -0,0 +1 @@
+export { ConfirmDialog } from "./confirm-dialog.js";

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

@@ -0,0 +1,17 @@
+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>;
+/**
+ * The side of the nearest `Conversation.Message`; it throws outside one.
+ *
+ * @example
+ * const { side } = useConversationMessageContext();
+ */
+export declare const useConversationMessageContext: () => ConversationMessageContextValue;
+//# sourceMappingURL=conversation.context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"conversation.context.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/conversation.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,OAAO,CAAC;AAGpD,8EAA8E;AAC9E,MAAM,MAAM,uBAAuB,GAChC,KAAK,GACL,OAAO,GACP,WAAW,CAAC;AAEf,kDAAkD;AAClD,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE1D,MAAM,MAAM,+BAA+B,GAAG,QAAQ,CAAC;IACtD,IAAI,EAAE,uBAAuB,CAAC;CAC9B,CAAC,CAAC;AAEH,eAAO,MAAM,0BAA0B,EAAE,OAAO,CAAC,+BAA+B,GAAG,IAAI,CAGrF,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,QACrC,+BAIF,CAAC"}

package/dist/components/conversation/conversation.context.js

@@ -0,0 +1,14 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { createContext } from "react";
+// src/components/conversation/conversation.context.ts
+var ConversationMessageContext = createContext(null);
+/**
+* The side of the nearest `Conversation.Message`; it throws outside one.
+*
+* @example
+* const { side } = useConversationMessageContext();
+*/
+var useConversationMessageContext = () => {
+	return useRequiredContext(ConversationMessageContext, "Conversation message parts must be rendered within <Conversation.Message>.");
+};
+export { ConversationMessageContext, useConversationMessageContext };

package/dist/components/conversation/conversation.css

@@ -0,0 +1,143 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_1jpsu_3 {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: var(--conversation-gap, var(--sys-unit-12));
+  }
+  ._group_1jpsu_9 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-unit-4);
+  }
+  ._groupSeparator_1jpsu_14 {
+    position: sticky;
+    top: 0;
+    align-self: center;
+    border-radius: var(--sys-radius-full);
+    background: var(--conversation-separator-bg, var(--sys-color-surface-high));
+    padding: var(--sys-unit-2) var(--sys-unit-6);
+    color: var(--conversation-muted-fg, var(--sys-color-text-muted));
+    font: var(--sys-font-label-small);
+  }
+  ._message_1jpsu_24 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-unit-2);
+    max-inline-size: min(72ch, 80%);
+  }
+  ._message_1jpsu_24 + ._message_1jpsu_24 {
+    margin-block-start: var(--sys-unit-6);
+  }
+  ._message_1jpsu_24[data-side=own], ._message_1jpsu_24[data-side=colleague],
+  ._messageAuthor_1jpsu_34[data-side=own],
+  ._messageAuthor_1jpsu_34[data-side=colleague] {
+    align-self: flex-end;
+    align-items: flex-end;
+  }
+  ._message_1jpsu_24[data-side=other],
+  ._messageAuthor_1jpsu_34[data-side=other] {
+    align-self: flex-start;
+    align-items: flex-start;
+  }
+  ._messageBubble_1jpsu_44 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-unit-2);
+    border-radius: var(--conversation-bubble-radius, var(--sys-radius-lg));
+    background: var(--conversation-bubble-bg, var(--sys-color-surface-high));
+    padding: var(--sys-unit-6) var(--sys-unit-8);
+    color: var(--conversation-bubble-fg, var(--sys-color-text));
+  }
+  ._message_1jpsu_24[data-side=own] ._messageBubble_1jpsu_44,
+  ._message_1jpsu_24[data-side=colleague] ._messageBubble_1jpsu_44 {
+    border-start-end-radius: var(--conversation-bubble-point-radius, var(--sys-radius-xs));
+  }
+  ._message_1jpsu_24[data-side=other] ._messageBubble_1jpsu_44 {
+    border-start-start-radius: var(--conversation-bubble-point-radius, var(--sys-radius-xs));
+  }
+  ._message_1jpsu_24[data-side=own] ._messageBubble_1jpsu_44 {
+    background: var(--conversation-bubble-own-bg, var(--sys-color-primary-container));
+    color: var(--conversation-bubble-own-fg, var(--sys-color-on-primary-container));
+  }
+  ._messageAuthor_1jpsu_34 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--sys-unit-4);
+    padding-inline: var(--sys-unit-8);
+    font: var(--sys-font-label-small);
+  }
+  ._message_1jpsu_24 + ._messageAuthor_1jpsu_34 {
+    margin-block-start: var(--sys-unit-12);
+  }
+  ._messageAvatar_1jpsu_75 {
+    flex-shrink: 0;
+  }
+  ._messageTimestamp_1jpsu_78 {
+    color: var(--conversation-muted-fg, var(--sys-color-text-muted));
+    font: var(--sys-font-body-medium);
+    font-size: 0.75em;
+  }
+  ._messageReadIndicator_1jpsu_83 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--sys-unit-2);
+    color: var(--conversation-muted-fg, var(--sys-color-text-muted));
+    font-size: 0.75em;
+  }
+  ._statusDot_1jpsu_91 {
+    inline-size: var(--sys-unit-4);
+    block-size: var(--sys-unit-4);
+    border-radius: var(--sys-radius-circle);
+    background: transparent;
+  }
+  ._messageReadIndicator_1jpsu_83[data-status=unread] ._statusDot_1jpsu_91 {
+    background: var(--conversation-unread-bg, var(--sys-color-primary));
+  }
+  ._messageContent_1jpsu_100 {
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+  }
+  ._messageContent_1jpsu_100[data-clamped] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--line-clamp);
+    line-clamp: var(--line-clamp);
+    overflow: hidden;
+  }
+  ._messageFiles_1jpsu_111 {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--sys-unit-4);
+  }
+  ._message_1jpsu_24[data-side=own] ._messageFiles_1jpsu_111 {
+    justify-content: flex-end;
+  }
+  ._scrollToBottom_1jpsu_121 {
+    position: absolute;
+    inset-block-end: var(--sys-unit-8);
+    inset-inline-end: var(--sys-unit-8);
+  }
+  ._emptyState_1jpsu_126 {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sys-unit-6);
+    color: var(--conversation-muted-fg, var(--sys-color-text-muted));
+  }
+  ._visuallyHidden_1jpsu_135 {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    white-space: nowrap;
+  }
+}