feat(KAN-18): redesign foundational UI components

resources/js/components/ui/avatar/Avatar.vue

@@ -1,18 +1,35 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { AvatarRoot } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { AvatarRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { AvatarVariants } from ".";
+import { reactiveOmit } from "@vueuse/core";
+import { AvatarRoot, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { avatarVariants } from ".";
 
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+const props = withDefaults(
+    defineProps<
+        AvatarRootProps & {
+            class?: HTMLAttributes["class"];
+            size?: AvatarVariants["size"];
+            shape?: AvatarVariants["shape"];
+        }
+    >(),
+    { size: "default", shape: "circle" },
+);
+
+const delegatedProps = reactiveOmit(props, "class", "size", "shape");
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <AvatarRoot
-    data-slot="avatar"
-    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
-  >
-    <slot />
-  </AvatarRoot>
+    <AvatarRoot
+        data-slot="avatar"
+        :data-size="size"
+        :data-shape="shape"
+        v-bind="forwardedProps"
+        :class="cn(avatarVariants({ size, shape }), props.class)"
+    >
+        <slot />
+    </AvatarRoot>
 </template>

resources/js/components/ui/avatar/AvatarFallback.vue

@@ -1,21 +1,28 @@
 <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"
+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 props = defineProps<
+    AvatarFallbackProps & { class?: HTMLAttributes["class"] }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AvatarFallback
-    data-slot="avatar-fallback"
-    v-bind="delegatedProps"
-    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
-  >
-    <slot />
-  </AvatarFallback>
+    <AvatarFallback
+        data-slot="avatar-fallback"
+        v-bind="delegatedProps"
+        :class="
+            cn(
+                'bg-accent text-accent-foreground flex size-full items-center justify-center font-semibold',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </AvatarFallback>
 </template>

resources/js/components/ui/avatar/UserAvatar.vue

@@ -1,41 +1,39 @@
 <script setup lang="ts">
-import { getInitials } from "@/composables/useInitials";
-import {
-    Avatar,
-    AvatarFallback,
-    AvatarImage,
-} from "@/components/ui/avatar/index";
+import type { AvatarVariants } from "@/components/ui/avatar";
+import type { UserModel } from "@/types/models/user-model";
 import { usePage } from "@inertiajs/vue3";
-import { computed, PropType } from "vue";
-import { UserModel } from "@/types/models/user-model";
+import { computed } from "vue";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { getInitials } from "@/composables/useInitials";
 
-const props = defineProps({
-    user: {
-        type: Object as PropType<UserModel>,
+const props = withDefaults(
+    defineProps<{
+        user?: UserModel;
+        rounded?: boolean;
+        size?: AvatarVariants["size"];
+        label?: string;
+    }>(),
+    {
+        rounded: true,
+        size: "default",
     },
-    rounded: {
-        type: Boolean,
-        default: false,
-    },
-})
+);
 
 const page = usePage();
-const auth = computed(() => page.props.auth);
-
-const user = computed(() => props.user ?? auth.value.user)
+const user = computed(() => props.user ?? page.props.auth.user);
+const accessibleLabel = computed(() => props.label ?? user.value.name);
+const initials = computed(() => getInitials(user.value.name));
 </script>
 
 <template>
-    <Avatar class="size-8 overflow-hidden" :class="rounded ? 'rounded-full' : 'rounded-lg'">
+    <Avatar :size="size" :shape="rounded ? 'circle' : 'rounded'">
         <AvatarImage
             v-if="user.avatar"
             :src="user.avatar"
-            :alt="user.name"
+            :alt="accessibleLabel"
         />
-        <AvatarFallback
-            class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
-        >
-            {{ getInitials(auth.user?.name) }}
+        <AvatarFallback :aria-label="accessibleLabel">
+            {{ initials }}
         </AvatarFallback>
     </Avatar>
 </template>

resources/js/components/ui/avatar/index.ts

@@ -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>;