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

package/dist/components/composer/mention-sources.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+/** Something a typeahead query can mention. */
+export type MentionCandidate = Readonly<{
+    /** The stable id stored in the `@[label](id)` mention syntax. */
+    id: string;
+    /** The label inside the mention pill, such as `AnnDoe`. */
+    label: string;
+    /** The candidate's row in the typeahead menu, such as an avatar and a name. */
+    row: ReactNode;
+}>;
+/** Resolves a typeahead query into the candidates it matches. The app supplies its own (people, clients, teams, …). */
+export type MentionSource = Readonly<{
+    resolve: (query: string) => Promise<readonly MentionCandidate[]>;
+}>;
+//# sourceMappingURL=mention-sources.d.ts.map

package/dist/components/composer/mention-sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-sources.d.ts","sourceRoot":"","sources":["../../../src/components/composer/mention-sources.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,+CAA+C;AAC/C,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACvC,iEAAiE;IACjE,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,GAAG,EAAE,SAAS,CAAC;CACf,CAAC,CAAC;AAEH,uHAAuH;AACvH,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;IACpC,OAAO,EAAE,CACR,KAAK,EAAE,MAAM,KACT,OAAO,CAAC,SAAS,gBAAgB,EAAE,CAAC,CAAC;CAC1C,CAAC,CAAC"}

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

@@ -0,0 +1,14 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._mention_dh4ag_3 {
+    border-radius: var(--sys-radius-full);
+    background: var(--mention-bg, var(--sys-color-neutral-bg));
+    padding: var(--sys-unit-1) var(--sys-unit-4);
+    color: var(--mention-fg, var(--sys-color-neutral-fg));
+    font: var(--sys-font-label-small);
+  }
+  ._mention_dh4ag_3[data-you] {
+    background: var(--mention-you-bg, var(--sys-color-primary-container));
+    color: var(--mention-you-fg, var(--sys-color-on-primary-container));
+  }
+}

package/dist/components/composer/mention-text.d.ts

@@ -0,0 +1,67 @@
+import { type ReactNode } from "react";
+/** A mention in a message string, as `@[label](id)` stores it. */
+export type MentionToken = Readonly<{
+    type: "mention";
+    label: string;
+    id: string;
+}>;
+/** A run of plain text in a message string. */
+export type TextToken = Readonly<{
+    type: "text";
+    text: string;
+}>;
+export type ContentToken = TextToken | MentionToken;
+/**
+ * Splits a message string holding `@[label](id)` mentions into its text and
+ * mention tokens, in order.
+ *
+ * @example
+ * parseMentionString("Hi @[Ann](u1)!");
+ * // [{ type: "text", text: "Hi " }, { type: "mention", label: "Ann", id: "u1" }, { type: "text", text: "!" }]
+ */
+export declare const parseMentionString: (value: string) => readonly ContentToken[];
+/**
+ * Writes one mention in the `@[label](id)` syntax.
+ *
+ * @example
+ * serializeMention({ label: "Ann", id: "u1" }); // "@[Ann](u1)"
+ */
+export declare const serializeMention: ({ label, id, }: Readonly<{
+    label: string;
+    id: string;
+}>) => string;
+/**
+ * Flattens a message string to plain text, each `@[label](id)` mention to its
+ * bare `label`. This is the body a composer sends.
+ *
+ * @example
+ * toPlainText("Hi @[@Ann](u1)!"); // "Hi @Ann!"
+ */
+export declare const toPlainText: (value: string) => string;
+export type MentionPillProps = Readonly<{
+    /** Marks a mention of the viewer. */
+    isYou?: boolean;
+    className?: string;
+    children: ReactNode;
+}>;
+/**
+ * A mention as an inline pill.
+ *
+ * @example
+ * <MentionPill isYou>@AnnDoe</MentionPill>
+ */
+export declare const MentionPill: ({ isYou, className, children, }: MentionPillProps) => ReactNode;
+export type MentionTextProps = Readonly<{
+    children: string;
+    /** Renders a mention in place of the default `MentionPill`. */
+    renderMention?: (mention: MentionToken) => ReactNode;
+}>;
+/**
+ * Renders a message string with its `@[label](id)` mentions as inline pills,
+ * or as whatever `renderMention` returns, and its text as typed.
+ *
+ * @example
+ * <MentionText>{"Hi @[Ann](u1)!"}</MentionText>
+ */
+export declare const MentionText: ({ children, renderMention, }: MentionTextProps) => ReactNode;
+//# sourceMappingURL=mention-text.d.ts.map

