@olympusoss/canvas 2.20.2 → 3.1.0

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

@@ -1,200 +0,0 @@
-"use client";
-
-import parsePhoneNumber, {
-	type CountryCode,
-	getCountries,
-	getCountryCallingCode,
-	isValidPhoneNumber,
-} from "libphonenumber-js";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Input } from "../atoms/input";
-import { Label } from "../atoms/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../organisms/select";
-
-export interface PhoneInputProps {
-	id: string;
-	value?: string;
-	onChange: (e164Value: string | undefined) => void;
-	label?: string;
-	placeholder?: string;
-	disabled?: boolean;
-	readonly?: boolean;
-	required?: boolean;
-	/** Default country ISO code if the value is empty. Default: "US". */
-	defaultCountry?: CountryCode;
-	/** Override the list of selectable countries (defaults to all). */
-	countryCodes?: CountryCode[];
-	/** Called with error string (or "" when valid/cleared). */
-	onValidityChange?: (error: string) => void;
-	className?: string;
-}
-
-interface CountryOption {
-	code: CountryCode;
-	name: string;
-	callingCode: string;
-}
-
-/** Convert an ISO 3166-1 alpha-2 country code to its flag emoji. */
-function flagEmoji(code: string): string {
-	const A = "A".charCodeAt(0);
-	const offset = 0x1f1e6 - A;
-	const upper = code.toUpperCase();
-	/* c8 ignore next -- defensive: every CountryCode from libphonenumber is a 2-letter ISO code by construction; only reachable if a malformed string slips past TS at the call site */
-	if (upper.length !== 2) return code;
-	return String.fromCodePoint(upper.charCodeAt(0) + offset, upper.charCodeAt(1) + offset);
-}
-
-function buildCountryOptions(codes?: CountryCode[]): CountryOption[] {
-	const list = codes ?? getCountries();
-	const displayNames = new Intl.DisplayNames(["en"], { type: "region" });
-	return list
-		.map((code) => {
-			const callingCode = getCountryCallingCode(code);
-			/* c8 ignore next -- defensive: Intl.DisplayNames returns a name for every valid ISO country code in jsdom; the `|| code` fallback only fires if Intl data is stripped */
-			const name = displayNames.of(code) || code;
-			return { code, name, callingCode };
-		})
-		.sort((a, b) => a.name.localeCompare(b.name));
-}
-
-export function PhoneInput({
-	id,
-	value,
-	onChange,
-	label,
-	placeholder,
-	disabled,
-	readonly,
-	required,
-	defaultCountry = "US",
-	countryCodes,
-	onValidityChange,
-	className,
-}: PhoneInputProps) {
-	const [selectedCountry, setSelectedCountry] = React.useState<CountryCode>(defaultCountry);
-	const [localValue, setLocalValue] = React.useState("");
-	const [error, setError] = React.useState("");
-
-	const countryOptions = React.useMemo(() => buildCountryOptions(countryCodes), [countryCodes]);
-
-	// Hydrate state from an external E.164 value.
-	React.useEffect(() => {
-		if (!value) {
-			setLocalValue("");
-			return;
-		}
-		try {
-			const parsed = parsePhoneNumber(value);
-			if (parsed) {
-				if (parsed.country) setSelectedCountry(parsed.country);
-				/* c8 ignore next -- defensive: a successfully-parsed PhoneNumber always exposes a nationalNumber; the `?? ""` fallback only fires if libphonenumber returns a partial object */
-				setLocalValue(parsed.nationalNumber ?? "");
-			} else {
-				setLocalValue(value);
-			}
-		} catch {
-			/* c8 ignore next -- libphonenumber never throws on arbitrary input in jsdom; only reachable if parser invariants change */
-			setLocalValue(value);
-		}
-	}, [value]);
-
-	const updateValidity = React.useCallback(
-		(e164: string) => {
-			if (!e164) {
-				const err = required ? "Phone number is required" : "";
-				setError(err);
-				onValidityChange?.(err);
-				return;
-			}
-			const valid = isValidPhoneNumber(e164);
-			const err = valid ? "" : "Enter a valid phone number";
-			setError(err);
-			onValidityChange?.(err);
-		},
-		[required, onValidityChange],
-	);
-
-	const emit = (country: CountryCode, national: string) => {
-		if (!national.trim()) {
-			onChange(undefined);
-			updateValidity("");
-			return;
-		}
-		const callingCode = getCountryCallingCode(country);
-		const e164 = `+${callingCode}${national.replace(/\D/g, "")}`;
-		onChange(e164);
-		updateValidity(e164);
-	};
-
-	return (
-		<div className={cn("space-y-1.5", className)}>
-			{label && (
-				<Label htmlFor={id}>
-					{label}
-					{required && <span className="ml-0.5 text-destructive">*</span>}
-				</Label>
-			)}
-			<div className="flex gap-2">
-				<Select
-					value={selectedCountry}
-					onValueChange={(next) => {
-						const code = next as CountryCode;
-						setSelectedCountry(code);
-						emit(code, localValue);
-					}}
-					disabled={disabled || readonly}
-				>
-					<SelectTrigger
-						aria-label="Country"
-						className="w-auto shrink-0 gap-1.5 px-2.5 font-mono text-sm"
-					>
-						<SelectValue>
-							<span className="flex items-center gap-1.5">
-								<span aria-hidden className="text-base leading-none">
-									{flagEmoji(selectedCountry)}
-								</span>
-								<span>+{getCountryCallingCode(selectedCountry)}</span>
-							</span>
-						</SelectValue>
-					</SelectTrigger>
-					<SelectContent className="max-h-[320px] min-w-[260px]">
-						{countryOptions.map((opt) => (
-							<SelectItem key={opt.code} value={opt.code}>
-								<span className="flex items-center gap-2">
-									<span aria-hidden className="text-base leading-none">
-										{flagEmoji(opt.code)}
-									</span>
-									<span>{opt.name}</span>
-									<span className="font-mono text-xs text-muted-foreground">
-										+{opt.callingCode}
-									</span>
-								</span>
-							</SelectItem>
-						))}
-					</SelectContent>
-				</Select>
-				<Input
-					id={id}
-					type="tel"
-					inputMode="tel"
-					value={localValue}
-					onChange={(e) => {
-						const v = e.target.value;
-						setLocalValue(v);
-						emit(selectedCountry, v);
-					}}
-					placeholder={placeholder}
-					disabled={disabled}
-					readOnly={readonly}
-					className={cn("flex-1", error && "border-destructive focus-visible:ring-destructive")}
-				/>
-			</div>
-			{error && <p className="text-xs text-destructive">{error}</p>}
-		</div>
-	);
-}
-
-PhoneInput.displayName = "PhoneInput";

