| 1 | import { type VariantProps, cva } from "class-variance-authority"; |
| 2 | import { Slot } from "radix-ui"; |
| 3 | import type { ComponentProps } from "react"; |
| 4 | |
| 5 | import { cn } from "../../lib/cn"; |
| 6 | |
| 7 | // shadcn/ui's alert, styled with g1t's tokens: a short tinted notice in the |
| 8 | // flow of a page, such as why a form was refused. `danger` is for what went |
| 9 | // wrong, `warn` for what needs care, `info` for what is worth knowing. Give |
| 10 | // it `role="alert"` when it appears in answer to what someone just did, so |
| 11 | // a screen reader says it at once; a notice that is there from the start |
| 12 | // needs no role. `asChild` puts the notice on a <p>. |
| 13 | |
| 14 | export const alertVariants = cva("rounded-lg border px-3 py-2 text-sm", { |
| 15 | variants: { |
| 16 | tone: { |
| 17 | danger: "border-danger/40 bg-danger/10 text-danger", |
| 18 | warn: "border-warn/40 bg-warn/10 text-fg", |
| 19 | info: "border-info/40 bg-info/10 text-fg", |
| 20 | success: "border-success/40 bg-success/10 text-fg", |
| 21 | }, |
| 22 | }, |
| 23 | defaultVariants: { tone: "danger" }, |
| 24 | }); |
| 25 | |
| 26 | export function Alert({ className, tone, asChild = false, ...props }: ComponentProps<"div"> & VariantProps<typeof alertVariants> & { asChild?: boolean }) { |
| 27 | const Comp = asChild ? Slot.Root : "div"; |
| 28 | return <Comp data-slot="alert" className={cn(alertVariants({ tone }), className)} {...props} />; |
| 29 | } |
| 30 | |
| 31 | export function AlertTitle({ className, ...props }: ComponentProps<"p">) { |
| 32 | return <p data-slot="alert-title" className={cn("font-medium", className)} {...props} />; |
| 33 | } |
| 34 | |
| 35 | export function AlertDescription({ className, ...props }: ComponentProps<"div">) { |
| 36 | return <div data-slot="alert-description" className={cn("mt-0.5 text-muted", className)} {...props} />; |
| 37 | } |