@olympusoss/canvas 2.6.19

package/src/components/molecules/secret-field.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Icon } from "../atoms/icon";
+import { Input } from "../atoms/input";
+import { Label } from "../atoms/label";
+
+export type SecretFieldStatus = "idle" | "validating" | "valid" | "invalid";
+
+export interface SecretFieldProps {
+	id: string;
+	value: string;
+	onChange: (value: string) => void;
+	/**
+	 * Async validator. Return `true` (or any string) on success; throw or return
+	 * `false` on failure. The thrown message is shown below the input.
+	 */
+	onValidate?: (value: string) => Promise<boolean | string>;
+	/**
+	 * Called after successful validation with the validated value.
+	 * Use this to persist the value once it's confirmed valid.
+	 */
+	onSave?: (value: string) => void;
+	/**
+	 * Notifies when the validation status changes. Useful for parent state.
+	 */
+	onStatusChange?: (status: SecretFieldStatus) => void;
+	placeholder?: string;
+	label?: string;
+	disabled?: boolean;
+	/** Minimum length before auto-validation starts. Default 3. */
+	minLength?: number;
+	/** Show the reveal (eye) toggle. Default true. */
+	revealable?: boolean;
+	className?: string;
+}
+
+export function SecretField({
+	id,
+	value,
+	onChange,
+	onValidate,
+	onSave,
+	onStatusChange,
+	placeholder,
+	label,
+	disabled,
+	minLength = 3,
+	revealable = true,
+	className,
+}: SecretFieldProps) {
+	const [visible, setVisible] = React.useState(false);
+	const [status, setStatus] = React.useState<SecretFieldStatus>("idle");
+	const [error, setError] = React.useState("");
+	const debounceRef = React.useRef(0);
+	const lastValidatedRef = React.useRef("");
+
+	React.useEffect(() => {
+		onStatusChange?.(status);
+	}, [status, onStatusChange]);
+
+	React.useEffect(() => {
+		if (!onValidate) return;
+		if (!value || value.length < minLength) {
+			setStatus("idle");
+			setError("");
+			return;
+		}
+		/* c8 ignore next -- race-condition guard: only triggered by rapid input */
+		if (value === lastValidatedRef.current) return;
+
+		const id = ++debounceRef.current;
+		setStatus("validating");
+		setError("");
+
+		const timer = setTimeout(async () => {
+			/* c8 ignore next -- race-condition guard: debounce re-entry unreachable in tests */
+			if (id !== debounceRef.current) return;
+			try {
+				const result = await onValidate(value);
+				/* c8 ignore next -- race-condition guard: await-resolved stale id unreachable in tests */
+				if (id !== debounceRef.current) return;
+				if (result === true || typeof result === "string") {
+					setStatus("valid");
+					setError("");
+					lastValidatedRef.current = value;
+					onSave?.(value);
+				} else {
+					setStatus("invalid");
+					setError("Validation failed");
+				}
+			} catch (err) {
+				/* c8 ignore next -- race-condition guard: await-rejected stale id unreachable in tests */
+				if (id !== debounceRef.current) return;
+				setStatus("invalid");
+				setError(err instanceof Error ? err.message : "Validation failed");
+			}
+		}, 800);
+
+		return () => clearTimeout(timer);
+	}, [value, minLength, onValidate, onSave]);
+
+	const handleChange = (v: string) => {
+		onChange(v);
+		if (error) setError("");
+		lastValidatedRef.current = "";
+	};
+
+	return (
+		<div className={cn("space-y-1", className)}>
+			{label && (
+				<Label htmlFor={id} className="text-xs">
+					{label}
+				</Label>
+			)}
+			<div className="relative">
+				<Input
+					id={id}
+					type={visible ? "text" : "password"}
+					value={value}
+					onChange={(e) => handleChange(e.target.value)}
+					placeholder={placeholder}
+					className={cn(
+						"font-mono text-sm",
+						revealable && "pr-16",
+						!revealable && "pr-10",
+						status === "invalid" && "border-destructive",
+						status === "valid" && "border-green-500/50",
+					)}
+					disabled={disabled}
+				/>
+				<div className="absolute right-2.5 top-1/2 -translate-y-1/2 flex items-center gap-1.5">
+					{status === "validating" && (
+						<Icon name="LoaderCircle" className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+					)}
+					{status === "valid" && <Icon name="CircleCheck" className="h-3.5 w-3.5 text-green-500" />}
+					{status === "invalid" && <Icon name="CircleX" className="h-3.5 w-3.5 text-destructive" />}
+					{revealable && (
+						<button
+							type="button"
+							onClick={() => setVisible((v) => !v)}
+							aria-label={visible ? "Hide value" : "Show value"}
+							className="text-muted-foreground hover:text-foreground transition-colors"
+							tabIndex={-1}
+						>
+							<Icon name={visible ? "EyeOff" : "Eye"} className="h-4 w-4" />
+						</button>
+					)}
+				</div>
+			</div>
+			{error && <p className="text-xs text-destructive">{error}</p>}
+		</div>
+	);
+}
+
+SecretField.displayName = "SecretField";

