@rio-cloud/uikit-mcp 1.1.0 → 1.1.2

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 (192) hide show
  1. package/README.md +1 -0
  2. package/dist/doc-metadata.json +20 -20
  3. package/dist/docs/components/accentBar.md +1 -1
  4. package/dist/docs/components/activity.md +1 -1
  5. package/dist/docs/components/animatedNumber.md +2 -2
  6. package/dist/docs/components/animatedTextReveal.md +6 -6
  7. package/dist/docs/components/animations.md +31 -31
  8. package/dist/docs/components/appHeader.md +1 -1
  9. package/dist/docs/components/appLayout.md +74 -16
  10. package/dist/docs/components/appNavigationBar.md +1 -1
  11. package/dist/docs/components/areaCharts.md +5 -5
  12. package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
  13. package/dist/docs/components/assetTree.md +371 -464
  14. package/dist/docs/components/autosuggests.md +1 -1
  15. package/dist/docs/components/avatar.md +1 -1
  16. package/dist/docs/components/banner.md +2 -2
  17. package/dist/docs/components/barCharts.md +13 -33
  18. package/dist/docs/components/barList.md +11 -11
  19. package/dist/docs/components/basicMap.md +1 -1
  20. package/dist/docs/components/bottomSheet.md +1 -1
  21. package/dist/docs/components/button.md +1 -1
  22. package/dist/docs/components/buttonToolbar.md +1 -1
  23. package/dist/docs/components/calendarStripe.md +50 -66
  24. package/dist/docs/components/card.md +1 -1
  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 +1 -1
  29. package/dist/docs/components/checkbox.md +1 -1
  30. package/dist/docs/components/clearableInput.md +1 -1
  31. package/dist/docs/components/collapse.md +2 -2
  32. package/dist/docs/components/composedCharts.md +15 -15
  33. package/dist/docs/components/contentLoader.md +101 -101
  34. package/dist/docs/components/dataTabs.md +9 -9
  35. package/dist/docs/components/datepickers.md +29 -29
  36. package/dist/docs/components/dialogs.md +1 -1
  37. package/dist/docs/components/divider.md +1 -1
  38. package/dist/docs/components/dropdowns.md +4398 -4368
  39. package/dist/docs/components/editableContent.md +1 -1
  40. package/dist/docs/components/expander.md +1 -1
  41. package/dist/docs/components/fade.md +1 -1
  42. package/dist/docs/components/fadeExpander.md +1 -1
  43. package/dist/docs/components/fadeUp.md +2 -2
  44. package/dist/docs/components/feedback.md +1 -1
  45. package/dist/docs/components/filePickers.md +1 -1
  46. package/dist/docs/components/formLabel.md +1 -1
  47. package/dist/docs/components/fullscreenMap.md +1 -1
  48. package/dist/docs/components/groupedItemList.md +1 -1
  49. package/dist/docs/components/iconList.md +3 -3
  50. package/dist/docs/components/imagePreloader.md +1 -1
  51. package/dist/docs/components/labeledElement.md +1 -1
  52. package/dist/docs/components/licensePlate.md +1 -1
  53. package/dist/docs/components/lineCharts.md +5 -5
  54. package/dist/docs/components/listMenu.md +1 -1
  55. package/dist/docs/components/loadMore.md +1 -1
  56. package/dist/docs/components/mainNavigation.md +1 -1
  57. package/dist/docs/components/mapCircle.md +1 -1
  58. package/dist/docs/components/mapCluster.md +1 -1
  59. package/dist/docs/components/mapContext.md +1 -1
  60. package/dist/docs/components/mapDraggableMarker.md +1 -1
  61. package/dist/docs/components/mapGettingStarted.md +1 -1
  62. package/dist/docs/components/mapInfoBubble.md +1 -1
  63. package/dist/docs/components/mapLayerGroup.md +1 -1
  64. package/dist/docs/components/mapMarker.md +1 -1
  65. package/dist/docs/components/mapPolygon.md +1 -1
  66. package/dist/docs/components/mapRoute.md +1 -1
  67. package/dist/docs/components/mapRouteGenerator.md +1 -1
  68. package/dist/docs/components/mapSettings.md +1 -1
  69. package/dist/docs/components/mapUtils.md +1 -1
  70. package/dist/docs/components/multiselects.md +1 -1
  71. package/dist/docs/components/noData.md +1 -1
  72. package/dist/docs/components/notifications.md +1 -1
  73. package/dist/docs/components/numbercontrol.md +1 -1
  74. package/dist/docs/components/onboarding.md +1 -1
  75. package/dist/docs/components/page.md +1 -1
  76. package/dist/docs/components/pager.md +1 -1
  77. package/dist/docs/components/pieCharts.md +69 -37
  78. package/dist/docs/components/popover.md +1 -1
  79. package/dist/docs/components/position.md +1 -1
  80. package/dist/docs/components/radialBarCharts.md +17 -17
  81. package/dist/docs/components/radiobutton.md +1 -1
  82. package/dist/docs/components/releaseNotes.md +1 -1
  83. package/dist/docs/components/resizer.md +1 -1
  84. package/dist/docs/components/responsiveColumnStripe.md +1 -1
  85. package/dist/docs/components/responsiveVideo.md +1 -1
  86. package/dist/docs/components/rioglyph.md +1 -1
  87. package/dist/docs/components/rules.md +3 -3
  88. package/dist/docs/components/saveableInput.md +19 -19
  89. package/dist/docs/components/selects.md +1 -1
  90. package/dist/docs/components/sidebar.md +1 -1
  91. package/dist/docs/components/sliders.md +1 -1
  92. package/dist/docs/components/smoothScrollbars.md +1 -1
  93. package/dist/docs/components/spinners.md +1 -1
  94. package/dist/docs/components/states.md +1 -1
  95. package/dist/docs/components/statsWidgets.md +1 -1
  96. package/dist/docs/components/statusBar.md +1 -1
  97. package/dist/docs/components/stepButton.md +1 -1
  98. package/dist/docs/components/steppedProgressBars.md +1 -1
  99. package/dist/docs/components/subNavigation.md +1 -1
  100. package/dist/docs/components/supportMarker.md +1 -1
  101. package/dist/docs/components/svgImage.md +1 -1
  102. package/dist/docs/components/switch.md +1 -1
  103. package/dist/docs/components/tables.md +1 -1
  104. package/dist/docs/components/tagManager.md +1 -1
  105. package/dist/docs/components/tags.md +1 -1
  106. package/dist/docs/components/teaser.md +1 -1
  107. package/dist/docs/components/timeline.md +1 -1
  108. package/dist/docs/components/timepicker.md +1 -1
  109. package/dist/docs/components/toggleButton.md +1 -1
  110. package/dist/docs/components/tooltip.md +1 -1
  111. package/dist/docs/components/virtualList.md +73 -70
  112. package/dist/docs/foundations.md +112 -112
  113. package/dist/docs/start/changelog.md +715 -434
  114. package/dist/docs/start/goodtoknow.md +1 -1
  115. package/dist/docs/start/guidelines/color-combinations.md +1 -1
  116. package/dist/docs/start/guidelines/custom-css.md +1 -1
  117. package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
  118. package/dist/docs/start/guidelines/formatting.md +1 -1
  119. package/dist/docs/start/guidelines/iframe.md +2 -2
  120. package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
  121. package/dist/docs/start/guidelines/print-css.md +1 -1
  122. package/dist/docs/start/guidelines/spinner.md +81 -81
  123. package/dist/docs/start/guidelines/supported-browsers.md +1 -1
  124. package/dist/docs/start/guidelines/writing.md +1 -1
  125. package/dist/docs/start/howto.md +9 -9
  126. package/dist/docs/start/intro.md +1 -1
  127. package/dist/docs/start/responsiveness.md +1 -1
  128. package/dist/docs/templates/common-table.md +11 -11
  129. package/dist/docs/templates/detail-views.md +2 -2
  130. package/dist/docs/templates/expandable-details.md +1 -1
  131. package/dist/docs/templates/feature-cards.md +55 -55
  132. package/dist/docs/templates/form-summary.md +22 -22
  133. package/dist/docs/templates/form-toggle.md +1 -1
  134. package/dist/docs/templates/list-blocks.md +206 -206
  135. package/dist/docs/templates/loading-progress.md +3 -3
  136. package/dist/docs/templates/options-panel.md +1 -1
  137. package/dist/docs/templates/panel-variants.md +1 -1
  138. package/dist/docs/templates/progress-cards.md +1 -1
  139. package/dist/docs/templates/progress-success.md +1 -1
  140. package/dist/docs/templates/settings-form.md +23 -23
  141. package/dist/docs/templates/stats-blocks.md +16 -16
  142. package/dist/docs/templates/table-panel.md +1 -1
  143. package/dist/docs/templates/table-row-animation.md +1 -1
  144. package/dist/docs/templates/usage-cards.md +1 -1
  145. package/dist/docs/utilities/deviceUtils.md +1 -1
  146. package/dist/docs/utilities/featureToggles.md +1 -1
  147. package/dist/docs/utilities/fuelTypeUtils.md +1 -1
  148. package/dist/docs/utilities/routeUtils.md +1 -1
  149. package/dist/docs/utilities/useAfterMount.md +1 -1
  150. package/dist/docs/utilities/useAutoAnimate.md +1 -1
  151. package/dist/docs/utilities/useAverage.md +1 -1
  152. package/dist/docs/utilities/useClickOutside.md +1 -1
  153. package/dist/docs/utilities/useClipboard.md +2 -2
  154. package/dist/docs/utilities/useCount.md +1 -1
  155. package/dist/docs/utilities/useDarkMode.md +1 -1
  156. package/dist/docs/utilities/useDebugInfo.md +4 -4
  157. package/dist/docs/utilities/useEffectOnce.md +1 -1
  158. package/dist/docs/utilities/useElapsedTime.md +1 -1
  159. package/dist/docs/utilities/useElementSize.md +1 -1
  160. package/dist/docs/utilities/useEsc.md +1 -1
  161. package/dist/docs/utilities/useEvent.md +1 -1
  162. package/dist/docs/utilities/useFocusTrap.md +1 -1
  163. package/dist/docs/utilities/useFullscreen.md +1 -1
  164. package/dist/docs/utilities/useHover.md +1 -1
  165. package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
  166. package/dist/docs/utilities/useInterval.md +1 -1
  167. package/dist/docs/utilities/useIsFocusWithin.md +1 -1
  168. package/dist/docs/utilities/useKey.md +1 -1
  169. package/dist/docs/utilities/useLocalStorage.md +1 -1
  170. package/dist/docs/utilities/useLocationSuggestions.md +1 -1
  171. package/dist/docs/utilities/useMax.md +1 -1
  172. package/dist/docs/utilities/useMin.md +1 -1
  173. package/dist/docs/utilities/useMutationObserver.md +1 -1
  174. package/dist/docs/utilities/useOnScreen.md +1 -1
  175. package/dist/docs/utilities/useOnlineStatus.md +1 -1
  176. package/dist/docs/utilities/usePostMessage.md +1 -1
  177. package/dist/docs/utilities/usePostMessageSender.md +1 -1
  178. package/dist/docs/utilities/usePrevious.md +1 -1
  179. package/dist/docs/utilities/useResizeObserver.md +1 -1
  180. package/dist/docs/utilities/useScrollPosition.md +1 -1
  181. package/dist/docs/utilities/useSearch.md +1 -1
  182. package/dist/docs/utilities/useSorting.md +1 -1
  183. package/dist/docs/utilities/useStateWithValidation.md +1 -1
  184. package/dist/docs/utilities/useSum.md +1 -1
  185. package/dist/docs/utilities/useTableExport.md +51 -51
  186. package/dist/docs/utilities/useTableSelection.md +87 -87
  187. package/dist/docs/utilities/useTimeout.md +1 -1
  188. package/dist/docs/utilities/useToggle.md +1 -1
  189. package/dist/docs/utilities/useWindowResize.md +1 -1
  190. package/dist/index.mjs +1 -1
  191. package/dist/version.json +2 -2
  192. package/package.json +1 -1
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/accentBar
6
- *Captured:* 2025-12-12T12:38:50.323Z
6
+ *Captured:* 2025-12-15T15:02:48.832Z
7
7
 
