feat(avatar): set shadcn styling

Author: TylerAPfledderer

src/components/Avatar/Avatar.stories.tsx

@@ -31,7 +31,7 @@ export const Single: Story = {
 export const Group: Story = {
   args: {
     name: "Dan Abrahmov",
-    src: "https://bit.ly/dan-abramov",
+    src: "https://bit.ly/dan-abramo",
     href: "#",
   },
   render: (args) => (

src/components/ui/__stories__/Avatar.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { Avatar } from "../avatar"
-import { HStack } from "../flex"
+import { HStack, VStack } from "../flex"
 
 const meta = {
   title: "Atoms / Media & Icons / UI Avatars",
@@ -18,7 +18,13 @@ export const Single: Story = {
     src: "https://bit.ly/dan-abramov",
     href: "#",
   },
-  render: (args) => <Avatar {...args} />,
+  render: (args) => (
+    <VStack className="gap-4">
+      {(["lg", "md", "sm", "xs"] as const).map((size) => (
+        <Avatar key={size} size={size} {...args} />
+      ))}
+    </VStack>
+  ),
 }
 
 export const WithUsername: Story = {
@@ -30,8 +36,16 @@ export const WithUsername: Story = {
   },
   render: (args) => (
     <HStack className="gap-4">
-      <Avatar {...args} />
-      <Avatar {...args} direction="column" />
+      <VStack>
+        {(["md", "sm"] as const).map((size, idx) => (
+          <Avatar key={idx} size={size} {...args} />
+        ))}
+      </VStack>
+      <VStack>
+        {(["md", "sm"] as const).map((size, idx) => (
+          <Avatar key={idx} size={size} direction="column" {...args} />
+        ))}
+      </VStack>
     </HStack>
   ),
 }

src/components/ui/avatar.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import upperCase from "lodash/upperCase"
+import { tv, type VariantProps } from "tailwind-variants"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
 import { cn } from "@/lib/utils/cn"
@@ -8,20 +9,67 @@ import { Center } from "./flex"
 import { BaseLink, type LinkProps } from "./Link"
 import { LinkBox, LinkOverlay } from "./link-box"
 
-type AvatarBaseProps = React.ComponentProps<typeof AvatarPrimitive.Root>
+const avatarStyles = tv({
+  slots: {
+    container:
+      "relative shrink-0 flex overflow-hidden rounded-full focus:outline-4 focus:-outline-offset-1 focus:rounded-full active:shadow-none [&_img]:hover:opacity-70 border border-transparent active:border-primary-hover",
+    fallback: "bg-body text-body-inverse",
+  },
+  variants: {
+    size: {
+      xs: {
+        container:
+          "size-6 hover:shadow-[2px_2px_0_var(--avatar-base-shadow-color)] peer-hover:shadow-[2px_2px_0_var(--avatar-base-shadow-color)]",
+        fallback: "text-xs",
+      },
+      sm: {
+        container:
+          "size-8 hover:shadow-[2px_2px_0_var(--avatar-base-shadow-color)] peer-hover:shadow-[2px_2px_0_var(--avatar-base-shadow-color)]",
+        fallback: "text-sm",
+      },
+      md: {
+        container:
+          "size-12 hover:shadow-[4px_4px_0_var(--avatar-base-shadow-color)] peer-hover:shadow-[4px_4px_0_var(--avatar-base-shadow-color)]",
+        fallback: "text-lg",
+      },
+      lg: {
+        container:
+          "size-16 hover:shadow-[4px_4px_0_var(--avatar-base-shadow-color)] peer-hover:shadow-[4px_4px_0_var(--avatar-base-shadow-color)]",
+        fallback: "text-2xl",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+})
+
+type AvatarVariantProps = VariantProps<typeof avatarStyles>
+
+const AvatarStylesContext =
+  React.createContext<ReturnType<typeof avatarStyles>>(avatarStyles())
+
+const useAvatarStyles = () => React.useContext(AvatarStylesContext)
+
+type AvatarBaseProps = React.ComponentProps<typeof AvatarPrimitive.Root> &
+  AvatarVariantProps
 
 const AvatarBase = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   AvatarBaseProps
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
-    {...props}
-  />
+>(({ className, size, ...props }, ref) => (
+  <AvatarStylesContext.Provider value={avatarStyles({ size })}>
+    <AvatarPrimitive.Root
+      ref={ref}
+      style={
+        {
+          "--avatar-base-shadow-color": "hsl(var(--primary-low-contrast))",
+        } as React.CSSProperties
+      }
+      className={avatarStyles({ size }).container({ className })}
+      {...props}
+    />
+  </AvatarStylesContext.Provider>
 ))
 AvatarBase.displayName = AvatarPrimitive.Root.displayName
 
@@ -40,17 +88,22 @@ AvatarImage.displayName = AvatarPrimitive.Image.displayName
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "bg-muted flex h-full w-full items-center justify-center rounded-full",
-      className
-    )}
-    {...props}
-  />
-))
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> &
+    VariantProps<typeof avatarStyles>
+>(({ className, ...props }, ref) => {
+  const { fallback } = useAvatarStyles()
+  return (
+    <AvatarPrimitive.Fallback
+      ref={ref}
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-full",
+        fallback(),
+        className
+      )}
+      {...props}
+    />
+  )
+})
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
 
 export type AvatarProps = AvatarBaseProps &
@@ -68,10 +121,11 @@ const Avatar = React.forwardRef<
   React.ElementRef<"span"> | React.ElementRef<"div">,
   AvatarProps
 >((props, ref) => {
-  const { href, src, name, label, direction = "row" } = props
+  const { href, src, name, size, label, direction = "row" } = props
 
   const commonLinkProps = {
     href,
+    className: "not-[:hover]:no-underline",
   }
 
   const fallbackInitials = upperCase(
@@ -95,12 +149,14 @@ const Avatar = React.forwardRef<
       >
         <LinkOverlay
           asChild
-          className="z-overlay inline-flex items-center gap-1 p-1 no-underline"
-          data-peer
+          className={cn(
+            "peer z-overlay inline-flex items-center gap-1 p-1",
+            size !== "md" ? "text-xs" : "text-sm"
+          )}
         >
           <BaseLink {...commonLinkProps}>{label}</BaseLink>
         </LinkOverlay>
-        <AvatarBase>
+        <AvatarBase size={size}>
           <AvatarImage src={src} />
           <AvatarFallback>{fallbackInitials}</AvatarFallback>
         </AvatarBase>
@@ -109,7 +165,7 @@ const Avatar = React.forwardRef<
   }
 
   return (
-    <AvatarBase ref={ref} asChild>
+    <AvatarBase ref={ref} size={size} asChild>
       <BaseLink {...commonLinkProps}>
         <AvatarImage src={src} />
         <AvatarFallback>{fallbackInitials}</AvatarFallback>