@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/templates/loading-progress.md

@@ -0,0 +1,109 @@
+# Loading progress
+
+*Category:* Templates
+*Section:* Progress
+*Source:* https://uikit.developers.rio.cloud/#templates/loading-progress
+*Captured:* 2025-12-12T14:21:37.564Z
+
+## Loading progress
+
+### Example: Label
+
+Label
+
+0%
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula magna quis ante tincidunt, at volutpat nunc facilisis. Sed auctor.
+
+#### Summary
+
+Label
+
+0%
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula magna quis ante tincidunt, at volutpat nunc facilisis. Sed auctor.
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Card from '@rio-cloud/rio-uikit/Card';
+import Spinner from '@rio-cloud/rio-uikit/Spinner';
+import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
+import useInterval from '@rio-cloud/rio-uikit/useInterval';
+
+export default () => {
+    const [value, setValue] = useState(0);
+
+    useInterval(() => {
+        setValue(oldValue => (oldValue + 1) % 101);
+    }, 150);
+
+    return (
+        <div className='max-width-500 margin-auto'>
+            <Card className='display-flex flex-column gap-5'>
+                <div className='display-flex justify-content-between gap-5'>
+                    <div className='display-flex align-items-center'>
+                        <div className='margin-right-3 text-color-dark'>Label</div>
+                        <SimpleTooltip content='Some helper text' placement='top'>
+                            <span className='rioglyph rioglyph-question-sign text-color-dark' />
+                        </SimpleTooltip>
+                    </div>
+                    <span className='display-flex gap-5'>
+                        <span className='text-color-darker'>{value}%</span>
+                        <span className='scale-80'>
+                            <Spinner />
+                        </span>
+                    </span>
+                </div>
+                <div className='progress'>
+                    <div className='progress-bar bg-info' style={{ width: `${value}%` }} />
+                </div>
+                <div className='text-color-dark text-size-12 margin-top-5'>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula magna quis ante tincidunt,
+                    at volutpat nunc facilisis. Sed auctor.
+                </div>
+            </Card>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-500 margin-auto">
+    <div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-5">
+        <div class="display-flex justify-content-between gap-5">
+            <div class="display-flex align-items-center">
+                <div class="margin-right-3 text-color-dark">Label</div>
+                <span class="rioglyph rioglyph-question-sign text-color-dark">
+                </span>
+            </div>
+            <span class="display-flex gap-5">
+                <span class="text-color-darker">1%</span>
+                <span class="scale-80">
+                    <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>
+                </span>
+            </span>
+        </div>
+        <div class="progress">
+            <div class="progress-bar bg-info" style="width: 1%;">
+            </div>
+        </div>
+        <div class="text-color-dark text-size-12 margin-top-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula magna quis ante tincidunt, at volutpat nunc facilisis. Sed auctor.</div>
+    </div>
+</div>
+```

package/dist/docs/templates/options-panel.md

@@ -0,0 +1,152 @@
+# Options panel
+
+*Category:* Templates
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#templates/options-panel
+*Captured:* 2025-12-12T14:21:34.848Z
+
+## Options panel
+
+### Example: Add transport order
+
+Add transport order
+You have two options for uploading a transport order to the system.
+
+Where is your transport order stored?
+From onboard unit
+Upload the .xml order file from your vehicle.
+
+Manual entry
+Create a new transport order in the interface.
+
+Need help uploading your order?Cancel upload
+
+#### Summary
+
+Add transport order
+You have two options for uploading a transport order to the system.
+
+Where is your transport order stored?
+From onboard unit
+Upload the .xml order file from your vehicle.
+
+Manual entry
+Create a new transport order in the interface.
+
+Need help uploading your order?Cancel upload
+
+#### React (tsx)
+
+```tsx
+import { useRef } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import useHover from '@rio-cloud/rio-uikit/useHover';
+
+export default () => {
+    return (
+        <div className='max-width-600 margin-auto'>
+            <div className='display-flex flex-column gap-15 padding-25'>
+                <div>
+                    <h3 className='text-size-h3 text-medium text-color-darkest margin-top-0'>Add transport order</h3>
+                    <p className='text-color-darker'>
+                        You have two options for uploading a transport order to the system.
+                    </p>
+                </div>
+
+                <h4 className='text-medium text-color-darkest margin-bottom-0'>
+                    Where is your transport order stored?
+                </h4>
+
+                <OptionItem
+                    icon='rioglyph-server-stack'
+                    title='From onboard unit'
+                    description='Upload the .xml order file from your vehicle.'
+                />
+
+                <OptionItem
+                    icon='rioglyph-pencil-square'
+                    title='Manual entry'
+                    description='Create a new transport order in the interface.'
+                />
+
+                <div className='display-flex flex-wrap gap-15 justify-content-center-xs justify-content-between align-items-center margin-top-20'>
+                    <a href='#'>Need help uploading your order?</a>
+                    <Button bsStyle='muted-filled'>Cancel upload</Button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+type OptionItemProps = {
+    icon: string;
+    title: string;
+    description: string;
+};
+
+const OptionItem = ({ icon, title, description }: OptionItemProps) => {
+    const ref = useRef<HTMLInputElement>(null);
+    const isHover = useHover(ref);
+
+    return (
+        <div
+            ref={ref}
+            className='rounded border padding-x-20 padding-y-15 display-flex align-items-center justify-content-between bg-decent hover-bg-highlight-decent hover-border-color-highlight cursor-pointer'
+        >
+            <div className='display-flex align-items-center gap-20'>
+                <span className={`rioglyph ${icon} text-color-darkest text-size-h2`} />
+                <div>
+                    <div className='text-size-18 text-bold text-color-darkest line-height-125rel'>{title}</div>
+                    <div className='text-color-darker'>{description}</div>
+                </div>
+            </div>
+            <span
+                className={`rioglyph rioglyph-chevron-right ${isHover ? 'text-color-highlight' : 'text-color-light'} text-size-20`}
+            />
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-600 margin-auto">
+    <div class="display-flex flex-column gap-15 padding-25">
+        <div>
+            <h3 class="text-size-h3 text-medium text-color-darkest margin-top-0">Add transport order</h3>
+            <p class="text-color-darker">You have two options for uploading a transport order to the system.</p>
+        </div>
+        <h4 class="text-medium text-color-darkest margin-bottom-0">Where is your transport order stored?</h4>
+        <div class="rounded border padding-x-20 padding-y-15 display-flex align-items-center justify-content-between bg-decent hover-bg-highlight-decent hover-border-color-highlight cursor-pointer">
+            <div class="display-flex align-items-center gap-20">
+                <span class="rioglyph rioglyph-server-stack text-color-darkest text-size-h2">
+                </span>
+                <div>
+                    <div class="text-size-18 text-bold text-color-darkest line-height-125rel">From onboard unit</div>
+                    <div class="text-color-darker">Upload the .xml order file from your vehicle.</div>
+                </div>
+            </div>
+            <span class="rioglyph rioglyph-chevron-right text-color-light text-size-20">
+            </span>
+        </div>
+        <div class="rounded border padding-x-20 padding-y-15 display-flex align-items-center justify-content-between bg-decent hover-bg-highlight-decent hover-border-color-highlight cursor-pointer">
+            <div class="display-flex align-items-center gap-20">
+                <span class="rioglyph rioglyph-pencil-square text-color-darkest text-size-h2">
+                </span>
+                <div>
+                    <div class="text-size-18 text-bold text-color-darkest line-height-125rel">Manual entry</div>
+                    <div class="text-color-darker">Create a new transport order in the interface.</div>
+                </div>
+            </div>
+            <span class="rioglyph rioglyph-chevron-right text-color-light text-size-20">
+            </span>
+        </div>
+        <div class="display-flex flex-wrap gap-15 justify-content-center-xs justify-content-between align-items-center margin-top-20">
+            <a href="#">Need help uploading your order?</a>
+            <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Cancel upload</button>
+        </div>
+    </div>
+</div>
+```

package/dist/docs/templates/panel-variants.md

@@ -0,0 +1,164 @@
+# Panel variants
+
+*Category:* Templates
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#templates/panel-variants
+*Captured:* 2025-12-12T14:21:33.781Z
+
+## Panel variants
+
+### Example: Example 1
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+#### Summary
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+Lorem ipsum
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+
+#### React (tsx)
+
+```tsx
+import { colors, getColorNames } from '../../../utils/colors';
+
+const eachColor = ['default', ...getColorNames(colors.brand, colors.status)];
+
+export default () => {
+    return (
+        <div className='margin-25-md display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-md gap-20'>
+            {eachColor.map(color => (
+                <div
+                    className={`
+                    panel panel-${color} panel-body panel-blank shadow-default padding-25 margin-bottom-0
+                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
+                    user-select-none
+                `}
+                    key={color}
+                >
+                    <div className={`text-size-18 text-medium text-uppercase text-color-${color} margin-bottom-5`}>
+                        Lorem ipsum
+                    </div>
+                    <span className={`position-absolute left--1 top-25 height-25 width-3 bg-${color}`} />
+                    <div className='text-color-darker'>
+                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-md gap-20">
+    <div class="
+                    panel panel-default panel-body panel-blank shadow-default padding-25 margin-bottom-0
+                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
+                    user-select-none
+                ">
+        <div class="text-size-18 text-medium text-uppercase text-color-default margin-bottom-5">Lorem ipsum</div>
+        <span class="position-absolute left--1 top-25 height-25 width-3 bg-default">
+        </span>
+        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
+    </div>
+    <div class="
+                    panel panel-primary panel-body panel-blank shadow-default padding-25 margin-bottom-0
+                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
+                    user-select-none
+                ">
+        <div class="text-size-18 text-medium text-uppercase text-color-primary margin-bottom-5">Lorem ipsum</div>
+        <span class="position-absolute left--1 top-25 height-25 width-3 bg-primary">
+        </span>
+        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
+    </div>
+    <div class="
+                    panel panel-secondary panel-body panel-blank shadow-default padding-25 margin-bottom-0
+                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
+                    user-select-none
+                ">
+        <div class="text-size-18 text-medium text-uppercase text-color-secondary margin-bottom-5">Lorem ipsum</div>
+        <span class="position-absolute left--1 top-25 height-25 width-3 bg-secondary">
+        </span>
+        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
+    </div>
+    <div class="
+                    panel panel-info panel-body panel-blank shadow-default padding-25 margin-bottom-0
+                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
+                    user-select-none
+                ">
+        <div class="text-size-18 text-medium text-uppercase text-color-info margin-bottom-5">Lorem ipsum</div>
+        <span class="position-absolute left--1 top-25 height-25 width-3 bg-info">
+        </span>
+        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
+    </div>
+    <div class="
+                    panel panel-success panel-body panel-blank shadow-default padding-25 margin-bottom-0
+                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
+                    user-select-none
+                ">
+        <div class="text-size-18 text-medium text-uppercase text-color-success margin-bottom-5">Lorem ipsum</div>
+        <span class="position-absolute left--1 top-25 height-25 width-3 bg-success">
+        </span>
+        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
+    </div>
+    <div class="
+                    panel panel-warning panel-body panel-blank shadow-default padding-25 margin-bottom-0
+                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
+                    user-select-none
+                ">
+        <div class="text-size-18 text-medium text-uppercase text-color-warning margin-bottom-5">Lorem ipsum</div>
+        <span class="position-absolute left--1 top-25 height-25 width-3 bg-warning">
+        </span>
+        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
+    </div>
+    <div class="
+                    panel panel-danger panel-body panel-blank shadow-default padding-25 margin-bottom-0
+                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
+                    user-select-none
+                ">
+        <div class="text-size-18 text-medium text-uppercase text-color-danger margin-bottom-5">Lorem ipsum</div>
+        <span class="position-absolute left--1 top-25 height-25 width-3 bg-danger">
+        </span>
+        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
+    </div>
+</div>
+```