@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,87 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:46.757Z",
+    "source": "https://uikit.developers.rio.cloud/#components/activity",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/activity",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "b5b1a1375c8f26a53370e1d61c2c7599b764e70ec8cb8f5c13f5333b50327ce9"
+  },
+  "title": "Activity",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Activity",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><label>Small size:</label><div class=\"display-flex flex-wrap gap-5 margin-bottom-25\"><div class=\"activity activity-available activity-sm\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-available\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-driving activity-sm\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-driving\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-resting activity-sm\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-resting\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-working activity-sm\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-working\"></span></span><span class=\"activity-text\">0:24 h</span></div><span class=\"badge padding-y-4 badge-danger\">1</span><span class=\"badge padding-y-4 badge-warning\">3</span></div><label>Default size:</label><div class=\"display-flex flex-wrap gap-5 margin-bottom-25\"><div class=\"activity activity-available\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-available\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-driving\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-driving\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-resting\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-resting\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-working\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-working\"></span></span><span class=\"activity-text\">0:24 h</span></div></div><label>Default size without duration:</label><div class=\"display-flex flex-wrap gap-5 margin-bottom-25\"><div class=\"activity activity-available\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-available\"></span></span></div><div class=\"activity activity-driving\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-driving\"></span></span></div><div class=\"activity activity-resting\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-resting\"></span></span></div><div class=\"activity activity-working\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-working\"></span></span></div></div><label>Outdated activities:</label><div class=\"display-flex flex-wrap gap-5 margin-bottom-25\"><div class=\"activity activity-available opacity-50\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-available\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-driving opacity-50\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-driving\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-resting opacity-50\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-resting\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-working opacity-50\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-working\"></span></span><span class=\"activity-text\">0:24 h</span></div></div><label>Large size:</label><div class=\"display-flex flex-wrap gap-5 margin-bottom-25\"><div class=\"activity activity-available activity-lg\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-available\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-driving activity-lg\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-driving\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-resting activity-lg\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-resting\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-working activity-lg\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-working\"></span></span><span class=\"activity-text\">0:24 h</span></div></div><label>Extra large size:</label><div class=\"display-flex flex-wrap gap-5 margin-bottom-25\"><div class=\"activity activity-available activity-xl\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-available\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-driving activity-xl\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-driving\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-resting activity-xl\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-resting\"></span></span><span class=\"activity-text\">0:24 h</span></div><div class=\"activity activity-working activity-xl\"><span class=\"activity-icon\"><span class=\"rioglyph rioglyph-status-working\"></span></span><span class=\"activity-text\">0:24 h</span></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\n\nimport Activity from '@rio-cloud/rio-uikit/Activity';\n\nconst duration = '0:24 h';\n\nexport default () => (\n    <div>\n        <label>Small size:</label>\n        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>\n            <Activity activity={Activity.AVAILABLE} duration={duration} bsSize={Activity.SIZE_SM} />\n            <Activity activity={Activity.DRIVING} duration={duration} bsSize={Activity.SIZE_SM} />\n            <Activity activity={Activity.RESTING} duration={duration} bsSize={Activity.SIZE_SM} />\n            <Activity activity={Activity.WORKING} duration={duration} bsSize={Activity.SIZE_SM} />\n            <span className='badge padding-y-4 badge-danger'>1</span>\n            <span className='badge padding-y-4 badge-warning'>3</span>\n        </div>\n\n        <label>Default size:</label>\n        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>\n            <Activity activity={Activity.AVAILABLE} duration={duration} />\n            <Activity activity={Activity.DRIVING} duration={duration} />\n            <Activity activity={Activity.RESTING} duration={duration} />\n            <Activity activity={Activity.WORKING} duration={duration} />\n        </div>\n\n        <label>Default size without duration:</label>\n        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>\n            <Activity activity={Activity.AVAILABLE} />\n            <Activity activity={Activity.DRIVING} />\n            <Activity activity={Activity.RESTING} />\n            <Activity activity={Activity.WORKING} />\n        </div>\n\n        <label>Outdated activities:</label>\n        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>\n            <Activity activity={Activity.AVAILABLE} duration={duration} isOutdated />\n            <Activity activity={Activity.DRIVING} duration={duration} isOutdated />\n            <Activity activity={Activity.RESTING} duration={duration} isOutdated />\n            <Activity activity={Activity.WORKING} duration={duration} isOutdated />\n        </div>\n\n        <label>Large size:</label>\n        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>\n            <Activity activity={Activity.AVAILABLE} duration={duration} bsSize={Activity.SIZE_LG} />\n            <Activity activity={Activity.DRIVING} duration={duration} bsSize={Activity.SIZE_LG} />\n            <Activity activity={Activity.RESTING} duration={duration} bsSize={Activity.SIZE_LG} />\n            <Activity activity={Activity.WORKING} duration={duration} bsSize={Activity.SIZE_LG} />\n        </div>\n\n        <label>Extra large size:</label>\n        <div className='display-flex flex-wrap gap-5 margin-bottom-25'>\n            <Activity activity={Activity.AVAILABLE} duration={duration} bsSize={Activity.SIZE_XL} />\n            <Activity activity={Activity.DRIVING} duration={duration} bsSize={Activity.SIZE_XL} />\n            <Activity activity={Activity.RESTING} duration={duration} bsSize={Activity.SIZE_XL} />\n            <Activity activity={Activity.WORKING} duration={duration} bsSize={Activity.SIZE_XL} />\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>Small size:</label>\n    <div class=\"display-flex flex-wrap gap-5 margin-bottom-25\">\n        <div class=\"activity activity-available activity-sm\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-available\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-driving activity-sm\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-driving\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-resting activity-sm\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-resting\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-working activity-sm\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-working\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <span class=\"badge padding-y-4 badge-danger\">1</span>\n        <span class=\"badge padding-y-4 badge-warning\">3</span>\n    </div>\n    <label>Default size:</label>\n    <div class=\"display-flex flex-wrap gap-5 margin-bottom-25\">\n        <div class=\"activity activity-available\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-available\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-driving\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-driving\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-resting\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-resting\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-working\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-working\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n    </div>\n    <label>Default size without duration:</label>\n    <div class=\"display-flex flex-wrap gap-5 margin-bottom-25\">\n        <div class=\"activity activity-available\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-available\">\n                </span>\n            </span>\n        </div>\n        <div class=\"activity activity-driving\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-driving\">\n                </span>\n            </span>\n        </div>\n        <div class=\"activity activity-resting\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-resting\">\n                </span>\n            </span>\n        </div>\n        <div class=\"activity activity-working\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-working\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <label>Outdated activities:</label>\n    <div class=\"display-flex flex-wrap gap-5 margin-bottom-25\">\n        <div class=\"activity activity-available opacity-50\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-available\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-driving opacity-50\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-driving\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-resting opacity-50\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-resting\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-working opacity-50\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-working\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n    </div>\n    <label>Large size:</label>\n    <div class=\"display-flex flex-wrap gap-5 margin-bottom-25\">\n        <div class=\"activity activity-available activity-lg\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-available\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-driving activity-lg\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-driving\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-resting activity-lg\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-resting\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-working activity-lg\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-working\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n    </div>\n    <label>Extra large size:</label>\n    <div class=\"display-flex flex-wrap gap-5 margin-bottom-25\">\n        <div class=\"activity activity-available activity-xl\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-available\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-driving activity-xl\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-driving\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-resting activity-xl\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-resting\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n        <div class=\"activity activity-working activity-xl\">\n            <span class=\"activity-icon\">\n                <span class=\"rioglyph rioglyph-status-working\">\n                </span>\n            </span>\n            <span class=\"activity-text\">0:24 h</span>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "activity",
+                      "type": "String",
+                      "default": "",
+                      "description": "Defines the type of activity. Possible values are: Activity.AVAILABLE, Activity.DRIVING, Activity.RESTING or Activity.WORKING."
+                    },
+                    {
+                      "name": "duration",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The actual duration value to be shown."
+                    },
+                    {
+                      "name": "isOutdated",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Indicated whether the activity is outdated."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "",
+                      "description": "Define how large the component should be rendered. Possible values are: Activity.SIZE_SM, Activity.SIZE_LG or Activity.SIZE_XL."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for when the component is clicked."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,99 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:32.241Z",
+    "source": "https://uikit.developers.rio.cloud/#components/animatedNumber",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/animatednumber",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "b4b2ab874685109b180f4bc11c4a86d4fe1686360e07b3ea9dbc9eccab0da001"
+  },
+  "title": "AnimatedNumber",
+  "lead": null,
+  "content": [
+    {
+      "heading": "AnimatedNumber",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><label>Default AnimatedNumber</label><div class=\"width-60 margin-bottom-20 text-right text-size-h1 text-color-info\"><span class=\"\">0</span></div><label>AnimatedNumber with prefix and unit</label><div class=\"width-100 margin-bottom-20 text-right text-size-h1 text-color-primary\"><span class=\"\">+0%</span></div><label>AnimatedNumber as simple timer</label><div class=\"text-color-danger\"><span class=\"margin-right-3\">Hurry up! Only</span><span class=\"\">60s</span><span class=\"margin-left-3\">remaining.</span></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\n\nimport AnimatedNumber from '@rio-cloud/rio-uikit/AnimatedNumber';\n\nexport default () => (\n    <div>\n        <label>Default AnimatedNumber</label>\n        <div className='width-60 margin-bottom-20 text-right text-size-h1 text-color-info'>\n            <AnimatedNumber start={0} end={100} />\n        </div>\n\n        <label>AnimatedNumber with prefix and unit</label>\n        <div className='width-100 margin-bottom-20 text-right text-size-h1 text-color-primary'>\n            <AnimatedNumber start={0} end={100} unit='%' prefix='+' speed={50} />\n        </div>\n\n        <label>AnimatedNumber as simple timer</label>\n        <div className='text-color-danger'>\n            <span className='margin-right-3'>Hurry up! Only</span>\n            <AnimatedNumber\n                start={60}\n                end={0}\n                decreasing\n                unit='s'\n                speed={1000}\n                onEnd={() => console.log('Time is up')}\n            />\n            <span className='margin-left-3'>remaining.</span>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>Default AnimatedNumber</label>\n    <div class=\"width-60 margin-bottom-20 text-right text-size-h1 text-color-info\">\n        <span class=\"\">23</span>\n    </div>\n    <label>AnimatedNumber with prefix and unit</label>\n    <div class=\"width-100 margin-bottom-20 text-right text-size-h1 text-color-primary\">\n        <span class=\"\">+5%</span>\n    </div>\n    <label>AnimatedNumber as simple timer</label>\n    <div class=\"text-color-danger\">\n        <span class=\"margin-right-3\">Hurry up! Only</span>\n        <span class=\"\">60s</span>\n        <span class=\"margin-left-3\">remaining.</span>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "start",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The start value."
+                    },
+                    {
+                      "name": "end",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The end value."
+                    },
+                    {
+                      "name": "prefix",
+                      "type": "String",
+                      "default": "",
+                      "description": "A prefix to be added to the final string."
+                    },
+                    {
+                      "name": "unit",
+                      "type": "String",
+                      "default": "",
+                      "description": "A unit suffix to be added to the final string."
+                    },
+                    {
+                      "name": "speed",
+                      "type": "Number",
+                      "default": "10",
+                      "description": "The speed in milliseconds to count up or down."
+                    },
+                    {
+                      "name": "decreasing",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables to count backwards."
+                    },
+                    {
+                      "name": "onEnd",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function to be invoked when the end value is reached."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapping element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,87 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:33.340Z",
+    "source": "https://uikit.developers.rio.cloud/#components/animations",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/animations",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "bd99dbe57b8592fa85354f1d2a37c06c0e84130a5de435e73bd24cf6e3824d78"
+  },
+  "title": "Animations",
+  "lead": "The UIKIT uses the famous animation library Framer Motion. To allow services to use Framer Motion without adding it as a depemdency to their project, the UIKIT re-exports all framer-motioncomponents.",
+  "content": [
+    {
+      "heading": "Animations",
+      "body": "The official documentation can be found here www.framer.com/motion",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div style=\"opacity: 0.999644;\"><div class=\"margin-10\"><label>Some Data</label><div>\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>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { motion } from '@rio-cloud/rio-uikit/framer-motion';\n\nimport { dummyText } from '../../../utils/data';\n\nexport default () => {\n    return (\n        <motion.div\n            animate={{ opacity: [1, 0, 1] }}\n            transition={{\n                // Keyframes that match to the keyframes of the opacity settings above\n                times: [0, 0.5, 1],\n                repeat: Infinity,\n                ease: 'easeInOut',\n                duration: 2.5,\n                repeatDelay: 2,\n            }}\n        >\n            <div className='margin-10'>\n                <label>Some Data</label>\n                <div>{dummyText}</div>\n            </div>\n        </motion.div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div style=\"opacity: 0.857835;\">\n    <div class=\"margin-10\">\n        <label>Some Data</label>\n        <div>\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>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex gap-20 text-color-darker\" style=\"opacity: 0.0555556;\"><div style=\"opacity: 0.0555556;\"><svg width=\"50\" height=\"50\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\" stroke-dashoffset=\"0px\" stroke-dasharray=\"0px 37.798988342285156px\"></path></svg></div><div style=\"opacity: 0;\"><svg width=\"50\" height=\"50\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" stroke-dashoffset=\"0px\" stroke-dasharray=\"0px 19.79899024963379px\"></path></svg></div><div style=\"opacity: 0;\"><svg width=\"50\" height=\"50\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" stroke-dashoffset=\"0px\" stroke-dasharray=\"0px 63.5682487487793px\"></path></svg></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { AnimatePresence, motion } from '@rio-cloud/rio-uikit/framer-motion';\n\nconst icons = {\n    check: {\n        d: 'M5 13l4 4L19 7',\n    },\n    arrowRight: {\n        d: 'M14 5l7 7m0 0l-7 7m7-7H3',\n    },\n    externalLink: {\n        d: 'M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14',\n    },\n};\n\nconst AnimatedIcon = props => {\n    const { icon = 'check', delay = 0.2, ...remainingProps } = props;\n    return (\n        <svg\n            {...remainingProps}\n            className='w-6 h-6'\n            fill='none'\n            stroke='currentColor'\n            viewBox='0 0 24 24'\n            xmlns='http://www.w3.org/2000/svg'\n        >\n            <motion.path\n                key={icon}\n                initial={{ pathLength: 0 }}\n                animate={{ pathLength: 1 }}\n                transition={{ duration: 0.5, delay, type: 'tween', ease: 'easeOut' }}\n                strokeLinecap='round'\n                strokeLinejoin='round'\n                strokeWidth='2'\n                {...icons[icon]}\n            />\n        </svg>\n    );\n};\n\nconst container = {\n    hidden: { opacity: 0 },\n    show: {\n        opacity: 1,\n        transition: {\n            staggerChildren: 0.2,\n        },\n    },\n};\n\nconst item = {\n    hidden: { opacity: 0 },\n    show: { opacity: 1 },\n};\n\nexport default () => (\n    <>\n        <motion.div\n            variants={container}\n            initial='hidden'\n            animate='show'\n            className='display-flex gap-20 text-color-darker'\n        >\n            <motion.div key='1' variants={item}>\n                <AnimatedIcon key='arrowRight' delay={0.2} icon='arrowRight' width='50' height='50' />\n            </motion.div>\n            <motion.div key='2' variants={item}>\n                <AnimatedIcon key='check' delay={0.4} icon='check' width='50' height='50' />\n            </motion.div>\n            <motion.div key='3' variants={item}>\n                <AnimatedIcon key='externalLink' delay={0.8} icon='externalLink' width='50' height='50' />\n            </motion.div>\n        </motion.div>\n    </>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex gap-20 text-color-darker\" style=\"opacity: 1;\">\n    <div style=\"opacity: 1;\">\n        <svg width=\"50\" height=\"50\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\" stroke-dashoffset=\"0px\" stroke-dasharray=\"37.798988342285156px 37.798988342285156px\">\n            </path>\n        </svg>\n    </div>\n    <div style=\"opacity: 1;\">\n        <svg width=\"50\" height=\"50\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" stroke-dashoffset=\"0px\" stroke-dasharray=\"18.389653773926696px 19.79899024963379px\">\n            </path>\n        </svg>\n    </div>\n    <div style=\"opacity: 1;\">\n        <svg width=\"50\" height=\"50\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" stroke-dashoffset=\"0px\" stroke-dasharray=\"0px 63.5682487487793px\">\n            </path>\n        </svg>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Add Item</button><div class=\"border rounded bg-white padding-15 margin-top-25 overflow-hidden\"><div style=\"height: 3.2796px;\"><div style=\"opacity: 0.0555556;\"><div class=\"display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only\"><div>Item T8IQ5N3PGI</div><button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-remove text-size-14\"></span></button></div></div></div><div style=\"height: 3.2796px;\"><div style=\"opacity: 0.0555556;\"><div class=\"display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only\"><div>Item QUEP70WQ4J</div><button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-remove text-size-14\"></span></button></div></div></div><div style=\"height: 3.2796px;\"><div style=\"opacity: 0.0555556;\"><div class=\"display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only\"><div>Item U3LH1YBJI2</div><button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-remove text-size-14\"></span></button></div></div></div></div><div class=\"margin-top-15\">\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>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport { AnimatePresence, motion } from '@rio-cloud/rio-uikit/framer-motion';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nimport { dummyText } from '../../../utils/data';\n\nconst getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);\nconst generateItems = length => Array.from({ length }, () => getRandomString());\n\nexport default () => {\n    const [items, setItems] = useState([...generateItems(3)]);\n\n    const handleAddItem = () => setItems(items => [...items, getRandomString()]);\n    const handleRemoveItem = item => setItems(items => items.filter(i => i !== item));\n\n    return (\n        <div>\n            <Button onClick={handleAddItem}>Add Item</Button>\n            <div className='border rounded bg-white padding-15 margin-top-25 overflow-hidden'>\n                <AnimatePresence>\n                    {items.map(item => (\n                        <motion.div\n                            key={item}\n                            initial={{ height: 0 }}\n                            animate={{ height: 'auto' }}\n                            exit={{ height: 0 }}\n                        >\n                            <motion.div\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                transition={{\n                                    opacity: { duration: 0.1 },\n                                }}\n                            >\n                                <div className='display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only'>\n                                    <div>Item {item}</div>\n                                    <Button onClick={() => handleRemoveItem(item)} bsStyle='muted' bsSize='sm' iconOnly>\n                                        <span className='rioglyph rioglyph-remove text-size-14' />\n                                    </Button>\n                                </div>\n                            </motion.div>\n                        </motion.div>\n                    ))}\n                </AnimatePresence>\n            </div>\n            <div className='margin-top-15'>{dummyText}</div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Add Item</button>\n    <div class=\"border rounded bg-white padding-15 margin-top-25 overflow-hidden\">\n        <div style=\"height: auto;\">\n            <div style=\"opacity: 1;\">\n                <div class=\"display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only\">\n                    <div>Item T8IQ5N3PGI</div>\n                    <button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-remove text-size-14\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n        <div style=\"height: auto;\">\n            <div style=\"opacity: 1;\">\n                <div class=\"display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only\">\n                    <div>Item QUEP70WQ4J</div>\n                    <button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-remove text-size-14\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n        <div style=\"height: auto;\">\n            <div style=\"opacity: 1;\">\n                <div class=\"display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only\">\n                    <div>Item U3LH1YBJI2</div>\n                    <button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-remove text-size-14\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"margin-top-15\">\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>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 4",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Load Items</button><ul class=\"list-group margin-top-25 width-300\"><li style=\"opacity: 1; transform: none;\"><label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\"><input type=\"checkbox\" class=\"list-group-item margin-bottom-10\"><span class=\"checkbox-text\"><span><div class=\"display-flex gap-5\"><span>Item TZ5V6W1OYD</span></div></span></span></label></li><li style=\"opacity: 1; transform: none;\"><label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\"><input type=\"checkbox\" class=\"list-group-item margin-bottom-10\"><span class=\"checkbox-text\"><span><div class=\"display-flex gap-5\"><span>Item 9KUDIUKG57</span></div></span></span></label></li><li style=\"opacity: 1; transform: none;\"><label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\"><input type=\"checkbox\" class=\"list-group-item margin-bottom-10\"><span class=\"checkbox-text\"><span><div class=\"display-flex gap-5\"><span>Item XN40M4M8Y8</span></div></span></span></label></li><li style=\"opacity: 1; transform: none;\"><label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\"><input type=\"checkbox\" class=\"list-group-item margin-bottom-10\"><span class=\"checkbox-text\"><span><div class=\"display-flex gap-5\"><span>Item IA501W1S8L</span></div></span></span></label></li><li style=\"opacity: 1; transform: none;\"><label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\"><input type=\"checkbox\" class=\"list-group-item margin-bottom-10\"><span class=\"checkbox-text\"><span><div class=\"display-flex gap-5\"><span>Item 9GBYWQUU6R</span></div></span></span></label></li><li style=\"opacity: 1; transform: none;\"><label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\"><input type=\"checkbox\" class=\"list-group-item margin-bottom-10\"><span class=\"checkbox-text\"><span><div class=\"display-flex gap-5\"><span>Item 9TP2B7VZUJ</span></div></span></span></label></li></ul></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport { AnimatePresence, motion } from '@rio-cloud/rio-uikit/framer-motion';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Checkbox from '@rio-cloud/rio-uikit/Checkbox';\n\nconst getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);\nconst generateItems = () => Array.from({ length: 6 }, () => getRandomString());\n\nexport default () => {\n    const [items, setItems] = useState([...generateItems()]);\n\n    const handleGenerateItem = () => setItems(generateItems());\n\n    return (\n        <div>\n            <Button onClick={handleGenerateItem}>Load Items</Button>\n            <ul className='list-group margin-top-25 width-300'>\n                <AnimatePresence initial={false}>\n                    {items.map((item, index) => (\n                        <motion.li\n                            key={item}\n                            variants={{\n                                hidden: { opacity: 0, y: -50 },\n                                visible: index => ({\n                                    opacity: 1,\n                                    y: 0,\n                                    transition: {\n                                        delay: index * 0.1,\n                                    },\n                                }),\n                            }}\n                            initial='hidden'\n                            animate='visible'\n                            custom={index}\n                        >\n                            <Checkbox className='list-group-item margin-bottom-10'>\n                                <div className='display-flex gap-5'>\n                                    <span>Item {item}</span>\n                                </div>\n                            </Checkbox>\n                        </motion.li>\n                    ))}\n                </AnimatePresence>\n            </ul>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Load Items</button>\n    <ul class=\"list-group margin-top-25 width-300\">\n        <li style=\"opacity: 1; transform: none;\">\n            <label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\">\n                <input type=\"checkbox\" class=\"list-group-item margin-bottom-10\">\n                <span class=\"checkbox-text\">\n                    <span>\n                        <div class=\"display-flex gap-5\">\n                            <span>Item TZ5V6W1OYD</span>\n                        </div>\n                    </span>\n                </span>\n            </label>\n        </li>\n        <li style=\"opacity: 1; transform: none;\">\n            <label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\">\n                <input type=\"checkbox\" class=\"list-group-item margin-bottom-10\">\n                <span class=\"checkbox-text\">\n                    <span>\n                        <div class=\"display-flex gap-5\">\n                            <span>Item 9KUDIUKG57</span>\n                        </div>\n                    </span>\n                </span>\n            </label>\n        </li>\n        <li style=\"opacity: 1; transform: none;\">\n            <label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\">\n                <input type=\"checkbox\" class=\"list-group-item margin-bottom-10\">\n                <span class=\"checkbox-text\">\n                    <span>\n                        <div class=\"display-flex gap-5\">\n                            <span>Item XN40M4M8Y8</span>\n                        </div>\n                    </span>\n                </span>\n            </label>\n        </li>\n        <li style=\"opacity: 1; transform: none;\">\n            <label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\">\n                <input type=\"checkbox\" class=\"list-group-item margin-bottom-10\">\n                <span class=\"checkbox-text\">\n                    <span>\n                        <div class=\"display-flex gap-5\">\n                            <span>Item IA501W1S8L</span>\n                        </div>\n                    </span>\n                </span>\n            </label>\n        </li>\n        <li style=\"opacity: 1; transform: none;\">\n            <label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\">\n                <input type=\"checkbox\" class=\"list-group-item margin-bottom-10\">\n                <span class=\"checkbox-text\">\n                    <span>\n                        <div class=\"display-flex gap-5\">\n                            <span>Item 9GBYWQUU6R</span>\n                        </div>\n                    </span>\n                </span>\n            </label>\n        </li>\n        <li style=\"opacity: 1; transform: none;\">\n            <label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\">\n                <input type=\"checkbox\" class=\"list-group-item margin-bottom-10\">\n                <span class=\"checkbox-text\">\n                    <span>\n                        <div class=\"display-flex gap-5\">\n                            <span>Item 9TP2B7VZUJ</span>\n                        </div>\n                    </span>\n                </span>\n            </label>\n        </li>\n    </ul>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}