Alert

import { CircleAlertIcon, InfoIcon } from "lucide-react"

import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

export default function AlertDemo() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <Alert>
        <InfoIcon aria-hidden="true" />
        <AlertTitle>Usage resets on October 1</AlertTitle>
        <AlertDescription>Northwind has used 84,120 of its 100,000 events this cycle.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <CircleAlertIcon aria-hidden="true" />
        <AlertTitle>The payments sync stopped</AlertTitle>
        <AlertDescription>Payments since 09:40 UTC are missing from Revenue.</AlertDescription>
        <AlertAction>
          <Button variant="outline" size="xs">
            Reconnect
          </Button>
        </AlertAction>
      </Alert>
    </div>
  )
}

import { LockIcon, ReceiptTextIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

// Three builds of one component. Text alone is a single column; an icon adds
// the column it sits in, and the title and the description share the second.
// These are page furniture, there before the reader was, so they drop the
// live role: nothing needs reading out the moment the page draws.
export default function AlertAnatomy() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-2.5">
      <Alert role={undefined}>
        <AlertDescription>Exports older than 90 days are deleted on the first of each month.</AlertDescription>
      </Alert>
      <Alert role={undefined}>
        <LockIcon aria-hidden="true" />
        <AlertTitle>Read-only until Hiro Tanaka restores your access</AlertTitle>
      </Alert>
      <Alert role={undefined}>
        <ReceiptTextIcon aria-hidden="true" />
        <AlertTitle>Invoices now go out at 09:00 in each customer’s time zone</AlertTitle>
        <AlertDescription>Until September, every invoice left at 09:00 UTC.</AlertDescription>
      </Alert>
    </div>
  )
}

import { CircleCheckIcon, TriangleAlertIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

// The box and the words stay neutral; the icon carries the tone, by its shape
// as much as its colour, so nothing rests on colour alone. The tint goes on
// through the alert's className because the recipe sets its icon to the text
// colour. For a notice washed in its tone, reach for Banner.
export default function AlertIconTone() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-2.5">
      <Alert className="*:[svg]:text-success">
        <CircleCheckIcon aria-hidden="true" />
        <AlertTitle>Payment received</AlertTitle>
        <AlertDescription>$12,480.00 from Blue Harbor Logistics settled INV-2041 in full.</AlertDescription>
      </Alert>
      <Alert className="*:[svg]:text-warning">
        <TriangleAlertIcon aria-hidden="true" />
        <AlertTitle>84% of this month’s events are used</AlertTitle>
        <AlertDescription>At this pace Northwind reaches 100,000 on September 27, four days early.</AlertDescription>
      </Alert>
    </div>
  )
}

import { WebhookIcon } from "lucide-react"

import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { CopyButton } from "@/components/ui/copy-button"

const EVENT = "evt_3PfK2tLx9QaN"

// A failure somebody else will have to look into: the id is set in the code
// face and one press copies it. An icon button keeps the alert's corner at any
// width, where a labelled action would move under the text.
export default function AlertReference() {
  return (
    <Alert variant="destructive" className="max-w-lg">
      <WebhookIcon aria-hidden="true" />
      <AlertTitle>Webhook delivery failed after 5 attempts</AlertTitle>
      <AlertDescription>
        hooks.northwind.example answered 401 Unauthorized. Quote <code className="font-mono text-xs">{EVENT}</code> when
        you write to support.
      </AlertDescription>
      <AlertAction>
        <CopyButton value={EVENT} size="icon-xs" label="Copy the event id" successLabel="Event id copied" />
      </AlertAction>
    </Alert>
  )
}

