@remit/ui 0.0.1

package/src/components/auth-card.render.test.ts

@@ -0,0 +1,24 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { AuthCard } from "./auth-card.js";
+
+describe("AuthCard", () => {
+	it("carries data-auth-page so the Amplify overrides apply", () => {
+		const html = renderToString(createElement(AuthCard, null, "form"));
+		assert.match(html, /data-auth-page/);
+	});
+
+	it("renders the radial-gradient page frame", () => {
+		const html = renderToString(createElement(AuthCard, null, "form"));
+		assert.match(html, /radial-gradient/);
+		assert.match(html, /min-h-dvh/);
+	});
+
+	it("centres a max-width card column around its children", () => {
+		const html = renderToString(createElement(AuthCard, null, "SIGNIN"));
+		assert.match(html, /max-w-\[26rem\]/);
+		assert.match(html, /SIGNIN/);
+	});
+});

package/src/components/auth-card.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AuthCard } from "./auth-card.js";
+import { AuthFooter } from "./auth-footer.js";
+import { AuthHero } from "./auth-hero.js";
+
+const meta: Meta<typeof AuthCard> = {
+	title: "Auth/AuthCard",
+	component: AuthCard,
+	parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj<typeof AuthCard>;
+
+const SampleForm = () => (
+	<div className="rounded-md border border-line bg-surface p-7 shadow-lg">
+		<div className="space-y-4">
+			<div className="space-y-1.5">
+				<span className="block text-sm font-medium text-fg">Email</span>
+				<div className="h-9 rounded-md border border-line bg-surface" />
+			</div>
+			<div className="space-y-1.5">
+				<span className="block text-sm font-medium text-fg">Password</span>
+				<div className="h-9 rounded-md border border-line bg-surface" />
+			</div>
+			<div className="h-9 rounded-md bg-accent" />
+		</div>
+		<AuthFooter />
+	</div>
+);
+
+export const Dark: Story = {
+	parameters: { theme: "dark" },
+	render: () => (
+		<AuthCard>
+			<AuthHero />
+			<SampleForm />
+		</AuthCard>
+	),
+};
+
+export const Light: Story = {
+	parameters: { theme: "light" },
+	render: () => (
+		<AuthCard>
+			<AuthHero />
+			<SampleForm />
+		</AuthCard>
+	),
+};

package/src/components/auth-card.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface AuthCardProps {
+	children: ReactNode;
+	className?: string;
+}
+
+/**
+ * Sign-in page frame: full-height radial-gradient background that follows the
+ * active theme, centring a max-width card column. Carries `data-auth-page` so
+ * the co-located Amplify structural overrides (auth.css) apply to the
+ * Authenticator rendered inside. One source of truth for the auth page frame
+ * so it can't drift between the live shell and the story.
+ */
+export function AuthCard({ children, className }: AuthCardProps) {
+	return (
+		<div
+			data-auth-page
+			className={cn(
+				"flex min-h-dvh w-full flex-col items-center justify-center overflow-y-auto bg-surface-sunken px-4 py-8 text-fg",
+				className,
+			)}
+			style={{
+				backgroundImage:
+					"radial-gradient(at 20% 0%, color-mix(in oklch, var(--accent) 8%, transparent) 0px, transparent 50%), radial-gradient(at 80% 100%, color-mix(in oklch, var(--accent) 8%, transparent) 0px, transparent 50%)",
+			}}
+		>
+			<div className="w-full max-w-[26rem]">{children}</div>
+		</div>
+	);
+}

package/src/components/auth-footer.render.test.ts

@@ -0,0 +1,17 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { renderToString } from "react-dom/server";
+import { AuthFooter } from "./auth-footer.js";
+
+describe("AuthFooter", () => {
+	it("renders a provider-neutral note by default", () => {
+		const html = renderToString(AuthFooter());
+		assert.match(html, /Secure sign-in/);
+		assert.doesNotMatch(html, /Cognito/);
+	});
+
+	it("renders a custom note", () => {
+		const html = renderToString(AuthFooter({ note: "Custom" }));
+		assert.match(html, /Custom/);
+	});
+});

package/src/components/auth-footer.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AuthFooter } from "./auth-footer.js";
+
+const meta: Meta<typeof AuthFooter> = {
+	title: "Auth/AuthFooter",
+	component: AuthFooter,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof AuthFooter>;
+
+export const Dark: Story = {
+	parameters: { theme: "dark" },
+};
+
+export const Light: Story = {
+	parameters: { theme: "light" },
+};
+
+export const CognitoProvider: Story = {
+	args: { note: "Secure sign-in powered by AWS Cognito" },
+};

package/src/components/auth-footer.tsx

@@ -0,0 +1,14 @@
+export const COGNITO_FOOTER_NOTE = "Secure sign-in powered by AWS Cognito";
+
+export interface AuthFooterProps {
+	note?: string;
+}
+
+export function AuthFooter(props?: AuthFooterProps) {
+	const note = props?.note ?? "Secure sign-in";
+	return (
+		<div className="text-center pt-5">
+			<p className="text-xs text-fg-muted">{note}</p>
+		</div>
+	);
+}

package/src/components/auth-hero.render.test.ts

@@ -0,0 +1,31 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { AuthHero } from "./auth-hero.js";
+
+describe("AuthHero", () => {
+	it("renders the default wordmark, tagline, and envelope mark", () => {
+		const html = renderToString(createElement(AuthHero));
+		assert.match(html, /remit,/);
+		assert.match(html, /your email client in the cloud\./);
+		assert.match(html, /<svg/);
+	});
+
+	it("renders custom wordmark and tagline", () => {
+		const html = renderToString(
+			createElement(AuthHero, {
+				wordmark: "acme,",
+				tagline: "mail, reimagined.",
+			}),
+		);
+		assert.match(html, /acme,/);
+		assert.match(html, /mail, reimagined\./);
+	});
+
+	it("is NOT wrapped in an Amplify router slot — it floats above the card", () => {
+		const html = renderToString(createElement(AuthHero));
+		assert.doesNotMatch(html, /data-amplify-router/);
+		assert.doesNotMatch(html, /data-amplify/);
+	});
+});

package/src/components/auth-hero.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AuthHero } from "./auth-hero.js";
+
+const meta: Meta<typeof AuthHero> = {
+	title: "Auth/AuthHero",
+	component: AuthHero,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof AuthHero>;
+
+export const Dark: Story = {
+	parameters: { theme: "dark" },
+};
+
+export const Light: Story = {
+	parameters: { theme: "light" },
+};

package/src/components/auth-hero.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+
+export interface AuthHeroProps {
+	wordmark?: string;
+	tagline?: string;
+	mark?: ReactNode;
+}
+
+const EnvelopeMark = () => (
+	<svg
+		width="36"
+		height="36"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="1.75"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+		aria-hidden="true"
+		className="text-accent"
+	>
+		<rect x="3" y="5" width="18" height="14" rx="2" />
+		<path d="M3 7l9 6 9-6" />
+	</svg>
+);
+
+export function AuthHero({
+	wordmark = "remit,",
+	tagline = "your email client in the cloud.",
+	mark = <EnvelopeMark />,
+}: AuthHeroProps) {
+	return (
+		<div className="text-center pb-6">
+			<div className="flex items-center justify-center pb-3">{mark}</div>
+			<h1 className="text-[1.75rem] font-semibold tracking-[-0.01em] text-fg">
+				{wordmark}
+			</h1>
+			<p className="mt-1 text-sm text-fg-muted">{tagline}</p>
+		</div>
+	);
+}

package/src/components/auto-moved-badge.render.test.ts

@@ -0,0 +1,42 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { AutoMovedBadge } from "./auto-moved-badge.js";
+
+describe("AutoMovedBadge", () => {
+	it("renders the label", () => {
+		const html = renderToString(
+			createElement(AutoMovedBadge, { label: "Moved from Junk by Remit" }),
+		);
+		assert.match(html, /Moved from Junk by Remit/);
+	});
+
+	it("renders no Undo action when onUndo is omitted", () => {
+		const html = renderToString(
+			createElement(AutoMovedBadge, { label: "Moved from Junk by Remit" }),
+		);
+		assert.doesNotMatch(html, /Undo/);
+	});
+
+	it("renders an Undo action when onUndo is provided", () => {
+		const html = renderToString(
+			createElement(AutoMovedBadge, {
+				label: "Moved from Junk by Remit",
+				onUndo: () => undefined,
+			}),
+		);
+		assert.match(html, /Undo/);
+	});
+
+	it("renders a custom undo label", () => {
+		const html = renderToString(
+			createElement(AutoMovedBadge, {
+				label: "Moved from Junk by Remit",
+				onUndo: () => undefined,
+				undoLabel: "Move back to Junk",
+			}),
+		);
+		assert.match(html, /Move back to Junk/);
+	});
+});

package/src/components/auto-moved-badge.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AutoMovedBadge } from "./auto-moved-badge.js";
+
+const meta: Meta<typeof AutoMovedBadge> = {
+	title: "Mail/AutoMovedBadge",
+	component: AutoMovedBadge,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof AutoMovedBadge>;
+
+export const ListRow: Story = {
+	args: { label: "Moved from Junk by Remit", size: "sm" },
+};
+
+export const ReadingViewWithUndo: Story = {
+	args: {
+		label: "Moved from Junk by Remit",
+		size: "md",
+		onUndo: () => alert("Undo"),
+	},
+};
+
+export const MovedToJunk: Story = {
+	args: {
+		label: "Moved from Inbox by Remit",
+		size: "md",
+		onUndo: () => alert("Undo"),
+	},
+};
+
+export const WithoutUndoAction: Story = {
+	args: { label: "Moved from Junk by Remit", size: "md" },
+};
+
+export const SideBySide: Story = {
+	render: () => (
+		<div className="flex flex-col items-start gap-3">
+			<AutoMovedBadge label="Moved from Junk by Remit" size="sm" />
+			<AutoMovedBadge
+				label="Moved from Junk by Remit"
+				size="md"
+				onUndo={() => undefined}
+			/>
+		</div>
+	),
+};

package/src/components/auto-moved-badge.tsx

@@ -0,0 +1,57 @@
+import { Undo2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Badge } from "./badge.js";
+
+export interface AutoMovedBadgeProps {
+	/** Plain-language description, e.g. "Moved from Junk by Remit". */
+	label: string;
+	/** `md` adds an inline Undo action for the open-message header; `sm` (list row) is icon + label only. */
+	size?: "sm" | "md";
+	/**
+	 * Present only when undo is available for this message. Omit to render the
+	 * indicator without an action (e.g. the target folder can't be resolved).
+	 */
+	onUndo?: () => void;
+	undoLabel?: string;
+	className?: string;
+}
+
+/**
+ * Unobtrusive indicator that Remit auto-moved this message, with an optional
+ * inline one-click undo. Purely presentational — the label text and whether
+ * the move is still in effect (so the badge should render at all) are the
+ * caller's responsibility; this component has no notion of placement/mailbox
+ * state.
+ */
+export function AutoMovedBadge({
+	label,
+	size = "sm",
+	onUndo,
+	undoLabel = "Undo",
+	className,
+}: AutoMovedBadgeProps) {
+	return (
+		<Badge
+			tone="accent"
+			className={cn(size === "md" && "py-1 text-xs", className)}
+		>
+			<Undo2
+				className={cn(size === "sm" ? "size-3" : "size-3.5", "shrink-0")}
+				aria-hidden
+			/>
+			<span>{label}</span>
+			{onUndo && (
+				<button
+					type="button"
+					onClick={(event) => {
+						event.stopPropagation();
+						onUndo();
+					}}
+					className="font-semibold underline decoration-dotted underline-offset-2 hover:decoration-solid"
+				>
+					{undoLabel}
+				</button>
+			)}
+		</Badge>
+	);
+}

package/src/components/avatar.tsx

@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface AvatarProps {
+	name: string;
+	email?: string;
+	size?: "sm" | "md" | "lg";
+	className?: string;
+}
+
+const sizes = {
+	sm: "size-7 text-2xs",
+	md: "size-9 text-sm",
+	lg: "size-11 text-md",
+};
+
+// Deterministic calm hue from a string — no random per-render flicker.
+// Muted pastels of the retro palette: green, cyan, slate-teal, slate,
+// mauve, sage. No warm coral — danger stays the only warm color in the UI.
+const palette = [
+	"oklch(0.6 0.08 150)",
+	"oklch(0.6 0.08 185)",
+	"oklch(0.6 0.08 215)",
+	"oklch(0.6 0.07 250)",
+	"oklch(0.6 0.07 310)",
+	"oklch(0.62 0.07 110)",
+];
+
+// Cream text reads on every palette entry in both themes; never pure white.
+const avatarFg = "oklch(0.97 0.012 90)";
+
+function initials(name: string): string {
+	const parts = name.trim().split(/\s+/).filter(Boolean);
+	if (parts.length === 0) return "?";
+	if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+	return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+export function Avatar({ name, email, size = "md", className }: AvatarProps) {
+	const bg = useMemo(() => {
+		const key = email ?? name;
+		let h = 0;
+		for (let i = 0; i < key.length; i++) h = (h * 31 + key.charCodeAt(i)) >>> 0;
+		return palette[h % palette.length];
+	}, [name, email]);
+
+	return (
+		<span
+			className={cn(
+				"inline-flex shrink-0 items-center justify-center rounded-full font-semibold select-none",
+				sizes[size],
+				className,
+			)}
+			style={{ backgroundColor: bg, color: avatarFg }}
+			aria-hidden
+		>
+			{initials(name)}
+		</span>
+	);
+}

package/src/components/badge.tsx

@@ -0,0 +1,49 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "../lib/cn.js";
+
+type Tone = "neutral" | "accent" | "positive" | "warning" | "danger";
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+	tone?: Tone;
+	/** Render as a small filled dot + label instead of a pill. */
+	dot?: boolean;
+}
+
+const tones: Record<Tone, string> = {
+	neutral: "bg-surface-sunken text-fg-muted",
+	// informational chips ride the cyan secondary accent
+	accent: "bg-accent-2-soft text-accent-2",
+	positive: "bg-surface-sunken text-positive",
+	warning: "bg-surface-sunken text-warning",
+	danger: "bg-danger-soft text-danger",
+};
+
+const dotColors: Record<Tone, string> = {
+	neutral: "bg-fg-subtle",
+	accent: "bg-accent-2",
+	positive: "bg-positive",
+	warning: "bg-warning",
+	danger: "bg-danger",
+};
+
+export function Badge({
+	tone = "neutral",
+	dot,
+	className,
+	children,
+	...props
+}: BadgeProps) {
+	return (
+		<span
+			className={cn(
+				"inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-2xs font-medium",
+				tones[tone],
+				className,
+			)}
+			{...props}
+		>
+			{dot && <span className={cn("size-1.5 rounded-full", dotColors[tone])} />}
+			{children}
+		</span>
+	);
+}

package/src/components/banner.render.test.ts

@@ -0,0 +1,58 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { Banner } from "./banner.js";
+
+describe("Banner", () => {
+	it("renders content with an alert role", () => {
+		const html = renderToString(
+			createElement(Banner, { tone: "warning" }, "heads up"),
+		);
+		assert.match(html, /role="alert"/);
+		assert.match(html, /heads up/);
+	});
+
+	it("applies the warning tone classes", () => {
+		const html = renderToString(
+			createElement(Banner, { tone: "warning" }, "x"),
+		);
+		assert.match(html, /text-warning/);
+	});
+
+	it("renders a dismiss button only when onDismiss is supplied", () => {
+		const withDismiss = renderToString(
+			createElement(Banner, { tone: "info", onDismiss: () => undefined }, "x"),
+		);
+		assert.match(withDismiss, /aria-label="Dismiss"/);
+
+		const withoutDismiss = renderToString(
+			createElement(Banner, { tone: "info" }, "x"),
+		);
+		assert.doesNotMatch(withoutDismiss, /aria-label="Dismiss"/);
+	});
+
+	it("soft success keeps a status role and a real dismiss button, not a raw glyph", () => {
+		const html = renderToString(
+			createElement(
+				Banner,
+				{ tone: "success", variant: "soft", onDismiss: () => undefined },
+				"Account connected successfully.",
+			),
+		);
+		assert.match(html, /role="status"/);
+		assert.match(html, /aria-label="Dismiss"/);
+		assert.doesNotMatch(html, /✕/);
+	});
+
+	it("soft danger reports an alert role", () => {
+		const html = renderToString(
+			createElement(
+				Banner,
+				{ tone: "danger", variant: "soft" },
+				"Sign-in failed.",
+			),
+		);
+		assert.match(html, /role="alert"/);
+	});
+});

package/src/components/banner.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Banner } from "./banner.js";
+
+const meta: Meta<typeof Banner> = {
+	title: "Auth/Banner",
+	component: Banner,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof Banner>;
+
+export const Info: Story = {
+	args: { tone: "info", children: "A new version is available." },
+	parameters: { theme: "dark" },
+};
+
+export const Success: Story = {
+	args: { tone: "success", children: "Your changes were saved." },
+	parameters: { theme: "dark" },
+};
+
+export const Warning: Story = {
+	args: {
+		tone: "warning",
+		children: (
+			<>
+				<strong className="font-semibold">Local dev</strong> — Cognito not
+				configured. Set VITE_COGNITO_USER_POOL_ID and VITE_COGNITO_CLIENT_ID in
+				.env.local to enable sign-in.
+			</>
+		),
+	},
+	parameters: { theme: "dark" },
+};
+
+export const Danger: Story = {
+	args: { tone: "danger", children: "Something went wrong." },
+	parameters: { theme: "dark" },
+};
+
+export const Dismissible: Story = {
+	args: {
+		tone: "info",
+		children: "Dismiss me.",
+		onDismiss: () => undefined,
+	},
+	parameters: { theme: "dark" },
+};
+
+export const WarningLight: Story = {
+	args: {
+		tone: "warning",
+		children: (
+			<>
+				<strong className="font-semibold">Local dev</strong> — Cognito not
+				configured.
+			</>
+		),
+	},
+	parameters: { theme: "light" },
+};
+
+export const SoftOauthSuccess: Story = {
+	name: "Soft — OAuth success",
+	args: {
+		tone: "success",
+		variant: "soft",
+		children: "Account connected successfully.",
+		onDismiss: () => undefined,
+	},
+};
+
+export const SoftOauthError: Story = {
+	name: "Soft — OAuth error",
+	args: {
+		tone: "danger",
+		variant: "soft",
+		children:
+			"Your organisation's admin needs to approve Remit. Ask your IT admin to grant the required permissions.",
+		onDismiss: () => undefined,
+	},
+};
+
+export const SoftNeutral: Story = {
+	name: "Soft — neutral",
+	args: {
+		tone: "info",
+		variant: "soft",
+		children: "Preferences are stored locally.",
+	},
+};