feat: add Alert component

apps/www/src/App.vue

@@ -5,6 +5,7 @@ import DialogDemo from '@/registry/default/examples/DialogDemo.vue'
 import AlertDialogDemo from '@/registry/default/examples/AlertDialogDemo.vue'
 import SelectDemo from '@/registry/default/examples/SelectDemo.vue'
 import AvatarDemo from '@/registry/default/examples/AvatarDemo.vue'
+import AlertDemo from '@/registry/default/examples/AlertDemo.vue'
 </script>
 
 <template>
@@ -20,5 +21,7 @@ import AvatarDemo from '@/registry/default/examples/AvatarDemo.vue'
     <SelectDemo />
 
     <AvatarDemo />
+
+    <AlertDemo />
   </div>
 </template>

apps/www/src/lib/registry/default/examples/AlertDemo.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert';
+import { Terminal } from 'lucide-vue-next';
+</script>
+
+<template>
+  <Alert>
+    <Terminal class="h-4 w-4" />
+    <AlertTitle aria-label="test">Heads up!</AlertTitle>
+    <AlertDescription>
+      You can add components to your app using the cli.
+    </AlertDescription>
+  </Alert>
+</template>

apps/www/src/lib/registry/default/ui/alert/Alert.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from '@/utils'
+import { computed, useAttrs } from "vue";
+
+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',
+    },
+  },
+)
+
+type AlertVariantProps = VariantProps<typeof alertVariants>
+
+withDefaults(defineProps<{
+  variant?: AlertVariantProps['variant']
+}>(), {
+  variant: 'default'
+})
+
+defineOptions({
+  name: 'Alert',
+  inheritAttrs: false,
+})
+
+const allAttrs = useAttrs()
+const attrs = computed(() => {
+  const { class: className, ...rest } = allAttrs
+  return {
+    className,
+    rest: rest
+  }
+})
+</script>
+    
+<template>
+  <div role="alert" v-bind="attrs.rest" :class="cn(alertVariants({ variant }), attrs.className ?? '')">
+    <slot />
+  </div>
+</template>

apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/utils';
+import { computed, useAttrs } from 'vue';
+
+defineOptions({
+  name: 'AlertDescription',
+  inheritAttrs: false,
+})
+
+const allAttrs = useAttrs()
+const attrs = computed(() => {
+  const { class: className, ...rest } = allAttrs
+  return {
+    className,
+    rest: rest
+  }
+})
+</script>
+
+<template>
+  <div v-bind="attrs" :class="cn('text-sm [&_p]:leading-relaxed', attrs.className ?? '')">
+    <slot />
+  </div>
+</template>

apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/utils';
+import { computed, useAttrs } from 'vue';
+
+defineOptions({
+  name: 'AlertTitle',
+  inheritAttrs: false,
+})
+
+const allAttrs = useAttrs()
+const attrs = computed(() => {
+  const { class: className, ...rest } = allAttrs
+  return {
+    className,
+    rest: rest
+  }
+})
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', attrs.className)" v-bind="attrs.rest">
+    <slot />
+  </h5>
+</template>

apps/www/src/lib/registry/default/ui/alert/index.ts

@@ -0,0 +1,9 @@
+import Alert from './Alert.vue';
+import AlertTitle from './AlertTitle.vue';
+import AlertDescription from './AlertDescription.vue';
+
+export {
+  Alert,
+  AlertTitle,
+  AlertDescription
+}