@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/iconList.md

@@ -0,0 +1,306 @@
+# IconList
+
+*Category:* Components
+*Section:* CSS Only
+*Source:* https://uikit.developers.rio.cloud/#components/iconList
+*Captured:* 2025-12-12T12:39:03.135Z
+
+The timeline component is a pure CSS component.
+
+## IconList
+
+### Example: Example 1
+
+Icon list
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Icon list
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+#### Summary
+
+Icon list
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Icon list
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+#### HTML (html)
+
+```html
+<div class="display-grid grid-cols-1 grid-cols-2-sm gap-50">
+    <div>
+        <div class="lead ">
+            <div class="display-flex justify-content-between">
+                <div>Icon list</div>
+            </div>
+            <hr class="margin-top-10 border-color-light">
+        </div>
+        <ul class="icon-list margin-bottom-0">
+            <li>
+                <span class="rioglyph rioglyph-ok-sign text-color-success margin-top--1">
+                </span>
+                <span>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
+            </li>
+            <li>
+                <span class="rioglyph rioglyph-ok-sign text-color-success margin-top--1">
+                </span>
+                <span>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
+            </li>
+            <li>
+                <span class="rioglyph rioglyph-ok-sign text-color-success margin-top--1">
+                </span>
+                <span>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
+            </li>
+        </ul>
+    </div>
+    <div>
+        <div class="lead ">
+            <div class="display-flex justify-content-between">
+                <div>Icon list</div>
+            </div>
+            <hr class="margin-top-10 border-color-light">
+        </div>
+        <ul class="icon-list margin-bottom-0">
+            <li>
+                <span class="rioglyph rioglyph-truck margin-top--1">
+                </span>
+                <span>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
+            </li>
+            <li>
+                <span class="rioglyph rioglyph-van margin-top--1">
+                </span>
+                <span>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
+            </li>
+            <li>
+                <span class="rioglyph rioglyph-user margin-top--1">
+                </span>
+                <span>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
+            </li>
+        </ul>
+    </div>
+</div>
+```
+
+### Example: Example 2
+
+Tree list
+
+Lorem ipsum
+Lorem ipsumLorem ipsumLorem ipsum
+Lorem ipsum
+Lorem ipsum
+
+Lorem ipsumLorem ipsum
+Lorem ipsum
+Lorem ipsum
+
+Lorem ipsumLorem ipsumLorem ipsum
+Lorem ipsum
+Lorem ipsum
+
+Lorem ipsumLorem ipsum
+Lorem ipsum
+Lorem ipsum
+
+Lorem Ipsum
+
+Tree list with panels
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Tree list with icons
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+#### Summary
+
+Tree list
+
+Lorem ipsum
+Lorem ipsumLorem ipsumLorem ipsum
+Lorem ipsum
+Lorem ipsum
+
+Lorem ipsumLorem ipsum
+Lorem ipsum
+Lorem ipsum
+
+Lorem ipsumLorem ipsumLorem ipsum
+Lorem ipsum
+Lorem ipsum
+
+Lorem ipsumLorem ipsum
+Lorem ipsum
+Lorem ipsum
+
+Lorem Ipsum
+
+Tree list with panels
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Tree list with icons
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.
+
+#### HTML (html)
+
+```html
+<div class="display-grid grid-cols-1 grid-cols-5-sm gap-50">
+    <div>
+        <div class="lead ">
+            <div class="display-flex justify-content-between">
+                <div>Tree list</div>
+            </div>
+            <hr class="margin-top-10 border-color-light">
+        </div>
+        <ul class="tree-list margin-bottom-0 margin-left-15">
+            <li>
+                <span>Lorem ipsum</span>
+            </li>
+            <li>
+                <span>Lorem ipsum</span>
+                <ul>
+                    <li>Lorem ipsum<ul>
+                            <li>Lorem ipsum</li>
+                            <li>Lorem ipsum</li>
+                            <li>Lorem ipsum</li>
+                        </ul>
+                    </li>
+                    <li>Lorem ipsum<ul>
+                            <li>Lorem ipsum</li>
+                            <li>Lorem ipsum</li>
+                            <li>Lorem ipsum</li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <span>Lorem ipsum</span>
+                <ul>
+                    <li>Lorem ipsum<ul>
+                            <li>Lorem ipsum</li>
+                            <li>Lorem ipsum</li>
+                            <li>Lorem ipsum</li>
+                        </ul>
+                    </li>
+                    <li>Lorem ipsum<ul>
+                            <li>Lorem ipsum</li>
+                            <li>Lorem ipsum</li>
+                            <li>Lorem ipsum</li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <span>Lorem Ipsum</span>
+            </li>
+        </ul>
+    </div>
+    <div class="grid-colspan-2-sm">
+        <div class="lead ">
+            <div class="display-flex justify-content-between">
+                <div>Tree list with panels</div>
+            </div>
+            <hr class="margin-top-10 border-color-light">
+        </div>
+        <ul class="tree-list">
+            <li>
+                <div class="panel panel-default panel-body margin-bottom-15 shadow-default">
+                    <span>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
+                </div>
+            </li>
+            <li>
+                <div class="panel panel-default panel-body margin-bottom-15 shadow-default">
+                    <span>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
+                </div>
+            </li>
+            <li>
+                <div class="panel panel-default panel-body margin-bottom-15 shadow-default">
+                    <span>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
+                </div>
+            </li>
+        </ul>
+    </div>
+    <div class="grid-colspan-2-sm">
+        <div class="lead ">
+            <div class="display-flex justify-content-between">
+                <div>Tree list with icons</div>
+            </div>
+            <hr class="margin-top-10 border-color-light">
+        </div>
+        <ul class="tree-list">
+            <li>
+                <div class="display-flex gap-5 margin-bottom-10">
+                    <span class="rioglyph rioglyph-ok-sign text-color-success text-size-18 margin-top-2">
+                    </span>
+                    <span>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
+                </div>
+            </li>
+            <li>
+                <div class="display-flex gap-5 margin-bottom-10">
+                    <span class="rioglyph rioglyph-ok-sign text-color-success text-size-18 margin-top-2">
+                    </span>
+                    <span>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
+                </div>
+            </li>
+            <li>
+                <div class="display-flex gap-5 margin-bottom-10">
+                    <span class="rioglyph rioglyph-ok-sign text-color-success text-size-18 margin-top-2">
+                    </span>
+                    <span>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
+                </div>
+            </li>
+        </ul>
+    </div>
+</div>
+```

