Improve avatar documentation & adjust sizes

packages/demo/src/components/demo/avatar.tsx

@@ -1,4 +1,7 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@eqtylab/equality";
+import avatarSrc from "@demo/assets/avatar.avif";
+
+const IMAGE_SRC = avatarSrc.src;
 
 export const AvatarDemo = ({
   variant = "default",
@@ -12,13 +15,54 @@
   return (
     <Avatar size={size} shape={shape}>
       <AvatarImage
-        src={
-          variant === "default"
-            ? "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-            : undefined
-        }
+        src={variant === "default" ? IMAGE_SRC : undefined}
+        alt="User avatar"
       />
       <AvatarFallback>RG</AvatarFallback>
     </Avatar>
   );
 };
+
+export const AvatarSizesDemo = ({
+  variant = "fallback",
+  shape,
+}: {
+  variant?: "default" | "fallback";
+  shape?: "circle" | "square";
+}) => {
+  const sizes = ["sm", "md", "lg", "xl"] as const;
+  const labels = { sm: "SM", md: "MD", lg: "LG", xl: "XL" };
+  return (
+    <div className="flex items-end gap-4">
+      {sizes.map((s) => (
+        <Avatar key={s} size={s} shape={shape}>
+          <AvatarImage
+            src={variant === "default" ? IMAGE_SRC : undefined}
+            alt="User avatar"
+          />
+          <AvatarFallback>{labels[s]}</AvatarFallback>
+        </Avatar>
+      ))}
+    </div>
+  );
+};
+
+export const AvatarShapeDemo = ({
+  variant = "fallback",
+  shape,
+}: {
+  variant?: "default" | "fallback";
+  shape: "circle" | "square";
+}) => {
+  return (
+    <div className="flex items-center gap-4">
+      <Avatar shape={shape}>
+        <AvatarFallback>RG</AvatarFallback>
+      </Avatar>
+      <Avatar shape={shape}>
+        <AvatarImage src={IMAGE_SRC} alt="User avatar" />
+        <AvatarFallback>RG</AvatarFallback>
+      </Avatar>
+    </div>
+  );
+};

packages/demo/src/content/components/avatar.mdx

@@ -4,42 +4,99 @@ heading: "Avatar"
 description: "Avatar with sizes and variants"
 ---
 
-import { AvatarDemo } from "@demo/components/demo/avatar";
+import {
+  AvatarDemo,
+  AvatarSizesDemo,
+  AvatarShapeDemo,
+} from "@demo/components/demo/avatar";
 
-## Components
+## Overview
 
-### Avatar Image
+Avatars represent a user or entity with a profile image and initials fallback.
 
-<AvatarDemo client:only="react" />
+## Usage
 
-### Avatar Fallback
+Import the component:
 
-<AvatarDemo client:only="react" variant="fallback" />
+```ts
+import { Avatar, AvatarImage, AvatarFallback } from "@eqtylab/equality";
+```
+
+Basic usage with an image and fallback:
+
+```tsx
+<Avatar>
+  <AvatarImage src="/path/to/image.jpg" alt="User name" />
+  <AvatarFallback>AB</AvatarFallback>
+</Avatar>
+```
+
+## Variants
 
-## Size Variants
+### Image
 
-### Small
+When a valid `src` is provided to `AvatarImage`, the avatar displays the image.
 
-<AvatarDemo client:only="react" variant="fallback" size="sm" />
+<AvatarDemo client:only="react" />
+
+### Fallback
 
-### Medium (Default)
+When no image is provided or the image fails to load, `AvatarFallback` is displayed instead, typically showing initials.
 
 <AvatarDemo client:only="react" variant="fallback" />
 
-### Large
+## Sizes
+
+The `size` prop controls the dimensions of the avatar.
 
-<AvatarDemo client:only="react" variant="fallback" size="lg" />
+<AvatarSizesDemo client:only="react" />
 
-### Extra Large
+```tsx
+<Avatar size="sm">...</Avatar>
+<Avatar size="md">...</Avatar>
+<Avatar size="lg">...</Avatar>
+<Avatar size="xl">...</Avatar>
+```
 
-<AvatarDemo client:only="react" variant="fallback" size="xl" />
+## Shape
 
-## Shape Variants
+The `shape` prop controls the border radius of the avatar.
 
 ### Circle (Default)
 
-<AvatarDemo client:only="react" variant="fallback" />
+<AvatarShapeDemo client:only="react" shape="circle" />
 
 ### Square
 
-<AvatarDemo client:only="react" variant="fallback" shape="square" />
+<AvatarShapeDemo client:only="react" shape="square" />
+
+```tsx
+<Avatar shape="circle">...</Avatar>
+<Avatar shape="square">...</Avatar>
+```
+
+## Slots
+
+| Name       | Description                                            |
+| ---------- | ------------------------------------------------------ |
+| `children` | Accepts `AvatarImage` and `AvatarFallback` as children |
+
+## Props
+
+### Avatar
+
+| Name    | Description             | Type                   | Default  | Required |
+| ------- | ----------------------- | ---------------------- | -------- | -------- |
+| `size`  | The size of the avatar  | `sm`, `md`, `lg`, `xl` | `md`     | ❌       |
+| `shape` | The shape of the avatar | `circle`, `square`     | `circle` | ❌       |
+
+### AvatarImage
+
+| Name  | Description                   | Type     | Default | Required |
+| ----- | ----------------------------- | -------- | ------- | -------- |
+| `src` | The image source URL          | `string` | -       | ❌       |
+| `alt` | Accessible alt text for image | `string` | -       | ❌       |
+
+### AvatarFallback
+
+No properties, but needs child content to render.

packages/ui/package.json

@@ -2,7 +2,7 @@
   "name": "@eqtylab/equality",
   "description": "EQTYLab's component and token-based design system",
   "homepage": "https://equality.eqtylab.io/",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "license": "Apache-2.0",
   "keywords": [
     "component library",

packages/ui/src/components/avatar/avatar.module.css

@@ -3,6 +3,7 @@
 .avatar {
   @apply relative flex;
   @apply overflow-hidden;
+  @apply aspect-square;
 }
 
 .avatar-image {
@@ -21,24 +22,36 @@
 
 /* Size Variants */
 
+/* .avatar.xs {
+  @apply size-3;
+} */
+
 .avatar.sm {
-  @apply size-8;
+  @apply size-4;
 }
 
 .avatar.md {
-  @apply size-10;
+  @apply size-6;
 }
 
 .avatar.lg {
-  @apply size-12;
+  @apply size-8;
 }
 
 .avatar.xl {
-  @apply size-14;
+  @apply size-10;
 }
 
+/* .avatar.xs .avatar-fallback {
+  @apply text-[0.4rem];
+} */
+
 .avatar.sm .avatar-fallback {
-  @apply text-xs;
+  @apply text-[0.5rem];
+}
+
+.avatar.md .avatar-fallback {
+  @apply text-sm;
 }
 
 .avatar.lg .avatar-fallback {