feat(react): add new component avatar

README.md

@@ -52,7 +52,7 @@ _Layout_
 _Display_
 
 - [ ] Card
-- [ ] Avatar
+- [x] Avatar
 - [ ] Accordion
 - [x] Alert
 - [x] Alert Dialog

lib/react/package.json

@@ -23,6 +23,7 @@
     "@desing-system/theme": "workspace:*",
     "@radix-ui/react-alert-dialog": "1.0.5",
     "@radix-ui/react-aspect-ratio": "1.0.3",
+    "@radix-ui/react-avatar": "1.0.4",
     "@radix-ui/react-slot": "1.0.2",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.0",

lib/react/src/components/avatar.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import { cn } from '../lib/cn'
+
+const Avatar = React.forwardRef< React.ElementRef<typeof AvatarPrimitive.Root>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex size-10 shrink-0 overflow-hidden rounded-full',
+      className,
+    )}
+    {...props}
+  />
+))
+
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+))
+
+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(
+      'flex h-full w-full items-center justify-center rounded-full',
+      className,
+    )}
+    {...props}
+  />
+))
+
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

lib/react/src/index.ts

@@ -9,3 +9,4 @@ export * from './components/carousel'
 export * from './components/alert-dialog'
 export * from './components/badge'
 export * from './components/aspect-ratio'
+export * from './components/avatar'