Initial Commit

2026-10-03 20:07:49 +02:00
commit a1346c98b1
427 changed files with 59320 additions and 0 deletions
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { AvatarVariants } from '.'
+import { AvatarRoot } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { avatarVariants } from '.'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+}>()
+</script>
+
+<template>
+  <AvatarRoot
+    data-slot="avatar"
+    :data-size="size ?? 'default'"
+    :class="cn(avatarVariants({ size }), props.class)"
+  >
+    <slot />
+  </AvatarRoot>
+</template>
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="avatar-badge"
+    :class="cn(
+      'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',
+      'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+      'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+      'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+      props.class,
+    )"
+  >
+    <slot />
+  </span>
+</template>
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AvatarFallback } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
+    :class="cn('bg-muted text-muted-foreground rounded-sm flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs', props.class)"
+  >
+    <slot />
+  </AvatarFallback>
+</template>
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="avatar-group"
+    :class="cn(
+      'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="avatar-group-count"
+    :class="cn(
+      'bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 relative flex shrink-0 items-center justify-center ring-2 ring-background',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from 'reka-ui'
+import { AvatarImage } from 'reka-ui'
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage
+    data-slot="avatar-image"
+    v-bind="props"
+    class="rounded-sm aspect-square size-full object-cover"
+  >
+    <slot />
+  </AvatarImage>
+</template>
@@ -0,0 +1,27 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarBadge } from './AvatarBadge.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarGroup } from './AvatarGroup.vue'
+export { default as AvatarGroupCount } from './AvatarGroupCount.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+
+export const avatarVariants = cva(
+  'size-8 rounded-sm after:rounded-sm data-[size=lg]:size-10 data-[size=sm]:size-6 group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten',
+  {
+    variants: {
+      size: {
+        sm: '',
+        default: '',
+        lg: '',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+)
+
+export type AvatarVariants = VariantProps<typeof avatarVariants>