8
8
  The AccentBar component is a small, colored vertical bar (typically a few pixels wide) used to visually highlight or categorize rows in lists, tables, or cards. It helps improve readability by providing a quick visual cue for different statuses, categories, or priorities.
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/activity
6
- *Captured:* 2025-12-12T12:38:49.175Z
6
+ *Captured:* 2025-12-15T15:02:47.863Z
7
7
 
8
8
  ## Activity
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Content
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/animatedNumber
6
- *Captured:* 2025-12-12T12:38:34.527Z
6
+ *Captured:* 2025-12-15T15:02:32.772Z
7
7
 
8
8
  ## AnimatedNumber
9
9
 
@@ -59,7 +59,7 @@ export default () => (
59
59
  <div>
60
60
  <label>Default AnimatedNumber</label>
61
61
  <div class="width-60 margin-bottom-20 text-right text-size-h1 text-color-info">
62
- <span class="">28</span>
62
+ <span class="">27</span>
63
63
  </div>
64
64
  <label>AnimatedNumber with prefix and unit</label>
65
65
  <div class="width-100 margin-bottom-20 text-right text-size-h1 text-color-primary">
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Content
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/animatedTextReveal
6
- *Captured:* 2025-12-12T12:38:35.492Z
6
+ *Captured:* 2025-12-15T15:02:33.935Z
7
7
 
8
8
  AnimatedTextReveal displays text that smoothly reveals from below while a subtle shimmer effect runs across it. It’s designed for attention-grabbing messages or live-updating content, combining a primary reveal motion with an optional continuous shimmer highlight.
9
9
 
@@ -136,7 +136,7 @@ export default () => {
136
136
  <div class="text-uppercase text-size-12">Live stream</div>
137
137
  </div>
138
138
  <div class="position-relative" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter);">
139
- <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.327091; transform: translateY(8.88724px);">System is thinking...</div>
139
+ <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.282217; transform: translateY(8.91065px);">System is thinking...</div>
140
140
  </div>
141
141
  </div>
142
142
  </div>
@@ -148,7 +148,7 @@ export default () => {
148
148
  <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Text with animated gradient</div>
149
149
  <div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-15">
150
150
  <div class="position-relative" aria-live="polite" style="--atr-duration: 2s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 260px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter);">
151
- <div class="animated-text-reveal position-relative" style="--atr-duration: 2s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 260px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.327091; transform: translateY(8.88724px);">Processing your request...</div>
151
+ <div class="animated-text-reveal position-relative" style="--atr-duration: 2s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 260px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.282217; transform: translateY(8.91065px);">Processing your request...</div>
152
152
  </div>
153
153
  </div>
154
154
  </div>
@@ -156,7 +156,7 @@ export default () => {
156
156
  <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Text with automatic cycling but without animated gradient</div>
157
157
  <div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-15">
158
158
  <div class="position-relative" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter);">
159
- <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(2.99694px);">System is thinking...</div>
159
+ <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(2.70944px);">System is thinking...</div>
160
160
  </div>
161
161
  </div>
162
162
  </div>
@@ -164,7 +164,7 @@ export default () => {
164
164
  <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Text with custom styling</div>
165
165
  <div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-15">
166
166
  <div class="position-relative text-size-16" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-dark); --atr-shimmer-color: var(--gray-lightest);">
167
- <div class="animated-text-reveal position-relative is-animated" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-dark); --atr-shimmer-color: var(--gray-lightest); opacity: 0; transform: translateY(2.99694px);">System is thinking...</div>
167
+ <div class="animated-text-reveal position-relative is-animated" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-dark); --atr-shimmer-color: var(--gray-lightest); opacity: 0; transform: translateY(2.70944px);">System is thinking...</div>
168
168
  </div>
