@rio-cloud/uikit-mcp 1.1.6 → 1.1.8

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 (201) hide show
  1. package/README.md +13 -17
  2. package/dist/doc-metadata.json +125 -295
  3. package/dist/docs/components/accentBar.md +16 -69
  4. package/dist/docs/components/activity.md +7 -44
  5. package/dist/docs/components/animatedNumber.md +3 -11
  6. package/dist/docs/components/animatedTextReveal.md +3 -31
  7. package/dist/docs/components/animations.md +21 -54
  8. package/dist/docs/components/appHeader.md +11 -30
  9. package/dist/docs/components/appLayout.md +36 -172
  10. package/dist/docs/components/appNavigationBar.md +1 -24
  11. package/dist/docs/components/areaCharts.md +7 -22
  12. package/dist/docs/components/aspectRatioPlaceholder.md +1 -9
  13. package/dist/docs/components/assetTree.md +141 -374
  14. package/dist/docs/components/autosuggests.md +3 -102
  15. package/dist/docs/components/avatar.md +1 -16
  16. package/dist/docs/components/banner.md +4 -37
  17. package/dist/docs/components/barCharts.md +20 -75
  18. package/dist/docs/components/barList.md +9 -77
  19. package/dist/docs/components/basicMap.md +1 -67
  20. package/dist/docs/components/bottomSheet.md +2 -28
  21. package/dist/docs/components/button.md +12 -65
  22. package/dist/docs/components/buttonToolbar.md +5 -19
  23. package/dist/docs/components/calendarStripe.md +48 -106
  24. package/dist/docs/components/card.md +1 -9
  25. package/dist/docs/components/carousel.md +1 -14
  26. package/dist/docs/components/chartColors.md +1 -156
  27. package/dist/docs/components/chartsGettingStarted.md +1 -1
  28. package/dist/docs/components/chat.md +2 -81
  29. package/dist/docs/components/checkbox.md +11 -72
  30. package/dist/docs/components/circularProgress.md +8 -49
  31. package/dist/docs/components/clearableInput.md +3 -62
  32. package/dist/docs/components/collapse.md +2 -15
  33. package/dist/docs/components/composedCharts.md +16 -26
  34. package/dist/docs/components/contentLoader.md +7 -25
  35. package/dist/docs/components/dataTabs.md +16 -104
  36. package/dist/docs/components/datepickers.md +710 -962
  37. package/dist/docs/components/dialogs.md +5 -67
  38. package/dist/docs/components/divider.md +1 -33
  39. package/dist/docs/components/dropdowns.md +3412 -5600
  40. package/dist/docs/components/editableContent.md +4 -82
  41. package/dist/docs/components/expander.md +15 -88
  42. package/dist/docs/components/fade.md +4 -61
  43. package/dist/docs/components/fadeExpander.md +1 -7
  44. package/dist/docs/components/fadeUp.md +2 -76
  45. package/dist/docs/components/feedback.md +9 -68
  46. package/dist/docs/components/filePickers.md +4 -18
  47. package/dist/docs/components/formLabel.md +7 -27
  48. package/dist/docs/components/groupedItemList.md +2 -158
  49. package/dist/docs/components/iconList.md +8 -65
  50. package/dist/docs/components/imagePreloader.md +1 -9
  51. package/dist/docs/components/labeledElement.md +3 -18
  52. package/dist/docs/components/licensePlate.md +1 -43
  53. package/dist/docs/components/lineCharts.md +7 -38
  54. package/dist/docs/components/listMenu.md +2 -34
  55. package/dist/docs/components/loadMore.md +5 -24
  56. package/dist/docs/components/mainNavigation.md +1 -9
  57. package/dist/docs/components/mapCircle.md +1 -23
  58. package/dist/docs/components/mapCluster.md +2 -54
  59. package/dist/docs/components/mapContext.md +1 -23
  60. package/dist/docs/components/mapDraggableMarker.md +2 -28
  61. package/dist/docs/components/mapGettingStarted.md +2 -2
  62. package/dist/docs/components/mapInfoBubble.md +1 -27
  63. package/dist/docs/components/mapLayerGroup.md +1 -23
  64. package/dist/docs/components/mapMarker.md +1 -99
  65. package/dist/docs/components/mapPolygon.md +2 -116
  66. package/dist/docs/components/mapRoute.md +6 -1465
  67. package/dist/docs/components/mapRouteGenerator.md +1 -1
  68. package/dist/docs/components/mapSettings.md +11 -128
  69. package/dist/docs/components/mapUtils.md +10 -113
  70. package/dist/docs/components/multiselects.md +14 -163
  71. package/dist/docs/components/noData.md +8 -22
  72. package/dist/docs/components/notifications.md +3 -19
  73. package/dist/docs/components/numbercontrol.md +3 -47
  74. package/dist/docs/components/onboarding.md +3 -15
  75. package/dist/docs/components/page.md +1 -33
  76. package/dist/docs/components/pager.md +1 -17
  77. package/dist/docs/components/pieCharts.md +40 -71
  78. package/dist/docs/components/popover.md +1 -12
  79. package/dist/docs/components/position.md +2 -6
  80. package/dist/docs/components/radialBarCharts.md +32 -116
  81. package/dist/docs/components/radioCardGroup.md +6 -48
  82. package/dist/docs/components/radiobutton.md +6 -75
  83. package/dist/docs/components/releaseNotes.md +3 -21
  84. package/dist/docs/components/resizer.md +1 -7
  85. package/dist/docs/components/responsiveColumnStripe.md +9 -49
  86. package/dist/docs/components/responsiveVideo.md +1 -7
  87. package/dist/docs/components/rioglyph.md +1 -17
  88. package/dist/docs/components/rules.md +7 -70
  89. package/dist/docs/components/saveableInput.md +267 -401
  90. package/dist/docs/components/selects.md +27 -1164
  91. package/dist/docs/components/sidebar.md +6 -17
  92. package/dist/docs/components/sliders.md +1 -27
  93. package/dist/docs/components/smoothScrollbars.md +1 -73
  94. package/dist/docs/components/spinners.md +6 -51
  95. package/dist/docs/components/states.md +6 -92
  96. package/dist/docs/components/statsWidgets.md +1 -76
  97. package/dist/docs/components/statusBar.md +1 -57
  98. package/dist/docs/components/stepButton.md +2 -7
  99. package/dist/docs/components/steppedProgressBars.md +5 -62
  100. package/dist/docs/components/subNavigation.md +1 -31
  101. package/dist/docs/components/supportMarker.md +2 -14
  102. package/dist/docs/components/svgImage.md +1 -5
  103. package/dist/docs/components/switch.md +2 -33
  104. package/dist/docs/components/tables.md +1 -1
  105. package/dist/docs/components/tagManager.md +1 -41
  106. package/dist/docs/components/tags.md +1 -138
  107. package/dist/docs/components/teaser.md +2 -122
  108. package/dist/docs/components/textTruncateMiddle.md +2 -9
  109. package/dist/docs/components/timeline.md +1 -99
  110. package/dist/docs/components/timepicker.md +4 -79
  111. package/dist/docs/components/toggleButton.md +2 -15
  112. package/dist/docs/components/tooltip.md +9 -30
  113. package/dist/docs/components/tracker.md +2 -19
  114. package/dist/docs/components/virtualList.md +57 -123
  115. package/dist/docs/foundations.md +753 -4073
  116. package/dist/docs/start/changelog.md +793 -1
  117. package/dist/docs/start/goodtoknow.md +1 -1
  118. package/dist/docs/start/guidelines/color-combinations.md +149 -483
  119. package/dist/docs/start/guidelines/custom-css.md +1 -1
  120. package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
  121. package/dist/docs/start/guidelines/formatting.md +1 -1
  122. package/dist/docs/start/guidelines/iframe.md +4 -16
  123. package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
  124. package/dist/docs/start/guidelines/print-css.md +1 -1
  125. package/dist/docs/start/guidelines/spinner.md +13 -67
  126. package/dist/docs/start/guidelines/state-in-url.md +1 -1
  127. package/dist/docs/start/guidelines/supported-browsers.md +1 -1
  128. package/dist/docs/start/guidelines/writing.md +1 -1
  129. package/dist/docs/start/howto.md +11 -11
  130. package/dist/docs/start/intro.md +1 -1
  131. package/dist/docs/start/responsiveness.md +1 -1
  132. package/dist/docs/utilities/classNames.md +3 -18
  133. package/dist/docs/utilities/deviceUtils.md +7 -13
  134. package/dist/docs/utilities/featureToggles.md +1 -1
  135. package/dist/docs/utilities/fuelTypeUtils.md +2 -12
  136. package/dist/docs/utilities/routeUtils.md +25 -343
  137. package/dist/docs/utilities/useAfterMount.md +1 -6
  138. package/dist/docs/utilities/useAutoAnimate.md +2 -15
  139. package/dist/docs/utilities/useAverage.md +1 -6
  140. package/dist/docs/utilities/useClickOutside.md +1 -5
  141. package/dist/docs/utilities/useClipboard.md +2 -6
  142. package/dist/docs/utilities/useCookies.md +2 -10
  143. package/dist/docs/utilities/useCount.md +7 -16
  144. package/dist/docs/utilities/useDarkMode.md +2 -6
  145. package/dist/docs/utilities/useDebugInfo.md +6 -20
  146. package/dist/docs/utilities/useEffectOnce.md +1 -6
  147. package/dist/docs/utilities/useElapsedTime.md +2 -6
  148. package/dist/docs/utilities/useElementSize.md +1 -7
  149. package/dist/docs/utilities/useEsc.md +1 -5
  150. package/dist/docs/utilities/useEvent.md +1 -5
  151. package/dist/docs/utilities/useFocusTrap.md +1 -5
  152. package/dist/docs/utilities/useFullscreen.md +2 -15
  153. package/dist/docs/utilities/useHover.md +1 -5
  154. package/dist/docs/utilities/useIncomingPostMessages.md +2 -18
  155. package/dist/docs/utilities/useInterval.md +2 -8
  156. package/dist/docs/utilities/useIsFocusWithin.md +1 -10
  157. package/dist/docs/utilities/useKey.md +1 -15
  158. package/dist/docs/utilities/useLocalStorage.md +2 -11
  159. package/dist/docs/utilities/useLocationSuggestions.md +1 -5
  160. package/dist/docs/utilities/useMax.md +1 -5
  161. package/dist/docs/utilities/useMin.md +1 -5
  162. package/dist/docs/utilities/useMutationObserver.md +3 -11
  163. package/dist/docs/utilities/useOnScreen.md +1 -8
  164. package/dist/docs/utilities/useOnlineStatus.md +1 -5
  165. package/dist/docs/utilities/usePostMessage.md +3 -9
  166. package/dist/docs/utilities/usePostMessageSender.md +3 -13
  167. package/dist/docs/utilities/usePrevious.md +1 -5
  168. package/dist/docs/utilities/useResizeObserver.md +3 -11
  169. package/dist/docs/utilities/useRioCookieConsent.md +1 -5
  170. package/dist/docs/utilities/useScrollPosition.md +3 -59
  171. package/dist/docs/utilities/useSearch.md +2 -16
  172. package/dist/docs/utilities/useSearchHighlight.md +13 -78
  173. package/dist/docs/utilities/useSorting.md +18 -43
  174. package/dist/docs/utilities/useStateWithValidation.md +1 -5
  175. package/dist/docs/utilities/useSum.md +1 -9
  176. package/dist/docs/utilities/useTableExport.md +42 -59
  177. package/dist/docs/utilities/useTableSelection.md +75 -120
  178. package/dist/docs/utilities/useTimeout.md +2 -6
  179. package/dist/docs/utilities/useToggle.md +4 -14
  180. package/dist/docs/utilities/useUrlState.md +2 -27
  181. package/dist/docs/utilities/useWindowResize.md +1 -5
  182. package/dist/index.mjs +46 -10
  183. package/dist/version.json +2 -2
  184. package/package.json +2 -2
  185. package/dist/docs/templates/common-table.md +0 -1112
  186. package/dist/docs/templates/detail-views.md +0 -942
  187. package/dist/docs/templates/expandable-details.md +0 -228
  188. package/dist/docs/templates/feature-cards.md +0 -549
  189. package/dist/docs/templates/form-summary.md +0 -199
  190. package/dist/docs/templates/form-toggle.md +0 -367
  191. package/dist/docs/templates/list-blocks.md +0 -1021
  192. package/dist/docs/templates/loading-progress.md +0 -109
  193. package/dist/docs/templates/options-panel.md +0 -152
  194. package/dist/docs/templates/panel-variants.md +0 -164
  195. package/dist/docs/templates/progress-cards.md +0 -607
  196. package/dist/docs/templates/progress-success.md +0 -142
  197. package/dist/docs/templates/settings-form.md +0 -434
  198. package/dist/docs/templates/stats-blocks.md +0 -1381
  199. package/dist/docs/templates/table-panel.md +0 -184
  200. package/dist/docs/templates/table-row-animation.md +0 -317
  201. package/dist/docs/templates/usage-cards.md +0 -227
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Application
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/bottomSheet
6
- *Captured:* 2026-02-23T13:41:33.424Z
6
+ *Captured:* 2026-03-06T10:40:01.800Z
7
7
 
