Alert

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Alert — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// Source of truth (visual layout):
8//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/alert.tsx
9//
10// Spec divergence from upstream — important: shadcn hardcodes role="alert"
11// on every instance. That role is implicit aria-live="assertive" and
12// interrupts the user's current screen-reader output. APG and WCAG advice
13// is to reserve "assertive" announcements for genuinely time-sensitive
14// content (errors after submit, lost connection). For typical
15// informational messages ("Saved", "Filter updated") "polite" is correct;
16// for static page content that's there on load, no role at all is
17// correct. So we expose `live` and default to "polite" (role="status").
18//
19// Refs:
20//   repos/aria-practices/content/patterns/alert/  ("alert" role guidance)
21//   repos/mdn/files/en-us/web/accessibility/aria/reference/roles/alert_role/
22//   repos/mdn/files/en-us/web/accessibility/aria/reference/roles/status_role/
23//   repos/mdn/files/en-us/web/accessibility/aria/reference/attributes/aria-live/
24//
25// Composition (matches shadcn):
26//   <Alert>
27//     <SomeIcon />
28//     <AlertTitle>Heads up!</AlertTitle>
29//     <AlertDescription>Body of the alert…</AlertDescription>
30//   </Alert>
31 
32export type AlertVariant = "default" | "destructive" | "success" | "warning" | "info"
33 
34// "off"      — static informational content; no aria-live region.
35// "polite"   — implicit role="status". AT waits until idle to announce.
36// "assertive"— implicit role="alert". AT interrupts current speech. Use sparingly.
37export type AlertLive = "off" | "polite" | "assertive"
38 
39const base =
40  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm " +
41  "has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 " +
42  "[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
43 
44const variants: Record<AlertVariant, string> = {
45  default: "bg-card text-card-foreground",
46  destructive:
47    "border-destructive/30 bg-destructive/5 text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
48  success:
49    "border-emerald-500/30 bg-emerald-500/5 text-emerald-700 *:data-[slot=alert-description]:text-emerald-700/90 dark:text-emerald-300 dark:*:data-[slot=alert-description]:text-emerald-300/90 [&>svg]:text-current",
50  warning:
51// … truncated