@olympusoss/canvas 2.12.0 → 2.14.0

package/package.json

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

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

@@ -230,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,
@@ -274,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,

package/styles/tokens.css

@@ -1,19 +1,14 @@
 /* ---------- Canvas tokens — single source of truth ----------
  *
- * Surface elevation (dark mode):
- *   L0  body background     `--background`         deepest
- *   L1  sidebar chrome      `--sidebar-background` subtle lift, distinct hue
- *   L2  cards + popovers    `--card` / `--popover` clearly elevated
- *   L3  inside-card chips   `--muted` / `--secondary` / `--accent` topmost
+ * The values mirror the Athena design handoff's `colors_and_type.css`
+ * (shadcn zinc, neutral hue 240). Both light and dark modes use flat
+ * surfaces: body, cards, popovers all share the same lightness within
+ * each mode and are differentiated by `--border` instead of tonal lift.
  *
- * In light mode the canonical shadcn convention keeps body and cards both
- * pure white — surfaces are differentiated by borders + 1px shadow rather
- * than tone. That's intentional.
- *
- * Dual-form sidebar declaration (load-bearing — do NOT remove either form):
- *   - Raw HSL triplets like `--sidebar-background: 230 25% 97%` are consumed
+ * Dual-form sidebar declaration (load-bearing, do NOT remove either form):
+ *   - Raw HSL triplets like `--sidebar-background: 0 0% 98%` are consumed
  *     by `hsl(var(--…))` patterns inside component CSS / inline styles.
- *   - Resolved `hsl()` forms like `--sidebar: hsl(230 25% 97%)` feed Tailwind
+ *   - Resolved `hsl()` forms like `--sidebar: hsl(0 0% 98%)` feed Tailwind
  *     v4's `@theme inline { --color-sidebar: var(--sidebar) }` mapping so
  *     `bg-sidebar` / `text-sidebar-foreground` utilities resolve.
  *
@@ -39,7 +34,7 @@
 		--muted-foreground: 240 3.8% 46.1%;
 		--accent: 240 4.8% 95.9%;
 		--accent-foreground: 240 5.9% 10%;
-		--destructive: 4 78% 50%;
+		--destructive: 0 84.2% 60.2%;
 		--destructive-foreground: 0 0% 98%;
 		--brand: 213 94% 68%;
 		--brand-foreground: 0 0% 100%;
@@ -60,14 +55,14 @@
 		 * flagged in PR. */
 		--chart-6: 173 70% 42%;
 
-		/* ── Sidebar — blue-tinted gray (hue 230) per handoff ──────── */
-		--sidebar-background: 230 25% 97%;
-		--sidebar-foreground: 230 15% 40%;
-		--sidebar-primary: 230 45% 25%;
+		/* ── Sidebar (neutral shadcn zinc per Athena handoff) ────── */
+		--sidebar-background: 0 0% 98%;
+		--sidebar-foreground: 240 5.3% 26.1%;
+		--sidebar-primary: 240 5.9% 10%;
 		--sidebar-primary-foreground: 0 0% 98%;
-		--sidebar-accent: 230 40% 92%;
-		--sidebar-accent-foreground: 230 45% 25%;
-		--sidebar-border: 230 20% 90%;
+		--sidebar-accent: 240 4.8% 95.9%;
+		--sidebar-accent-foreground: 240 5.9% 10%;
+		--sidebar-border: 220 13% 91%;
 		--sidebar-ring: 217.2 91.2% 59.8%;
 
 		/* ── StatCard variant tokens ───────────────────────────────── *
@@ -92,44 +87,43 @@
 	}
 
 	.dark {
-		/* ── Base palette (dark) — tiered elevation ─────────────────
-		 * L0: body  L1: sidebar  L2: card/popover  L3: muted/secondary/accent
-		 * All tiers share hue 225 (slight blue-cool) and step lightness
-		 * by ~4-6% so surfaces visually lift above the body. */
+		/* ── Base palette (dark): shadcn neutral zinc per Athena handoff ──
+		 * Flat shadcn defaults (hue 240, no elevation tiering). Cards sit at
+		 * the same lightness as the body; the visible separation comes from
+		 * `--border` (240 3.7% 15.9%). The previous "tiered elevation"
+		 * design (hue 225, lifted surfaces) was Canvas-only and has been
+		 * removed in favour of the handoff palette so every consumer
+		 * inherits the same design system. */
 
-		/* L0 — deepest body */
-		--background: 225 24% 6%;
-		--foreground: 220 14% 92%;
+		--background: 240 10% 3.9%;
+		--foreground: 0 0% 98%;
 
-		/* L2 — cards & popovers (clearly lifted above body) */
-		--card: 225 18% 13%;
-		--card-foreground: 220 14% 92%;
-		--popover: 225 18% 13%;
-		--popover-foreground: 220 14% 92%;
+		--card: 240 10% 3.9%;
+		--card-foreground: 0 0% 98%;
+		--popover: 240 10% 3.9%;
+		--popover-foreground: 0 0% 98%;
 
