@rio-cloud/uikit-mcp 1.1.4 → 1.1.6

package/dist/docs/components/pieCharts.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Charts
-*Source:* https://uikit.developers.rio.cloud/#components/pieCharts
-*Captured:* 2026-01-14T09:08:24.734Z
+*Source:* https://uikit.developers.rio.cloud/#/components/pieCharts
+*Captured:* 2026-02-23T13:42:57.670Z
 
 ## PieChart
 
@@ -393,47 +393,47 @@ const data: CustomData[] = [
                                 <g class="recharts-layer recharts-pie" tabindex="0">
                                     <g class="recharts-layer">
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="158.9296875" cy="134" fill="#67abc5 " stroke="#fff" name="Basistarif" color="color-coldplay-fountain" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 262.1297,134
+                                            <path cx="158.9296875" cy="134" fill="#67abc5 " stroke="#fff" name="Basistarif" color="color-coldplay-fountain" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 262.1297,134
     A 103.2,103.2,0,
     0,0,
-    93.9305,53.8417
-  L 105.3935,67.9782
+    98.4209,50.4002
+  L 109.092,65.1436
             A 85,85,0,
             0,1,
             243.9297,134 Z">
                                             </path>
                                         </g>
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="158.9296875" cy="134" fill="#4eccc1 " stroke="#fff" name="Diesel" color="color-coldplay-turquoise" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 89.8244,57.3534
+                                            <path cx="158.9296875" cy="134" fill="#4eccc1 " stroke="#fff" name="Diesel" color="color-coldplay-turquoise" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 94.1285,53.6816
     A 103.2,103.2,0,
     0,0,
-    58.2533,156.6829
-  L 76.0083,152.6826
+    56.7539,148.5034
+  L 74.7733,145.9456
             A 85,85,0,
             0,1,
-            102.0116,70.8705 Z">
+            105.5566,67.8463 Z">
                                             </path>
                                         </g>
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="158.9296875" cy="134" fill="#a1daa3 " stroke="#fff" name="Maut" color="color-coldplay-moos" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 59.5784,161.9208
+                                            <path cx="158.9296875" cy="134" fill="#a1daa3 " stroke="#fff" name="Maut" color="color-coldplay-moos" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 57.653,153.831
     A 103.2,103.2,0,
     0,0,
-    92.4377,212.9243
-  L 104.164,199.0055
+    85.2417,206.2518
+  L 98.2371,193.5097
             A 85,85,0,
             0,1,
-            77.0997,156.9968 Z">
+            75.5138,150.3336 Z">
                                             </path>
                                         </g>
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="158.9296875" cy="134" fill="#ff8e3c " stroke="#fff" name="Zuschläge" color="brand-warning" tabindex="-1" data-recharts-item-index="3" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 96.6594,216.2961
+                                            <path cx="158.9296875" cy="134" fill="#ff8e3c " stroke="#fff" name="Zuschläge" color="brand-warning" tabindex="-1" data-recharts-item-index="3" data-recharts-item-id="recharts-pie-:r1:" class="recharts-sector" d="M 89.1241,210.0093
     A 103.2,103.2,0,
     0,0,
-    113.0185,226.4251
-  L 121.1152,210.1253
+    104.0494,221.3979
+  L 113.7279,205.9847
             A 85,85,0,
             0,1,
-            107.6412,201.7826 Z">
+            101.4348,196.6046 Z">
                                             </path>
                                         </g>
                                     </g>
@@ -537,26 +537,26 @@ const data: CustomData[] = [
                                 <g class="recharts-layer recharts-pie" tabindex="0">
                                     <g class="recharts-layer">
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="172.9609375" cy="134" fill="#67abc5 " stroke="#fff" name="Basistarif" color="color-coldplay-fountain" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r3:" class="recharts-sector" d="M 276.1609,134
+                                            <path cx="172.9609375" cy="134" fill="#67abc5 " stroke="#fff" name="Basistarif" color="color-coldplay-fountain" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 276.1609,134
     A 103.2,103.2,0,
     0,0,
-    94.0604,67.4797
+    98.1504,62.9111
   L 172.9609,134 Z">
                                             </path>
                                         </g>
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="172.9609375" cy="134" fill="#4eccc1 " stroke="#fff" name="Diesel" color="color-coldplay-turquoise" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r3:" class="recharts-sector" d="M 94.0604,67.4797
+                                            <path cx="172.9609375" cy="134" fill="#4eccc1 " stroke="#fff" name="Diesel" color="color-coldplay-turquoise" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 98.1504,62.9111
     A 103.2,103.2,0,
     0,0,
-    79.9036,178.6158
+    76.3657,170.3262
   L 172.9609,134 Z">
                                             </path>
                                         </g>
                                         <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                            <path cx="172.9609375" cy="134" fill="#a1daa3 " stroke="#fff" name="Maut" color="color-coldplay-moos" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r3:" class="recharts-sector" d="M 79.9036,178.6158
+                                            <path cx="172.9609375" cy="134" fill="#a1daa3 " stroke="#fff" name="Maut" color="color-coldplay-moos" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r2:" class="recharts-sector" d="M 76.3657,170.3262
     A 103.2,103.2,0,
     0,0,
-    125.5861,225.6835
+    116.4012,220.3205
   L 172.9609,134 Z">
                                             </path>
                                         </g>
@@ -647,12 +647,10 @@ Zuschläge
 ```tsx
 import { useState } from 'react';
 
-import classNames from 'classnames';
-
+import classNames from '@rio-cloud/rio-uikit/classNames';
 import PieChart, { type PieSectorDataItem } from '@rio-cloud/rio-uikit/PieChart';
 import Sector from '@rio-cloud/rio-uikit/Sector';
 import Legend, { type LegendPayload } from '@rio-cloud/rio-uikit/Legend';
-import ChartTooltip from '@rio-cloud/rio-uikit/ChartTooltip';
 
 type CustomData = {
     label: string;
@@ -660,19 +658,18 @@ type CustomData = {
     costs: number;
 };
 
-// Don't render the default chart tooltip as we render our own active shape
-const NoContent = (): null => null;
-
 export default () => {
-    const [activeItem, setActiveItem] = useState<LegendPayload | null>(null);
     const [activeIndex, setActiveIndex] = useState<number>(0);
 
-    const handleMouseEnter = (payload: LegendPayload, index: number) => {
-        setActiveItem(payload);
+    const handleLegendMouseEnter = (_payload: LegendPayload, index: number) => {
+        setActiveIndex(index);
+    };
+
+    const handlePieMouseEnter = (_: unknown, index: number) => {
         setActiveIndex(index);
     };
 
-    const renderActiveShape = (props: PieSectorDataItem) => {
+    const renderShape = (props: PieSectorDataItem, index: number) => {
         const {
             cx,
             cy,
@@ -698,6 +695,20 @@ export default () => {
         const ey = my;
         const textAnchor = cos >= 0 ? 'start' : 'end';
 
+        if (index !== activeIndex) {
+            return (
+                <Sector
+                    cx={cx}
+                    cy={cy}
+                    innerRadius={innerRadius}
+                    outerRadius={outerRadius}
+                    startAngle={startAngle}
+                    endAngle={endAngle}
+                    fill={fill}
+                />
+            );
+        }
+
         return (
             <g>
                 <text x={cx} y={cy} dy={8} textAnchor='middle' fill={fill}>
@@ -747,21 +758,19 @@ export default () => {
                     dataUnit='%'
                     innerRadius={90}
                     outerRadius={110}
-                    // We have to render a custom tooltip to pass in the active index from hovering the legend
-                    tooltip={<ChartTooltip defaultIndex={activeIndex} active content={NoContent} />}
                     pieOptions={{
                         label: false,
                         labelLine: false,
-                        activeShape: renderActiveShape,
-                        onMouseEnter: handleMouseEnter,
+                        shape: renderShape,
+                        onMouseEnter: handlePieMouseEnter,
                     }}
                     legend={
                         <Legend
                             iconType='square'
                             iconSize={0}
-                            onMouseEnter={handleMouseEnter}
-                            formatter={(value: string | number, entry: LegendPayload) => {
-                                const isActive = activeItem?.value === value;
+                            onMouseEnter={handleLegendMouseEnter}
+                            formatter={(value: string | number, entry: LegendPayload, index: number) => {
+                                const isActive = index === activeIndex;
 
                                 const legendWrapperClasses = classNames(
                                     'display-inline-flex',
@@ -836,7 +845,7 @@ const data: CustomData[] = [
                                     </path>
                                 </svg>
                                 <span class="recharts-legend-item-text" style="color: rgb(103, 171, 197);">
-                                    <span class="display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded">
+                                    <span class="display-inline-flex align-items-center gap-5 cursor-pointer padding-y-3 padding-x-5 rounded bg-lightest">
                                         <span class="rounded height-15 width-15" style="background-color: rgb(103, 171, 197);">
                                         </span>
                                         <span class="text-color-dark">Basistarif</span>
@@ -896,7 +905,11 @@ const data: CustomData[] = [
                             </li>
                         </ul>
                     </div>
-                    <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="transition: transform 400ms; visibility: visible; pointer-events: none; position: absolute; top: 0px; left: 0px;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
+                        <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
+                            <p class="recharts-tooltip-label" style="margin: 0px;">
+                            </p>
+                        </div>
                     </div>
                     <svg cx="50%" cy="50%" role="application" tabindex="0" class="recharts-surface" width="568" height="368" viewBox="0 0 568 368" style="width: 100%; height: 100%; display: block;">
                         <title>
@@ -917,68 +930,66 @@ const data: CustomData[] = [
                             <g class="recharts-layer recharts-pie" tabindex="0">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <g class="recharts-layer recharts-active-shape">
-                                            <g>
-                                                <text x="234.4296875" y="184" dy="8" text-anchor="middle" fill="#67abc5 ">
-                                                </text>
-                                                <path cx="234.4296875" cy="184" fill="#67abc5 " class="recharts-sector" d="M 344.4297,184
+                                        <g>
+                                            <text x="234.4296875" y="184" dy="8" text-anchor="middle" fill="#67abc5 ">
+                                            </text>
+                                            <path cx="234.4296875" cy="184" fill="#67abc5 " class="recharts-sector" d="M 344.4297,184
     A 110,110,0,
     1,0,
-    125.7454,200.9624
-  L 145.5062,197.8783
+    125.7468,200.9713
+  L 145.5073,197.8856
             A 90,90,0,
             1,1,
             324.4297,184 Z">
-                                                </path>
-                                                <path cx="234.4296875" cy="184" fill="#67abc5 " class="recharts-sector" d="M 354.4297,184
+                                            </path>
+                                            <path cx="234.4296875" cy="184" fill="#67abc5 " class="recharts-sector" d="M 354.4297,184
     A 120,120,0,
     1,0,
-    115.865,202.5044
-  L 119.8171,201.8876
+    115.8665,202.5141
+  L 119.8186,201.897
             A 116,116,0,
             1,1,
             350.4297,184 Z">
-                                                </path>
-                                                <path d="M222.48574496401073,64.59588685184674L220.4950878746792,44.695201327154535L198.4950878746792,44.695201327154535" stroke="#67abc5 " fill="none">
-                                                </path>
-                                                <circle cx="198.4950878746792" cy="44.695201327154535" r="2" fill="#67abc5 " stroke="none">
-                                                </circle>
-                                                <text x="186.4950878746792" y="44.695201327154535" text-anchor="end" fill="#333">Basistarif:46.8 €</text>
-                                                <text x="186.4950878746792" y="44.695201327154535" dy="18" text-anchor="end" fill="#999">(Rate 55.01%)</text>
-                                            </g>
+                                            </path>
+                                            <path d="M222.48574496401073,64.59588685184674L220.4950878746792,44.695201327154535L198.4950878746792,44.695201327154535" stroke="#67abc5 " fill="none">
+                                            </path>
+                                            <circle cx="198.4950878746792" cy="44.695201327154535" r="2" fill="#67abc5 " stroke="none">
+                                            </circle>
+                                            <text x="186.4950878746792" y="44.695201327154535" text-anchor="end" fill="#333">Basistarif:46.8 €</text>
+                                            <text x="186.4950878746792" y="44.695201327154535" dy="18" text-anchor="end" fill="#999">(Rate 55.01%)</text>
                                         </g>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cx="234.4296875" cy="184" fill="#4eccc1 " stroke="#fff" name="Diesel" color="color-coldplay-turquoise" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 126.7821,206.6272
+                                        <path cx="234.4296875" cy="184" fill="#4eccc1 " class="recharts-sector" d="M 126.7839,206.6361
     A 110,110,0,
     0,0,
-    254.7698,292.1031
-  L 251.0716,272.448
+    254.7828,292.1006
+  L 251.0823,272.446
             A 90,90,0,
             0,1,
-            146.3544,202.5132 Z">
+            146.3559,202.5204 Z">
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cx="234.4296875" cy="184" fill="#a1daa3 " stroke="#fff" name="Maut" color="color-coldplay-moos" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 260.3996,290.8904
+                                        <path cx="234.4296875" cy="184" fill="#a1daa3 " class="recharts-sector" d="M 260.4125,290.8873
     A 110,110,0,
     0,0,
-    333.0419,232.7404
-  L 315.1124,223.8785
+    333.0489,232.7263
+  L 315.1181,223.867
             A 90,90,0,
             0,1,
-            255.6778,271.4558 Z">
+            255.6883,271.4532 Z">
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cx="234.4296875" cy="184" fill="#ff8e3c " stroke="#fff" name="Zuschläge" color="brand-warning" tabindex="-1" data-recharts-item-index="3" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 335.4577,227.5127
+                                        <path cx="234.4296875" cy="184" fill="#ff8e3c " class="recharts-sector" d="M 335.4639,227.4982
     A 110,110,0,
     0,0,
-    343.4524,198.63
-  L 323.6301,195.97
+    343.4546,198.6137
+  L 323.6319,195.9566
             A 90,90,0,
             0,1,
-            317.0889,219.6013 Z">
+            317.094,219.5894 Z">
                                         </path>
                                     </g>
                                 </g>
@@ -1153,7 +1164,7 @@ const data = [
                             <g class="recharts-layer recharts-pie" tabindex="0">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cy="125" cx="125" fill="#e22837 " stroke="#fff" name="0" color="color-rating-1" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r5:" class="recharts-sector" d="M 27,125
+                                        <path cy="125" cx="125" fill="#e22837 " stroke="#fff" name="0" color="color-rating-1" tabindex="-1" data-recharts-item-index="0" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 27,125
     A 98,98,0,
     0,1,
     44.9198,68.5096
@@ -1164,7 +1175,7 @@ const data = [
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cy="125" cx="125" fill="#ff8e3c " stroke="#fff" name="1" color="color-rating-2" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r5:" class="recharts-sector" d="M 45.9179,67.1206
+                                        <path cy="125" cx="125" fill="#ff8e3c " stroke="#fff" name="1" color="color-rating-2" tabindex="-1" data-recharts-item-index="1" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 45.9179,67.1206
     A 98,98,0,
     0,1,
     93.742,32.1187
@@ -1175,7 +1186,7 @@ const data = [
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cy="125" cx="125" fill="#f8c575 " stroke="#fff" name="2" color="color-rating-3" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r5:" class="recharts-sector" d="M 95.3678,31.5873
+                                        <path cy="125" cx="125" fill="#f8c575 " stroke="#fff" name="2" color="color-rating-3" tabindex="-1" data-recharts-item-index="2" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 95.3678,31.5873
     A 98,98,0,
     0,1,
     154.6322,31.5873
@@ -1186,7 +1197,7 @@ const data = [
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cy="125" cx="125" fill="#5cb85c " stroke="#fff" name="3" color="color-rating-4" tabindex="-1" data-recharts-item-index="3" data-recharts-item-id="recharts-pie-:r5:" class="recharts-sector" d="M 156.258,32.1187
+                                        <path cy="125" cx="125" fill="#5cb85c " stroke="#fff" name="3" color="color-rating-4" tabindex="-1" data-recharts-item-index="3" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 156.258,32.1187
     A 98,98,0,
     0,1,
     204.0821,67.1206
@@ -1197,7 +1208,7 @@ const data = [
                                         </path>
                                     </g>
                                     <g class="recharts-layer recharts-pie-sector" tabindex="-1">
-                                        <path cy="125" cx="125" fill="#4b924c " stroke="#fff" name="4" color="color-rating-5" tabindex="-1" data-recharts-item-index="4" data-recharts-item-id="recharts-pie-:r5:" class="recharts-sector" d="M 205.0802,68.5096
+                                        <path cy="125" cx="125" fill="#4b924c " stroke="#fff" name="4" color="color-rating-5" tabindex="-1" data-recharts-item-index="4" data-recharts-item-id="recharts-pie-:r4:" class="recharts-sector" d="M 205.0802,68.5096
     A 98,98,0,
     0,1,
     223,125

package/dist/docs/components/popover.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Misc
-*Source:* https://uikit.developers.rio.cloud/#components/popover
-*Captured:* 2026-01-14T09:07:46.848Z
+*Source:* https://uikit.developers.rio.cloud/#/components/popover
+*Captured:* 2026-02-23T13:42:27.140Z
 
 In order to use a Popover on an element, wrap it with the OverlayTrigger component.
 
@@ -77,6 +77,25 @@ export default () => (
 </div>
 ```
 
+#### Props (json)
+
+```json
+popperConfig={{
+    modifiers: [
+         {
+             name: 'offset',
+             options: {
+                 offset: [0, 5],
+             },
+         },
+         {
+             name: 'arrow',
+             options: {},
+         },
+     ],
+ }}
+```
+
 ## Extended example
 
 ### Example: Example 2
@@ -165,4 +184,23 @@ export default () => {
 <div class="padding-25 bg-lightest">
     <button type="button" class="btn btn-info btn-outline btn-lg btn-component" tabindex="0">Click Me</button>
 </div>
+```
+
+#### Props (json)
+
+```json
+popperConfig={{
+    modifiers: [
+         {
+             name: 'offset',
+             options: {
+                 offset: [0, 5],
+             },
+         },
+         {
+             name: 'arrow',
+             options: {},
+         },
+     ],
+ }}
 ```

package/dist/docs/components/position.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Misc
-*Source:* https://uikit.developers.rio.cloud/#components/position
-*Captured:* 2026-01-14T09:07:46.386Z
+*Source:* https://uikit.developers.rio.cloud/#/components/position
+*Captured:* 2026-02-23T13:42:26.945Z
 
 A helper component to format a latitude / longitude position.
 
@@ -39,4 +39,12 @@ export default () => (
     <hr>
     <span class="vehiclePositionInfo">N52° 7.394′ W12° 14.054′</span>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| latitude | number | — | The latitude to display. |
+| longitude | number | — | The longitude to display. |
+| address | string | — | Can be used to override the default output. |