From 67633addd3d907d8122fd53828672b2312e52403 Mon Sep 17 00:00:00 2001
From: Lars Hampe <hello@hashdot.co>
Date: Fri, 11 Oct 2024 23:42:53 +0200
Subject: [PATCH] feat(ui): add alert component

---
 packages/ui/src/alert.tsx | 59 +++++++++++++++++++++++++++++++++++++++
 packages/ui/src/index.ts  |  1 +
 2 files changed, 60 insertions(+)
 create mode 100644 packages/ui/src/alert.tsx

diff --git a/packages/ui/src/alert.tsx b/packages/ui/src/alert.tsx
new file mode 100644
index 0000000..47c1b59
--- /dev/null
+++ b/packages/ui/src/alert.tsx
@@ -0,0 +1,59 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from './lib/cn'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>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, AlertTitle, AlertDescription }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 027bc64..8426db4 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -18,3 +18,4 @@ export * from './select'
 export * from './popover'
 export * from './calendar'
 export * from './date-picker'
+export * from './alert'