@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/checkbox.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/checkbox
-*Captured:* 2026-01-07T12:11:13.513Z
+*Captured:* 2026-02-03T14:04:13.543Z
 
 ## Checkbox
 
@@ -333,32 +333,17 @@ export default () => (
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
-| name | String | — | Passed through as HTML attribute to the underlying inputname. |
-| label | String / Node | — | Define some text as a label. |
-| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
-| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
-| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
-| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
-| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
-| right | Boolean | false | Defines whether the checkbox is on the right side. |
-| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
-| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
-| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
-| error | Boolean | false | Use "error" to change color of the checkbox. |
-| required | Boolean | false | Defines whether the checkbox is required or not. |
-| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
-| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
-| className | String | — | Additional classes to be set on the input field. |
-| children | any | — | Any element to be rendered next to the checkbox. |
-| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
-| iconSize | Number | — | The icon size in pixel. |
-| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
-| inputRef | Ref | — | A react ref assigned to the input itself. |
+#### Props (json)
+
+```json
+<div className='checkbox-text-wrapper display-flex justify-content-between'>
+    <div className='margin-right-15'>
+        <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
+        <div className='text-color-dark'>This option is a first option</div>
+    </div>
+    <div className='checkbox-text' />
+</div>
+```
 
 ## Controlled example
 
@@ -430,32 +415,17 @@ export default () => {
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
-| name | String | — | Passed through as HTML attribute to the underlying inputname. |
-| label | String / Node | — | Define some text as a label. |
-| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
-| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
-| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
-| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
-| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
-| right | Boolean | false | Defines whether the checkbox is on the right side. |
-| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
-| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
-| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
-| error | Boolean | false | Use "error" to change color of the checkbox. |
-| required | Boolean | false | Defines whether the checkbox is required or not. |
-| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
-| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
-| className | String | — | Additional classes to be set on the input field. |
-| children | any | — | Any element to be rendered next to the checkbox. |
-| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
-| iconSize | Number | — | The icon size in pixel. |
-| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
-| inputRef | Ref | — | A react ref assigned to the input itself. |
+#### Props (json)
+
+```json
+<div className='checkbox-text-wrapper display-flex justify-content-between'>
+    <div className='margin-right-15'>
+        <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
+        <div className='text-color-dark'>This option is a first option</div>
+    </div>
+    <div className='checkbox-text' />
+</div>
+```
 
 ## Custom card example
 
@@ -668,32 +638,17 @@ export default () => {
 </form>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
-| name | String | — | Passed through as HTML attribute to the underlying inputname. |
-| label | String / Node | — | Define some text as a label. |
-| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
-| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
-| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
-| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
-| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
-| right | Boolean | false | Defines whether the checkbox is on the right side. |
-| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
-| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
-| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
-| error | Boolean | false | Use "error" to change color of the checkbox. |
-| required | Boolean | false | Defines whether the checkbox is required or not. |
-| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
-| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
-| className | String | — | Additional classes to be set on the input field. |
-| children | any | — | Any element to be rendered next to the checkbox. |
-| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
-| iconSize | Number | — | The icon size in pixel. |
-| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
-| inputRef | Ref | — | A react ref assigned to the input itself. |
+#### Props (json)
+
+```json
+<div className='checkbox-text-wrapper display-flex justify-content-between'>
+    <div className='margin-right-15'>
+        <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
+        <div className='text-color-dark'>This option is a first option</div>
+    </div>
+    <div className='checkbox-text' />
+</div>
+```
 
 ## Custom list example
 
@@ -835,32 +790,17 @@ export default () => {
 </fieldset>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
-| name | String | — | Passed through as HTML attribute to the underlying inputname. |
-| label | String / Node | — | Define some text as a label. |
-| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
-| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
-| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
-| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
-| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
-| right | Boolean | false | Defines whether the checkbox is on the right side. |
-| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
-| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
-| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
-| error | Boolean | false | Use "error" to change color of the checkbox. |
-| required | Boolean | false | Defines whether the checkbox is required or not. |
-| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
-| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
-| className | String | — | Additional classes to be set on the input field. |
-| children | any | — | Any element to be rendered next to the checkbox. |
-| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
-| iconSize | Number | — | The icon size in pixel. |
-| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
-| inputRef | Ref | — | A react ref assigned to the input itself. |
+#### Props (json)
+
+```json
+<div className='checkbox-text-wrapper display-flex justify-content-between'>
+    <div className='margin-right-15'>
+        <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
+        <div className='text-color-dark'>This option is a first option</div>
+    </div>
+    <div className='checkbox-text' />
+</div>
+```
 
 ## Checkbox with custom icon
 
@@ -968,29 +908,14 @@ export default () => (
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| id | String | — | Passed through as HTML attribute to the underlying input. id. (Uses name otherwise.) |
-| name | String | — | Passed through as HTML attribute to the underlying inputname. |
-| label | String / Node | — | Define some text as a label. |
-| checked | String / Boolean | — | Defines whether the checkbox is checked or not (state cannot be changed). |
-| defaultChecked | String / Boolean | — | Defines whether the checkbox is initially checked or not (state can be changed on click). |
-| disabled | Boolean | false | Defines whether the checkbox is disabled or not. |
-| indeterminate | Boolean | false | Defines if the checkbox is in an indeterminate state with regards to other checkboxes that may be in different selection state. |
-| inline | Boolean | false | Defines whether the checkbox is applying an inline style. Use this in combination with other checkboxes. |
-| right | Boolean | false | Defines whether the checkbox is on the right side. |
-| custom | Boolean | false | Allows for rendering a completely different layout with or without a checkbox tick. |
-| onClick | Function | () => {} | Callback function that is invoked when the checkbox is checked or unchecked. |
-| onChange | Function | () => {} | Callback function that is invoked when the checkbox value changes. This will also be invoked by a keyboard event. |
-| error | Boolean | false | Use "error" to change color of the checkbox. |
-| required | Boolean | false | Defines whether the checkbox is required or not. |
-| size | String | — | Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size. Possible values are: 'large' |
-| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
-| className | String | — | Additional classes to be set on the input field. |
-| children | any | — | Any element to be rendered next to the checkbox. |
-| icon | String | — | Define a custom icon for the checkbox by naming a rioglyph icon like "rioglyph-truck". |
-| iconSize | Number | — | The icon size in pixel. |
-| iconLabelPosition | String | — | The label position for a custom icon checkbox. Using this on a regular checkbox has no effect. Possible values are: "horizontal" or "vertical". |
-| inputRef | Ref | — | A react ref assigned to the input itself. |
+#### Props (json)
+
+```json
+<div className='checkbox-text-wrapper display-flex justify-content-between'>
+    <div className='margin-right-15'>
+        <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
+        <div className='text-color-dark'>This option is a first option</div>
+    </div>
+    <div className='checkbox-text' />
+</div>
+```

package/dist/docs/components/clearableInput.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/clearableInput
-*Captured:* 2026-01-07T12:11:13.639Z
+*Captured:* 2026-02-03T14:04:13.989Z
 
 Control, which can be cleared when it has a value.
 
@@ -374,37 +374,11 @@ export default () => (
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| children | Function | — | Providing a function enables the "render props" approach. The function gets the inputProps passed and is responsible for rendering the custom <input> component. |
-| defaultValue | String | — | Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component. |
-| value | String | — | Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component. |
-| onChange | Function | () => {} | Callback function for when the value changes. Receives new value as an argument. |
-| onClear | Function | () => {} | Callback function for when the value is cleared via the clear button |
-| onKeyPress | Function | () => {} | Callback function for every key pressed including "Enter" key |
-| onBlur | Function | () => {} | Callback function which gets triggered when the input looses the focus |
-| onFocus | Function | () => {} | Callback function which gets triggered when the input gains the focus |
-| className | String | — | Additional classes to be set on the wrapper element |
-| inputClassName | String | — | Additional classes to be set on the input element |
-| placeholder | String | — | The translated text that shall be shown when the input is empty |
-| inputRef | Function | — | The callback ref for the underlying input. Alternatively, use can use a forward ref. |
-| autoComplete | String | — | Sets autocomplete value for autosuggest forms |
-| type | String | "text" | Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password' |
-| maxLength | Number | — | Defines the maximum amount of characters that can be entered |
-| disabled | Boolean | false | Disables the input component |
-| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
-| hasError | Boolean | — | Defined whether or not the input has the error styling |
-| mask | string \| (string \| RegExp)[] | — | The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: "0" = allowed input: "0-9" (digit) Character: "a" = allowed input: "a-z, A-Z" (letter) Character: "*" = allowed input: any character Character: "#" = allowed input: "0-9, a-z, A-Z" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0). Additionally you can provide custom definitions. Examples: "-- *** *** ***" "+49 00 000 00" |
-| maskPlaceholder | string \| null | _ | Placeholder to cover unfilled parts of the mask |
-| maskVisibility | 'always' \| 'onFocus' \| 'never' | onFocus | Controls when the mask pattern is visible. |
-| maskOverwrite | boolean \| 'shift' \| undefined | true | Enable characters overwriting. |
-| maskDefinitions | Record<string, string \| RegExp> | — | Custom definitions to have more control over your mask. The defined character will be replaced in your mask. |
-| maskDispatch | (appended: string, dynamicMasked: any) => any | — | Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work. |
-| min | string \| number \| undefined \| Date | — | Minimum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| max | string \| number \| undefined \| Date | — | Maximum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| Additional props |  | — | All additional properties are passed down to the underlying input like the autoComplete prop |
+#### Props (json)
+
+```json
+'-- ### ### ###' or '+49 00 000 00'
+```
 
 ### Example: Example 2
 
@@ -448,7 +422,7 @@ const ClearableInputControlled = () => {
         console.log(event.key);
     };
 
-    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    const handleBlur = (_event: React.FocusEvent<HTMLInputElement>) => {
         Notification.info('Input lost focus');
     };
 
@@ -491,37 +465,11 @@ export default ClearableInputControlled;
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| children | Function | — | Providing a function enables the "render props" approach. The function gets the inputProps passed and is responsible for rendering the custom <input> component. |
-| defaultValue | String | — | Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component. |
-| value | String | — | Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component. |
-| onChange | Function | () => {} | Callback function for when the value changes. Receives new value as an argument. |
-| onClear | Function | () => {} | Callback function for when the value is cleared via the clear button |
-| onKeyPress | Function | () => {} | Callback function for every key pressed including "Enter" key |
-| onBlur | Function | () => {} | Callback function which gets triggered when the input looses the focus |
-| onFocus | Function | () => {} | Callback function which gets triggered when the input gains the focus |
-| className | String | — | Additional classes to be set on the wrapper element |
-| inputClassName | String | — | Additional classes to be set on the input element |
-| placeholder | String | — | The translated text that shall be shown when the input is empty |
-| inputRef | Function | — | The callback ref for the underlying input. Alternatively, use can use a forward ref. |
-| autoComplete | String | — | Sets autocomplete value for autosuggest forms |
-| type | String | "text" | Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password' |
-| maxLength | Number | — | Defines the maximum amount of characters that can be entered |
-| disabled | Boolean | false | Disables the input component |
-| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
-| hasError | Boolean | — | Defined whether or not the input has the error styling |
-| mask | string \| (string \| RegExp)[] | — | The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: "0" = allowed input: "0-9" (digit) Character: "a" = allowed input: "a-z, A-Z" (letter) Character: "*" = allowed input: any character Character: "#" = allowed input: "0-9, a-z, A-Z" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0). Additionally you can provide custom definitions. Examples: "-- *** *** ***" "+49 00 000 00" |
-| maskPlaceholder | string \| null | _ | Placeholder to cover unfilled parts of the mask |
-| maskVisibility | 'always' \| 'onFocus' \| 'never' | onFocus | Controls when the mask pattern is visible. |
-| maskOverwrite | boolean \| 'shift' \| undefined | true | Enable characters overwriting. |
-| maskDefinitions | Record<string, string \| RegExp> | — | Custom definitions to have more control over your mask. The defined character will be replaced in your mask. |
-| maskDispatch | (appended: string, dynamicMasked: any) => any | — | Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work. |
-| min | string \| number \| undefined \| Date | — | Minimum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| max | string \| number \| undefined \| Date | — | Maximum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| Additional props |  | — | All additional properties are passed down to the underlying input like the autoComplete prop |
+#### Props (json)
+
+```json
+'-- ### ### ###' or '+49 00 000 00'
+```
 
 ### Example: Example 3
 
@@ -535,7 +483,7 @@ Controlled component with restriction and used with custom input
 
 ```tsx
 import { useState, useRef, useEffect } from 'react';
-import { countBy, isNil, toNumber } from 'es-toolkit/compat';
+import { isNil, toNumber } from 'es-toolkit/compat';
 
 import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';
 
@@ -596,37 +544,11 @@ export default ClearableInputControlledRestricted;
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| children | Function | — | Providing a function enables the "render props" approach. The function gets the inputProps passed and is responsible for rendering the custom <input> component. |
-| defaultValue | String | — | Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component. |
-| value | String | — | Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component. |
-| onChange | Function | () => {} | Callback function for when the value changes. Receives new value as an argument. |
-| onClear | Function | () => {} | Callback function for when the value is cleared via the clear button |
-| onKeyPress | Function | () => {} | Callback function for every key pressed including "Enter" key |
-| onBlur | Function | () => {} | Callback function which gets triggered when the input looses the focus |
-| onFocus | Function | () => {} | Callback function which gets triggered when the input gains the focus |
-| className | String | — | Additional classes to be set on the wrapper element |
-| inputClassName | String | — | Additional classes to be set on the input element |
-| placeholder | String | — | The translated text that shall be shown when the input is empty |
-| inputRef | Function | — | The callback ref for the underlying input. Alternatively, use can use a forward ref. |
-| autoComplete | String | — | Sets autocomplete value for autosuggest forms |
-| type | String | "text" | Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password' |
-| maxLength | Number | — | Defines the maximum amount of characters that can be entered |
-| disabled | Boolean | false | Disables the input component |
-| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
-| hasError | Boolean | — | Defined whether or not the input has the error styling |
-| mask | string \| (string \| RegExp)[] | — | The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: "0" = allowed input: "0-9" (digit) Character: "a" = allowed input: "a-z, A-Z" (letter) Character: "*" = allowed input: any character Character: "#" = allowed input: "0-9, a-z, A-Z" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0). Additionally you can provide custom definitions. Examples: "-- *** *** ***" "+49 00 000 00" |
-| maskPlaceholder | string \| null | _ | Placeholder to cover unfilled parts of the mask |
-| maskVisibility | 'always' \| 'onFocus' \| 'never' | onFocus | Controls when the mask pattern is visible. |
-| maskOverwrite | boolean \| 'shift' \| undefined | true | Enable characters overwriting. |
-| maskDefinitions | Record<string, string \| RegExp> | — | Custom definitions to have more control over your mask. The defined character will be replaced in your mask. |
-| maskDispatch | (appended: string, dynamicMasked: any) => any | — | Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work. |
-| min | string \| number \| undefined \| Date | — | Minimum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| max | string \| number \| undefined \| Date | — | Maximum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| Additional props |  | — | All additional properties are passed down to the underlying input like the autoComplete prop |
+#### Props (json)
+
+```json
+'-- ### ### ###' or '+49 00 000 00'
+```
 
 ## ClearableInput with input mask
 
@@ -773,34 +695,8 @@ export default () => {
 </div>
 ```
 
-#### Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| children | Function | — | Providing a function enables the "render props" approach. The function gets the inputProps passed and is responsible for rendering the custom <input> component. |
-| defaultValue | String | — | Initial value of the ClearableInput. Pass this prop if you want to use this component as an uncontrolled component. |
-| value | String | — | Value of the ClearableInput. Pass this prop if you want to use this component as a controlled component. |
-| onChange | Function | () => {} | Callback function for when the value changes. Receives new value as an argument. |
-| onClear | Function | () => {} | Callback function for when the value is cleared via the clear button |
-| onKeyPress | Function | () => {} | Callback function for every key pressed including "Enter" key |
-| onBlur | Function | () => {} | Callback function which gets triggered when the input looses the focus |
-| onFocus | Function | () => {} | Callback function which gets triggered when the input gains the focus |
-| className | String | — | Additional classes to be set on the wrapper element |
-| inputClassName | String | — | Additional classes to be set on the input element |
-| placeholder | String | — | The translated text that shall be shown when the input is empty |
-| inputRef | Function | — | The callback ref for the underlying input. Alternatively, use can use a forward ref. |
-| autoComplete | String | — | Sets autocomplete value for autosuggest forms |
-| type | String | "text" | Defines the type of the input itself. There are three types supported: 'text', 'email' and 'password' |
-| maxLength | Number | — | Defines the maximum amount of characters that can be entered |
-| disabled | Boolean | false | Disables the input component |
-| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
-| hasError | Boolean | — | Defined whether or not the input has the error styling |
-| mask | string \| (string \| RegExp)[] | — | The mask prop will allow to use the component with an input mask. It defines the pattern that should be followed. For more details on masking, checkout the third party documentation for the input mask here: https://imask.js.org/guide.html Simple masks can be defined as strings. Any format character can be escaped with a backslash. The following characters will define mask format: Character: "0" = allowed input: "0-9" (digit) Character: "a" = allowed input: "a-z, A-Z" (letter) Character: "*" = allowed input: any character Character: "#" = allowed input: "0-9, a-z, A-Z" (digit or letter) Other chars which is not in custom definitions supposed to be fixed: [] - make input optional - include fixed part in unmasked value ` - prevent symbols shift back If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0). Additionally you can provide custom definitions. Examples: "-- *** *** ***" "+49 00 000 00" |
-| maskPlaceholder | string \| null | _ | Placeholder to cover unfilled parts of the mask |
-| maskVisibility | 'always' \| 'onFocus' \| 'never' | onFocus | Controls when the mask pattern is visible. |
-| maskOverwrite | boolean \| 'shift' \| undefined | true | Enable characters overwriting. |
-| maskDefinitions | Record<string, string \| RegExp> | — | Custom definitions to have more control over your mask. The defined character will be replaced in your mask. |
-| maskDispatch | (appended: string, dynamicMasked: any) => any | — | Chooses the mask for dynamic masking depending on input value. Note, this function may not be an empty function, otherwise the mask selection does not work. |
-| min | string \| number \| undefined \| Date | — | Minimum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| max | string \| number \| undefined \| Date | — | Maximum value to be entered. This prop is extended to accept a Date when used with an input mask. |
-| Additional props |  | — | All additional properties are passed down to the underlying input like the autoComplete prop |
+#### Props (json)
+
+```json
+'-- ### ### ###' or '+49 00 000 00'
+```

package/dist/docs/components/collapse.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Show/Hide
 *Source:* https://uikit.developers.rio.cloud/#components/collapse
-*Captured:* 2026-01-07T12:11:20.254Z
+*Captured:* 2026-02-03T14:04:23.050Z
 
 The Collapse component folds and unfolds given content. It is used in some other components such as the ExpanderPanel and ExpanderList.
 
@@ -83,7 +83,7 @@ export default () => {
                     <div class="margin-bottom-15">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
                     <div class="dropdown btn-group">
-                        <button type="button" id="jibqqhal8ns" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Dropdown<span class="caret">
+                        <button type="button" id="6qynxk6hkce" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Dropdown<span class="caret">
                             </span>
                         </button>
                     </div>
@@ -98,14 +98,13 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| open | Boolean | false | Show the component and triggers the expand or collapse animation. |
-| timeout | Number | 270 | Duration of the collapse animation in milliseconds. |
-| appear | Boolean | false | Run the expand animation when the component mounts, if it is initially shown. |
-| unmountOnExit | Boolean | false | Unmount the component (remove it from the DOM) when it is collapsed. |
+| open | boolean \| undefined | false | Show the component and triggers the expand or collapse animation. |
+| unmountOnExit | boolean | — | Unmount the component (remove it from the DOM) when it is collapsed. |
+| appear | boolean | false | Run the expand animation when the component mounts, if it is initially shown. |
+| timeout | number | 270 | Duration of the collapse animation in milliseconds. |
 | onEntered | () => void | — | Callback fired after the component has expanded. |
-| onExited | () => {} | — | Callback fired after the component has collapsed. |
-| onAnimationStart | () => {} | — | Callback fired when the animation starts for either expand or collapse. |
-| children | any | — | Any component given to be expanded or collapsed. |
+| onExited | () => void | — | Callback fired after the component has collapsed. |
+| onAnimationStart | () => void | — | Callback fired when the animation starts for either expand or collapse. |
 
 ### Example: Content will be removed from the DOM when it is collapsed and mounted again on show
 
@@ -179,11 +178,10 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| open | Boolean | false | Show the component and triggers the expand or collapse animation. |
-| timeout | Number | 270 | Duration of the collapse animation in milliseconds. |
-| appear | Boolean | false | Run the expand animation when the component mounts, if it is initially shown. |
-| unmountOnExit | Boolean | false | Unmount the component (remove it from the DOM) when it is collapsed. |
+| open | boolean \| undefined | false | Show the component and triggers the expand or collapse animation. |
+| unmountOnExit | boolean | — | Unmount the component (remove it from the DOM) when it is collapsed. |
+| appear | boolean | false | Run the expand animation when the component mounts, if it is initially shown. |
+| timeout | number | 270 | Duration of the collapse animation in milliseconds. |
 | onEntered | () => void | — | Callback fired after the component has expanded. |
-| onExited | () => {} | — | Callback fired after the component has collapsed. |
-| onAnimationStart | () => {} | — | Callback fired when the animation starts for either expand or collapse. |
-| children | any | — | Any component given to be expanded or collapsed. |
+| onExited | () => void | — | Callback fired after the component has collapsed. |
+| onAnimationStart | () => void | — | Callback fired when the animation starts for either expand or collapse. |