@rio-cloud/uikit-mcp 1.1.4 → 1.1.5

package/dist/docs/components/button.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/button
-*Captured:* 2026-01-14T09:07:00.083Z
+*Captured:* 2026-02-03T14:04:13.834Z
 
 The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons
 
@@ -255,9 +255,38 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
-| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |
-| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| disabled | boolean | false | Whether the button should be disabled. |
+| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| type | 'button' \| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |
+| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| 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. |
+| 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. |
+| 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. |
+| bsStyle | BUTTON_STYLE | "default" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
+| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
+| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| tabIndex | number | 0 | Number of the index used for keyboard support. |
+| className | string | — | Additional classes to be set on the button element. |
+
+#### Props: Regular button
+
+### Regular button
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
+
+#### Props: ToggleButton
+
+### ToggleButton
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |
 
 ### Example: Link buttons
 
@@ -360,9 +389,38 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
-| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |
-| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| disabled | boolean | false | Whether the button should be disabled. |
+| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| type | 'button' \| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |
+| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| 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. |
+| 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. |
+| 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. |
+| bsStyle | BUTTON_STYLE | "default" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
+| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
+| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| tabIndex | number | 0 | Number of the index used for keyboard support. |
+| className | string | — | Additional classes to be set on the button element. |
+
+#### Props: Regular button
+
+### Regular button
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
+
+#### Props: ToggleButton
+
+### ToggleButton
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |
 
 ### Example: Button group
 
@@ -513,9 +571,38 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
-| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |
-| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| disabled | boolean | false | Whether the button should be disabled. |
+| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| type | 'button' \| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |
+| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| 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. |
+| 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. |
+| 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. |
+| bsStyle | BUTTON_STYLE | "default" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
+| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
+| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| tabIndex | number | 0 | Number of the index used for keyboard support. |
+| className | string | — | Additional classes to be set on the button element. |
+
+#### Props: Regular button
+
+### Regular button
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
+
+#### Props: ToggleButton
+
+### ToggleButton
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |
 
 ### Example: Outlined buttons (transparent)
 
@@ -605,9 +692,38 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
-| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |
-| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| disabled | boolean | false | Whether the button should be disabled. |
+| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| type | 'button' \| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |
+| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| 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. |
+| 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. |
+| 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. |
+| bsStyle | BUTTON_STYLE | "default" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
+| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
+| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| tabIndex | number | 0 | Number of the index used for keyboard support. |
+| className | string | — | Additional classes to be set on the button element. |
+
+#### Props: Regular button
+
+### Regular button
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
+
+#### Props: ToggleButton
+
+### ToggleButton
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |
 
 ### Example: Action buttons
 
@@ -715,6 +831,35 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| bsStyle |  | — | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
-| bsSize |  | — | Sets the button size. Possible values are: xs, sm, md and lg |
-| variant |  | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| disabled | boolean | false | Whether the button should be disabled. |
+| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
+| type | 'button' \| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |
+| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
+| 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. |
+| 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. |
+| 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. |
+| bsStyle | BUTTON_STYLE | "default" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
+| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
+| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
+| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
+| tabIndex | number | 0 | Number of the index used for keyboard support. |
+| className | string | — | Additional classes to be set on the button element. |
+
+#### Props: Regular button
+
+### Regular button
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
+
+#### Props: ToggleButton
+
+### ToggleButton
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
+| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |

package/dist/docs/components/buttonToolbar.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/buttonToolbar
-*Captured:* 2026-01-14T09:06:57.360Z
+*Captured:* 2026-02-03T14:04:10.243Z
 
 The ButtonToolbar is a utility component designed to simplify usage and alignment. Its purpose is to ensure consistent spacing.
 