169
169
  </div>
170
170
  </div>
@@ -173,7 +173,7 @@ export default () => {
173
173
  <div class="max-width-150">
174
174
  <button type="button" class="btn btn-primary btn-block btn-component" tabindex="0">
175
175
  <div class="position-relative" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 64px; --atr-text-color: var(--color-white); --atr-shimmer-color: var(--gray-lighter);">
176
- <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 64px; --atr-text-color: var(--color-white); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(2.99694px);">Continue</div>
176
+ <div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 64px; --atr-text-color: var(--color-white); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(2.70944px);">Continue</div>
177
177
  </div>
178
178
  </button>
179
179
  </div>
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Content
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/animations
6
- *Captured:* 2025-12-12T12:38:35.293Z
6
+ *Captured:* 2025-12-15T15:02:33.481Z
7
7
 
8
8
  The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.
9
9
 
@@ -53,7 +53,7 @@ export default () => {
53
53
  #### HTML (html)
54
54
 
55
55
  ```html
56
- <div style="opacity: 0.87813;">
56
+ <div style="opacity: 0.873096;">
57
57
  <div class="margin-10">
58
58
  <label>Some Data</label>
59
59
  <div>
@@ -161,13 +161,13 @@ export default () => (
161
161
  </div>
162
162
  <div style="opacity: 1;">
163
163
  <svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
164
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0.901149930577958px 1px">
164
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0.9474685297172982px 1px">
165
165
  </path>
166
166
  </svg>
167
167
  </div>
168
168
  <div style="opacity: 1;">
169
169
  <svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
170
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0px 1px">
170
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0.030337102158227935px 1px">
171
171
  </path>
172
172
  </svg>
173
173
  </div>
@@ -176,21 +176,21 @@ export default () => (
176
176
 
177
177
  ### Example: Example 3
178
178
 
179
- Add ItemItem G3AEKDJFMTH
179
+ Add ItemItem B5WVP1454N
180
180
 
181
- Item Y640NYGGSS
181
+ Item B2NSH3LST8
182
182
 
183
- Item RI4FQRRE3B
183
+ Item U0X067T8JOG
184
184
 
185
185
  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.
186
186
 
187
187
  #### Summary
188
188
 
189
- Add ItemItem G3AEKDJFMTH
189
+ Add ItemItem B5WVP1454N
190
190
 
191
- Item Y640NYGGSS
191
+ Item B2NSH3LST8
192
192
 
193
- Item RI4FQRRE3B
193
+ Item U0X067T8JOG
194
194
 
195
195
  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.
196
196
 
@@ -259,7 +259,7 @@ export default () => {
259
259
  <div style="height: auto;">
260
260
  <div style="opacity: 1;">
261
261
  <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
262
- <div>Item G3AEKDJFMTH</div>
262
+ <div>Item B5WVP1454N</div>
263
263
  <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
264
264
  <span class="rioglyph rioglyph-remove text-size-14">
265
265
  </span>
@@ -270,7 +270,7 @@ export default () => {
270
270
  <div style="height: auto;">
271
271
  <div style="opacity: 1;">
272
272
  <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
273
- <div>Item Y640NYGGSS</div>
273
+ <div>Item B2NSH3LST8</div>
274
274
  <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
275
275
  <span class="rioglyph rioglyph-remove text-size-14">
276
276
  </span>
@@ -281,7 +281,7 @@ export default () => {
281
281
  <div style="height: auto;">
282
282
  <div style="opacity: 1;">
283
283
  <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
284
- <div>Item RI4FQRRE3B</div>
284
+ <div>Item U0X067T8JOG</div>
285
285
  <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
286
286
  <span class="rioglyph rioglyph-remove text-size-14">
287
287
  </span>
@@ -297,31 +297,31 @@ export default () => {
297
297
 
298
298
  ### Example: Example 4
299
299
 
300
- Load ItemsItem ARY5RVCSMF
300
+ Load ItemsItem 38PP430D6M
301
301
 
302
- Item U1KJFLCL5Y
302
+ Item RPNOB6D411
303
303
 
304
- Item ZJVCAWDL2C
304
+ Item AQQ4M0ZVKXI
305
305
 
306
- Item HTUBO1CPKC
306
+ Item KTZKI295U1
307
307
 
308
- Item 0LO3ZAEIMI
308
+ Item 5DTMWYDMLFH
309
309
 
310
- Item 0FRJQMCFAD
310
+ Item Z5EJ4VMHJ1H
311
311
 
312
312
  #### Summary
313
313
 
314
- Load ItemsItem ARY5RVCSMF
314
+ Load ItemsItem 38PP430D6M
315
315
 
316
- Item U1KJFLCL5Y
316
+ Item RPNOB6D411
317
317
 
318
- Item ZJVCAWDL2C
318
+ Item AQQ4M0ZVKXI
319
319
 
320
- Item HTUBO1CPKC
320
+ Item KTZKI295U1
321
321
 
322
- Item 0LO3ZAEIMI
322
+ Item 5DTMWYDMLFH
323
323
 
324
- Item 0FRJQMCFAD
324
+ Item Z5EJ4VMHJ1H
325
325
 
326
326
  #### React (tsx)
327
327
 
@@ -388,7 +388,7 @@ export default () => {
388
388
  <span class="checkbox-text">
389
389
  <span>
390
390
  <div class="display-flex gap-5">
391
- <span>Item ARY5RVCSMF</span>
391
+ <span>Item 38PP430D6M</span>
392
392
  </div>
393
393
  </span>
394
394
  </span>
@@ -400,7 +400,7 @@ export default () => {
400
400
  <span class="checkbox-text">
401
401
  <span>
402
402
  <div class="display-flex gap-5">
403
- <span>Item U1KJFLCL5Y</span>
403
+ <span>Item RPNOB6D411</span>
404
404
  </div>
405
405
  </span>
406
406
  </span>
@@ -412,7 +412,7 @@ export default () => {
412
412
  <span class="checkbox-text">
413
413
  <span>
414
414
  <div class="display-flex gap-5">
415
- <span>Item ZJVCAWDL2C</span>
415
+ <span>Item AQQ4M0ZVKXI</span>
416
416
  </div>
417
417
  </span>
418
418
  </span>
@@ -424,7 +424,7 @@ export default () => {
424
424
  <span class="checkbox-text">
425
425
  <span>
426
426
  <div class="display-flex gap-5">
427
- <span>Item HTUBO1CPKC</span>
427
+ <span>Item KTZKI295U1</span>
428
428
  </div>
429
429
  </span>
430
430
  </span>
@@ -436,7 +436,7 @@ export default () => {
436
436
  <span class="checkbox-text">
437
437
  <span>
438
438
  <div class="display-flex gap-5">
439
- <span>Item 0LO3ZAEIMI</span>
439
+ <span>Item 5DTMWYDMLFH</span>
440
440
  </div>
441
441
  </span>
442
442
  </span>
@@ -448,7 +448,7 @@ export default () => {
448
448
  <span class="checkbox-text">
449
449
  <span>
450
450
  <div class="display-flex gap-5">
451
- <span>Item 0FRJQMCFAD</span>
451
+ <span>Item Z5EJ4VMHJ1H</span>
452
452
  </div>
453
453
  </span>
454
454
  </span>
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Application
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/appHeader
6
- *Captured:* 2025-12-12T12:38:05.897Z
6
+ *Captured:* 2025-12-15T15:02:03.154Z
7
7
 
8
8
  This is the header component for all services. All navigation link components that are passed into the header should be based on react-router
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Application
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/appLayout
6
- *Captured:* 2025-12-12T12:38:08.729Z
6
+ *Captured:* 2025-12-15T15:02:04.754Z
7
7
 
8
8
  The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar
9
9
 
@@ -1162,13 +1162,17 @@ Navigation 3
1162
1162
 
1163
1163
  3
1164
1164
  1
1165
+ 2
1165
1166
  1
1166
1167
 
1167
- Asset Group2
1168
- Vehicle-2511Asset 1002
1169
- Vehicle-6810Asset 1001
1168
+ Asset Group5
1169
+ Vehicle-2702Asset 1002
1170
+ Vehicle-2861Asset 1006
1171
+ Vehicle-3712Asset 1001
1172
+ Vehicle-6558Asset 1000
1173
+ Vehicle-9897Asset 1003
1170
1174
 
1171
- Ungrouped3
1175
+ Ungrouped2
1172
1176
 
1173
1177
  200
1174
1178
 
@@ -1205,13 +1209,17 @@ Navigation 3
1205
1209
 
1206
1210
  3
1207
1211
  1
1212
+ 2
1208
1213
  1
1209
1214
 
1210
- Asset Group2
1211
- Vehicle-2511Asset 1002
1212
- Vehicle-6810Asset 1001
1215
+ Asset Group5
1216
+ Vehicle-2702Asset 1002
1217
+ Vehicle-2861Asset 1006
1218
+ Vehicle-3712Asset 1001
1219
+ Vehicle-6558Asset 1000
1220
+ Vehicle-9897Asset 1003
1213
1221
 
1214
- Ungrouped3
1222
+ Ungrouped2
1215
1223
 
1216
1224
  200
1217
1225
 
@@ -1697,17 +1705,22 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
1697
1705
  <div class="display-flex justify-content-between align-items-start width-100pct">
1698
1706
  <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
1699
1707
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1700
- <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
1708
+ <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
1701
1709
  </span>
1702
1710
  <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
1703
1711
  </div>
1704
1712
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1705
- <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
1713
+ <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
1706
1714
  </span>
1707
1715
  <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
1708
1716
  </div>
1709
1717
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1710
- <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
1718
+ <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
1719
+ </span>
1720
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
1721
+ </div>
1722
+ <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1723
+ <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
1711
1724
  </span>
1712
1725
  <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
1713
1726
  </div>
@@ -1727,7 +1740,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
1727
1740
  <span class="TreeLabelNameText">
1728
1741
  <span class="TreeLabelNameTextHeadline">Asset Group</span>
1729
1742
  </span>
1730
- <span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
1743
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
1731
1744
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1732
1745
  </span>
1733
1746
  </span>
@@ -1742,11 +1755,26 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
1742
1755
  <span class="rioglyph rioglyph-van">
1743
1756
  </span>
1744
1757
  <span class="TreeLabelNameText">
1745
- <span class="TreeLabelNameTextHeadline">Vehicle-2511</span>
1758
+ <span class="TreeLabelNameTextHeadline">Vehicle-2702</span>
1746
1759
  <span class="TreeLabelNameTextSubline">Asset 1002</span>
1747
1760
  </span>
1748
1761
  </span>
1749
1762
  </div>
1763
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
1764
+ <label class="checkbox TreeCheckbox" tabindex="0">
1765
+ <input type="checkbox" class="TreeCheckbox">
1766
+ <span class="checkbox-text">
1767
+ </span>
1768
+ </label>
1769
+ <span class="TreeLabel TreeLabelName">
1770
+ <span class="rioglyph rioglyph-bus">
1771
+ </span>
1772
+ <span class="TreeLabelNameText">
1773
+ <span class="TreeLabelNameTextHeadline">Vehicle-2861</span>
1774
+ <span class="TreeLabelNameTextSubline">Asset 1006</span>
1775
+ </span>
1776
+ </span>
1777
+ </div>
1750
1778
  <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
1751
1779
  <label class="checkbox TreeCheckbox" tabindex="0">
1752
1780
  <input type="checkbox" class="TreeCheckbox">
@@ -1757,11 +1785,41 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
1757
1785
  <span class="rioglyph rioglyph-truck">
1758
1786
  </span>
1759
1787
  <span class="TreeLabelNameText">
1760
- <span class="TreeLabelNameTextHeadline">Vehicle-6810</span>
1788
+ <span class="TreeLabelNameTextHeadline">Vehicle-3712</span>
1761
1789
  <span class="TreeLabelNameTextSubline">Asset 1001</span>
1762
1790
  </span>
1763
1791
  </span>
1764
1792
  </div>
1793
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
1794
+ <label class="checkbox TreeCheckbox" tabindex="0">
1795
+ <input type="checkbox" class="TreeCheckbox">
1796
+ <span class="checkbox-text">
1797
+ </span>
1798
+ </label>
1799
+ <span class="TreeLabel TreeLabelName">
1800
+ <span class="rioglyph rioglyph-trailer">
1801
+ </span>
1802
+ <span class="TreeLabelNameText">
1803
+ <span class="TreeLabelNameTextHeadline">Vehicle-6558</span>
1804
+ <span class="TreeLabelNameTextSubline">Asset 1000</span>
1805
+ </span>
1806
+ </span>
1807
+ </div>
1808
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d973">
1809
+ <label class="checkbox TreeCheckbox" tabindex="0">
1810
+ <input type="checkbox" class="TreeCheckbox">
1811
+ <span class="checkbox-text">
1812
+ </span>
1813
+ </label>
1814
+ <span class="TreeLabel TreeLabelName">
1815
+ <span class="rioglyph rioglyph-trailer">
1816
+ </span>
1817
+ <span class="TreeLabelNameText">
1818
+ <span class="TreeLabelNameTextHeadline">Vehicle-9897</span>
1819
+ <span class="TreeLabelNameTextSubline">Asset 1003</span>
1820
+ </span>
1821
+ </span>
1822
+ </div>
1765
1823
  </div>
1766
1824
  <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="unassigned">
1767
1825
  <div class="TreeNode from-group" data-key="unassigned">
@@ -1774,7 +1832,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
1774
1832
  <span class="TreeLabelNameText">
1775
1833
  <span class="TreeLabelNameTextHeadline">Ungrouped</span>
1776
1834
  </span>
1777
- <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
1835
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
1778
1836
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1779
1837
  </span>
1780
1838
  </span>
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Navigation
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/appNavigationBar
6
- *Captured:* 2025-12-12T12:38:10.706Z
6
+ *Captured:* 2025-12-15T15:02:08.233Z
7
7
 
8
8
  ## AppNavigationBar
9
9
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Charts
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/areaCharts
6
- *Captured:* 2025-12-12T12:39:18.657Z
6
+ *Captured:* 2025-12-15T15:03:21.964Z
7
7
 
8
8
  ## AreaChart
9
9
 
@@ -41,7 +41,7 @@ export default () => {
41
41
  data={data}
42
42
  dataKey={(entry: CustomData) => entry.name}
43
43
  xAxisOptions={{ padding: { left: 30, right: 30 } }}
44
- areas={[<Area key='area' dataKey={entry => entry.value} />]}
44
+ areas={[<Area key='area' dataKey={(entry: CustomData) => entry.value} />]}
45
45
  />
46
46
  </div>
47
47
  </>
@@ -122,7 +122,7 @@ const data: CustomData[] = [
122
122
  <g class="recharts-layer">
123
123
  <defs>
124
124
  <clipPath id="animationClipPath-recharts-area-:r3:">
125
- <rect x="45" y="0" width="102.0384116723211" height="124">
125
+ <rect x="45" y="0" width="149.66633180451063" height="124">
126
126
  </rect>
127
127
  </clipPath>
128
128
  </defs>
@@ -562,7 +562,7 @@ const data: CustomData[] = [
562
562
  <g class="recharts-layer">
563
563
  <defs>
564
564
  <clipPath id="animationClipPath-recharts-area-:rg:">
565
- <rect x="75" y="0" width="665.9287901992905" height="224">
565
+ <rect x="75" y="0" width="682.1274264583936" height="224">
566
566
  </rect>
567
567
  </clipPath>
568
568
  </defs>
@@ -580,7 +580,7 @@ const data: CustomData[] = [
580
580
  <g class="recharts-layer">
581
581
  <defs>
582
582
  <clipPath id="animationClipPath-recharts-area-:rh:">
583
- <rect x="75" y="0" width="665.9287901992905" height="224">
583
+ <rect x="75" y="0" width="682.1274264583936" height="224">
584
584
  </rect>
585
585
  </clipPath>
586
586
  </defs>
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#components/aspectRatioPlaceholder
6
- *Captured:* 2025-12-12T12:38:49.608Z
6
+ *Captured:* 2025-12-15T15:02:48.281Z
7
7
 
8
8
  Use the AspectRatioPlaceholder for having responsive elements with an aspect ratio.
9
9