@rio-cloud/uikit-mcp 1.1.5 → 1.1.7

package/dist/docs/components/teaser.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#components/teaser
-*Captured:* 2026-02-03T14:04:52.277Z
+*Source:* https://uikit.developers.rio.cloud/#/components/teaser
+*Captured:* 2026-02-23T15:48:49.832Z
 
 The teaser component was built to create all kinds of landing and/or single pages. for example, be used in dialogs or sidebars.
 

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-23T15:48:50.545Z
+
+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-02-03T14:05:10.817Z
+*Source:* https://uikit.developers.rio.cloud/#/components/timeline
+*Captured:* 2026-02-23T15:49:07.437Z
 
 The timeline component is a pure CSS component.