@rio-cloud/uikit-mcp 1.1.4 → 1.1.6

package/dist/docs/components/tagManager.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Misc
-*Source:* https://uikit.developers.rio.cloud/#components/tagManager
-*Captured:* 2026-01-14T09:07:53.401Z
+*Source:* https://uikit.developers.rio.cloud/#/components/tagManager
+*Captured:* 2026-02-23T13:42:33.470Z
 
 The TagManager allows to select and filter for existing tags as well as adding and removing them from a list of tags.
 
@@ -155,6 +155,24 @@ export default () => {
 </div>
 ```
 
+#### Props (json)
+
+```json
+[
+ {
+     label: 'Foo',
+ },
+ {
+     label: 'Bar',
+     toAdd: true,
+ },
+ {
+     label: 'Lorem ipsum',
+     toRemove: true,
+ }
+]
+```
+
 ### Example: Example 2
 
 Lorem
@@ -257,6 +275,24 @@ export default () => {
 </div>
 ```
 
+#### Props (json)
+
+```json
+[
+ {
+     label: 'Foo',
+ },
+ {
+     label: 'Bar',
+     toAdd: true,
+ },
+ {
+     label: 'Lorem ipsum',
+     toRemove: true,
+ }
+]
+```
+
 ### Example: Fleet groups
 
 Fleet groups
@@ -419,4 +455,22 @@ export default () => {
     </div>
     <button type="button" class="btn btn-default btn-component margin-top-15 disabled" tabindex="0">Save</button>
 </div>
+```
+
+#### Props (json)
+
+```json
+[
+ {
+     label: 'Foo',
+ },
+ {
+     label: 'Bar',
+     toAdd: true,
+ },
+ {
+     label: 'Lorem ipsum',
+     toRemove: true,
+ }
+]
 ```

package/dist/docs/components/tags.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Misc
-*Source:* https://uikit.developers.rio.cloud/#components/tags
-*Captured:* 2026-01-14T09:07:53.247Z
+*Source:* https://uikit.developers.rio.cloud/#/components/tags
+*Captured:* 2026-02-23T13:42:33.231Z
 
 ## Tag
 
@@ -753,4 +753,34 @@ export default () => (
         </div>
     </div>
 </div>
-```
+```
+
+#### Props: Tag
+
+### Tag
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| active | boolean | false | Defines if the tag is active. |
+| clickable | boolean | false | Defines if the tag is clickable. |
+| deletable | boolean | false | Defines if the tag is deletable. |
+| revertable | boolean | false | Defines if the tag is revertable. |
+| disabled | boolean | false | Defines if the tag is disabled. |
+| icon | string | — | Define any rioglyph icon like "rioglyph-truck". |
+| muted | boolean | false | Sets a more subtle style for border and background. |
+| round | boolean | true | Defines if the tag is round. |
+| selectable | boolean | false | Defines if the tag is selectable. |
+| size | 'small' \| 'medium' | — | Defines if you want to render the tag in a different size. Possible values are: 'small' and 'medium' |
+| multiline | boolean | false | Allows to render text on multiple lines. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+
+#### Props: TagList
+
+### TagList
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| inline | boolean | true | Defines if the tag list is rendered inline or vertically. |
+| autoTagWidth | boolean | false | Defines if the tag has the same with as it`s parent container. |
+| tagsPerRow | 1 \| 2 \| 3 \| 4 \| 6 | — | Possible values are 1-6 |
+| className | string | — | Additional classes to be set on the wrapper element. |

package/dist/docs/components/teaser.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#components/teaser
-*Captured:* 2026-01-14T09:07:37.056Z
+*Source:* https://uikit.developers.rio.cloud/#/components/teaser
+*Captured:* 2026-02-23T13:42:17.029Z
 
 The teaser component was built to create all kinds of landing and/or single pages. for example, be used in dialogs or sidebars.
 
@@ -894,4 +894,31 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| teaserPerRow | number | — | — |
+| teaserPerRow | number | — | Defines how many children are rendered into a row. If "teaserPerRow" is not defined, the container tries to put all children in a row with regard to the Bootstrap grid. This is done by dividing the amount of children by 12 in order to figure out the col grid classes. It is recommended to define "teasersPerRow" when having more than 4 teasers. Possible values are: 1 2 3 4 6 12 |
+| columnClassName | string | — | Optional string for additional classes added to each column of a child. |
+| className | string | — | Optional string for additional classes added to the row. |
+
+#### Props: Teaser
+
+### Teaser
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| headline | string \| React.ReactNode | — | The headline for the teaser. |
+| content | string \| React.ReactNode | — | The actual content to show e.g. some kind of text. |
+| image | TeaserImage | — | Defines an image to render. |
+| └src | string | — | The src URL for the image. |
+| └alt | string | — | The alternate text for the image. |
+| └align | 'left' \| 'right' | — | Defines whether the image is on the left or right side of the component. Possible values are: 'left' and 'right'. |
+| └onClick | VoidFunction | — | Callback function for the image. |
+| └aspectRatio | '1:1' \| '3:1' \| '3:2' \| '16:9' | — | Ratio of the transparent image placeholder. Possible values are '1:1', '3:1', '3:2' and '16:9'. |
+| └className | string | — | Additional classes added to the image wrapper. |
+| button | TeaserButton | — | Defines a button to render with. |
+| └text | string \| React.ReactNode | — | The text content for the button. |
+| └bsStyle | BUTTON_STYLE | 'primary' | The button style. See the button styles definition for possible values. |
+| └onClick | (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function for the button. |
+| └className | string | — | Additional classes added to the button. |
+| verticalAlignment | 'top' \| 'center' | 'top' | Defines where the teaser content is aligned including headline and image. Possible values are: 'top' and 'center'. |
+| segmentation | '50' \| '25:75' \| '75:25' \| '100' | — | Defines how the teaser content is segmented. Possible values are: '50', '25:75', '75:25' and '100'. |
+| footer | string \| React.ReactNode | — | Optional content for footer in case the prop "button" is not sufficient. |
+| className | string | — | Additional classes added to the wrapper. |

package/dist/docs/components/textTruncateMiddle.md

@@ -0,0 +1,151 @@
+# TextTruncateMiddle
+
+*Category:* Components
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#/components/textTruncateMiddle
+*Captured:* 2026-02-23T13:42:18.141Z
+
+TextTruncateMiddle truncates long text in the middle and keeps the end segment visible.
+
+## TextTruncateMiddle
+
+Useful for IDs, URLs, and file names where the suffix helps identify the value quickly.
+
+### Example: Example 1
+
+Drag the right handle to change width2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1ehttps://service.example.com/fleet/vehicles/2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e/details
+
+Suffix length
+9
+
+#### Summary
+
+Drag the right handle to change width2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1ehttps://service.example.com/fleet/vehicles/2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e/details
+
+Suffix length
+9
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Resizer from '@rio-cloud/rio-uikit/Resizer';
+import Slider from '@rio-cloud/rio-uikit/Slider';
+import TextTruncateMiddle from '@rio-cloud/rio-uikit/TextTruncateMiddle';
+
+const sampleId = '2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e';
+const sampleUrl = 'https://service.example.com/fleet/vehicles/2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e/details';
+
+const MIN_SUFFIX_LENGTH = 2;
+const MAX_SUFFIX_LENGTH = 12;
+
+const MIN_WIDTH = 220;
+const MAX_WIDTH = 620;
+const INITIAL_WIDTH = 300;
+const INITIAL_SUFFIX_LENGTH = 9;
+
+export default () => {
+    const [suffixLength, setSuffixLength] = useState(INITIAL_SUFFIX_LENGTH);
+    const [contentWidth, setContentWidth] = useState(INITIAL_WIDTH);
+
+    const onResize = (diff: number) => {
+        setContentWidth(currentWidth => {
+            const updatedWidth = currentWidth - diff;
+            if (updatedWidth < MIN_WIDTH) {
+                return MIN_WIDTH;
+            }
+            if (updatedWidth > MAX_WIDTH) {
+                return MAX_WIDTH;
+            }
+            return updatedWidth;
+        });
+    };
+
+    return (
+        <div className='max-width-700'>
+            <label>Drag the right handle to change width</label>
+
+            <div className='position-relative border rounded padding-15 bg-white' style={{ width: contentWidth }}>
+                <TextTruncateMiddle
+                    className='border rounded padding-x-10 padding-y-5 margin-bottom-15'
+                    text={sampleId}
+                    suffixLength={suffixLength}
+                    endClassName='text-medium'
+                />
+
+                <TextTruncateMiddle
+                    className='border rounded padding-x-10 padding-y-5'
+                    text={sampleUrl}
+                    suffixLength={suffixLength}
+                />
+
+                <Resizer
+                    className='right-0 display-grid place-items-center width-auto height-100pct padding-x-2'
+                    position={Resizer.RIGHT}
+                    onResize={onResize}
+                >
+                    <div className='height-30 width-2 bg-gray' />
+                </Resizer>
+            </div>
+
+            <div className='margin-top-20 max-width-300'>
+                <label>Suffix length</label>
+                <Slider
+                    value={suffixLength}
+                    minValue={MIN_SUFFIX_LENGTH}
+                    maxValue={MAX_SUFFIX_LENGTH}
+                    step={1}
+                    valueLabels
+                    onChange={value => setSuffixLength(value)}
+                    onDragEnd={value => setSuffixLength(value)}
+                />
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-700">
+    <label>Drag the right handle to change width</label>
+    <div class="position-relative border rounded padding-15 bg-white" style="width: 300px;">
+        <span class="ellipsis-middle border rounded padding-x-10 padding-y-5 margin-bottom-15" title="2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e">
+            <span class="">2bb5e796-6c5e-4bc4-871b-f3af-</span>
+            <span class="text-medium">d469-1c1e</span>
+        </span>
+        <span class="ellipsis-middle border rounded padding-x-10 padding-y-5" title="https://service.example.com/fleet/vehicles/2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e/details">
+            <span class="">https://service.example.com/fleet/vehicles/2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1</span>
+            <span class="">e/details</span>
+        </span>
+        <div class="Resizer resize-horizontal resize-right right-0 display-grid place-items-center width-auto height-100pct padding-x-2">
+            <div class="height-30 width-2 bg-gray">
+            </div>
+        </div>
+    </div>
+    <div class="margin-top-20 max-width-300">
+        <label>Suffix length</label>
+        <div class="range-slider show-value-labels" style="color: var(--brand-primary);">
+            <div class="range-whole-track">
+            </div>
+            <div class="range-track" style="width: 70%;">
+                <div class="range-value">
+                    <span>9</span>
+                </div>
+            </div>
+            <input class="" min="2" max="12" step="1" type="range" value="9">
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| text | string | — | Full text value to render. |
+| suffixLength | number | 6 | Number of characters preserved at the end. |
+| startClassName | string | — | Additional classes for the first text segment (start). |
+| endClassName | string | — | Additional classes for the second text segment (end). |

package/dist/docs/components/timeline.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* CSS Only
-*Source:* https://uikit.developers.rio.cloud/#components/timeline
-*Captured:* 2026-01-14T09:07:54.694Z
+*Source:* https://uikit.developers.rio.cloud/#/components/timeline
+*Captured:* 2026-02-23T13:42:34.917Z
 
 The timeline component is a pure CSS component.