import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const alertVariants = cva( 'relative w-full border px-4 py-2 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', { variants: { variant: { default: 'bg-background text-foreground', destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive' } }, defaultVariants: { variant: 'default' } } ); const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> >(({ className, variant, ...props }, ref) => ( <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} /> )); Alert.displayName = 'Alert'; const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>( ({ className, ...props }, ref) => ( <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} /> ) ); AlertTitle.displayName = 'AlertTitle'; const AlertDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement> >(({ className, ...props }, ref) => ( <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} /> )); AlertDescription.displayName = 'AlertDescription'; export { Alert, AlertDescription, AlertTitle };