package/src/components/molecules/search-bar.tsx

@@ -1,64 +0,0 @@
-"use client";
-
-import { Search, X } 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 SearchBarProps
-	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-	value: string;
-	onChange: (value: string) => void;
-	onClear?: () => void;
-	/**
-	 * Optional keyboard-shortcut hint rendered as a `<kbd>` on the right of
-	 * the input when empty. Hidden once the user types so the clear button
-	 * has the slot. Example: `shortcut="⌘K"`.
-	 */
-	shortcut?: string;
-}
-
-const SearchBar = React.forwardRef<HTMLInputElement, SearchBarProps>(
-	({ value, onChange, onClear, shortcut, className, placeholder = "Search...", ...props }, ref) => {
-		const showShortcut = !!shortcut && value.length === 0;
-		return (
-			<div className={cn("relative", className)}>
-				<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-				<Input
-					ref={ref}
-					value={value}
-					onChange={(e) => onChange(e.target.value)}
-					placeholder={placeholder}
-					className={cn("pl-9", showShortcut ? "pr-12" : "pr-9")}
-					{...props}
-				/>
-				{value && (
-					<Button
-						variant="ghost"
-						size="icon"
-						className="absolute right-1 top-1/2 h-6 w-6 -translate-y-1/2"
-						onClick={() => {
-							onChange("");
-							onClear?.();
-						}}
-					>
-						<X className="h-3 w-3" />
-					</Button>
-				)}
-				{showShortcut && (
-					<kbd
-						aria-hidden
-						className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded border border-border bg-muted/40 px-1.5 font-mono text-[10px] text-muted-foreground"
-					>
-						{shortcut}
-					</kbd>
-				)}
-			</div>
-		);
-	},
-);
-SearchBar.displayName = "SearchBar";
-
-export { SearchBar };

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

@@ -1,158 +0,0 @@
-"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

@@ -1,91 +0,0 @@
-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 data-slot="card-divider" 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/social-buttons.tsx

@@ -1,165 +0,0 @@
-"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 };