main
import type { ReactNode } from 'react'
export type AlertTone = 'error' | 'success' | 'info'
const toneClasses: Record<AlertTone, string> = {
error: 'alert alert-error',
success: 'alert alert-success',
info: 'alert alert-info',
}
export interface AlertProps {
tone?: AlertTone
children: ReactNode
}
/** Inline form-level feedback banner. */
export function Alert({ tone = 'error', children }: AlertProps) {
return (
<p
role={tone === 'error' ? 'alert' : 'status'}
className={`w-full rounded-field px-3.5 py-2.5 font-sans text-[12.5px] leading-[1.5] ${toneClasses[tone]}`}
>
{children}
</p>
)
}