@@ -124,4 +124,11 @@ export default () => (
             </span>Next</button>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| alignment | 'left' \| 'right' \| 'center' \| 'space-between' | — | Align buttons to a defined side or set them apart. |
+| className | string | — | Additional classes set to the outer element. |

package/dist/docs/components/calendarStripe.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/calendarStripe
-*Captured:* 2026-01-14T09:07:42.234Z
+*Captured:* 2026-02-03T14:04:58.265Z
 
 A headless component where you provide a function that renders the UI for every day to be displayed.
 
@@ -11,31 +11,19 @@ A headless component where you provide a function that renders the UI for every
 
 ### Example: Example 1
 
-Thursday
-15 January 2026
-
-Friday
-16 January 2026
-
-Saturday
-17 January 2026
-
-Sunday
-18 January 2026
-
-#### Summary
+Wednesday
+4 February 2026
 
 Thursday
-15 January 2026
+5 February 2026
 
-Friday
-16 January 2026
+#### Summary
 
-Saturday
-17 January 2026
+Wednesday
+4 February 2026
 
-Sunday
-18 January 2026
+Thursday
+5 February 2026
 
 #### React (tsx)
 
@@ -130,8 +118,8 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                         <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
-                                    <div>Thursday</div>
-                                    <div class="text-size-16 text-medium">15 January 2026</div>
+                                    <div>Wednesday</div>
+                                    <div class="text-size-16 text-medium">4 February 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -142,8 +130,8 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                         <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
-                                    <div>Friday</div>
-                                    <div class="text-size-16 text-medium">16 January 2026</div>
+                                    <div>Thursday</div>
+                                    <div class="text-size-16 text-medium">5 February 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -151,11 +139,11 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest">
+                        <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
-                                    <div>Saturday</div>
-                                    <div class="text-size-16 text-medium">17 January 2026</div>
+                                    <div>Friday</div>
+                                    <div class="text-size-16 text-medium">6 February 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -166,8 +154,8 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
                         <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest">
                             <div class="display-flex align-items-center justify-content-between">
                                 <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
-                                    <div>Sunday</div>
-                                    <div class="text-size-16 text-medium">18 January 2026</div>
+                                    <div>Saturday</div>
+                                    <div class="text-size-16 text-medium">7 February 2026</div>
                                 </div>
                                 <div class="text-color-primary text-size-16 width-20">
                                 </div>
@@ -187,74 +175,43 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
 </div>
 ```
 
-### Example: Example 2
-
-Jan
-15
-2026
-
-Jan
-16
-2026
-
-Jan
-17
-2026
-
-Jan
-18
-2026
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| minDayWith | number | 200 | The minimum width in pixel of a single day column This value determines how many days are shown per page depending on the parent width. |
+| minDays | number | 1 | The minimum amount of days that should be shown per page. |
+| maxDays | number | 7 | The maximum amount of days that should be shown per page. |
+| renderDay | (date: Date) => React.JSX.Element | — | A function that renders each individual day to be displayed. |
+| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |
+| startDate | Date | the current date | The date of the first day that are rendered. |
+| onNextClick | (newStartDate: Date) => void | — | Callback function for when the next button is clicked. |
+| onPreviousClick | (newStartDate: Date) => void | — | Callback function for when the previous button is clicked. |
+| buttonClassName | string | — | Additional classes set to the navigation buttons. |
+| className | string | — | Additional classes set to the calendar element. |
+| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |
+| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |
 
-Jan
-19
-2026
-
-Jan
-20
-2026
+### Example: Example 2
 
-Jan
-21
+Feb
+4
 2026
 
-Jan
-22
+Feb
+5
 2026
 
 Set to JanuaryToggle Weekends
 
 #### Summary
 
-Jan
-15
-2026
-
-Jan
-16
-2026
-
-Jan
-17
-2026
-
-Jan
-18
-2026
-
-Jan
-19
+Feb
+4
 2026
 
-Jan
-20
-2026
-
-Jan
-21
-2026
-
-Jan
-22
+Feb
+5
 2026
 
 Set to JanuaryToggle Weekends
@@ -380,8 +337,8 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">15</div>
+                                <div class="text-size-12 line-height-12">Feb</div>
+                                <div class="text-size-h3 line-height-h3">4</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -389,17 +346,17 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">16</div>
+                                <div class="text-size-12 line-height-12">Feb</div>
+                                <div class="text-size-h3 line-height-h3">5</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">17</div>
+                                <div class="text-size-12 line-height-12">Feb</div>
+                                <div class="text-size-h3 line-height-h3">6</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -407,17 +364,17 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">18</div>
+                                <div class="text-size-12 line-height-12">Feb</div>
+                                <div class="text-size-h3 line-height-h3">7</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">19</div>
+                                <div class="text-size-12 line-height-12">Feb</div>
+                                <div class="text-size-h3 line-height-h3">8</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -425,8 +382,8 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">20</div>
+                                <div class="text-size-12 line-height-12">Feb</div>
+                                <div class="text-size-h3 line-height-h3">9</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -434,8 +391,8 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">21</div>
+                                <div class="text-size-12 line-height-12">Feb</div>
+                                <div class="text-size-h3 line-height-h3">10</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -443,8 +400,8 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">22</div>
+                                <div class="text-size-12 line-height-12">Feb</div>
+                                <div class="text-size-h3 line-height-h3">11</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -452,17 +409,17 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
                         <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">23</div>
+                                <div class="text-size-12 line-height-12">Feb</div>
+                                <div class="text-size-h3 line-height-h3">12</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
                     </div>
                     <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
-                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
+                        <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest">
                             <div class="display-flex flex-column gap-3 text-center">
-                                <div class="text-size-12 line-height-12">Jan</div>
-                                <div class="text-size-h3 line-height-h3">24</div>
+                                <div class="text-size-12 line-height-12">Feb</div>
+                                <div class="text-size-h3 line-height-h3">13</div>
                                 <div class="text-size-12 line-height-12">2026</div>
                             </div>
                         </div>
@@ -480,4 +437,21 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
         <button type="button" class="btn btn-default btn-component" tabindex="0">Toggle Weekends</button>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| minDayWith | number | 200 | The minimum width in pixel of a single day column This value determines how many days are shown per page depending on the parent width. |
+| minDays | number | 1 | The minimum amount of days that should be shown per page. |
+| maxDays | number | 7 | The maximum amount of days that should be shown per page. |
+| renderDay | (date: Date) => React.JSX.Element | — | A function that renders each individual day to be displayed. |
+| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |
+| startDate | Date | the current date | The date of the first day that are rendered. |
+| onNextClick | (newStartDate: Date) => void | — | Callback function for when the next button is clicked. |
+| onPreviousClick | (newStartDate: Date) => void | — | Callback function for when the previous button is clicked. |
+| buttonClassName | string | — | Additional classes set to the navigation buttons. |
+| className | string | — | Additional classes set to the calendar element. |
+| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |
+| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |

package/dist/docs/components/card.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/card
-*Captured:* 2026-01-14T09:07:26.234Z
+*Captured:* 2026-02-03T14:04:40.639Z
 
 The Card is a utility component designed to simplify usage of default card styling.
 
@@ -75,4 +75,12 @@ export default () => (
         </div>
     </div>
 </div>
-```
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| shadow | 'subtle' \| 'muted' \| 'accent' \| 'default' \| 'smooth' \| 'muted-down' \| 'default-down' \| 'none' | 'default' | Shadow classes. |
+| padding | 0 \| 5 \| 10 \| 15 \| 20 \| 25 \| 50 | 15 | Card padding. |
+| className | string | — | Additional classes set to the outer element. |

package/dist/docs/components/carousel.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/carousel
-*Captured:* 2026-01-14T09:07:26.721Z
+*Captured:* 2026-02-03T14:04:40.733Z
 
 ## Carousel
 

package/dist/docs/components/chartColors.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#components/chartColors
-*Captured:* 2026-01-14T09:08:16.568Z
+*Captured:* 2026-02-03T14:05:27.467Z
 
 The colors listed below are exposed via the colors.json file and can also be used with other charting libraries to achieve a common look and feel.
 

package/dist/docs/components/chartsGettingStarted.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#components/chartsGettingStarted
-*Captured:* 2026-01-14T09:08:15.330Z
+*Captured:* 2026-02-03T14:05:26.195Z
 
 The UIKIT chart components are simple wrapper components for the Recharts charting library.