@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/fade.md

@@ -0,0 +1,836 @@
+# Fade
+
+*Category:* Components
+*Section:* Show/Hide
+*Source:* https://uikit.developers.rio.cloud/#components/fade
+*Captured:* 2025-12-12T12:38:24.744Z
+
+The Fade component fades in and out content with a given animation style.
+
+## Fade
+
+### Example: Example 1
+
+Animation styles:fade (default)fromLeftfromRightfromTopfromBottom
+
+Toggle content
+
+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.
+
+#### Summary
+
+Animation styles:fade (default)fromLeftfromRightfromTopfromBottom
+
+Toggle content
+
+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.
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Fade, { type FadeAnimationStyle } from '@rio-cloud/rio-uikit/Fade';
+import RadioButton from '@rio-cloud/rio-uikit/RadioButton';
+import ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';
+import { dummyText } from '../../../utils/data';
+
+export default () => {
+    const [showContent, setShowContent] = useState(true);
+    const [animationStyle, setAnimationStyle] = useState<FadeAnimationStyle>('fade');
+
+    return (
+        <div>
+            <div className='margin-bottom-25'>
+                <label>Animation styles:</label>
+                <div>
+                    <RadioButton name='radiosInline' inline onClick={() => setAnimationStyle('fade')} defaultChecked>
+                        fade (default)
+                    </RadioButton>
+                    <RadioButton name='radiosInline' inline onClick={() => setAnimationStyle('fromLeft')}>
+                        fromLeft
+                    </RadioButton>
+                    <RadioButton name='radiosInline' inline onClick={() => setAnimationStyle('fromRight')}>
+                        fromRight
+                    </RadioButton>
+                    <RadioButton name='radiosInline' inline onClick={() => setAnimationStyle('fromTop')}>
+                        fromTop
+                    </RadioButton>
+                    <RadioButton name='radiosInline' inline onClick={() => setAnimationStyle('fromBottom')}>
+                        fromBottom
+                    </RadioButton>
+                </div>
+            </div>
+
+            <ToggleButton
+                className='margin-bottom-10'
+                active={showContent}
+                onClick={() => setShowContent(!showContent)}
+            >
+                Toggle content
+            </ToggleButton>
+
+            <div className='min-height-150'>
+                <Fade animationStyle={animationStyle} show={showContent}>
+                    <div className='panel panel-default panel-body'>
+                        <div className='display-flex justify-content-center'>
+                            <div className='width-50 flex-1-0 text-size-20'>
+                                <span className='rioglyph rioglyph-truck text-size-200pct text-color-gray' />
+                            </div>
+                            <div className='text-color-darker'>{dummyText}</div>
+                        </div>
+                    </div>
+                </Fade>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="margin-bottom-25">
+        <label>Animation styles:</label>
+        <div>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="radiosInline" value="" checked="">
+                <span class="radio-text">
+                    <span>fade (default)</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="radiosInline" value="">
+                <span class="radio-text">
+                    <span>fromLeft</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="radiosInline" value="">
+                <span class="radio-text">
+                    <span>fromRight</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="radiosInline" value="">
+                <span class="radio-text">
+                    <span>fromTop</span>
+                </span>
+            </label>
+            <label class="radio radio-inline" tabindex="0">
+                <input type="radio" class="" name="radiosInline" value="">
+                <span class="radio-text">
+                    <span>fromBottom</span>
+                </span>
+            </label>
+        </div>
+    </div>
+    <button type="button" class="btn btn-default btn-toggle active btn-component margin-bottom-10" tabindex="0">Toggle content</button>
+    <div class="min-height-150">
+        <div style="opacity: 1; transform: none;">
+            <div class="panel panel-default panel-body">
+                <div class="display-flex justify-content-center">
+                    <div class="width-50 flex-1-0 text-size-20">
+                        <span class="rioglyph rioglyph-truck text-size-200pct text-color-gray">
+                        </span>
+                    </div>
+                    <div class="text-color-darker">
+                        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.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | Boolean | true | Defines whether to show the content or not. |
+| duration | Number | 0.2 | Duration of the fade animation in seconds. |
+| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |
+| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |
+| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
+| onExitComplete | Function | () => {} | Fires when all exiting nodes have completed animating out. |
+| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
+| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.div> component. Use this for additional customizations. |
+
+### Example: Example 2
+
+Fading tab content:
+When using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.
+Tab 1
+Tab 2
+
+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.
+
+#### Summary
+
+Fading tab content:
+When using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.
+Tab 1
+Tab 2
+
+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.
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Fade from '@rio-cloud/rio-uikit/Fade';
+import { dummyText } from '../../../utils/data';
+
+export default () => {
+    const [currentTab, setCurrentTab] = useState(1);
+
+    return (
+        <div>
+            <div className='h6'>Fading tab content:</div>
+            <p>
+                When using tabs or pills to switch between content, please us the fade style <code>'tabs'</code>. It's
+                the default so you don't have to explicitly set it.
+            </p>
+            <ul className='nav nav-tabs'>
+                <li className={currentTab === 1 ? 'active' : ''}>
+                    <span onClick={() => setCurrentTab(1)}>Tab 1</span>
+                </li>
+                <li className={currentTab === 2 ? 'active' : ''}>
+                    <span onClick={() => setCurrentTab(2)}>Tab 2</span>
+                </li>
+            </ul>
+            <div className='tab-content-bordered'>
+                <Fade initial={false} exitBeforeEnter>
+                    {currentTab === 1 && <ContentTab1 key='contentTab1' />}
+                    {currentTab === 2 && <ContentTab2 key='contentTab2' />}
+                </Fade>
+            </div>
+        </div>
+    );
+};
+
+const ContentTab1 = () => (
+    <div className='display-flex justify-content-center'>
+        <div className='width-50 flex-1-0 text-size-20'>
+            <span className='rioglyph rioglyph-truck text-size-200pct text-color-gray' />
+        </div>
+        <div className='text-color-darker'>{dummyText}</div>
+    </div>
+);
+
+const ContentTab2 = () => (
+    <div className='display-flex justify-content-center'>
+        <div className='width-50 flex-1-0 text-size-20'>
+            <span className='rioglyph rioglyph-bus text-size-200pct text-color-gray' />
+        </div>
+        <div className='text-color-darker'>{dummyText}</div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="h6">Fading tab content:</div>
+    <p>When using tabs or pills to switch between content, please us the fade style <code>'tabs'</code>. It's the default so you don't have to explicitly set it.</p>
+    <ul class="nav nav-tabs">
+        <li class="active">
+            <span>Tab 1</span>
+        </li>
+        <li class="">
+            <span>Tab 2</span>
+        </li>
+    </ul>
+    <div class="tab-content-bordered">
+        <div style="opacity: 1; transform: none;">
+            <div class="display-flex justify-content-center">
+                <div class="width-50 flex-1-0 text-size-20">
+                    <span class="rioglyph rioglyph-truck text-size-200pct text-color-gray">
+                    </span>
+                </div>
+                <div class="text-color-darker">
+                    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.</div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | Boolean | true | Defines whether to show the content or not. |
+| duration | Number | 0.2 | Duration of the fade animation in seconds. |
+| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |
+| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |
+| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
+| onExitComplete | Function | () => {} | Fires when all exiting nodes have completed animating out. |
+| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
+| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.div> component. Use this for additional customizations. |
+
+### Example: Example 3
+
+Fading pills content:
+When using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.
+Tab 1
+Tab 2
+
+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.
+
+#### Summary
+
+Fading pills content:
+When using tabs or pills to switch between content, please us the fade style 'tabs'. It's the default so you don't have to explicitly set it.
+Tab 1
+Tab 2
+
+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.
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Fade from '@rio-cloud/rio-uikit/Fade';
+import { dummyText, dummyTextExtraShort } from '../../../utils/data';
+
+export default () => {
+    const [currentTab, setCurrentTab] = useState(1);
+
+    return (
+        <div className='max-width-500'>
+            <div className='h6'>Fading pills content:</div>
+            <p>
+                When using tabs or pills to switch between content, please us the fade style <code>'tabs'</code>. It's
+                the default so you don't have to explicitly set it.
+            </p>
+            <ul className='nav nav-pills'>
+                <li className={currentTab === 1 ? 'active' : ''}>
+                    <span onClick={() => setCurrentTab(1)}>Tab 1</span>
+                </li>
+                <li className={currentTab === 2 ? 'active' : ''}>
+                    <span onClick={() => setCurrentTab(2)}>Tab 2</span>
+                </li>
+            </ul>
+            <div className='padding-20 overflow-hidden'>
+                <Fade initial={false} exitBeforeEnter>
+                    {currentTab === 1 && <ContentTab1 key='contentTab1' />}
+                    {currentTab === 2 && <ContentTab2 key='contentTab2' />}
+                </Fade>
+            </div>
+        </div>
+    );
+};
+
+const ContentTab1 = () => (
+    <div className='display-flex justify-content-center'>
+        <div className='margin-right-20 text-size-20'>
+            <span className='rioglyph rioglyph-truck text-size-200pct text-color-gray' />
+        </div>
+        <div className='flex-1-1 text-color-darker'>{dummyText}</div>
+    </div>
+);
+
+const ContentTab2 = () => (
+    <div className='display-flex justify-content-center'>
+        <div className='margin-right-20 text-size-20'>
+            <span className='rioglyph rioglyph-bus text-size-200pct text-color-gray' />
+        </div>
+        <div className='flex-1-1'>
+            <form>
+                <div className='form-group'>
+                    <label className='display-flex flex-wrap justify-content-between'>
+                        Default input<span className='text-italic'>Some input info for the user</span>
+                    </label>
+                    <input type='text' className='form-control' defaultValue='rio' />
+                </div>
+                <div className='form-group'>
+                    <label className='display-flex flex-wrap justify-content-between'>Another input</label>
+                    <input type='text' className='form-control' defaultValue='rio' />
+                </div>
+            </form>
+            <div className='text-color-darker'>{dummyTextExtraShort}</div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-500">
+    <div class="h6">Fading pills content:</div>
+    <p>When using tabs or pills to switch between content, please us the fade style <code>'tabs'</code>. It's the default so you don't have to explicitly set it.</p>
+    <ul class="nav nav-pills">
+        <li class="active">
+            <span>Tab 1</span>
+        </li>
+        <li class="">
+            <span>Tab 2</span>
+        </li>
+    </ul>
+    <div class="padding-20 overflow-hidden">
+        <div style="opacity: 1; transform: none;">
+            <div class="display-flex justify-content-center">
+                <div class="margin-right-20 text-size-20">
+                    <span class="rioglyph rioglyph-truck text-size-200pct text-color-gray">
+                    </span>
+                </div>
+                <div class="flex-1-1 text-color-darker">
+                    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.</div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | Boolean | true | Defines whether to show the content or not. |
+| duration | Number | 0.2 | Duration of the fade animation in seconds. |
+| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |
+| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |
+| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
+| onExitComplete | Function | () => {} | Fires when all exiting nodes have completed animating out. |
+| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
+| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.div> component. Use this for additional customizations. |
+
+### Example: Example 4
+
+Page transition fade:
+You may want to use 'page' or 'pageBack' style when you want to animate content as page transition. Example usage would be in a dialog, when showing onboarding screens or for steps.
+
+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.
+
+Previous
+
+Next
+
+#### Summary
+
+Page transition fade:
+You may want to use 'page' or 'pageBack' style when you want to animate content as page transition. Example usage would be in a dialog, when showing onboarding screens or for steps.
+
+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.
+
+Previous
+
+Next
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Fade, { type FadeAnimationStyle } from '@rio-cloud/rio-uikit/Fade';
+import Pager from '@rio-cloud/rio-uikit/Pager';
+import { dummyText, dummyTextExtraShort } from '../../../utils/data';
+
+export default () => {
+    const [currentContent, setCurrentContent] = useState(1);
+    const [animationStyle, setAnimationStyle] = useState<FadeAnimationStyle>('page');
+
+    const handleNext = () => {
+        setCurrentContent(currentContent + 1);
+        setAnimationStyle('page');
+    };
+
+    const handlePrev = () => {
+        setCurrentContent(currentContent - 1);
+        setAnimationStyle('pageBack');
+    };
+
+    return (
+        <div className='max-width-500'>
+            <div className='h6'>Page transition fade:</div>
+            <p>
+                You may want to use <code>'page'</code> or <code>'pageBack'</code> style when you want to animate
+                content as page transition. Example usage would be in a dialog, when showing onboarding screens or for
+                steps.
+            </p>
+            <hr />
+            <div className='padding-20 overflow-hidden min-height-250'>
+                <Fade
+                    initial={false}
+                    exitBeforeEnter
+                    animationStyle={animationStyle}
+                    onExitComplete={() => console.log('Animation completed')}
+                >
+                    {currentContent === 1 && <Content1 key='content1' />}
+                    {currentContent === 2 && <Content2 key='content2' />}
+                    {currentContent === 3 && <Content3 key='content3' />}
+                </Fade>
+            </div>
+            <div className='display-flex gap-15 justify-content-between'>
+                <Pager
+                    title='Previous'
+                    variant={Pager.VARIANT_COMPACT}
+                    disabled={currentContent === 1}
+                    alignRight
+                    onClick={handlePrev}
+                />
+                <Pager
+                    title='Next'
+                    variant={Pager.VARIANT_COMPACT}
+                    disabled={currentContent === 3}
+                    onClick={handleNext}
+                />
+            </div>
+        </div>
+    );
+};
+
+const Content1 = () => (
+    <div className='display-flex justify-content-center'>
+        <div className='margin-right-20 text-size-20'>
+            <span className='rioglyph rioglyph-truck text-size-200pct text-color-gray' />
+        </div>
+        <div className='flex-1-1 text-color-darker'>{dummyText}</div>
+    </div>
+);
+
+const Content2 = () => (
+    <div className='display-flex justify-content-center'>
+        <div className='margin-right-20 text-size-20'>
+            <span className='rioglyph rioglyph-bus text-size-200pct text-color-gray' />
+        </div>
+        <div className='flex-1-1'>
+            <form>
+                <div className='form-group'>
+                    <label className='display-flex flex-wrap justify-content-between'>
+                        Default input<span className='text-italic'>Some input info for the user</span>
+                    </label>
+                    <input type='text' className='form-control' defaultValue='rio' />
+                </div>
+                <div className='form-group'>
+                    <label className='display-flex flex-wrap justify-content-between'>Another input</label>
+                    <input type='text' className='form-control' defaultValue='rio' />
+                </div>
+            </form>
+            <div className='text-color-darker'>{dummyTextExtraShort}</div>
+        </div>
+    </div>
+);
+
+const Content3 = () => (
+    <div className='display-flex align-items-center justify-content-center min-height-200'>
+        <div className='margin-right-20 text-size-20'>
+            <span className='rioglyph rioglyph-ok-circle text-size-200pct text-color-success' />
+        </div>
+        <div className='text-color-darker'>You are done</div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-500">
+    <div class="h6">Page transition fade:</div>
+    <p>You may want to use <code>'page'</code> or <code>'pageBack'</code> style when you want to animate content as page transition. Example usage would be in a dialog, when showing onboarding screens or for steps.</p>
+    <hr>
+    <div class="padding-20 overflow-hidden min-height-250">
+        <div style="opacity: 1; transform: none;">
+            <div class="display-flex justify-content-center">
+                <div class="margin-right-20 text-size-20">
+                    <span class="rioglyph rioglyph-truck text-size-200pct text-color-gray">
+                    </span>
+                </div>
+                <div class="flex-1-1 text-color-darker">
+                    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.</div>
+            </div>
+        </div>
+    </div>
+    <div class="display-flex gap-15 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 |
+| --- | --- | --- | --- |
+| show | Boolean | true | Defines whether to show the content or not. |
+| duration | Number | 0.2 | Duration of the fade animation in seconds. |
+| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |
+| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |
+| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
+| onExitComplete | Function | () => {} | Fires when all exiting nodes have completed animating out. |
+| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
+| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.div> component. Use this for additional customizations. |
+
+### Example: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+
+This demonstrates how transitions can be used to create a more engaging user experience.
+Selecting an item from this list takes you to a second view that provides detailed information specific to the chosen item.
+This approach is particularly beneficial when dealing with limited space, such as narrow sidebars or dialog boxes with multiple steps. By utilizing transitions in these scenarios, you can effectively guide users through the process without cluttering the interface.
+
+Lorem ipsum
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+
+Dolor
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+
+Sit amet
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+
+Consetetur sadipscing
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+
+#### Summary
+
+This demonstrates how transitions can be used to create a more engaging user experience.
+Selecting an item from this list takes you to a second view that provides detailed information specific to the chosen item.
+This approach is particularly beneficial when dealing with limited space, such as narrow sidebars or dialog boxes with multiple steps. By utilizing transitions in these scenarios, you can effectively guide users through the process without cluttering the interface.
+
+Lorem ipsum
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+
+Dolor
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+
+Sit amet
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+
+Consetetur sadipscing
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Fade, { type FadeAnimationStyle } from '@rio-cloud/rio-uikit/Fade';
+import AppNavigationBar from '@rio-cloud/rio-uikit/AppNavigationBar';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+import { dummyTextExtraShort } from '../../../utils/data';
+
+type Details = {
+    title: string;
+};
+
+export default () => {
+    const [currentContent, setCurrentContent] = useState('list');
+    const [animationStyle, setAnimationStyle] = useState<FadeAnimationStyle>('page');
+
+    const [details, setDetails] = useState<Details>();
+
+    const handleNext = (currentDetails: Details) => {
+        setCurrentContent('details');
+        setDetails(currentDetails);
+        setAnimationStyle('page');
+    };
+
+    const handlePrev = () => {
+        setCurrentContent('list');
+        setAnimationStyle('pageBack');
+    };
+
+    return (
+        <div>
+            <div className='max-width-600'>
+                <p>This demonstrates how transitions can be used to create a more engaging user experience.</p>
+                <p>
+                    Selecting an item from this list takes you to a second view that provides detailed information
+                    specific to the chosen item.
+                </p>
+                <p>
+                    This approach is particularly beneficial when dealing with limited space, such as narrow sidebars or
+                    dialog boxes with multiple steps. By utilizing transitions in these scenarios, you can effectively
+                    guide users through the process without cluttering the interface.
+                </p>
+            </div>
+            <div className='max-width-500 min-height-500 border bg-white overflow-hidden'>
+                <div className=''>
+                    <Fade
+                        initial={false}
+                        exitBeforeEnter
+                        animationStyle={animationStyle}
+                        onExitComplete={() => console.log('Animation completed')}
+                        duration={0.25}
+                        motionProps={{ transition: { duration: 0.25, type: 'spring' } }}
+                    >
+                        {currentContent === 'list' && (
+                            <div className='padding-20'>
+                                <ListItem key='content1' onNext={handleNext} title='Lorem ipsum' />
+                                <Divider dividerColor='lighter' className='padding-y-10' />
+                                <ListItem key='content2' onNext={handleNext} title='Dolor' />
+                                <Divider dividerColor='lighter' className='padding-y-10' />
+                                <ListItem key='content3' onNext={handleNext} title='Sit amet' />
+                                <Divider dividerColor='lighter' className='padding-y-10' />
+                                <ListItem key='content4' onNext={handleNext} title='Consetetur sadipscing' />
+                                <Divider dividerColor='lighter' className='padding-y-10' />
+                            </div>
+                        )}
+                        {currentContent === 'details' && (
+                            <ItemDetails key='content2' title={details?.title} onBack={handlePrev} />
+                        )}
+                    </Fade>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const ListItem = ({ title, onNext }: { title: string; onNext: (details: Details) => void }) => (
+    <div
+        className='rounded hover-bg-lightest cursor-pointer padding-x-15 padding-y-10'
+        onClick={() => onNext({ title })}
+    >
+        <div className='display-flex align-items-center gap-10'>
+            <div className='flex-1-1'>
+                <div className='text-size-20 text-medium'>{title}</div>
+                <div className='text-color-dark'>
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+                </div>
+            </div>
+            <div className='text-color-dark'>
+                <span className='rioglyph rioglyph-chevron-right' />
+            </div>
+        </div>
+    </div>
+);
+
+const ItemDetails = ({ title = '', onBack }: { title: string | undefined; onBack: VoidFunction }) => (
+    <div>
+        <AppNavigationBar title={title} onNavigateBack={onBack} className='border border-bottom-only' />
+        <div className='display-flex justify-content-center padding-20 padding-top-25'>
+            <div className='margin-right-20 text-size-20'>
+                <span className='rioglyph rioglyph-bus text-size-200pct text-color-gray' />
+            </div>
+            <div className='flex-1-1'>
+                <form>
+                    <div className='form-group'>
+                        <label className='display-flex flex-wrap justify-content-between'>
+                            Default input<span className='text-italic'>Some input info for the user</span>
+                        </label>
+                        <input type='text' className='form-control' defaultValue='rio' />
+                    </div>
+                    <div className='form-group'>
+                        <label className='display-flex flex-wrap justify-content-between'>Another input</label>
+                        <input type='text' className='form-control' defaultValue='rio' />
+                    </div>
+                </form>
+                <div className='text-color-darker'>{dummyTextExtraShort}</div>
+            </div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="max-width-600">
+        <p>This demonstrates how transitions can be used to create a more engaging user experience.</p>
+        <p>Selecting an item from this list takes you to a second view that provides detailed information specific to the chosen item.</p>
+        <p>This approach is particularly beneficial when dealing with limited space, such as narrow sidebars or dialog boxes with multiple steps. By utilizing transitions in these scenarios, you can effectively guide users through the process without cluttering the interface.</p>
+    </div>
+    <div class="max-width-500 min-height-500 border bg-white overflow-hidden">
+        <div class="">
+            <div style="opacity: 1; transform: none;">
+                <div class="padding-20">
+                    <div class="rounded hover-bg-lightest cursor-pointer padding-x-15 padding-y-10">
+                        <div class="display-flex align-items-center gap-10">
+                            <div class="flex-1-1">
+                                <div class="text-size-20 text-medium">Lorem ipsum</div>
+                                <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
+                            </div>
+                            <div class="text-color-dark">
+                                <span class="rioglyph rioglyph-chevron-right">
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="Divider position-relative width-100pct padding-y-10" style="padding-top: 15px; padding-bottom: 15px;">
+                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
+                        </div>
+                    </div>
+                    <div class="rounded hover-bg-lightest cursor-pointer padding-x-15 padding-y-10">
+                        <div class="display-flex align-items-center gap-10">
+                            <div class="flex-1-1">
+                                <div class="text-size-20 text-medium">Dolor</div>
+                                <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
+                            </div>
+                            <div class="text-color-dark">
+                                <span class="rioglyph rioglyph-chevron-right">
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="Divider position-relative width-100pct padding-y-10" style="padding-top: 15px; padding-bottom: 15px;">
+                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
+                        </div>
+                    </div>
+                    <div class="rounded hover-bg-lightest cursor-pointer padding-x-15 padding-y-10">
+                        <div class="display-flex align-items-center gap-10">
+                            <div class="flex-1-1">
+                                <div class="text-size-20 text-medium">Sit amet</div>
+                                <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
+                            </div>
+                            <div class="text-color-dark">
+                                <span class="rioglyph rioglyph-chevron-right">
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="Divider position-relative width-100pct padding-y-10" style="padding-top: 15px; padding-bottom: 15px;">
+                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
+                        </div>
+                    </div>
+                    <div class="rounded hover-bg-lightest cursor-pointer padding-x-15 padding-y-10">
+                        <div class="display-flex align-items-center gap-10">
+                            <div class="flex-1-1">
+                                <div class="text-size-20 text-medium">Consetetur sadipscing</div>
+                                <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
+                            </div>
+                            <div class="text-color-dark">
+                                <span class="rioglyph rioglyph-chevron-right">
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="Divider position-relative width-100pct padding-y-10" style="padding-top: 15px; padding-bottom: 15px;">
+                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | Boolean | true | Defines whether to show the content or not. |
+| duration | Number | 0.2 | Duration of the fade animation in seconds. |
+| initial | Boolean | false | Defines whether or not the animation is triggered initially when showing the content. |
+| animationStyle | String | fade | Defines the desired animation style. Possible values are: fade tabs page pageBackfromLeft fromRight fromTop fromBottom |
+| exitBeforeEnter | Boolean | false | If set to true, only one component will be rendered at a time. The exiting component will finish its exit animation before the entering component is rendered. |
+| onExitComplete | Function | () => {} | Fires when all exiting nodes have completed animating out. |
+| animatePresenceProps | Object | — | Additional custom props for the underlying Framer motion AnimatePresence component. Use this for additional customizations. |
+| motionProps | Object | — | Additional custom props for the underlying Framer motion <motion.div> component. Use this for additional customizations. |