@olympusoss/canvas 2.11.1 → 2.13.0

package/package.json

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

package/src/components/charts/metric-breakdown.tsx

@@ -0,0 +1,316 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export type MetricBreakdownTone = "success" | "warning" | "error" | "neutral";
+
+const TONE_HSL: Record<MetricBreakdownTone, string> = {
+	success: "143 70% 40%",
+	warning: "38 92% 50%",
+	error: "0 80% 60%",
+	neutral: "var(--muted-foreground)",
+};
+
+export interface MetricBreakdownRow {
+	/** Row label (often a code or category key). Used as the React key. */
+	label: React.ReactNode;
+	/** Numeric value rendered to the right of the label. */
+	value: number;
+	/**
+	 * Period-over-period change as a percentage. Positive renders as `▲ N%` in
+	 * the success hue, negative as `▼ N%` in the error hue. Omit to hide the
+	 * delta column for that row.
+	 */
+	delta?: number;
+	/**
+	 * CSS variable name (without leading `--`) used for the row's swatch and
+	 * bar fill. Falls back to the wrapper's `defaultColorVar`.
+	 */
+	colorVar?: string;
+}
+
+export interface MetricBreakdownChip {
+	/** Chip label, typically a code or short tag. Used as the React key. */
+	label: React.ReactNode;
+	/** Optional count rendered after a thin separator. */
+	count?: number;
+	/** Visual tone. Default `error`. */
+	tone?: MetricBreakdownTone;
+}
+
+export interface MetricBreakdownProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** Primary metric value rendered as the headline number. */
+	value: React.ReactNode;
+	/** Caption rendered below the headline value (uppercase muted). */
+	label: React.ReactNode;
+	/** Secondary metric rendered top-right (e.g. an error rate). */
+	rate?: React.ReactNode;
+	/** Caption for the secondary metric (uppercase muted). */
+	rateLabel?: React.ReactNode;
+	/** Tone driving the secondary metric color. Default `neutral`. */
+	rateTone?: MetricBreakdownTone;
+	/** Sparkline data points. Rendered as an SVG line + area-fill ramp. */
+	spark?: number[];
+	/** Unit suffix rendered next to the last value of the sparkline, e.g. `req/s`. */
+	sparkUnit?: React.ReactNode;
+	/**
+	 * CSS variable name (without leading `--`) for the sparkline color. Default
+	 * `chart-1`. Also used as the fallback for breakdown rows that omit `colorVar`.
+	 */
+	defaultColorVar?: string;
+	/** Pixel height of the sparkline. Default `36`. */
+	sparkHeight?: number;
+	/** Category breakdown rows. */
+	breakdown?: MetricBreakdownRow[];
+	/** Format breakdown row values. Default `toLocaleString`. */
+	valueFormatter?: (value: number) => string;
+	/** Trailing chip row (e.g. recent error codes). */
+	chips?: MetricBreakdownChip[];
+	/**
+	 * Label rendered before the chip row (uppercase muted). Default `"Errors"`.
+	 * Pass `null` to hide.
+	 */
+	chipsLabel?: React.ReactNode;
+}
+
+/**
+ * Multi-section metric card: a headline value with an optional rate, a small
+ * inline trend sparkline, a per-category breakdown with delta arrows, and a
+ * trailing chip row for recent issues.
+ *
+ * Designed for "throughput-style" dashboards (token issuance, API request
+ * volume, job throughput, sign-ups by source): anywhere a single metric needs
+ * to be decomposed by category and contextualized by trend and notable issues
+ * in one card. Identity-agnostic; bring your own labels and color tokens.
+ */
+export const MetricBreakdown = React.forwardRef<HTMLDivElement, MetricBreakdownProps>(
+	(
+		{
+			value,
+			label,
+			rate,
+			rateLabel,
+			rateTone = "neutral",
+			spark,
+			sparkUnit,
+			defaultColorVar = "chart-1",
+			sparkHeight = 36,
+			breakdown,
+			valueFormatter = (v) => v.toLocaleString(),
+			chips,
+			chipsLabel = "Errors",
+			className,
+			...props
+		},
+		ref,
+	) => {
+		const rateColor =
+			rateTone === "neutral" ? "hsl(var(--muted-foreground))" : `hsl(${TONE_HSL[rateTone]})`;
+		const showChipsLabel = chipsLabel !== null && chipsLabel !== undefined && chipsLabel !== "";
+		return (
+			<div ref={ref} className={cn("w-full", className)} {...props}>
+				<div className="mb-2.5 flex items-baseline justify-between gap-3">
+					<div>
+						<div className="font-mono text-[22px] font-semibold leading-[1.1] tabular-nums">
+							{value}
+						</div>
+						<div className="text-[11px] uppercase tracking-[0.04em] text-muted-foreground">
+							{label}
+						</div>
+					</div>
+					{(rate !== undefined || rateLabel) && (
+						<div className="text-right">
+							<div
+								className="font-mono text-[13px] font-medium tabular-nums"
+								style={{ color: rateColor }}
+							>
+								{rate}
+							</div>
+							{rateLabel && (
+								<div className="text-[11px] uppercase tracking-[0.04em] text-muted-foreground">
+									{rateLabel}
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+
+				{spark && spark.length > 1 && (
+					<MetricBreakdownSpark
+						data={spark}
+						height={sparkHeight}
+						colorVar={defaultColorVar}
+						unit={sparkUnit}
+					/>
+				)}
+
+				{breakdown && breakdown.length > 0 && (
+					<MetricBreakdownRows
+						rows={breakdown}
+						defaultColorVar={defaultColorVar}
+						valueFormatter={valueFormatter}
+					/>
+				)}
+
+				{chips && chips.length > 0 && (
+					<div
+						className={cn(
+							"flex flex-wrap items-center gap-1.5",
+							(breakdown && breakdown.length > 0) || spark
+								? "mt-3 border-t border-border pt-2.5"
+								: "",
+						)}
+					>
+						{showChipsLabel && (
+							<span className="mr-0.5 text-[10.5px] uppercase tracking-[0.04em] text-muted-foreground">
+								{chipsLabel}
+							</span>
+						)}
+						{chips.map((chip, i) => {
+							const tone = chip.tone ?? "error";
+							const hsl = TONE_HSL[tone];
+							return (
+								<span
+									key={`${i}-${typeof chip.label === "string" ? chip.label : i}`}
+									className="inline-flex items-center gap-1 rounded font-mono text-[10.5px]"
+									style={{
+										padding: "2px 6px",
+										background: `hsl(${hsl} / 0.1)`,
+										color: `hsl(${hsl})`,
+									}}
+								>
+									{chip.label}
+									{chip.count !== undefined && <span className="opacity-70">·{chip.count}</span>}
+								</span>
+							);
+						})}
+					</div>
+				)}
+			</div>
+		);
+	},
+);
+MetricBreakdown.displayName = "MetricBreakdown";
+
+interface MetricBreakdownSparkProps {
+	data: number[];
+	height: number;
+	colorVar: string;
+	unit?: React.ReactNode;
+}
+
+function MetricBreakdownSpark({ data, height, colorVar, unit }: MetricBreakdownSparkProps) {
+	const max = Math.max(...data);
+	const min = Math.min(...data);
+	const range = max - min || 1;
+	const w = (data.length - 1) * 10;
+	const h = height;
+	const pts = data
+		.map((v, i) => {
+			const x = i * 10;
+			const y = h - 2 - ((v - min) / range) * (h - 6);
+			return `${x},${y}`;
+		})
+		.join(" ");
+	const area = `0,${h} ${pts} ${w},${h}`;
+	const last = data[data.length - 1];
+	const lastY = h - 2 - ((last - min) / range) * (h - 6);
+	const fillId = React.useId();
+	return (
+		<div className="relative mb-3.5" style={{ height }}>
+			<svg
+				viewBox={`0 0 ${w} ${h}`}
+				preserveAspectRatio="none"
+				className="h-full w-full overflow-visible"
+				aria-hidden
+			>
+				<defs>
+					<linearGradient id={fillId} x1="0" x2="0" y1="0" y2="1">
+						<stop offset="0%" stopColor={`hsl(var(--${colorVar}))`} stopOpacity="0.25" />
+						<stop offset="100%" stopColor={`hsl(var(--${colorVar}))`} stopOpacity="0" />
+					</linearGradient>
+				</defs>
+				<polygon points={area} fill={`url(#${fillId})`} />
+				<polyline
+					points={pts}
+					fill="none"
+					stroke={`hsl(var(--${colorVar}))`}
+					strokeWidth="1.5"
+					vectorEffect="non-scaling-stroke"
+				/>
+				<circle cx={w} cy={lastY} r="2.5" fill={`hsl(var(--${colorVar}))`} />
+			</svg>
+			{unit !== undefined && (
+				<div
+					className="absolute right-0 top-0 bg-card px-1 font-mono text-[11px]"
+					style={{ color: `hsl(var(--${colorVar}))` }}
+				>
+					{last}
+					{typeof unit === "string" ? ` ${unit}` : <> {unit}</>}
+				</div>
+			)}
+		</div>
+	);
+}
+
+interface MetricBreakdownRowsProps {
+	rows: MetricBreakdownRow[];
+	defaultColorVar: string;
+	valueFormatter: (value: number) => string;
+}
+
+function MetricBreakdownRows({ rows, defaultColorVar, valueFormatter }: MetricBreakdownRowsProps) {
+	const total = rows.reduce((sum, r) => sum + r.value, 0) || 1;
+	return (
+		<div className="flex flex-col gap-2">
+			{rows.map((row, i) => {
+				const colorVar = row.colorVar ?? defaultColorVar;
+				const pct = (row.value / total) * 100;
+				const hasDelta = row.delta !== undefined;
+				const up = hasDelta && (row.delta as number) >= 0;
+				const deltaHsl = up ? TONE_HSL.success : TONE_HSL.error;
+				return (
+					<div
+						key={`${i}-${typeof row.label === "string" ? row.label : i}`}
+						className="text-[12.5px]"
+					>
+						<div className="mb-1 flex items-center gap-2">
+							<span
+								className="size-2 shrink-0 rounded-sm"
+								style={{ background: `hsl(var(--${colorVar}))` }}
+								aria-hidden
+							/>
+							<span className="flex-1 truncate font-mono text-[11.5px] text-foreground">
+								{row.label}
+							</span>
+							<span className="font-mono text-[11.5px] tabular-nums">
+								{valueFormatter(row.value)}
+							</span>
+							{hasDelta && (
+								<span
+									className="min-w-[38px] text-right font-mono text-[10.5px] tabular-nums"
+									style={{ color: `hsl(${deltaHsl})` }}
+								>
+									{up ? "▲" : "▼"} {Math.abs(row.delta as number)}%
+								</span>
+							)}
+						</div>
+						<div
+							className="overflow-hidden rounded-full bg-muted"
+							style={{ height: 3 }}
+							aria-hidden
+						>
+							<div
+								className="h-full rounded-full"
+								style={{
+									width: `${pct}%`,
+									background: `hsl(var(--${colorVar}))`,
+								}}
+							/>
+						</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+}

package/src/components/molecules/or-separator.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface OrSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+	/**
+	 * Text rendered between the two rule segments.
+	 * @default "or"
+	 */
+	label?: React.ReactNode;
+}
+
+/**
+ * Horizontal divider with a centred label, e.g. between social-provider
+ * buttons and an email/password form. Two `border-t` rules flank a short
+ * upper-case label sitting on the card background.
+ *
+ * Place inside a card whose background is `bg-card`; the label inherits
+ * that surface so the rules visually meet behind it.
+ */
+const OrSeparator = React.forwardRef<HTMLDivElement, OrSeparatorProps>(
+	({ label = "or", className, ...props }, ref) => (
+		<div
+			ref={ref}
+			role="separator"
+			aria-orientation="horizontal"
+			className={cn("flex items-center gap-3 py-1", className)}
+			{...props}
+		>
+			<div className="h-px flex-1 bg-border" />
+			<span className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">{label}</span>
+			<div className="h-px flex-1 bg-border" />
+		</div>
+	),
+);
+OrSeparator.displayName = "OrSeparator";
+
+export { OrSeparator };

package/src/components/molecules/social-buttons.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../atoms/button";
+
+/* ──────────────────────────────────────────────────────────────────
+   Brand glyphs. Tiny, currentColor for monochrome marks
+   (GitHub, Microsoft outline, generic SSO). Multi-color marks
+   (Google, Apple) inline their official palette.
+   ────────────────────────────────────────────────────────────────── */
+
+const GitHubGlyph = () => (
+	<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+		<title>GitHub</title>
+		<path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56v-2c-3.2.69-3.87-1.54-3.87-1.54-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.75 1.18 1.75 1.18 1.02 1.75 2.68 1.24 3.34.95.1-.74.4-1.24.72-1.52-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.28 1.18-3.08-.12-.29-.51-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.78 0c2.21-1.49 3.18-1.18 3.18-1.18.62 1.58.23 2.75.11 3.04.74.8 1.18 1.82 1.18 3.08 0 4.42-2.69 5.39-5.26 5.68.41.35.77 1.04.77 2.11v3.13c0 .31.21.67.79.56A11.51 11.51 0 0 0 23.5 12c0-6.35-5.15-11.5-11.5-11.5z" />
+	</svg>
+);
+
+const GoogleGlyph = () => (
+	<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden>
+		<title>Google</title>
+		<path
+			fill="#4285F4"
+			d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.56c2.08-1.92 3.28-4.74 3.28-8.09z"
+		/>
+		<path
+			fill="#34A853"
+			d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.98.66-2.24 1.06-3.72 1.06-2.86 0-5.29-1.93-6.15-4.53H2.18v2.84A11 11 0 0 0 12 23z"
+		/>
+		<path
+			fill="#FBBC05"
+			d="M5.85 14.11A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.35-2.11V7.05H2.18A11 11 0 0 0 1 12c0 1.78.43 3.46 1.18 4.95l3.67-2.84z"
+		/>
+		<path
+			fill="#EA4335"
+			d="M12 5.38c1.62 0 3.06.56 4.2 1.64l3.15-3.15C17.45 2.1 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.05l3.67 2.84C6.71 7.31 9.14 5.38 12 5.38z"
+		/>
+	</svg>
+);
+
+const AppleGlyph = () => (
+	<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+		<title>Apple</title>
+		<path d="M17.05 12.04c-.03-2.85 2.32-4.22 2.43-4.29-1.32-1.94-3.39-2.21-4.12-2.24-1.75-.18-3.42 1.03-4.31 1.03-.9 0-2.27-1.01-3.74-.98-1.92.03-3.7 1.12-4.69 2.83-2.01 3.47-.51 8.6 1.43 11.43.96 1.38 2.09 2.93 3.56 2.87 1.44-.06 1.98-.92 3.71-.92 1.73 0 2.22.92 3.74.89 1.54-.03 2.52-1.4 3.46-2.79 1.1-1.6 1.55-3.15 1.58-3.23-.03-.01-3.03-1.16-3.05-4.6zM14.27 3.65c.79-.96 1.32-2.29 1.18-3.62-1.14.05-2.52.76-3.34 1.71-.73.84-1.37 2.19-1.2 3.49 1.27.1 2.57-.65 3.36-1.58z" />
+	</svg>
+);
+
+const MicrosoftGlyph = () => (
+	<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden>
+		<title>Microsoft</title>
+		<path fill="#F25022" d="M1 1h10v10H1z" />
+		<path fill="#7FBA00" d="M13 1h10v10H13z" />
+		<path fill="#00A4EF" d="M1 13h10v10H1z" />
+		<path fill="#FFB900" d="M13 13h10v10H13z" />
+	</svg>
+);
+
+const SsoGlyph = () => (
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth={2}
+		strokeLinecap="round"
+		strokeLinejoin="round"
+		aria-hidden
+	>
+		<title>SSO</title>
+		<rect x="3" y="11" width="18" height="11" rx="2" />
+		<path d="M7 11V7a5 5 0 0 1 10 0v4" />
+	</svg>
+);
+
+/**
+ * Known social/SSO providers. Each entry pairs a glyph with a default
+ * label; the caller can override the label per-button if needed.
+ */
+export type SocialProvider = "github" | "google" | "apple" | "microsoft" | "sso";
+
+interface ProviderMeta {
+	glyph: React.ReactNode;
+	label: string;
+}
+
+const PROVIDERS: Record<SocialProvider, ProviderMeta> = {
+	github: { glyph: <GitHubGlyph />, label: "Continue with GitHub" },
+	google: { glyph: <GoogleGlyph />, label: "Continue with Google" },
+	apple: { glyph: <AppleGlyph />, label: "Continue with Apple" },
+	microsoft: { glyph: <MicrosoftGlyph />, label: "Continue with Microsoft" },
+	sso: { glyph: <SsoGlyph />, label: "Continue with SSO" },
+};
+
+export interface SocialButtonProps
+	extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+	/** Provider identifier. Picks the glyph and default label. */
+	provider: SocialProvider;
+	/** Override the default label (e.g. "Continue with Okta"). */
+	label?: string;
+}
+
+/**
+ * Single provider button. Outline variant with the provider glyph on the
+ * leading edge. Use directly when you want one provider, or compose
+ * several inside `SocialButtons`.
+ */
+const SocialButton = React.forwardRef<HTMLButtonElement, SocialButtonProps>(
+	({ provider, label, className, ...props }, ref) => {
+		const meta = PROVIDERS[provider];
+		return (
+			<Button
+				ref={ref}
+				type="button"
+				variant="outline"
+				className={cn("w-full justify-center gap-2", className)}
+				{...props}
+			>
+				{meta.glyph}
+				<span>{label ?? meta.label}</span>
+			</Button>
+		);
+	},
+);
+SocialButton.displayName = "SocialButton";
+
+export interface SocialButtonsProps extends React.HTMLAttributes<HTMLDivElement> {
+	/**
+	 * Provider list rendered vertically. Pass `["github", "google"]` for the
+	 * common CIAM case, or `["sso"]` for a single corporate SSO button.
+	 * Defaults to `["github", "google"]`.
+	 */
+	providers?: SocialProvider[];
+	/** Per-provider click handler. Receives the provider id. */
+	onProviderClick?: (provider: SocialProvider) => void;
+	/** When true, all buttons render disabled (e.g. while signing in). */
+	disabled?: boolean;
+}
+
+/**
+ * Vertical stack of social/SSO provider buttons. Typically placed at the
+ * top of a sign-in or sign-up card, above an `OrSeparator`.
+ *
+ * Stays purely presentational: the consumer wires `onProviderClick` to
+ * the OAuth2 initiation flow.
+ */
+const SocialButtons = React.forwardRef<HTMLDivElement, SocialButtonsProps>(
+	({ providers = ["github", "google"], onProviderClick, disabled, className, ...props }, ref) => (
+		<div ref={ref} className={cn("flex flex-col gap-2.5", className)} {...props}>
+			{providers.map((p) => (
+				<SocialButton
+					key={p}
+					provider={p}
+					disabled={disabled}
+					onClick={() => onProviderClick?.(p)}
+				/>
+			))}
+		</div>
+	),
+);
+SocialButtons.displayName = "SocialButtons";
+
+export { SocialButton, SocialButtons };

package/src/index.ts

@@ -101,6 +101,13 @@ export {
 	type LabeledBarListItem,
 	type LabeledBarListProps,
 } from "./components/charts/labeled-bar-list";
+export {
+	MetricBreakdown,
+	type MetricBreakdownChip,
+	type MetricBreakdownProps,
+	type MetricBreakdownRow,
+	type MetricBreakdownTone,
+} from "./components/charts/metric-breakdown";
 export {
 	ReferenceArea,
 	ReferenceDot,
@@ -223,6 +230,10 @@ export {
 	NumberBadge,
 	type NumberBadgeProps,
 } from "./components/molecules/number-badge";
+export {
+	OrSeparator,
+	type OrSeparatorProps,
+} from "./components/molecules/or-separator";
 export {
 	PageHeader,
 	type PageHeaderBreadcrumb,
@@ -267,6 +278,13 @@ export {
 	SectionCard,
 	type SectionCardProps,
 } from "./components/molecules/section-card";
+export {
+	SocialButton,
+	type SocialButtonProps,
+	SocialButtons,
+	type SocialButtonsProps,
+	type SocialProvider,
+} from "./components/molecules/social-buttons";
 export { StatCard, type StatCardProps } from "./components/molecules/stat-card";
 export {
 	StatusBadge,