import type { HTMLAttributes, ReactElement, ReactNode } from "react";
function joinClassNames(...classNames: (string | undefined)[]): string {
return classNames.filter(Boolean).join(" ");
}
export interface AuthShellProps extends HTMLAttributes {
children: ReactNode;
}
export function AuthShell({ children, className, ...props }: AuthShellProps): ReactElement {
return (
{children}
);
}
export interface AuthCardProps extends HTMLAttributes {
children: ReactNode;
}
export function AuthCard({ children, className, ...props }: AuthCardProps): ReactElement {
return (
);
}
export interface AuthBrandProps {
title?: string;
className?: string;
}
export function AuthBrand({ title = "Mosaic Stack", className }: AuthBrandProps): ReactElement {
return (
);
}
export type AuthStatusTone = "neutral" | "info" | "success" | "warning" | "danger";
export interface AuthStatusPillProps {
label: string;
tone?: AuthStatusTone;
className?: string;
}
export function AuthStatusPill({
label,
tone = "neutral",
className,
}: AuthStatusPillProps): ReactElement {
const toneStyles: Record = {
neutral:
"border-[#b8c4de] bg-[#f8faff] text-[#2f3b52] dark:border-[#2f3b52] dark:bg-[#0f141d]/70 dark:text-[#c5d0e6]",
info: "border-sky-400/50 bg-sky-500/15 text-sky-900 dark:text-sky-200",
success: "border-emerald-400/55 bg-emerald-500/15 text-emerald-900 dark:text-emerald-200",
warning: "border-amber-400/60 bg-amber-500/15 text-amber-900 dark:text-amber-200",
danger: "border-rose-400/55 bg-rose-500/15 text-rose-900 dark:text-rose-200",
};
const dotStyles: Record = {
neutral: "bg-[#5a6a87] dark:bg-[#8f9db7]",
info: "bg-sky-500",
success: "bg-emerald-500",
warning: "bg-amber-500",
danger: "bg-rose-500",
};
return (
{label}
);
}
export interface AuthDividerProps {
text?: string;
className?: string;
}
export function AuthDivider({
text = "or continue with",
className,
}: AuthDividerProps): ReactElement {
return (
{text}
);
}