package/src/components/molecules/section-card.tsx

@@ -0,0 +1,91 @@
+import type * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Icon } from "../atoms/icon";
+import { Alert, AlertDescription } from "./alert";
+import { Card, CardContent, CardHeader } from "./card";
+
+export interface SectionCardProps {
+	title?: string | React.ReactNode;
+	subtitle?: string;
+	/**
+	 * Icon rendered to the left of the title (16px Lucide via the Canvas
+	 * `<Icon>` atom is the canonical pattern).
+	 */
+	icon?: React.ReactNode;
+	/** Right-aligned action slot inside the header. */
+	actions?: React.ReactNode;
+	/** @deprecated Use `actions`. */
+	headerActions?: React.ReactNode;
+	children?: React.ReactNode;
+	loading?: boolean;
+	error?: string | boolean | null;
+	emptyMessage?: string;
+	padding?: boolean;
+	className?: string;
+}
+
+export function SectionCard({
+	title,
+	subtitle,
+	icon,
+	actions,
+	headerActions,
+	children,
+	loading = false,
+	error,
+	emptyMessage,
+	padding = true,
+	className,
+}: SectionCardProps) {
+	const resolvedActions = actions ?? headerActions;
+	const hasHeader = title || subtitle || icon || resolvedActions;
+	return (
+		<Card className={className}>
+			{hasHeader && (
+				<>
+					<CardHeader className="flex flex-row items-center justify-between space-y-0 px-5 pb-3 pt-[18px]">
+						<div className="flex flex-1 flex-col gap-1">
+							{(title || icon) && (
+								<div className="flex items-center gap-2">
+									{icon}
+									{title &&
+										(typeof title === "string" ? (
+											<span className="text-[15px] font-semibold leading-none">{title}</span>
+										) : (
+											title
+										))}
+								</div>
+							)}
+							{subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
+						</div>
+						{resolvedActions && <div className="flex items-center gap-2">{resolvedActions}</div>}
+					</CardHeader>
+					<div className="mx-5 mb-3.5 h-px bg-border" />
+				</>
+			)}
+			<CardContent className={cn(padding ? "px-5 pb-[18px] pt-0" : "p-0")}>
+				{loading ? (
+					<div className="flex items-center justify-center py-8">
+						<Icon name="LoaderCircle" className="h-6 w-6 animate-spin text-muted-foreground" />
+					</div>
+				) : error ? (
+					<Alert variant="destructive">
+						<Icon name="CircleX" className="h-4 w-4" />
+						<AlertDescription>
+							{typeof error === "string" ? error : "An error occurred"}
+						</AlertDescription>
+					</Alert>
+				) : emptyMessage && !children ? (
+					<div className="flex items-center justify-center py-8 text-center">
+						<p className="text-sm text-muted-foreground">{emptyMessage}</p>
+					</div>
+				) : (
+					children
+				)}
+			</CardContent>
+		</Card>
+	);
+}
+
+SectionCard.displayName = "SectionCard";

package/src/components/molecules/stat-card.tsx

@@ -0,0 +1,96 @@
+import { ArrowDown, ArrowUp } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Card, CardContent } from "./card";
+
+export interface StatCardProps {
+	title: string;
+	value: React.ReactNode;
+	icon?: React.ReactNode;
+	colorVariant?: "primary" | "blue" | "purple" | "success" | "warning" | "amber" | "destructive";
+	/** Optional delta line shown under the value (e.g. "+4.2%"). */
+	delta?: React.ReactNode;
+	/** Tone for the delta — `up` is green, `down` is red, `neutral` is muted. */
+	deltaTone?: "up" | "down" | "neutral";
+	/** Caption shown next to the delta (e.g. "vs. last 7d"). */
+	deltaCaption?: React.ReactNode;
+	/**
+	 * When `true` (default) and `delta` is a string, prepend an ArrowUp /
+	 * ArrowDown icon based on `deltaTone`. Pass `false` to opt out, or pass
+	 * `delta` as ReactNode to fully control rendering yourself.
+	 */
+	deltaArrow?: boolean;
+	className?: string;
+}
+
+const COLOR: Record<NonNullable<StatCardProps["colorVariant"]>, string> = {
+	primary: "bg-primary/10 text-primary",
+	blue: "bg-[hsl(var(--stat-blue)/0.1)] text-[hsl(var(--stat-blue))]",
+	purple: "bg-[hsl(var(--stat-purple)/0.1)] text-[hsl(var(--stat-purple))]",
+	success: "bg-[hsl(var(--stat-success)/0.1)] text-[hsl(var(--stat-success))]",
+	warning: "bg-[hsl(var(--stat-amber)/0.1)] text-[hsl(var(--stat-amber))]",
+	amber: "bg-[hsl(var(--stat-amber)/0.1)] text-[hsl(var(--stat-amber))]",
+	destructive: "bg-[hsl(var(--stat-destructive)/0.1)] text-[hsl(var(--stat-destructive))]",
+};
+
+const DELTA_TONE: Record<NonNullable<StatCardProps["deltaTone"]>, string> = {
+	up: "text-green-600 dark:text-green-500",
+	down: "text-red-600 dark:text-red-500",
+	neutral: "text-muted-foreground",
+};
+
+export function StatCard({
+	title,
+	value,
+	icon,
+	colorVariant = "primary",
+	delta,
+	deltaTone = "up",
+	deltaCaption,
+	deltaArrow = true,
+	className,
+}: StatCardProps) {
+	const showArrow = deltaArrow && typeof delta === "string" && deltaTone !== "neutral";
+	const ArrowGlyph = deltaTone === "down" ? ArrowDown : ArrowUp;
+	return (
+		<Card className={className}>
+			<CardContent className="p-5">
+				<div className="flex items-start justify-between gap-3">
+					<div className="min-w-0 flex-1">
+						<p className="truncate text-[13px] font-medium text-muted-foreground">{title}</p>
+						<p className="mt-1 text-[28px] font-semibold leading-tight tracking-[-0.02em]">
+							{value}
+						</p>
+					</div>
+					{icon && (
+						<div
+							className={cn(
+								"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
+								COLOR[colorVariant],
+							)}
+						>
+							{icon}
+						</div>
+					)}
+				</div>
+				{delta != null && (
+					<div className="mt-3 flex items-center gap-1.5 text-xs">
+						<span
+							className={cn(
+								"inline-flex items-center gap-0.5 font-mono font-medium",
+								DELTA_TONE[deltaTone],
+							)}
+						>
+							{showArrow && <ArrowGlyph className="h-3 w-3" aria-hidden />}
+							{delta}
+						</span>
+						{deltaCaption != null && <span className="text-muted-foreground">{deltaCaption}</span>}
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+}
+
+StatCard.displayName = "StatCard";

package/src/components/molecules/status-badge.tsx

@@ -0,0 +1,42 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const statusBadgeVariants = cva(
+	"inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium",
+	{
+		variants: {
+			status: {
+				success: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
+				warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
+				error: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+				info: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+				neutral: "bg-muted text-muted-foreground",
+			},
+		},
+		defaultVariants: {
+			status: "neutral",
+		},
+	},
+);
+
+export interface StatusBadgeProps
+	extends React.HTMLAttributes<HTMLSpanElement>,
+		VariantProps<typeof statusBadgeVariants> {
+	dot?: boolean;
+}
+
+const StatusBadge = React.forwardRef<HTMLSpanElement, StatusBadgeProps>(
+	({ status, dot = true, className, children, ...props }, ref) => {
+		return (
+			<span ref={ref} className={cn(statusBadgeVariants({ status }), className)} {...props}>
+				{dot && <span className="h-1.5 w-1.5 rounded-full bg-current" />}
+				{children}
+			</span>
+		);
+	},
+);
+StatusBadge.displayName = "StatusBadge";
+
+export { StatusBadge, statusBadgeVariants };

package/src/components/molecules/stepper.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import type * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Icon } from "../atoms/icon";
+
+export type StepStatus = "pending" | "active" | "complete" | "error";
+
+export interface StepperStep {
+	id: string;
+	label: string;
+	status: StepStatus;
+	/** Optional icon override (atoms/icon IconName or React node). */
+	icon?: React.ReactNode;
+	disabled?: boolean;
+}
+
+export interface StepperProps {
+	steps: StepperStep[];
+	orientation?: "horizontal" | "vertical";
+	onStepClick?: (id: string) => void;
+	className?: string;
+}
+
+const STATUS_STYLES: Record<StepStatus, { dot: string; label: string }> = {
+	pending: {
+		dot: "border-muted-foreground/30 text-muted-foreground",
+		label: "text-muted-foreground",
+	},
+	active: {
+		dot: "border-primary bg-primary text-primary-foreground",
+		label: "text-foreground font-medium",
+	},
+	complete: {
+		dot: "border-green-500 bg-green-500 text-white",
+		label: "text-foreground",
+	},
+	error: {
+		dot: "border-destructive bg-destructive text-destructive-foreground",
+		label: "text-destructive",
+	},
+};
+
+export function Stepper({ steps, orientation = "vertical", onStepClick, className }: StepperProps) {
+	const vertical = orientation === "vertical";
+	return (
+		<ol
+			className={cn("flex", vertical ? "flex-col gap-1" : "flex-row items-center gap-2", className)}
+		>
+			{steps.map((step, i) => {
+				const styles = STATUS_STYLES[step.status];
+				const clickable = !!onStepClick && !step.disabled;
+				return (
+					<li key={step.id} className={cn("flex items-center gap-3", vertical ? "py-2" : "flex-1")}>
+						<button
+							type="button"
+							disabled={!clickable}
+							onClick={() => clickable && onStepClick(step.id)}
+							className={cn(
+								"flex items-center gap-3 rounded-md transition-colors",
+								vertical && "w-full px-2 py-1 text-left",
+								clickable && "hover:bg-accent/50",
+							)}
+						>
+							<span
+								className={cn(
+									"flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs",
+									styles.dot,
+								)}
+							>
+								{step.icon ? (
+									typeof step.icon === "string" ? (
+										<Icon name={step.icon as never} className="h-3.5 w-3.5" />
+									) : (
+										step.icon
+									)
+								) : step.status === "complete" ? (
+									<Icon name="Check" className="h-3.5 w-3.5" />
+								) : step.status === "error" ? (
+									<Icon name="X" className="h-3.5 w-3.5" />
+								) : (
+									i + 1
+								)}
+							</span>
+							<span className={cn("text-sm", styles.label)}>{step.label}</span>
+						</button>
+						{!vertical && i < steps.length - 1 && <span className="mx-2 h-px flex-1 bg-border" />}
+					</li>
+				);
+			})}
+		</ol>
+	);
+}
+
+Stepper.displayName = "Stepper";

package/src/components/molecules/table.tsx

@@ -0,0 +1,157 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+	/** `<TableHeader>` + `<TableBody>` + optional `<TableFooter>` + optional `<TableCaption>`. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the `<table>` via `cn()`. */
+	className?: string;
+}
+
+const Table = React.forwardRef<HTMLTableElement, TableProps>(({ className, ...props }, ref) => (
+	<div className="relative w-full overflow-auto">
+		<table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+	</div>
+));
+Table.displayName = "Table";
+
+export interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+	/** A single `<TableRow>` of `<TableHead>` cells. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the `<thead>` via `cn()`. */
+	className?: string;
+}
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(
+	({ className, ...props }, ref) => (
+		<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+	),
+);
+TableHeader.displayName = "TableHeader";
+
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+	/** A list of `<TableRow>`s of `<TableCell>`s. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the `<tbody>` via `cn()`. */
+	className?: string;
+}
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
+	({ className, ...props }, ref) => (
+		<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+	),
+);
+TableBody.displayName = "TableBody";
+
+export interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+	/** A `<TableRow>` of summary `<TableCell>`s (totals, etc.). */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the `<tfoot>` via `cn()`. */
+	className?: string;
+}
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooterProps>(
+	({ className, ...props }, ref) => (
+		<tfoot
+			ref={ref}
+			className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+			{...props}
+		/>
+	),
+);
+TableFooter.displayName = "TableFooter";
+
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+	/** `<TableHead>` or `<TableCell>` children. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the `<tr>` via `cn()`. */
+	className?: string;
+	/**
+	 * Optional data-state — pass `"selected"` to highlight selected rows
+	 * (e.g. checkbox-driven multi-select tables). Mirrors Radix's pattern.
+	 */
+	"data-state"?: "selected";
+}
+
+const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
+	({ className, ...props }, ref) => (
+		<tr
+			ref={ref}
+			className={cn(
+				"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+TableRow.displayName = "TableRow";
+
+export interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+	/** Column header text. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the `<th>` via `cn()`. */
+	className?: string;
+	/** Number of columns this header spans. */
+	colSpan?: number;
+	/** Number of rows this header spans. */
+	rowSpan?: number;
+	/** Scope of the header — `"col"` (default) or `"row"` for row-headers. */
+	scope?: "col" | "row" | "rowgroup" | "colgroup";
+}
+
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+	({ className, ...props }, ref) => (
+		<th
+			ref={ref}
+			className={cn(
+				"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+TableHead.displayName = "TableHead";
+
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+	/** Cell content. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the `<td>` via `cn()`. */
+	className?: string;
+	/** Number of columns this cell spans. */
+	colSpan?: number;
+	/** Number of rows this cell spans. */
+	rowSpan?: number;
+}
+
+const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
+	({ className, ...props }, ref) => (
+		<td
+			ref={ref}
+			className={cn(
+				"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+TableCell.displayName = "TableCell";
+
+export interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {
+	/** A short label describing the table — read by screen readers. */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the `<caption>` via `cn()`. */
+	className?: string;
+}
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, TableCaptionProps>(
+	({ className, ...props }, ref) => (
+		<caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+	),
+);
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };