@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/fade.json

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

package/data/pages/Components/components/fadeexpander.json

@@ -0,0 +1,75 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:20.223Z",
+    "source": "https://uikit.developers.rio.cloud/#components/fadeExpander",
+    "category": "Components",
+    "section": "Show/Hide",
+    "slug": "components/fadeexpander",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "6f976d02a04f62ac948299bb657210493a6e4331d3b3b4f910f7a3ee2cb570c8"
+  },
+  "title": "FadeExpander",
+  "lead": "The FadeExpander component fades in and expands when the content.",
+  "content": [
+    {
+      "heading": "FadeExpander",
+      "body": "",
+      "examples": [
+        {
+          "caption": "",
+          "rendered_html": "<div class=\"playground-content  bg-checkerboard padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-500 border rounded display-flex flex-column shadow-default bg-white\"><div class=\"padding-15 text-medium shadow-muted-down z-index-10\">Lorem ipsum dolor sit amet</div><div class=\"\"><div class=\"bg-lightest border border-top-only border-color-lighter padding-x-15 padding-y-20\"><div class=\"form-group\"><div class=\"input-group shadow-subtle\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-start\"></span></span><input class=\"form-control\" placeholder=\"Add starting point\"></div></div><div class=\"form-group margin-0\"><div class=\"input-group shadow-subtle\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-finish\"></span></span><input class=\"form-control\" placeholder=\"Add destination\"></div></div></div><div class=\"padding-15 border border-top-only border-color-lighter\"><div class=\"display-flex justify-content-between\"><div class=\"text-color-darker\">Enable lorem ipsum dolor sit amet</div><div class=\"text-color-dark\"><div class=\"uikit-switch\"><label class=\"switch-label\"><input type=\"checkbox\" class=\"switch-input\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\"><div class=\"switch-handle\"></div></div></label></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useEffect, useRef, useState } from 'react';\n\nimport FadeExpander from '@rio-cloud/rio-uikit/FadeExpander';\nimport Switch from '@rio-cloud/rio-uikit/Switch';\nimport { dummyText } from '../../../utils/data';\n\nexport default () => {\n    const [showContent1, setShowContent1] = useState(false);\n    const [showContent2, setShowContent2] = useState(false);\n\n    const [isSwitch1Toggled, setIsSwitch1Toggled] = useState(false);\n\n    const input1Ref = useRef<HTMLInputElement>(null);\n    const input2Ref = useRef<HTMLInputElement>(null);\n\n    const locationBlock = (\n        <div className='position-relative bg-white border border-top-none rounded rounded-bottom margin-top-0 padding-x-10 padding-y-15'>\n            <div className='display-flex cursor-pointer align-items-center gap-15 padding-x-5'>\n                <div className='display-grid place-items-center height-40 width-40 rounded-circle bg-primary text-color-white'>\n                    <span className='rioglyph rioglyph-location-arrow text-size-20' />\n                </div>\n                <div className=''>\n                    <div className='text-medium text-size-16 text-color-primary'>Allow location access</div>\n                    <div className='text-size-12 text-color-darker'>Based on sources like your browser</div>\n                </div>\n            </div>\n        </div>\n    );\n\n    return (\n        <div className='max-width-500 border rounded display-flex flex-column shadow-default bg-white'>\n            <div className='padding-15 text-medium shadow-muted-down z-index-10'>Lorem ipsum dolor sit amet</div>\n            <div className=''>\n                <div className='bg-lightest border border-top-only border-color-lighter padding-x-15 padding-y-20'>\n                    <div className='form-group'>\n                        <div className='input-group shadow-subtle'>\n                            <span className='input-group-addon'>\n                                <span className='rioglyph rioglyph-start' />\n                            </span>\n                            <input\n                                className='form-control'\n                                placeholder='Add starting point'\n                                ref={input1Ref}\n                                onFocus={() => setShowContent1(true)}\n                                onBlur={() => setShowContent1(false)}\n                            />\n                        </div>\n                        <FadeExpander show={showContent1}>{locationBlock}</FadeExpander>\n                    </div>\n                    <div className='form-group margin-0'>\n                        <div className='input-group shadow-subtle'>\n                            <span className='input-group-addon'>\n                                <span className='rioglyph rioglyph-finish' />\n                            </span>\n                            <input\n                                className='form-control'\n                                placeholder='Add destination'\n                                ref={input2Ref}\n                                onFocus={() => setShowContent2(true)}\n                                onBlur={() => setShowContent2(false)}\n                            />\n                        </div>\n                        <FadeExpander show={showContent2}>{locationBlock}</FadeExpander>\n                    </div>\n                </div>\n                <div className='padding-15 border border-top-only border-color-lighter'>\n                    <div className='display-flex justify-content-between'>\n                        <div className='text-color-darker'>Enable lorem ipsum dolor sit amet</div>\n                        <div className='text-color-dark'>\n                            <Switch\n                                onChange={() => setIsSwitch1Toggled(!isSwitch1Toggled)}\n                                checked={isSwitch1Toggled}\n                            />\n                        </div>\n                    </div>\n                    <FadeExpander show={isSwitch1Toggled} className='margin-top-15'>\n                        <div className='bg-lightest padding-15 rounded rounded-large text-color-dark'>\n                            <div className='text-size-h5 text-color-darker margin-bottom-10'>Settings</div>\n                            <div className='display-grid grid-cols-2 gap-10'>\n                                <div className='form-group margin-0'>\n                                    <label className='form-label' htmlFor='subgrid-username'>\n                                        Lorem ipsum\n                                    </label>\n                                    <input id='subgrid-username' type='text' className='form-control' />\n                                </div>\n                                <div className='form-group margin-0'>\n                                    <label className='form-label' htmlFor='subgrid-password'>\n                                        Dolor sit amet\n                                    </label>\n                                    <input id='subgrid-password' type='password' className='form-control' />\n                                </div>\n                            </div>\n                        </div>\n                    </FadeExpander>\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-500 border rounded display-flex flex-column shadow-default bg-white\">\n    <div class=\"padding-15 text-medium shadow-muted-down z-index-10\">Lorem ipsum dolor sit amet</div>\n    <div class=\"\">\n        <div class=\"bg-lightest border border-top-only border-color-lighter padding-x-15 padding-y-20\">\n            <div class=\"form-group\">\n                <div class=\"input-group shadow-subtle\">\n                    <span class=\"input-group-addon\">\n                        <span class=\"rioglyph rioglyph-start\">\n                        </span>\n                    </span>\n                    <input class=\"form-control\" placeholder=\"Add starting point\">\n                </div>\n            </div>\n            <div class=\"form-group margin-0\">\n                <div class=\"input-group shadow-subtle\">\n                    <span class=\"input-group-addon\">\n                        <span class=\"rioglyph rioglyph-finish\">\n                        </span>\n                    </span>\n                    <input class=\"form-control\" placeholder=\"Add destination\">\n                </div>\n            </div>\n        </div>\n        <div class=\"padding-15 border border-top-only border-color-lighter\">\n            <div class=\"display-flex justify-content-between\">\n                <div class=\"text-color-darker\">Enable lorem ipsum dolor sit amet</div>\n                <div class=\"text-color-dark\">\n                    <div class=\"uikit-switch\">\n                        <label class=\"switch-label\">\n                            <input type=\"checkbox\" class=\"switch-input\">\n                            <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\">\n                                <div class=\"switch-handle\">\n                                </div>\n                            </div>\n                        </label>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines if the content is shown or not."
+                    },
+                    {
+                      "name": "delay",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Defines the time the animation should wait until it starts."
+                    },
+                    {
+                      "name": "duration",
+                      "type": "Number",
+                      "default": "0.2",
+                      "description": "Defines the duration in seconds of the expand animation."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes names added to the motion div wrapper."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}