@olympusoss/canvas 2.10.0 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olympusoss/canvas",
-	"version": "2.10.0",
+	"version": "2.11.0",
 	"type": "module",
 	"main": "./src/index.ts",
 	"types": "./src/index.ts",

package/src/components/atoms/spinner.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
+	/**
+	 * Pixel size of the rendered SVG.
+	 * @default 16
+	 */
+	size?: number;
+	/** Tailwind / CSS classes merged via `cn()`. */
+	className?: string;
+	/**
+	 * Accessible label announced by screen readers. Defaults to `"Loading"`.
+	 * Pass an empty string to mark as purely decorative when the surrounding
+	 * label already announces the loading state.
+	 */
+	label?: string;
+}
+
+/**
+ * Inline loading indicator. Wraps `Loader2` from lucide-react with the
+ * canvas `animate-spin` keyframe and an accessible label.
+ *
+ * Use inside buttons (`{loading ? <Spinner/> : 'Submit'}`), next to inline
+ * labels, or anywhere a small spinning indicator is appropriate. For a
+ * full-section loader with a message, use `LoadingState` (molecule).
+ */
+const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(
+	({ size = 16, className, label = "Loading", ...props }, ref) => (
+		<Loader2
+			ref={ref}
+			size={size}
+			className={cn("animate-spin shrink-0", className)}
+			role={label ? "status" : undefined}
+			aria-label={label || undefined}
+			aria-hidden={label ? undefined : true}
+			{...props}
+		/>
+	),
+);
+Spinner.displayName = "Spinner";
+
+export { Spinner };

package/src/components/molecules/auth-shell.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Card, CardContent, CardHeader } from "./card";
+
+export interface AuthShellProps {
+	/**
+	 * Brand lockup rendered above the card. Compose a `ClientBrand` (or
+	 * your own component) and pass it in. Slot is left empty to keep this
+	 * shell unaware of OAuth2 / Hydra specifics.
+	 */
+	brand?: React.ReactNode;
+	/** Card title. Pairs with `subtitle`. */
+	title?: React.ReactNode;
+	/** Optional one-line subtitle shown beneath `title`. */
+	subtitle?: React.ReactNode;
+	/** Card body content. */
+	children?: React.ReactNode;
+	/**
+	 * Optional footer line beneath the card (legal / privacy / support).
+	 */
+	footer?: React.ReactNode;
+	/**
+	 * Card width preset. `default` = 408px (single-column flows like login,
+	 * recovery), `wide` = 460px (multi-step or denser flows like consent).
+	 * @default "default"
+	 */
+	width?: "default" | "wide";
+	/**
+	 * Allow children to break the card frame (useful for full-bleed flow
+	 * pickers or media). When `false` the card content gets the standard
+	 * `p-6` padding.
+	 * @default false
+	 */
+	flush?: boolean;
+	/** Tailwind / CSS classes merged onto the outer wrapper via `cn()`. */
+	className?: string;
+}
+
+/**
+ * Centered single-card layout for auth flows.
+ *
+ * Renders, top to bottom:
+ *   1. Brand slot (`brand`) above the card
+ *   2. Card with optional centred title + subtitle, then `children`
+ *   3. Optional footer line beneath the card
+ *
+ * Layout is intentionally narrow and prescriptive: this is the
+ * agreed-upon shape for every Olympus auth screen (login, register,
+ * recovery, reset, verify, OTP, consent, logout, status). For app shells
+ * with sidebars or multi-pane layouts, compose your own flex shell
+ * directly (see `Sidebar` + `SidebarInset`).
+ */
+const AuthShell = React.forwardRef<HTMLDivElement, AuthShellProps>(
+	(
+		{ brand, title, subtitle, children, footer, width = "default", flush = false, className },
+		ref,
+	) => (
+		<div
+			ref={ref}
+			className={cn(
+				"relative z-10 flex min-h-screen flex-col items-center justify-center px-6 py-12",
+				className,
+			)}
+		>
+			{brand && <div className="mb-7">{brand}</div>}
+
+			<Card
+				className={cn(
+					"w-full shadow-lg shadow-black/5 dark:shadow-black/30",
+					width === "wide" ? "max-w-[460px]" : "max-w-[408px]",
+				)}
+			>
+				{title && (
+					<CardHeader className={cn("text-center", subtitle ? "pb-3" : "pb-4")}>
+						<h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+						{subtitle && <p className="mt-1.5 text-sm text-muted-foreground">{subtitle}</p>}
+					</CardHeader>
+				)}
+				<CardContent className={cn(flush ? "p-0" : "pt-0", !title && !flush && "pt-6")}>
+					{children}
+				</CardContent>
+			</Card>
+
+			{footer && (
+				<div className="mt-6 max-w-[460px] text-center text-xs text-muted-foreground">{footer}</div>
+			)}
+		</div>
+	),
+);
+AuthShell.displayName = "AuthShell";
+
+export { AuthShell };

