@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Utilities/utilities/deviceutils.json

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:34.588Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/deviceUtils",
+    "category": "Utilities",
+    "section": "Helper",
+    "slug": "utilities/deviceutils",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "5c1b9e540f85a83b93c62621c373a63538a615ca51e7401e4cb7214b63010d16"
+  },
+  "title": "Device Utils",
+  "lead": "Set of utility functions which helps detecting certain devices or functionality.",
+  "content": [
+    {
+      "heading": "Device Utils",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><p>No touch support</p><hr><p>isMobileScreen: false</p><hr><p>isMobile: false</p><hr><p>isDesktop: true</p><hr><p>isRetinaDevice: false</p><hr><p>isMac: true</p><hr><p>Loaded in iFrame: false</p><hr><p>Zoom is: enabled</p><div class=\"display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0\" data-capture-callout=\"true\"><div><span class=\"label label-info label-condensed label-filled\">Note</span></div><div class=\"width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1\">Because Apple does not allow to disable zoom on touch devices, <code>isZoomDisabled</code> has no effect when using iOS.</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useEffect, useState } from 'react';\n\nimport { Note } from '../../../components/Note';\n\nimport {\n    hasTouch,\n    isMobile,\n    isMobileScreen,\n    isDesktop,\n    isRetinaDevice,\n    toggleZoomOnMobile,\n    inIframe,\n    isMac,\n} from '@rio-cloud/rio-uikit/DeviceUtils';\nimport useWindowResize from '@rio-cloud/rio-uikit/useWindowResize';\n\nexport default () => {\n    const [isZoomDisabled, setIsZoomDisabled] = useState(false);\n    const [isMobileScreenSize, setIsMobileScreenSize] = useState(isMobileScreen());\n\n    useEffect(() => {\n        // Disables the Zoom for the mobile devices.\n        // This is not good for accessibility but makes the webpage\n        // feel more like a native app.\n        toggleZoomOnMobile();\n        setIsZoomDisabled(document.head.querySelector('[name=\"viewport\"]')?.content.includes('user-scalable=0'));\n    }, []);\n\n    useWindowResize(() => setIsMobileScreenSize(isMobileScreen()));\n\n    return (\n        <div>\n            <p>{hasTouch() ? 'Device has touch. Treat it well!' : 'No touch support'}</p>\n            <hr />\n            <p>isMobileScreen: {`${isMobileScreenSize}`}</p>\n            <hr />\n            <p>isMobile: {`${isMobile()}`}</p>\n            <hr />\n            <p>isDesktop: {`${isDesktop()}`}</p>\n            <hr />\n            <p>isRetinaDevice: {`${isRetinaDevice()}`}</p>\n            <hr />\n            <p>isMac: {`${isMac()}`}</p>\n            <hr />\n            <p>Loaded in iFrame: {`${inIframe()}`}</p>\n            <hr />\n            <p>Zoom is: {isZoomDisabled ? 'disabled' : 'enabled'}</p>\n            <Note>\n                Because Apple does not allow to disable zoom on touch devices, <code>isZoomDisabled</code> has no effect\n                when using iOS.\n            </Note>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <p>No touch support</p>\n    <hr>\n    <p>isMobileScreen: false</p>\n    <hr>\n    <p>isMobile: false</p>\n    <hr>\n    <p>isDesktop: true</p>\n    <hr>\n    <p>isRetinaDevice: false</p>\n    <hr>\n    <p>isMac: true</p>\n    <hr>\n    <p>Loaded in iFrame: false</p>\n    <hr>\n    <p>Zoom is: enabled</p>\n    <div class=\"display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0\" data-capture-callout=\"true\">\n        <div>\n            <span class=\"label label-info label-condensed label-filled\">Note</span>\n        </div>\n        <div class=\"width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1\">Because Apple does not allow to disable zoom on touch devices, <code>isZoomDisabled</code> has no effect when using iOS.</div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/featuretoggles.json

@@ -0,0 +1,42 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:34.515Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/featureToggles",
+    "category": "Utilities",
+    "section": "Helper",
+    "slug": "utilities/featuretoggles",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "03865b81e29994cc632c18e54222ed65b544911458dfad862348b920b7a1a42d"
+  },
+  "title": "URL feature toggles",
+  "lead": "URL-based feature toggles (also known as feature flags) are a powerful development technique that allows you to enable or disable features in your application dynamically, without deploying new code.",
+  "content": [
+    {
+      "heading": "URL feature toggles",
+      "body": "",
+      "examples": []
+    },
+    {
+      "heading": "Feature toggles detection",
+      "body": "The feature toggle detection system in your application is designed to handle the dynamic activation and retrieval of feature toggles from two primary sources:\n\n- URL Query Parameters Toggles can be passed through the URL as query parameters (e.g., ?ft_demo=true), allowing for easy testing or overriding of features without modifying code\n- LocalStorage If a toggle is not present in the URL, the system falls back to using stored values in the browser's localStorage, ensuring that user preferences or feature states are preserved across sessions",
+      "examples": []
+    },
+    {
+      "heading": "Defining feature toggles",
+      "body": "Feature toggles are defined in a centralized configuration map, with each toggle specifying its corresponding query parameter name, its data type (boolean, string, or number) and an optional default value. This allows you to easily configure new toggles.\n\nType transformers\n\n- asBoolean and asBooleanWithDefault: Interprets the parameter as a boolean (e.g., true, false, 1, 0)\n- asString and asStringWithDefault: Treats the parameter as a string\n- asNumber and asNumberWithDefault: Converts the parameter into a number\n\nThe detectFeatureToggles function first checks if the specified toggle exists in the URL by extracting and parsing the query string (i.e., everything after the ? in the URL). If the parameter is found, its value is transformed using the appropriate type transformer (boolean, string, number), saved in localStorage, and returned.\n\n```typescript\nimport { detectFeatureToggles, asString, asBoolean, asNumber } from '@rio-cloud/rio-uikit/urlFeatureToggles';\n\n// Define old toggles to clean up\nconst oldToggles = ['ft_eventTeaser', 'ft_survey', 'ft_menu'];\n\n// Define toggle transformation functions with their respective names and\n// export the detected feature toggles as a singleton\nexport const featureToggles = detectFeatureToggles(\n    {\n        enforcedLocale: asString('ft_enforceLocale'),\n        tracing: asBoolean('ft_tracing'),\n        demo: asBooleanWithDefault('ft_demo', false),\n        maxItems: asNumberWithDefault('ft_maxItems', 10),\n    },\n    oldToggles\n);\n```\n\nDefault values\n\nFor each type of transformer there is a *WithDefault variant. This function accepts a default value as second parameter. The default value is only returned if neither the query parameter nor the local storage contain a value for the feature toggle. A feature toggle with a default value will never be null. This fact is also reflected in the type of the feature toggle properties in the object returned by detectFeatureToggles.\n\nCustomizable prefix\n\nFeature toggles are stored in localStorage with a predefined prefix (default: featureToggle.), which can be customized as needed. This prefix helps to avoid naming collisions with other items stored in localStorage and makes it clear which items are related to feature toggles.\n\n```typescript\nexport const featureToggles = detectFeatureToggles(\n    { demo: asBoolean('ft_demo') },\n    oldToggles,\n    'myCustomPrefix.'\n);\n```",
+      "examples": []
+    },
+    {
+      "heading": "Usage",
+      "body": "Suppose you want to enable or disable a demo mode in your application. You can pass ?ft_demo=true in the URL or rely on the value previously stored in localStorage.\n\n- URL: http://example.com/#?ft_demo=true&ft_enforceLocale=de-DE\n- Expected behavior: The system detects the ft_demo parameter and interprets it as true (boolean) The ft_enforceLocale is stored as a string (\"de-DE\") If a value like ft_maxItems is not provided in the URL, the system will try to fetch it from localStorage\n\n- The system detects the ft_demo parameter and interprets it as true (boolean)\n- The ft_enforceLocale is stored as a string (\"de-DE\")\n- If a value like ft_maxItems is not provided in the URL, the system will try to fetch it from localStorage\n\nTo use a feature toggle, simply reference it in your code\n\n```typescript\nif (featureToggles.demo) {\n    // Render demo feature\n}\n```",
+      "examples": []
+    },
+    {
+      "heading": "Benefits",
+      "body": "- Flexibility This approach allows toggles to be easily overridden via URL for testing or debugging purposes without changing the codebase\n- Persistence By leveraging localStorage, feature toggles persist across browser sessions, ensuring a consistent experience for users\n- Type safety Type transformation functions (asBoolean, asString, asNumber) ensure that toggles are correctly interpreted based on the expected data type\n- Clean state management Unused toggles can be cleaned up from localStorage, ensuring there is no unnecessary buildup of outdated data",
+      "examples": []
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/fueltypeutils.json

@@ -0,0 +1,118 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:34.953Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/fuelTypeUtils",
+    "category": "Utilities",
+    "section": "Helper",
+    "slug": "utilities/fueltypeutils",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "03a9ebced1591b42990dbfc0b6078b6ad8ecad07cbd56f102415a190e55f3ad9"
+  },
+  "title": "Fuel type utils",
+  "lead": "There is a wide variety of standardized fuel types, and on top of that, some projects or systems introduce their own custom definitions. While the naming can differ, many of these values carry the same semantic meaning. To avoid confusion and ensure consistent visual representation, we provide a centralized mapping of fuel types to icons.",
+  "content": [
+    {
+      "heading": "Fuel type utils",
+      "body": "In this mapping, multiple values may point to the same icon when they represent equivalent or very similar fuel types. This guarantees that the UI remains consistent across the application and that users always see the correct symbol, regardless of the data source.",
+      "examples": []
+    },
+    {
+      "heading": "getFuelIcon",
+      "body": "The getFuelIcon function offers a single, reliable way to retrieve the correct icon:\n\n- It accepts any known fuel type value.\n- It returns the corresponding Rioglyph icon.\n- Unknown or unsupported values automatically fall back to the unknown icon, preventing broken or missing visuals.\n\nThis approach ensures that developers don’t need to decide individually which icon to use. Instead, all mappings are maintained in one place, making the system easier to understand, maintain, and extend. Adding new fuel types or adjusting existing mappings can be done centrally without requiring changes throughout the codebase.",
+      "examples": []
+    },
+    {
+      "heading": "Fuel type utils",
+      "body": "These utilities help group, filter, and render fuel types based on predefined semantic categories such as liquid, gas, electric, hydrogen, or hybrid.\n\n- you need to filter items by fuel type group,\n- show fuel group filter buttons with icons and counters,\n- or render the appropriate icon for a specific fuel type or group.\n\nOverview\n\n- fuelTypeGroupIcons Maps each fuel type group to its representative icon (e.g. for use in UI filter buttons or legends).\n- fuelTypeGroups List of all defined fuel type groups (excluding unknown). Useful to iterate over filterable groups.\n- getFuelTypeGroupIcon(fuelTypeGroup) Returns the icon associated with a given fuel group.\n- filterByFuelTypeGroup(items, groups, getFuelType) Filters a list of items by their fuel group, using a custom fuel type extractor function.\n- countFuelTypeGroups(items, getFuelType) Counts how many items belong to each fuel group, useful for showing badge counters on group filter buttons.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-column gap-15\"><div><label>Single rioglyph fuel icon</label><div class=\"display-flex gap-5 align-items-center text-size-20\">This is a diesel truck <span class=\"rioglyph rioglyph-fuel-liquid\"></span></div><div class=\"display-flex gap-5 align-items-center text-size-20\">This is a gasoline truck <span class=\"rioglyph rioglyph-fuel-liquid\"></span></div><div class=\"display-flex gap-5 align-items-center text-size-20\">This is an electric bus <span class=\"rioglyph rioglyph-fuel-electric\"></span></div></div><div><label>Paired rioglyph fuel icon</label><div class=\"display-flex gap-10\"><span class=\"rioglyph-icon-pair text-size-h1\"><span class=\"rioglyph rioglyph-truck\"></span><span class=\"rioglyph rioglyph-fuel-liquid\"></span></span><span class=\"rioglyph-icon-pair text-size-h1\"><span class=\"rioglyph rioglyph-truck\"></span><span class=\"rioglyph rioglyph-fuel-liquid\"></span></span><span class=\"rioglyph-icon-pair text-size-h1\"><span class=\"rioglyph rioglyph-bus\"></span><span class=\"rioglyph rioglyph-fuel-electric\"></span></span></div></div><div><label>Unknown paired fuel icon</label><div class=\"display-flex gap-10\"><span class=\"rioglyph-icon-pair text-size-h1\"><span class=\"rioglyph rioglyph-truck\"></span><span class=\"rioglyph rioglyph-question\"></span></span></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Rioglyph from '@rio-cloud/rio-uikit/Rioglyph';\nimport { getFuelIcon } from '@rio-cloud/rio-uikit/fuelTypeUtils';\n\nexport default () => {\n    return (\n        <div className='display-flex flex-column gap-15'>\n            <div>\n                <label>Single rioglyph fuel icon</label>\n                <div className='display-flex gap-5 align-items-center text-size-20'>\n                    This is a diesel truck <span className={`rioglyph ${getFuelIcon('diesel')}`} />\n                </div>\n                <div className='display-flex gap-5 align-items-center text-size-20'>\n                    This is a gasoline truck <span className={`rioglyph ${getFuelIcon('gas')}`} />\n                </div>\n                <div className='display-flex gap-5 align-items-center text-size-20'>\n                    This is an electric bus <span className={`rioglyph ${getFuelIcon('electric')}`} />\n                </div>\n            </div>\n            <div>\n                <label>Paired rioglyph fuel icon</label>\n                <div className='display-flex gap-10'>\n                    <Rioglyph size='h1' icon={'rioglyph-truck'} pairIcon={getFuelIcon('diesel')} />\n                    <Rioglyph size='h1' icon={'rioglyph-truck'} pairIcon={getFuelIcon('gas')} />\n                    <Rioglyph size='h1' icon={'rioglyph-bus'} pairIcon={getFuelIcon('electric')} />\n                </div>\n            </div>\n            <div>\n                <label>Unknown paired fuel icon</label>\n                <div className='display-flex gap-10'>\n                    <Rioglyph size='h1' icon={'rioglyph-truck'} pairIcon={getFuelIcon('whatever')} />\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column gap-15\">\n    <div>\n        <label>Single rioglyph fuel icon</label>\n        <div class=\"display-flex gap-5 align-items-center text-size-20\">This is a diesel truck <span class=\"rioglyph rioglyph-fuel-liquid\">\n            </span>\n        </div>\n        <div class=\"display-flex gap-5 align-items-center text-size-20\">This is a gasoline truck <span class=\"rioglyph rioglyph-fuel-liquid\">\n            </span>\n        </div>\n        <div class=\"display-flex gap-5 align-items-center text-size-20\">This is an electric bus <span class=\"rioglyph rioglyph-fuel-electric\">\n            </span>\n        </div>\n    </div>\n    <div>\n        <label>Paired rioglyph fuel icon</label>\n        <div class=\"display-flex gap-10\">\n            <span class=\"rioglyph-icon-pair text-size-h1\">\n                <span class=\"rioglyph rioglyph-truck\">\n                </span>\n                <span class=\"rioglyph rioglyph-fuel-liquid\">\n                </span>\n            </span>\n            <span class=\"rioglyph-icon-pair text-size-h1\">\n                <span class=\"rioglyph rioglyph-truck\">\n                </span>\n                <span class=\"rioglyph rioglyph-fuel-liquid\">\n                </span>\n            </span>\n            <span class=\"rioglyph-icon-pair text-size-h1\">\n                <span class=\"rioglyph rioglyph-bus\">\n                </span>\n                <span class=\"rioglyph rioglyph-fuel-electric\">\n                </span>\n            </span>\n        </div>\n    </div>\n    <div>\n        <label>Unknown paired fuel icon</label>\n        <div class=\"display-flex gap-10\">\n            <span class=\"rioglyph-icon-pair text-size-h1\">\n                <span class=\"rioglyph rioglyph-truck\">\n                </span>\n                <span class=\"rioglyph rioglyph-question\">\n                </span>\n            </span>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "getFuelIcon",
+                  "rows": [
+                    {
+                      "name": "fuelType",
+                      "type": "FuelType",
+                      "default": "unknown",
+                      "description": "The specific fuel type of the item. This will be resolved to a fuel group icon. Supported values include: gas, diesel, electric, hydrogen, cng, and more."
+                    }
+                  ]
+                },
+                {
+                  "heading": "getFuelTypeGroupIcon",
+                  "rows": [
+                    {
+                      "name": "fuelTypeGroup",
+                      "type": "FuelTypeGroup",
+                      "default": "",
+                      "description": "The fuel group identifier used to resolve the corresponding icon."
+                    }
+                  ]
+                },
+                {
+                  "heading": "filterByFuelTypeGroup",
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "T[]",
+                      "default": "",
+                      "description": "The list of items to filter by fuel type group."
+                    },
+                    {
+                      "name": "activeGroups",
+                      "type": "FuelTypeGroup[]",
+                      "default": "",
+                      "description": "Array of selected fuel groups to include in the filtered result."
+                    },
+                    {
+                      "name": "getFuelType",
+                      "type": "(item: T) => FuelType | undefined",
+                      "default": "",
+                      "description": "Function used to extract the fuel type from each item."
+                    }
+                  ]
+                },
+                {
+                  "heading": "countFuelTypeGroups",
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "T[]",
+                      "default": "",
+                      "description": "The list of items to count by fuel group."
+                    },
+                    {
+                      "name": "getFuelType",
+                      "type": "(item: T) => FuelType | undefined",
+                      "default": "",
+                      "description": "Function used to extract the fuel type from each item."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/routeutils.json

@@ -0,0 +1,34 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:34.586Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/routeUtils",
+    "category": "Utilities",
+    "section": "Helper",
+    "slug": "utilities/routeutils",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "40d394e52fc6dd50963c1c0cff4ed4cfaaae6407d1a94d62730e9866dc789b5e"
+  },
+  "title": "Route Utils",
+  "lead": "Set of utility functions which helps parsing and stringify state into and from the URL.",
+  "content": [
+    {
+      "heading": "Route Utils",
+      "body": "These functions will combine sort props like sort order and sort direction and map table settings into a compact comma separated list where hidden columns have a leading \"-\" and the width of a column will be attached to the column name if it it different from the default.\n\nExample: http:/my-url/#demoService/table?sort=+userNickName&columns=itemId,userImageStatus,userNickName:278,userFirstName,userLastName,userActivity,userJobTitle,userEmail,userPhoneNumber",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground shadow-default rounded border margin-bottom-20\" data-capture-example-id=\"example-1\"><div class=\"playground-expander\"><ul class=\"expander-list list-group border border-top-only rounded-bottom\" data-capture-code-list-id=\"codelist-1\"><li class=\"list-group-item overflow-hidden expandable open\"><div class=\"expander-list-header expander-list-header-bg\" aria-label=\"expander item header\"><span class=\"expander-list-header-content\"><span class=\"code-sample-header\"></span></span><span class=\"expander-icon rioglyph rioglyph-chevron-down\"></span></div><div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\"><div class=\"expander-list-body-wrapper\"><div class=\"expander-list-body\" aria-label=\"expander item body\"><pre class=\"padding-10 margin-bottom-0 language-javascript\" tabindex=\"0\"><code class=\"language-javascript\"><span class=\"token comment\">// Note: this sample uses the \"qs\" library to parse and stringify data</span>\n\n<span class=\"token keyword\">import</span> qs <span class=\"token keyword\">from</span> <span class=\"token string\">'qs'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> getOr <span class=\"token keyword\">from</span> <span class=\"token string\">'lodash/fp/getOr'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> tableConfig<span class=\"token punctuation\">,</span> <span class=\"token constant\">BASE_PATH</span> <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'./yourTableConfig'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span>\n    parseColumnsSettingsStrings<span class=\"token punctuation\">,</span>\n    mapColumnsSettingsToStrings<span class=\"token punctuation\">,</span>\n    getSortDirShort<span class=\"token punctuation\">,</span>\n    parseSorting<span class=\"token punctuation\">,</span>\n    type ColumnsSettings<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@rio-cloud/rio-uikit/routeUtils'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Options for the \"qs\" library</span>\n<span class=\"token keyword\">const</span> <span class=\"token constant\">OPTIONS</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">comma</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// required to parse comma separated string into array</span>\n    <span class=\"token literal-property property\">arrayFormat</span><span class=\"token operator\">:</span> <span class=\"token string\">'comma'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// required to stringify arrays into comma separated strings</span>\n    <span class=\"token literal-property property\">indices</span><span class=\"token operator\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// don't use array indices</span>\n    <span class=\"token literal-property property\">encode</span><span class=\"token operator\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// don't encode the entire string as it will be done individually for certain params</span>\n    <span class=\"token literal-property property\">decode</span><span class=\"token operator\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n    <span class=\"token literal-property property\">skipNulls</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// required to remove empty params</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Sample code for parsing the route just for illustration how to use the utils functions</span>\n<span class=\"token comment\">// Feel free to modify this to your needs.</span>\n<span class=\"token comment\">// Note: the \"parseRoute\" and \"makeRoute\" functions may contain more props which are left out in this demo</span>\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">const</span> <span class=\"token function-variable function\">parseRoute</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token literal-property property\">router</span><span class=\"token operator\">:</span> any</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> location <span class=\"token operator\">=</span> <span class=\"token function\">getOr</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'location'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span>router<span class=\"token punctuation\">)</span> <span class=\"token keyword\">as</span> Location<span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> searchParams <span class=\"token operator\">=</span> location<span class=\"token punctuation\">.</span>search <span class=\"token operator\">?</span> location<span class=\"token punctuation\">.</span>search<span class=\"token punctuation\">.</span><span class=\"token function\">replace</span><span class=\"token punctuation\">(</span><span class=\"token string\">'?'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">''</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">:</span> location<span class=\"token punctuation\">.</span>search<span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> sort<span class=\"token punctuation\">,</span> columns <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> qs<span class=\"token punctuation\">.</span><span class=\"token function\">parse</span><span class=\"token punctuation\">(</span>searchParams<span class=\"token punctuation\">,</span> <span class=\"token constant\">OPTIONS</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">const</span> sorting <span class=\"token operator\">=</span> sort <span class=\"token operator\">&amp;&amp;</span> <span class=\"token function\">parseSorting</span><span class=\"token punctuation\">(</span>sort<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">sortBy</span><span class=\"token operator\">:</span> sorting<span class=\"token operator\">?.</span>sortBy<span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">sortDir</span><span class=\"token operator\">:</span> sorting<span class=\"token operator\">?.</span>sortDir<span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">columns</span><span class=\"token operator\">:</span> columns <span class=\"token operator\">&amp;&amp;</span> <span class=\"token function\">parseColumnsSettingsStrings</span><span class=\"token punctuation\">(</span>columns<span class=\"token punctuation\">,</span> tableConfig<span class=\"token punctuation\">.</span>defaultColumnsDetails<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\ntype mapRouteProps <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token literal-property property\">sortBy</span><span class=\"token operator\">:</span> string<span class=\"token punctuation\">;</span>\n    <span class=\"token literal-property property\">sortDir</span><span class=\"token operator\">:</span> string<span class=\"token punctuation\">;</span>\n    <span class=\"token literal-property property\">columns</span><span class=\"token operator\">:</span> ColumnsSettings<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">const</span> <span class=\"token function-variable function\">makeRoute</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span> sortBy<span class=\"token punctuation\">,</span> sortDir<span class=\"token punctuation\">,</span> columns <span class=\"token punctuation\">}</span><span class=\"token operator\">:</span> mapRouteProps</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// Set props to undefined or null in order to remove it from the URL when not defined</span>\n    <span class=\"token keyword\">const</span> params <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">sort</span><span class=\"token operator\">:</span> sortBy <span class=\"token operator\">&amp;&amp;</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span><span class=\"token function\">getSortDirShort</span><span class=\"token punctuation\">(</span>sortDir<span class=\"token punctuation\">)</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>sortBy<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">columns</span><span class=\"token operator\">:</span> columns <span class=\"token operator\">&amp;&amp;</span> <span class=\"token function\">mapColumnsSettingsToStrings</span><span class=\"token punctuation\">(</span>columns<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> queryParams <span class=\"token operator\">=</span> qs<span class=\"token punctuation\">.</span><span class=\"token function\">stringify</span><span class=\"token punctuation\">(</span>params<span class=\"token punctuation\">,</span> <span class=\"token constant\">OPTIONS</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> searchFragment <span class=\"token operator\">=</span> queryParams <span class=\"token operator\">&amp;&amp;</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">?</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>queryParams<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">return</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span><span class=\"token constant\">BASE_PATH</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">/</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>searchFragment<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n</code></pre></div></div></div></li></ul></div></div>",
+          "tabs": [
+            {
+              "label": "",
+              "language": "text",
+              "code": "// Note: this sample uses the \"qs\" library to parse and stringify data\n\nimport qs from 'qs';\nimport getOr from 'lodash/fp/getOr';\n\nimport { tableConfig, BASE_PATH } from './yourTableConfig';\n\nimport {\n    parseColumnsSettingsStrings,\n    mapColumnsSettingsToStrings,\n    getSortDirShort,\n    parseSorting,\n    type ColumnsSettings,\n} from '@rio-cloud/rio-uikit/routeUtils';\n\n// Options for the \"qs\" library\nconst OPTIONS = {\n    comma: true, // required to parse comma separated string into array\n    arrayFormat: 'comma', // required to stringify arrays into comma separated strings\n    indices: false, // don't use array indices\n    encode: false, // don't encode the entire string as it will be done individually for certain params\n    decode: false,\n    skipNulls: true, // required to remove empty params\n};\n\n// Sample code for parsing the route just for illustration how to use the utils functions\n// Feel free to modify this to your needs.\n// Note: the \"parseRoute\" and \"makeRoute\" functions may contain more props which are left out in this demo\nexport const parseRoute = (router: any) => {\n    const location = getOr({}, 'location')(router) as Location;\n    const searchParams = location.search ? location.search.replace('?', '') : location.search;\n\n    const { sort, columns } = qs.parse(searchParams, OPTIONS);\n\n    const sorting = sort && parseSorting(sort);\n\n    return {\n        sortBy: sorting?.sortBy,\n        sortDir: sorting?.sortDir,\n        columns: columns && parseColumnsSettingsStrings(columns, tableConfig.defaultColumnsDetails),\n    };\n};\n\ntype mapRouteProps = {\n    sortBy: string;\n    sortDir: string;\n    columns: ColumnsSettings;\n};\n\nexport const makeRoute = ({ sortBy, sortDir, columns }: mapRouteProps) => {\n    // Set props to undefined or null in order to remove it from the URL when not defined\n    const params = {\n        sort: sortBy && `${getSortDirShort(sortDir)}${sortBy}`,\n        columns: columns && mapColumnsSettingsToStrings(columns),\n    };\n    const queryParams = qs.stringify(params, OPTIONS);\n    const searchFragment = queryParams && `?${queryParams}`;\n    return `${BASE_PATH}/${searchFragment}`;\n};"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/useaftermount.json

@@ -0,0 +1,63 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:35.952Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useAfterMount",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "slug": "utilities/useaftermount",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "c3a9d88b356418ef10bbcc48b73d5db42742a6c95d9ff990848e32a48aead39e"
+  },
+  "title": "useAfterMount",
+  "lead": "The useAfterMount hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.",
+  "content": [
+    {
+      "heading": "useAfterMount",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><p>Count: 0</p><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Increment</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState, useEffect } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport useAfterMount from '@rio-cloud/rio-uikit/useAfterMount';\n\nexport default () => {\n    const [count, setCount] = useState(0);\n\n    // This will run on initial mount and whenever 'count' changes\n    useEffect(() => {\n        console.log('useEffect: Component mounted or count changed:', count);\n    }, [count]);\n\n    // This will run only after the initial mount when 'count' changes\n    useAfterMount(() => {\n        console.log('useAfterMount: Count changed:', count);\n    }, [count]);\n\n    return (\n        <div>\n            <p>Count: {count}</p>\n            <Button onClick={() => setCount(count + 1)}>Increment</Button>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <p>Count: 0</p>\n    <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Increment</button>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "callback",
+                      "type": "Function",
+                      "default": "",
+                      "description": "The effect callback function to be used after the component has been mounted."
+                    },
+                    {
+                      "name": "deps",
+                      "type": "Array",
+                      "default": "",
+                      "description": "The effect dependencies that trigger the effect."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/useaverage.json

@@ -0,0 +1,86 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:46.819Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useAverage",
+    "category": "Utilities",
+    "section": "Data aggregation hooks",
+    "slug": "utilities/useaverage",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "9913b312c5138556111a42146d8d1975108460b225b7c6a7581e85853c287592"
+  },
+  "title": "useAverage",
+  "lead": "Calculates the arithmetic mean of numeric values extracted from a list of objects using a dot-separated path. Supports localized number formats through optional locale configuration.",
+  "content": [
+    {
+      "heading": "useAverage",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div>Average weight deliveries 1: <b>982,69 kg</b></div><div>Average weight deliveries 2: <b>982,69 kg</b></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { IntlProvider, FormattedNumber } from 'react-intl';\n\nimport useAverage from '@rio-cloud/rio-uikit/useAverage';\n\nconst deliveries1 = [\n    { shipment: { weight: '1.200,5 kg' } },\n    { shipment: { weight: '980,25 kg' } },\n    { shipment: { weight: '750 kg' } },\n    { shipment: { weight: '1.000 kg' } },\n];\n\nconst deliveries2 = [\n    { shipment: { weight: 1200.5 } },\n    { shipment: { weight: 980.25 } },\n    { shipment: { weight: 750 } },\n    { shipment: { weight: 1_000 } },\n];\n\nexport default () => {\n    const averageWeight1 = useAverage(deliveries1, 'shipment.weight', {\n        locale: 'de-DE',\n    });\n\n    const averageWeight2 = useAverage(deliveries2, 'shipment.weight');\n\n    return (\n        <IntlProvider locale='de-DE'>\n            <div>\n                Average weight deliveries 1:{' '}\n                <b>\n                    <FormattedNumber value={averageWeight1} style='unit' unit='kilogram' maximumFractionDigits={2} />\n                </b>\n            </div>\n            <div>\n                Average weight deliveries 2:{' '}\n                <b>\n                    <FormattedNumber value={averageWeight2} style='unit' unit='kilogram' maximumFractionDigits={2} />\n                </b>\n            </div>\n        </IntlProvider>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>Average weight deliveries 1: <b>982,69 kg</b>\n</div>\n<div>Average weight deliveries 2: <b>982,69 kg</b>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Options for the `useAverage` hook",
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "unknown[]",
+                      "default": "",
+                      "description": "The array of objects to extract numeric values from."
+                    },
+                    {
+                      "name": "path",
+                      "type": "string",
+                      "default": "",
+                      "description": "Dot-separated path to the numeric value inside each object."
+                    },
+                    {
+                      "name": "options",
+                      "type": "object",
+                      "default": "",
+                      "description": "Optional configuration for number parsing."
+                    },
+                    {
+                      "name": "└locale",
+                      "type": "string",
+                      "default": "\"en-GB\"",
+                      "description": "Locale string used for parsing localized number formats. Affects grouping and decimal separator interpretation."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Return value of the `useAverage` hook",
+                  "rows": [
+                    {
+                      "name": "value",
+                      "type": "number",
+                      "default": "",
+                      "description": "The average of all valid numeric values found at the given path in the item list."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/useclickoutside.json

@@ -0,0 +1,69 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:37.701Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useClickOutside",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "slug": "utilities/useclickoutside",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "52dc31bbc495e52aca5116171d8a505d1ea2b3f844c485c18d34b1fdc0e1f4fc"
+  },
+  "title": "useClickOutside",
+  "lead": "The useClickOutside hook allows to easily detect events outside a referenced element.",
+  "content": [
+    {
+      "heading": "useClickOutside",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-column justify-content-center align-items-center height-100\"><label class=\"margin-bottom-10\">Click outside the box</label><div class=\"width-100 height-100 cursor-pointer rounded bg-highlight\"></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport useClickOutside from '@rio-cloud/rio-uikit/useClickOutside';\n\nexport default () => {\n    const [background, setBackground] = useState('bg-highlight');\n\n    const ref = useClickOutside(() => setBackground('bg-light'));\n\n    return (\n        <div className='display-flex flex-column justify-content-center align-items-center height-100'>\n            <label className='margin-bottom-10'>Click outside the box</label>\n            <div\n                ref={ref}\n                className={`width-100 height-100 cursor-pointer rounded ${background}`}\n                onClick={() => setBackground('bg-highlight')}\n            />\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column justify-content-center align-items-center height-100\">\n    <label class=\"margin-bottom-10\">Click outside the box</label>\n    <div class=\"width-100 height-100 cursor-pointer rounded bg-light\">\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "callback",
+                      "type": "(event: MouseEvent | TouchEvent) => void",
+                      "default": "",
+                      "description": "The callback function to be triggered when click or touch events happen outside the referenced element."
+                    },
+                    {
+                      "name": "eventTypes",
+                      "type": "keyof DocumentEventMap",
+                      "default": "['mousedown', 'touchstart']",
+                      "description": "Customize list of events to listen on."
+                    },
+                    {
+                      "name": "isActive",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Flag to only listen for clicks when target element active. This comes in handy for dropdowns where the event can be registered only when the dropdown is open."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/useclipboard.json

@@ -0,0 +1,57 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:42.785Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useClipboard",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "slug": "utilities/useclipboard",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "6f5273f0fad37195059ef2a9ea8764221ae71f382941bb35303bec1082038782"
+  },
+  "title": "useClipboard",
+  "lead": "The useClipboard hook allows to easily copy something to the browsers clipboard.",
+  "content": [
+    {
+      "heading": "useClipboard",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"form-group max-width-500 margin-auto padding-25\"><label for=\"random-uuid\" class=\"display-inline-block\"><span>Random UUID</span></label><div class=\"input-group\"><input id=\"random-uuid\" class=\"form-control\" type=\"text\" value=\"1d247ad0-d642-4e40-b420-21c0f50aab55\"><div class=\"input-group-addon\"><button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component position-absolute top-1 right-1\" tabindex=\"0\"><span class=\"rioglyph rioglyph-duplicate\"></span></button></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useEffect, useState } from 'react';\n\nimport useClipboard from '@rio-cloud/rio-uikit/useClipboard';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => {\n    const [inputValue, setInputValue] = useState<string>(crypto.randomUUID());\n\n    const clipboard = useClipboard();\n\n    useEffect(() => {\n        clipboard.copied && Notification.default('Text copied to clipboard');\n    }, [clipboard.copied]);\n\n    const handleCopyButtonClick = () => {\n        clipboard.copy(inputValue);\n    };\n\n    return (\n        <div className='form-group max-width-500 margin-auto padding-25'>\n            <FormLabel htmlFor='random-uuid'>Random UUID</FormLabel>\n            <div className='input-group'>\n                <input\n                    id='random-uuid'\n                    className='form-control'\n                    type='text'\n                    value={inputValue}\n                    onChange={event => setInputValue(event.currentTarget.value)}\n                />\n                <div className='input-group-addon'>\n                    <Button\n                        bsStyle='muted'\n                        bsSize='sm'\n                        className='position-absolute top-1 right-1'\n                        onClick={handleCopyButtonClick}\n                        iconName='rioglyph-duplicate'\n                        iconOnly\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"form-group max-width-500 margin-auto padding-25\">\n    <label for=\"random-uuid\" class=\"display-inline-block\">\n        <span>Random UUID</span>\n    </label>\n    <div class=\"input-group\">\n        <input id=\"random-uuid\" class=\"form-control\" type=\"text\" value=\"1d247ad0-d642-4e40-b420-21c0f50aab55\">\n        <div class=\"input-group-addon\">\n            <button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component position-absolute top-1 right-1\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-duplicate\">\n                </span>\n            </button>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "options.timeout",
+                      "type": "Number",
+                      "default": "2000",
+                      "description": "The copied status timeout duration in milliseconds."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}