import { CircleCheckIcon, CircleDashedIcon, ListChecksIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

const CHECKS = [
  { label: "Figures reconciled with the ledger", done: true },
  { label: "Two charts still need a source note", done: false },
  { label: "Legal review, waiting on Nadia Costa", done: false },
]

// What stands between the reader and the button they came for. Each line says
// its state in words as well as by its mark, and the open ones keep the ink:
// they are the reading that matters.
export default function AlertChecklist() {
  const done = CHECKS.filter((check) => check.done).length
  return (
    <Alert className="max-w-md">
      <ListChecksIcon aria-hidden="true" />
      <AlertTitle>The Q3 board report can’t be published yet</AlertTitle>
      <AlertDescription>
        {/* A div, not a p: the description spaces its paragraphs a line apart. */}
        <div>
          {done} of {CHECKS.length} checks passed.
        </div>
        <ul className="mt-1.5 flex flex-col gap-1">
          {CHECKS.map((check) => (
            <li key={check.label} className="flex items-start gap-2">
              {check.done ? (
                <CircleCheckIcon aria-hidden="true" className="mt-0.5 size-3.5 shrink-0 text-success" />
              ) : (
                <CircleDashedIcon aria-hidden="true" className="mt-0.5 size-3.5 shrink-0 text-foreground" />
              )}
              <span className={check.done ? undefined : "text-foreground"}>
                <span className="sr-only">{check.done ? "Done: " : "To do: "}</span>
                {check.label}
              </span>
            </li>
          ))}
        </ul>
      </AlertDescription>
    </Alert>
  )
}

"use client"

import * as React from "react"
import { ArchiveIcon, ArchiveRestoreIcon, Undo2Icon } from "lucide-react"

import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

// One way back, offered where the change is reported. Undoing rewrites the
// notice in place — it is a status region, so the new title is read out — and
// the button stays mounted, disabled but focusable, so the keyboard stays put.
export default function AlertUndo() {
  const [undone, setUndone] = React.useState(false)

  return (
    <Alert className="max-w-lg">
      {undone ? <ArchiveRestoreIcon aria-hidden="true" /> : <ArchiveIcon aria-hidden="true" />}
      <AlertTitle>{undone ? "4 invoices are back in Overdue" : "Moved 4 invoices to Archive"}</AlertTitle>
      <AlertDescription>INV-2038 to INV-2041, all from Blue Harbor Logistics.</AlertDescription>
      <AlertAction>
        <Button
          variant="outline"
          size="xs"
          disabled={undone}
          focusableWhenDisabled
          onClick={() => setUndone(true)}
        >
          <Undo2Icon data-icon="inline-start" aria-hidden="true" />
          {undone ? "Undone" : "Undo"}
        </Button>
      </AlertAction>
    </Alert>
  )
}

"use client"

import * as React from "react"
import { UserCheckIcon, UserPlusIcon, UserXIcon } from "lucide-react"

import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

const PERSON = "Saoirse Byrne"

const OUTCOME = {
  approved: { icon: UserCheckIcon, title: `${PERSON} joined Northwind Finance`, detail: "She sees every Finance dashboard from now on.", done: "Approved" },
  declined: { icon: UserXIcon, title: `You declined ${PERSON}’s request`, detail: "She can ask again in 30 days.", done: "Declined" },
}

// A request that needs an answer: two actions, each named for the person in
// words a screen reader hears. The answer rewrites the notice; the button that
// gave it stays, focused and spent, and the other one goes.
export default function AlertDecision() {
  const [answer, setAnswer] = React.useState<keyof typeof OUTCOME | null>(null)
  const outcome = answer ? OUTCOME[answer] : null
  const Icon = outcome ? outcome.icon : UserPlusIcon

  return (
    <Alert className="max-w-lg">
      <Icon aria-hidden="true" />
      <AlertTitle>{outcome ? outcome.title : `${PERSON} asked to join Northwind Finance`}</AlertTitle>
      <AlertDescription>{outcome ? outcome.detail : "saoirse@northwind.example\u00a0· asked 2 hours ago"}</AlertDescription>
      <AlertAction>
        {(["approved", "declined"] as const).map((choice) =>
          answer && answer !== choice ? null : (
            <Button
              key={choice}
              size="xs"
              variant={choice === "approved" ? "default" : "outline"}
              disabled={answer !== null}
              focusableWhenDisabled
              onClick={() => setAnswer(choice)}
            >
              {answer ? OUTCOME[choice].done : choice === "approved" ? "Approve" : "Decline"}{" "}
              <span className="sr-only">{PERSON}</span>
            </Button>
          )
        )}
      </AlertAction>
    </Alert>
  )
}

"use client"

import * as React from "react"
import { ShieldCheckIcon, XIcon } from "lucide-react"

import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

// The close button names what it closes, and keeps its corner at any width.
// Closing hands the focus to the way back rather than dropping it on the page,
// and bringing the notice back hands it to the close button again.
export default function AlertDismissible() {
  const [open, setOpen] = React.useState(true)
  const moved = React.useRef(false)
  const close = React.useRef<HTMLButtonElement>(null)
  const reopen = React.useRef<HTMLButtonElement>(null)

  React.useEffect(() => {
    if (!moved.current) return
    const target = open ? close.current : reopen.current
    target?.focus()
  }, [open])

  function toggle(next: boolean) {
    moved.current = true
    setOpen(next)
  }

  return (
    <div className="flex w-full max-w-lg flex-col items-start gap-2">
      {open ? (
        <Alert role={undefined}>
          <ShieldCheckIcon aria-hidden="true" />
          <AlertTitle>Two-step verification is required for admins from November 1</AlertTitle>
          <AlertDescription>Three admins still sign in with a password alone.</AlertDescription>
          <AlertAction>
            <Button
              ref={close}
              variant="ghost"
              size="icon-xs"
              aria-label="Dismiss the two-step verification notice"
              onClick={() => toggle(false)}
            >
              <XIcon aria-hidden="true" />
            </Button>
          </AlertAction>
        </Alert>
      ) : (
        <Button ref={reopen} variant="link" size="sm" className="px-0" onClick={() => toggle(true)}>
          Show the two-step verification notice
        </Button>
      )}
    </div>
  )
}

"use client"

import * as React from "react"
import { CircleAlertIcon } from "lucide-react"

import { isEmail } from "@/lib/validation"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

const FIELDS = [
  { key: "email", label: "Billing email", type: "email", ok: isEmail, problem: "Enter the billing email in full" },
  { key: "po", label: "PO number", type: "text", ok: (v: string) => v.trim() !== "", problem: "Add the purchase-order number" },
] as const

type Values = Record<(typeof FIELDS)[number]["key"], string>
const failing = (values: Values) => FIELDS.filter((field) => !field.ok(values[field.key]))

// A summary above the form counts the problems and links to each field, and
// the message repeats under the field. Sending with problems moves focus to
// the summary, a link moves it to its field, and the summary is the one that
// announces — so the field messages drop FieldError's own alert role.
export default function AlertErrorSummary() {
  const id = React.useId()
  const summary = React.useRef<HTMLDivElement>(null)
  const [values, setValues] = React.useState<Values>({ email: "billing@blueharbor", po: "" })
  const [problems, setProblems] = React.useState(() => failing(values))
  const [sent, setSent] = React.useState(false)

  function send(event: React.FormEvent) {
    event.preventDefault()
    const found = failing(values)
    setProblems(found)
    setSent(found.length === 0)
    if (found.length > 0) requestAnimationFrame(() => summary.current?.focus())
  }

  return (
    <form noValidate onSubmit={send} className="flex w-full max-w-lg flex-col gap-3">
      {problems.length > 0 ? (
        <Alert ref={summary} tabIndex={-1} variant="destructive" className="focus-ring">
          <CircleAlertIcon aria-hidden="true" />
          <AlertTitle>{problems.length === 1 ? "1 problem" : `${problems.length} problems`} stopped INV-2042 from sending</AlertTitle>
          <AlertDescription>
            <ul className="flex flex-col gap-0.5">
              {problems.map((field) => (
                <li key={field.key}>
                  <a
                    href={`#${id}-${field.key}`}
                    onClick={(event) => {
                      event.preventDefault()
                      document.getElementById(`${id}-${field.key}`)?.focus()
                    }}
                  >
                    {field.problem}
                  </a>
                </li>
              ))}
            </ul>
          </AlertDescription>
        </Alert>
      ) : null}
      <div className="grid grid-cols-2 gap-3">
        {FIELDS.map((field) => {
          const invalid = problems.includes(field)
          return (
            <Field key={field.key} data-invalid={invalid || undefined}>
              <FieldLabel htmlFor={`${id}-${field.key}`}>{field.label}</FieldLabel>
              <Input
                id={`${id}-${field.key}`}
                type={field.type}
                value={values[field.key]}
                aria-invalid={invalid || undefined}
                aria-describedby={invalid ? `${id}-${field.key}-error` : undefined}
                onChange={(event) => setValues((current) => ({ ...current, [field.key]: event.target.value }))}
              />
              <FieldError id={`${id}-${field.key}-error`} role={undefined}>
                {invalid ? field.problem : null}
              </FieldError>
            </Field>
          )
        })}
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <Button type="submit">Send invoice</Button>
        <p role="status" aria-live="polite" className="text-sm text-muted-foreground">
          {sent ? "INV-2042 is on its way to Blue Harbor Logistics." : null}
        </p>
      </div>
    </form>
  )
}

import { CircleAlertIcon, InfoIcon } from "lucide-react"

import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

// The demo's two alerts in Arabic. Nothing in the recipe names a physical
// side: the icon takes the inline start, the text aligns to it, and the action
// keeps the inline end — on the left here. The ‏ keeps the figure after
// the Latin name in reading order, where the bidi algorithm would fold the two
// into one left-to-right run.
export default function AlertRtl() {
  return (
    <div dir="rtl" lang="ar" className="flex w-full max-w-lg flex-col gap-2.5">
      <Alert role={undefined}>
        <InfoIcon aria-hidden="true" />
        <AlertTitle>يُعاد ضبط الاستخدام في 1 أكتوبر</AlertTitle>
        <AlertDescription>استخدمت Northwind &rlm;84,120 من أصل 100,000 حدث في هذه الدورة.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <CircleAlertIcon aria-hidden="true" />
        <AlertTitle>توقفت مزامنة المدفوعات</AlertTitle>
        <AlertDescription>المدفوعات منذ الساعة 09:40 بالتوقيت العالمي غائبة عن الإيرادات.</AlertDescription>
        <AlertAction>
          <Button variant="outline" size="xs">
            إعادة الربط
          </Button>
        </AlertAction>
      </Alert>
    </div>
  )
}