@rio-cloud/uikit-mcp 1.1.4 → 1.1.6

package/dist/docs/components/autosuggests.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Selection
-*Source:* https://uikit.developers.rio.cloud/#components/autosuggests
-*Captured:* 2026-01-14T09:07:13.911Z
+*Source:* https://uikit.developers.rio.cloud/#/components/autosuggests
+*Captured:* 2026-02-23T13:41:52.196Z
 
 For a more flexible and smart search we highly recommend using fuse.js as searching algorithm.For more information on how to configure it, see: https://fusejs.io
 

package/dist/docs/components/avatar.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Misc
-*Source:* https://uikit.developers.rio.cloud/#components/avatar
-*Captured:* 2026-01-14T09:07:41.713Z
+*Source:* https://uikit.developers.rio.cloud/#/components/avatar
+*Captured:* 2026-02-23T13:42:21.816Z
 
 The Avatar is a small component designed to render a users image, the initials of the users name or an icon.
 
@@ -83,6 +83,21 @@ export default () => (
 </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 set to the icon element. |
+| className | string | — | Additional classes set to the wrapper element. |
+
 ## AvatarGroup
 
 ### Example: Example 2
@@ -181,4 +196,11 @@ export default () => (
         </div>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| maxItemsVisible | number | — | Maximum number of items to be shown. Items that overflow are grouped into a single Avatar that displays the overflow count. Collapsed names are shown inside a tooltip. By default all items are shown. |
+| className | string | — | Additional classes set to the outer element. |

package/dist/docs/components/banner.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#components/banner
-*Captured:* 2026-01-14T09:07:27.629Z
+*Source:* https://uikit.developers.rio.cloud/#/components/banner
+*Captured:* 2026-02-23T13:42:08.529Z
 
 Convey information or prompt action through in-line banners, ideal for educational content, updates, or announcements.
 
@@ -76,7 +76,7 @@ export default () => {
         <div style="position: relative;">
             <div class="bg-white rounded border shadow-default padding-20 Banner display-flex text-color-darker overflow-hidden position-relative">
                 <div class="flex-1-1 overflow-hidden">
-                    <div style="opacity: 0; transform: translateX(14.6446px);">
+                    <div style="opacity: 0; transform: translateX(21.9553px);">
                         <div class="display-flex align-items-start align-items-center-ls width-100pct gap-15 ">
                             <div class="BannerIcon flex-0 margin-x-5 min-width-25 ">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="80" height="60" viewBox="0 0 773 612" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/">

package/dist/docs/components/barCharts.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Charts
-*Source:* https://uikit.developers.rio.cloud/#components/barCharts
-*Captured:* 2026-01-14T09:08:25.078Z
+*Source:* https://uikit.developers.rio.cloud/#/components/barCharts
+*Captured:* 2026-02-23T13:43:00.102Z
 
 ## BarChart
 
@@ -13,13 +13,13 @@
 
 Simple horizontal BarChart
 
-MarchJune
+JanuaryFebruaryMarchAprilMayJune
 
 #### Summary
 
 Simple horizontal BarChart
 
-MarchJune
+JanuaryFebruaryMarchAprilMayJune
 
 #### React (tsx)
 
@@ -120,37 +120,37 @@ const data = [
                     <g tabindex="-1">
                     </g>
                     <g tabindex="-1">
-                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r1:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r0:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="undefined" x="7.8" y="58.7212" width="62" height="164.2788" class="recharts-rectangle" d="M7.8,61.7212A 3,3,0,0,1,10.8,58.7212L 66.8,58.7212A 3,3,0,0,1,
-        69.8,61.7212L 69.8,223L 7.8,223Z">
+                                        <path fill="#30b4c0 " name="undefined" x="7.8" y="50.6704" width="62" height="172.3296" class="recharts-rectangle" d="M7.8,53.6704A 3,3,0,0,1,10.8,50.6704L 66.8,50.6704A 3,3,0,0,1,
+        69.8,53.6704L 69.8,223L 7.8,223Z">
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="undefined" x="85.8" y="145.7749" width="62" height="77.2251" class="recharts-rectangle" d="M85.8,148.7749A 3,3,0,0,1,88.8,145.7749L 144.8,145.7749A 3,3,0,0,1,
-        147.8,148.7749L 147.8,223L 85.8,223Z">
+                                        <path fill="#30b4c0 " name="undefined" x="85.8" y="141.9904" width="62" height="81.0096" class="recharts-rectangle" d="M85.8,144.9904A 3,3,0,0,1,88.8,141.9904L 144.8,141.9904A 3,3,0,0,1,
+        147.8,144.9904L 147.8,223L 85.8,223Z">
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="undefined" x="163.8" y="179.4731" width="62" height="43.5269" class="recharts-rectangle" d="M163.8,182.4731A 3,3,0,0,1,166.8,179.4731L 222.8,179.4731A 3,3,0,0,1,
-        225.8,182.4731L 225.8,223L 163.8,223Z">
+                                        <path fill="#30b4c0 " name="undefined" x="163.8" y="177.34" width="62" height="45.66" class="recharts-rectangle" d="M163.8,180.34A 3,3,0,0,1,166.8,177.34L 222.8,177.34A 3,3,0,0,1,
+        225.8,180.34L 225.8,223L 163.8,223Z">
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="undefined" x="241.8" y="209.3803" width="62" height="13.6197" class="recharts-rectangle" d="M241.8,212.3803A 3,3,0,0,1,244.8,209.3803L 300.8,209.3803A 3,3,0,0,1,
-        303.8,212.3803L 303.8,223L 241.8,223Z">
+                                        <path fill="#30b4c0 " name="undefined" x="241.8" y="208.7128" width="62" height="14.2872" class="recharts-rectangle" d="M241.8,211.7128A 3,3,0,0,1,244.8,208.7128L 300.8,208.7128A 3,3,0,0,1,
+        303.8,211.7128L 303.8,223L 241.8,223Z">
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="undefined" x="319.8" y="211.662" width="62" height="11.338" class="recharts-rectangle" d="M319.8,214.662A 3,3,0,0,1,322.8,211.662L 378.8,211.662A 3,3,0,0,1,
-        381.8,214.662L 381.8,223L 319.8,223Z">
+                                        <path fill="#30b4c0 " name="undefined" x="319.8" y="211.1063" width="62" height="11.8937" class="recharts-rectangle" d="M319.8,214.1063A 3,3,0,0,1,322.8,211.1063L 378.8,211.1063A 3,3,0,0,1,
+        381.8,214.1063L 381.8,223L 319.8,223Z">
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="undefined" x="397.8" y="206.6072" width="62" height="16.3928" class="recharts-rectangle" d="M397.8,209.6072A 3,3,0,0,1,400.8,206.6072L 456.8,206.6072A 3,3,0,0,1,
-        459.8,209.6072L 459.8,223L 397.8,223Z">
+                                        <path fill="#30b4c0 " name="undefined" x="397.8" y="205.8039" width="62" height="17.1961" class="recharts-rectangle" d="M397.8,208.8039A 3,3,0,0,1,400.8,205.8039L 456.8,205.8039A 3,3,0,0,1,
+        459.8,208.8039L 459.8,223L 397.8,223Z">
                                         </path>
                                     </g>
                                 </g>
@@ -296,13 +296,13 @@ const data = [
 
 Horizontal BarChart
 
-JuneTimerange15 €60 €Costs
+JanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €Costs
 
 #### Summary
 
 Horizontal BarChart
 
-JuneTimerange15 €60 €Costs
+JanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €Costs
 
 #### React (tsx)
 
@@ -430,7 +430,7 @@ const data = [
                     <g tabindex="-1">
                     </g>
                     <g tabindex="-1">
-                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r2:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r1:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
@@ -670,7 +670,7 @@ Multiple Bars BarChart
 pv
 uv
 
-Page G250010000
+Page APage BPage CPage DPage EPage FPage G025005000750010000
 
 #### Summary
 
@@ -679,7 +679,7 @@ Multiple Bars BarChart
 pv
 uv
 
-Page G250010000
+Page APage BPage CPage DPage EPage FPage G025005000750010000
 
 #### React (tsx)
 
@@ -815,7 +815,7 @@ const data: CustomData[] = [
                     <g tabindex="-1">
                     </g>
                     <g tabindex="-1">
-                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r3:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r2:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
@@ -849,7 +849,7 @@ const data: CustomData[] = [
                                 </g>
                             </g>
                         </g>
-                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r4:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r3:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
@@ -1090,7 +1090,7 @@ Stacked BarChart
 pv
 uv
 
-Page G300012000
+Page APage BPage CPage DPage EPage FPage G030006000900012000
 
 #### Summary
 
@@ -1099,7 +1099,7 @@ Stacked BarChart
 pv
 uv
 
-Page G300012000
+Page APage BPage CPage DPage EPage FPage G030006000900012000
 
 #### React (tsx)
 
@@ -1244,7 +1244,7 @@ const data = [
                     <g tabindex="-1">
                     </g>
                     <g tabindex="-1">
-                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r5:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r4:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
@@ -1278,7 +1278,7 @@ const data = [
                                 </g>
                             </g>
                         </g>
-                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r6:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r5:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
@@ -1521,7 +1521,7 @@ Diesel
 Maut
 Zuschläge
 
-60DieselZuschläge
+015304560BasistarifDieselMautZuschläge
 
 #### Summary
 
@@ -1532,7 +1532,7 @@ Diesel
 Maut
 Zuschläge
 
-60DieselZuschläge
+015304560BasistarifDieselMautZuschläge
 
 #### React (tsx)
 
@@ -1690,7 +1690,7 @@ const data: CustomData[] = [
                     <g tabindex="-1">
                     </g>
                     <g tabindex="-1">
-                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r7:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r6:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
@@ -1895,7 +1895,7 @@ BarChart with custom Tooltips
 pv
 uv
 
-Truck G300012000
+Truck ATruck BTruck CTruck DTruck ETruck FTruck G030006000900012000
 
 #### Summary
 
@@ -1903,7 +1903,7 @@ BarChart with custom Tooltips
 pv
 uv
 
-Truck G300012000
+Truck ATruck BTruck CTruck DTruck ETruck FTruck G030006000900012000
 
 #### React (tsx)
 
@@ -2082,7 +2082,7 @@ const data = [
                     <g tabindex="-1">
                     </g>
                     <g tabindex="-1">
-                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r8:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r7:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
@@ -2116,7 +2116,7 @@ const data = [
                                 </g>
                             </g>
                         </g>
-                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r9:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r8:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
@@ -2354,13 +2354,13 @@ const data = [
 
 Multiple axis BarChart
 
-JuneTimerange60 €CostsQ1Q2
+JanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €CostsQ1Q1Q1Q2Q2Q2
 
 #### Summary
 
 Multiple axis BarChart
 
-JuneTimerange60 €CostsQ1Q2
+JanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €CostsQ1Q1Q1Q2Q2Q2
 
 #### React (tsx)
 
@@ -2473,7 +2473,7 @@ const data = [
                     <g tabindex="-1">
                     </g>
                     <g tabindex="-1">
-                        <g class="recharts-layer recharts-bar" id="recharts-bar-:ra:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r9:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">

package/dist/docs/components/barList.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Progress
-*Source:* https://uikit.developers.rio.cloud/#components/barList
-*Captured:* 2026-01-14T09:07:21.931Z
+*Source:* https://uikit.developers.rio.cloud/#/components/barList
+*Captured:* 2026-02-23T13:42:01.308Z
 
 ## BarList
 
@@ -180,21 +180,21 @@ const transportData = [
             <div class="display-flex justify-content-between gap-15">
                 <div class="width-100pct space-y-5">
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 49.3329%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 47.3138%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 31.3084%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 29.2907%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <div class="text-color-darker">Warehouse efficiency</div>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 15.0623%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 12.9896%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
@@ -239,21 +239,21 @@ const transportData = [
             <div class="display-flex justify-content-between gap-15 flex-row-reverse gap-10">
                 <div class="width-100pct space-y-5">
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 49.3329%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 47.3138%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 31.3084%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 29.2907%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <div class="text-color-darker">Warehouse efficiency</div>
                         </div>
                     </div>
                     <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
-                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 15.0623%;">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 12.9896%;">
                         </div>
                         <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                             <a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
@@ -307,6 +307,12 @@ const transportData = [
 </div>
 ```
 
+#### Props (json)
+
+```json
+valueFormatter={(value) => `${value}%`}
+```
+
 ### Example: 95
 
 Damaged packages
@@ -437,14 +443,14 @@ const transportData = [
                 </div>
             </div>
             <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
-                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 49.301%;">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 48.3163%;">
                 </div>
                 <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                     <div class="text-color-darker">Stored in warehouse</div>
                 </div>
             </div>
             <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
-                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 95.8777%;">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 91.3224%;">
                 </div>
                 <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                     <div class="text-color-darker">Shipped packages</div>
@@ -480,4 +486,10 @@ const transportData = [
         </div>
     </div>
 </div>
+```
+
+#### Props (json)
+
+```json
+valueFormatter={(value) => `${value}%`}
 ```

package/dist/docs/components/basicMap.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Map
-*Source:* https://uikit.developers.rio.cloud/#components/basicMap
-*Captured:* 2026-01-14T09:08:11.843Z
+*Source:* https://uikit.developers.rio.cloud/#/components/basicMap
+*Captured:* 2026-02-23T13:42:45.274Z
 
 The following map shows labels for locale de
 

package/dist/docs/components/bottomSheet.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Application
-*Source:* https://uikit.developers.rio.cloud/#components/bottomSheet
-*Captured:* 2026-01-14T09:06:55.178Z
+*Source:* https://uikit.developers.rio.cloud/#/components/bottomSheet
+*Captured:* 2026-02-23T13:41:33.424Z
 
 The TimedBottomSheet is a wrapper component for the BottomSheet that allows to control it's visibility via timers and to use the localStorage to save user interaction for handling it's visibility.
 
@@ -76,6 +76,26 @@ const content = (
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |
+| onClose | (isShown: boolean) => void | — | Callback for when the sheet closes. |
+| width | number \| string | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a max-width-xxx via className to control it better. |
+| height | number \| string | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |
+| title | string \| ReactNode | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |
+| showCloseButton | boolean | true | Defines whether or not the close button is shown. |
+| showMaximizeButton | boolean | false | Defines whether or not the maximize button in the header is shown. |
+| onHeightChange | VoidFunction | () => {} | The callback function triggered when the maximize button is clicked and the height changes. |
+| detach | boolean | false | Set to true to detach the bottom sheet from the left side and the bottom and create a little offset. |
+| detachOffset | number | 15 | Defines the amount of pixels for the sheet. |
+| hasBackdrop | boolean | false | Set to true to render a modal like backdrop to emphasize the bottom sheet. |
+| onBackdropClick | VoidFunction | () => {} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |
+| bodyRef | MutableRefObject<HTMLDivElement \| null> | — | A react ref added to the bottom sheet body. |
+| bodyClassName | string | — | Additional classes to be set on the body element. |
+| className | string | — | Additional classes to be set on the wrapping element. |
+
 ### Example: Example 2
 
 This demonstrates a bottom sheet use case on mobile. This can be used for providing additional information on mobile instead of using a sidebar, onboarding, alternative for dialogs etc.
@@ -199,6 +219,26 @@ export default () => {
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |
+| onClose | (isShown: boolean) => void | — | Callback for when the sheet closes. |
+| width | number \| string | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a max-width-xxx via className to control it better. |
+| height | number \| string | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |
+| title | string \| ReactNode | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |
+| showCloseButton | boolean | true | Defines whether or not the close button is shown. |
+| showMaximizeButton | boolean | false | Defines whether or not the maximize button in the header is shown. |
+| onHeightChange | VoidFunction | () => {} | The callback function triggered when the maximize button is clicked and the height changes. |
+| detach | boolean | false | Set to true to detach the bottom sheet from the left side and the bottom and create a little offset. |
+| detachOffset | number | 15 | Defines the amount of pixels for the sheet. |
+| hasBackdrop | boolean | false | Set to true to render a modal like backdrop to emphasize the bottom sheet. |
+| onBackdropClick | VoidFunction | () => {} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |
+| bodyRef | MutableRefObject<HTMLDivElement \| null> | — | A react ref added to the bottom sheet body. |
+| bodyClassName | string | — | Additional classes to be set on the body element. |
+| className | string | — | Additional classes to be set on the wrapping element. |
+
 ### Example: Example 3
 
 This demonstrates a bottom sheet use case on mobile. It demonstrates a bottom sheet for smartphones to perform an action.
@@ -296,6 +336,26 @@ export default () => {
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |
+| onClose | (isShown: boolean) => void | — | Callback for when the sheet closes. |
+| width | number \| string | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a max-width-xxx via className to control it better. |
+| height | number \| string | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |
+| title | string \| ReactNode | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |
+| showCloseButton | boolean | true | Defines whether or not the close button is shown. |
+| showMaximizeButton | boolean | false | Defines whether or not the maximize button in the header is shown. |
+| onHeightChange | VoidFunction | () => {} | The callback function triggered when the maximize button is clicked and the height changes. |
+| detach | boolean | false | Set to true to detach the bottom sheet from the left side and the bottom and create a little offset. |
+| detachOffset | number | 15 | Defines the amount of pixels for the sheet. |
+| hasBackdrop | boolean | false | Set to true to render a modal like backdrop to emphasize the bottom sheet. |
+| onBackdropClick | VoidFunction | () => {} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |
+| bodyRef | MutableRefObject<HTMLDivElement \| null> | — | A react ref added to the bottom sheet body. |
+| bodyClassName | string | — | Additional classes to be set on the body element. |
+| className | string | — | Additional classes to be set on the wrapping element. |
+
 ### Example: Example 4
 
 This demonstrates a bottom sheet use case on mobile. It demonstrates a bottom sheet for an example of how you could do onboarding on smartphones.
@@ -380,6 +440,26 @@ export default () => {
 </div>
 ```
 
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | boolean | false | Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen. |
+| onClose | (isShown: boolean) => void | — | Callback for when the sheet closes. |
+| width | number \| string | — | The width of the bottom sheet. This is useful for desktop when not using the entire screen width. When no width is given it will take the width of the content and maximum 100% of the screen. So it this case you might want to apply a max-width-xxx via className to control it better. |
+| height | number \| string | — | The height of the bottom sheet. If no height is given, the height is automatically calculated from the content. |
+| title | string \| ReactNode | — | The title content shown in the header. If no title is given, the bottom sheet header is not shown. |
+| showCloseButton | boolean | true | Defines whether or not the close button is shown. |
+| showMaximizeButton | boolean | false | Defines whether or not the maximize button in the header is shown. |
+| onHeightChange | VoidFunction | () => {} | The callback function triggered when the maximize button is clicked and the height changes. |
+| detach | boolean | false | Set to true to detach the bottom sheet from the left side and the bottom and create a little offset. |
+| detachOffset | number | 15 | Defines the amount of pixels for the sheet. |
+| hasBackdrop | boolean | false | Set to true to render a modal like backdrop to emphasize the bottom sheet. |
+| onBackdropClick | VoidFunction | () => {} | Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet. |
+| bodyRef | MutableRefObject<HTMLDivElement \| null> | — | A react ref added to the bottom sheet body. |
+| bodyClassName | string | — | Additional classes to be set on the body element. |
+| className | string | — | Additional classes to be set on the wrapping element. |
+
 ## TimedBottomSheet
 
 ### Example: Example 5
@@ -621,4 +701,21 @@ export default () => {
 ```html
 <p>Showcase of a timed bottom sheet used for requesting feedback from the user after a major feature was released or updated.</p>
 <button type="button" class="btn btn-primary btn-component" tabindex="0">Trigger timed bottom sheet</button>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| dismissed | boolean | false | The dismissed flag can be used to tell this component that the user has clicked on the content of the component like a button or a link. In this case, the bottom sheet will store a flag in the localStorage to hide the bottom sheet for the next time and it will close the sheet right away. |
+| featureName | string | — | The featureName prop is used to name the localStorage flag that is used to control the visibility. It should be unique to avoid conflicts with other timed bottom sheets. |
+| showAfter | number | 0 | Defines the time in milliseconds when the bottom sheet shall be shown. Default value is 0 to show it right away. |
+| hideAfter | number | 3_600_000 | Defines the time in milliseconds when the bottom sheet hides itself automatically. Default value is 3_600_000 to hide it after 1 hour. In this case, the localStorage flag is not set and the bottom sheet will be shown on the next page load. |
+| alwaysOn | boolean | false | With this enabled, the BottomSheet will not hide automatically. |
+| showCloseButton | boolean | true | Enables or disabled the close button. |
+| width | number | — | Optional width of the bottom sheet. Alternatively, you can set a max-width-xxx via className instead. |
+| cleanupLocalStorage | boolean | false | Flag to allow to remove the localStorage flag again once the component is not needed anymore. |
+| localStoragePrefix | string | — | A prefix that will be used for the local storage flag to store whether the bottom sheet should be hidden. Use this prefix for your service name for instance. |
+| onClose | () => void | () => {} | Callback function that gets triggered when the user closed the bottom sheet with the close button. |
+| bodyClassName | string | 'padding-25 margin-right-25' | Optional className to be set on the body. |
+| className | string | — | Optional className to be set on the component. Use this to define a max-width value. |