@rio-cloud/uikit-mcp 1.1.1 → 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 (191) hide show
  1. package/dist/doc-metadata.json +20 -20
  2. package/dist/docs/components/accentBar.md +1 -1
  3. package/dist/docs/components/activity.md +1 -1
  4. package/dist/docs/components/animatedNumber.md +1 -1
  5. package/dist/docs/components/animatedTextReveal.md +6 -6
  6. package/dist/docs/components/animations.md +31 -31
  7. package/dist/docs/components/appHeader.md +1 -1
  8. package/dist/docs/components/appLayout.md +66 -25
  9. package/dist/docs/components/appNavigationBar.md +1 -1
  10. package/dist/docs/components/areaCharts.md +5 -5
  11. package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
  12. package/dist/docs/components/assetTree.md +201 -203
  13. package/dist/docs/components/autosuggests.md +1 -1
  14. package/dist/docs/components/avatar.md +1 -1
  15. package/dist/docs/components/banner.md +2 -2
  16. package/dist/docs/components/barCharts.md +69 -69
  17. package/dist/docs/components/barList.md +11 -11
  18. package/dist/docs/components/basicMap.md +1 -1
  19. package/dist/docs/components/bottomSheet.md +1 -1
  20. package/dist/docs/components/button.md +1 -1
  21. package/dist/docs/components/buttonToolbar.md +1 -1
  22. package/dist/docs/components/calendarStripe.md +43 -67
  23. package/dist/docs/components/card.md +1 -1
  24. package/dist/docs/components/carousel.md +1 -1
  25. package/dist/docs/components/chartColors.md +1 -1
  26. package/dist/docs/components/chartsGettingStarted.md +1 -1
  27. package/dist/docs/components/chat.md +1 -4
  28. package/dist/docs/components/checkbox.md +1 -1
  29. package/dist/docs/components/clearableInput.md +1 -1
  30. package/dist/docs/components/collapse.md +2 -2
  31. package/dist/docs/components/composedCharts.md +48 -48
  32. package/dist/docs/components/contentLoader.md +101 -101
  33. package/dist/docs/components/dataTabs.md +9 -9
  34. package/dist/docs/components/datepickers.md +29 -29
  35. package/dist/docs/components/dialogs.md +1 -1
  36. package/dist/docs/components/divider.md +1 -1
  37. package/dist/docs/components/dropdowns.md +4398 -4356
  38. package/dist/docs/components/editableContent.md +1 -1
  39. package/dist/docs/components/expander.md +1 -1
  40. package/dist/docs/components/fade.md +1 -1
  41. package/dist/docs/components/fadeExpander.md +1 -1
  42. package/dist/docs/components/fadeUp.md +2 -2
  43. package/dist/docs/components/feedback.md +1 -1
  44. package/dist/docs/components/filePickers.md +1 -1
  45. package/dist/docs/components/formLabel.md +1 -1
  46. package/dist/docs/components/fullscreenMap.md +1 -1
  47. package/dist/docs/components/groupedItemList.md +1 -1
  48. package/dist/docs/components/iconList.md +4 -4
  49. package/dist/docs/components/imagePreloader.md +1 -1
  50. package/dist/docs/components/labeledElement.md +1 -1
  51. package/dist/docs/components/licensePlate.md +1 -1
  52. package/dist/docs/components/lineCharts.md +5 -5
  53. package/dist/docs/components/listMenu.md +1 -1
  54. package/dist/docs/components/loadMore.md +1 -1
  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 +1 -1
  64. package/dist/docs/components/mapPolygon.md +1 -1
  65. package/dist/docs/components/mapRoute.md +1 -1
  66. package/dist/docs/components/mapRouteGenerator.md +1 -1
  67. package/dist/docs/components/mapSettings.md +1 -1
  68. package/dist/docs/components/mapUtils.md +1 -1
  69. package/dist/docs/components/multiselects.md +1 -1
  70. package/dist/docs/components/noData.md +1 -1
  71. package/dist/docs/components/notifications.md +1 -1
  72. package/dist/docs/components/numbercontrol.md +1 -1
  73. package/dist/docs/components/onboarding.md +1 -1
  74. package/dist/docs/components/page.md +1 -1
  75. package/dist/docs/components/pager.md +1 -1
  76. package/dist/docs/components/pieCharts.md +69 -37
  77. package/dist/docs/components/popover.md +1 -1
  78. package/dist/docs/components/position.md +1 -1
  79. package/dist/docs/components/radialBarCharts.md +17 -17
  80. package/dist/docs/components/radiobutton.md +1 -1
  81. package/dist/docs/components/releaseNotes.md +1 -1
  82. package/dist/docs/components/resizer.md +1 -1
  83. package/dist/docs/components/responsiveColumnStripe.md +1 -1
  84. package/dist/docs/components/responsiveVideo.md +1 -1
  85. package/dist/docs/components/rioglyph.md +1 -1
  86. package/dist/docs/components/rules.md +1 -1
  87. package/dist/docs/components/saveableInput.md +19 -19
  88. package/dist/docs/components/selects.md +1 -1
  89. package/dist/docs/components/sidebar.md +1 -1
  90. package/dist/docs/components/sliders.md +1 -1
  91. package/dist/docs/components/smoothScrollbars.md +1 -1
  92. package/dist/docs/components/spinners.md +1 -1
  93. package/dist/docs/components/states.md +1 -1
  94. package/dist/docs/components/statsWidgets.md +1 -1
  95. package/dist/docs/components/statusBar.md +1 -1
  96. package/dist/docs/components/stepButton.md +1 -1
  97. package/dist/docs/components/steppedProgressBars.md +1 -1
  98. package/dist/docs/components/subNavigation.md +1 -1
  99. package/dist/docs/components/supportMarker.md +1 -1
  100. package/dist/docs/components/svgImage.md +1 -1
  101. package/dist/docs/components/switch.md +1 -1
  102. package/dist/docs/components/tables.md +1 -1
  103. package/dist/docs/components/tagManager.md +1 -1
  104. package/dist/docs/components/tags.md +1 -1
  105. package/dist/docs/components/teaser.md +1 -1
  106. package/dist/docs/components/timeline.md +1 -1
  107. package/dist/docs/components/timepicker.md +1 -1
  108. package/dist/docs/components/toggleButton.md +1 -1
  109. package/dist/docs/components/tooltip.md +1 -1
  110. package/dist/docs/components/virtualList.md +74 -74
  111. package/dist/docs/foundations.md +115 -115
  112. package/dist/docs/start/changelog.md +7 -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 +2 -2
  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 +203 -203
  134. package/dist/docs/templates/loading-progress.md +3 -3
  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 +16 -16
  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 +1 -1
  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 +1 -1
  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 +1 -1
  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 +1 -1
  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 +51 -51
  185. package/dist/docs/utilities/useTableSelection.md +87 -87
  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 +1 -1
  190. package/dist/version.json +2 -2
  191. 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-12T14:20:52.490Z
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-12T14:20:51.495Z
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-12T14:20:36.928Z
6
+ *Captured:* 2025-12-15T15:02:32.772Z
7
7
 
