1import * as React from "react";2import { cn } from "@/lib/utils";34export function AuthCard({ title, description, children, footer, icon, className }: { title: string; description?: React.ReactNode; children: React.ReactNode; footer?: React.ReactNode; icon?: React.ReactNode; className?: string }) {5 return (6 <div className={cn("animate-fade-up", className)}>7 <div className="rounded-2xl border border-border bg-bg-elevated p-6 shadow-md sm:p-8">8 {icon ? <div className="mb-4 flex size-11 items-center justify-center rounded-xl bg-accent-soft text-accent [&_svg]:size-5">{icon}</div> : null}9 <h1 className="text-[22px] font-semibold leading-tight tracking-tight">{title}</h1>10 {description ? <p className="mt-1.5 text-[14px] leading-6 text-fg-muted">{description}</p> : null}11 <div className="mt-6">{children}</div>12 </div>13 {footer ? <div className="mt-5 text-center text-sm text-fg-muted">{footer}</div> : null}14 </div>15 );16}1718export function FormError({ children, id }: { children?: React.ReactNode; id?: string }) {19 if (!children) return null;20 return (21 <p id={id} role="alert" className="rounded-md border border-danger/30 bg-danger-soft px-3 py-2 text-[13px] leading-5 text-danger">22 {children}23 </p>24 );25}2627export function FormNotice({ children, tone = "info" }: { children: React.ReactNode; tone?: "info" | "success" | "warning" }) {28 const cls = { info: "border-info/30 bg-info-soft text-info", success: "border-success/30 bg-success-soft text-success", warning: "border-warning/30 bg-warning-soft text-warning" }[tone];29 return (30 <div role="status" className={cn("rounded-md border px-3 py-2 text-[13px] leading-5", cls)}>31 {children}32 </div>33 );34}35