package/src/components/molecules/client-brand.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface ClientBrandProps {
+	/** OAuth2 client display name (e.g. "Questrade", "Athena"). */
+	clientName: string;
+	/**
+	 * Optional logo URI. Renders as an `<img>` next to the wordmark when
+	 * present. When absent, a tinted monogram tile is rendered using the
+	 * first letter of `clientName`.
+	 */
+	clientLogoUri?: string;
+	/**
+	 * Pixel size of the logo/monogram tile.
+	 * @default 36
+	 */
+	size?: number;
+	/**
+	 * Show the wordmark next to the logo.
+	 * @default true
+	 */
+	showWordmark?: boolean;
+	/**
+	 * Background colour applied to the monogram fallback tile. Honours
+	 * Tailwind classes or a raw CSS colour.
+	 * @default "bg-foreground text-background"
+	 */
+	monogramClassName?: string;
+	/** Tailwind / CSS classes merged onto the root via `cn()`. */
+	className?: string;
+}
+
+/**
+ * OAuth2 client lockup. Renders the requesting application's logo + name
+ * so users see "you're signing in to [App]", not the identity-provider
+ * platform underneath.
+ *
+ * Provide `clientLogoUri` to render the client's logo image. Falls back to
+ * a monogram tile when no URI is supplied or the image fails to load.
+ *
+ * Designed for the brand slot of `AuthShell` / sign-in pages. Stays a thin
+ * presentation primitive: no client-registry lookups, no fetches. Pass the
+ * shaped data in from your auth backend.
+ */
+const ClientBrand = React.forwardRef<HTMLDivElement, ClientBrandProps>(
+	(
+		{ clientName, clientLogoUri, size = 36, showWordmark = true, monogramClassName, className },
+		ref,
+	) => {
+		const [imgFailed, setImgFailed] = React.useState(false);
+		const showImage = !!clientLogoUri && !imgFailed;
+		const initial = (clientName?.trim()?.[0] || "?").toUpperCase();
+
+		return (
+			<div
+				ref={ref}
+				role="img"
+				aria-label={`Signing in to ${clientName}`}
+				className={cn("flex items-center gap-2.5", className)}
+			>
+				{showImage ? (
+					<img
+						src={clientLogoUri}
+						alt=""
+						width={size}
+						height={size}
+						className="shrink-0 rounded-lg object-contain"
+						style={{ width: size, height: size }}
+						onError={() => setImgFailed(true)}
+					/>
+				) : (
+					<div
+						className={cn(
+							"flex shrink-0 items-center justify-center rounded-lg font-semibold",
+							monogramClassName || "bg-foreground text-background",
+						)}
+						style={{ width: size, height: size, fontSize: Math.round(size * 0.5) }}
+						aria-hidden
+					>
+						{initial}
+					</div>
+				)}
+				{showWordmark && (
+					<span className="text-lg font-semibold tracking-tight text-foreground">{clientName}</span>
+				)}
+			</div>
+		);
+	},
+);
+ClientBrand.displayName = "ClientBrand";
+
+export { ClientBrand };