8
8
  The TimedBottomSheet is a wrapper component for the BottomSheet that allows to control it's visibility via timers and to use the localStorage to save user interaction for handling it's visibility.
9
9
 
@@ -14,11 +14,6 @@ The TimedBottomSheet is a wrapper component for the BottomSheet that allows to c
14
14
  This demonstrates a small bottom sheet use case on desktop. This can be used for providing additional information, upselling, feedback etc.
15
15
  Trigger small BottomSheet
16
16
 
17
- #### Summary
18
-
19
- This demonstrates a small bottom sheet use case on desktop. This can be used for providing additional information, upselling, feedback etc.
20
- Trigger small BottomSheet
21
-
22
17
  #### React (tsx)
23
18
 
24
19
  ```tsx
@@ -99,13 +94,7 @@ const content = (
99
94
  ### Example: Example 2
100
95
 
101
96
  This demonstrates a bottom sheet use case on mobile. This can be used for providing additional information on mobile instead of using a sidebar, onboarding, alternative for dialogs etc.
102
- NoteThis example does not make sense on desktop with wider screens. Handle responsive modes and use a dialog or sidebar on desktop instead.
103
- Trigger mobile BottomSheet
104
-
105
- #### Summary
106
-
107
- This demonstrates a bottom sheet use case on mobile. This can be used for providing additional information on mobile instead of using a sidebar, onboarding, alternative for dialogs etc.
108
- NoteThis example does not make sense on desktop with wider screens. Handle responsive modes and use a dialog or sidebar on desktop instead.
97
+ Note This example does not make sense on desktop with wider screens. Handle responsive modes and use a dialog or sidebar on desktop instead.
109
98
  Trigger mobile BottomSheet
110
99
 
111
100
  #### React (tsx)
@@ -244,11 +233,6 @@ export default () => {
244
233
  This demonstrates a bottom sheet use case on mobile. It demonstrates a bottom sheet for smartphones to perform an action.
245
234
  Trigger mobile BottomSheet
246
235
 
247
- #### Summary
248
-
249
- This demonstrates a bottom sheet use case on mobile. It demonstrates a bottom sheet for smartphones to perform an action.
250
- Trigger mobile BottomSheet
251
-
252
236
  #### React (tsx)
253
237
 
254
238
  ```tsx