8
8
  ## AnimatedNumber
9
9
 
@@ -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-12T14:20:37.866Z
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.308534; transform: translateY(8.76697px);">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.308534; transform: translateY(8.76697px);">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(3.47997px);">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(3.47997px);">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(3.47997px);">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-12T14:20:37.664Z
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.863312;">
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.9233986243780237px 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 LTM5U13MCY
179
+ Add ItemItem B5WVP1454N
180
180
 
181
- Item 22I53GR1TM
181
+ Item B2NSH3LST8
182
182
 
183
- Item NFPHWUDEPD
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 LTM5U13MCY
189
+ Add ItemItem B5WVP1454N
190
190
 
191
- Item 22I53GR1TM
191
+ Item B2NSH3LST8
192
192
 
193
- Item NFPHWUDEPD
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 LTM5U13MCY</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 22I53GR1TM</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 NFPHWUDEPD</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 QJXBPX4FY1
300
+ Load ItemsItem 38PP430D6M
301
301
 
302
- Item L56N5K97ZOG
302
+ Item RPNOB6D411
303
303
 
304
- Item Y280KNO84
304
+ Item AQQ4M0ZVKXI
305
305
 
306
- Item JE4VGX02E
306
+ Item KTZKI295U1
307
307
 
308
- Item 6TU5EMVX6MF
308
+ Item 5DTMWYDMLFH
309
309
 
