@rio-cloud/uikit-mcp 1.1.9 → 1.1.10

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

@@ -0,0 +1,541 @@
+# Progress cards
+
+*Category:* Templates
+*Section:* Progress
+*Source:* https://uikit.developers.rio.cloud/#/templates/progress-cards
+*Captured:* 2026-04-20T12:55:47.181Z
+
+## Progress cards
+
+### Example: 12% more than last week
+
+Weekly report
+Orders processed
+
+80%
+
+12% more than last week
+
+Open rate
+
+3.1%
+
+3.1% more than last week
+
+Error rate
+
+2.01%
+
+2.01% more than last week
+
+#### React (tsx)
+
+```tsx
+import { FormattedNumber } from 'react-intl';
+
+import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';
+
+export default () => (
+    <div className='margin-25-md'>
+        <div className='margin-auto max-width-600'>
+            <div className='display-flex flex-column gap-20 border rounded padding-20 bg-white shadow-default'>
+                <div className='text-bold text-size-16 text-color-darker'>Weekly report</div>
+                <StatsWidget className='border-none'>
+                    <div className='display-flex justify-content-between gap-5'>
+                        <div className='display-flex align-items-center'>
+                            <div className='margin-right-3 text-color-darker text-medium'>Orders processed</div>
+                        </div>
+                        <span className='display-flex align-items-center gap-3 text-color-success'>
+                            <span className='rioglyph rioglyph-arrow-up' />
+                            <FormattedNumber value={80} style='unit' unit='percent' />
+                        </span>
+                    </div>
+                    <div className='progress margin-y-5'>
+                        <div className='progress-bar bg-info' style={{ width: `${80}%` }} />
+                    </div>
+                    <div className='text-color-dark text-size-12'>12% more than last week</div>
+                </StatsWidget>
+                <StatsWidget className='border-none'>
+                    <div className='display-flex justify-content-between gap-5'>
+                        <div className='display-flex align-items-center'>
+                            <div className='margin-right-3 text-color-darker text-medium'>Open rate</div>
+                        </div>
+                        <span className='display-flex align-items-center gap-3 text-color-success'>
+                            <span className='rioglyph rioglyph-arrow-up' />
+                            <FormattedNumber value={3.1} style='unit' unit='percent' />
+                        </span>
+                    </div>
+                    <div className='progress margin-y-5'>
+                        <div className='progress-bar bg-info' style={{ width: `${74}%` }} />
+                    </div>
+                    <div className='text-color-dark text-size-12'>3.1% more than last week</div>
+                </StatsWidget>
+                <StatsWidget className='border-none'>
+                    <div className='display-flex justify-content-between gap-5'>
+                        <div className='display-flex align-items-center'>
+                            <div className='margin-right-3 text-color-darker text-medium'>Error rate</div>
+                        </div>
+                        <span className='display-flex align-items-center gap-3 text-color-danger'>
+                            <span className='rioglyph rioglyph-arrow-up' />
+                            <FormattedNumber value={2.01} style='unit' unit='percent' />
+                        </span>
+                    </div>
+                    <div className='progress margin-y-5'>
+                        <div className='progress-bar bg-info' style={{ width: `${37}%` }} />
+                    </div>
+                    <div className='text-color-dark text-size-12'>2.01% more than last week</div>
+                </StatsWidget>
+            </div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md">
+    <div class="margin-auto max-width-600">
+        <div class="display-flex flex-column gap-20 border rounded padding-20 bg-white shadow-default">
+            <div class="text-bold text-size-16 text-color-darker">Weekly report</div>
+            <div class="StatsWidget border-none">
+                <div class="display-flex justify-content-between gap-5">
+                    <div class="display-flex align-items-center">
+                        <div class="margin-right-3 text-color-darker text-medium">Orders processed</div>
+                    </div>
+                    <span class="display-flex align-items-center gap-3 text-color-success">
+                        <span class="rioglyph rioglyph-arrow-up">
+                        </span>80%</span>
+                </div>
+                <div class="progress margin-y-5">
+                    <div class="progress-bar bg-info" style="width: 80%;">
+                    </div>
+                </div>
+                <div class="text-color-dark text-size-12">12% more than last week</div>
+            </div>
+            <div class="StatsWidget border-none">
+                <div class="display-flex justify-content-between gap-5">
+                    <div class="display-flex align-items-center">
+                        <div class="margin-right-3 text-color-darker text-medium">Open rate</div>
+                    </div>
+                    <span class="display-flex align-items-center gap-3 text-color-success">
+                        <span class="rioglyph rioglyph-arrow-up">
+                        </span>3.1%</span>
+                </div>
+                <div class="progress margin-y-5">
+                    <div class="progress-bar bg-info" style="width: 74%;">
+                    </div>
+                </div>
+                <div class="text-color-dark text-size-12">3.1% more than last week</div>
+            </div>
+            <div class="StatsWidget border-none">
+                <div class="display-flex justify-content-between gap-5">
+                    <div class="display-flex align-items-center">
+                        <div class="margin-right-3 text-color-darker text-medium">Error rate</div>
+                    </div>
+                    <span class="display-flex align-items-center gap-3 text-color-danger">
+                        <span class="rioglyph rioglyph-arrow-up">
+                        </span>2.01%</span>
+                </div>
+                <div class="progress margin-y-5">
+                    <div class="progress-bar bg-info" style="width: 37%;">
+                    </div>
+                </div>
+                <div class="text-color-dark text-size-12">2.01% more than last week</div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Example 2
+
+Shipment volume by region
+
+Region Shipments
+
+Germany 3,550
+
+France 1,798
+
+Italy 1,245
+
+Poland 986
+
+Netherlands 854
+
+Austria 650
+
+Switzerland 420
+
+#### React (tsx)
+
+```tsx
+import { FormattedNumber } from 'react-intl';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
+
+export default () => (
+    <div className='margin-25-md'>
+        <div className='margin-auto max-width-500'>
+            <div className='panel panel-default shadow-default'>
+                <div className='panel-heading display-flex gap-20 justify-content-between align-items-center'>
+                    <div className='text-size-16 text-medium text-color-darkest'>Shipment volume by region</div>
+                    <div>
+                        <SimpleTooltip content='Share data' placement='bottom'>
+                            <Button bsStyle='muted' iconName='rioglyph-share-alt' iconOnly />
+                        </SimpleTooltip>
+                    </div>
+                </div>
+                <div className='panel-body padding-0'>
+                    <table className='table table-head-filled table-bottom-rounded'>
+                        <colgroup>
+                            <col className='width-150 width-100-xs' />
+                            <col className='width-80 width-60-xs' />
+                            <col />
+                        </colgroup>
+                        <thead>
+                            <tr>
+                                <th>Region</th>
+                                <th colSpan={2}>Shipments</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Germany</td>
+                                <td>
+                                    <FormattedNumber value={3_550} />
+                                </td>
+                                <td>
+                                    <div className='progress progress-xs'>
+                                        <div className='progress-bar bg-primary' style={{ width: '71%' }} />
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>France</td>
+                                <td>
+                                    <FormattedNumber value={1_798} />
+                                </td>
+                                <td>
+                                    <div className='progress progress-xs'>
+                                        <div className='progress-bar bg-primary' style={{ width: '35.96%' }} />
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Italy</td>
+                                <td>
+                                    <FormattedNumber value={1_245} />
+                                </td>
+                                <td>
+                                    <div className='progress progress-xs'>
+                                        <div className='progress-bar bg-primary' style={{ width: '24.9%' }} />
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Poland</td>
+                                <td>
+                                    <FormattedNumber value={986} />
+                                </td>
+                                <td>
+                                    <div className='progress progress-xs'>
+                                        <div className='progress-bar bg-primary' style={{ width: '19.72%' }} />
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Netherlands</td>
+                                <td>
+                                    <FormattedNumber value={854} />
+                                </td>
+                                <td>
+                                    <div className='progress progress-xs'>
+                                        <div className='progress-bar bg-primary' style={{ width: '17.08%' }} />
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Austria</td>
+                                <td>
+                                    <FormattedNumber value={650} />
+                                </td>
+                                <td>
+                                    <div className='progress progress-xs'>
+                                        <div className='progress-bar bg-primary' style={{ width: '13%' }} />
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Switzerland</td>
+                                <td>
+                                    <FormattedNumber value={420} />
+                                </td>
+                                <td>
+                                    <div className='progress progress-xs'>
+                                        <div className='progress-bar bg-primary' style={{ width: '8.4%' }} />
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md">
+    <div class="margin-auto max-width-500">
+        <div class="panel panel-default shadow-default">
+            <div class="panel-heading display-flex gap-20 justify-content-between align-items-center">
+                <div class="text-size-16 text-medium text-color-darkest">Shipment volume by region</div>
+                <div>
+                    <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
+                        <span class="rioglyph rioglyph-share-alt">
+                        </span>
+                    </button>
+                </div>
+            </div>
+            <div class="panel-body padding-0">
+                <table class="table table-head-filled table-bottom-rounded">
+                    <colgroup>
+                        <col class="width-150 width-100-xs">
+                        <col class="width-80 width-60-xs">
+                        <col>
+                    </colgroup>
+                    <thead>
+                        <tr>
+                            <th>Region</th>
+                            <th colspan="2">Shipments</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>Germany</td>
+                            <td>3,550</td>
+                            <td>
+                                <div class="progress progress-xs">
+                                    <div class="progress-bar bg-primary" style="width: 71%;">
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>France</td>
+                            <td>1,798</td>
+                            <td>
+                                <div class="progress progress-xs">
+                                    <div class="progress-bar bg-primary" style="width: 35.96%;">
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Italy</td>
+                            <td>1,245</td>
+                            <td>
+                                <div class="progress progress-xs">
+                                    <div class="progress-bar bg-primary" style="width: 24.9%;">
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Poland</td>
+                            <td>986</td>
+                            <td>
+                                <div class="progress progress-xs">
+                                    <div class="progress-bar bg-primary" style="width: 19.72%;">
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Netherlands</td>
+                            <td>854</td>
+                            <td>
+                                <div class="progress progress-xs">
+                                    <div class="progress-bar bg-primary" style="width: 17.08%;">
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Austria</td>
+                            <td>650</td>
+                            <td>
+                                <div class="progress progress-xs">
+                                    <div class="progress-bar bg-primary" style="width: 13%;">
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>Switzerland</td>
+                            <td>420</td>
+                            <td>
+                                <div class="progress progress-xs">
+                                    <div class="progress-bar bg-primary" style="width: 8.4%;">
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Progress
+
+Progress
+Send reminder
+56
+Participants
+
+Signed
+12
+
+Waiting signature
+17
+
+Manager review
+22
+
+Self review
+5
+
+#### React (tsx)
+
+```tsx
+import Button from '@rio-cloud/rio-uikit/Button';
+import LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';
+
+export default () => (
+    <div className='margin-25-md'>
+        <div className='margin-auto max-width-500'>
+            <div className='padding-20 bg-white rounded shadow-muted'>
+                <div className='display-flex justify-content-between align-items-start margin-bottom-10'>
+                    <h3 className='text-color-darkest margin-0'>Progress</h3>
+                    <Button variant='link' iconName='rioglyph-time-alt'>
+                        Send reminder
+                    </Button>
+                </div>
+
+                <div className='display-flex align-items-end gap-5 margin-bottom-15'>
+                    <div className='text-size-h1 text-bold text-color-darkest'>56</div>
+                    <div className='text-color-dark line-height-h1'>Participants</div>
+                </div>
+
+                <div className='progress margin-bottom-20'>
+                    <div className='progress-bar progress-divider bg-info' style={{ width: '21%' }} />
+                    <div className='progress-bar progress-divider bg-spectrum-indigo' style={{ width: '30%' }} />
+                    <div className='progress-bar progress-divider bg-warning' style={{ width: '39%' }} />
+                    <div className='progress-bar progress-divider bg-gray' style={{ width: '10%' }} />
+                </div>
+
+                <div className='display-flex justify-content-between row-gap-10 flex-wrap text-color-darker'>
+                    <LabeledElement label='Signed' noGap>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='bg-info rounded-circle height-10 aspect-ratio-1' />
+                            <span className='text-bold'>12</span>
+                        </div>
+                    </LabeledElement>
+                    <LabeledElement label='Waiting signature' noGap>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='bg-spectrum-indigo rounded-circle height-10 aspect-ratio-1' />
+                            <span className='text-bold'>17</span>
+                        </div>
+                    </LabeledElement>
+                    <LabeledElement label='Manager review' noGap>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='bg-warning rounded-circle height-10 aspect-ratio-1' />
+                            <span className='text-bold'>22</span>
+                        </div>
+                    </LabeledElement>
+                    <LabeledElement label='Self review' noGap>
+                        <div className='display-flex align-items-center gap-5'>
+                            <span className='bg-gray rounded-circle height-10 aspect-ratio-1' />
+                            <span className='text-bold'>5</span>
+                        </div>
+                    </LabeledElement>
+                </div>
+            </div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md">
+    <div class="margin-auto max-width-500">
+        <div class="padding-20 bg-white rounded shadow-muted">
+            <div class="display-flex justify-content-between align-items-start margin-bottom-10">
+                <h3 class="text-color-darkest margin-0">Progress</h3>
+                <button type="button" class="btn btn-default btn-link btn-component" tabindex="0">
+                    <span class="rioglyph rioglyph-time-alt">
+                    </span>Send reminder</button>
+            </div>
+            <div class="display-flex align-items-end gap-5 margin-bottom-15">
+                <div class="text-size-h1 text-bold text-color-darkest">56</div>
+                <div class="text-color-dark line-height-h1">Participants</div>
+            </div>
+            <div class="progress margin-bottom-20">
+                <div class="progress-bar progress-divider bg-info" style="width: 21%;">
+                </div>
+                <div class="progress-bar progress-divider bg-spectrum-indigo" style="width: 30%;">
+                </div>
+                <div class="progress-bar progress-divider bg-warning" style="width: 39%;">
+                </div>
+                <div class="progress-bar progress-divider bg-gray" style="width: 10%;">
+                </div>
+            </div>
+            <div class="display-flex justify-content-between row-gap-10 flex-wrap text-color-darker">
+                <div class="LabeledElement display-flex flex-column">
+                    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Signed</div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="bg-info rounded-circle height-10 aspect-ratio-1">
+                        </span>
+                        <span class="text-bold">12</span>
+                    </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">Waiting signature</div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="bg-spectrum-indigo rounded-circle height-10 aspect-ratio-1">
+                        </span>
+                        <span class="text-bold">17</span>
+                    </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">Manager review</div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="bg-warning rounded-circle height-10 aspect-ratio-1">
+                        </span>
+                        <span class="text-bold">22</span>
+                    </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">Self review</div>
+                    <div class="display-flex align-items-center gap-5">
+                        <span class="bg-gray rounded-circle height-10 aspect-ratio-1">
+                        </span>
+                        <span class="text-bold">5</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```

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

@@ -0,0 +1,125 @@
+# Progress success
+
+*Category:* Templates
+*Section:* Progress
+*Source:* https://uikit.developers.rio.cloud/#/templates/progress-success
+*Captured:* 2026-04-20T12:55:46.695Z
+
+## Progress success
+
+### Example: Diam nonummy
+
+Lorem ipsum dolor sit amet
+Diam nonummy
+Consetetur sadipscing
+Voluptua
+Eirmod tempor
+Eum iriure
+500
+Sanctus
+No sea takimata
+Vulputate
+Tempor invidunt
+Duis autem vel eum
+
+#### React (tsx)
+
+```tsx
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+
+export default () => (
+    <div className='max-width-500 margin-auto'>
+        <div className='display-grid place-items-center margin-y-25 margin-x-25-sm'>
+            <div className='width-100pct max-width-500'>
+                <div className='panel panel-default position-relative'>
+                    <div
+                        className={
+                            'position-absolute top-0pct left-50pct translate-x-50pct-y-50pct ' +
+                            'border rounded-circle width-60 height-60 display-grid place-items-center bg-white'
+                        }
+                    >
+                        <span className='rioglyph rioglyph-ok text-color-success text-size-16 scale-150' />
+                    </div>
+                    <div className='panel-body padding-10 padding-25-ls'>
+                        <div className='border border-bottom-only padding-x-20 padding-top-25 padding-bottom-15 text-center'>
+                            <span className='text-color-success text-size-20'>Lorem ipsum dolor sit amet</span>
+                        </div>
+                        <div className='padding-10 padding-20-ls'>
+                            <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
+                                <FormLabel className='text-right margin-0 line-height-20'>Diam nonummy</FormLabel>
+                                <span>Consetetur sadipscing</span>
+                            </div>
+                            <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
+                                <FormLabel className='text-right margin-0 line-height-20'>Voluptua</FormLabel>
+                                <span>Eirmod tempor</span>
+                            </div>
+                            <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
+                                <FormLabel className='text-right margin-0 line-height-20'>Eum iriure</FormLabel>
+                                <span>500</span>
+                            </div>
+                            <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
+                                <FormLabel className='text-right margin-0 line-height-20'>Sanctus</FormLabel>
+                                <span className='text-medium'>No sea takimata</span>
+                            </div>
+                            <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
+                                <FormLabel className='text-right margin-0 line-height-20'>Vulputate</FormLabel>
+                                <div>
+                                    <div>Tempor invidunt</div>
+                                    <div className='margin-top-5 text-color-gray'>Duis autem vel eum</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-500 margin-auto">
+    <div class="display-grid place-items-center margin-y-25 margin-x-25-sm">
+        <div class="width-100pct max-width-500">
+            <div class="panel panel-default position-relative">
+                <div class="position-absolute top-0pct left-50pct translate-x-50pct-y-50pct border rounded-circle width-60 height-60 display-grid place-items-center bg-white">
+                    <span class="rioglyph rioglyph-ok text-color-success text-size-16 scale-150">
+                    </span>
+                </div>
+                <div class="panel-body padding-10 padding-25-ls">
+                    <div class="border border-bottom-only padding-x-20 padding-top-25 padding-bottom-15 text-center">
+                        <span class="text-color-success text-size-20">Lorem ipsum dolor sit amet</span>
+                    </div>
+                    <div class="padding-10 padding-20-ls">
+                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
+                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Diam nonummy</div>
+                            <span>Consetetur sadipscing</span>
+                        </div>
+                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
+                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Voluptua</div>
+                            <span>Eirmod tempor</span>
+                        </div>
+                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
+                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Eum iriure</div>
+                            <span>500</span>
+                        </div>
+                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
+                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Sanctus</div>
+                            <span class="text-medium">No sea takimata</span>
+                        </div>
+                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
+                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Vulputate</div>
+                            <div>
+                                <div>Tempor invidunt</div>
+                                <div class="margin-top-5 text-color-gray">Duis autem vel eum</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```