@@ -361,11 +345,6 @@ export default () => {
361
345
  This demonstrates a bottom sheet use case on mobile. It demonstrates a bottom sheet for an example of how you could do onboarding on smartphones.
362
346
  Trigger mobile onboarding BottomSheet
363
347
 
364
- #### Summary
365
-
366
- This demonstrates a bottom sheet use case on mobile. It demonstrates a bottom sheet for an example of how you could do onboarding on smartphones.
367
- Trigger mobile onboarding BottomSheet
368
-
369
348
  #### React (tsx)
370
349
 
371
350
  ```tsx
@@ -467,11 +446,6 @@ export default () => {
467
446
  Showcase of a timed bottom sheet used for requesting feedback from the user after a major feature was released or updated.
468
447
  Trigger timed bottom sheet
469
448
 
470
- #### Summary
471
-
472
- Showcase of a timed bottom sheet used for requesting feedback from the user after a major feature was released or updated.
473
- Trigger timed bottom sheet
474
-
475
449
  #### React (tsx)
476
450
 
477
451
  ```tsx
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Interaction
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/button
6
- *Captured:* 2026-02-23T13:41:39.366Z
6
+ *Captured:* 2026-03-06T10:40:07.427Z
7
7
 
8
8
  The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons
9
9
 
@@ -12,21 +12,11 @@ The button component is the React equivalent to the normal HTML button with some
12
12
  ### Example: Standard buttons
13
13
 
14
14
  Standard buttons
15
- DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
15
+ Default Primary Secondary Success Info Warning Danger Muted filled Muted
16
16
  Disabled buttons
17
- DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
17
+ Default Primary Secondary Success Info Warning Danger Muted filled Muted
18
18
  Button sizes
19
- Extra SmallSmallMediumLarge
20
- Icon only buttons
21
-
22
- #### Summary
23
-
24
- Standard buttons
25
- DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
26
- Disabled buttons
27
- DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
28
- Button sizes
29
- Extra SmallSmallMediumLarge
19
+ Extra Small Small Medium Large
30
20
  Icon only buttons
31
21
 
32
22
  #### React (tsx)
@@ -305,20 +295,11 @@ export default () => (
305
295
  ### Example: Buttons with link styles
306
296
 
307
297
  Buttons with link styles
308
- PrimarySuccessInfoWarningDanger
309
- Button with link styles - inline
310
-
311
- This is an example for an Inline link button.
312
- Note Link styled buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE.
313
-
314
- #### Summary
315
-
316
- Buttons with link styles
317
- PrimarySuccessInfoWarningDanger
298
+ Primary Success Info Warning Danger
318
299
  Button with link styles - inline
319
300
 
320
301
  This is an example for an Inline link button.
321
- Note Link styled buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE.
302
+ Note Link styled buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE .
322
303
 
323
304
  #### React (tsx)
324
305
 
@@ -456,21 +437,7 @@ export default () => (
456
437
  Button group
457
438
 
458
439
  Button with tooltips
459
- Button with TooltipDisabled Button with Tooltip
460
- Block button
461
- Block button
462
- Multiline button
463
- This is a multiline button with a lot of Text
464
- Toggle button
465
- Toggle me
466
- Add something / take picture button example
467
-
468
- #### Summary
469
-
470
- Button group
471
-
472
- Button with tooltips
473
- Button with TooltipDisabled Button with Tooltip
440
+ Button with Tooltip Disabled Button with Tooltip
474
441
  Block button
475
442
  Block button
476
443
  Multiline button
@@ -650,12 +617,7 @@ export default () => (
650
617
  ### Example: Outlined buttons (transparent)
651
618
 
652
619
  Outlined buttons (transparent)
653
- DefaultPrimarySuccessInfoWarningDangerMuted filledMuted
654
-
655
- #### Summary
656
-
657
- Outlined buttons (transparent)
658
- DefaultPrimarySuccessInfoWarningDangerMuted filledMuted
620
+ Default Primary Success Info Warning Danger Muted filled Muted
659
621
 
660
622
  #### React (tsx)
661
623
 
@@ -785,21 +747,11 @@ export default () => (
785
747
  ### Example: Buttons as anchor element
786
748
 
787
749
  Buttons as anchor element
788
- DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
750
+ Default Primary Secondary Success Info Warning Danger Muted filled Muted
789
751
  Buttons as anchor element - disabled
790
- DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
752
+ Default Primary Secondary Success Info Warning Danger Muted filled Muted
791
753
  Buttons as anchor element - various sizes
792
- Extra SmallSmallMediumLarge
793
- Buttons as anchor element - icon only
794
-
795
- #### Summary
796
-
797
- Buttons as anchor element
798
- DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
799
- Buttons as anchor element - disabled
800
- DefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted
801
- Buttons as anchor element - various sizes
802
- Extra SmallSmallMediumLarge
754
+ Extra Small Small Medium Large
803
755
  Buttons as anchor element - icon only
804
756
 
805
757
  #### React (tsx)
@@ -1082,12 +1034,7 @@ export default () => (
1082
1034
  ### Example: Action buttons
1083
1035
 
1084
1036
  Action buttons
1085
- Click me!Click me!Click me!Click me!Click me!Click me!
1086
-
1087
- #### Summary
1088
-
1089
- Action buttons
1090
- Click me!Click me!Click me!Click me!Click me!Click me!
1037
+ Click me! Click me! Click me! Click me! Click me! Click me!
1091
1038
 
1092
1039
  #### React (tsx)
1093
1040
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Interaction
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/buttonToolbar
6
- *Captured:* 2026-02-23T13:41:35.820Z
6
+ *Captured:* 2026-03-06T10:40:03.868Z
7
7
 
8
8
  The ButtonToolbar is a utility component designed to simplify usage and alignment. Its purpose is to ensure consistent spacing.
9
9
 
@@ -12,30 +12,16 @@ The ButtonToolbar is a utility component designed to simplify usage and alignmen
12
12
  ### Example: ButtonToolbar
13
13
 
14
14
  ButtonToolbar
15
- ButtonButton
15
+ Button Button
16
16
 
17
17
  ButtonToolbar centered
18
- CancelSave changes
18
+ Cancel Save changes
19
19
 
20
20
  ButtonToolbar right aligned
21
- CancelSave changes
21
+ Cancel Save changes
22
22
 
23
23
  ButtonToolbar space between
24
- PreviousNext
25
-
26
- #### Summary
27
-
28
- ButtonToolbar
29
- ButtonButton
30
-
31
- ButtonToolbar centered
32
- CancelSave changes
33
-
34
- ButtonToolbar right aligned
35
- CancelSave changes
36
-
37
- ButtonToolbar space between
38
- PreviousNext
24
+ Previous Next
39
25
 
40
26
  #### React (tsx)
41
27
 
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Misc
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/calendarStripe
6
- *Captured:* 2026-02-23T13:42:23.211Z
6
+ *Captured:* 2026-03-06T10:40:56.891Z
7
7
 
8
8
  A headless component where you provide a function that renders the UI for every day to be displayed.
9
9
 
@@ -11,31 +11,17 @@ A headless component where you provide a function that renders the UI for every
11
11
 
12
12
  ### Example: Example 1
13
13
 
14
- Tuesday
15
- 24 February 2026
16
-
17
- Wednesday
18
- 25 February 2026
14
+ Saturday
15
+ 7 March 2026
19
16
 
20
- Thursday
21
- 26 February 2026
17
+ Sunday
18
+ 8 March 2026
22
19
 
23
- Friday
24
- 27 February 2026
25
-
26
- #### Summary
20
+ Monday
21
+ 9 March 2026
27
22
 
28
23
  Tuesday
29
- 24 February 2026
30
-
31
- Wednesday
32
- 25 February 2026
33
-
34
- Thursday
35
- 26 February 2026
36
-
37
- Friday
38
- 27 February 2026
24
+ 10 March 2026
39
25
 
40
26
  #### React (tsx)
41
27
 
@@ -127,11 +113,11 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
127
113
  <div style="opacity: 1; transform: none;">
128
114
  <div class="display-flex space-x--1 user-select-none">
129
115
  <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
130
- <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
116
+ <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest">
131
117
  <div class="display-flex align-items-center justify-content-between">
132
118
  <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
133
- <div>Tuesday</div>
134
- <div class="text-size-16 text-medium">24 February 2026</div>
119
+ <div>Saturday</div>
120
+ <div class="text-size-16 text-medium">7 March 2026</div>
135
121
  </div>
136
122
  <div class="text-color-primary text-size-16 width-20">
137
123
  </div>
@@ -139,11 +125,11 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
139
125
  </div>
140
126
  </div>
141
127
  <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
142
- <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
128
+ <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest">
143
129
  <div class="display-flex align-items-center justify-content-between">
144
130
  <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
145
- <div>Wednesday</div>
146
- <div class="text-size-16 text-medium">25 February 2026</div>
131
+ <div>Sunday</div>
132
+ <div class="text-size-16 text-medium">8 March 2026</div>
147
133
  </div>
148
134
  <div class="text-color-primary text-size-16 width-20">
149
135
  </div>
@@ -154,8 +140,8 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
154
140
  <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
155
141
  <div class="display-flex align-items-center justify-content-between">
156
142
  <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
157
- <div>Thursday</div>
158
- <div class="text-size-16 text-medium">26 February 2026</div>
143
+ <div>Monday</div>
144
+ <div class="text-size-16 text-medium">9 March 2026</div>
159
145
  </div>
160
146
  <div class="text-color-primary text-size-16 width-20">
161
147
  </div>
@@ -166,8 +152,8 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
166
152
  <div class="padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer ">
167
153
  <div class="display-flex align-items-center justify-content-between">
168
154
  <div class="display-flex flex-column gap-5 text-size-14 line-height-14">
169
- <div>Friday</div>
170
- <div class="text-size-16 text-medium">27 February 2026</div>
155
+ <div>Tuesday</div>
156
+ <div class="text-size-16 text-medium">10 March 2026</div>
171
157
  </div>
172
158
  <div class="text-color-primary text-size-16 width-20">
173
159
  </div>
@@ -206,83 +192,39 @@ const DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {
206
192
 
207
193
  ### Example: Example 2
208
194
 
209
- Feb
210
- 24
211
- 2026
212
-
213
- Feb
214
- 25
215
- 2026
216
-
217
- Feb
218
- 26
219
- 2026
220
-
221
- Feb
222
- 27
223
- 2026
224
-
225
- Feb
226
- 28
227
- 2026
228
-
229
195
  Mar
230
- 1
196
+ 7
231
197
  2026
232
198
 
233
199
  Mar
234
- 2
200
+ 8
235
201
  2026
236
202
 
237
203
  Mar
238
- 3
204
+ 9
239
205
  2026
240
206
 
241
207
  Mar
242
- 4
243
- 2026
244
-
245
- Set to JanuaryToggle Weekends
246
-
247
- #### Summary
248
-
249
- Feb
250
- 24
251
- 2026
252
-
253
- Feb
254
- 25
255
- 2026
256
-
257
- Feb
258
- 26
259
- 2026
260
-
261
- Feb
262
- 27
263
- 2026
264
-
265
- Feb
266
- 28
208
+ 10
267
209
  2026
268
210
 
269
211
  Mar
270
- 1
212
+ 11
271
213
  2026
272
214
 
273
215
  Mar
274
- 2
216
+ 12
275
217
  2026
276
218
 
277
219
  Mar
278
- 3
220
+ 13
279
221
  2026
280
222
 
281
223
  Mar
282
- 4
224
+ 14
283
225
  2026
284
226
 
285
- Set to JanuaryToggle Weekends
227
+ Set to January Toggle Weekends
286
228
 
287
229
  #### React (tsx)
288
230
 
@@ -403,19 +345,19 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
403
345
  <div style="opacity: 1; transform: none;">
404
346
  <div class="display-flex space-x--1 user-select-none">
405
347
  <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
406
- <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
348
+ <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
407
349
  <div class="display-flex flex-column gap-3 text-center">
408
- <div class="text-size-12 line-height-12">Feb</div>
409
- <div class="text-size-h3 line-height-h3">24</div>
350
+ <div class="text-size-12 line-height-12">Mar</div>
351
+ <div class="text-size-h3 line-height-h3">7</div>
410
352
  <div class="text-size-12 line-height-12">2026</div>
411
353
  </div>
412
354
  </div>
413
355
  </div>
414
356
  <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
415
- <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
357
+ <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
416
358
  <div class="display-flex flex-column gap-3 text-center">
417
- <div class="text-size-12 line-height-12">Feb</div>
418
- <div class="text-size-h3 line-height-h3">25</div>
359
+ <div class="text-size-12 line-height-12">Mar</div>
360
+ <div class="text-size-h3 line-height-h3">8</div>
419
361
  <div class="text-size-12 line-height-12">2026</div>
420
362
  </div>
421
363
  </div>
@@ -423,8 +365,8 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
423
365
  <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
424
366
  <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
425
367
  <div class="display-flex flex-column gap-3 text-center">
426
- <div class="text-size-12 line-height-12">Feb</div>
427
- <div class="text-size-h3 line-height-h3">26</div>
368
+ <div class="text-size-12 line-height-12">Mar</div>
369
+ <div class="text-size-h3 line-height-h3">9</div>
428
370
  <div class="text-size-12 line-height-12">2026</div>
429
371
  </div>
430
372
  </div>
@@ -432,26 +374,26 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
432
374
  <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
433
375
  <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
434
376
  <div class="display-flex flex-column gap-3 text-center">
435
- <div class="text-size-12 line-height-12">Feb</div>
436
- <div class="text-size-h3 line-height-h3">27</div>
377
+ <div class="text-size-12 line-height-12">Mar</div>
378
+ <div class="text-size-h3 line-height-h3">10</div>
437
379
  <div class="text-size-12 line-height-12">2026</div>
438
380
  </div>
439
381
  </div>
440
382
  </div>
441
383
  <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
442
- <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
384
+ <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
443
385
  <div class="display-flex flex-column gap-3 text-center">
444
- <div class="text-size-12 line-height-12">Feb</div>
445
- <div class="text-size-h3 line-height-h3">28</div>
386
+ <div class="text-size-12 line-height-12">Mar</div>
387
+ <div class="text-size-h3 line-height-h3">11</div>
446
388
  <div class="text-size-12 line-height-12">2026</div>
447
389
  </div>
448
390
  </div>
449
391
  </div>
450
392
  <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
451
- <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
393
+ <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
452
394
  <div class="display-flex flex-column gap-3 text-center">
453
395
  <div class="text-size-12 line-height-12">Mar</div>
454
- <div class="text-size-h3 line-height-h3">1</div>
396
+ <div class="text-size-h3 line-height-h3">12</div>
455
397
  <div class="text-size-12 line-height-12">2026</div>
456
398
  </div>
457
399
  </div>
@@ -460,25 +402,25 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
460
402
  <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
461
403
  <div class="display-flex flex-column gap-3 text-center">
462
404
  <div class="text-size-12 line-height-12">Mar</div>
463
- <div class="text-size-h3 line-height-h3">2</div>
405
+ <div class="text-size-h3 line-height-h3">13</div>
464
406
  <div class="text-size-12 line-height-12">2026</div>
465
407
  </div>
466
408
  </div>
467
409
  </div>
468
410
  <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
469
- <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
411
+ <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
470
412
  <div class="display-flex flex-column gap-3 text-center">
471
413
  <div class="text-size-12 line-height-12">Mar</div>
472
- <div class="text-size-h3 line-height-h3">3</div>
414
+ <div class="text-size-h3 line-height-h3">14</div>
473
415
  <div class="text-size-12 line-height-12">2026</div>
474
416
  </div>
475
417
  </div>
476
418
  </div>
477
419
  <div class="ColumnItem flex-1-1-0 space-x--1 user-select-none">
478
- <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
420
+ <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest">
479
421
  <div class="display-flex flex-column gap-3 text-center">
480
422
  <div class="text-size-12 line-height-12">Mar</div>
481
- <div class="text-size-h3 line-height-h3">4</div>
423
+ <div class="text-size-h3 line-height-h3">15</div>
482
424
  <div class="text-size-12 line-height-12">2026</div>
483
425
  </div>
484
426
  </div>
@@ -487,7 +429,7 @@ const DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {
487
429
  <div class="cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 hover-bg-highlight-decent hover-text-color-darkest">
488
430
  <div class="display-flex flex-column gap-3 text-center">
489
431
  <div class="text-size-12 line-height-12">Mar</div>
490
- <div class="text-size-h3 line-height-h3">5</div>
432
+ <div class="text-size-h3 line-height-h3">16</div>
491
433
  <div class="text-size-12 line-height-12">2026</div>
492
434
  </div>
493
435
  </div>
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Content
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/card
6
- *Captured:* 2026-02-23T13:42:06.425Z
6
+ *Captured:* 2026-03-06T10:40:37.908Z
7
7
 
8
8
  The Card is a utility component designed to simplify usage of default card styling.
9
9
 
@@ -17,14 +17,6 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
17
17
 
18
18
  Lorem
19
19
 
20
- #### Summary
21
-
22
- 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.
23
- Lorem ipsum
24
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
25
-
26
- Lorem
27
-
28
20
  #### React (tsx)
29
21
 
30
22
  ```tsx
@@ -3,7 +3,7 @@
3
3
  *Category:* Components
4
4
  *Section:* Content
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/carousel
6
- *Captured:* 2026-02-23T13:42:06.701Z
6
+ *Captured:* 2026-03-06T10:40:38.118Z
7
7
 
8
8
  ## Carousel
9
9
 
@@ -20,19 +20,6 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur.
20
20
 
21
21
  Next
22
22
 
23
- #### Summary
24
-
25
- First slide label
26
- Nulla vitae elit libero, a pharetra augue mollis interdum.
27
-
28
- Second slide label
29
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
30
-
31
- Third slide label
32
- Praesent commodo cursus magna, vel scelerisque nisl consectetur.
33
-
34
- Next
35
-
36
23
  #### React (tsx)
37
24
 
38
25
  ```tsx