-		/* Primary action — keep light text on dark accent */
-		--primary: 220 14% 95%;
-		--primary-foreground: 225 24% 6%;
+		--primary: 0 0% 98%;
+		--primary-foreground: 240 5.9% 10%;
 
-		/* L3 — chips/inputs/hover surfaces inside cards */
-		--secondary: 225 14% 19%;
-		--secondary-foreground: 220 14% 92%;
-		--muted: 225 14% 19%;
-		--muted-foreground: 225 9% 64%;
-		--accent: 225 14% 22%;
-		--accent-foreground: 220 14% 92%;
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
+		--accent: 240 3.7% 15.9%;
+		--accent-foreground: 0 0% 98%;
 
-		--destructive: 4 88% 62%;
+		--destructive: 0 62.8% 30.6%;
 		--destructive-foreground: 0 0% 98%;
 		--brand: 213 94% 68%;
 		--brand-foreground: 0 0% 100%;
 
-		/* Borders — visible but subtle separation */
-		--border: 225 14% 22%;
-		--input: 225 14% 22%;
-		--ring: 217 91% 60%;
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+		--ring: 240 4.9% 83.9%;
 
-		/* Chart palette */
+		/* Chart palette (Canvas-specific; handoff dashboard uses --primary
+		 * for bar fills rather than --chart-1, so these stay as-is). */
 		--chart-1: 220 70% 50%;
 		--chart-2: 160 60% 45%;
 		--chart-3: 30 80% 55%;
@@ -137,14 +131,14 @@
 		--chart-5: 340 75% 55%;
 		--chart-6: 173 70% 50%;
 
-		/* L1 — sidebar (between body and cards, distinct hue 225) */
-		--sidebar-background: 225 16% 10%;
-		--sidebar-foreground: 220 14% 80%;
-		--sidebar-primary: 217 91% 65%;
+		/* Sidebar (neutral shadcn zinc per Athena handoff) */
+		--sidebar-background: 240 5.9% 10%;
+		--sidebar-foreground: 240 4.8% 95.9%;
+		--sidebar-primary: 224.3 76.3% 48%;
 		--sidebar-primary-foreground: 0 0% 100%;
-		--sidebar-accent: 225 22% 16%;
-		--sidebar-accent-foreground: 220 14% 92%;
-		--sidebar-border: 225 14% 18%;
+		--sidebar-accent: 240 3.7% 15.9%;
+		--sidebar-accent-foreground: 240 4.8% 95.9%;
+		--sidebar-border: 240 3.7% 15.9%;
 		--sidebar-ring: 217.2 91.2% 59.8%;
 
 		/* StatCard variants — same hex; 10% tint reads on dark via opacity */
@@ -211,24 +205,24 @@
  * mapping. They mirror the raw HSL triplets above; keep the two in sync.
  */
 :root {
-	--sidebar: hsl(230 25% 97%);
-	--sidebar-foreground: hsl(230 15% 40%);
-	--sidebar-primary: hsl(230 45% 25%);
+	--sidebar: hsl(0 0% 98%);
+	--sidebar-foreground: hsl(240 5.3% 26.1%);
+	--sidebar-primary: hsl(240 5.9% 10%);
 	--sidebar-primary-foreground: hsl(0 0% 98%);
-	--sidebar-accent: hsl(230 40% 92%);
-	--sidebar-accent-foreground: hsl(230 45% 25%);
-	--sidebar-border: hsl(230 20% 90%);
+	--sidebar-accent: hsl(240 4.8% 95.9%);
+	--sidebar-accent-foreground: hsl(240 5.9% 10%);
+	--sidebar-border: hsl(220 13% 91%);
 	--sidebar-ring: hsl(217.2 91.2% 59.8%);
 }
 
 .dark {
-	--sidebar: hsl(225 16% 10%);
-	--sidebar-foreground: hsl(220 14% 80%);
-	--sidebar-primary: hsl(217 91% 65%);
+	--sidebar: hsl(240 5.9% 10%);
+	--sidebar-foreground: hsl(240 4.8% 95.9%);
+	--sidebar-primary: hsl(224.3 76.3% 48%);
 	--sidebar-primary-foreground: hsl(0 0% 100%);
-	--sidebar-accent: hsl(225 22% 16%);
-	--sidebar-accent-foreground: hsl(220 14% 92%);
-	--sidebar-border: hsl(225 14% 18%);
+	--sidebar-accent: hsl(240 3.7% 15.9%);
+	--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+	--sidebar-border: hsl(240 3.7% 15.9%);
 	--sidebar-ring: hsl(217.2 91.2% 59.8%);
 }