@rio-cloud/uikit-mcp 1.1.4 → 1.1.6

package/dist/docs/components/timepicker.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Pickers
-*Source:* https://uikit.developers.rio.cloud/#components/timepicker
-*Captured:* 2026-01-14T09:07:21.593Z
+*Source:* https://uikit.developers.rio.cloud/#/components/timepicker
+*Captured:* 2026-02-23T13:42:01.525Z
 
 ## TimePicker
 
@@ -17,6 +17,8 @@ Controlled component without initial value
 
 Set current timeClear time
 
+Disabled
+
 #### Summary
 
 Uncontrolled component
@@ -27,6 +29,8 @@ Controlled component without initial value
 
 Set current timeClear time
 
+Disabled
+
 #### React (tsx)
 
 ```tsx
@@ -74,6 +78,10 @@ export default () => {
                     <Button onClick={() => setTimeValue('')}>Clear time</Button>
                 </div>
             </div>
+            <div className='col-sm-6 form-group'>
+                <label>Disabled</label>
+                <TimePicker value='12:00' disabled />
+            </div>
         </div>
     );
 };
@@ -85,17 +93,19 @@ export default () => {
 <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 class="TimePicker">
+            <div class="input-group">
+                <div class="form-control-feedback-wrapper">
+                    <input class="TimePickerInput form-control" value="">
                 </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 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>
@@ -103,21 +113,23 @@ export default () => {
     </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">
+        <div class="TimePicker">
+            <div class="input-group">
+                <span class="input-group-addon">
+                    <span class="rioglyph rioglyph-time-alt">
+                    </span>
                 </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 class="form-control-feedback-wrapper">
+                    <input class="TimePickerInput form-control" value="">
                 </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 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>
@@ -126,13 +138,15 @@ export default () => {
     <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">
+            <div class="TimePicker">
+                <div class="input-group">
+                    <span class="input-group-addon">
+                        <span class="rioglyph rioglyph-time-alt">
+                        </span>
                     </span>
-                </span>
-                <div class="form-control-feedback-wrapper">
-                    <input class="TimePickerInput form-control" value="">
+                    <div class="form-control-feedback-wrapper">
+                        <input class="TimePickerInput form-control" value="">
+                    </div>
                 </div>
             </div>
         </div>
@@ -141,9 +155,46 @@ export default () => {
             <button type="button" class="btn btn-default btn-component" tabindex="0">Clear time</button>
         </div>
     </div>
+    <div class="col-sm-6 form-group">
+        <label>Disabled</label>
+        <div class="TimePicker">
+            <div class="input-group">
+                <div class="form-control-feedback-wrapper">
+                    <input class="TimePickerInput form-control" disabled="" value="">
+                </div>
+                <div class="TimePickerIncreaseButton input-group-addon pointer-events-none bg-lightest">
+                    <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>
 </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 | (value: string) => void | — | Callback function when the value changes and is a valid time format. It also emits an empty string when the input is cleared. 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 to show the input icon. |
+| dropdown | boolean | false | Defines whether to show a dropdown with pre-defined time values. |
+| minuteOffset | number | 15 | Defines the minute interval for time controls and dropdown values. Invalid values fallback to 15. |
+| disabled | boolean | false | Defines whether the component is disabled. |
+| errorMessage | string \| React.ReactNode | — | Input error message. |
+| warningMessage | string \| React.ReactNode | — | Input warning message. |
+| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
+| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' \| 'onChange'> | — | Additional properties to be set on the input element. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+
 ### Example: Example 2
 
 DefaultPlease insert a valid time
@@ -186,22 +237,24 @@ export default () => {
 <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 class="TimePicker">
+            <div class="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="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 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>
@@ -209,30 +262,601 @@ export default () => {
     </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>
+        <div class="TimePicker">
+            <div class="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>
+</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 | (value: string) => void | — | Callback function when the value changes and is a valid time format. It also emits an empty string when the input is cleared. 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 to show the input icon. |
+| dropdown | boolean | false | Defines whether to show a dropdown with pre-defined time values. |
+| minuteOffset | number | 15 | Defines the minute interval for time controls and dropdown values. Invalid values fallback to 15. |
+| disabled | boolean | false | Defines whether the component is disabled. |
+| errorMessage | string \| React.ReactNode | — | Input error message. |
+| warningMessage | string \| React.ReactNode | — | Input warning message. |
+| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
+| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' \| 'onChange'> | — | Additional properties to be set on the input element. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+
+### Example: Example 3
+
+Mandatory value
+
+#### Summary
+
+Mandatory value
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import classNames from '@rio-cloud/rio-uikit/classNames';
+import TimePicker from '@rio-cloud/rio-uikit/TimePicker';
+
+export default () => {
+    const [timeValue, setTimeValue] = useState('12:00');
+    const isInvalid = timeValue === '';
+
+    return (
+        <div className='max-width-300'>
+            <div className={classNames('form-group has-feedback', isInvalid && 'has-error')}>
+                <label>Mandatory value</label>
+                <TimePicker
+                    value={timeValue}
+                    onChange={setTimeValue}
+                    errorMessage={isInvalid ? 'This field is required' : undefined}
+                />
             </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>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-300">
+    <div class="form-group has-feedback">
+        <label>Mandatory value</label>
+        <div class="TimePicker">
+            <div class="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 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>
+```
+
+#### 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 | (value: string) => void | — | Callback function when the value changes and is a valid time format. It also emits an empty string when the input is cleared. 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 to show the input icon. |
+| dropdown | boolean | false | Defines whether to show a dropdown with pre-defined time values. |
+| minuteOffset | number | 15 | Defines the minute interval for time controls and dropdown values. Invalid values fallback to 15. |
+| disabled | boolean | false | Defines whether the component is disabled. |
+| errorMessage | string \| React.ReactNode | — | Input error message. |
+| warningMessage | string \| React.ReactNode | — | Input warning message. |
+| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
+| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' \| 'onChange'> | — | Additional properties to be set on the input element. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+
+## TimePicker with dropdown
+
+### Example: Example 4
+
+Controlled component with dropdown
+
+00:00
+00:30
+01:00
+01:30
+02:00
+02:30
+03:00
+03:30
+04:00
+04:30
+05:00
+05:30
+06:00
+06:30
+07:00
+07:30
+08:00
+08:30
+09:00
+09:30
+10:00
+10:30
+11:00
+11:30
+12:00
+12:30
+13:00
+13:30
+14:00
+14:30
+15:00
+15:30
+16:00
+16:30
+17:00
+17:30
+18:00
+18:30
+19:00
+19:30
+20:00
+20:30
+21:00
+21:30
+22:00
+22:30
+23:00
+23:30
+
+#### Summary
+
+Controlled component with dropdown
+
+00:00
+00:30
+01:00
+01:30
+02:00
+02:30
+03:00
+03:30
+04:00
+04:30
+05:00
+05:30
+06:00
+06:30
+07:00
+07:30
+08:00
+08:30
+09:00
+09:30
+10:00
+10:30
+11:00
+11:30
+12:00
+12:30
+13:00
+13:30
+14:00
+14:30
+15:00
+15:30
+16:00
+16:30
+17:00
+17:30
+18:00
+18:30
+19:00
+19:30
+20:00
+20:30
+21:00
+21:30
+22:00
+22:30
+23:00
+23:30
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import TimePicker from '@rio-cloud/rio-uikit/TimePicker';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+
+export default () => {
+    const [timeValue, setTimeValue] = useState('12:00');
+
+    const handleChangeTime = (value: string) => {
+        setTimeValue(value);
+        Notification.info(`Entered time: ${value}`);
+    };
+
+    return (
+        <div className='max-width-200'>
+            <div className='form-group'>
+                <label>Controlled component with dropdown</label>
+                <TimePicker value={timeValue} onChange={handleChangeTime} dropdown minuteOffset={30} showIcon />
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-200">
+    <div class="form-group">
+        <label>Controlled component with dropdown</label>
+        <div class="TimePicker dropdown dropup">
+            <div class="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>
+            <ul class="dropdown-menu max-height-200 overflow-auto width-100pct" role="menu">
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="00:00" data-item-index="0">
+                        <span class="selected-option-dropdown-item">00:00</span>
+                        <input type="hidden" value="00:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="00:30" data-item-index="1">
+                        <span class="selected-option-dropdown-item">00:30</span>
+                        <input type="hidden" value="00:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="01:00" data-item-index="2">
+                        <span class="selected-option-dropdown-item">01:00</span>
+                        <input type="hidden" value="01:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="01:30" data-item-index="3">
+                        <span class="selected-option-dropdown-item">01:30</span>
+                        <input type="hidden" value="01:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="02:00" data-item-index="4">
+                        <span class="selected-option-dropdown-item">02:00</span>
+                        <input type="hidden" value="02:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="02:30" data-item-index="5">
+                        <span class="selected-option-dropdown-item">02:30</span>
+                        <input type="hidden" value="02:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="03:00" data-item-index="6">
+                        <span class="selected-option-dropdown-item">03:00</span>
+                        <input type="hidden" value="03:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="03:30" data-item-index="7">
+                        <span class="selected-option-dropdown-item">03:30</span>
+                        <input type="hidden" value="03:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="04:00" data-item-index="8">
+                        <span class="selected-option-dropdown-item">04:00</span>
+                        <input type="hidden" value="04:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="04:30" data-item-index="9">
+                        <span class="selected-option-dropdown-item">04:30</span>
+                        <input type="hidden" value="04:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="05:00" data-item-index="10">
+                        <span class="selected-option-dropdown-item">05:00</span>
+                        <input type="hidden" value="05:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="05:30" data-item-index="11">
+                        <span class="selected-option-dropdown-item">05:30</span>
+                        <input type="hidden" value="05:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="06:00" data-item-index="12">
+                        <span class="selected-option-dropdown-item">06:00</span>
+                        <input type="hidden" value="06:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="06:30" data-item-index="13">
+                        <span class="selected-option-dropdown-item">06:30</span>
+                        <input type="hidden" value="06:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="07:00" data-item-index="14">
+                        <span class="selected-option-dropdown-item">07:00</span>
+                        <input type="hidden" value="07:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="07:30" data-item-index="15">
+                        <span class="selected-option-dropdown-item">07:30</span>
+                        <input type="hidden" value="07:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="08:00" data-item-index="16">
+                        <span class="selected-option-dropdown-item">08:00</span>
+                        <input type="hidden" value="08:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="08:30" data-item-index="17">
+                        <span class="selected-option-dropdown-item">08:30</span>
+                        <input type="hidden" value="08:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="09:00" data-item-index="18">
+                        <span class="selected-option-dropdown-item">09:00</span>
+                        <input type="hidden" value="09:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="09:30" data-item-index="19">
+                        <span class="selected-option-dropdown-item">09:30</span>
+                        <input type="hidden" value="09:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="10:00" data-item-index="20">
+                        <span class="selected-option-dropdown-item">10:00</span>
+                        <input type="hidden" value="10:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="10:30" data-item-index="21">
+                        <span class="selected-option-dropdown-item">10:30</span>
+                        <input type="hidden" value="10:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="11:00" data-item-index="22">
+                        <span class="selected-option-dropdown-item">11:00</span>
+                        <input type="hidden" value="11:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="11:30" data-item-index="23">
+                        <span class="selected-option-dropdown-item">11:30</span>
+                        <input type="hidden" value="11:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="12:00" data-item-index="24">
+                        <span class="selected-option-dropdown-item">12:00</span>
+                        <input type="hidden" value="12:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="12:30" data-item-index="25">
+                        <span class="selected-option-dropdown-item">12:30</span>
+                        <input type="hidden" value="12:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="13:00" data-item-index="26">
+                        <span class="selected-option-dropdown-item">13:00</span>
+                        <input type="hidden" value="13:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="13:30" data-item-index="27">
+                        <span class="selected-option-dropdown-item">13:30</span>
+                        <input type="hidden" value="13:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="14:00" data-item-index="28">
+                        <span class="selected-option-dropdown-item">14:00</span>
+                        <input type="hidden" value="14:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="14:30" data-item-index="29">
+                        <span class="selected-option-dropdown-item">14:30</span>
+                        <input type="hidden" value="14:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="15:00" data-item-index="30">
+                        <span class="selected-option-dropdown-item">15:00</span>
+                        <input type="hidden" value="15:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="15:30" data-item-index="31">
+                        <span class="selected-option-dropdown-item">15:30</span>
+                        <input type="hidden" value="15:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="16:00" data-item-index="32">
+                        <span class="selected-option-dropdown-item">16:00</span>
+                        <input type="hidden" value="16:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="16:30" data-item-index="33">
+                        <span class="selected-option-dropdown-item">16:30</span>
+                        <input type="hidden" value="16:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="17:00" data-item-index="34">
+                        <span class="selected-option-dropdown-item">17:00</span>
+                        <input type="hidden" value="17:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="17:30" data-item-index="35">
+                        <span class="selected-option-dropdown-item">17:30</span>
+                        <input type="hidden" value="17:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="18:00" data-item-index="36">
+                        <span class="selected-option-dropdown-item">18:00</span>
+                        <input type="hidden" value="18:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="18:30" data-item-index="37">
+                        <span class="selected-option-dropdown-item">18:30</span>
+                        <input type="hidden" value="18:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="19:00" data-item-index="38">
+                        <span class="selected-option-dropdown-item">19:00</span>
+                        <input type="hidden" value="19:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="19:30" data-item-index="39">
+                        <span class="selected-option-dropdown-item">19:30</span>
+                        <input type="hidden" value="19:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="20:00" data-item-index="40">
+                        <span class="selected-option-dropdown-item">20:00</span>
+                        <input type="hidden" value="20:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="20:30" data-item-index="41">
+                        <span class="selected-option-dropdown-item">20:30</span>
+                        <input type="hidden" value="20:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="21:00" data-item-index="42">
+                        <span class="selected-option-dropdown-item">21:00</span>
+                        <input type="hidden" value="21:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="21:30" data-item-index="43">
+                        <span class="selected-option-dropdown-item">21:30</span>
+                        <input type="hidden" value="21:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="22:00" data-item-index="44">
+                        <span class="selected-option-dropdown-item">22:00</span>
+                        <input type="hidden" value="22:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="22:30" data-item-index="45">
+                        <span class="selected-option-dropdown-item">22:30</span>
+                        <input type="hidden" value="22:30">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="23:00" data-item-index="46">
+                        <span class="selected-option-dropdown-item">23:00</span>
+                        <input type="hidden" value="23:00">
+                    </a>
+                </li>
+                <li class="" role="listitem">
+                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="23:30" data-item-index="47">
+                        <span class="selected-option-dropdown-item">23:30</span>
+                        <input type="hidden" value="23:30">
+                    </a>
+                </li>
+            </ul>
         </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 | (value: string) => void | — | Callback function when the value changes and is a valid time format. It also emits an empty string when the input is cleared. 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 to show the input icon. |
+| dropdown | boolean | false | Defines whether to show a dropdown with pre-defined time values. |
+| minuteOffset | number | 15 | Defines the minute interval for time controls and dropdown values. Invalid values fallback to 15. |
+| disabled | boolean | false | Defines whether the component is disabled. |
+| errorMessage | string \| React.ReactNode | — | Input error message. |
+| warningMessage | string \| React.ReactNode | — | Input warning message. |
+| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
+| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' \| 'onChange'> | — | Additional properties to be set on the input element. |
+| className | string | — | Additional classes to be set on the wrapper element. |