@ceed/ads 1.35.1 → 1.37.0-next.1

package/dist/components/data-display/Avatar.md

@@ -52,8 +52,8 @@ An avatar that uses an image.
 
 ```tsx
 <Stack direction="row" spacing={2} alignItems="center">
-  <Avatar {...args} />
-</Stack>
+    <Avatar {...args} />
+  </Stack>
 ```
 
 ## Avatar With Text
@@ -62,8 +62,8 @@ An avatar that uses text or initials.
 
 ```tsx
 <Stack direction="row" spacing={2} alignItems="center">
-  <Avatar {...args} />
-</Stack>
+    <Avatar {...args} />
+  </Stack>
 ```
 
 ## Avatar Variants
@@ -72,8 +72,10 @@ You can apply various visual styles.
 
 ```tsx
 <Stack direction="row" spacing={2} alignItems="center">
-  {variants.map(variant => <Avatar key={variant} {...args} variant={variant} />)}
-</Stack>
+    {variants.map((variant) => (
+      <Avatar key={variant} {...args} variant={variant} />
+    ))}
+  </Stack>
 ```
 
 - **solid**: A style with a filled background color
@@ -87,10 +89,12 @@ You can use avatars in various sizes.
 
 ```tsx
 <Stack direction="row" spacing={2} alignItems="center">
-  {sizesWithXs.map(size => <Avatar key={size} {...args} size={size}>
-  {getSizeContent(size)}
-</Avatar>)}
-</Stack>
+    {sizesWithXs.map((size) => (
+      <Avatar key={size} {...args} size={size}>
+        {getSizeContent(size)}
+      </Avatar>
+    ))}
+  </Stack>
 ```
 
 - **xs**: Extra small size (16px)
@@ -104,8 +108,10 @@ You can apply various color themes.
 
 ```tsx
 <Stack direction="row" spacing={2} alignItems="center">
-  {colors.map(color => <Avatar key={color} {...args} color={color} />)}
-</Stack>
+    {colors.map((color) => (
+      <Avatar key={color} {...args} color={color} />
+    ))}
+  </Stack>
 ```
 
 - **primary**: Primary brand color
@@ -120,26 +126,32 @@ You can review all variant, size, and color combinations.
 
 ```tsx
 <Stack gap={8}>
-  {variants.map(variant => <Stack key={variant} gap={2}>
-  <Typography level="title-md">
-    {variant.slice(0, 1).toLocaleUpperCase()}
-    {variant.slice(1)} Variant
-  </Typography>
-  {colors.map(color => <Stack key={color} direction="row" gap={2} alignItems="center">
-  {sizesWithXs.map(size => <Stack key={size} alignItems="center" gap={1}>
-  <Avatar {...args} size={size} color={color} variant={variant}>
-    {getSizeContent(size)}
-  </Avatar>
-  <Typography level="body-sm">{size}</Typography>
-</Stack>)}
-{/* With image */}
-<Stack alignItems="center" gap={1}>
-  <Avatar {...args} size="md" color={color} variant={variant} />
-  <Typography level="body-sm">image</Typography>
-</Stack>
-</Stack>)}
-</Stack>)}
-</Stack>
+    {variants.map((variant) => (
+      <Stack key={variant} gap={2}>
+        <Typography level="title-md">
+          {variant.slice(0, 1).toLocaleUpperCase()}
+          {variant.slice(1)} Variant
+        </Typography>
+        {colors.map((color) => (
+          <Stack key={color} direction="row" gap={2} alignItems="center">
+            {sizesWithXs.map((size) => (
+              <Stack key={size} alignItems="center" gap={1}>
+                <Avatar {...args} size={size} color={color} variant={variant}>
+                  {getSizeContent(size)}
+                </Avatar>
+                <Typography level="body-sm">{size}</Typography>
+              </Stack>
+            ))}
+            {/* With image */}
+            <Stack alignItems="center" gap={1}>
+              <Avatar {...args} size="md" color={color} variant={variant} />
+              <Typography level="body-sm">image</Typography>
+            </Stack>
+          </Stack>
+        ))}
+      </Stack>
+    ))}
+  </Stack>
 ```
 
 ## Avatar User Profile