package/dist/components/composer/mention-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-text.d.ts","sourceRoot":"","sources":["../../../src/components/composer/mention-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMjD,kEAAkE;AAClE,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IACnC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACX,CAAC,CAAC;AAEH,+CAA+C;AAC/C,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACb,CAAC,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,YAAY,CAAC;AAEpD;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,UACvB,MAAM,KACX,SAAS,YAAY,EAyBvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,mBAG1B,QAAQ,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACX,CAAC,KAAG,MAA8B,CAAC;AAEpC;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,UAAW,MAAM,KAAG,MAKjC,CAAC;AAEZ,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACvC,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,KAAG,SAMrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,SAAS,CAAC;CACrD,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,iCAGrB,gBAAgB,KAAG,SAYnB,CAAC"}

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

@@ -0,0 +1,95 @@
+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";
+// src/components/composer/mention-text.tsx
+var MENTION_PATTERN = /@\[(?<name>[^\]]+)\]\((?<id>[^)]+)\)/g;
+/**
+* Splits a message string holding `@[label](id)` mentions into its text and
+* mention tokens, in order.
+*
+* @example
+* parseMentionString("Hi @[Ann](u1)!");
+* // [{ type: "text", text: "Hi " }, { type: "mention", label: "Ann", id: "u1" }, { type: "text", text: "!" }]
+*/
+var parseMentionString = (value) => {
+	const tokens = [];
+	let lastIndex = 0;
+	for (const match of value.matchAll(MENTION_PATTERN)) {
+		const start = match.index;
+		if (start > lastIndex) tokens.push({
+			type: "text",
+			text: value.slice(lastIndex, start)
+		});
+		tokens.push({
+			type: "mention",
+			label: match.groups?.["name"] ?? "",
+			id: match.groups?.["id"] ?? ""
+		});
+		lastIndex = start + match[0].length;
+	}
+	if (lastIndex < value.length) tokens.push({
+		type: "text",
+		text: value.slice(lastIndex)
+	});
+	return tokens;
+};
+/**
+* Writes one mention in the `@[label](id)` syntax.
+*
+* @example
+* serializeMention({ label: "Ann", id: "u1" }); // "@[Ann](u1)"
+*/
+var serializeMention = ({ label, id }) => `@[${label}](${id})`;
+/**
+* Flattens a message string to plain text, each `@[label](id)` mention to its
+* bare `label`. This is the body a composer sends.
+*
+* @example
+* toPlainText("Hi @[@Ann](u1)!"); // "Hi @Ann!"
+*/
+var toPlainText = (value) => parseMentionString(value).map((token) => token.type === "text" ? token.text : token.label).join("");
+/**
+* A mention as an inline pill.
+*
+* @example
+* <MentionPill isYou>@AnnDoe</MentionPill>
+*/
+var MentionPill = (t0) => {
+	const $ = c(6);
+	const { isYou: t1, className, children } = t0;
+	const isYou = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[0] !== className) {
+		t2 = clsx(mention_text_module_default.mention, className);
+		$[0] = className;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = isYou ? "" : void 0;
+	let t4;
+	if ($[2] !== children || $[3] !== t2 || $[4] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: t2,
+			"data-you": t3,
+			children
+		});
+		$[2] = children;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
+};
+/**
+* Renders a message string with its `@[label](id)` mentions as inline pills,
+* or as whatever `renderMention` returns, and its text as typed.
+*
+* @example
+* <MentionText>{"Hi @[Ann](u1)!"}</MentionText>
+*/
+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);
+});
+export { MentionPill, MentionText, parseMentionString, serializeMention, toPlainText };

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

