feat: add Alert and Avatar components

apps/www/src/App.vue

@@ -4,6 +4,8 @@ import PopoverDemo from '@/registry/default/examples/PopoverDemo.vue'
 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 AlertDemo from '@/registry/default/examples/AlertDemo.vue'
+import AvatarDemo from '@/registry/default/examples/AvatarDemo.vue'
 </script>
 
 <template>
@@ -17,5 +19,9 @@ import SelectDemo from '@/registry/default/examples/SelectDemo.vue'
     <AlertDialogDemo />
 
     <SelectDemo />
+
+    <AlertDemo />
+
+    <AvatarDemo />
   </div>
 </template>

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

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

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

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Avatar, AvatarFallback, AvatarImage } from "@/registry/default/ui/avatar";
+</script>
+
+<template>
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+</template>

apps/www/src/lib/registry/default/ui/alert.tsx

@@ -0,0 +1,53 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+import { HTMLAttributes, defineComponent } from 'vue'
+import { cn } from '@/utils'
+
+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 = defineComponent<VariantProps<typeof alertVariants> & HTMLAttributes>((props, { slots, attrs }) => {
+  const variant = props.variant ?? 'default'
+  return () => (
+    <div
+      role="alert"
+      class={cn(alertVariants({ variant }), attrs.class ?? '')}
+      {...props}
+    >
+      {slots.default?.()}
+    </div>
+  )
+}, {name: "Alert"})
+
+const AlertTitle = defineComponent<HTMLAttributes>((props, {slots, attrs}) => {
+  return () =>(
+  <h5
+    class={cn('mb-1 font-medium leading-none tracking-tight', attrs.class ?? '')}
+    {...props}
+  >
+    {slots.default?.()}
+  </h5>
+)}, {name: "AlertTitle"})
+
+const AlertDescription = defineComponent<HTMLAttributes>((props, {slots, attrs}) => { return () => (
+  <div
+    class={cn('text-sm [&_p]:leading-relaxed', attrs.class ?? '')}
+    {...props}
+  >
+    {slots.default?.()}
+  </div>
+)}, {name: "AlertDescription"})
+
+export { Alert, AlertTitle, AlertDescription }

apps/www/src/lib/registry/default/ui/avatar.tsx

@@ -0,0 +1,56 @@
+import {AvatarRoot as AvatarRootPrimitive,
+  AvatarImage as AvatarImagePrimitive,
+  AvatarFallback as AvatarFallbackPrimitive,
+  type AvatarRootProps,
+  type AvatarImageProps,
+  type AvatarFallbackProps,
+
+} from 'radix-vue';
+import { cn, useEmitAsProps } from "@/utils"
+import { defineComponent } from 'vue';
+
+const Avatar = defineComponent<AvatarRootProps>((props, {attrs, slots}) => {
+  return () => (
+  <AvatarRootPrimitive
+    class={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      attrs.class ?? ""
+    )}
+    {...props}
+  >
+    {slots.default?.()}
+  </AvatarRootPrimitive>
+)}, {name: "Avatar"})
+
+const AvatarImage = defineComponent<AvatarImageProps>((props, {attrs, slots, emit}) => {
+  const emitsAsProps = useEmitAsProps(emit)
+  return () => (
+  <AvatarImagePrimitive
+    class={cn("aspect-square h-full w-full", attrs.class ?? "")}
+    {...props}
+    {...emitsAsProps}
+  >
+    {slots.default?.()}
+  </AvatarImagePrimitive>
+  )
+}, {name: "AvatarImage", emits: AvatarImagePrimitive.emits});
+
+const AvatarFallback = defineComponent<AvatarFallbackProps>((props, {attrs, slots, emit}) => {
+  const emitsAsProps = useEmitAsProps(emit)
+  return () => (
+  <AvatarFallbackPrimitive
+    class={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      attrs.class ?? ""
+    )}
+    {...props}
+    {...emitsAsProps}
+  >
+    {slots.default?.()}
+  </AvatarFallbackPrimitive>
+  )
+}, {
+  name: "AvatarFallback",
+})
+
+export { Avatar, AvatarImage, AvatarFallback }