@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (191) hide show
  1. package/README.md +1 -0
  2. package/dist/doc-metadata.json +97 -97
  3. package/dist/docs/components/accentBar.md +5 -5
  4. package/dist/docs/components/activity.md +7 -7
  5. package/dist/docs/components/animatedNumber.md +10 -10
  6. package/dist/docs/components/animatedTextReveal.md +42 -43
  7. package/dist/docs/components/animations.md +42 -34
  8. package/dist/docs/components/appHeader.md +20 -35
  9. package/dist/docs/components/appLayout.md +198 -221
  10. package/dist/docs/components/appNavigationBar.md +21 -21
  11. package/dist/docs/components/areaCharts.md +38 -38
  12. package/dist/docs/components/aspectRatioPlaceholder.md +4 -5
  13. package/dist/docs/components/assetTree.md +887 -614
  14. package/dist/docs/components/autosuggests.md +4 -4
  15. package/dist/docs/components/avatar.md +7 -7
  16. package/dist/docs/components/banner.md +2 -2
  17. package/dist/docs/components/barCharts.md +173 -173
  18. package/dist/docs/components/barList.md +19 -41
  19. package/dist/docs/components/basicMap.md +1 -1
  20. package/dist/docs/components/bottomSheet.md +74 -74
  21. package/dist/docs/components/button.md +161 -71
  22. package/dist/docs/components/buttonToolbar.md +3 -3
  23. package/dist/docs/components/calendarStripe.md +71 -123
  24. package/dist/docs/components/card.md +4 -4
  25. package/dist/docs/components/carousel.md +1 -1
  26. package/dist/docs/components/chartColors.md +1 -1
  27. package/dist/docs/components/chartsGettingStarted.md +1 -1
  28. package/dist/docs/components/chat.md +2 -2
  29. package/dist/docs/components/checkbox.md +56 -131
  30. package/dist/docs/components/clearableInput.md +23 -127
  31. package/dist/docs/components/collapse.md +14 -16
  32. package/dist/docs/components/composedCharts.md +31 -31
  33. package/dist/docs/components/contentLoader.md +125 -122
  34. package/dist/docs/components/dataTabs.md +103 -93
  35. package/dist/docs/components/datepickers.md +734 -764
  36. package/dist/docs/components/dialogs.md +299 -186
  37. package/dist/docs/components/divider.md +4 -4
  38. package/dist/docs/components/dropdowns.md +4555 -4498
  39. package/dist/docs/components/editableContent.md +97 -97
  40. package/dist/docs/components/expander.md +56 -56
  41. package/dist/docs/components/fade.md +41 -41
  42. package/dist/docs/components/fadeExpander.md +4 -4
  43. package/dist/docs/components/fadeUp.md +8 -10
  44. package/dist/docs/components/feedback.md +22 -21
  45. package/dist/docs/components/filePickers.md +25 -25
  46. package/dist/docs/components/formLabel.md +5 -7
  47. package/dist/docs/components/groupedItemList.md +37 -37
  48. package/dist/docs/components/iconList.md +4 -4
  49. package/dist/docs/components/imagePreloader.md +6 -6
  50. package/dist/docs/components/labeledElement.md +4 -3
  51. package/dist/docs/components/licensePlate.md +2 -2
  52. package/dist/docs/components/lineCharts.md +58 -58
  53. package/dist/docs/components/listMenu.md +63 -41
  54. package/dist/docs/components/loadMore.md +17 -17
  55. package/dist/docs/components/mainNavigation.md +1 -1
  56. package/dist/docs/components/mapCircle.md +1 -1
  57. package/dist/docs/components/mapCluster.md +1 -1
  58. package/dist/docs/components/mapContext.md +1 -1
  59. package/dist/docs/components/mapDraggableMarker.md +1 -1
  60. package/dist/docs/components/mapGettingStarted.md +1 -1
  61. package/dist/docs/components/mapInfoBubble.md +1 -1
  62. package/dist/docs/components/mapLayerGroup.md +1 -1
  63. package/dist/docs/components/mapMarker.md +339 -345
  64. package/dist/docs/components/mapPolygon.md +16 -20
  65. package/dist/docs/components/mapRoute.md +14 -20
  66. package/dist/docs/components/mapRouteGenerator.md +1 -1
  67. package/dist/docs/components/mapSettings.md +263 -274
  68. package/dist/docs/components/mapUtils.md +3 -5
  69. package/dist/docs/components/multiselects.md +1 -1
  70. package/dist/docs/components/noData.md +11 -11
  71. package/dist/docs/components/notifications.md +1 -1
  72. package/dist/docs/components/numbercontrol.md +39 -37
  73. package/dist/docs/components/onboarding.md +18 -38
  74. package/dist/docs/components/page.md +16 -16
  75. package/dist/docs/components/pager.md +8 -8
  76. package/dist/docs/components/pieCharts.md +124 -124
  77. package/dist/docs/components/popover.md +37 -53
  78. package/dist/docs/components/position.md +4 -4
  79. package/dist/docs/components/radialBarCharts.md +506 -506
  80. package/dist/docs/components/radiobutton.md +209 -191
  81. package/dist/docs/components/releaseNotes.md +9 -3
  82. package/dist/docs/components/resizer.md +7 -8
  83. package/dist/docs/components/responsiveColumnStripe.md +11 -11
  84. package/dist/docs/components/responsiveVideo.md +5 -5
  85. package/dist/docs/components/rioglyph.md +11 -11
  86. package/dist/docs/components/rules.md +118 -92
  87. package/dist/docs/components/saveableInput.md +366 -356
  88. package/dist/docs/components/selects.md +9996 -15
  89. package/dist/docs/components/sidebar.md +22 -23
  90. package/dist/docs/components/sliders.md +26 -26
  91. package/dist/docs/components/smoothScrollbars.md +61 -25
  92. package/dist/docs/components/spinners.md +32 -30
  93. package/dist/docs/components/states.md +236 -245
  94. package/dist/docs/components/statsWidgets.md +37 -28
  95. package/dist/docs/components/statusBar.md +22 -22
  96. package/dist/docs/components/stepButton.md +2 -2
  97. package/dist/docs/components/steppedProgressBars.md +45 -45
  98. package/dist/docs/components/subNavigation.md +3 -3
  99. package/dist/docs/components/supportMarker.md +1 -1
  100. package/dist/docs/components/svgImage.md +2 -38
  101. package/dist/docs/components/switch.md +11 -11
  102. package/dist/docs/components/tables.md +1 -1
  103. package/dist/docs/components/tagManager.md +40 -40
  104. package/dist/docs/components/tags.md +21 -20
  105. package/dist/docs/components/teaser.md +22 -23
  106. package/dist/docs/components/timeline.md +1 -1
  107. package/dist/docs/components/timepicker.md +17 -13
  108. package/dist/docs/components/toggleButton.md +65 -29
  109. package/dist/docs/components/tooltip.md +27 -50
  110. package/dist/docs/components/virtualList.md +75 -75
  111. package/dist/docs/foundations.md +167 -167
  112. package/dist/docs/start/changelog.md +23 -1
  113. package/dist/docs/start/goodtoknow.md +1 -1
  114. package/dist/docs/start/guidelines/color-combinations.md +1 -1
  115. package/dist/docs/start/guidelines/custom-css.md +1 -1
  116. package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
  117. package/dist/docs/start/guidelines/formatting.md +1 -1
  118. package/dist/docs/start/guidelines/iframe.md +80 -27
  119. package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
  120. package/dist/docs/start/guidelines/print-css.md +1 -1
  121. package/dist/docs/start/guidelines/spinner.md +81 -81
  122. package/dist/docs/start/guidelines/supported-browsers.md +1 -1
  123. package/dist/docs/start/guidelines/writing.md +1 -1
  124. package/dist/docs/start/howto.md +9 -9
  125. package/dist/docs/start/intro.md +1 -1
  126. package/dist/docs/start/responsiveness.md +1 -1
  127. package/dist/docs/templates/common-table.md +11 -11
  128. package/dist/docs/templates/detail-views.md +2 -2
  129. package/dist/docs/templates/expandable-details.md +1 -1
  130. package/dist/docs/templates/feature-cards.md +55 -55
  131. package/dist/docs/templates/form-summary.md +22 -22
  132. package/dist/docs/templates/form-toggle.md +1 -1
  133. package/dist/docs/templates/list-blocks.md +197 -197
  134. package/dist/docs/templates/loading-progress.md +1 -1
  135. package/dist/docs/templates/options-panel.md +1 -1
  136. package/dist/docs/templates/panel-variants.md +1 -1
  137. package/dist/docs/templates/progress-cards.md +1 -1
  138. package/dist/docs/templates/progress-success.md +1 -1
  139. package/dist/docs/templates/settings-form.md +23 -23
  140. package/dist/docs/templates/stats-blocks.md +41 -41
  141. package/dist/docs/templates/table-panel.md +1 -1
  142. package/dist/docs/templates/table-row-animation.md +1 -1
  143. package/dist/docs/templates/usage-cards.md +1 -1
  144. package/dist/docs/utilities/deviceUtils.md +6 -3
  145. package/dist/docs/utilities/featureToggles.md +1 -1
  146. package/dist/docs/utilities/fuelTypeUtils.md +1 -1
  147. package/dist/docs/utilities/routeUtils.md +59 -23
  148. package/dist/docs/utilities/useAfterMount.md +1 -1
  149. package/dist/docs/utilities/useAutoAnimate.md +1 -1
  150. package/dist/docs/utilities/useAverage.md +1 -1
  151. package/dist/docs/utilities/useClickOutside.md +1 -1
  152. package/dist/docs/utilities/useClipboard.md +2 -2
  153. package/dist/docs/utilities/useCount.md +1 -1
  154. package/dist/docs/utilities/useDarkMode.md +1 -1
  155. package/dist/docs/utilities/useDebugInfo.md +4 -4
  156. package/dist/docs/utilities/useEffectOnce.md +1 -1
  157. package/dist/docs/utilities/useElapsedTime.md +1 -1
  158. package/dist/docs/utilities/useElementSize.md +1 -1
  159. package/dist/docs/utilities/useEsc.md +1 -1
  160. package/dist/docs/utilities/useEvent.md +1 -1
  161. package/dist/docs/utilities/useFocusTrap.md +1 -1
  162. package/dist/docs/utilities/useFullscreen.md +1 -1
  163. package/dist/docs/utilities/useHover.md +1 -1
  164. package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
  165. package/dist/docs/utilities/useInterval.md +1 -1
  166. package/dist/docs/utilities/useIsFocusWithin.md +1 -1
  167. package/dist/docs/utilities/useKey.md +7 -5
  168. package/dist/docs/utilities/useLocalStorage.md +1 -1
  169. package/dist/docs/utilities/useLocationSuggestions.md +1 -1
  170. package/dist/docs/utilities/useMax.md +1 -1
  171. package/dist/docs/utilities/useMin.md +1 -1
  172. package/dist/docs/utilities/useMutationObserver.md +1 -1
  173. package/dist/docs/utilities/useOnScreen.md +1 -1
  174. package/dist/docs/utilities/useOnlineStatus.md +1 -1
  175. package/dist/docs/utilities/usePostMessage.md +58 -2
  176. package/dist/docs/utilities/usePostMessageSender.md +1 -1
  177. package/dist/docs/utilities/usePrevious.md +1 -1
  178. package/dist/docs/utilities/useResizeObserver.md +1 -1
  179. package/dist/docs/utilities/useScrollPosition.md +1 -1
  180. package/dist/docs/utilities/useSearch.md +1 -1
  181. package/dist/docs/utilities/useSorting.md +1 -1
  182. package/dist/docs/utilities/useStateWithValidation.md +1 -1
  183. package/dist/docs/utilities/useSum.md +1 -1
  184. package/dist/docs/utilities/useTableExport.md +54 -54
  185. package/dist/docs/utilities/useTableSelection.md +93 -93
  186. package/dist/docs/utilities/useTimeout.md +1 -1
  187. package/dist/docs/utilities/useToggle.md +1 -1
  188. package/dist/docs/utilities/useWindowResize.md +1 -1
  189. package/dist/index.mjs +8 -8
  190. package/dist/version.json +2 -2
  191. package/package.json +6 -6
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Map
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/mapUtils
6
- *Captured:* 2026-01-07T12:12:16.126Z
6
+ *Captured:* 2026-02-03T14:05:24.886Z
7
7
 