310
- Item 451IDXN9WP
310
+ Item Z5EJ4VMHJ1H
311
311
 
312
312
  #### Summary
313
313
 
314
- Load ItemsItem QJXBPX4FY1
314
+ Load ItemsItem 38PP430D6M
315
315
 
316
- Item L56N5K97ZOG
316
+ Item RPNOB6D411
317
317
 
318
- Item Y280KNO84
318
+ Item AQQ4M0ZVKXI
319
319
 
320
- Item JE4VGX02E
320
+ Item KTZKI295U1
321
321
 
322
- Item 6TU5EMVX6MF
322
+ Item 5DTMWYDMLFH
323
323
 
324
- Item 451IDXN9WP
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 QJXBPX4FY1</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 L56N5K97ZOG</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 Y280KNO84</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 JE4VGX02E</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 6TU5EMVX6MF</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 451IDXN9WP</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-12T14:20:08.636Z
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-12T14:20:11.441Z
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
 
@@ -1160,16 +1160,19 @@ Navigation 3
1160
1160
 
1161
1161
  4
1162
1162
 
1163
- 5
1163
+ 3
1164
+ 1
1164
1165
  2
1165
1166
  1
1166
1167
 
1167
- Asset Group3
1168
- Vehicle-2115Asset 1005
1169
- Vehicle-2747Asset 1001
1170
- Vehicle-5156Asset 1000
1168
+ Asset Group5
1169
+ Vehicle-2702Asset 1002
1170
+ Vehicle-2861Asset 1006
1171
+ Vehicle-3712Asset 1001
1172
+ Vehicle-6558Asset 1000
1173
+ Vehicle-9897Asset 1003
1171
1174
 
1172
- Ungrouped5
1175
+ Ungrouped2
1173
1176
 
1174
1177
  200
1175
1178
 
@@ -1204,16 +1207,19 @@ Navigation 3
1204
1207
 
1205
1208
  4
1206
1209
 
1207
- 5
1210
+ 3
1211
+ 1
1208
1212
  2
1209
1213
  1
1210
1214
 
1211
- Asset Group3
1212
- Vehicle-2115Asset 1005
1213
- Vehicle-2747Asset 1001
1214
- Vehicle-5156Asset 1000
1215
+ Asset Group5
1216
+ Vehicle-2702Asset 1002
1217
+ Vehicle-2861Asset 1006
1218
+ Vehicle-3712Asset 1001
1219
+ Vehicle-6558Asset 1000
1220
+ Vehicle-9897Asset 1003
1215
1221
 
1216
- Ungrouped5
1222
+ Ungrouped2
1217
1223
 
1218
1224
  200
1219
1225
 
@@ -1701,16 +1707,21 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
1701
1707
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1702
1708
  <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
1703
1709
  </span>
1704
- <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
1710
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
1705
1711
  </div>
1706
1712
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1707
- <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
1713
+ <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
1708
1714
  </span>
1709
- <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
1715
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
1710
1716
  </div>
1711
1717
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1712
1718
  <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
1713
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">
1724
+ </span>
1714
1725
  <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
1715
1726
  </div>
1716
1727
  </div>
