@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/avatar.md

@@ -0,0 +1,206 @@
+# Avatar
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/avatar
+*Captured:* 2025-12-12T14:20:53.646Z
+
+The Avatar is a small component designed to render a users image, the initials of the users name or an icon.
+
+## Avatar
+
+### Example: Example 1
+
+JD
+AAK
+AK
+
+#### Summary
+
+JD
+AAK
+AK
+
+#### React (tsx)
+
+```tsx
+import Avatar from '@rio-cloud/rio-uikit/Avatar';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+
+export default () => (
+    <div className='max-width-600 padding-20 display-flex gap-25'>
+        <Avatar />
+        <Avatar name='John Doe' />
+        <Avatar name='Augusta Ada King' />
+        <Avatar name='Augusta Ada King' abbr='AK' />
+        <Avatar image='https://randomuser.me/api/portraits/women/47.jpg' />
+        <Avatar image='https://randomuser.me/api/portraits/women/44.jpg' alt='Kylie Cunningham' />
+
+        <Divider vertical />
+
+        <Avatar iconName='heart' className='cursor-pointer' onClick={() => Notification.info('Avatar clicked')} />
+        <Avatar backgroundColor='bg-white' className='border' />
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-600 padding-20 display-flex gap-25">
+    <div class="Avatar bg-lighter" style="height: 40px;">
+        <span class="Avatar-icon rioglyph rioglyph-user ">
+        </span>
+    </div>
+    <div class="Avatar bg-lighter" style="height: 40px;">
+        <span class="Avatar-initials">JD</span>
+    </div>
+    <div class="Avatar bg-lighter" style="height: 40px;">
+        <span class="Avatar-initials" style="letter-spacing: -0.2px;">AAK</span>
+    </div>
+    <div class="Avatar bg-lighter" style="height: 40px;">
+        <span class="Avatar-initials">AK</span>
+    </div>
+    <div class="Avatar bg-lighter" style="height: 40px;">
+        <img src="https://randomuser.me/api/portraits/women/47.jpg" alt="avatar" class="Avatar-image" draggable="false">
+    </div>
+    <div class="Avatar bg-lighter" style="height: 40px;">
+        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Kylie Cunningham" class="Avatar-image" draggable="false">
+    </div>
+    <div class="Divider position-relative" style="padding-left: 15px; padding-right: 15px;">
+        <div class="divider-line bg-light" style="width: 1px; height: 100%;">
+        </div>
+    </div>
+    <div class="Avatar bg-lighter cursor-pointer" style="height: 40px;">
+        <span class="Avatar-icon rioglyph rioglyph-heart ">
+        </span>
+    </div>
+    <div class="Avatar bg-white border" style="height: 40px;">
+        <span class="Avatar-icon rioglyph rioglyph-user ">
+        </span>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | string | — | When a name is provided, the Avatar automatically generates and displays the initials of that name. The name also appears in a tooltip when hovered over. |
+| abbr | string | — | The abbreviation can also be defined manually. It is recommended to limit abbreviations to a maximum of 2 to 3 characters. |
+| image | string | — | The image to be shown. When an image is displayed, the abbreviation is not shown. |
+| alt | string | — | The image alt text. If not given, the name will be used. |
+| iconName | string | user | The name of an icon that should be shown instead of initials. If nothing is provided, a default icon will be shown. |
+| size | number | 40 | The height and width of the component. |
+| backgroundColor | string | bg-lighter | The background color for the component. By default, the text and icon color is derived from the background color. |
+| tooltip | string \| JSX.Element | — | The content of the Avatars tooltip. if nothing is provided, the name is used. |
+| iconClassName | string | — | Additional classes to be set on the icon element. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+
+## AvatarGroup
+
+### Example: Example 2
+
+JD
+AAK
+AK
++2
+
++2
+
+#### Summary
+
+JD
+AAK
+AK
++2
+
++2
+
+#### React (tsx)
+
+```tsx
+import Avatar from '@rio-cloud/rio-uikit/Avatar';
+import AvatarGroup from '@rio-cloud/rio-uikit/AvatarGroup';
+
+export default () => (
+    <div className='max-width-600 padding-20 display-flex flex-column gap-25'>
+        <AvatarGroup maxItemsVisible={5}>
+            <Avatar />
+            <Avatar name='John Doe' />
+            <Avatar name='Augusta Ada King' />
+            <Avatar name='Augusta Ada King' abbr='AK' />
+            <Avatar name='Foo Bar' />
+            <Avatar name='Lorem Ipsum' />
+        </AvatarGroup>
+
+        <AvatarGroup maxItemsVisible={3}>
+            <Avatar image='https://randomuser.me/api/portraits/women/47.jpg' name='Wendy Miller' />
+            <Avatar image='https://randomuser.me/api/portraits/women/44.jpg' name='Kylie Cunningham' />
+        </AvatarGroup>
+
+        <AvatarGroup maxItemsVisible={4}>
+            <Avatar image='https://randomuser.me/api/portraits/women/47.jpg' name='Wendy Miller' />
+            <Avatar image='https://randomuser.me/api/portraits/women/44.jpg' name='Kylie Cunningham' />
+            <Avatar image='https://randomuser.me/api/portraits/women/43.jpg' name='Nina Reynolds' />
+            <Avatar image='https://randomuser.me/api/portraits/women/42.jpg' name='Sue Hopkins' />
+            <Avatar image='https://randomuser.me/api/portraits/women/41.jpg' name='Alma Snyder' />
+        </AvatarGroup>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-600 padding-20 display-flex flex-column gap-25">
+    <div class="AvatarGroup">
+        <div class="Avatar bg-lighter" style="height: 40px;">
+            <span class="Avatar-icon rioglyph rioglyph-user ">
+            </span>
+        </div>
+        <div class="Avatar bg-lighter" style="height: 40px;">
+            <span class="Avatar-initials">JD</span>
+        </div>
+        <div class="Avatar bg-lighter" style="height: 40px;">
+            <span class="Avatar-initials" style="letter-spacing: -0.2px;">AAK</span>
+        </div>
+        <div class="Avatar bg-lighter" style="height: 40px;">
+            <span class="Avatar-initials">AK</span>
+        </div>
+        <div class="Avatar bg-lighter" style="height: 40px;">
+            <span class="Avatar-initials">+2</span>
+        </div>
+    </div>
+    <div class="AvatarGroup">
+        <div class="Avatar bg-lighter" style="height: 40px;">
+            <img src="https://randomuser.me/api/portraits/women/47.jpg" alt="Wendy Miller" class="Avatar-image" draggable="false">
+        </div>
+        <div class="Avatar bg-lighter" style="height: 40px;">
+            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Kylie Cunningham" class="Avatar-image" draggable="false">
+        </div>
+    </div>
+    <div class="AvatarGroup">
+        <div class="Avatar bg-lighter" style="height: 40px;">
+            <img src="https://randomuser.me/api/portraits/women/47.jpg" alt="Wendy Miller" class="Avatar-image" draggable="false">
+        </div>
+        <div class="Avatar bg-lighter" style="height: 40px;">
+            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Kylie Cunningham" class="Avatar-image" draggable="false">
+        </div>
+        <div class="Avatar bg-lighter" style="height: 40px;">
+            <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Nina Reynolds" class="Avatar-image" draggable="false">
+        </div>
+        <div class="Avatar bg-lighter" style="height: 40px;">
+            <span class="Avatar-initials">+2</span>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| maxItemsVisible | number | — | Maximum number of items to be shown. Items that overflow are grouped into a singleAvatar that displays the overflow count. Collapsed names are shown inside a tooltip. By default all items are shown. |
+| className | string | — | Additional classes to be set on the wrapper element. |