@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/barList.md

@@ -0,0 +1,517 @@
+# BarList
+
+*Category:* Components
+*Section:* Progress
+*Source:* https://uikit.developers.rio.cloud/#components/barList
+*Captured:* 2025-12-12T12:38:33.376Z
+
+## BarList
+
+### Example: Example 1
+
+BarList
+
+On-time delivery
+
+Warehouse efficiency
+
+Truck utilization
+
+Freight cost/km
+
+Fuel consumption index
+
+92%
+
+84%
+
+78%
+
+65%
+
+15%
+
+BarList reversed
+
+On-time delivery
+
+Warehouse efficiency
+
+Truck utilization
+
+Freight cost/km
+
+Fuel consumption index
+
+92%
+
+84%
+
+78%
+
+65%
+
+15%
+
+#### Summary
+
+BarList
+
+On-time delivery
+
+Warehouse efficiency
+
+Truck utilization
+
+Freight cost/km
+
+Fuel consumption index
+
+92%
+
+84%
+
+78%
+
+65%
+
+15%
+
+BarList reversed
+
+On-time delivery
+
+Warehouse efficiency
+
+Truck utilization
+
+Freight cost/km
+
+Fuel consumption index
+
+92%
+
+84%
+
+78%
+
+65%
+
+15%
+
+#### React (tsx)
+
+```tsx
+import BarList from '@rio-cloud/rio-uikit/BarList';
+
+export default () => {
+    const handleSelect = (item: (typeof transportData)[number]) => {
+        console.log(`Clicked on: ${item.name}`);
+    };
+
+    return (
+        <div className='padding-20-md'>
+            <div className='display-flex flex-wrap gap-50'>
+                <div className='flex-1-1 border rounded padding-15 padding-bottom-20 bg-white'>
+                    <div className='text-size-16 text-medium margin-bottom-15'>BarList</div>
+                    <BarList
+                        data={transportData}
+                        valueFormatter={value => `${value}%`}
+                        onSelectRow={handleSelect}
+                        referenceValue={100}
+                        showAnimation
+                    />
+                </div>
+                <div className='flex-1-1 border rounded padding-15 padding-bottom-20 bg-white'>
+                    <div className='text-size-16 text-medium margin-bottom-15'>BarList reversed</div>
+                    <BarList
+                        data={transportData}
+                        valueFormatter={value => <span className='text-medium'>{value}%</span>}
+                        onSelectRow={handleSelect}
+                        referenceValue={100}
+                        showAnimation
+                        className='flex-row-reverse gap-10'
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const transportData = [
+    {
+        key: 'truck_utilization',
+        name: 'Truck utilization',
+        value: 78,
+        href: 'https://example.com/metrics/truck-utilization',
+    },
+    {
+        key: 'on_time_delivery',
+        name: 'On-time delivery',
+        value: 92,
+        href: 'https://example.com/metrics/on-time-delivery',
+    },
+    {
+        key: 'freight_cost_per_km',
+        name: 'Freight cost/km',
+        value: 65,
+    },
+    {
+        key: 'warehouse_efficiency',
+        name: 'Warehouse efficiency',
+        value: 84,
+    },
+    {
+        key: 'fuel_consumption',
+        name: 'Fuel consumption index',
+        value: 15,
+        href: 'https://example.com/metrics/fuel-consumption',
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<div class="padding-20-md">
+    <div class="display-flex flex-wrap gap-50">
+        <div class="flex-1-1 border rounded padding-15 padding-bottom-20 bg-white">
+            <div class="text-size-16 text-medium margin-bottom-15">BarList</div>
+            <div class="display-flex justify-content-between gap-15">
+                <div class="width-100pct space-y-5">
+                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 50.5418%;">
+                        </div>
+                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                            <a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
+                        </div>
+                    </div>
+                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 32.6269%;">
+                        </div>
+                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                            <div class="text-color-darker">Warehouse efficiency</div>
+                        </div>
+                    </div>
+                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 16.3751%;">
+                        </div>
+                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                            <a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
+                        </div>
+                    </div>
+                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 0.82775%;">
+                        </div>
+                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                            <div class="text-color-darker">Freight cost/km</div>
+                        </div>
+                    </div>
+                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 0%;">
+                        </div>
+                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                            <a href="https://example.com/metrics/fuel-consumption" class="text-color-darker" target="_blank" rel="noreferrer">Fuel consumption index</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="space-y-5">
+                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                        <div class="text-color-darkest">92%</div>
+                    </div>
+                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                        <div class="text-color-darkest">84%</div>
+                    </div>
+                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                        <div class="text-color-darkest">78%</div>
+                    </div>
+                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                        <div class="text-color-darkest">65%</div>
+                    </div>
+                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                        <div class="text-color-darkest">15%</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex-1-1 border rounded padding-15 padding-bottom-20 bg-white">
+            <div class="text-size-16 text-medium margin-bottom-15">BarList reversed</div>
+            <div class="display-flex justify-content-between gap-15 flex-row-reverse gap-10">
+                <div class="width-100pct space-y-5">
+                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 50.5418%;">
+                        </div>
+                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                            <a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
+                        </div>
+                    </div>
+                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 32.6269%;">
+                        </div>
+                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                            <div class="text-color-darker">Warehouse efficiency</div>
+                        </div>
+                    </div>
+                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 16.3751%;">
+                        </div>
+                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                            <a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
+                        </div>
+                    </div>
+                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 0.82775%;">
+                        </div>
+                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                            <div class="text-color-darker">Freight cost/km</div>
+                        </div>
+                    </div>
+                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
+                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 0%;">
+                        </div>
+                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                            <a href="https://example.com/metrics/fuel-consumption" class="text-color-darker" target="_blank" rel="noreferrer">Fuel consumption index</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="space-y-5">
+                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                        <div class="text-color-darkest">
+                            <span class="text-medium">92%</span>
+                        </div>
+                    </div>
+                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                        <div class="text-color-darkest">
+                            <span class="text-medium">84%</span>
+                        </div>
+                    </div>
+                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                        <div class="text-color-darkest">
+                            <span class="text-medium">78%</span>
+                        </div>
+                    </div>
+                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                        <div class="text-color-darkest">
+                            <span class="text-medium">65%</span>
+                        </div>
+                    </div>
+                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                        <div class="text-color-darkest">
+                            <span class="text-medium">15%</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| data | BarListRow<T>[] | — | Array of bar row data to be rendered. |
+| valueFormatter | (value: number) => string \| React.ReactElement | — | Optional function to format the numeric value displayed on the right side of each bar. |
+| referenceValue | number | max(data.value) | A reference value used to calculate relative widths. If not provided, the maximum value in the data array will be used. |
+| showAnimation | boolean | false | Whether to animate the bar width transitions using Framer Motion. |
+| onSelectRow | (payload: BarListRow<T>) => void | — | Callback fired when a bar is clicked. Receives the full data object of the selected bar. |
+| sortOrder | 'asc' \| 'desc' \| 'none' | 'none' | The sort order for the bars. |
+| rowHeight | number | 32 | Height of each bar row in pixels. |
+| opacity | number | 0.5 | Opacity applied to non-hovered bars. Value should be between 0 and 1. |
+| barColor | string | 'bg-highlight-light' | CSS class or color string used for the active/progress portion of each bar. |
+| labelColor | string | 'text-color-darker' | CSS class or color string used for the text labels. |
+| background | string | 'bg-transparent' | CSS class or color string used for the bar background. |
+| className | string | — | Additional classes for the wrapper element. |
+
+### Example: 95
+
+Damaged packages
+
+Returned packages
+
+In transit
+
+Stored in warehouse
+
+Shipped packages
+
+95
+
+320
+
+1200
+
+4200
+
+8500
+
+#### Summary
+
+Damaged packages
+
+Returned packages
+
+In transit
+
+Stored in warehouse
+
+Shipped packages
+
+95
+
+320
+
+1200
+
+4200
+
+8500
+
+#### React (tsx)
+
+```tsx
+import BarList from '@rio-cloud/rio-uikit/BarList';
+
+export default () => {
+    const handleSelect = (item: (typeof transportData)[number]) => {
+        console.log(`Clicked on: ${item.name}`);
+    };
+
+    return (
+        <div className='padding-20-md max-width-500'>
+            <BarList
+                data={transportData}
+                valueFormatter={value => <span className='text-color-dark'>{value}</span>}
+                onSelectRow={handleSelect}
+                showAnimation
+                background='bg-lightest'
+                color='text-color-darker'
+                barColor='bg-coldplay-moos'
+                sortOrder='asc'
+            />
+        </div>
+    );
+};
+
+const transportData = [
+    {
+        key: 'shipped',
+        name: 'Shipped packages',
+        value: 8500,
+    },
+    {
+        key: 'returned',
+        name: 'Returned packages',
+        value: 320,
+        barColor: 'bg-warmup-corn',
+    },
+    {
+        key: 'inTransit',
+        name: 'In transit',
+        value: 1200,
+    },
+    {
+        key: 'stored',
+        name: 'Stored in warehouse',
+        value: 4200,
+    },
+    {
+        key: 'damaged',
+        name: 'Damaged packages',
+        value: 95,
+        color: 'text-color-danger',
+        barColor: 'bg-warmup-salmon',
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<div class="padding-20-md max-width-500">
+    <div color="text-color-darker" class="display-flex justify-content-between gap-15">
+        <div class="width-100pct space-y-5">
+            <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-warmup-salmon" role="presentation" style="height: 25px; opacity: 0.5; width: 2%;">
+                </div>
+                <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                    <div class="text-color-danger">Damaged packages</div>
+                </div>
+            </div>
+            <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-warmup-corn" role="presentation" style="height: 25px; opacity: 0.5; width: 3.76471%;">
+                </div>
+                <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                    <div class="text-color-darker">Returned packages</div>
+                </div>
+            </div>
+            <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 14.1176%;">
+                </div>
+                <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                    <div class="text-color-darker">In transit</div>
+                </div>
+            </div>
+            <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 48.2451%;">
+                </div>
+                <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                    <div class="text-color-darker">Stored in warehouse</div>
+                </div>
+            </div>
+            <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
+                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 91.0597%;">
+                </div>
+                <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                    <div class="text-color-darker">Shipped packages</div>
+                </div>
+            </div>
+        </div>
+        <div class="space-y-5">
+            <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                <div class="text-color-darkest">
+                    <span class="text-color-dark">95</span>
+                </div>
+            </div>
+            <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                <div class="text-color-darkest">
+                    <span class="text-color-dark">320</span>
+                </div>
+            </div>
+            <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                <div class="text-color-darkest">
+                    <span class="text-color-dark">1200</span>
+                </div>
+            </div>
+            <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                <div class="text-color-darkest">
+                    <span class="text-color-dark">4200</span>
+                </div>
+            </div>
+            <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                <div class="text-color-darkest">
+                    <span class="text-color-dark">8500</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| data | BarListRow<T>[] | — | Array of bar row data to be rendered. |
+| valueFormatter | (value: number) => string \| React.ReactElement | — | Optional function to format the numeric value displayed on the right side of each bar. |
+| referenceValue | number | max(data.value) | A reference value used to calculate relative widths. If not provided, the maximum value in the data array will be used. |
+| showAnimation | boolean | false | Whether to animate the bar width transitions using Framer Motion. |
+| onSelectRow | (payload: BarListRow<T>) => void | — | Callback fired when a bar is clicked. Receives the full data object of the selected bar. |
+| sortOrder | 'asc' \| 'desc' \| 'none' | 'none' | The sort order for the bars. |
+| rowHeight | number | 32 | Height of each bar row in pixels. |
+| opacity | number | 0.5 | Opacity applied to non-hovered bars. Value should be between 0 and 1. |
+| barColor | string | 'bg-highlight-light' | CSS class or color string used for the active/progress portion of each bar. |
+| labelColor | string | 'text-color-darker' | CSS class or color string used for the text labels. |
+| background | string | 'bg-transparent' | CSS class or color string used for the bar background. |
+| className | string | — | Additional classes for the wrapper element. |

package/dist/docs/components/basicMap.md

@@ -0,0 +1,167 @@
+# Map
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#components/basicMap
+*Captured:* 2025-12-12T12:39:13.340Z
+
+The following map shows labels for locale de
+
+## Map
+
+### Example: Example 1
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### React (tsx)
+
+```tsx
+import Map from '@rio-cloud/rio-uikit/Map';
+
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+
+const position = { lat: 48.1351, lng: 11.582 };
+
+const MapExample = () => {
+    return (
+        <div className='height-300'>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={position}
+                zoom={10}
+                hideMapSettings
+            />
+        </div>
+    );
+};
+
+export default MapExample;
+```
+
+## Map with ScaleBar
+
+### Example: Example 2
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### React (tsx)
+
+```tsx
+import Map from '@rio-cloud/rio-uikit/Map';
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+
+const position = { lat: 48.1351, lng: 11.582 };
+
+const MapWithScaleBarExample = () => {
+    return (
+        <div className='height-300'>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={position}
+                zoom={10}
+                hideMapSettings
+                showScaleBar
+            />
+        </div>
+    );
+};
+
+export default MapWithScaleBarExample;
+```
+
+## Map localization
+
+### Example: Example 3
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Ansicht auswählen
+Kartenansicht
+Satellit
+
+Verkehrslage
+Verkehrsstörungen anzeigen
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Ansicht auswählen
+Kartenansicht
+Satellit
+
+Verkehrslage
+Verkehrsstörungen anzeigen
+
+#### React (tsx)
+
+```tsx
+import Map from '@rio-cloud/rio-uikit/Map';
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+
+const position = { lat: 48.1351, lng: 11.582 };
+
+const MapLocalizationExample = () => {
+    return (
+        <div className='height-300'>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                language='de'
+                center={position}
+                zoom={10}
+                hideMapSettings
+            />
+        </div>
+    );
+};
+
+export default MapLocalizationExample;
+```