@@ -1729,27 +1740,27 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
1729
1740
  <span class="TreeLabelNameText">
1730
1741
  <span class="TreeLabelNameTextHeadline">Asset Group</span>
1731
1742
  </span>
1732
- <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
1743
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
1733
1744
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1734
1745
  </span>
1735
1746
  </span>
1736
1747
  </div>
1737
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d975">
1748
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
1738
1749
  <label class="checkbox TreeCheckbox" tabindex="0">
1739
1750
  <input type="checkbox" class="TreeCheckbox">
1740
1751
  <span class="checkbox-text">
1741
1752
  </span>
1742
1753
  </label>
1743
1754
  <span class="TreeLabel TreeLabelName">
1744
- <span class="rioglyph rioglyph-trailer">
1755
+ <span class="rioglyph rioglyph-van">
1745
1756
  </span>
1746
1757
  <span class="TreeLabelNameText">
1747
- <span class="TreeLabelNameTextHeadline">Vehicle-2115</span>
1748
- <span class="TreeLabelNameTextSubline">Asset 1005</span>
1758
+ <span class="TreeLabelNameTextHeadline">Vehicle-2702</span>
1759
+ <span class="TreeLabelNameTextSubline">Asset 1002</span>
1749
1760
  </span>
1750
1761
  </span>
1751
1762
  </div>
1752
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
1763
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
1753
1764
  <label class="checkbox TreeCheckbox" tabindex="0">
1754
1765
  <input type="checkbox" class="TreeCheckbox">
1755
1766
  <span class="checkbox-text">
@@ -1759,7 +1770,22 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
1759
1770
  <span class="rioglyph rioglyph-bus">
1760
1771
  </span>
1761
1772
  <span class="TreeLabelNameText">
1762
- <span class="TreeLabelNameTextHeadline">Vehicle-2747</span>
1773
+ <span class="TreeLabelNameTextHeadline">Vehicle-2861</span>
1774
+ <span class="TreeLabelNameTextSubline">Asset 1006</span>
1775
+ </span>
1776
+ </span>
1777
+ </div>
1778
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
1779
+ <label class="checkbox TreeCheckbox" tabindex="0">
1780
+ <input type="checkbox" class="TreeCheckbox">
1781
+ <span class="checkbox-text">
1782
+ </span>
1783
+ </label>
1784
+ <span class="TreeLabel TreeLabelName">
1785
+ <span class="rioglyph rioglyph-truck">
1786
+ </span>
1787
+ <span class="TreeLabelNameText">
1788
+ <span class="TreeLabelNameTextHeadline">Vehicle-3712</span>
1763
1789
  <span class="TreeLabelNameTextSubline">Asset 1001</span>
1764
1790
  </span>
1765
1791
  </span>
@@ -1774,11 +1800,26 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
1774
1800
  <span class="rioglyph rioglyph-trailer">
1775
1801
  </span>
1776
1802
  <span class="TreeLabelNameText">
1777
- <span class="TreeLabelNameTextHeadline">Vehicle-5156</span>
1803
+ <span class="TreeLabelNameTextHeadline">Vehicle-6558</span>
1778
1804
  <span class="TreeLabelNameTextSubline">Asset 1000</span>
1779
1805
  </span>
1780
1806
  </span>
1781
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>
1782
1823
  </div>
1783
1824
  <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="unassigned">
1784
1825
  <div class="TreeNode from-group" data-key="unassigned">
@@ -1791,7 +1832,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
1791
1832
  <span class="TreeLabelNameText">
1792
1833
  <span class="TreeLabelNameTextHeadline">Ungrouped</span>
1793
1834
  </span>
1794
- <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
1835
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
1795
1836
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1796
1837
  </span>
1797
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-12T14:20:13.346Z
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-12T14:21:23.821Z
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="121.22393453963141" 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="672.9312033270365" 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="672.9312033270365" 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-12T14:20:51.762Z
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