34 lines
1.5 KiB
TypeScript
34 lines
1.5 KiB
TypeScript
import * as React from "react"
|
|
import { cva, type VariantProps } from "class-variance-authority"
|
|
import { cn } from "cn"
|
|
|
|
// Alert is an inline message, not a Toast. shadcn structure is kept (role="alert", optional leading svg icon, Title, Description);
|
|
// the look comes from src/theme/alert.css via data-variant. Only default and destructive exist: the HM Theme has no success / warning /
|
|
// information status colors yet, so none are invented. There is no close action.
|
|
const alertVariants = cva(
|
|
"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "",
|
|
destructive: "",
|
|
},
|
|
},
|
|
defaultVariants: { variant: "default" },
|
|
}
|
|
)
|
|
|
|
function Alert({ className, variant = "default", ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
|
return <div data-slot="alert" data-variant={variant} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
|
|
}
|
|
|
|
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
return <div data-slot="alert-title" className={cn("col-start-2 line-clamp-1 min-h-4", className)} {...props} />
|
|
}
|
|
|
|
function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
|
|
return <div data-slot="alert-description" className={cn("col-start-2 grid justify-items-start gap-1", className)} {...props} />
|
|
}
|
|
|
|
export { Alert, AlertTitle, AlertDescription }
|