@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/timepicker.md

@@ -0,0 +1,262 @@
+# TimePicker
+
+*Category:* Components
+*Section:* Pickers
+*Source:* https://uikit.developers.rio.cloud/#components/timepicker
+*Captured:* 2025-12-12T12:38:32.524Z
+
+## TimePicker
+
+### Example: Example 1
+
+Uncontrolled component
+
+With icon
+
+Controlled component without initial value
+
+Set current timeClear time
+
+#### Summary
+
+Uncontrolled component
+
+With icon
+
+Controlled component without initial value
+
+Set current timeClear time
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import TimePicker from '@rio-cloud/rio-uikit/TimePicker';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+import Button from '@rio-cloud/rio-uikit/Button';
+
+const getCurrentTime = () => {
+    const getPadded = (value: number) => (value >= 10 ? value : `0${value}`);
+    const date = new Date();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    return `${getPadded(hours)}:${getPadded(minutes)}`;
+};
+
+export default () => {
+    const [timeValue, setTimeValue] = useState('');
+
+    const notifyTime = (value: string) => Notification.info(`Entered time: ${value}`);
+
+    const handleChangeTime = (value: string) => {
+        setTimeValue(value);
+        notifyTime(value);
+    };
+
+    return (
+        <div className='row max-width-600'>
+            <div className='col-sm-6 form-group'>
+                <label>Uncontrolled component</label>
+                <TimePicker onChange={notifyTime} />
+            </div>
+            <div className='col-sm-6 form-group'>
+                <label>With icon</label>
+                <TimePicker onChange={notifyTime} showIcon />
+            </div>
+            <div className='col-sm-6'>
+                <div className='form-group'>
+                    <label>Controlled component without initial value</label>
+                    <TimePicker value={timeValue} onChange={handleChangeTime} showIcon />
+                </div>
+                <div className='btn-toolbar'>
+                    <Button onClick={() => setTimeValue(getCurrentTime())}>Set current time</Button>
+                    <Button onClick={() => setTimeValue('')}>Clear time</Button>
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="row max-width-600">
+    <div class="col-sm-6 form-group">
+        <label>Uncontrolled component</label>
+        <div class="TimePicker input-group">
+            <div class="form-control-feedback-wrapper">
+                <input class="TimePickerInput form-control" value="">
+            </div>
+            <div class="TimePickerIncreaseButton input-group-addon">
+                <div class="text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer">
+                    <div class="rioglyph rioglyph-chevron-left scale-90">
+                    </div>
+                </div>
+                <div class="text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer">
+                    <div class="rioglyph rioglyph-chevron-right scale-90">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-6 form-group">
+        <label>With icon</label>
+        <div class="TimePicker input-group">
+            <span class="input-group-addon">
+                <span class="rioglyph rioglyph-time-alt">
+                </span>
+            </span>
+            <div class="form-control-feedback-wrapper">
+                <input class="TimePickerInput form-control" value="">
+            </div>
+            <div class="TimePickerIncreaseButton input-group-addon">
+                <div class="text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer">
+                    <div class="rioglyph rioglyph-chevron-left scale-90">
+                    </div>
+                </div>
+                <div class="text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer">
+                    <div class="rioglyph rioglyph-chevron-right scale-90">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-6">
+        <div class="form-group">
+            <label>Controlled component without initial value</label>
+            <div class="TimePicker input-group">
+                <span class="input-group-addon">
+                    <span class="rioglyph rioglyph-time-alt">
+                    </span>
+                </span>
+                <div class="form-control-feedback-wrapper">
+                    <input class="TimePickerInput form-control" value="">
+                </div>
+            </div>
+        </div>
+        <div class="btn-toolbar">
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Set current time</button>
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Clear time</button>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |
+| onChange | Function | () => {} | Callback function when the value changes and is a valid time format. If not it handles the state internally until the time is valid and filled. |
+| alwaysShowMask | Boolean | true | Defines whether to always show the input mask placeholder. |
+| showIcon | Boolean | false | Defines whether or not to show the input icon. |
+| className | String | — | Additional classes to be set on the wrapper element. |
+| inputProps | Object | — | Additional props to be passed on to the underlying input component. |
+| └className | String | — | Additional classes to be set on the input element. |
+
+### Example: Example 2
+
+DefaultPlease insert a valid time
+
+With iconJust a normal warning message
+
+#### Summary
+
+DefaultPlease insert a valid time
+
+With iconJust a normal warning message
+
+#### React (tsx)
+
+```tsx
+import TimePicker from '@rio-cloud/rio-uikit/TimePicker';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+
+export default () => {
+    const notifyTime = (value: string) => Notification.info(`Entered time: ${value}`);
+
+    return (
+        <div className='max-width-600 height-100 display-flex gap-25'>
+            <div className='flex-1-1 max-width-150 form-group has-feedback has-error'>
+                <label>Default</label>
+                <TimePicker errorMessage='Please insert a valid time' />
+            </div>
+            <div className='flex-1-1 max-width-150 form-group has-feedback has-warning'>
+                <label>With icon</label>
+                <TimePicker showIcon warningMessage='Just a normal warning message' messageWhiteSpace='nowrap' />
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-600 height-100 display-flex gap-25">
+    <div class="flex-1-1 max-width-150 form-group has-feedback has-error">
+        <label>Default</label>
+        <div class="TimePicker input-group">
+            <div class="form-control-feedback-wrapper">
+                <input class="TimePickerInput form-control" value="">
+                <span class="form-control-feedback rioglyph rioglyph-error-sign">
+                </span>
+                <span class="help-block white-space-normal">
+                    <span>Please insert a valid time</span>
+                </span>
+            </div>
+            <div class="TimePickerIncreaseButton input-group-addon">
+                <div class="text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer">
+                    <div class="rioglyph rioglyph-chevron-left scale-90">
+                    </div>
+                </div>
+                <div class="text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer">
+                    <div class="rioglyph rioglyph-chevron-right scale-90">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="flex-1-1 max-width-150 form-group has-feedback has-warning">
+        <label>With icon</label>
+        <div class="TimePicker input-group">
+            <span class="input-group-addon">
+                <span class="rioglyph rioglyph-time-alt">
+                </span>
+            </span>
+            <div class="form-control-feedback-wrapper">
+                <input class="TimePickerInput form-control" value="">
+                <span class="form-control-feedback rioglyph rioglyph-warning-sign">
+                </span>
+                <span class="help-block white-space-nowrap">
+                    <span>Just a normal warning message</span>
+                </span>
+            </div>
+            <div class="TimePickerIncreaseButton input-group-addon">
+                <div class="text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer">
+                    <div class="rioglyph rioglyph-chevron-left scale-90">
+                    </div>
+                </div>
+                <div class="text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer">
+                    <div class="rioglyph rioglyph-chevron-right scale-90">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |
+| onChange | Function | () => {} | Callback function when the value changes and is a valid time format. If not it handles the state internally until the time is valid and filled. |
+| alwaysShowMask | Boolean | true | Defines whether to always show the input mask placeholder. |
+| showIcon | Boolean | false | Defines whether or not to show the input icon. |
+| className | String | — | Additional classes to be set on the wrapper element. |
+| inputProps | Object | — | Additional props to be passed on to the underlying input component. |
+| └className | String | — | Additional classes to be set on the input element. |

package/dist/docs/components/toggleButton.md

@@ -0,0 +1,178 @@
+# ToggleButton
+
+*Category:* Components
+*Section:* Interaction
+*Source:* https://uikit.developers.rio.cloud/#components/toggleButton
+*Captured:* 2025-12-12T12:38:20.656Z
+
+This toggle button is based on the button component that can be used directly.
+
+## ToggleButton
+
+### Example: Default ToggleButtons
+
+Default ToggleButtons
+btn-default (untoggled)btn-default (toggled)btn-primary (untoggled)
+Other Styles
+
+#### Summary
+
+Default ToggleButtons
+btn-default (untoggled)btn-default (toggled)btn-primary (untoggled)
+Other Styles
+
+#### React (tsx)
+
+```tsx
+import ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+
+const handleClick = (response: boolean) => Notification.info(`Toggled: ${response}`);
+
+export default () => (
+    <div>
+        <FormLabel>Default ToggleButtons</FormLabel>
+        <div className='btn-toolbar'>
+            <ToggleButton onClick={handleClick}>btn-default (untoggled)</ToggleButton>
+            <ToggleButton active onClick={handleClick}>
+                btn-default (toggled)
+            </ToggleButton>
+            <ToggleButton bsStyle='primary' onClick={handleClick}>
+                btn-primary (untoggled)
+            </ToggleButton>
+        </div>
+        <FormLabel className='margin-top-15'>Other Styles</FormLabel>
+        <div className='btn-toolbar'>
+            <ToggleButton bsStyle='success' iconName='rioglyph-thumbs-up' iconOnly />
+            <ToggleButton bsStyle='info' iconName='rioglyph-status-driving' iconOnly />
+            <ToggleButton bsStyle='warning' iconName='rioglyph-warning-sign' iconOnly />
+            <ToggleButton bsStyle='danger' iconName='rioglyph-error-sign' iconOnly />
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Default ToggleButtons</div>
+    <div class="btn-toolbar">
+        <button type="button" class="btn btn-default btn-toggle btn-component" tabindex="0">btn-default (untoggled)</button>
+        <button type="button" class="btn btn-default btn-toggle active btn-component" tabindex="0">btn-default (toggled)</button>
+        <button type="button" class="btn btn-primary btn-toggle btn-component" tabindex="0">btn-primary (untoggled)</button>
+    </div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Other Styles</div>
+    <div class="btn-toolbar">
+        <button type="button" class="btn btn-success btn-toggle btn-icon-only btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-thumbs-up">
+            </span>
+        </button>
+        <button type="button" class="btn btn-info btn-toggle btn-icon-only btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-status-driving">
+            </span>
+        </button>
+        <button type="button" class="btn btn-warning btn-toggle btn-icon-only btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-warning-sign">
+            </span>
+        </button>
+        <button type="button" class="btn btn-danger btn-toggle btn-icon-only btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-error-sign">
+            </span>
+        </button>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | Boolean | false | Set the button disabled. |
+| active | Boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the "active" prop. |
+| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| iconName | String | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
+| iconRight | Boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
+| multiline | Boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
+| block | Boolean | false | Defines whether the button takes up the full width of the parent element. |
+| onClick | Function | () => {} | Callback function triggered when clicking the button. |
+| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTED_FILLED and Button.MUTED |
+| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |
+| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANT_LINK, Button.VARIANT_LINK_INLINE, Button.VARIANT_OUTLINE and Button.VARIANT_ACTION |
+| className | String | — | Additional classes to be set on the button element. |
+| children | any | — | Any element to be rendered on the button. |
+
+### Example: Controlled ToggleButton
+
+Controlled ToggleButton
+
+Control the toggle
+
+#### Summary
+
+Controlled ToggleButton
+
+Control the toggle
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';
+import Button from '@rio-cloud/rio-uikit/Button';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+
+const handleClick = (response: boolean) => Notification.info(`Toggled: ${response}`);
+
+export default () => {
+    const [isToggled, setIsToggled] = useState(false);
+
+    return (
+        <div>
+            <FormLabel>Controlled ToggleButton</FormLabel>
+            <div className='margin-bottom-25'>
+                <ToggleButton active={isToggled} iconName='rioglyph-cards-table' iconOnly />
+            </div>
+            <Button onClick={() => setIsToggled(!isToggled)}>Control the toggle</Button>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Controlled ToggleButton</div>
+    <div class="margin-bottom-25">
+        <button type="button" class="btn btn-default btn-toggle btn-icon-only btn-component" tabindex="0">
+            <span class="rioglyph rioglyph-cards-table">
+            </span>
+        </button>
+    </div>
+    <button type="button" class="btn btn-default btn-component" tabindex="0">Control the toggle</button>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | Boolean | false | Set the button disabled. |
+| active | Boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| asToggle | Boolean | false | Use the button as a toggle button. The toggle state can be controlled viw the "active" prop. |
+| iconOnly | Boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| iconName | String | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
+| iconRight | Boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
+| multiline | Boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
+| block | Boolean | false | Defines whether the button takes up the full width of the parent element. |
+| onClick | Function | () => {} | Callback function triggered when clicking the button. |
+| bsStyle | String | default | Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTED_FILLED and Button.MUTED |
+| bsSize | String | — | Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG |
+| variant | String | — | Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANT_LINK, Button.VARIANT_LINK_INLINE, Button.VARIANT_OUTLINE and Button.VARIANT_ACTION |
+| className | String | — | Additional classes to be set on the button element. |
+| children | any | — | Any element to be rendered on the button. |