big milestone!

src/components/ui/avatar/Avatar.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', props.class)"
+  >
+    <slot />
+  </div>
+</template> 

src/components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex h-full w-full items-center justify-center rounded-full bg-muted', props.class)"
+  >
+    <slot />
+  </div>
+</template> 

src/components/ui/avatar/AvatarImage.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  src?: string
+  alt?: string
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <img
+    :src="src"
+    :alt="alt"
+    :class="cn('aspect-square h-full w-full', props.class)"
+  />
+</template> 

src/components/ui/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue' 

src/components/ui/card/Card.vue

@@ -9,12 +9,7 @@ const props = defineProps<{
 
 <template>
   <div
-    :class="
-      cn(
-        'rounded-lg border bg-card text-card-foreground shadow-sm',
-        props.class,
-      )
-    "
+    :class="cn('rounded-lg border bg-card text-card-foreground shadow-sm', props.class)"
   >
     <slot />
   </div>

src/components/ui/card/CardContent.vue

@@ -8,7 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
+  <div
+    :class="
+      cn('p-6 pt-0', props.class)
+    "
+  >
     <slot />
   </div>
 </template>

src/components/ui/card/CardDescription.vue

@@ -8,7 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <p :class="cn('text-sm text-muted-foreground', props.class)">
+  <p
+    :class="
+      cn('text-sm text-muted-foreground', props.class)
+    "
+  >
     <slot />
   </p>
 </template>

src/components/ui/card/CardFooter.vue

@@ -8,7 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+  <div
+    :class="
+      cn('flex items-center p-6 pt-0', props.class)
+    "
+  >
     <slot />
   </div>
 </template>

src/components/ui/card/CardHeader.vue

@@ -8,7 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+  <div
+    :class="
+      cn('flex flex-col space-y-1.5 p-6', props.class)
+    "
+  >
     <slot />
   </div>
 </template>

src/components/ui/label/index.ts

@@ -0,0 +1,8 @@
+import { Label as LabelPrimitive } from 'radix-vue'
+import { tv } from 'tailwind-variants'
+
+export const labelVariants = tv({
+  base: 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+})
+
+export const Label = LabelPrimitive.Root 

src/components/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  type ScrollAreaRootProps,
+  ScrollAreaViewport,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import ScrollBar from './ScrollBar.vue'
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template> 

src/components/ui/scroll-area/ScrollBar.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  type ScrollAreaScrollbarProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<
+  ScrollAreaScrollbarProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="cn(
+      'flex touch-none select-none transition-colors',
+      props.orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      props.orientation === 'horizontal' &&
+        'h-2.5 border-t border-t-transparent p-[1px]',
+      props.class
+    )"
+  >
+    <ScrollAreaThumb
+      :class="cn(
+        'relative rounded-full bg-border',
+        props.orientation === 'vertical' && 'flex-1'
+      )"
+    />
+  </ScrollAreaScrollbar>
+</template> 

src/components/ui/scroll-area/index.ts

@@ -0,0 +1 @@
+export { default as ScrollArea } from './ScrollArea.vue'