package/dist/docs/components/imagePreloader.md

@@ -0,0 +1,167 @@
+# ImagePreloader
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/imagePreloader
+*Captured:* 2025-12-12T12:38:53.190Z
+
+Use the preloader for controlling the various states when fetching the image. It allows to handle the failure case as well.
+
+## ImagePreloader
+
+### Example: Example 1
+
+With Image tag
+
+As background image without spinner
+
+Fallback case
+
+#### Summary
+
+With Image tag
+
+As background image without spinner
+
+Fallback case
+
+#### React (tsx)
+
+```tsx
+import ImagePreloader from '@rio-cloud/rio-uikit/ImagePreloader';
+import AspectRatioPlaceholder from '@rio-cloud/rio-uikit/AspectRatioPlaceholder';
+import Spinner from '@rio-cloud/rio-uikit/Spinner';
+
+export default () => (
+    <div className='row'>
+        <div className='col-md-4'>
+            <div className='h5 ellipsis-1'>With Image tag</div>
+            {imageExample}
+        </div>
+        <div className='col-md-4'>
+            <div className='h5 ellipsis-1'>As background image without spinner</div>
+            {backgroundImageExample}
+        </div>
+        <div className='col-md-4'>
+            <div className='h5 ellipsis-1'>Fallback case</div>
+            {failedImageExample}
+        </div>
+    </div>
+);
+
+const fallback = (
+    <AspectRatioPlaceholder width={1000} height={562}>
+        <div className='text-size-h3 display-grid place-items-center position-absolute inset-0'>
+            <span className='rioglyph rioglyph-missing text-size-200pct text-color-gray' />
+        </div>
+    </AspectRatioPlaceholder>
+);
+
+const imageExample = (
+    <ImagePreloader src='https://picsum.photos/1000/560'>
+        {({ status, image }) => {
+            switch (status) {
+                case 'FAILED':
+                    return fallback;
+
+                case 'LOADED':
+                    // When image has been loaded, render the image tag
+                    return <img src={image.src} className='img-responsive ani-fade-in' alt='Awesome stuff.' />;
+
+                default:
+                    return (
+                        <AspectRatioPlaceholder width={1000} height={560}>
+                            <div className='display-grid place-items-center position-absolute inset-0'>
+                                <Spinner isInverse={false} />
+                            </div>
+                        </AspectRatioPlaceholder>
+                    );
+            }
+        }}
+    </ImagePreloader>
+);
+
+const backgroundImageExample = (
+    <ImagePreloader src='https://picsum.photos/1000/560'>
+        {({ status, image }) => {
+            switch (status) {
+                case 'FAILED':
+                    return fallback;
+
+                case 'LOADED':
+                    // When image has been loaded, set it as background
+                    return (
+                        <div
+                            className='bg-size-cover bg-position-center ani-fade-in'
+                            style={{ backgroundImage: `url(${image.src})` }}
+                        >
+                            <AspectRatioPlaceholder width={1000} height={560} />
+                        </div>
+                    );
+
+                default:
+                    return null;
+            }
+        }}
+    </ImagePreloader>
+);
+
+const failedImageExample = (
+    <ImagePreloader src='https://not-there'>
+        {({ status }) => {
+            if (status === 'FAILED') {
+                return fallback;
+            }
+            return null;
+        }}
+    </ImagePreloader>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="row">
+    <div class="col-md-4">
+        <div class="h5 ellipsis-1">With Image tag</div>
+        <div class="position-relative " style="aspect-ratio: 1000 / 560;">
+            <div class="display-grid place-items-center position-absolute inset-0">
+                <div class="spinnerInfoBox display-flex justify-content-center align-items-center height-100pct">
+                    <div class="spinner">
+                        <div>
+                        </div>
+                        <div>
+                        </div>
+                        <div>
+                        </div>
+                        <div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="h5 ellipsis-1">As background image without spinner</div>
+    </div>
+    <div class="col-md-4">
+        <div class="h5 ellipsis-1">Fallback case</div>
+        <div class="position-relative " style="aspect-ratio: 1000 / 562;">
+            <div class="text-size-h3 display-grid place-items-center position-absolute inset-0">
+                <span class="rioglyph rioglyph-missing text-size-200pct text-color-gray">
+                </span>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| src | String | — | The source location for the image to load. |
+| onLoaded | (image: HTMLImageElement) => void | () => {} | Invoked when the image is loaded. The image object will be passed as argument. |
+| onFailed | (image: HTMLImageElement) => void | () => {} | Invoked when the image failed to load. The image object will be passed as argument. |
+| isAnonymous | Boolean | false | Defines whether to set "crossOrigin" to "Anonymous" or not. |
+| children | (props: { status: ImagePreloaderStatus; image: HTMLImageElement }) => JSX.Element \| null | — | A render function can be used to access both the current state and the image element. Using this, you can decide how to render the different states and/or the loaded image. The function will receive props containing the status and image properties. status will be one of 'PENDING', 'FAILED' or 'LOADED'. image is the Image element. |

package/dist/docs/components/labeledElement.md

@@ -0,0 +1,115 @@
+# LabeledElement
+
+*Category:* Components
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#components/labeledElement
+*Captured:* 2025-12-12T12:38:41.690Z
+
+A simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements by using the FormLabelcomponent internally. For more flexibility, you can also use it directly when needed.
+
+## LabeledElement
+
+### Example: Label for other elements
+
+Label for a form element
+Label for other elements
+ButtonButton
+
+Label for a value
+Some value with default gap
+
+Label with no gap
+Lorem ipsum dolor
+Label for styled value
+Lorem ipsum dolor
+
+#### Summary
+
+Label for a form element
+Label for other elements
+ButtonButton
+
+Label for a value
+Some value with default gap
+
+Label with no gap
+Lorem ipsum dolor
+Label for styled value
+Lorem ipsum dolor
+
+#### React (tsx)
+
+```tsx
+import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
+import Button from '@rio-cloud/rio-uikit/Button';
+import LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';
+
+export default () => (
+    <div className='display-grid grid-cols-2 grid-cols-3-md grid-cols-4-lg gap-25'>
+        <LabeledElement label='Label for a form element' htmlFor='sample-input'>
+            <input id='sample-input' className='form-control' placeholder='Some random input' />
+        </LabeledElement>
+
+        <LabeledElement label='Label for other elements'>
+            <ButtonToolbar>
+                <Button>Button</Button>
+                <Button bsStyle='primary'>Button</Button>
+            </ButtonToolbar>
+        </LabeledElement>
+
+        <LabeledElement label='Label for a value'>
+            <div>Some value with default gap</div>
+        </LabeledElement>
+
+        <LabeledElement label='Label with no gap' noGap>
+            Lorem ipsum dolor
+        </LabeledElement>
+
+        <LabeledElement label={<span>Label for styled value</span>} noGap>
+            <span className='text-size-16 text-color-darker'>Lorem ipsum dolor</span>
+        </LabeledElement>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-grid grid-cols-2 grid-cols-3-md grid-cols-4-lg gap-25">
+    <div class="LabeledElement display-flex flex-column">
+        <label for="sample-input" class="display-inline-block">
+            <span>Label for a form element</span>
+        </label>
+        <input id="sample-input" class="form-control" placeholder="Some random input">
+    </div>
+    <div class="LabeledElement display-flex flex-column">
+        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Label for other elements</div>
+        <div class="btn-toolbar">
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Button</button>
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Button</button>
+        </div>
+    </div>
+    <div class="LabeledElement display-flex flex-column">
+        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Label for a value</div>
+        <div>Some value with default gap</div>
+    </div>
+    <div class="LabeledElement display-flex flex-column">
+        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Label with no gap</div>Lorem ipsum dolor
+    </div>
+    <div class="LabeledElement display-flex flex-column">
+        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">
+            <span>Label for styled value</span>
+        </div>
+        <span class="text-size-16 text-color-darker">Lorem ipsum dolor</span>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| label | string \| React.ReactElement | — | The text to display for the label. |
+| labelProps | FormLabelProps | — | Additional props for the FormLabel, excluding children and htmlFor. |
+| noGap | boolean | false | If true, removes the bottom margin from the label. |
+| className | String | — | Additional classes to be set on the wrapper element. |