@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/switch.md

@@ -0,0 +1,554 @@
+# Switch
+
+*Category:* Components
+*Section:* Interaction
+*Source:* https://uikit.developers.rio.cloud/#components/switch
+*Captured:* 2025-12-12T12:38:18.761Z
+
+## Switch
+
+### Example: Example 1
+
+Switch
+
+Disabled Switch & disabled active Switch
+
+Colored Switch
+
+Switch with label
+
+Label
+
+Switch with label left
+
+Label
+
+Switch with text and min-width
+
+Switch with single text and label
+
+Beta feature toggle
+
+Switch in panels
+
+Switch in alerts
+
+#### Summary
+
+Switch
+
+Disabled Switch & disabled active Switch
+
+Colored Switch
+
+Switch with label
+
+Label
+
+Switch with label left
+
+Label
+
+Switch with text and min-width
+
+Switch with single text and label
+
+Beta feature toggle
+
+Switch in panels
+
+Switch in alerts
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Switch from '@rio-cloud/rio-uikit/Switch';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+
+export default () => {
+    const [switchStates, setSwitchStates] = useState<{
+        [key: string]: boolean;
+    }>({
+        switch1: true,
+        switch2: true,
+        switch3: false,
+        switch4: false,
+        switch5: false,
+        switch6: true,
+    });
+
+    const handleChange = (key: string) => {
+        const newState = !switchStates[key];
+        Notification.info(`Checked: ${newState}`);
+
+        setSwitchStates({
+            ...switchStates,
+            [key]: newState,
+        });
+    };
+
+    const { switch1, switch2, switch3, switch4, switch5, switch6 } = switchStates;
+
+    return (
+        <div>
+            <label>Switch</label>
+            <div>
+                <Switch onChange={() => handleChange('switch1')} checked={switch1} />
+            </div>
+            <hr />
+            <label>Disabled Switch & disabled active Switch</label>
+            <div className='display-flex'>
+                <div className='margin-right-10'>
+                    <Switch disabled />
+                </div>
+                <div>
+                    <Switch disabled checked />
+                </div>
+            </div>
+            <hr />
+            <label>Colored Switch</label>
+            <div className='display-flex flex-wrap gap-5'>
+                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='secondary' />
+                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='info' />
+                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='success' />
+                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='warning' />
+                <Switch onChange={() => handleChange('switch2')} checked={switch2} color='danger' />
+            </div>
+            <hr />
+            <label>Switch with label</label>
+            <div>
+                <Switch onChange={() => handleChange('switch3')} checked={switch3} labelPosition='right'>
+                    <span>Label</span>
+                </Switch>
+            </div>
+            <hr />
+            <label>Switch with label left</label>
+            <div>
+                <Switch onChange={() => handleChange('switch4')} checked={switch4} labelPosition='left'>
+                    <span>Label</span>
+                </Switch>
+            </div>
+            <hr />
+            <label>Switch with text and min-width</label>
+            <div>
+                <Switch
+                    onChange={() => handleChange('switch5')}
+                    checked={switch5}
+                    minWidth={50}
+                    enabledText='ON'
+                    disabledText='OFF'
+                />
+            </div>
+            <hr />
+            <label>Switch with single text and label</label>
+            <div>
+                <Switch
+                    onChange={() => handleChange('switch6')}
+                    checked={switch6}
+                    enabledText='Beta'
+                    labelPosition='right'
+                >
+                    <span>Beta feature toggle</span>
+                </Switch>
+            </div>
+            <hr />
+            <label>Switch in panels</label>
+            <div className='display-grid grid-cols-3 gap-15'>
+                <div className='panel panel-default'>
+                    <div className='panel-heading display-flex justify-content-end'>
+                        <div>
+                            <Switch onChange={() => handleChange('switch6')} checked={switch6} enabledText='Beta' />
+                        </div>
+                    </div>
+                    <div className='panel-body' />
+                </div>
+                <div className='panel panel-primary'>
+                    <div className='panel-heading display-flex justify-content-end'>
+                        <div>
+                            <Switch onChange={() => handleChange('switch6')} checked={switch6} enabledText='Beta' />
+                        </div>
+                    </div>
+                    <div className='panel-body' />
+                </div>
+                <div className='panel panel-success'>
+                    <div className='panel-heading display-flex justify-content-end'>
+                        <div>
+                            <Switch
+                                onChange={() => handleChange('switch6')}
+                                checked={switch6}
+                                enabledText='Beta'
+                                color='success'
+                            />
+                        </div>
+                    </div>
+                    <div className='panel-body' />
+                </div>
+                <div className='panel panel-warning'>
+                    <div className='panel-heading display-flex justify-content-end'>
+                        <div>
+                            <Switch
+                                onChange={() => handleChange('switch6')}
+                                checked={switch6}
+                                enabledText='Beta'
+                                color='warning'
+                            />
+                        </div>
+                    </div>
+                    <div className='panel-body' />
+                </div>
+                <div className='panel panel-danger'>
+                    <div className='panel-heading display-flex justify-content-end'>
+                        <div>
+                            <Switch
+                                onChange={() => handleChange('switch6')}
+                                checked={switch6}
+                                enabledText='Beta'
+                                color='danger'
+                            />
+                        </div>
+                    </div>
+                    <div className='panel-body' />
+                </div>
+            </div>
+            <label className='margin-top-25'>Switch in alerts</label>
+            <div className='display-grid grid-cols-3 gap-15'>
+                <div className='alert alert-warning'>
+                    <Switch
+                        onChange={() => handleChange('switch6')}
+                        checked={switch6}
+                        enabledText='Beta'
+                        color='warning'
+                    />
+                </div>
+                <div className='alert alert-danger'>
+                    <Switch
+                        onChange={() => handleChange('switch6')}
+                        checked={switch6}
+                        enabledText='Beta'
+                        color='danger'
+                    />
+                </div>
+                <div className='alert alert-info'>
+                    <Switch
+                        onChange={() => handleChange('switch6')}
+                        checked={switch6}
+                        enabledText='Beta'
+                        color='info'
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <label>Switch</label>
+    <div>
+        <div class="uikit-switch">
+            <label class="switch-label">
+                <input type="checkbox" class="switch-input" checked="">
+                <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
+                    <div class="switch-handle">
+                    </div>
+                </div>
+            </label>
+        </div>
+    </div>
+    <hr>
+    <label>Disabled Switch &amp; disabled active Switch</label>
+    <div class="display-flex">
+        <div class="margin-right-10">
+            <div class="uikit-switch">
+                <label class="switch-label cursor-not-allowed">
+                    <input type="checkbox" class="switch-input" disabled="">
+                    <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
+                        <div class="switch-handle">
+                        </div>
+                    </div>
+                </label>
+            </div>
+        </div>
+        <div>
+            <div class="uikit-switch">
+                <label class="switch-label cursor-not-allowed">
+                    <input type="checkbox" class="switch-input" disabled="" checked="">
+                    <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
+                        <div class="switch-handle">
+                        </div>
+                    </div>
+                </label>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <label>Colored Switch</label>
+    <div class="display-flex flex-wrap gap-5">
+        <div class="uikit-switch">
+            <label class="switch-label">
+                <input type="checkbox" class="switch-input" checked="">
+                <div class="switch-content" style="color: var(--brand-secondary); min-width: 40px;">
+                    <div class="switch-handle">
+                    </div>
+                </div>
+            </label>
+        </div>
+        <div class="uikit-switch">
+            <label class="switch-label">
+                <input type="checkbox" class="switch-input" checked="">
+                <div class="switch-content" style="color: var(--brand-info); min-width: 40px;">
+                    <div class="switch-handle">
+                    </div>
+                </div>
+            </label>
+        </div>
+        <div class="uikit-switch">
+            <label class="switch-label">
+                <input type="checkbox" class="switch-input" checked="">
+                <div class="switch-content" style="color: var(--brand-success); min-width: 40px;">
+                    <div class="switch-handle">
+                    </div>
+                </div>
+            </label>
+        </div>
+        <div class="uikit-switch">
+            <label class="switch-label">
+                <input type="checkbox" class="switch-input" checked="">
+                <div class="switch-content" style="color: var(--brand-warning); min-width: 40px;">
+                    <div class="switch-handle">
+                    </div>
+                </div>
+            </label>
+        </div>
+        <div class="uikit-switch">
+            <label class="switch-label">
+                <input type="checkbox" class="switch-input" checked="">
+                <div class="switch-content" style="color: var(--brand-danger); min-width: 40px;">
+                    <div class="switch-handle">
+                    </div>
+                </div>
+            </label>
+        </div>
+    </div>
+    <hr>
+    <label>Switch with label</label>
+    <div>
+        <div class="uikit-switch">
+            <label class="switch-label label-position-right">
+                <input type="checkbox" class="switch-input">
+                <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
+                    <div class="switch-handle">
+                    </div>
+                </div>
+                <span>Label</span>
+            </label>
+        </div>
+    </div>
+    <hr>
+    <label>Switch with label left</label>
+    <div>
+        <div class="uikit-switch">
+            <label class="switch-label label-position-left">
+                <input type="checkbox" class="switch-input">
+                <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
+                    <div class="switch-handle">
+                    </div>
+                </div>
+                <span>Label</span>
+            </label>
+        </div>
+    </div>
+    <hr>
+    <label>Switch with text and min-width</label>
+    <div>
+        <div class="uikit-switch">
+            <label class="switch-label">
+                <input type="checkbox" class="switch-input">
+                <div class="switch-content" style="color: var(--brand-primary); min-width: 50px;">
+                    <div class="switch-text" data-on="ON" data-off="OFF">
+                    </div>
+                    <div class="switch-handle">
+                    </div>
+                </div>
+            </label>
+        </div>
+    </div>
+    <hr>
+    <label>Switch with single text and label</label>
+    <div>
+        <div class="uikit-switch">
+            <label class="switch-label label-position-right">
+                <input type="checkbox" class="switch-input" checked="">
+                <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
+                    <div class="switch-text" data-on="Beta" data-off="Beta">
+                    </div>
+                    <div class="switch-handle">
+                    </div>
+                </div>
+                <span>Beta feature toggle</span>
+            </label>
+        </div>
+    </div>
+    <hr>
+    <label>Switch in panels</label>
+    <div class="display-grid grid-cols-3 gap-15">
+        <div class="panel panel-default">
+            <div class="panel-heading display-flex justify-content-end">
+                <div>
+                    <div class="uikit-switch">
+                        <label class="switch-label">
+                            <input type="checkbox" class="switch-input" checked="">
+                            <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
+                                <div class="switch-text" data-on="Beta" data-off="Beta">
+                                </div>
+                                <div class="switch-handle">
+                                </div>
+                            </div>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div class="panel-body">
+            </div>
+        </div>
+        <div class="panel panel-primary">
+            <div class="panel-heading display-flex justify-content-end">
+                <div>
+                    <div class="uikit-switch">
+                        <label class="switch-label">
+                            <input type="checkbox" class="switch-input" checked="">
+                            <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
+                                <div class="switch-text" data-on="Beta" data-off="Beta">
+                                </div>
+                                <div class="switch-handle">
+                                </div>
+                            </div>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div class="panel-body">
+            </div>
+        </div>
+        <div class="panel panel-success">
+            <div class="panel-heading display-flex justify-content-end">
+                <div>
+                    <div class="uikit-switch">
+                        <label class="switch-label">
+                            <input type="checkbox" class="switch-input" checked="">
+                            <div class="switch-content" style="color: var(--brand-success); min-width: 40px;">
+                                <div class="switch-text" data-on="Beta" data-off="Beta">
+                                </div>
+                                <div class="switch-handle">
+                                </div>
+                            </div>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div class="panel-body">
+            </div>
+        </div>
+        <div class="panel panel-warning">
+            <div class="panel-heading display-flex justify-content-end">
+                <div>
+                    <div class="uikit-switch">
+                        <label class="switch-label">
+                            <input type="checkbox" class="switch-input" checked="">
+                            <div class="switch-content" style="color: var(--brand-warning); min-width: 40px;">
+                                <div class="switch-text" data-on="Beta" data-off="Beta">
+                                </div>
+                                <div class="switch-handle">
+                                </div>
+                            </div>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div class="panel-body">
+            </div>
+        </div>
+        <div class="panel panel-danger">
+            <div class="panel-heading display-flex justify-content-end">
+                <div>
+                    <div class="uikit-switch">
+                        <label class="switch-label">
+                            <input type="checkbox" class="switch-input" checked="">
+                            <div class="switch-content" style="color: var(--brand-danger); min-width: 40px;">
+                                <div class="switch-text" data-on="Beta" data-off="Beta">
+                                </div>
+                                <div class="switch-handle">
+                                </div>
+                            </div>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div class="panel-body">
+            </div>
+        </div>
+    </div>
+    <label class="margin-top-25">Switch in alerts</label>
+    <div class="display-grid grid-cols-3 gap-15">
+        <div class="alert alert-warning">
+            <div class="uikit-switch">
+                <label class="switch-label">
+                    <input type="checkbox" class="switch-input" checked="">
+                    <div class="switch-content" style="color: var(--brand-warning); min-width: 40px;">
+                        <div class="switch-text" data-on="Beta" data-off="Beta">
+                        </div>
+                        <div class="switch-handle">
+                        </div>
+                    </div>
+                </label>
+            </div>
+        </div>
+        <div class="alert alert-danger">
+            <div class="uikit-switch">
+                <label class="switch-label">
+                    <input type="checkbox" class="switch-input" checked="">
+                    <div class="switch-content" style="color: var(--brand-danger); min-width: 40px;">
+                        <div class="switch-text" data-on="Beta" data-off="Beta">
+                        </div>
+                        <div class="switch-handle">
+                        </div>
+                    </div>
+                </label>
+            </div>
+        </div>
+        <div class="alert alert-info">
+            <div class="uikit-switch">
+                <label class="switch-label">
+                    <input type="checkbox" class="switch-input" checked="">
+                    <div class="switch-content" style="color: var(--brand-info); min-width: 40px;">
+                        <div class="switch-text" data-on="Beta" data-off="Beta">
+                        </div>
+                        <div class="switch-handle">
+                        </div>
+                    </div>
+                </label>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| keyName | String | — | Optional key that is used as key and as the id on the internal input. |
+| checked | Boolean | false | Set active / inactive state. |
+| disabled | Boolean | false | Disables the component. |
+| onChange | Function | — | Callback function triggered when clicking the button. |
+| minWidth | Number | — | The min-width of the switch. |
+| enabledText | String | — | ON text |
+| disabledText | String | — | OFF text |
+| className | string | — | Additional class names added |
+| labelPosition | String | — | Possible values are: left, right |
+| color | String | 'primary' | Defines the color of the switch. Possible values are:'primary', 'secondary', 'info', 'success', 'warning' or 'danger'. |

package/dist/docs/components/tables.md

@@ -0,0 +1,8 @@
+# Table Toolbar
+
+*Category:* Components
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#components/tables
+*Captured:* 2025-12-12T12:38:45.211Z
+
+The toolbar and its content has to be implemented by each team itself. Please use the following sample as a reference and adapt it accordingly.