Milestone 3

frontend/src/components/ui/Alert.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+
+import { cn, type Accent } from '@/lib/cn';
+
+interface AlertProps {
+  accent: Accent;
+  children: ReactNode;
+  className?: string;
+  /** Optional ARIA role override; defaults to "alert" for errors. */
+  role?: string;
+}
+
+const ACCENT_FILL: Record<Accent, string> = {
+  red: 'accent-fill-red',
+  orange: 'accent-fill-orange',
+  yellow: 'accent-fill-yellow',
+  green: 'accent-fill-green',
+  cyan: 'accent-fill-cyan',
+  blue: 'accent-fill-blue',
+  purple: 'accent-fill-purple',
+  pink: 'accent-fill-pink',
+  rose: 'accent-fill-rose',
+  teal: 'accent-fill-teal',
+};
+
+export function Alert({ accent, children, className, role }: AlertProps) {
+  return (
+    <div
+      role={role ?? (accent === 'red' || accent === 'rose' ? 'alert' : 'status')}
+      className={cn(
+        'rounded-md border border-current/30 px-3 py-2 font-mono text-xs',
+        ACCENT_FILL[accent],
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}