feat(KAN-18): redesign foundational UI components

2026-09-09 15:31:04 +02:00
parent 95db152b91
commit 1b2349e977
18 changed files with 892 additions and 304 deletions
@@ -1,3 +1,31 @@
-export { default as Avatar } from "./Avatar.vue"
-export { default as AvatarFallback } from "./AvatarFallback.vue"
-export { default as AvatarImage } from "./AvatarImage.vue"
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export { default as Avatar } from "./Avatar.vue";
+export { default as AvatarFallback } from "./AvatarFallback.vue";
+export { default as AvatarImage } from "./AvatarImage.vue";
+export { default as UserAvatar } from "./UserAvatar.vue";
+
+export const avatarVariants = cva(
+    "border-border bg-muted relative flex shrink-0 overflow-hidden border",
+    {
+        variants: {
+            size: {
+                sm: "size-6 text-label",
+                default: "size-8 text-caption",
+                lg: "size-10 text-body",
+                xl: "size-16 text-title",
+            },
+            shape: {
+                circle: "rounded-full",
+                rounded: "rounded-lg",
+                square: "rounded-sm",
+            },
+        },
+        defaultVariants: {
+            size: "default",
+            shape: "circle",
+        },
+    },
+);
+export type AvatarVariants = VariantProps<typeof avatarVariants>;