@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/activity.md

@@ -0,0 +1,330 @@
+# Activity
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/activity
+*Captured:* 2025-12-12T14:20:51.495Z
+
+## Activity
+
+### Example: Example 1
+
+Small size:0:24 h
+0:24 h
+0:24 h
+0:24 h
+13
+Default size:0:24 h
+0:24 h
+0:24 h
+0:24 h
+
+Default size without duration:
+
+Outdated activities:0:24 h
+0:24 h
+0:24 h
+0:24 h
+
+Large size:0:24 h
+0:24 h
+0:24 h
+0:24 h
+
+Extra large size:0:24 h
+0:24 h
+0:24 h
+0:24 h
+
+#### Summary
+
+Small size:0:24 h
+0:24 h
+0:24 h
+0:24 h
+13
+Default size:0:24 h
+0:24 h
+0:24 h
+0:24 h
+
+Default size without duration:
+
+Outdated activities:0:24 h
+0:24 h
+0:24 h
+0:24 h
+
+Large size:0:24 h
+0:24 h
+0:24 h
+0:24 h
+
+Extra large size:0:24 h
+0:24 h
+0:24 h
+0:24 h
+
+#### React (tsx)
+
+```tsx
+import Activity from '@rio-cloud/rio-uikit/Activity';
+
+const duration = '0:24 h';
+
+export default () => (
+    <div>
+        <label>Small size:</label>
+        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>
+            <Activity activity={Activity.AVAILABLE} duration={duration} bsSize={Activity.SIZE_SM} />
+            <Activity activity={Activity.DRIVING} duration={duration} bsSize={Activity.SIZE_SM} />
+            <Activity activity={Activity.RESTING} duration={duration} bsSize={Activity.SIZE_SM} />
+            <Activity activity={Activity.WORKING} duration={duration} bsSize={Activity.SIZE_SM} />
+            <span className='badge padding-y-4 badge-danger'>1</span>
+            <span className='badge padding-y-4 badge-warning'>3</span>
+        </div>
+
+        <label>Default size:</label>
+        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>
+            <Activity activity={Activity.AVAILABLE} duration={duration} />
+            <Activity activity={Activity.DRIVING} duration={duration} />
+            <Activity activity={Activity.RESTING} duration={duration} />
+            <Activity activity={Activity.WORKING} duration={duration} />
+        </div>
+
+        <label>Default size without duration:</label>
+        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>
+            <Activity activity={Activity.AVAILABLE} />
+            <Activity activity={Activity.DRIVING} />
+            <Activity activity={Activity.RESTING} />
+            <Activity activity={Activity.WORKING} />
+        </div>
+
+        <label>Outdated activities:</label>
+        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>
+            <Activity activity={Activity.AVAILABLE} duration={duration} isOutdated />
+            <Activity activity={Activity.DRIVING} duration={duration} isOutdated />
+            <Activity activity={Activity.RESTING} duration={duration} isOutdated />
+            <Activity activity={Activity.WORKING} duration={duration} isOutdated />
+        </div>
+
+        <label>Large size:</label>
+        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>
+            <Activity activity={Activity.AVAILABLE} duration={duration} bsSize={Activity.SIZE_LG} />
+            <Activity activity={Activity.DRIVING} duration={duration} bsSize={Activity.SIZE_LG} />
+            <Activity activity={Activity.RESTING} duration={duration} bsSize={Activity.SIZE_LG} />
+            <Activity activity={Activity.WORKING} duration={duration} bsSize={Activity.SIZE_LG} />
+        </div>
+
+        <label>Extra large size:</label>
+        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>
+            <Activity activity={Activity.AVAILABLE} duration={duration} bsSize={Activity.SIZE_XL} />
+            <Activity activity={Activity.DRIVING} duration={duration} bsSize={Activity.SIZE_XL} />
+            <Activity activity={Activity.RESTING} duration={duration} bsSize={Activity.SIZE_XL} />
+            <Activity activity={Activity.WORKING} duration={duration} bsSize={Activity.SIZE_XL} />
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <label>Small size:</label>
+    <div class="display-flex flex-wrap gap-5 margin-bottom-25">
+        <div class="activity activity-available activity-sm">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-available">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-driving activity-sm">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-driving">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-resting activity-sm">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-resting">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-working activity-sm">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-working">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <span class="badge padding-y-4 badge-danger">1</span>
+        <span class="badge padding-y-4 badge-warning">3</span>
+    </div>
+    <label>Default size:</label>
+    <div class="display-flex flex-wrap gap-5 margin-bottom-25">
+        <div class="activity activity-available">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-available">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-driving">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-driving">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-resting">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-resting">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-working">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-working">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+    </div>
+    <label>Default size without duration:</label>
+    <div class="display-flex flex-wrap gap-5 margin-bottom-25">
+        <div class="activity activity-available">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-available">
+                </span>
+            </span>
+        </div>
+        <div class="activity activity-driving">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-driving">
+                </span>
+            </span>
+        </div>
+        <div class="activity activity-resting">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-resting">
+                </span>
+            </span>
+        </div>
+        <div class="activity activity-working">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-working">
+                </span>
+            </span>
+        </div>
+    </div>
+    <label>Outdated activities:</label>
+    <div class="display-flex flex-wrap gap-5 margin-bottom-25">
+        <div class="activity activity-available opacity-50">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-available">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-driving opacity-50">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-driving">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-resting opacity-50">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-resting">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-working opacity-50">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-working">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+    </div>
+    <label>Large size:</label>
+    <div class="display-flex flex-wrap gap-5 margin-bottom-25">
+        <div class="activity activity-available activity-lg">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-available">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-driving activity-lg">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-driving">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-resting activity-lg">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-resting">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-working activity-lg">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-working">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+    </div>
+    <label>Extra large size:</label>
+    <div class="display-flex flex-wrap gap-5 margin-bottom-25">
+        <div class="activity activity-available activity-xl">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-available">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-driving activity-xl">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-driving">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-resting activity-xl">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-resting">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+        <div class="activity activity-working activity-xl">
+            <span class="activity-icon">
+                <span class="rioglyph rioglyph-status-working">
+                </span>
+            </span>
+            <span class="activity-text">0:24 h</span>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| activity | String | — | Defines the type of activity. Possible values are: Activity.AVAILABLE, Activity.DRIVING, Activity.RESTING or Activity.WORKING. |
+| duration | String / Node | — | The actual duration value to be shown. |
+| isOutdated | Boolean | false | Indicated whether the activity is outdated. |
+| bsSize | String | — | Define how large the component should be rendered. Possible values are: Activity.SIZE_SM, Activity.SIZE_LG or Activity.SIZE_XL. |
+| onClick | Function | () => {} | Callback function for when the component is clicked. |
+| className | String | — | Additional classes for the wrapper element. |

package/dist/docs/components/animatedNumber.md

@@ -0,0 +1,88 @@
+# AnimatedNumber
+
+*Category:* Components
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#components/animatedNumber
+*Captured:* 2025-12-12T14:20:36.928Z
+
+## AnimatedNumber
+
+### Example: Example 1
+
+Default AnimatedNumber0
+AnimatedNumber with prefix and unit+0%
+AnimatedNumber as simple timerHurry up! Only60sremaining.
+
+#### Summary
+
+Default AnimatedNumber0
+AnimatedNumber with prefix and unit+0%
+AnimatedNumber as simple timerHurry up! Only60sremaining.
+
+#### React (tsx)
+
+```tsx
+import AnimatedNumber from '@rio-cloud/rio-uikit/AnimatedNumber';
+
+export default () => (
+    <div>
+        <label>Default AnimatedNumber</label>
+        <div className='width-60 margin-bottom-20 text-right text-size-h1 text-color-info'>
+            <AnimatedNumber start={0} end={100} />
+        </div>
+
+        <label>AnimatedNumber with prefix and unit</label>
+        <div className='width-100 margin-bottom-20 text-right text-size-h1 text-color-primary'>
+            <AnimatedNumber start={0} end={100} unit='%' prefix='+' speed={50} />
+        </div>
+
+        <label>AnimatedNumber as simple timer</label>
+        <div className='text-color-danger'>
+            <span className='margin-right-3'>Hurry up! Only</span>
+            <AnimatedNumber
+                start={60}
+                end={0}
+                decreasing
+                unit='s'
+                speed={1000}
+                onEnd={() => console.log('Time is up')}
+            />
+            <span className='margin-left-3'>remaining.</span>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <label>Default AnimatedNumber</label>
+    <div class="width-60 margin-bottom-20 text-right text-size-h1 text-color-info">
+        <span class="">27</span>
+    </div>
+    <label>AnimatedNumber with prefix and unit</label>
+    <div class="width-100 margin-bottom-20 text-right text-size-h1 text-color-primary">
+        <span class="">+6%</span>
+    </div>
+    <label>AnimatedNumber as simple timer</label>
+    <div class="text-color-danger">
+        <span class="margin-right-3">Hurry up! Only</span>
+        <span class="">60s</span>
+        <span class="margin-left-3">remaining.</span>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| start | Number | — | The start value. |
+| end | Number | — | The end value. |
+| prefix | String | — | A prefix to be added to the final string. |
+| unit | String | — | A unit suffix to be added to the final string. |
+| speed | Number | 10 | The speed in milliseconds to count up or down. |
+| decreasing | Boolean | false | Enables to count backwards. |
+| onEnd | Function | — | Callback function to be invoked when the end value is reached. |
+| className | String | — | Additional classes to be set on the wrapping element. |