@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.
- package/README.md +13 -17
- package/dist/doc-metadata.json +125 -295
- package/dist/docs/components/accentBar.md +16 -69
- package/dist/docs/components/activity.md +7 -44
- package/dist/docs/components/animatedNumber.md +3 -11
- package/dist/docs/components/animatedTextReveal.md +3 -31
- package/dist/docs/components/animations.md +21 -54
- package/dist/docs/components/appHeader.md +11 -30
- package/dist/docs/components/appLayout.md +36 -172
- package/dist/docs/components/appNavigationBar.md +1 -24
- package/dist/docs/components/areaCharts.md +7 -22
- package/dist/docs/components/aspectRatioPlaceholder.md +1 -9
- package/dist/docs/components/assetTree.md +141 -374
- package/dist/docs/components/autosuggests.md +3 -102
- package/dist/docs/components/avatar.md +1 -16
- package/dist/docs/components/banner.md +4 -37
- package/dist/docs/components/barCharts.md +20 -75
- package/dist/docs/components/barList.md +9 -77
- package/dist/docs/components/basicMap.md +1 -67
- package/dist/docs/components/bottomSheet.md +2 -28
- package/dist/docs/components/button.md +12 -65
- package/dist/docs/components/buttonToolbar.md +5 -19
- package/dist/docs/components/calendarStripe.md +48 -106
- package/dist/docs/components/card.md +1 -9
- package/dist/docs/components/carousel.md +1 -14
- package/dist/docs/components/chartColors.md +1 -156
- package/dist/docs/components/chartsGettingStarted.md +1 -1
- package/dist/docs/components/chat.md +2 -81
- package/dist/docs/components/checkbox.md +11 -72
- package/dist/docs/components/circularProgress.md +8 -49
- package/dist/docs/components/clearableInput.md +3 -62
- package/dist/docs/components/collapse.md +2 -15
- package/dist/docs/components/composedCharts.md +16 -26
- package/dist/docs/components/contentLoader.md +7 -25
- package/dist/docs/components/dataTabs.md +16 -104
- package/dist/docs/components/datepickers.md +710 -962
- package/dist/docs/components/dialogs.md +5 -67
- package/dist/docs/components/divider.md +1 -33
- package/dist/docs/components/dropdowns.md +3412 -5600
- package/dist/docs/components/editableContent.md +4 -82
- package/dist/docs/components/expander.md +15 -88
- package/dist/docs/components/fade.md +4 -61
- package/dist/docs/components/fadeExpander.md +1 -7
- package/dist/docs/components/fadeUp.md +2 -76
- package/dist/docs/components/feedback.md +9 -68
- package/dist/docs/components/filePickers.md +4 -18
- package/dist/docs/components/formLabel.md +7 -27
- package/dist/docs/components/groupedItemList.md +2 -158
- package/dist/docs/components/iconList.md +8 -65
- package/dist/docs/components/imagePreloader.md +1 -9
- package/dist/docs/components/labeledElement.md +3 -18
- package/dist/docs/components/licensePlate.md +1 -43
- package/dist/docs/components/lineCharts.md +7 -38
- package/dist/docs/components/listMenu.md +2 -34
- package/dist/docs/components/loadMore.md +5 -24
- package/dist/docs/components/mainNavigation.md +1 -9
- package/dist/docs/components/mapCircle.md +1 -23
- package/dist/docs/components/mapCluster.md +2 -54
- package/dist/docs/components/mapContext.md +1 -23
- package/dist/docs/components/mapDraggableMarker.md +2 -28
- package/dist/docs/components/mapGettingStarted.md +2 -2
- package/dist/docs/components/mapInfoBubble.md +1 -27
- package/dist/docs/components/mapLayerGroup.md +1 -23
- package/dist/docs/components/mapMarker.md +1 -99
- package/dist/docs/components/mapPolygon.md +2 -116
- package/dist/docs/components/mapRoute.md +6 -1465
- package/dist/docs/components/mapRouteGenerator.md +1 -1
- package/dist/docs/components/mapSettings.md +11 -128
- package/dist/docs/components/mapUtils.md +10 -113
- package/dist/docs/components/multiselects.md +14 -163
- package/dist/docs/components/noData.md +8 -22
- package/dist/docs/components/notifications.md +3 -19
- package/dist/docs/components/numbercontrol.md +3 -47
- package/dist/docs/components/onboarding.md +3 -15
- package/dist/docs/components/page.md +1 -33
- package/dist/docs/components/pager.md +1 -17
- package/dist/docs/components/pieCharts.md +40 -71
- package/dist/docs/components/popover.md +1 -12
- package/dist/docs/components/position.md +2 -6
- package/dist/docs/components/radialBarCharts.md +32 -116
- package/dist/docs/components/radioCardGroup.md +6 -48
- package/dist/docs/components/radiobutton.md +6 -75
- package/dist/docs/components/releaseNotes.md +3 -21
- package/dist/docs/components/resizer.md +1 -7
- package/dist/docs/components/responsiveColumnStripe.md +9 -49
- package/dist/docs/components/responsiveVideo.md +1 -7
- package/dist/docs/components/rioglyph.md +1 -17
- package/dist/docs/components/rules.md +7 -70
- package/dist/docs/components/saveableInput.md +267 -401
- package/dist/docs/components/selects.md +27 -1164
- package/dist/docs/components/sidebar.md +6 -17
- package/dist/docs/components/sliders.md +1 -27
- package/dist/docs/components/smoothScrollbars.md +1 -73
- package/dist/docs/components/spinners.md +6 -51
- package/dist/docs/components/states.md +6 -92
- package/dist/docs/components/statsWidgets.md +1 -76
- package/dist/docs/components/statusBar.md +1 -57
- package/dist/docs/components/stepButton.md +2 -7
- package/dist/docs/components/steppedProgressBars.md +5 -62
- package/dist/docs/components/subNavigation.md +1 -31
- package/dist/docs/components/supportMarker.md +2 -14
- package/dist/docs/components/svgImage.md +1 -5
- package/dist/docs/components/switch.md +2 -33
- package/dist/docs/components/tables.md +1 -1
- package/dist/docs/components/tagManager.md +1 -41
- package/dist/docs/components/tags.md +1 -138
- package/dist/docs/components/teaser.md +2 -122
- package/dist/docs/components/textTruncateMiddle.md +2 -9
- package/dist/docs/components/timeline.md +1 -99
- package/dist/docs/components/timepicker.md +4 -79
- package/dist/docs/components/toggleButton.md +2 -15
- package/dist/docs/components/tooltip.md +9 -30
- package/dist/docs/components/tracker.md +2 -19
- package/dist/docs/components/virtualList.md +57 -123
- package/dist/docs/foundations.md +753 -4073
- package/dist/docs/start/changelog.md +793 -1
- package/dist/docs/start/goodtoknow.md +1 -1
- package/dist/docs/start/guidelines/color-combinations.md +149 -483
- package/dist/docs/start/guidelines/custom-css.md +1 -1
- package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
- package/dist/docs/start/guidelines/formatting.md +1 -1
- package/dist/docs/start/guidelines/iframe.md +4 -16
- package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
- package/dist/docs/start/guidelines/print-css.md +1 -1
- package/dist/docs/start/guidelines/spinner.md +13 -67
- package/dist/docs/start/guidelines/state-in-url.md +1 -1
- package/dist/docs/start/guidelines/supported-browsers.md +1 -1
- package/dist/docs/start/guidelines/writing.md +1 -1
- package/dist/docs/start/howto.md +11 -11
- package/dist/docs/start/intro.md +1 -1
- package/dist/docs/start/responsiveness.md +1 -1
- package/dist/docs/utilities/classNames.md +3 -18
- package/dist/docs/utilities/deviceUtils.md +7 -13
- package/dist/docs/utilities/featureToggles.md +1 -1
- package/dist/docs/utilities/fuelTypeUtils.md +2 -12
- package/dist/docs/utilities/routeUtils.md +25 -343
- package/dist/docs/utilities/useAfterMount.md +1 -6
- package/dist/docs/utilities/useAutoAnimate.md +2 -15
- package/dist/docs/utilities/useAverage.md +1 -6
- package/dist/docs/utilities/useClickOutside.md +1 -5
- package/dist/docs/utilities/useClipboard.md +2 -6
- package/dist/docs/utilities/useCookies.md +2 -10
- package/dist/docs/utilities/useCount.md +7 -16
- package/dist/docs/utilities/useDarkMode.md +2 -6
- package/dist/docs/utilities/useDebugInfo.md +6 -20
- package/dist/docs/utilities/useEffectOnce.md +1 -6
- package/dist/docs/utilities/useElapsedTime.md +2 -6
- package/dist/docs/utilities/useElementSize.md +1 -7
- package/dist/docs/utilities/useEsc.md +1 -5
- package/dist/docs/utilities/useEvent.md +1 -5
- package/dist/docs/utilities/useFocusTrap.md +1 -5
- package/dist/docs/utilities/useFullscreen.md +2 -15
- package/dist/docs/utilities/useHover.md +1 -5
- package/dist/docs/utilities/useIncomingPostMessages.md +2 -18
- package/dist/docs/utilities/useInterval.md +2 -8
- package/dist/docs/utilities/useIsFocusWithin.md +1 -10
- package/dist/docs/utilities/useKey.md +1 -15
- package/dist/docs/utilities/useLocalStorage.md +2 -11
- package/dist/docs/utilities/useLocationSuggestions.md +1 -5
- package/dist/docs/utilities/useMax.md +1 -5
- package/dist/docs/utilities/useMin.md +1 -5
- package/dist/docs/utilities/useMutationObserver.md +3 -11
- package/dist/docs/utilities/useOnScreen.md +1 -8
- package/dist/docs/utilities/useOnlineStatus.md +1 -5
- package/dist/docs/utilities/usePostMessage.md +3 -9
- package/dist/docs/utilities/usePostMessageSender.md +3 -13
- package/dist/docs/utilities/usePrevious.md +1 -5
- package/dist/docs/utilities/useResizeObserver.md +3 -11
- package/dist/docs/utilities/useRioCookieConsent.md +1 -5
- package/dist/docs/utilities/useScrollPosition.md +3 -59
- package/dist/docs/utilities/useSearch.md +2 -16
- package/dist/docs/utilities/useSearchHighlight.md +13 -78
- package/dist/docs/utilities/useSorting.md +18 -43
- package/dist/docs/utilities/useStateWithValidation.md +1 -5
- package/dist/docs/utilities/useSum.md +1 -9
- package/dist/docs/utilities/useTableExport.md +42 -59
- package/dist/docs/utilities/useTableSelection.md +75 -120
- package/dist/docs/utilities/useTimeout.md +2 -6
- package/dist/docs/utilities/useToggle.md +4 -14
- package/dist/docs/utilities/useUrlState.md +2 -27
- package/dist/docs/utilities/useWindowResize.md +1 -5
- package/dist/index.mjs +46 -10
- package/dist/version.json +2 -2
- package/package.json +2 -2
- package/dist/docs/templates/common-table.md +0 -1112
- package/dist/docs/templates/detail-views.md +0 -942
- package/dist/docs/templates/expandable-details.md +0 -228
- package/dist/docs/templates/feature-cards.md +0 -549
- package/dist/docs/templates/form-summary.md +0 -199
- package/dist/docs/templates/form-toggle.md +0 -367
- package/dist/docs/templates/list-blocks.md +0 -1021
- package/dist/docs/templates/loading-progress.md +0 -109
- package/dist/docs/templates/options-panel.md +0 -152
- package/dist/docs/templates/panel-variants.md +0 -164
- package/dist/docs/templates/progress-cards.md +0 -607
- package/dist/docs/templates/progress-success.md +0 -142
- package/dist/docs/templates/settings-form.md +0 -434
- package/dist/docs/templates/stats-blocks.md +0 -1381
- package/dist/docs/templates/table-panel.md +0 -184
- package/dist/docs/templates/table-row-animation.md +0 -317
- 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-
|
|
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
|
-
|
|
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-
|
|
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
|
-
|
|
15
|
+
Default Primary Secondary Success Info Warning Danger Muted filled Muted
|
|
16
16
|
Disabled buttons
|
|
17
|
-
|
|
17
|
+
Default Primary Secondary Success Info Warning Danger Muted filled Muted
|
|
18
18
|
Button sizes
|
|
19
|
-
Extra
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
750
|
+
Default Primary Secondary Success Info Warning Danger Muted filled Muted
|
|
789
751
|
Buttons as anchor element - disabled
|
|
790
|
-
|
|
752
|
+
Default Primary Secondary Success Info Warning Danger Muted filled Muted
|
|
791
753
|
Buttons as anchor element - various sizes
|
|
792
|
-
Extra
|
|
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-
|
|
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
|
-
|
|
15
|
+
Button Button
|
|
16
16
|
|
|
17
17
|
ButtonToolbar centered
|
|
18
|
-
|
|
18
|
+
Cancel Save changes
|
|
19
19
|
|
|
20
20
|
ButtonToolbar right aligned
|
|
21
|
-
|
|
21
|
+
Cancel Save changes
|
|
22
22
|
|
|
23
23
|
ButtonToolbar space between
|
|
24
|
-
|
|
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-
|
|
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
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
Wednesday
|
|
18
|
-
25 February 2026
|
|
14
|
+
Saturday
|
|
15
|
+
7 March 2026
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
Sunday
|
|
18
|
+
8 March 2026
|
|
22
19
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
#### Summary
|
|
20
|
+
Monday
|
|
21
|
+
9 March 2026
|
|
27
22
|
|
|
28
23
|
Tuesday
|
|
29
|
-
|
|
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>
|
|
134
|
-
<div class="text-size-16 text-medium">
|
|
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>
|
|
146
|
-
<div class="text-size-16 text-medium">
|
|
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>
|
|
158
|
-
<div class="text-size-16 text-medium">
|
|
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>
|
|
170
|
-
<div class="text-size-16 text-medium">
|
|
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
|
-
|
|
196
|
+
7
|
|
231
197
|
2026
|
|
232
198
|
|
|
233
199
|
Mar
|
|
234
|
-
|
|
200
|
+
8
|
|
235
201
|
2026
|
|
236
202
|
|
|
237
203
|
Mar
|
|
238
|
-
|
|
204
|
+
9
|
|
239
205
|
2026
|
|
240
206
|
|
|
241
207
|
Mar
|
|
242
|
-
|
|
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
|
-
|
|
212
|
+
11
|
|
271
213
|
2026
|
|
272
214
|
|
|
273
215
|
Mar
|
|
274
|
-
|
|
216
|
+
12
|
|
275
217
|
2026
|
|
276
218
|
|
|
277
219
|
Mar
|
|
278
|
-
|
|
220
|
+
13
|
|
279
221
|
2026
|
|
280
222
|
|
|
281
223
|
Mar
|
|
282
|
-
|
|
224
|
+
14
|
|
283
225
|
2026
|
|
284
226
|
|
|
285
|
-
Set to
|
|
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
|
|
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">
|
|
409
|
-
<div class="text-size-h3 line-height-h3">
|
|
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
|
|
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">
|
|
418
|
-
<div class="text-size-h3 line-height-h3">
|
|
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">
|
|
427
|
-
<div class="text-size-h3 line-height-h3">
|
|
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">
|
|
436
|
-
<div class="text-size-h3 line-height-h3">
|
|
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
|
|
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">
|
|
445
|
-
<div class="text-size-h3 line-height-h3">
|
|
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
|
|
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">
|
|
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">
|
|
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
|
|
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">
|
|
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
|
|
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">
|
|
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">
|
|
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-
|
|
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-
|
|
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
|