8
8
  ## Map utils
9
9
 
@@ -12,7 +12,6 @@
12
12
  import { useRef, useState } from 'react';
13
13
  import { isEqual } from 'es-toolkit/compat';
14
14
 
15
- // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
16
15
  import Map from '@rio-cloud/rio-uikit/Map';
17
16
  import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
18
17
  import type { MapApi, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';
@@ -29,7 +28,7 @@ const eventListenerMap = {
29
28
  // The View model contains all relevant map data like zoom, position or bounding box.
30
29
  // Note: Working with the ViewModel directly requires to round zoom values or to exclude
31
30
  // other props from position object. Better, use map utils instead.
32
- const target = event.currentTarget;
31
+ const target = event.currentTarget as H.Map;
33
32
  const lookAtData = target.getViewModel().getLookAtData();
34
33
 
35
34
  console.log({ lookAtData });
@@ -74,7 +73,6 @@ return null;
74
73
  import { useRef, useState } from 'react';
75
74
  import { isEqual } from 'es-toolkit/compat';
76
75
 
77
- // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
78
76
  import Map from '@rio-cloud/rio-uikit/Map';
79
77
  import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
80
78
  import type { MapApi, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';
@@ -91,7 +89,7 @@ const eventListenerMap = {
91
89
  // The View model contains all relevant map data like zoom, position or bounding box.
92
90
  // Note: Working with the ViewModel directly requires to round zoom values or to exclude
93
91
  // other props from position object. Better, use map utils instead.
94
- const target = event.currentTarget;
92
+ const target = event.currentTarget as H.Map;
95
93
  const lookAtData = target.getViewModel().getLookAtData();
96
94
 
97
95
  console.log({ lookAtData });
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Selection
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/multiselects
6
- *Captured:* 2026-01-07T12:11:30.781Z
6
+ *Captured:* 2026-02-03T14:04:32.851Z
7
7
 
8
8
  The Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Content
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/noData
6
- *Captured:* 2026-01-07T12:11:42.697Z
6
+ *Captured:* 2026-02-03T14:04:47.643Z
7
7
 
8
8
  ## NoData
9
9
 
@@ -87,11 +87,11 @@ export default () => (
87
87
 
88
88
  | Name | Type | Default | Description |
89
89
  | --- | --- | --- | --- |
90
- | text | String / Node | — | The actual translated "No data" text. |
91
- | tooltip | String / Node | — | Additional explanation shown inside a tooltip. |
92
- | tooltipPlacement | String | bottom | Sets the direction the Tooltip is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |
93
- | tooltipWidth | String | auto | Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |
94
- | className | String | — | Additional class names to be added to the wrapping element. |
90
+ | text | string \| React.ReactNode | — | The actual translated "No data" text. |
91
+ | tooltip | string \| React.ReactNode | — | Additional explanation shown inside a tooltip. |
92
+ | tooltipPlacement | ObjectValues<typeof PLACEMENT> | | Sets the direction the Tooltip is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left, left-end |
93
+ | tooltipWidth | TooltipWidth | | The width of the tooltip. Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |
94
+ | className | string | — | Additional class names to be added to the wrapping element. |
95
95
 
96
96
  ### Example: Example 2
97
97
 
@@ -203,8 +203,8 @@ export default () => (
203
203
 
204
204
  | Name | Type | Default | Description |
205
205
  | --- | --- | --- | --- |
206
- | text | String / Node | — | The actual translated "No data" text. |
207
- | tooltip | String / Node | — | Additional explanation shown inside a tooltip. |
208
- | tooltipPlacement | String | bottom | Sets the direction the Tooltip is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |
209
- | tooltipWidth | String | auto | Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |
210
- | className | String | — | Additional class names to be added to the wrapping element. |
206
+ | text | string \| React.ReactNode | — | The actual translated "No data" text. |
207
+ | tooltip | string \| React.ReactNode | — | Additional explanation shown inside a tooltip. |
208
+ | tooltipPlacement | ObjectValues<typeof PLACEMENT> | | Sets the direction the Tooltip is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left, left-end |
209
+ | tooltipWidth | TooltipWidth | | The width of the tooltip. Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |
210
+ | className | string | — | Additional class names to be added to the wrapping element. |
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/notifications
6
- *Captured:* 2026-01-07T12:11:54.894Z
6
+ *Captured:* 2026-02-03T14:05:00.784Z
7
7
 
8
8
  Hint:Notifications need to be wrapped by a NotificationsContainer inside your application layout body.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Interaction
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/numbercontrol
6
- *Captured:* 2026-01-07T12:11:15.752Z
6
+ *Captured:* 2026-02-03T14:04:16.297Z
7
7
 
8
8
  ## NumberInput
9
9
 
@@ -325,24 +325,25 @@ export default () => {
325
325
 
326
326
  | Name | Type | Default | Description |
327
327
  | --- | --- | --- | --- |
328
- | min | Number | 0 | The minimum value of the input. |
329
- | max | Number | Number.MAX_VALUE | The maximum value of the input. |
330
- | value | Number | 0 | The initial value of the input. |
331
- | step | Number | 1 | The size of increment or decrement (only works with number type). |
332
- | digitPrecision | Number | 3 | Number of digits after the comma the value should be fixed to. |
333
- | disabled | Boolean | false | Enables or disabled the input. |
334
- | onChange | (value?: number) => void | | Callback function fired when the value of the input changes. |
335
- | onKeyDown | (event: React.KeyboardEvent<HTMLInputElement>) => void | — | Callback function that gets triggered after filtering out invalid key strokes. |
336
- | bsSize | 'sm' \| 'md' \| 'lg' | 'md' | Defines the size of the input to be rendered. Possible values are: 'sm' 'md'or 'lg' |
337
- | unit | String / Node | | A unit for this value. This will be shown in a dedicated input addon. |
338
- | errorMessage | String | — | Optional error message. |
339
- | warningMessage | String | — | Optional warning message. |
340
- | messageWhiteSpace | 'normal' \| 'prewrap' \| 'nowrap' | 'normal' | Optional warning message white-space. |
341
- | inputAddon | String | — | A rioglyph icon tio be shown in front of the input. |
342
- | placeholder | String | | The input placeholder if no value is given. |
343
- | noDefault | Boolean | false | Lets you omit the default value of "0" when the vale is not defined. The input will be empty in this case. |
344
- | ref | React.ref | — | A ref function assigned to the wrapper element. |
345
- | className | String | | Additional classes to be set on the component. |
328
+ | id | string | | A native input id attribute. Passed through as HTML attribute to the input element. |
329
+ | min | number | 0 | The minimum value of the input. |
330
+ | max | number | Number.MAX_VALUE | The maximum value of the input. |
331
+ | value | number | 0 | The initial value of the input. Used to control the component from the outside. |
332
+ | noDefault | boolean | false | Lets you omit the default value of "0" when the vale is not defined. The input will be empty in this case. |
333
+ | step | number | 1 | The size of increment or decrement (only works with number type). |
334
+ | disabled | boolean | false | Enables or disabled the input. |
335
+ | onChange | (value?: number) => void | — | Callback function triggered when the input value changes. When the value is removed by the user, the input is kept empty, but it triggers the callback without any value since the user has finished his input. |
336
+ | onKeyDown | (event: React.KeyboardEvent<HTMLInputElement>) => void | | Callback function that gets triggered after filtering out invalid keystrokes. |
337
+ | bsSize | 'sm' \| 'md' \| 'lg' | 'md' | Defines the size of the input to be rendered. |
338
+ | unit | string \| React.ReactNode | — | A unit for this value. This will be shown in a dedicated input addon. |
339
+ | inputAddon | string | — | A rioglyph icon tio be shown in front of the input. |
340
+ | errorMessage | string \| React.ReactNode | | Input error message. |
341
+ | warningMessage | string \| React.ReactNode | — | Input warning message. |
342
+ | messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
343
+ | controls | React.ReactNode | | This prop is used by the NumberControl component to pass on the +/- spinner controls. |
344
+ | placeholder | string | — | The input placeholder if no value is given. |
345
+ | digitPrecision | number | 3 | Number of digits after the comma the value should be fixed to. |
346
+ | className | string | — | Additional classes to be set on the component. |
346
347
 
347
348
  ## NumberControl
348
349
 
@@ -686,21 +687,22 @@ export default () => (
686
687
 
687
688
  | Name | Type | Default | Description |
688
689
  | --- | --- | --- | --- |
689
- | min | Number | 0 | The minimum value of the input. |
690
- | max | Number | Number.MAX_VALUE | The maximum value of the input. |
691
- | value | Number | 0 | The initial value of the input. |
692
- | step | Number | 1 | The size of increment or decrement (only works with number type). |
693
- | digitPrecision | Number | 3 | Number of digits after the comma the value should be fixed to. |
694
- | disabled | Boolean | false | Enables or disabled the input. |
695
- | onChange | (value?: number) => void | | Callback function fired when the value of the input changes. |
696
- | onKeyDown | (event: React.KeyboardEvent<HTMLInputElement>) => void | — | Callback function that gets triggered after filtering out invalid key strokes. |
697
- | bsSize | 'sm' \| 'md' \| 'lg' | 'md' | Defines the size of the input to be rendered. Possible values are: 'sm' 'md'or 'lg' |
698
- | unit | String / Node | | A unit for this value. This will be shown in a dedicated input addon. |
699
- | errorMessage | String | — | Optional error message. |
700
- | warningMessage | String | — | Optional warning message. |
701
- | messageWhiteSpace | 'normal' \| 'prewrap' \| 'nowrap' | 'normal' | Optional warning message white-space. |
702
- | inputAddon | String | — | A rioglyph icon tio be shown in front of the input. |
703
- | placeholder | String | | The input placeholder if no value is given. |
704
- | noDefault | Boolean | false | Lets you omit the default value of "0" when the vale is not defined. The input will be empty in this case. |
705
- | ref | React.ref | — | A ref function assigned to the wrapper element. |
706
- | className | String | | Additional classes to be set on the component. |
690
+ | id | string | | A native input id attribute. Passed through as HTML attribute to the input element. |
691
+ | min | number | 0 | The minimum value of the input. |
692
+ | max | number | Number.MAX_VALUE | The maximum value of the input. |
693
+ | value | number | 0 | The initial value of the input. Used to control the component from the outside. |
694
+ | noDefault | boolean | false | Lets you omit the default value of "0" when the vale is not defined. The input will be empty in this case. |
695
+ | step | number | 1 | The size of increment or decrement (only works with number type). |
696
+ | disabled | boolean | false | Enables or disabled the input. |
697
+ | onChange | (value?: number) => void | — | Callback function triggered when the input value changes. When the value is removed by the user, the input is kept empty, but it triggers the callback without any value since the user has finished his input. |
698
+ | onKeyDown | (event: React.KeyboardEvent<HTMLInputElement>) => void | | Callback function that gets triggered after filtering out invalid keystrokes. |
699
+ | bsSize | 'sm' \| 'md' \| 'lg' | 'md' | Defines the size of the input to be rendered. |
700
+ | unit | string \| React.ReactNode | — | A unit for this value. This will be shown in a dedicated input addon. |
701
+ | inputAddon | string | — | A rioglyph icon tio be shown in front of the input. |
702
+ | errorMessage | string \| React.ReactNode | | Input error message. |
703
+ | warningMessage | string \| React.ReactNode | — | Input warning message. |
704
+ | messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
705
+ | controls | React.ReactNode | | This prop is used by the NumberControl component to pass on the +/- spinner controls. |
706
+ | placeholder | string | — | The input placeholder if no value is given. |
707
+ | digitPrecision | number | 3 | Number of digits after the comma the value should be fixed to. |
708
+ | className | string | — | Additional classes to be set on the component. |
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/onboarding
6
- *Captured:* 2026-01-07T12:11:54.659Z
6
+ *Captured:* 2026-02-03T14:05:01.652Z
7
7
 
8
8
  Useful when you want to control a single tooltip that highlights a portion of the UI.
9
9
 
@@ -87,19 +87,19 @@ export default () => {
87
87
 
88
88
  | Name | Type | Default | Description |
89
89
  | --- | --- | --- | --- |
90
- | id | String | — | The id of the DOM element. |
91
- | show | Boolean | false | Indicates whether the onboarding tip is shown. |
92
- | showCloseIcon | Boolean | true | Defines whether to show a close icon. |
93
- | textAlignment | String | OnboardingTip.TEXT_ALIGNMENT_LEFT | Define how the text should be aligned. Possible values are: OnboardingTip.TEXT_ALIGNMENT_LEFT OnboardingTip.TEXT_ALIGNMENT_CENTER OnboardingTip.TEXT_ALIGNMENT_RIGHT |
94
- | width | Number | — | Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450 or 500 |
95
- | onHide | Function | () => {} | Callback function for when the component shall be hidden. |
96
- | useInDialog | Boolean | false | Changes the z-index. |
97
- | className | String | — | Additional classes to be set on the wrapper element. |
98
- | title | String / Node | — | The title of the onboarding tip. |
99
- | content | String / Node | — | The content of the onboarding tip. |
100
- | preventOverflow | Boolean | true | Prevents Onboarding tips from being cut off horizontally at screen borders. |
101
- | popperConfig | Object | — | A Popper.js config object passed to the the underlying popper instance. |
102
- | placement | String | OnboardingTip.BOTTOM | Define how the component should be placed. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |
90
+ | id | string | — | The ID of the DOM element. |
91
+ | show | boolean | false | Indicates whether the onboarding tip is shown. |
92
+ | showCloseIcon | boolean | true | Defines whether to show a close icon. |
93
+ | textAlignment | TextAlignment | 'left' | Define how the text should be aligned. Possible values are: left center right |
94
+ | width | TooltipWidth | — | The tooltip's width. Possible values are: auto 100 150 200 250 300 350 400 450 500 |
95
+ | onHide | VoidFunction | () => {} | Callback function for when the component shall be hidden. |
96
+ | useInDialog | boolean | false | Changes the z-index. |
97
+ | className | string | — | Additional classes to be set on the wrapper element. |
98
+ | title | string \| ReactNode | — | The title of the onboarding tip. |
99
+ | content | string \| ReactNode | — | The content of the onboarding tip. |
100
+ | preventOverflow | boolean | true | Prevents onboarding tips from being cut off horizontally at screen borders. |
101
+ | popperConfig | PopperConfig | — | A Popper.js config object passed to the underlying popper instance. |
102
+ | placement | Placement | 'bottom' | Define how the component should be placed. Possible values are: auto-start auto auto-end top-start top top-end right-start right right-end bottom-start bottom bottom-end left-start left left-end |
103
103
 
104
104
  ## Onboarding tour
105
105
 
@@ -270,28 +270,8 @@ export default () => {
270
270
  };
271
271
  ```
272
272
 
273
- #### Props
273
+ #### Props (json)
274
274
 
275
- | Name | Type | Default | Description |
276
- | --- | --- | --- | --- |
277
- | steps | OnboardingStep[] | — | Array of steps to highlight. This should be passed when setting up a product tour. |
278
- | └element | String | — | The target element to highlight. This can be a DOM element (ref), a function that returns a DOM element, or a CSS selector (most likely, you want to go with a selector as it's the easiest one to implement). If no element is given, the popover will simply be centered on the screen. |
279
- | └popover | Object | — | Defines the content and appearance of the popover using those properties: title: Title text to be shown. description: Description text to be shown. side: The position of the popover relative to the target element. align: Where the popover is anchored to the target element. showButtons: The buttons that should be shown in the popover - for this step only. disableButtons: The buttons that should be disabled in the popover - for this step only. disableActiveInteraction: Whether to disable interaction with the highlighted element. popoverClass: Custom class to add to the popover element. prevBtnText: Text to use for the "previous" button - specific for this step only. nextBtnText: Text to use for the "next" button - specific for this step only. doneBtnText: Text to use for the "done" (a.k.a. the final "next") button - specific for this step only. |
280
- | └onHighlightStarted | Function | — | Callback triggered when the highlighting is about to become visible. |
281
- | └onHighlighted | Function | — | Callback triggered when the highlight is visible. |
282
- | └onDeselected | Function | — | Callback triggered when the highlight is about to become invisible. |
283
- | showButtons | AllowedButtons[] | ["next", "previous", "close"] | Array of buttons to show in the popover. Defaults to ["next", "previous", "close"] for product tours and [] for single element highlighting. |
284
- | disableButtons | AllowedButtons[] | — | Array of buttons to disable. Useful when you want to show some buttons but disable others. |
285
- | prevBtnText | String | Previous | Text to use for the "previous" buttons. |
286
- | nextBtnText | String | Next | Text to use for the "next" buttons. |
287
- | doneBtnText | String | Done | Text to use for the "done" button. |
288
- | showProgress | Boolean | true | Indicates whether to show progress in the onboarding popover. |
289
- | allowClose | Boolean | false | Whether to allow closing the popover by clicking on the backdrop. |
290
- | stagePadding | Number | 10 | Distance between the highlighted element and the cutout. |
291
- | stageRadius | Number | 5 | Radius of the cutout around the highlighted element. |
292
- | allowKeyboardControl | Boolean | true | Whether to allow keyboard navigation. |
293
- | disableActiveInteraction | Boolean | false | Whether to disable interaction with the highlighted element. Can be configured at the step level as well |
294
- | noBackdrop | Boolean | false | Option to disable the backdrop. The backdrop element is still there but with 100% opacity and the close on the backdrop is disabled. |
295
- | popoverClass | String | — | Additional classes set on the popover itself. |
296
- | onPopoverRender | Function | — | Callback triggered when the onboarding popover renders. |
297
- | onDestroyed | Function | — | Callback triggered when the onboarding tour is "destroyed" (dismissed). |
275
+ ```json
276
+ '[data-onboarding-walkthrough-step="2"]'
277
+ ```
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Content
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/page
6
- *Captured:* 2026-01-07T12:11:44.106Z
6
+ *Captured:* 2026-02-03T14:04:49.416Z
7
7
 
8
8
  ## Page
9
9
 
@@ -97,11 +97,11 @@ export default () => (
97
97
 
98
98
  | Name | Type | Default | Description |
99
99
  | --- | --- | --- | --- |
100
- | width | Number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page.Please make sure the element does not get stretched when using flexbox. |
101
- | orientation | 'portrait' \| 'landscape' | portrait | Defines the layout of the page |
102
- | shadow | Boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
103
- | border | Boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
104
- | className | String | — | Additional classes to be set on the wrapper element |
100
+ | width | number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page. Please make sure the element does not get stretched when using flexbox. |
101
+ | orientation | 'portrait' \| 'landscape' | 'portrait' | Defines the layout of the page |
102
+ | shadow | boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
103
+ | border | boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
104
+ | className | string | — | Additional classes to be set on the wrapper element |
105
105
 
106
106
  ### Example: Page 1
107
107
 
@@ -182,11 +182,11 @@ export default () => (
182
182
 
183
183
  | Name | Type | Default | Description |
184
184
  | --- | --- | --- | --- |
185
- | width | Number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page.Please make sure the element does not get stretched when using flexbox. |
186
- | orientation | 'portrait' \| 'landscape' | portrait | Defines the layout of the page |
187
- | shadow | Boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
188
- | border | Boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
189
- | className | String | — | Additional classes to be set on the wrapper element |
185
+ | width | number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page. Please make sure the element does not get stretched when using flexbox. |
186
+ | orientation | 'portrait' \| 'landscape' | 'portrait' | Defines the layout of the page |
187
+ | shadow | boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
188
+ | border | boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
189
+ | className | string | — | Additional classes to be set on the wrapper element |
190
190
 
191
191
  ### Example: Portrait
192
192
 
@@ -234,8 +234,8 @@ export default () => (
234
234
 
235
235
  | Name | Type | Default | Description |
236
236
  | --- | --- | --- | --- |
237
- | width | Number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page.Please make sure the element does not get stretched when using flexbox. |
238
- | orientation | 'portrait' \| 'landscape' | portrait | Defines the layout of the page |
239
- | shadow | Boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
240
- | border | Boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
241
- | className | String | — | Additional classes to be set on the wrapper element |
237
+ | width | number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page. Please make sure the element does not get stretched when using flexbox. |
238
+ | orientation | 'portrait' \| 'landscape' | 'portrait' | Defines the layout of the page |
239
+ | shadow | boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
240
+ | border | boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
241
+ | className | string | — | Additional classes to be set on the wrapper element |
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Navigation
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/pager
6
- *Captured:* 2026-01-07T12:11:09.322Z
6
+ *Captured:* 2026-02-03T14:04:09.205Z
7
7
 
8
8
  ## Pager
9
9
 
@@ -124,10 +124,10 @@ export default () => (
124
124
 
125
125
  | Name | Type | Default | Description |
126
126
  | --- | --- | --- | --- |
127
- | title | String / Node | — | The title or name of the section next/previous section. |
128
- | label | String / Node | — | The optional label for the full variant. |
129
- | alignRight | Boolean | false | Set right alignment for "previous" pager content to be aligned to the right side of the pager and the arrow on the left side. |
130
- | disabled | Boolean | false | Sets the pager disabled. |
131
- | variant | String | full | Define how large the component should be rendered. Possible values are: Pager.VARIANT_FULL, Pager.VARIANT_COMPACT, full, compact |
132
- | onClick | Function | () => {} | Callback function for when the component is clicked. |
133
- | className | String | — | Additional classes for the wrapper element. |
127
+ | title | string \| React.ReactNode | — | The title or name of the section next/previous section. |
128
+ | label | string \| React.ReactNode | — | The optional label for the full variant. |
129
+ | alignRight | boolean | false | Set right alignment for "previous" pager content to be aligned to the right side of the pager and the arrow on the left side. |
130
+ | variant | ObjectValues<typeof PagerVariant> | `full` | Define how large the component should be rendered. Possible values are: Pager.VARIANT_FULL, Pager.VARIANT_COMPACT or full, compact. |
131
+ | disabled | boolean | false | Sets the pager disabled. |
132
+ | onClick | (event: React.MouseEvent<HTMLDivElement>) => void | — | Callback function for when the component is clicked. |
133
+ | className | string | — | Additional classes for the wrapper element. |