@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,313 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:52.292Z",
+    "source": "https://uikit.developers.rio.cloud/#components/listMenu",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/listmenu",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "a0a7fdd09e4df273b9c1d1fca3714cf5926d42c26bbc18f4eb0a95189c61500b"
+  },
+  "title": "ListMenu",
+  "lead": "A simple list menu that supports grouping and filter.",
+  "content": [
+    {
+      "heading": "ListMenu",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"h5 margin-bottom-20\">ListMenu (default)</div><div class=\"ListMenu  \"><ul class=\"ListMenuGroup \"><li class=\"ListMenuHeader\"><span class=\"\">Group</span></li><li class=\"\"><span class=\"active\" data-key=\"0\">Lorem</span></li><li class=\"disabled\"><span class=\"\" data-key=\"1\">Disabled Ipsum</span></li><li class=\"\"><span class=\"\" data-key=\"2\">Dolor</span></li><li class=\"\"><span class=\"\" data-key=\"3\">Sit amet</span></li><li class=\"\"><span>No Link Sample</span></li></ul></div><hr><div class=\"h5 margin-bottom-20\">ListMenu with optional name filter</div><div class=\"ListMenu  \"><div class=\"form-group margin-bottom-5 padding-left-15 padding-right-15 padding-bottom-15 position-sticky top-0 z-index-1\"><div class=\"input-group width-100pct\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input placeholder=\"Filter by name\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><ul class=\"ListMenuGroup \"><li class=\"ListMenuHeader\"><span class=\"\">Group</span><span class=\"badge badge-muted\">5 items</span></li><li class=\"\"><span class=\"active\" data-key=\"0\">Lorem</span></li><li class=\"disabled\"><span class=\"\" data-key=\"1\">Disabled Ipsum</span></li><li class=\"\"><span class=\"\" data-key=\"2\">Dolor</span></li><li class=\"\"><span class=\"\" data-key=\"3\">Sit amet</span></li><li class=\"\"><span>No Link Sample</span></li></ul></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState, type MouseEvent, type MouseEventHandler } from 'react';\n\nimport ListMenu, { type ListMenuItem } from '@rio-cloud/rio-uikit/ListMenu';\n\nconst menuItems = (activeItem: string, setActiveItem: MouseEventHandler<HTMLSpanElement>): ListMenuItem[] => [\n    {\n        group: 'Group',\n        navItems: [\n            {\n                key: 'Lorem',\n                item: (\n                    <span className={activeItem === '0' ? 'active' : ''} data-key='0' onClick={setActiveItem}>\n                        Lorem\n                    </span>\n                ),\n            },\n            {\n                key: 'Lipsum',\n                disabled: true,\n                item: (\n                    <span className={activeItem === '1' ? 'active' : ''} data-key='1' onClick={setActiveItem}>\n                        Disabled Ipsum\n                    </span>\n                ),\n            },\n            {\n                key: 'Dolor',\n                item: (\n                    <span className={activeItem === '2' ? 'active' : ''} data-key='2' onClick={setActiveItem}>\n                        Dolor\n                    </span>\n                ),\n            },\n            {\n                key: 'Sit amet',\n                item: (\n                    <span className={activeItem === '3' ? 'active' : ''} data-key='3' onClick={setActiveItem}>\n                        Sit amet\n                    </span>\n                ),\n            },\n            {\n                key: 'No link',\n                item: <span>No Link Sample</span>,\n            },\n        ],\n    },\n];\n\nexport default () => {\n    const [activeItem, setActiveItem] = useState('0');\n\n    const onItemClick = (event: MouseEvent) => {\n        const key = (event.target as HTMLSpanElement).getAttribute('data-key') as string;\n        setActiveItem(key);\n    };\n\n    return (\n        <div>\n            <div className='h5 margin-bottom-20'>ListMenu (default)</div>\n            <ListMenu menuItems={menuItems(activeItem, onItemClick)} />\n            <hr />\n            <div className='h5 margin-bottom-20'>ListMenu with optional name filter</div>\n            <ListMenu\n                menuItems={menuItems(activeItem, onItemClick).map(item => ({\n                    ...item,\n                    badge: '5 items',\n                    badgeType: 'muted',\n                }))}\n                enableFilter\n                focusFilter\n                filterPlaceholder='Filter by name'\n                notFoundMessage='Nothing found'\n            />\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"h5 margin-bottom-20\">ListMenu (default)</div>\n    <div class=\"ListMenu  \">\n        <ul class=\"ListMenuGroup \">\n            <li class=\"ListMenuHeader\">\n                <span class=\"\">Group</span>\n            </li>\n            <li class=\"\">\n                <span class=\"active\" data-key=\"0\">Lorem</span>\n            </li>\n            <li class=\"disabled\">\n                <span class=\"\" data-key=\"1\">Disabled Ipsum</span>\n            </li>\n            <li class=\"\">\n                <span class=\"\" data-key=\"2\">Dolor</span>\n            </li>\n            <li class=\"\">\n                <span class=\"\" data-key=\"3\">Sit amet</span>\n            </li>\n            <li class=\"\">\n                <span>No Link Sample</span>\n            </li>\n        </ul>\n    </div>\n    <hr>\n    <div class=\"h5 margin-bottom-20\">ListMenu with optional name filter</div>\n    <div class=\"ListMenu  \">\n        <div class=\"form-group margin-bottom-5 padding-left-15 padding-right-15 padding-bottom-15 position-sticky top-0 z-index-1\">\n            <div class=\"input-group width-100pct\">\n                <span class=\"input-group-addon\">\n                    <span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\">\n                    </span>\n                </span>\n                <div class=\"ClearableInput input-group\">\n                    <input placeholder=\"Filter by name\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                    <span class=\"clearButton hide\">\n                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                        </span>\n                    </span>\n                </div>\n            </div>\n        </div>\n        <ul class=\"ListMenuGroup \">\n            <li class=\"ListMenuHeader\">\n                <span class=\"\">Group</span>\n                <span class=\"badge badge-muted\">5 items</span>\n            </li>\n            <li class=\"\">\n                <span class=\"active\" data-key=\"0\">Lorem</span>\n            </li>\n            <li class=\"disabled\">\n                <span class=\"\" data-key=\"1\">Disabled Ipsum</span>\n            </li>\n            <li class=\"\">\n                <span class=\"\" data-key=\"2\">Dolor</span>\n            </li>\n            <li class=\"\">\n                <span class=\"\" data-key=\"3\">Sit amet</span>\n            </li>\n            <li class=\"\">\n                <span>No Link Sample</span>\n            </li>\n        </ul>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "menuItems",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "List of menu item groups to be shown."
+                    },
+                    {
+                      "name": "└group",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "The optional group header to be shown. This can also be a component such as aFormattedMessage."
+                    },
+                    {
+                      "name": "└badge",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "The optional badge displayed alongside the group or nav items. This can be a string or a React node for additional flexibility."
+                    },
+                    {
+                      "name": "└badgeType",
+                      "type": "\"muted\" | \"success\" | \"info\" | \"warning\" | \"danger\"",
+                      "default": "",
+                      "description": "Determines the visual style of the badge. Available types include:muted, success, info, warning, and danger."
+                    },
+                    {
+                      "name": "└groupNavItem",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "The optional group header link to be shown. This can be a link component such asNavLink orLink. This way, the header can be a link itself. In this case, the propgroupcan be omitted."
+                    },
+                    {
+                      "name": "└navItems",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "The list of all menu items of a group."
+                    },
+                    {
+                      "name": "└navItems.key",
+                      "type": "String",
+                      "default": "",
+                      "description": "The name or key of the menu nav item. This key will be used for filtering, hence it should match the translated menu item name."
+                    },
+                    {
+                      "name": "└navItems.item",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The menu nav item itself. This can be a simple<a>, <NavLink>, <Link> or a <span> or even a <FormattedMessage>"
+                    },
+                    {
+                      "name": "└navItems.disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Disables the list item."
+                    },
+                    {
+                      "name": "enableFilter",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables the filter."
+                    },
+                    {
+                      "name": "focusFilter",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Focus the filter input."
+                    },
+                    {
+                      "name": "filterKey",
+                      "type": "String",
+                      "default": "key",
+                      "description": "Define the attribute key for filter for."
+                    },
+                    {
+                      "name": "filterPlaceholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The placeholder text for the input."
+                    },
+                    {
+                      "name": "notFoundMessage",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "A localized message to be shown when filter result is empty."
+                    },
+                    {
+                      "name": "responsive",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "The menu uses collapses on smaller screens using an expander panel."
+                    },
+                    {
+                      "name": "autoClose",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Enables automatic close of the expander panel. Only relevant when using the responsive flag. Note: make sure to not stop the events from bubbling up when clicking on an list item. Using \"event.stopPropagation()\" will not work for the panel to close."
+                    },
+                    {
+                      "name": "trailingInputAddon",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Additional addon for the input group."
+                    },
+                    {
+                      "name": "groupClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the menu group element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "ListMenu with NavLinks",
+      "body": "In case you want to navigate routes you can also use NavLink components.\n\nIn this example, all NavLinks are pointing to this ListMenu page.",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><h5 class=\"margin-bottom-20\">ListMenu with NavLinks</h5><div class=\"ListMenu  \"><ul class=\"ListMenuGroup \"><li class=\"ListMenuHeader\"><span class=\"\">Group</span></li><li class=\"\"><a aria-current=\"page\" class=\"active\" href=\"#components/listMenu\">Lorem</a></li><li class=\"\"><a href=\"#foo\">Lipsum</a></li><li class=\"\"><a href=\"#foo\">Dolor</a></li><li class=\"\"><a href=\"#foo\">Sit amet</a></li><li class=\"subitem\"><span>No Link Sample</span></li></ul><ul class=\"ListMenuGroup \"><li class=\"ListMenuHeader\"><span class=\"\">Another group</span></li><li class=\"\"><a href=\"#bar\">Lorem</a></li></ul></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { NavLink } from 'react-router-dom';\n\nimport ListMenu, { type ListMenuItem } from '@rio-cloud/rio-uikit/ListMenu';\n\nconst menuItems: ListMenuItem[] = [\n    {\n        group: 'Group',\n        navItems: [\n            {\n                key: 'Lorem',\n                item: (\n                    <NavLink activeClassName='active' to='/components/listMenu'>\n                        Lorem\n                    </NavLink>\n                ),\n            },\n            {\n                key: 'Lipsum',\n                item: (\n                    <NavLink activeClassName='active' to='/foo'>\n                        Lipsum\n                    </NavLink>\n                ),\n            },\n            {\n                key: 'Dolor',\n                item: (\n                    <NavLink activeClassName='active' to='/foo'>\n                        Dolor\n                    </NavLink>\n                ),\n            },\n            {\n                key: 'Sit amet',\n                item: (\n                    <NavLink activeClassName='active' to='/foo'>\n                        Sit amet\n                    </NavLink>\n                ),\n            },\n            {\n                key: 'No link',\n                item: <span>No Link Sample</span>,\n                isSubItem: true,\n            },\n        ],\n    },\n    {\n        group: 'Another group',\n        isSubItem: true,\n        navItems: [\n            {\n                key: 'Lorem',\n                item: (\n                    <NavLink activeClassName='active' to='/bar'>\n                        Lorem\n                    </NavLink>\n                ),\n            },\n        ],\n    },\n];\n\nexport default () => (\n    <div>\n        <h5 className='margin-bottom-20'>ListMenu with NavLinks</h5>\n        <ListMenu menuItems={menuItems} />\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <h5 class=\"margin-bottom-20\">ListMenu with NavLinks</h5>\n    <div class=\"ListMenu  \">\n        <ul class=\"ListMenuGroup \">\n            <li class=\"ListMenuHeader\">\n                <span class=\"\">Group</span>\n            </li>\n            <li class=\"\">\n                <a aria-current=\"page\" class=\"active\" href=\"#components/listMenu\">Lorem</a>\n            </li>\n            <li class=\"\">\n                <a href=\"#foo\">Lipsum</a>\n            </li>\n            <li class=\"\">\n                <a href=\"#foo\">Dolor</a>\n            </li>\n            <li class=\"\">\n                <a href=\"#foo\">Sit amet</a>\n            </li>\n            <li class=\"subitem\">\n                <span>No Link Sample</span>\n            </li>\n        </ul>\n        <ul class=\"ListMenuGroup \">\n            <li class=\"ListMenuHeader\">\n                <span class=\"\">Another group</span>\n            </li>\n            <li class=\"\">\n                <a href=\"#bar\">Lorem</a>\n            </li>\n        </ul>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "menuItems",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "List of menu item groups to be shown."
+                    },
+                    {
+                      "name": "└group",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "The optional group header to be shown. This can also be a component such as aFormattedMessage."
+                    },
+                    {
+                      "name": "└badge",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "The optional badge displayed alongside the group or nav items. This can be a string or a React node for additional flexibility."
+                    },
+                    {
+                      "name": "└badgeType",
+                      "type": "\"muted\" | \"success\" | \"info\" | \"warning\" | \"danger\"",
+                      "default": "",
+                      "description": "Determines the visual style of the badge. Available types include:muted, success, info, warning, and danger."
+                    },
+                    {
+                      "name": "└groupNavItem",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "The optional group header link to be shown. This can be a link component such asNavLink orLink. This way, the header can be a link itself. In this case, the propgroupcan be omitted."
+                    },
+                    {
+                      "name": "└navItems",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "The list of all menu items of a group."
+                    },
+                    {
+                      "name": "└navItems.key",
+                      "type": "String",
+                      "default": "",
+                      "description": "The name or key of the menu nav item. This key will be used for filtering, hence it should match the translated menu item name."
+                    },
+                    {
+                      "name": "└navItems.item",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The menu nav item itself. This can be a simple<a>, <NavLink>, <Link> or a <span> or even a <FormattedMessage>"
+                    },
+                    {
+                      "name": "└navItems.disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Disables the list item."
+                    },
+                    {
+                      "name": "enableFilter",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables the filter."
+                    },
+                    {
+                      "name": "focusFilter",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Focus the filter input."
+                    },
+                    {
+                      "name": "filterKey",
+                      "type": "String",
+                      "default": "key",
+                      "description": "Define the attribute key for filter for."
+                    },
+                    {
+                      "name": "filterPlaceholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The placeholder text for the input."
+                    },
+                    {
+                      "name": "notFoundMessage",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "A localized message to be shown when filter result is empty."
+                    },
+                    {
+                      "name": "responsive",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "The menu uses collapses on smaller screens using an expander panel."
+                    },
+                    {
+                      "name": "autoClose",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Enables automatic close of the expander panel. Only relevant when using the responsive flag. Note: make sure to not stop the events from bubbling up when clicking on an list item. Using \"event.stopPropagation()\" will not work for the panel to close."
+                    },
+                    {
+                      "name": "trailingInputAddon",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Additional addon for the input group."
+                    },
+                    {
+                      "name": "groupClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the menu group element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,175 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:13.055Z",
+    "source": "https://uikit.developers.rio.cloud/#components/loadMore",
+    "category": "Components",
+    "section": "Interaction",
+    "slug": "components/loadmore",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "81280298807dccd061581230942a6ded52cc607f379e5539e2955a527d05b1b5"
+  },
+  "title": "LoadMoreButton",
+  "lead": null,
+  "content": [
+    {
+      "heading": "LoadMoreButton",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable\"><div class=\"min-width-150\"><div class=\"text-center margin-bottom-3\"><span class=\"text-medium\">50</span><span class=\"margin-left-5 margin-right-5\">/</span><span class=\"text-medium\">150</span></div><div class=\"progress height-2 margin-bottom-10 bg-white\"><div class=\"progress-bar\" style=\"width: 33.3333%;\"></div></div><div class=\"display-flex justify-content-center\"><button class=\"btn btn-link padding-right-20 margin-top--5\" type=\"button\"><span class=\"rioglyph rioglyph-arrow-down\"></span>Load more</button></div></div></div><button class=\"position-absolute left-0 bottom-0 margin-10 btn btn-default\" type=\"button\">Reset</button></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState } from 'react';\n\nimport LoadMoreButton from '@rio-cloud/rio-uikit/LoadMoreButton';\n\nconst initialState = { loaded: 50, total: 150 };\n\nexport default () => {\n    const [state, setState] = useState(initialState);\n\n    const handleLoadMore = () => {\n        const { loaded, total } = state;\n        if (loaded < total) {\n            setState({\n                ...state,\n                loaded: loaded + 50,\n            });\n        }\n    };\n\n    const handleReset = () => setState(initialState);\n\n    return (\n        <React.Fragment>\n            <LoadMoreButton\n                loaded={state.loaded}\n                total={state.total}\n                onLoadMore={handleLoadMore}\n                loadMoreMessage='Load more'\n                noMoreMessage='Everything loaded'\n            />\n\n            <button\n                className='position-absolute left-0 bottom-0 margin-10 btn btn-default'\n                type='button'\n                onClick={handleReset}\n            >\n                Reset\n            </button>\n        </React.Fragment>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable\">\n    <div class=\"min-width-150\">\n        <div class=\"text-center margin-bottom-3\">\n            <span class=\"text-medium\">50</span>\n            <span class=\"margin-left-5 margin-right-5\">/</span>\n            <span class=\"text-medium\">150</span>\n        </div>\n        <div class=\"progress height-2 margin-bottom-10 bg-white\">\n            <div class=\"progress-bar\" style=\"width: 33.3333%;\">\n            </div>\n        </div>\n        <div class=\"display-flex justify-content-center\">\n            <button class=\"btn btn-link padding-right-20 margin-top--5\" type=\"button\">\n                <span class=\"rioglyph rioglyph-arrow-down\">\n                </span>Load more</button>\n        </div>\n    </div>\n</div>\n<button class=\"position-absolute left-0 bottom-0 margin-10 btn btn-default\" type=\"button\">Reset</button>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "loaded",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The number of already loaded elements. If set to 0 the progress bar will not be shown."
+                    },
+                    {
+                      "name": "total",
+                      "type": "Number",
+                      "default": "100",
+                      "description": "The number of all elements. If set to 0 the progress bar will not be shown."
+                    },
+                    {
+                      "name": "loadMoreMessage",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The text for the load more button."
+                    },
+                    {
+                      "name": "noMoreMessage",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The message that will be shown when everything is loaded."
+                    },
+                    {
+                      "name": "isInteractive",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "If set to \"false\", the button will not be rendered. The loadMoreMessage will be shown as text."
+                    },
+                    {
+                      "name": "progressBarStyle",
+                      "type": "String",
+                      "default": "white",
+                      "description": "In case the component is used on white background, set the progress bar style to \"gray\"."
+                    },
+                    {
+                      "name": "onLoadMore",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback fired when clicking on the load more button."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable\"><div class=\"min-width-150\"><div class=\"text-center margin-bottom-3\"><span class=\"text-medium\">20</span><span class=\"margin-left-5 margin-right-5\">/</span><span class=\"text-medium\">100</span></div><div class=\"progress height-2 margin-bottom-10 bg-lighter\"><div class=\"progress-bar border border-right-only border-color-white border-width-2\" style=\"width: 20%;\"></div></div><div class=\"display-flex justify-content-center\"><span class=\"padding-top-4 padding-bottom-10\"><div class=\"max-width-150 text-center text-size-12 line-height-125rel\">Showing limited result.<br>Use filters to narrow down the result.</div></span></div></div></div><div class=\"position-absolute left-0 bottom-0 margin-10 btn-toolbar\"><button class=\"btn btn-default\" type=\"button\">Reset</button><button class=\"btn btn-default\" type=\"button\">Load more</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState } from 'react';\n\nimport LoadMoreButton from '@rio-cloud/rio-uikit/LoadMoreButton';\n\nconst initialState = { loaded: 20, total: 100 };\n\nexport default () => {\n    const [state, setState] = useState(initialState);\n\n    const handleLoadMore = () => {\n        const { loaded, total } = state;\n        if (loaded < total) {\n            setState({\n                ...state,\n                loaded: loaded + 20,\n            });\n        }\n    };\n\n    const handleReset = () => setState(initialState);\n\n    return (\n        <React.Fragment>\n            <LoadMoreButton\n                loaded={state.loaded}\n                total={state.total}\n                loadMoreMessage={\n                    <div className='max-width-150 text-center text-size-12 line-height-125rel'>\n                        Showing limited result.\n                        <br />\n                        Use filters to narrow down the result.\n                    </div>\n                }\n                noMoreMessage=''\n                progressBarStyle='gray'\n                isInteractive={false}\n            />\n\n            <div className='position-absolute left-0 bottom-0 margin-10 btn-toolbar'>\n                <button className='btn btn-default' type='button' onClick={handleReset}>\n                    Reset\n                </button>\n                <button className='btn btn-default' type='button' onClick={handleLoadMore}>\n                    Load more\n                </button>\n            </div>\n        </React.Fragment>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable\">\n    <div class=\"min-width-150\">\n        <div class=\"text-center margin-bottom-3\">\n            <span class=\"text-medium\">20</span>\n            <span class=\"margin-left-5 margin-right-5\">/</span>\n            <span class=\"text-medium\">100</span>\n        </div>\n        <div class=\"progress height-2 margin-bottom-10 bg-lighter\">\n            <div class=\"progress-bar border border-right-only border-color-white border-width-2\" style=\"width: 20%;\">\n            </div>\n        </div>\n        <div class=\"display-flex justify-content-center\">\n            <span class=\"padding-top-4 padding-bottom-10\">\n                <div class=\"max-width-150 text-center text-size-12 line-height-125rel\">Showing limited result.<br>Use filters to narrow down the result.</div>\n            </span>\n        </div>\n    </div>\n</div>\n<div class=\"position-absolute left-0 bottom-0 margin-10 btn-toolbar\">\n    <button class=\"btn btn-default\" type=\"button\">Reset</button>\n    <button class=\"btn btn-default\" type=\"button\">Load more</button>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "loaded",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The number of already loaded elements. If set to 0 the progress bar will not be shown."
+                    },
+                    {
+                      "name": "total",
+                      "type": "Number",
+                      "default": "100",
+                      "description": "The number of all elements. If set to 0 the progress bar will not be shown."
+                    },
+                    {
+                      "name": "loadMoreMessage",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The text for the load more button."
+                    },
+                    {
+                      "name": "noMoreMessage",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The message that will be shown when everything is loaded."
+                    },
+                    {
+                      "name": "isInteractive",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "If set to \"false\", the button will not be rendered. The loadMoreMessage will be shown as text."
+                    },
+                    {
+                      "name": "progressBarStyle",
+                      "type": "String",
+                      "default": "white",
+                      "description": "In case the component is used on white background, set the progress bar style to \"gray\"."
+                    },
+                    {
+                      "name": "onLoadMore",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback fired when clicking on the load more button."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:05.367Z",
+    "source": "https://uikit.developers.rio.cloud/#components/mainNavigation",
+    "category": "Components",
+    "section": "Navigation",
+    "slug": "components/mainnavigation",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "429d13aa710ba3866a1a3ea55807a2b0a0ef6dbd8e5a5b5a55e0e31079a8ce07"
+  },
+  "title": "MainNavigation",
+  "lead": null,
+  "content": [
+    {
+      "heading": "MainNavigation",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-checkerboard padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"ApplicationLayout bg-lighter\" style=\"--ApplicationLayoutBodyBottomBarHeight: 54px;\"><div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\"><nav class=\"ApplicationHeader user-select-none\"><div class=\"navbar-header\"><span class=\"navbar-brand home-icon\"></span></div><ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\"><li class=\"dropdown\"><a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\"><span>RIO Service</span></a></li></ul><ul class=\"SubmoduleNavigation nav\"><li class=\"submodule \" data-nav-item-key=\"1\"><a href=\"#components/appLayout\">Navigation 1</a></li><li class=\"submodule \" data-nav-item-key=\"2\"><a href=\"#2\">Navigation 2</a></li><li class=\"submodule \" data-nav-item-key=\"3\"><a href=\"#3\">Navigation 3</a></li></ul><ul class=\"ApplicationActionBar nav navbar-nav navbar-right \"></ul></nav></div><div class=\"ApplicationLayoutBody uikitDemo\"><div class=\"module-content-wrapper\"><div class=\"module-content smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\"><div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\"><div class=\"scrollbar-content-wrapper\"><div class=\"scrollbar-content\"><div class=\"dummy-class\"></div></div></div></div><div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\"><div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\"></div></div><div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\"><div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\"></div></div></div></div><span class=\"scroll-to-top\"><button type=\"button\" class=\"btn btn-primary btn-icon-only\"><span class=\"rioglyph rioglyph-arrow-up\"></span></button></span></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { NavLink } from 'react-router-dom';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\n\nconst navItems = [\n    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },\n    {\n        key: '2',\n        route: (\n            <NavLink to='/2' onClick={event => event.preventDefault()}>\n                Navigation 2\n            </NavLink>\n        ),\n    },\n    {\n        key: '3',\n        route: (\n            <NavLink to='/3' onClick={event => event.preventDefault()}>\n                Navigation 3\n            </NavLink>\n        ),\n    },\n];\n\nexport default () => (\n    <ApplicationLayout className='bg-lighter'>\n        <ApplicationLayout.Header>\n            <ApplicationHeader label='RIO Service' navItems={navItems} />\n        </ApplicationLayout.Header>\n        <ApplicationLayout.Body className='uikitDemo'>\n            <div className='dummy-class' />\n        </ApplicationLayout.Body>\n    </ApplicationLayout>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"ApplicationLayout bg-lighter\" style=\"--ApplicationLayoutBodyBottomBarHeight: 54px;\">\n    <div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\">\n        <nav class=\"ApplicationHeader user-select-none\">\n            <div class=\"navbar-header\">\n                <span class=\"navbar-brand home-icon\">\n                </span>\n            </div>\n            <ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\">\n                <li class=\"dropdown\">\n                    <a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\">\n                        <span>RIO Service</span>\n                    </a>\n                </li>\n            </ul>\n            <ul class=\"SubmoduleNavigation nav\">\n                <li class=\"submodule \" data-nav-item-key=\"1\">\n                    <a href=\"#components/appLayout\">Navigation 1</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"2\">\n                    <a href=\"#2\">Navigation 2</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"3\">\n                    <a href=\"#3\">Navigation 3</a>\n                </li>\n            </ul>\n            <ul class=\"ApplicationActionBar nav navbar-nav navbar-right \">\n            </ul>\n        </nav>\n    </div>\n    <div class=\"ApplicationLayoutBody uikitDemo\">\n        <div class=\"module-content-wrapper\">\n            <div class=\"module-content smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                    <div class=\"scrollbar-content-wrapper\">\n                        <div class=\"scrollbar-content\">\n                            <div class=\"dummy-class\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\">\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\">\n                    </div>\n                </div>\n            </div>\n        </div>\n        <span class=\"scroll-to-top\">\n            <button type=\"button\" class=\"btn btn-primary btn-icon-only\">\n                <span class=\"rioglyph rioglyph-arrow-up\">\n                </span>\n            </button>\n        </span>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}