package/src/components/molecules/countdown-button.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Button, type ButtonProps } from "../atoms/button";
+
+export interface CountdownButtonProps
+	extends Omit<ButtonProps, "disabled" | "onClick" | "children"> {
+	/**
+	 * Seconds to wait before the button becomes clickable. The countdown
+	 * starts when the component mounts and resets every time `triggerKey`
+	 * changes.
+	 * @default 30
+	 */
+	duration?: number;
+	/**
+	 * Bump this value to restart the countdown (e.g. after a successful
+	 * resend, set it to `Date.now()` so the button locks out again).
+	 */
+	triggerKey?: string | number;
+	/** Called when the button is clicked and the countdown has elapsed. */
+	onClick?: () => void;
+	/**
+	 * Render-prop for the button label. Receives `secondsLeft` (0 when
+	 * ready). Default renders `"Resend"` / `"Resend in 23s"`.
+	 */
+	children?: React.ReactNode | ((secondsLeft: number) => React.ReactNode);
+	/**
+	 * Action verb shown in the default label. Used as `${verb}` when ready
+	 * and `${verb} in Ns` while counting down.
+	 * @default "Resend"
+	 */
+	verb?: string;
+}
+
+/**
+ * Button that locks out for a duration after mount or after `triggerKey`
+ * changes. Renders countdown text while disabled.
+ *
+ * Use for "resend code" / "resend email" flows where the user shouldn't be
+ * able to spam the action. Triggering a new send from elsewhere should
+ * update `triggerKey` to restart the lockout.
+ */
+const CountdownButton = React.forwardRef<HTMLButtonElement, CountdownButtonProps>(
+	(
+		{ duration = 30, triggerKey, onClick, children, verb = "Resend", className, ...buttonProps },
+		ref,
+	) => {
+		const [secondsLeft, setSecondsLeft] = React.useState(duration);
+
+		React.useEffect(() => {
+			setSecondsLeft(duration);
+			const interval = setInterval(() => {
+				setSecondsLeft((s) => {
+					if (s <= 1) {
+						clearInterval(interval);
+						return 0;
+					}
+					return s - 1;
+				});
+			}, 1000);
+			return () => clearInterval(interval);
+		}, [duration, triggerKey]);
+
+		const ready = secondsLeft <= 0;
+		const labelNode =
+			typeof children === "function"
+				? children(secondsLeft)
+				: children !== undefined
+					? children
+					: ready
+						? verb
+						: `${verb} in ${secondsLeft}s`;
+
+		return (
+			<Button
+				ref={ref}
+				type="button"
+				disabled={!ready}
+				onClick={() => ready && onClick?.()}
+				className={cn(className)}
+				{...buttonProps}
+			>
+				{labelNode}
+			</Button>
+		);
+	},
+);
+CountdownButton.displayName = "CountdownButton";
+
+export { CountdownButton };

package/src/components/molecules/password-input.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Eye, EyeOff } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../atoms/button";
+import { Input } from "../atoms/input";
+
+export interface PasswordInputProps
+	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+	/**
+	 * Initial visibility state. Pair with `onVisibilityChange` for a
+	 * controlled input.
+	 * @default false
+	 */
+	defaultVisible?: boolean;
+	/** Controlled visibility. Overrides `defaultVisible`. */
+	visible?: boolean;
+	/** Fired when the user clicks the eye toggle. */
+	onVisibilityChange?: (visible: boolean) => void;
+	/**
+	 * Accessible label on the eye toggle button.
+	 * @default "Toggle password visibility"
+	 */
+	toggleLabel?: string;
+}
+
+/**
+ * Password input with a show/hide eye toggle. Renders as an `Input` (atom)
+ * with a `Button` (atom) absolutely positioned at the trailing edge.
+ *
+ * Use anywhere a password field is needed: login, registration, settings,
+ * reset flows.
+ */
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+	(
+		{
+			defaultVisible = false,
+			visible: controlledVisible,
+			onVisibilityChange,
+			toggleLabel = "Toggle password visibility",
+			className,
+			...props
+		},
+		ref,
+	) => {
+		const [internalVisible, setInternalVisible] = React.useState(defaultVisible);
+		const visible = controlledVisible ?? internalVisible;
+
+		const toggle = () => {
+			const next = !visible;
+			if (controlledVisible === undefined) setInternalVisible(next);
+			onVisibilityChange?.(next);
+		};
+
+		return (
+			<div className="relative">
+				<Input
+					ref={ref}
+					type={visible ? "text" : "password"}
+					className={cn("pr-10", className)}
+					{...props}
+				/>
+				<Button
+					type="button"
+					variant="ghost"
+					size="icon"
+					onClick={toggle}
+					aria-label={toggleLabel}
+					aria-pressed={visible}
+					className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+					tabIndex={-1}
+				>
+					{visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+				</Button>
+			</div>
+		);
+	},
+);
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };

