@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,45 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:01.286Z",
+    "source": "https://uikit.developers.rio.cloud/#components/timeline",
+    "category": "Components",
+    "section": "CSS Only",
+    "slug": "components/timeline",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "a0b70042fdef5717bea915f8a13956969062140533bd41230855407214945e7f"
+  },
+  "title": "Timeline",
+  "lead": "The timeline component is a pure CSS component.",
+  "content": [
+    {
+      "heading": "Timeline",
+      "body": "",
+      "examples": [
+        {
+          "caption": "leeroy marked an answer 4m",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div><div class=\"h2 margin-bottom-25\">CSS Timeline</div><div class=\"display-grid grid-cols-1-xs grid-cols-2-sm grid-cols-4-lg gap-25\"><div class=\"padding-x-10\"><div class=\"h4 margin-bottom-25\">Default</div><div class=\"timeline\"><div class=\"timeline-element\"><div class=\"timeline-date\"><div class=\"text-medium\">01-2024</div></div><div class=\"timeline-content\">\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.</div></div><div class=\"timeline-element\"><div class=\"timeline-date\"><div class=\"text-medium\">02-2024</div></div><div class=\"timeline-content\">\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.</div></div><div class=\"timeline-element\"><div class=\"timeline-date\"><div class=\"text-medium\">03-2024</div></div><div class=\"timeline-content\">\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.</div></div></div></div><div class=\"padding-x-10\"><div class=\"h4 margin-bottom-25\">With UI elements</div><div class=\"timeline\"><div class=\"timeline-element margin-bottom-0\"><div class=\"timeline-date timeline-date-color-primary margin-right-10\"><span class=\"badge badge-primary padding-5\"><span class=\"rioglyph rioglyph-map-marker\"></span></span></div><div class=\"timeline-content margin-bottom-20\"><div class=\"text-medium margin-bottom-5\">Start today</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.</div></div><div class=\"timeline-element margin-bottom-0\"><div class=\"timeline-date timeline-date-color-primary margin-right-10\"><span class=\"badge badge-primary text-medium\">2</span></div><div class=\"timeline-content margin-bottom-20\"><div class=\"text-medium margin-bottom-5\">02/2025</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.</div></div><div class=\"timeline-element margin-bottom-0\"><div class=\"timeline-date timeline-date-thin timeline-date-dashed margin-right-10\"><div class=\"position-relative\"><div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\"><div class=\"spinner\"><div></div><div></div><div></div><div></div></div></div></div></div><div class=\"timeline-content margin-bottom-20\"><div class=\"text-medium margin-bottom-5\">Ongoing</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.</div></div><div class=\"timeline-element\"><div class=\"timeline-date margin-right-10\"><span class=\"badge badge-muted padding-5 text-medium\"><span class=\"rioglyph rioglyph-finish\"></span></span></div><div class=\"timeline-content\"><div class=\"text-medium padding-top-2\">Finish</div></div></div></div></div><div class=\"padding-x-10\"><div class=\"h4 margin-bottom-25\">Events</div><div class=\"timeline\"><div class=\"timeline-element margin-bottom-0\"><div class=\"timeline-date timeline-date-thin margin-right-10\"><span class=\"badge badge-success padding-5 scale-80 margin-left-1\"><span class=\"rioglyph rioglyph-ok\"></span></span></div><div class=\"timeline-content margin-bottom-20 text-color-dark\"><b class=\"text-medium text-color-darkest\">leeroy</b> marked an <b class=\"text-medium text-color-darkest\">answer</b> 4m</div></div><div class=\"timeline-element margin-bottom-0\"><div class=\"timeline-date timeline-date-thin margin-right-10\"><span class=\"badge badge-muted padding-5 scale-80 margin-left-1\"><span class=\"rioglyph rioglyph-ok\"></span></span></div><div class=\"timeline-content margin-bottom-20 text-color-dark\"><b class=\"text-medium text-color-darkest\">leeroy</b> unmarked an <b class=\"text-medium text-color-darkest\">answer</b> 4m</div></div><div class=\"timeline-element margin-bottom-0\"><div class=\"timeline-date timeline-date-thin margin-right-10\"><span class=\"badge badge-success padding-5 scale-80 margin-left-1\"><span class=\"rioglyph rioglyph-ok\"></span></span></div><div class=\"timeline-content margin-bottom-20 text-color-dark\"><b class=\"text-medium text-color-darkest\">leeroy</b> marked an <b class=\"text-medium text-color-darkest\">answer</b> 7m</div></div><div class=\"timeline-element margin-bottom--2\"><div class=\"timeline-date timeline-date-thin margin-right-10\"><span class=\"badge badge-default badge-indicator-pinging scale-50 margin-left-2 padding-10\"></span></div><div class=\"timeline-content margin-bottom-20 text-color-dark\"><b class=\"text-medium text-color-darkest\">Andre</b> reopened <b class=\"text-medium text-color-darkest\">answer</b> 10m</div></div><div class=\"timeline-element margin-bottom--2\"><div class=\"timeline-date timeline-date-thin margin-right-10\"><span class=\"badge badge-default scale-50 margin-left-2 padding-10\"></span></div><div class=\"timeline-content text-color-dark\"><b class=\"text-medium text-color-darkest\">Andre</b> closed <b class=\"text-medium text-color-darkest\">answer</b> 1y</div></div></div><div class=\"timeline margin-top-50\"><div class=\"timeline-element margin-bottom-0\"><div class=\"timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5\"><div class=\"width-10 aspect-ratio-1 rounded-circle border border-color-info border-width-3 bg-white margin-left-1\"></div></div><div class=\"timeline-content margin-bottom-20 text-color-darker\">Inventory replenishment triggered</div></div><div class=\"timeline-element margin-bottom-0\"><div class=\"timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5\"><div class=\"width-10 aspect-ratio-1 rounded-circle border border-color-info border-width-2 bg-white margin-left-1\"></div></div><div class=\"timeline-content margin-bottom-20 text-color-darker\">Cross-Docking initiated</div></div><div class=\"timeline-element margin-bottom-0\"><div class=\"timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5\"><div class=\"width-10 aspect-ratio-1 rounded-circle border border-color-info border-width-2 bg-white margin-left-1\"></div></div><div class=\"timeline-content margin-bottom-20 text-color-darker\">Customs clearance completed</div></div><div class=\"timeline-element margin-bottom--2\"><div class=\"timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5\"><div class=\"width-10 aspect-ratio-1 rounded-circle border border-color-danger border-width-2 bg-white margin-left-1\"></div></div><div class=\"timeline-content margin-bottom-20 text-color-darker\">Cold chain integrity maintained</div></div><div class=\"timeline-element margin-bottom--2\"><div class=\"timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5\"><div class=\"width-10 aspect-ratio-1 rounded-circle border border-color-info border-width-2 bg-white margin-left-1\"></div></div><div class=\"timeline-content text-color-darker\">Last-Mile delivery assigned</div></div></div></div><div class=\"padding-x-10\"><div class=\"h4 margin-bottom-25\">Stream style</div><div class=\"timeline timeline-style-stream\"><div class=\"timeline-element\"><div class=\"timeline-date\">January</div><div class=\"timeline-content\">\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.</div></div><div class=\"timeline-element\"><div class=\"timeline-date\">February</div><div class=\"timeline-content\">\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.</div></div><div class=\"timeline-element\"><div class=\"timeline-date\">March</div><div class=\"timeline-content\">\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.</div></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div>\n        <div class=\"h2 margin-bottom-25\">CSS Timeline</div>\n        <div class=\"display-grid grid-cols-1-xs grid-cols-2-sm grid-cols-4-lg gap-25\">\n            <div class=\"padding-x-10\">\n                <div class=\"h4 margin-bottom-25\">Default</div>\n                <div class=\"timeline\">\n                    <div class=\"timeline-element\">\n                        <div class=\"timeline-date\">\n                            <div class=\"text-medium\">01-2024</div>\n                        </div>\n                        <div class=\"timeline-content\">\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.</div>\n                    </div>\n                    <div class=\"timeline-element\">\n                        <div class=\"timeline-date\">\n                            <div class=\"text-medium\">02-2024</div>\n                        </div>\n                        <div class=\"timeline-content\">\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.</div>\n                    </div>\n                    <div class=\"timeline-element\">\n                        <div class=\"timeline-date\">\n                            <div class=\"text-medium\">03-2024</div>\n                        </div>\n                        <div class=\"timeline-content\">\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.</div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"padding-x-10\">\n                <div class=\"h4 margin-bottom-25\">With UI elements</div>\n                <div class=\"timeline\">\n                    <div class=\"timeline-element margin-bottom-0\">\n                        <div class=\"timeline-date timeline-date-color-primary margin-right-10\">\n                            <span class=\"badge badge-primary padding-5\">\n                                <span class=\"rioglyph rioglyph-map-marker\">\n                                </span>\n                            </span>\n                        </div>\n                        <div class=\"timeline-content margin-bottom-20\">\n                            <div class=\"text-medium margin-bottom-5\">Start today</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.\n                        </div>\n                    </div>\n                    <div class=\"timeline-element margin-bottom-0\">\n                        <div class=\"timeline-date timeline-date-color-primary margin-right-10\">\n                            <span class=\"badge badge-primary text-medium\">2</span>\n                        </div>\n                        <div class=\"timeline-content margin-bottom-20\">\n                            <div class=\"text-medium margin-bottom-5\">02/2025</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.\n                        </div>\n                    </div>\n                    <div class=\"timeline-element margin-bottom-0\">\n                        <div class=\"timeline-date timeline-date-thin timeline-date-dashed margin-right-10\">\n                            <div class=\"position-relative\">\n                                <div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\">\n                                    <div class=\"spinner\">\n                                        <div>\n                                        </div>\n                                        <div>\n                                        </div>\n                                        <div>\n                                        </div>\n                                        <div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"timeline-content margin-bottom-20\">\n                            <div class=\"text-medium margin-bottom-5\">Ongoing</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.\n                        </div>\n                    </div>\n                    <div class=\"timeline-element\">\n                        <div class=\"timeline-date margin-right-10\">\n                            <span class=\"badge badge-muted padding-5 text-medium\">\n                                <span class=\"rioglyph rioglyph-finish\">\n                                </span>\n                            </span>\n                        </div>\n                        <div class=\"timeline-content\">\n                            <div class=\"text-medium padding-top-2\">Finish</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"padding-x-10\">\n                <div class=\"h4 margin-bottom-25\">Events</div>\n                <div class=\"timeline\">\n                    <div class=\"timeline-element margin-bottom-0\">\n                        <div class=\"timeline-date timeline-date-thin margin-right-10\">\n                            <span class=\"badge badge-success padding-5 scale-80 margin-left-1\">\n                                <span class=\"rioglyph rioglyph-ok\">\n                                </span>\n                            </span>\n                        </div>\n                        <div class=\"timeline-content margin-bottom-20 text-color-dark\">\n                            <b class=\"text-medium text-color-darkest\">leeroy</b> marked an <b class=\"text-medium text-color-darkest\">answer</b> 4m\n                        </div>\n                    </div>\n                    <div class=\"timeline-element margin-bottom-0\">\n                        <div class=\"timeline-date timeline-date-thin margin-right-10\">\n                            <span class=\"badge badge-muted padding-5 scale-80 margin-left-1\">\n                                <span class=\"rioglyph rioglyph-ok\">\n                                </span>\n                            </span>\n                        </div>\n                        <div class=\"timeline-content margin-bottom-20 text-color-dark\">\n                            <b class=\"text-medium text-color-darkest\">leeroy</b> unmarked an <b class=\"text-medium text-color-darkest\">answer</b> 4m\n                        </div>\n                    </div>\n                    <div class=\"timeline-element margin-bottom-0\">\n                        <div class=\"timeline-date timeline-date-thin margin-right-10\">\n                            <span class=\"badge badge-success padding-5 scale-80 margin-left-1\">\n                                <span class=\"rioglyph rioglyph-ok\">\n                                </span>\n                            </span>\n                        </div>\n                        <div class=\"timeline-content margin-bottom-20 text-color-dark\">\n                            <b class=\"text-medium text-color-darkest\">leeroy</b> marked an <b class=\"text-medium text-color-darkest\">answer</b> 7m\n                        </div>\n                    </div>\n                    <div class=\"timeline-element margin-bottom--2\">\n                        <div class=\"timeline-date timeline-date-thin margin-right-10\">\n                            <span class=\"badge badge-default badge-indicator-pinging scale-50 margin-left-2 padding-10\">\n                            </span>\n                        </div>\n                        <div class=\"timeline-content margin-bottom-20 text-color-dark\">\n                            <b class=\"text-medium text-color-darkest\">Andre</b> reopened <b class=\"text-medium text-color-darkest\">answer</b> 10m\n                        </div>\n                    </div>\n                    <div class=\"timeline-element margin-bottom--2\">\n                        <div class=\"timeline-date timeline-date-thin margin-right-10\">\n                            <span class=\"badge badge-default scale-50 margin-left-2 padding-10\">\n                            </span>\n                        </div>\n                        <div class=\"timeline-content text-color-dark\">\n                            <b class=\"text-medium text-color-darkest\">Andre</b> closed <b class=\"text-medium text-color-darkest\">answer</b> 1y\n                        </div>\n                    </div>\n                </div>\n                <div class=\"timeline margin-top-50\">\n                    <div class=\"timeline-element margin-bottom-0\">\n                        <div class=\"timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5\">\n                            <div class=\"width-10 aspect-ratio-1 rounded-circle border border-color-info border-width-3 bg-white margin-left-1\">\n                            </div>\n                        </div>\n                        <div class=\"timeline-content margin-bottom-20 text-color-darker\">Inventory replenishment triggered</div>\n                    </div>\n                    <div class=\"timeline-element margin-bottom-0\">\n                        <div class=\"timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5\">\n                            <div class=\"width-10 aspect-ratio-1 rounded-circle border border-color-info border-width-2 bg-white margin-left-1\">\n                            </div>\n                        </div>\n                        <div class=\"timeline-content margin-bottom-20 text-color-darker\">Cross-Docking initiated</div>\n                    </div>\n                    <div class=\"timeline-element margin-bottom-0\">\n                        <div class=\"timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5\">\n                            <div class=\"width-10 aspect-ratio-1 rounded-circle border border-color-info border-width-2 bg-white margin-left-1\">\n                            </div>\n                        </div>\n                        <div class=\"timeline-content margin-bottom-20 text-color-darker\">Customs clearance completed</div>\n                    </div>\n                    <div class=\"timeline-element margin-bottom--2\">\n                        <div class=\"timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5\">\n                            <div class=\"width-10 aspect-ratio-1 rounded-circle border border-color-danger border-width-2 bg-white margin-left-1\">\n                            </div>\n                        </div>\n                        <div class=\"timeline-content margin-bottom-20 text-color-darker\">Cold chain integrity maintained</div>\n                    </div>\n                    <div class=\"timeline-element margin-bottom--2\">\n                        <div class=\"timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5\">\n                            <div class=\"width-10 aspect-ratio-1 rounded-circle border border-color-info border-width-2 bg-white margin-left-1\">\n                            </div>\n                        </div>\n                        <div class=\"timeline-content text-color-darker\">Last-Mile delivery assigned</div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"padding-x-10\">\n                <div class=\"h4 margin-bottom-25\">Stream style</div>\n                <div class=\"timeline timeline-style-stream\">\n                    <div class=\"timeline-element\">\n                        <div class=\"timeline-date\">January</div>\n                        <div class=\"timeline-content\">\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.</div>\n                    </div>\n                    <div class=\"timeline-element\">\n                        <div class=\"timeline-date\">February</div>\n                        <div class=\"timeline-content\">\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.</div>\n                    </div>\n                    <div class=\"timeline-element\">\n                        <div class=\"timeline-date\">March</div>\n                        <div class=\"timeline-content\">\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.</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Shipment",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"panel panel-default panel-body shadow-default padding-25 max-width-500 rounded-large\"><div class=\"h4 margin-bottom-20 margin-top-0\">Package details</div><div class=\"display-flex align-items-center padding-20 gap-15 justify-content-around border border-color-lighter bg-lightest rounded rounded-large margin-bottom-15\"><div><div class=\"display-flex align-items-center gap-5 text-color-dark\"><span class=\"rioglyph rioglyph-parcel text-color-dark opacity-80\"></span><div class=\"\">Shipment</div></div><div class=\"text-medium padding-y-2\">34563456</div></div><div><div class=\"display-flex align-items-center gap-5 text-color-dark\"><span class=\"rioglyph rioglyph-weight text-color-dark opacity-80\"></span><div class=\"\">Weight</div></div><div class=\"text-medium padding-y-2\">1.3 Kg</div></div><div><div class=\"display-flex align-items-center gap-5 text-color-dark\"><span class=\"rioglyph rioglyph-ruler text-color-dark opacity-80\"></span><div class=\"\">Dimensions</div></div><div class=\"text-medium padding-y-2\">34 x 26 x 17 cm</div></div></div><div class=\"padding-10\"><div class=\"timeline\"><div class=\"timeline-element\"><div class=\"timeline-date\"><span class=\"badge badge-success padding-5 scale-90 margin-left-2\"><span class=\"rioglyph rioglyph-finish\"></span></span></div><div class=\"timeline-content\"><div class=\"text-medium margin-bottom-5\">The shipment is delivered to the recipient</div><div class=\"text-size-12 text-color-dark padding-y-5\">May 31th at 11:00 PM - 10117 Berlin, Germany</div></div></div><div class=\"timeline-element\"><div class=\"timeline-date\"><span class=\"badge badge-muted padding-5 scale-80 margin-left-2\"><span class=\"rioglyph rioglyph-ok\"></span></span></div><div class=\"timeline-content\"><div class=\"text-medium margin-bottom-5\">The shipment is loaded onto a truck for delivery</div><div class=\"text-size-12 text-color-dark padding-y-5\">May 30 at 1:45 PM - 75001 Paris, France</div></div></div><div class=\"timeline-element\"><div class=\"timeline-date\"><span class=\"badge badge-muted padding-5 scale-80 margin-left-2\"><span class=\"rioglyph rioglyph-ok\"></span></span></div><div class=\"timeline-content\"><div class=\"text-medium margin-bottom-5\">The shipment is sorted and prepared for further transport</div><div class=\"text-size-12 text-color-dark padding-y-5\">May 30 at 12:10 PM - 75001 Paris, France</div></div></div><div class=\"timeline-element\"><div class=\"timeline-date\"><span class=\"badge badge-muted padding-5 scale-80 margin-left-2\"><span class=\"rioglyph rioglyph-ok\"></span></span></div><div class=\"timeline-content\"><div class=\"text-medium\">The consignment has been picked up and is now at the terminal for further processing</div><div class=\"text-size-12 text-color-dark padding-y-5\">May 29 at 2:15 PM - 75001 Paris, France</div></div></div><div class=\"timeline-element\"><div class=\"timeline-date\"><span class=\"badge badge-muted padding-5 scale-80 margin-left-2\"><span class=\"rioglyph rioglyph-ok\"></span></span></div><div class=\"timeline-content\"><div class=\"text-medium\">We've received the first update on your shipment. While it's currently with the sender or on its way to the terminal, we'll be able to provide more detailed tracking information once it arrives in the receiving country.</div><div class=\"text-size-12 text-color-dark padding-y-5\">May 28 at 4:00 AM - SW1A 1AA London, United Kingdom</div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"panel panel-default panel-body shadow-default padding-25 max-width-500 rounded-large\">\n    <div class=\"h4 margin-bottom-20 margin-top-0\">Package details</div>\n    <div class=\"display-flex align-items-center padding-20 gap-15 justify-content-around border border-color-lighter bg-lightest rounded rounded-large margin-bottom-15\">\n        <div>\n            <div class=\"display-flex align-items-center gap-5 text-color-dark\">\n                <span class=\"rioglyph rioglyph-parcel text-color-dark opacity-80\">\n                </span>\n                <div class=\"\">Shipment</div>\n            </div>\n            <div class=\"text-medium padding-y-2\">34563456</div>\n        </div>\n        <div>\n            <div class=\"display-flex align-items-center gap-5 text-color-dark\">\n                <span class=\"rioglyph rioglyph-weight text-color-dark opacity-80\">\n                </span>\n                <div class=\"\">Weight</div>\n            </div>\n            <div class=\"text-medium padding-y-2\">1.3 Kg</div>\n        </div>\n        <div>\n            <div class=\"display-flex align-items-center gap-5 text-color-dark\">\n                <span class=\"rioglyph rioglyph-ruler text-color-dark opacity-80\">\n                </span>\n                <div class=\"\">Dimensions</div>\n            </div>\n            <div class=\"text-medium padding-y-2\">34 x 26 x 17 cm</div>\n        </div>\n    </div>\n    <div class=\"padding-10\">\n        <div class=\"timeline\">\n            <div class=\"timeline-element\">\n                <div class=\"timeline-date\">\n                    <span class=\"badge badge-success padding-5 scale-90 margin-left-2\">\n                        <span class=\"rioglyph rioglyph-finish\">\n                        </span>\n                    </span>\n                </div>\n                <div class=\"timeline-content\">\n                    <div class=\"text-medium margin-bottom-5\">The shipment is delivered to the recipient</div>\n                    <div class=\"text-size-12 text-color-dark padding-y-5\">May 31th at 11:00 PM - 10117 Berlin, Germany</div>\n                </div>\n            </div>\n            <div class=\"timeline-element\">\n                <div class=\"timeline-date\">\n                    <span class=\"badge badge-muted padding-5 scale-80 margin-left-2\">\n                        <span class=\"rioglyph rioglyph-ok\">\n                        </span>\n                    </span>\n                </div>\n                <div class=\"timeline-content\">\n                    <div class=\"text-medium margin-bottom-5\">The shipment is loaded onto a truck for delivery</div>\n                    <div class=\"text-size-12 text-color-dark padding-y-5\">May 30 at 1:45 PM - 75001 Paris, France</div>\n                </div>\n            </div>\n            <div class=\"timeline-element\">\n                <div class=\"timeline-date\">\n                    <span class=\"badge badge-muted padding-5 scale-80 margin-left-2\">\n                        <span class=\"rioglyph rioglyph-ok\">\n                        </span>\n                    </span>\n                </div>\n                <div class=\"timeline-content\">\n                    <div class=\"text-medium margin-bottom-5\">The shipment is sorted and prepared for further transport</div>\n                    <div class=\"text-size-12 text-color-dark padding-y-5\">May 30 at 12:10 PM - 75001 Paris, France</div>\n                </div>\n            </div>\n            <div class=\"timeline-element\">\n                <div class=\"timeline-date\">\n                    <span class=\"badge badge-muted padding-5 scale-80 margin-left-2\">\n                        <span class=\"rioglyph rioglyph-ok\">\n                        </span>\n                    </span>\n                </div>\n                <div class=\"timeline-content\">\n                    <div class=\"text-medium\">The consignment has been picked up and is now at the terminal for further processing</div>\n                    <div class=\"text-size-12 text-color-dark padding-y-5\">May 29 at 2:15 PM - 75001 Paris, France</div>\n                </div>\n            </div>\n            <div class=\"timeline-element\">\n                <div class=\"timeline-date\">\n                    <span class=\"badge badge-muted padding-5 scale-80 margin-left-2\">\n                        <span class=\"rioglyph rioglyph-ok\">\n                        </span>\n                    </span>\n                </div>\n                <div class=\"timeline-content\">\n                    <div class=\"text-medium\">We've received the first update on your shipment. While it's currently with the sender or on its way to the terminal, we'll be able to provide more detailed tracking information once it arrives in the receiving country.</div>\n                    <div class=\"text-size-12 text-color-dark padding-y-5\">May 28 at 4:00 AM - SW1A 1AA London, United Kingdom</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,163 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:30.872Z",
+    "source": "https://uikit.developers.rio.cloud/#components/timepicker",
+    "category": "Components",
+    "section": "Pickers",
+    "slug": "components/timepicker",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "9a8636998c16d29398217c3cd30c3e6087fbcf86e36a6dd0932098c43b23291e"
+  },
+  "title": "TimePicker",
+  "lead": null,
+  "content": [
+    {
+      "heading": "TimePicker",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"row max-width-600\"><div class=\"col-sm-6 form-group\"><label>Uncontrolled component</label><div class=\"TimePicker input-group\"><div class=\"form-control-feedback-wrapper\"><input class=\"TimePickerInput form-control\" value=\"\"></div><div class=\"TimePickerIncreaseButton input-group-addon\"><div class=\"text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer\"><div class=\"rioglyph rioglyph-chevron-left scale-90\"></div></div><div class=\"text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer\"><div class=\"rioglyph rioglyph-chevron-right scale-90\"></div></div></div></div></div><div class=\"col-sm-6 form-group\"><label>With icon</label><div class=\"TimePicker input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-time-alt\"></span></span><div class=\"form-control-feedback-wrapper\"><input class=\"TimePickerInput form-control\" value=\"\"></div><div class=\"TimePickerIncreaseButton input-group-addon\"><div class=\"text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer\"><div class=\"rioglyph rioglyph-chevron-left scale-90\"></div></div><div class=\"text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer\"><div class=\"rioglyph rioglyph-chevron-right scale-90\"></div></div></div></div></div><div class=\"col-sm-6\"><div class=\"form-group\"><label>Controlled component without initial value</label><div class=\"TimePicker input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-time-alt\"></span></span><div class=\"form-control-feedback-wrapper\"><input class=\"TimePickerInput form-control\" value=\"\"></div></div></div><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set current time</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Clear time</button></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport TimePicker from '@rio-cloud/rio-uikit/TimePicker';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nconst getCurrentTime = () => {\n    const getPadded = (value: number) => (value >= 10 ? value : `0${value}`);\n    const date = new Date();\n    const hours = date.getHours();\n    const minutes = date.getMinutes();\n    return `${getPadded(hours)}:${getPadded(minutes)}`;\n};\n\nexport default () => {\n    const [timeValue, setTimeValue] = useState('');\n\n    const notifyTime = (value: string) => Notification.info(`Entered time: ${value}`);\n\n    const handleChangeTime = (value: string) => {\n        setTimeValue(value);\n        notifyTime(value);\n    };\n\n    return (\n        <div className='row max-width-600'>\n            <div className='col-sm-6 form-group'>\n                <label>Uncontrolled component</label>\n                <TimePicker onChange={notifyTime} />\n            </div>\n            <div className='col-sm-6 form-group'>\n                <label>With icon</label>\n                <TimePicker onChange={notifyTime} showIcon />\n            </div>\n            <div className='col-sm-6'>\n                <div className='form-group'>\n                    <label>Controlled component without initial value</label>\n                    <TimePicker value={timeValue} onChange={handleChangeTime} showIcon />\n                </div>\n                <div className='btn-toolbar'>\n                    <Button onClick={() => setTimeValue(getCurrentTime())}>Set current time</Button>\n                    <Button onClick={() => setTimeValue('')}>Clear time</Button>\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"row max-width-600\">\n    <div class=\"col-sm-6 form-group\">\n        <label>Uncontrolled component</label>\n        <div class=\"TimePicker input-group\">\n            <div class=\"form-control-feedback-wrapper\">\n                <input class=\"TimePickerInput form-control\" value=\"\">\n            </div>\n            <div class=\"TimePickerIncreaseButton input-group-addon\">\n                <div class=\"text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer\">\n                    <div class=\"rioglyph rioglyph-chevron-left scale-90\">\n                    </div>\n                </div>\n                <div class=\"text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer\">\n                    <div class=\"rioglyph rioglyph-chevron-right scale-90\">\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-6 form-group\">\n        <label>With icon</label>\n        <div class=\"TimePicker input-group\">\n            <span class=\"input-group-addon\">\n                <span class=\"rioglyph rioglyph-time-alt\">\n                </span>\n            </span>\n            <div class=\"form-control-feedback-wrapper\">\n                <input class=\"TimePickerInput form-control\" value=\"\">\n            </div>\n            <div class=\"TimePickerIncreaseButton input-group-addon\">\n                <div class=\"text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer\">\n                    <div class=\"rioglyph rioglyph-chevron-left scale-90\">\n                    </div>\n                </div>\n                <div class=\"text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer\">\n                    <div class=\"rioglyph rioglyph-chevron-right scale-90\">\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-6\">\n        <div class=\"form-group\">\n            <label>Controlled component without initial value</label>\n            <div class=\"TimePicker input-group\">\n                <span class=\"input-group-addon\">\n                    <span class=\"rioglyph rioglyph-time-alt\">\n                    </span>\n                </span>\n                <div class=\"form-control-feedback-wrapper\">\n                    <input class=\"TimePickerInput form-control\" value=\"\">\n                </div>\n            </div>\n        </div>\n        <div class=\"btn-toolbar\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set current time</button>\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Clear time</button>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "value",
+                      "type": "string",
+                      "default": "",
+                      "description": "Value of the time as string. Note, when value is given the component is treated as controlled."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function when the value changes and is a valid time format. If not it handles the state internally until the time is valid and filled."
+                    },
+                    {
+                      "name": "alwaysShowMask",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether to always show the input mask placeholder."
+                    },
+                    {
+                      "name": "showIcon",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not to show the input icon."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    },
+                    {
+                      "name": "inputProps",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Additional props to be passed on to the underlying input component."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the input element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-600 height-100 display-flex gap-25\"><div class=\"flex-1-1 max-width-150 form-group has-feedback has-error\"><label>Default</label><div class=\"TimePicker input-group\"><div class=\"form-control-feedback-wrapper\"><input class=\"TimePickerInput form-control\" value=\"\"><span class=\"form-control-feedback rioglyph rioglyph-error-sign\"></span><span class=\"help-block white-space-normal\"><span>Please insert a valid time</span></span></div><div class=\"TimePickerIncreaseButton input-group-addon\"><div class=\"text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer\"><div class=\"rioglyph rioglyph-chevron-left scale-90\"></div></div><div class=\"text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer\"><div class=\"rioglyph rioglyph-chevron-right scale-90\"></div></div></div></div></div><div class=\"flex-1-1 max-width-150 form-group has-feedback has-warning\"><label>With icon</label><div class=\"TimePicker input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-time-alt\"></span></span><div class=\"form-control-feedback-wrapper\"><input class=\"TimePickerInput form-control\" value=\"\"><span class=\"form-control-feedback rioglyph rioglyph-warning-sign\"></span><span class=\"help-block white-space-nowrap\"><span>Just a normal warning message</span></span></div><div class=\"TimePickerIncreaseButton input-group-addon\"><div class=\"text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer\"><div class=\"rioglyph rioglyph-chevron-left scale-90\"></div></div><div class=\"text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer\"><div class=\"rioglyph rioglyph-chevron-right scale-90\"></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import TimePicker from '@rio-cloud/rio-uikit/TimePicker';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nexport default () => {\n    const notifyTime = (value: string) => Notification.info(`Entered time: ${value}`);\n\n    return (\n        <div className='max-width-600 height-100 display-flex gap-25'>\n            <div className='flex-1-1 max-width-150 form-group has-feedback has-error'>\n                <label>Default</label>\n                <TimePicker errorMessage='Please insert a valid time' />\n            </div>\n            <div className='flex-1-1 max-width-150 form-group has-feedback has-warning'>\n                <label>With icon</label>\n                <TimePicker showIcon warningMessage='Just a normal warning message' messageWhiteSpace='nowrap' />\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600 height-100 display-flex gap-25\">\n    <div class=\"flex-1-1 max-width-150 form-group has-feedback has-error\">\n        <label>Default</label>\n        <div class=\"TimePicker input-group\">\n            <div class=\"form-control-feedback-wrapper\">\n                <input class=\"TimePickerInput form-control\" value=\"\">\n                <span class=\"form-control-feedback rioglyph rioglyph-error-sign\">\n                </span>\n                <span class=\"help-block white-space-normal\">\n                    <span>Please insert a valid time</span>\n                </span>\n            </div>\n            <div class=\"TimePickerIncreaseButton input-group-addon\">\n                <div class=\"text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer\">\n                    <div class=\"rioglyph rioglyph-chevron-left scale-90\">\n                    </div>\n                </div>\n                <div class=\"text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer\">\n                    <div class=\"rioglyph rioglyph-chevron-right scale-90\">\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"flex-1-1 max-width-150 form-group has-feedback has-warning\">\n        <label>With icon</label>\n        <div class=\"TimePicker input-group\">\n            <span class=\"input-group-addon\">\n                <span class=\"rioglyph rioglyph-time-alt\">\n                </span>\n            </span>\n            <div class=\"form-control-feedback-wrapper\">\n                <input class=\"TimePickerInput form-control\" value=\"\">\n                <span class=\"form-control-feedback rioglyph rioglyph-warning-sign\">\n                </span>\n                <span class=\"help-block white-space-nowrap\">\n                    <span>Just a normal warning message</span>\n                </span>\n            </div>\n            <div class=\"TimePickerIncreaseButton input-group-addon\">\n                <div class=\"text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer\">\n                    <div class=\"rioglyph rioglyph-chevron-left scale-90\">\n                    </div>\n                </div>\n                <div class=\"text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer\">\n                    <div class=\"rioglyph rioglyph-chevron-right scale-90\">\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "value",
+                      "type": "string",
+                      "default": "",
+                      "description": "Value of the time as string. Note, when value is given the component is treated as controlled."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function when the value changes and is a valid time format. If not it handles the state internally until the time is valid and filled."
+                    },
+                    {
+                      "name": "alwaysShowMask",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether to always show the input mask placeholder."
+                    },
+                    {
+                      "name": "showIcon",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not to show the input icon."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    },
+                    {
+                      "name": "inputProps",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Additional props to be passed on to the underlying input component."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the input element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,247 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:18.773Z",
+    "source": "https://uikit.developers.rio.cloud/#components/toggleButton",
+    "category": "Components",
+    "section": "Interaction",
+    "slug": "components/togglebutton",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "5bb2f689eebb26646f489593569bf1018e04fd758dc6381bed101dd3b9e3a96f"
+  },
+  "title": "ToggleButton",
+  "lead": "This toggle button is based on the button component that can be used directly.",
+  "content": [
+    {
+      "heading": "ToggleButton",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Default ToggleButtons",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Default ToggleButtons</div><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-default btn-toggle btn-component\" tabindex=\"0\">btn-default (untoggled)</button><button type=\"button\" class=\"btn btn-default btn-toggle active btn-component\" tabindex=\"0\">btn-default (toggled)</button><button type=\"button\" class=\"btn btn-primary btn-toggle btn-component\" tabindex=\"0\">btn-primary (untoggled)</button></div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15\">Other Styles</div><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-success btn-toggle btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-thumbs-up\"></span></button><button type=\"button\" class=\"btn btn-info btn-toggle btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-status-driving\"></span></button><button type=\"button\" class=\"btn btn-warning btn-toggle btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-warning-sign\"></span></button><button type=\"button\" class=\"btn btn-danger btn-toggle btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-error-sign\"></span></button></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nconst handleClick = (response: boolean) => Notification.info(`Toggled: ${response}`);\n\nexport default () => (\n    <div>\n        <FormLabel>Default ToggleButtons</FormLabel>\n        <div className='btn-toolbar'>\n            <ToggleButton onClick={handleClick}>btn-default (untoggled)</ToggleButton>\n            <ToggleButton active onClick={handleClick}>\n                btn-default (toggled)\n            </ToggleButton>\n            <ToggleButton bsStyle='primary' onClick={handleClick}>\n                btn-primary (untoggled)\n            </ToggleButton>\n        </div>\n        <FormLabel className='margin-top-15'>Other Styles</FormLabel>\n        <div className='btn-toolbar'>\n            <ToggleButton bsStyle='success' iconName='rioglyph-thumbs-up' iconOnly />\n            <ToggleButton bsStyle='info' iconName='rioglyph-status-driving' iconOnly />\n            <ToggleButton bsStyle='warning' iconName='rioglyph-warning-sign' iconOnly />\n            <ToggleButton bsStyle='danger' iconName='rioglyph-error-sign' iconOnly />\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Default ToggleButtons</div>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-default btn-toggle btn-component\" tabindex=\"0\">btn-default (untoggled)</button>\n        <button type=\"button\" class=\"btn btn-default btn-toggle active btn-component\" tabindex=\"0\">btn-default (toggled)</button>\n        <button type=\"button\" class=\"btn btn-primary btn-toggle btn-component\" tabindex=\"0\">btn-primary (untoggled)</button>\n    </div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15\">Other Styles</div>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-success btn-toggle btn-icon-only btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-thumbs-up\">\n            </span>\n        </button>\n        <button type=\"button\" class=\"btn btn-info btn-toggle btn-icon-only btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-status-driving\">\n            </span>\n        </button>\n        <button type=\"button\" class=\"btn btn-warning btn-toggle btn-icon-only btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-warning-sign\">\n            </span>\n        </button>\n        <button type=\"button\" class=\"btn btn-danger btn-toggle btn-icon-only btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-error-sign\">\n            </span>\n        </button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button disabled."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button toggled. Should be used in combination with \"asToggle\" prop."
+                    },
+                    {
+                      "name": "asToggle",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop."
+                    },
+                    {
+                      "name": "iconOnly",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use when the content of the button is an icon only to adapt the button spacing accordingly."
+                    },
+                    {
+                      "name": "iconName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code."
+                    },
+                    {
+                      "name": "iconRight",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side."
+                    },
+                    {
+                      "name": "multiline",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only."
+                    },
+                    {
+                      "name": "block",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button takes up the full width of the parent element."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function triggered when clicking the button."
+                    },
+                    {
+                      "name": "bsStyle",
+                      "type": "String",
+                      "default": "default",
+                      "description": "Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTED_FILLED and Button.MUTED"
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG"
+                    },
+                    {
+                      "name": "variant",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANT_LINK, Button.VARIANT_LINK_INLINE, Button.VARIANT_OUTLINE and Button.VARIANT_ACTION"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the button element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any element to be rendered on the button."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Controlled ToggleButton",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Controlled ToggleButton</div><div class=\"margin-bottom-25\"><button type=\"button\" class=\"btn btn-default btn-toggle btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-cards-table\"></span></button></div><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Control the toggle</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nconst handleClick = (response: boolean) => Notification.info(`Toggled: ${response}`);\n\nexport default () => {\n    const [isToggled, setIsToggled] = useState(false);\n\n    return (\n        <div>\n            <FormLabel>Controlled ToggleButton</FormLabel>\n            <div className='margin-bottom-25'>\n                <ToggleButton active={isToggled} iconName='rioglyph-cards-table' iconOnly />\n            </div>\n            <Button onClick={() => setIsToggled(!isToggled)}>Control the toggle</Button>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Controlled ToggleButton</div>\n    <div class=\"margin-bottom-25\">\n        <button type=\"button\" class=\"btn btn-default btn-toggle btn-icon-only btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-cards-table\">\n            </span>\n        </button>\n    </div>\n    <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Control the toggle</button>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button disabled."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Set the button toggled. Should be used in combination with \"asToggle\" prop."
+                    },
+                    {
+                      "name": "asToggle",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use the button as a toggle button. The toggle state can be controlled viw the \"active\" prop."
+                    },
+                    {
+                      "name": "iconOnly",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use when the content of the button is an icon only to adapt the button spacing accordingly."
+                    },
+                    {
+                      "name": "iconName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code."
+                    },
+                    {
+                      "name": "iconRight",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side."
+                    },
+                    {
+                      "name": "multiline",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only."
+                    },
+                    {
+                      "name": "block",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the button takes up the full width of the parent element."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function triggered when clicking the button."
+                    },
+                    {
+                      "name": "bsStyle",
+                      "type": "String",
+                      "default": "default",
+                      "description": "Sets the button style. Possible values are: default, primary, info, warning, danger, success, muted-filled and muted or Button.DEFAULT, Button.PRIMARY, Button.INFO, Button.WARNING, Button.DANGER, Button.SUCCESS, Button.MUTED_FILLED and Button.MUTED"
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets the button size. Possible values are: xs, sm, md and lg or Button.XS, Button.SM, Button.MD and Button.LG"
+                    },
+                    {
+                      "name": "variant",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets the button variant. Possible values are: link, link-inline, outline and action or Button.VARIANT_LINK, Button.VARIANT_LINK_INLINE, Button.VARIANT_OUTLINE and Button.VARIANT_ACTION"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the button element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any element to be rendered on the button."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}