@@ -148,11 +160,7 @@ An example of using an avatar in a user profile.
 
 ```tsx
 <Stack direction="row" spacing={2} alignItems="center">
-  <Avatar
-    src="/user-profile.jpg"
-    alt="김철수"
-    size="lg"
-  />
+  <Avatar src="/user-profile.jpg" alt="김철수" size="lg" />
   <Stack>
     <Typography level="title-md">김철수</Typography>
     <Typography level="body-sm" color="neutral">
@@ -194,9 +202,7 @@ Used to represent a user in comments or feeds.
         2시간 전
       </Typography>
     </Stack>
-    <Typography level="body-md">
-      이것은 사용자의 댓글 내용입니다.
-    </Typography>
+    <Typography level="body-md">이것은 사용자의 댓글 내용입니다.</Typography>
   </Stack>
 </Stack>
 ```
@@ -211,13 +217,7 @@ Used to display a list of team members.
 
   {teamMembers.map((member) => (
     <Stack key={member.id} direction="row" spacing={2} alignItems="center">
-      <Avatar
-        src={member.avatar}
-        alt={member.name}
-        size="md"
-        variant="soft"
-        color="primary"
-      >
+      <Avatar src={member.avatar} alt={member.name} size="md" variant="soft" color="primary">
         {member.name.charAt(0)}
       </Avatar>
       <Stack flex={1}>
@@ -240,9 +240,15 @@ Used to display multiple users as a group.
 
 ```tsx
 <Stack direction="row" spacing={-1}>
-  <Avatar size="sm" variant="solid" color="primary">김</Avatar>
-  <Avatar size="sm" variant="solid" color="success">이</Avatar>
-  <Avatar size="sm" variant="solid" color="warning">박</Avatar>
+  <Avatar size="sm" variant="solid" color="primary">
+    김
+  </Avatar>
+  <Avatar size="sm" variant="solid" color="success">
+    이
+  </Avatar>
+  <Avatar size="sm" variant="solid" color="warning">
+    박
+  </Avatar>
   <Avatar size="sm" variant="outlined" color="neutral">
     <Typography level="body-xs">+3</Typography>
   </Avatar>
@@ -321,12 +327,7 @@ Used to represent users or items in list items.
 If image loading fails, it automatically falls back to initials or an icon.
 
 ```tsx
-<Avatar
-  src="/broken-image-url.jpg"
-  alt="김철수"
-  color="primary"
-  variant="soft"
->
+<Avatar src="/broken-image-url.jpg" alt="김철수" color="primary" variant="soft">
   김
 </Avatar>
 ```
@@ -336,12 +337,7 @@ If image loading fails, it automatically falls back to initials or an icon.
 While the image is loading, `children` are shown first, then the image is displayed once loading completes.
 
 ```tsx
-<Avatar
-  src="/slow-loading-image.jpg"
-  alt="사용자"
-  color="neutral"
-  variant="soft"
->
+<Avatar src="/slow-loading-image.jpg" alt="사용자" color="neutral" variant="soft">
   <PersonIcon />
 </Avatar>
 ```
@@ -356,7 +352,7 @@ While the image is loading, `children` are shown first, then the image is displa
 | `alt`        | `string`                                                       | -               | Alt text for the avatar image                   |
 | `children`   | `ReactNode`                                                    | -               | Fallback content (text, icon) when no image     |
 | `getInitial` | `(name: string) => string`                                     | First character | Custom function to extract initials from a name |
-| `size`       | `'sm' \| 'md' \| 'lg'`                                         | `'md'`          | Avatar size                                     |
+| `size`       | `'sm' \| 'md' \| 'lg'`                                         | `'sm'`          | Avatar size                                     |
 | `variant`    | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'soft'`        | Visual style                                    |
 | `color`      | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'`     | Color scheme                                    |
 | `sx`         | `SxProps`                                                      | -               | Custom styles using the MUI system              |
@@ -372,10 +368,7 @@ Avatar provides the following accessibility features:
 For image avatars, provide appropriate alt text.
 
 ```tsx
-<Avatar
-  src="/user-profile.jpg"
-  alt="김철수의 프로필 사진"
-/>
+<Avatar src="/user-profile.jpg" alt="김철수의 프로필 사진" />
 ```
 
 ### Semantic Meaning
@@ -383,12 +376,7 @@ For image avatars, provide appropriate alt text.
 If the avatar carries meaning rather than serving a purely decorative purpose, provide an appropriate role.
 
 ```tsx
-<Avatar
-  src="/user-avatar.jpg"
-  alt="현재 사용자"
-  role="img"
-  aria-label="현재 로그인한 사용자의 프로필 이미지"
-/>
+<Avatar src="/user-avatar.jpg" alt="현재 사용자" role="img" aria-label="현재 로그인한 사용자의 프로필 이미지" />
 ```
 
 ### Color Contrast