@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/onboarding.md

@@ -0,0 +1,297 @@
+# Onboarding
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/onboarding
+*Captured:* 2025-12-12T12:38:55.062Z
+
+Useful when you want to control a single tooltip that highlights a portion of the UI.
+
+## Onboarding
+
+## Single onboarding tip
+
+### Example: Example 1
+
+Reveal feature with onboarding tipReset
+
+#### Summary
+
+Reveal feature with onboarding tipReset
+
+#### React (tsx)
+
+```tsx
+import { useEffect, useState } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import OnboardingTip from '@rio-cloud/rio-uikit/OnboardingTip';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+import Fade from '@rio-cloud/rio-uikit/Fade';
+
+export default () => {
+    const [showFeature, setShowFeature] = useState(false);
+    const [showTip, setShowTip] = useState(false);
+
+    useEffect(() => {
+        if (showFeature) {
+            setTimeout(() => setShowTip(true), 1200);
+        }
+    }, [showFeature]);
+
+    const handleReset = () => {
+        setShowFeature(false);
+        setShowTip(false);
+    };
+
+    return (
+        <div>
+            <div className='btn-toolbar'>
+                <Button bsStyle='primary' onClick={() => setShowFeature(true)}>
+                    Reveal feature with onboarding tip
+                </Button>
+                <Button variant='link' onClick={handleReset}>
+                    Reset
+                </Button>
+            </div>
+            <Divider />
+            <div className='display-grid gap-25 grid-cols-3 gap-4'>
+                <Fade show={showFeature}>
+                    <div>
+                        <OnboardingTip
+                            show={showTip}
+                            placement='top-start'
+                            width={350}
+                            title='Single onboarding example'
+                            content='Welcome to the dashboard! This section provides an overview of your activity and important updates.'
+                            onHide={() => setShowTip(false)}
+                        >
+                            <div
+                                className='panel panel-default position-relative padding-20 text-center bg-white text-wrap-balance'
+                                data-onboarding
+                            >
+                                <span className='rioglyph rioglyph-desktop text-size-h1 text-color-highlight' />
+                                <h3 className='margin-top-5'>Dashboard</h3>
+                                <p>See your key metrics and latest updates at a glance.</p>
+                            </div>
+                        </OnboardingTip>
+                    </div>
+                </Fade>
+            </div>
+        </div>
+    );
+};
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | String | — | The id of the DOM element. |
+| show | Boolean | false | Indicates whether the onboarding tip is shown. |
+| showCloseIcon | Boolean | true | Defines whether to show a close icon. |
+| textAlignment | String | OnboardingTip.TEXT_ALIGNMENT_LEFT | Define how the text should be aligned. Possible values are: OnboardingTip.TEXT_ALIGNMENT_LEFT OnboardingTip.TEXT_ALIGNMENT_CENTER OnboardingTip.TEXT_ALIGNMENT_RIGHT |
+| width | Number | — | Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450 or 500 |
+| onHide | Function | () => {} | Callback function for when the component shall be hidden. |
+| useInDialog | Boolean | false | Changes the z-index. |
+| className | String | — | Additional classes to be set on the wrapper element. |
+| title | String / Node | — | The title of the onboarding tip. |
+| content | String / Node | — | The content of the onboarding tip. |
+| preventOverflow | Boolean | true | Prevents Onboarding tips from being cut off horizontally at screen borders. |
+| popperConfig | Object | — | A Popper.js config object passed to the the underlying popper instance. |
+| placement | String | OnboardingTip.BOTTOM | Define how the component should be placed. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |
+
+## Onboarding tour
+
+When you want to guide the user through a "tour" with multiple steps explaining individual features or UI elements. The behavior of the whole tour and individual steps can be controlled declaratively.
+
+### Example: Notifications
+
+Start walkthroughReset
+
+Notifications
+Keep track of important alerts and messages.
+Click here
+
+#### Summary
+
+Start walkthroughReset
+
+Notifications
+Keep track of important alerts and messages.
+Click here
+
+#### React (tsx)
+
+```tsx
+import { useState, useEffect, type PropsWithChildren } from 'react';
+
+import { useOnboardingTour, type OnboardingStep } from '@rio-cloud/rio-uikit/useOnboarding';
+import Button from '@rio-cloud/rio-uikit/Button';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+
+type PanelProps = {
+    step?: string;
+};
+
+const Panel = ({ children, step }: PropsWithChildren<PanelProps>) => (
+    <div
+        data-onboarding-walkthrough-step={step}
+        className='panel panel-default position-relative padding-20 text-center bg-white text-wrap-balance'
+    >
+        {children}
+    </div>
+);
+
+const steps: OnboardingStep[] = [
+    {
+        element: '[data-onboarding-walkthrough-step="1"]',
+        popover: {
+            title: 'Animated tour example',
+            description:
+                'Welcome to the dashboard! This section provides an overview of your activity and important updates.',
+            side: 'top',
+            align: 'start',
+            showButtons: [],
+        },
+    },
+    {
+        element: '[data-onboarding-walkthrough-step="2"]',
+        disableActiveInteraction: true,
+        popover: {
+            title: 'Animated tour example',
+            description: 'Here, you can find your recent notifications. Stay updated with real-time alerts!',
+            side: 'top',
+            align: 'start',
+            showButtons: ['next'],
+            nextBtnText: 'Next',
+        },
+    },
+    {
+        element: '[data-onboarding-walkthrough-step="3"]',
+        popover: {
+            title: 'Animated tour example',
+            description: 'Here, you can find your recent notifications. Stay updated with real-time alerts!',
+            side: 'top',
+            align: 'start',
+            showButtons: [],
+        },
+    },
+    {
+        element: '[data-onboarding-walkthrough-step="4"]',
+        popover: {
+            title: 'Animated tour example',
+            description: 'Access your profile settings here. Customize your preferences and manage account details.',
+            side: 'top',
+            align: 'start',
+            showButtons: ['next', 'close'],
+            doneBtnText: 'Done',
+        },
+    },
+];
+
+export default () => {
+    const [enableWalkthrough, setEnableWalkthrough] = useState(false);
+    const [showContent2, setShowContent2] = useState(false);
+    const [showContent3, setShowContent3] = useState(false);
+
+    const { run, moveTo } = useOnboardingTour({ steps });
+
+    const handleOnboarding = () => {
+        setEnableWalkthrough(true);
+        run();
+    };
+
+    const handleShowContent2 = () => setShowContent2(true);
+    const handleShowContent3 = () => setShowContent3(true);
+
+    const handleReset = () => {
+        setEnableWalkthrough(false);
+        setShowContent2(false);
+        setShowContent3(false);
+    };
+
+    useEffect(() => {
+        if (enableWalkthrough && showContent2) {
+            moveTo(1);
+        }
+    }, [enableWalkthrough, showContent2]);
+
+    useEffect(() => {
+        if (enableWalkthrough && showContent3) {
+            moveTo(3);
+        }
+    }, [enableWalkthrough, showContent3]);
+
+    return (
+        <div>
+            <div className='btn-toolbar'>
+                <Button bsStyle='primary' onClick={handleOnboarding}>
+                    Start walkthrough
+                </Button>
+                <Button variant='link' onClick={handleReset}>
+                    Reset
+                </Button>
+            </div>
+            <Divider />
+            <div className='display-grid gap-25 grid-cols-3 gap-4'>
+                <Panel step='1'>
+                    <span className='rioglyph rioglyph-notification text-size-h1 text-color-highlight' />
+                    <h3 className='margin-top-5'>Notifications</h3>
+                    <p>Keep track of important alerts and messages.</p>
+                    <Button onClick={handleShowContent2}>Click here</Button>
+                </Panel>
+                {showContent2 && (
+                    <>
+                        <Panel step='2'>
+                            <span className='rioglyph rioglyph-user text-size-h1 text-color-highlight' />
+                            <h3 className='margin-top-5'>Profile Settings</h3>
+                            <p>Manage your personal information and preferences.</p>
+                        </Panel>
+
+                        <Panel step='3'>
+                            <span className='rioglyph rioglyph-clipboard text-size-h1 text-color-highlight' />
+                            <h3 className='margin-top-5'>Project Tracker</h3>
+                            <p>Monitor your ongoing projects and track deadlines.</p>
+                            <Button onClick={handleShowContent3}>Click here</Button>
+                        </Panel>
+                    </>
+                )}
+                {showContent3 && (
+                    <Panel step='4'>
+                        <span className='rioglyph rioglyph-ok text-size-h1 text-color-highlight' />
+                        <h3 className='margin-top-5'>Done</h3>
+                        <p>You have reached the final feature</p>
+                    </Panel>
+                )}
+            </div>
+        </div>
+    );
+};
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| steps | OnboardingStep[] | — | Array of steps to highlight. This should be passed when setting up a product tour. |
+| └element | String | — | The target element to highlight. This can be a DOM element (ref), a function that returns a DOM element, or a CSS selector (most likely, you want to go with a selector as it's the easiest one to implement). If no element is given, the popover will simply be centered on the screen. |
+| └popover | Object | — | Defines the content and appearance of the popover using those properties: title: Title text to be shown. description: Description text to be shown. side: The position of the popover relative to the target element. align: Where the popover is anchored to the target element. showButtons: The buttons that should be shown in the popover - for this step only. disableButtons: The buttons that should be disabled in the popover - for this step only. disableActiveInteraction: Whether to disable interaction with the highlighted element. popoverClass: Custom class to add to the popover element. prevBtnText: Text to use for the "previous" button - specific for this step only. nextBtnText: Text to use for the "next" button - specific for this step only. doneBtnText: Text to use for the "done" (a.k.a. the final "next") button - specific for this step only. |
+| └onHighlightStarted | Function | — | Callback triggered when the highlighting is about to become visible. |
+| └onHighlighted | Function | — | Callback triggered when the highlight is visible. |
+| └onDeselected | Function | — | Callback triggered when the highlight is about to become invisible. |
+| showButtons | AllowedButtons[] | ["next", "previous", "close"] | Array of buttons to show in the popover. Defaults to ["next", "previous", "close"] for product tours and [] for single element highlighting. |
+| disableButtons | AllowedButtons[] | — | Array of buttons to disable. Useful when you want to show some buttons but disable others. |
+| prevBtnText | String | Previous | Text to use for the "previous" buttons. |
+| nextBtnText | String | Next | Text to use for the "next" buttons. |
+| doneBtnText | String | Done | Text to use for the "done" button. |
+| showProgress | Boolean | true | Indicates whether to show progress in the onboarding popover. |
+| allowClose | Boolean | false | Whether to allow closing the popover by clicking on the backdrop. |
+| stagePadding | Number | 10 | Distance between the highlighted element and the cutout. |
+| stageRadius | Number | 5 | Radius of the cutout around the highlighted element. |
+| allowKeyboardControl | Boolean | true | Whether to allow keyboard navigation. |
+| disableActiveInteraction | Boolean | false | Whether to disable interaction with the highlighted element. Can be configured at the step level as well |
+| noBackdrop | Boolean | false | Option to disable the backdrop. The backdrop element is still there but with 100% opacity and the close on the backdrop is disabled. |
+| popoverClass | String | — | Additional classes set on the popover itself. |
+| onPopoverRender | Function | — | Callback triggered when the onboarding popover renders. |
+| onDestroyed | Function | — | Callback triggered when the onboarding tour is "destroyed" (dismissed). |

package/dist/docs/components/page.md

@@ -0,0 +1,241 @@
+# Page
+
+*Category:* Components
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#components/page
+*Captured:* 2025-12-12T12:38:44.541Z
+
+## Page
+
+### Example: A4
+
+A4
+
+Lorem ipsum dolor
+
+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.
+
+In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+
+Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
+
+#### Summary
+
+A4
+
+Lorem ipsum dolor
+
+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.
+
+In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+
+Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
+
+#### React (tsx)
+
+```tsx
+import Page from '@rio-cloud/rio-uikit/components/page/Page';
+
+import sampleShippingDocument from '../../../assets/shipping_list_sample.png';
+
+const content = <div className='display-grid place-items-center height-100pct text-size-20 text-color-dark'>A4</div>;
+
+import { dummyTextLong } from '../../../utils/data';
+
+export default () => (
+    <div className='height-600 overflow-y-scroll padding-20'>
+        <div className='display-grid place-items-center gap-20'>
+            <Page width={600}>{content}</Page>
+
+            <Page width={600}>
+                <img
+                    className='img-responsive'
+                    src={sampleShippingDocument}
+                    loading='lazy'
+                    alt='sample shipment document'
+                />
+            </Page>
+
+            <Page width={600}>
+                <div className='padding-x-20'>
+                    <h2>Lorem ipsum dolor</h2>
+                    <p>{dummyTextLong}</p>
+                </div>
+            </Page>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="height-600 overflow-y-scroll padding-20">
+    <div class="display-grid place-items-center gap-20">
+        <div class="Page portrait shadow-hard" style="width: 600px;">
+            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">A4</div>
+        </div>
+        <div class="Page portrait shadow-hard" style="width: 600px;">
+            <img class="img-responsive" src="https://uikit.developers.rio.cloud/assets/shipping_list_sample-iOPFy4Rq.png" loading="lazy" alt="sample shipment document">
+        </div>
+        <div class="Page portrait shadow-hard" style="width: 600px;">
+            <div class="padding-x-20">
+                <h2>Lorem ipsum dolor</h2>
+                <p>
+                    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.
+
+                    In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+
+                    Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</p>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page.Please make sure the element does not get stretched when using flexbox. |
+| orientation | 'portrait' \| 'landscape' | portrait | Defines the layout of the page |
+| shadow | Boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
+| border | Boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
+| className | String | — | Additional classes to be set on the wrapper element |
+
+### Example: Page 1
+
+Page 1
+
+Page 2
+
+Page 3
+
+Page 4
+
+Page 5
+
+Page 6
+
+#### Summary
+
+Page 1
+
+Page 2
+
+Page 3
+
+Page 4
+
+Page 5
+
+Page 6
+
+#### React (tsx)
+
+```tsx
+import Page from '@rio-cloud/rio-uikit/components/page/Page';
+
+export default () => (
+    <div className='padding-20 overflow-x-scroll'>
+        <div className='display-inline-flex gap-20'>
+            {Array.from({ length: 6 }, (_, index) => (
+                <Page width={300} key={index}>
+                    <div className='display-grid place-items-center height-100pct text-size-20 text-color-dark'>
+                        {`Page ${index + 1}`}
+                    </div>
+                </Page>
+            ))}
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="padding-20 overflow-x-scroll">
+    <div class="display-inline-flex gap-20">
+        <div class="Page portrait shadow-hard" style="width: 300px;">
+            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Page 1</div>
+        </div>
+        <div class="Page portrait shadow-hard" style="width: 300px;">
+            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Page 2</div>
+        </div>
+        <div class="Page portrait shadow-hard" style="width: 300px;">
+            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Page 3</div>
+        </div>
+        <div class="Page portrait shadow-hard" style="width: 300px;">
+            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Page 4</div>
+        </div>
+        <div class="Page portrait shadow-hard" style="width: 300px;">
+            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Page 5</div>
+        </div>
+        <div class="Page portrait shadow-hard" style="width: 300px;">
+            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Page 6</div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page.Please make sure the element does not get stretched when using flexbox. |
+| orientation | 'portrait' \| 'landscape' | portrait | Defines the layout of the page |
+| shadow | Boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
+| border | Boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
+| className | String | — | Additional classes to be set on the wrapper element |
+
+### Example: Portrait
+
+Portrait
+
+Landscape
+
+#### Summary
+
+Portrait
+
+Landscape
+
+#### React (tsx)
+
+```tsx
+import Page from '@rio-cloud/rio-uikit/components/page/Page';
+
+export default () => (
+    <div className='display-grid grid-cols-2 place-items-center gap-20'>
+        <Page width={210} border shadow={false}>
+            <div className='display-grid place-items-center height-100pct text-size-20 text-color-dark'>Portrait</div>
+        </Page>
+        <Page width={210} border shadow={false} orientation='landscape'>
+            <div className='display-grid place-items-center height-100pct text-size-20 text-color-dark'>Landscape</div>
+        </Page>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-grid grid-cols-2 place-items-center gap-20">
+    <div class="Page portrait border border-width-2" style="width: 210px;">
+        <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Portrait</div>
+    </div>
+    <div class="Page landscape border border-width-2" style="height: 210px;">
+        <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Landscape</div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page.Please make sure the element does not get stretched when using flexbox. |
+| orientation | 'portrait' \| 'landscape' | portrait | Defines the layout of the page |
+| shadow | Boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
+| border | Boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
+| className | String | — | Additional classes to be set on the wrapper element |

package/dist/docs/components/pager.md

@@ -0,0 +1,133 @@
+# Pager
+
+*Category:* Components
+*Section:* Navigation
+*Source:* https://uikit.developers.rio.cloud/#components/pager
+*Captured:* 2025-12-12T12:38:09.425Z
+
+## Pager
+
+### Example: Example 1
+
+Pager with label
+
+Previous
+The previous chapter
+
+Next
+The next chapter
+
+Compact Pager without label
+
+Previous
+
+Next
+
+#### Summary
+
+Pager with label
+
+Previous
+The previous chapter
+
+Next
+The next chapter
+
+Compact Pager without label
+
+Previous
+
+Next
+
+#### React (tsx)
+
+```tsx
+import { Title } from '../../../components/Title';
+
+import Pager from '@rio-cloud/rio-uikit/Pager';
+
+export default () => (
+    <div>
+        <Title>Pager with label</Title>
+        <div className='display-flex gap-15 max-width-800 margin-bottom-50'>
+            <Pager label='Previous' title='The previous chapter' alignRight />
+            <Pager label='Next' title='The next chapter' />
+        </div>
+
+        <Title>Compact Pager without label</Title>
+        <div className='display-flex gap-15 max-width-800 justify-content-between'>
+            <Pager title='Previous' variant={Pager.VARIANT_COMPACT} disabled alignRight />
+            <Pager title='Next' label='foo' variant={Pager.VARIANT_COMPACT} />
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="lead ">
+        <div class="display-flex justify-content-between">
+            <div>Pager with label</div>
+        </div>
+        <hr class="margin-top-10 border-color-light">
+    </div>
+    <div class="display-flex gap-15 max-width-800 margin-bottom-50">
+        <div class="Pager bg-white border display-flex justify-space-between align-items-center flex-row-reverse cursor-pointer user-select-none rounded padding-y-15 padding-x-20 width-100pct">
+            <div class="display-flex flex-1-1 flex-column align-items-end">
+                <div class="text-color-gray line-height-16">Previous</div>
+                <div class="text-color-darker text-right text-size-16 text-medium">The previous chapter</div>
+            </div>
+            <div class="text-size-12 display-grid place-items-center">
+                <span class="rioglyph text-color-darker rioglyph-arrow-left margin-right-10 text-size-200pct">
+                </span>
+            </div>
+        </div>
+        <div class="Pager bg-white border display-flex justify-space-between align-items-center cursor-pointer user-select-none rounded padding-y-15 padding-x-20 width-100pct">
+            <div class="display-flex flex-1-1 flex-column ">
+                <div class="text-color-gray line-height-16">Next</div>
+                <div class="text-color-darker text-size-16 text-medium">The next chapter</div>
+            </div>
+            <div class="text-size-12 display-grid place-items-center">
+                <span class="rioglyph text-color-darker rioglyph-arrow-right margin-left-10 text-size-200pct">
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="lead ">
+        <div class="display-flex justify-content-between">
+            <div>Compact Pager without label</div>
+        </div>
+        <hr class="margin-top-10 border-color-light">
+    </div>
+    <div class="display-flex gap-15 max-width-800 justify-content-between">
+        <div class="Pager bg-white border display-flex justify-space-between align-items-center flex-row-reverse pointer-events-none cursor-pointer user-select-none rounded-circle padding-y-5 padding-x-15 width-auto">
+            <div class="display-flex flex-1-1 flex-column align-items-end">
+                <div class="text-color-light">Previous</div>
+            </div>
+            <span class="rioglyph text-color-light rioglyph-chevron-left margin-right-5 text-size-10">
+            </span>
+        </div>
+        <div class="Pager bg-white border display-flex justify-space-between align-items-center cursor-pointer user-select-none rounded-circle padding-y-5 padding-x-15 width-auto">
+            <div class="display-flex flex-1-1 flex-column ">
+                <div class="text-color-darker">Next</div>
+            </div>
+            <span class="rioglyph text-color-darker rioglyph-chevron-right margin-left-5 text-size-10">
+            </span>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | String / Node | — | The title or name of the section next/previous section. |
+| label | String / Node | — | The optional label for the full variant. |
+| alignRight | Boolean | false | Set right alignment for "previous" pager content to be aligned to the right side of the pager and the arrow on the left side. |
+| disabled | Boolean | false | Sets the pager disabled. |
+| variant | String | full | Define how large the component should be rendered. Possible values are: Pager.VARIANT_FULL, Pager.VARIANT_COMPACT, full, compact |
+| onClick | Function | () => {} | Callback function for when the component is clicked. |
+| className | String | — | Additional classes for the wrapper element. |