alert.tsx raw

   1  import * as React from "react";
   2  import { cva, type VariantProps } from "class-variance-authority";
   3  
   4  import { cn } from "src/lib/utils";
   5  
   6  const alertVariants = cva(
   7    "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current has-[[data-slot=alert-action]]:grid-cols-[0_1fr_auto] has-[>svg]:has-[[data-slot=alert-action]]:grid-cols-[calc(var(--spacing)*4)_1fr_auto]",
   8    {
   9      variants: {
  10        variant: {
  11          default: "bg-card text-card-foreground",
  12          destructive:
  13            "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
  14          warning:
  15            "border-warning-foreground border text-warning-foreground *:data-[slot=alert-description]:text-warning-foreground/90 [&>svg]:text-current",
  16        },
  17      },
  18      defaultVariants: {
  19        variant: "default",
  20      },
  21    }
  22  );
  23  
  24  function Alert({
  25    className,
  26    variant,
  27    ...props
  28  }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
  29    return (
  30      <div
  31        data-slot="alert"
  32        role="alert"
  33        className={cn(alertVariants({ variant }), className)}
  34        {...props}
  35      />
  36    );
  37  }
  38  
  39  function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
  40    return (
  41      <div
  42        data-slot="alert-title"
  43        className={cn(
  44          "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
  45          className
  46        )}
  47        {...props}
  48      />
  49    );
  50  }
  51  
  52  function AlertDescription({
  53    className,
  54    ...props
  55  }: React.ComponentProps<"div">) {
  56    return (
  57      <div
  58        data-slot="alert-description"
  59        className={cn(
  60          "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
  61          className
  62        )}
  63        {...props}
  64      />
  65    );
  66  }
  67  
  68  function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
  69    return (
  70      <div
  71        data-slot="alert-action"
  72        className={cn("col-start-3 row-start-1 row-span-2 self-start", className)}
  73        {...props}
  74      />
  75    );
  76  }
  77  
  78  export { Alert, AlertTitle, AlertDescription, AlertAction };
  79