@ceed/ads 1.35.1 → 1.37.0-next.1

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
@@ -346,7 +362,7 @@ function FeatureButton() {
 | `badgeContent` | `ReactNode`                                                      | -                                          | Content displayed inside the badge (number, text). Omit for dot badge |
 | `children`     | `ReactNode`                                                      | -                                          | The element the badge is attached to                                  |
 | `color`        | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'`   | `'danger'`                                 | Badge color                                                           |
-| `size`         | `'sm' \| 'md' \| 'lg'`                                           | `'md'`                                     | Badge size                                                            |
+| `size`         | `'sm' \| 'md' \| 'lg'`                                           | `'sm'`                                     | Badge size                                                            |
 | `variant`      | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                     | `'solid'`                                  | Visual style                                                          |
 | `max`          | `number`                                                         | `99`                                       | Maximum value before showing "N+"                                     |
 | `invisible`    | `boolean`                                                        | `false`                                    | Hides the badge                                                       |