@ceed/ads 1.35.1 → 1.36.0

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

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

@@ -8,10 +8,10 @@ Badge supports multiple colors, variants, and sizes for flexible visual customiz
 
 ```tsx
 <Badge {...args}>
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
+    <IconButton>
+      <NotificationsIcon />
+    </IconButton>
+  </Badge>
 ```
 
 | Field        | Description         | Default   |
@@ -46,28 +46,30 @@ function MyComponent() {
 Basic Badge usage showing numeric counts, max overflow, and text content.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<Badge badgeContent={4}>
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={100} max={99}>
-  <IconButton>
-    <EmailIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent="NEW">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <Badge badgeContent={4}>
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={100} max={99}>
+      <IconButton>
+        <EmailIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent="NEW">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+  </div>
 ```
 
 ## Colors
@@ -75,40 +77,42 @@ Basic Badge usage showing numeric counts, max overflow, and text content.
 Apply semantic colors to convey the badge's meaning: `primary` for general counts, `danger` for urgent notifications, `success` for online status, and `warning` for attention items.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<Badge badgeContent={4} color="primary">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} color="neutral">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} color="danger">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} color="success">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} color="warning">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <Badge badgeContent={4} color="primary">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} color="neutral">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} color="danger">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} color="success">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} color="warning">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+  </div>
 ```
 
 ## Variants
@@ -116,34 +120,36 @@ Apply semantic colors to convey the badge's meaning: `primary` for general count
 Four style variants are available: `solid` (filled), `soft` (subtle background), `outlined` (border only), and `plain` (minimal).
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<Badge badgeContent={4} variant="solid">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} variant="soft">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} variant="outlined">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} variant="plain">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <Badge badgeContent={4} variant="solid">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} variant="soft">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} variant="outlined">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} variant="plain">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+  </div>
 ```
 
 ## Sizes
@@ -151,29 +157,31 @@ Four style variants are available: `solid` (filled), `soft` (subtle background),
 Three sizes -- `sm`, `md`, and `lg` -- allow the badge to scale proportionally with its wrapped element.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem',
-  alignItems: 'center'
-}}>
-<Badge badgeContent={4} size="sm">
-  <IconButton size="sm">
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} size="md">
-  <IconButton size="md">
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={4} size="lg">
-  <IconButton size="lg">
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem",
+      alignItems: "center"
+    }}
+  >
+    <Badge badgeContent={4} size="sm">
+      <IconButton size="sm">
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} size="md">
+      <IconButton size="md">
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={4} size="lg">
+      <IconButton size="lg">
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+  </div>
 ```
 
 ## With Avatar
@@ -181,18 +189,20 @@ Three sizes -- `sm`, `md`, and `lg` -- allow the badge to scale proportionally w
 Badge pairs naturally with Avatar to indicate user status (e.g., notification count or online indicator).
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<Badge badgeContent={4} color="danger">
-  <Avatar src="https://i.pravatar.cc/40?img=1" />
-</Badge>
-
-<Badge badgeContent="●" color="success">
-  <Avatar src="https://i.pravatar.cc/40?img=2" />
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <Badge badgeContent={4} color="danger">
+      <Avatar src="https://i.pravatar.cc/40?img=1" />
+    </Badge>
+
+    <Badge badgeContent="●" color="success">
+      <Avatar src="https://i.pravatar.cc/40?img=2" />
+    </Badge>
+  </div>
 ```
 
 ## Dot Badge
@@ -200,20 +210,22 @@ Badge pairs naturally with Avatar to indicate user status (e.g., notification co
 When no `badgeContent` is provided, Badge renders as a small dot. This is useful for simple presence or status indicators without a specific count.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<Badge variant="solid" color="danger">
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge variant="solid" color="success">
-  <Avatar src="https://i.pravatar.cc/40?img=3" />
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <Badge variant="solid" color="danger">
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge variant="solid" color="success">
+      <Avatar src="https://i.pravatar.cc/40?img=3" />
+    </Badge>
+  </div>
 ```
 
 ## Max Count
@@ -221,28 +233,30 @@ When no `badgeContent` is provided, Badge renders as a small dot. This is useful
 Use the `max` prop to cap the displayed number. When `badgeContent` exceeds `max`, it renders as "max+" (e.g., "99+").
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<Badge badgeContent={99}>
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={100} max={99}>
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-
-<Badge badgeContent={1000} max={999}>
-  <IconButton>
-    <NotificationsIcon />
-  </IconButton>
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <Badge badgeContent={99}>
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={100} max={99}>
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+
+    <Badge badgeContent={1000} max={999}>
+      <IconButton>
+        <NotificationsIcon />
+      </IconButton>
+    </Badge>
+  </div>
 ```
 
 ## Show Zero
@@ -250,28 +264,30 @@ Use the `max` prop to cap the displayed number. When `badgeContent` exceeds `max
 By default, Badge hides when `badgeContent` is `0`. Use the `showZero` prop to force it to remain visible.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem'
-}}>
-<div>
-  <p>Default (0 숨김)</p>
-  <Badge badgeContent={0}>
-    <IconButton>
-      <NotificationsIcon />
-    </IconButton>
-  </Badge>
-</div>
-
-<div>
-  <p>Show zero</p>
-  <Badge badgeContent={0} showZero>
-    <IconButton>
-      <NotificationsIcon />
-    </IconButton>
-  </Badge>
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem"
+    }}
+  >
+    <div>
+      <p>Default (0 숨김)</p>
+      <Badge badgeContent={0}>
+        <IconButton>
+          <NotificationsIcon />
+        </IconButton>
+      </Badge>
+    </div>
+
+    <div>
+      <p>Show zero</p>
+      <Badge badgeContent={0} showZero>
+        <IconButton>
+          <NotificationsIcon />
+        </IconButton>
+      </Badge>
+    </div>
+  </div>
 ```
 
 ## Badge Notification Bell