spb/polyllm

1import * as React from "react";2import { cn } from "@/lib/utils";34/**5 * Auth form container. On phones it is borderless and fills the column (full-height flow, big6 * title, 16 px inputs from the base styles); from `sm` up it becomes an elevated card.7 */8export function AuthCard({ title, description, children, footer, icon, className }: { title: string; description?: React.ReactNode; children: React.ReactNode; footer?: React.ReactNode; icon?: React.ReactNode; className?: string }) {9  return (10    <div className={cn("animate-fade-up", className)}>11      <div className="rounded-2xl sm:border sm:border-border sm:bg-bg-elevated sm:p-8 sm:shadow-md">12        {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}13        <h1 className="text-balance text-[26px] font-semibold leading-tight tracking-[-0.02em] sm:text-[22px]">{title}</h1>14        {description ? <p className="mt-2 text-pretty text-[15px] leading-6 text-fg-muted sm:mt-1.5 sm:text-[14px]">{description}</p> : null}15        <div className="mt-7 sm:mt-6 [&_button[type=submit]]:h-12 sm:[&_button[type=submit]]:h-11 [&_input]:h-11 sm:[&_input]:h-9 [&_label]:text-[14px] sm:[&_label]:text-[13px]">{children}</div>16      </div>17      {footer ? <div className="mt-6 text-center text-[15px] text-fg-muted sm:mt-5 sm:text-sm">{footer}</div> : null}18    </div>19  );20}2122export function FormError({ children, id }: { children?: React.ReactNode; id?: string }) {23  if (!children) return null;24  return (25    <p id={id} role="alert" className="rounded-lg border border-danger/30 bg-danger-soft px-3 py-2.5 text-[14px] leading-5 text-danger sm:text-[13px]">26      {children}27    </p>28  );29}3031export function FormNotice({ children, tone = "info" }: { children: React.ReactNode; tone?: "info" | "success" | "warning" }) {32  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];33  return (34    <div role="status" className={cn("rounded-lg border px-3 py-2.5 text-[14px] leading-5 sm:text-[13px]", cls)}>35      {children}36    </div>37  );38}39