package/src/components/molecules/password-strength-meter.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export type PasswordStrengthLevel = 0 | 1 | 2 | 3 | 4;
+
+export interface PasswordStrength {
+	/** 0 = empty, 1 = weak, 2 = fair, 3 = good, 4 = strong. */
+	level: PasswordStrengthLevel;
+	/** Short human label shown next to the meter. */
+	label: string;
+}
+
+/**
+ * Score a password 0-4 based on length + character variety. Returns the
+ * level plus a short label. Heuristic-only; for a true strength score use a
+ * dictionary-aware estimator like `@zxcvbn-ts/core` and map its score here.
+ */
+export function scorePassword(pw: string): PasswordStrength {
+	if (!pw) return { level: 0, label: "" };
+	let score = 0;
+	if (pw.length >= 8) score++;
+	if (pw.length >= 12) score++;
+	if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) score++;
+	if (/\d/.test(pw)) score++;
+	if (/[^A-Za-z0-9]/.test(pw)) score++;
+	if (pw.length < 6) score = Math.min(score, 1);
+
+	// score is clamped into [1, 4]: `Math.max(1, …)` provides the floor,
+	// `Math.min(4, …)` provides the ceiling. Higher-tier scorers can map
+	// dictionary results into the same shape.
+	const level = Math.min(4, Math.max(1, score)) as PasswordStrengthLevel;
+	const labels = ["", "Weak", "Fair", "Good", "Strong"];
+	return { level, label: labels[level] };
+}
+
+export interface PasswordStrengthMeterProps {
+	/** Password value to score. Empty string renders nothing. */
+	value: string;
+	/**
+	 * Custom scorer. Override the default heuristic with a zxcvbn-based
+	 * scorer for production use.
+	 */
+	score?: (pw: string) => PasswordStrength;
+	/** Tailwind / CSS classes merged onto the root via `cn()`. */
+	className?: string;
+	/**
+	 * Hide the strength label text and show only the bar.
+	 * @default false
+	 */
+	hideLabel?: boolean;
+}
+
+/**
+ * Four-segment strength bar for a password input. Renders nothing for an
+ * empty value. Use beneath a password input in registration and reset
+ * flows.
+ */
+const PasswordStrengthMeter = React.forwardRef<HTMLDivElement, PasswordStrengthMeterProps>(
+	({ value, score = scorePassword, className, hideLabel = false }, ref) => {
+		const { level, label } = score(value);
+		if (level === 0) return null;
+		const segmentColors = [
+			"bg-muted",
+			"bg-destructive",
+			"bg-amber-500",
+			"bg-emerald-500",
+			"bg-emerald-600",
+		];
+		const labelColor =
+			level === 1
+				? "text-destructive"
+				: level === 2
+					? "text-amber-600 dark:text-amber-500"
+					: "text-emerald-600 dark:text-emerald-500";
+
+		return (
+			<div ref={ref} className={cn("flex items-center gap-2", className)}>
+				<div className="flex flex-1 gap-1" aria-hidden>
+					{[1, 2, 3, 4].map((seg) => (
+						<div
+							key={seg}
+							className={cn(
+								"h-1 flex-1 rounded-full transition-colors",
+								seg <= level ? segmentColors[level] : "bg-muted",
+							)}
+						/>
+					))}
+				</div>
+				{!hideLabel && (
+					<span className={cn("text-xs font-medium tabular-nums", labelColor)}>{label}</span>
+				)}
+				<span className="sr-only" role="status">
+					Password strength: {label}
+				</span>
+			</div>
+		);
+	},
+);
+PasswordStrengthMeter.displayName = "PasswordStrengthMeter";
+
+export { PasswordStrengthMeter };

package/src/index.ts

@@ -27,6 +27,7 @@ export { Section, type SectionProps } from "./components/atoms/section";
 export { Separator } from "./components/atoms/separator";
 export { Skeleton } from "./components/atoms/skeleton";
 export { Slider } from "./components/atoms/slider";
+export { Spinner, type SpinnerProps } from "./components/atoms/spinner";
 export { Switch } from "./components/atoms/switch";
 export { Textarea } from "./components/atoms/textarea";
 export { Toggle, toggleVariants } from "./components/atoms/toggle";
@@ -148,6 +149,10 @@ export {
 	type AnimatedBackgroundOrb,
 	type AnimatedBackgroundProps,
 } from "./components/molecules/animated-background";
+export {
+	AuthShell,
+	type AuthShellProps,
+} from "./components/molecules/auth-shell";
 export {
 	BrandLockup,
 	type BrandLockupProps,
@@ -176,7 +181,15 @@ export {
 	CardHeader,
 	CardTitle,
 } from "./components/molecules/card";
+export {
+	ClientBrand,
+	type ClientBrandProps,
+} from "./components/molecules/client-brand";
 export { CodeBlock, type CodeBlockProps } from "./components/molecules/code-block";
+export {
+	CountdownButton,
+	type CountdownButtonProps,
+} from "./components/molecules/countdown-button";
 export { EmptyState, type EmptyStateProps } from "./components/molecules/empty-state";
 export { ErrorState, type ErrorStateProps } from "./components/molecules/error-state";
 export {
@@ -229,6 +242,17 @@ export {
 	PaginationNext,
 	PaginationPrevious,
 } from "./components/molecules/pagination";
+export {
+	PasswordInput,
+	type PasswordInputProps,
+} from "./components/molecules/password-input";
+export {
+	type PasswordStrength,
+	type PasswordStrengthLevel,
+	PasswordStrengthMeter,
+	type PasswordStrengthMeterProps,
+	scorePassword,
+} from "./components/molecules/password-strength-meter";
 export {
 	PhoneInput,
 	type PhoneInputProps,