@@ -0,0 +1,4 @@
+import './mention-text.css';// src/components/composer/mention-text.module.scss
+var mention = "_mention_dh4ag_3";
+var mention_text_module_default = { mention };
+export { mention_text_module_default as default, mention };

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

@@ -0,0 +1,68 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._backdrop_19j93_3 {
+    --overlay-dim: 0.4;
+    --overlay-opacity: 1;
+    position: fixed;
+    inset: 0;
+    background-color: rgb(0, 0, 0, var(--overlay-dim));
+    backdrop-filter: blur(1px);
+    opacity: var(--overlay-opacity);
+  }
+  @media not (prefers-reduced-motion) {
+    ._backdrop_19j93_3 {
+      transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  html[data-theme="dark"] ._backdrop_19j93_3 {
+    --overlay-dim: 0.6;
+  }
+  @media (prefers-color-scheme: dark) {
+    html:not([data-theme="light"]) ._backdrop_19j93_3 {
+      --overlay-dim: 0.6;
+    }
+  }
+  ._backdrop_19j93_3[data-starting-style], ._backdrop_19j93_3[data-ending-style] {
+    opacity: 0;
+  }
+  ._popup_19j93_28 {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    box-sizing: border-box;
+    inline-size: min(32rem, 100dvw - var(--sys-unit-16));
+    border: none;
+    border-radius: var(--sys-radius-xl);
+    background: var(--sys-color-surface-overlay);
+    color: var(--sys-color-text);
+    transform: translate(-50%, -50%);
+  }
+  @media not (prefers-reduced-motion) {
+    ._popup_19j93_28 {
+      transition: opacity var(--sys-motion-short) var(--sys-motion-standard), transform var(--sys-motion-short) var(--sys-motion-emphasized);
+    }
+  }
+  ._popup_19j93_28[data-starting-style], ._popup_19j93_28[data-ending-style] {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  ._popup_19j93_28 {
+    padding: var(--sys-unit-20);
+  }
+  ._title_19j93_52 {
+    color: var(--sys-color-text);
+    font: var(--sys-font-heading-small);
+    margin-block-end: var(--sys-unit-8);
+  }
+  ._description_19j93_57 {
+    color: var(--sys-color-text-muted);
+    font: var(--sys-font-body-medium);
+  }
+  ._actions_19j93_61 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: var(--sys-unit-8);
+    margin-block-start: var(--sys-unit-20);
+  }
+}

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

@@ -0,0 +1,75 @@
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+import { type ComponentProps, type ReactNode } from "react";
+/** What a confirm runs: a promise keeps the dialog open and busy until it settles. */
+export type ConfirmAction = () => void | Promise<unknown>;
+export type ConfirmDialogRootProps = Readonly<{
+    /** Controlled open state. */
+    open: boolean;
+    /** Fired when the dialog requests to open or close. Never fired to close while a confirm is pending. */
+    onOpenChange: (open: boolean) => void;
+    children: ReactNode;
+}>;
+declare const ConfirmDialogRoot: ({ open, onOpenChange, children, }: ConfirmDialogRootProps) => ReactNode;
+declare const ConfirmDialogTitle: ({ className, ...props }: AlertDialog.Title.Props) => ReactNode;
+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;
+export type ConfirmDialogCancelProps = Readonly<{
+    children: ReactNode;
+}>;
+/** Closes without acting. Disabled while a confirm is pending. */
+declare const ConfirmDialogCancel: ({ children, }: ConfirmDialogCancelProps) => ReactNode;
+export type ConfirmDialogConfirmProps = Readonly<{
+    /**
+     * Invoked on confirm. Return a promise to keep the dialog open, busy and
+     * undismissable until it settles: it closes when the promise resolves and
+     * stays open when it rejects, so the caller can show the error.
+     */
+    onConfirm: ConfirmAction;
+    /** Points the action at the error role, for something irreversible. */
+    destructive?: boolean;
+    children: ReactNode;
+}>;
+/** Acts, then closes once the action has settled. */
+declare const ConfirmDialogConfirm: ({ onConfirm, destructive, children, }: ConfirmDialogConfirmProps) => ReactNode;
+export type ConfirmDialogProps = Omit<ConfirmDialogRootProps, "children"> & Omit<ConfirmDialogConfirmProps, "children"> & Readonly<{
+    /** Heading text. */
+    title: ReactNode;
+    /** Optional supporting description. */
+    description?: ReactNode;
+    /** Label for the confirming action button. */
+    confirmLabel: string;
+    /** Label for the cancelling action button. */
+    cancelLabel: string;
+}>;
+declare const ConfirmDialogShorthand: ({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, destructive, }: ConfirmDialogProps) => ReactNode;
+type ConfirmDialogParts = typeof ConfirmDialogShorthand & Readonly<{
+    Root: typeof ConfirmDialogRoot;
+    Title: typeof ConfirmDialogTitle;
+    Description: typeof ConfirmDialogDescription;
+    Footer: typeof ConfirmDialogFooter;
+    Cancel: typeof ConfirmDialogCancel;
+    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. `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
+ * />
+ */
+export declare const ConfirmDialog: ConfirmDialogParts;
+export {};
+//# sourceMappingURL=confirm-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/confirm-dialog/confirm-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,OAAO,EACN,KAAK,cAAc,EAEnB,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AAMf,sFAAsF;AACtF,MAAM,MAAM,aAAa,GAAG,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;AA2D1D,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC7C,6BAA6B;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,wGAAwG;IACxG,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC,CAAC;AAEH,QAAA,MAAM,iBAAiB,sCAIpB,sBAAsB,KAAG,SA8B3B,CAAC;AAEF,QAAA,MAAM,kBAAkB,4BAGrB,WAAW,CAAC,KAAK,CAAC,KAAK,KAAG,SAK5B,CAAC;AAEF,QAAA,MAAM,wBAAwB,sCAI3B,WAAW,CAAC,WAAW,CAAC,KAAK,KAAG,SAO1B,CAAC;AAEV,qDAAqD;AACrD,QAAA,MAAM,mBAAmB,4BAGtB,cAAc,CAAC,KAAK,CAAC,KAAG,SAK1B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC,CAAC;AAEH,kEAAkE;AAClE,QAAA,MAAM,mBAAmB,kBAEtB,wBAAwB,KAAG,SAW7B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,QAAQ,CAAC;IAChD;;;;OAIG;IACH,SAAS,EAAE,aAAa,CAAC;IACzB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC,CAAC;AAEH,qDAAqD;AACrD,QAAA,MAAM,oBAAoB,0CAIvB,yBAAyB,KAAG,SAe9B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACpC,sBAAsB,EACtB,UAAU,CACV,GACA,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,GAC3C,QAAQ,CAAC;IACR,oBAAoB;IACpB,KAAK,EAAE,SAAS,CAAC;IACjB,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8CAA8C;IAC9C,YAAY,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,WAAW,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEJ,QAAA,MAAM,sBAAsB,mGASzB,kBAAkB,KAAG,SAmBvB,CAAC;AAEF,KAAK,kBAAkB,GAAG,OAAO,sBAAsB,GACtD,QAAQ,CAAC;IACR,IAAI,EAAE,OAAO,iBAAiB,CAAC;IAC/B,KAAK,EAAE,OAAO,kBAAkB,CAAC;IACjC,WAAW,EAAE,OAAO,wBAAwB,CAAC;IAC7C,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,OAAO,EAAE,OAAO,oBAAoB,CAAC;CACrC,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,EAAE,kBAQzB,CAAC"}