@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,92 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:46.987Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useCount",
+    "category": "Utilities",
+    "section": "Data aggregation hooks",
+    "slug": "utilities/usecount",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "a1224bd244964781733ef45fcd2d89e33bc6da785f144cd38be4d8e37a09ea04"
+  },
+  "title": "useCount",
+  "lead": "useCount is a utility hook for counting how many objects in a list contain a specific value or match a custom condition at a given property path. It supports exact value matching (e.g. true, 0, 'PENDING') or predicate-based logic using a match function. By default, all values that are not null or undefined are counted.",
+  "content": [
+    {
+      "heading": "useCount",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><table><tbody><tr><td>Deliveries marked as delivered:</td><td class=\"text-right width-20\">3</td></tr><tr><td>Deliveries marked as not delivered:</td><td class=\"text-right width-20\">2</td></tr><tr><td>Deliveries with status \"PENDING\":</td><td class=\"text-right width-20\">2</td></tr><tr><td>Deliveries with quantity 0:</td><td class=\"text-right width-20\">2</td></tr><tr><td>Deliveries with a written note:</td><td class=\"text-right width-20\">2</td></tr><tr><td>Deliveries with at least one item:</td><td class=\"text-right width-20\">3</td></tr></tbody></table></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import useCount from '@rio-cloud/rio-uikit/useCount';\n\nconst deliveries = [\n    {\n        id: 'D-001',\n        delivered: true,\n        status: 'PENDING',\n        quantity: 0,\n        notes: '',\n        items: [],\n    },\n    {\n        id: 'D-002',\n        delivered: false,\n        status: 'CONFIRMED',\n        quantity: 20,\n        notes: 'Customer confirmed by phone.',\n        items: [1, 2],\n    },\n    {\n        id: 'D-003',\n        delivered: true,\n        status: 'CANCELLED',\n        quantity: 0,\n        notes: null,\n        items: [],\n    },\n    {\n        id: 'D-004',\n        delivered: false,\n        status: 'PENDING',\n        quantity: 10,\n        notes: 'Leave at front desk.',\n        items: [1],\n    },\n    {\n        id: 'D-005',\n        delivered: true,\n        status: 'CONFIRMED',\n        quantity: 5,\n        notes: '',\n        items: [1, 2, 3],\n    },\n];\n\nexport default () => {\n    const countDelivered = useCount(deliveries, 'delivered', { equals: true });\n    const countUndelivered = useCount(deliveries, 'delivered', { equals: false });\n\n    const countPendingStatus = useCount(deliveries, 'status', { equals: 'PENDING' });\n\n    const countQuantityZero = useCount(deliveries, 'quantity', { equals: 0 });\n\n    const countWithNotes = useCount(deliveries, 'notes', {\n        match: val => typeof val === 'string' && val.trim().length > 0,\n    });\n\n    const countWithItems = useCount(deliveries, 'items', {\n        match: val => Array.isArray(val) && val.length > 0,\n    });\n\n    return (\n        <table>\n            <tbody>\n                <tr>\n                    <td>Deliveries marked as delivered:</td>\n                    <td className='text-right width-20'>{countDelivered}</td>\n                </tr>\n                <tr>\n                    <td>Deliveries marked as not delivered:</td>\n                    <td className='text-right width-20'>{countUndelivered}</td>\n                </tr>\n                <tr>\n                    <td>Deliveries with status \"PENDING\":</td>\n                    <td className='text-right width-20'>{countPendingStatus}</td>\n                </tr>\n                <tr>\n                    <td>Deliveries with quantity 0:</td>\n                    <td className='text-right width-20'>{countQuantityZero}</td>\n                </tr>\n                <tr>\n                    <td>Deliveries with a written note:</td>\n                    <td className='text-right width-20'>{countWithNotes}</td>\n                </tr>\n                <tr>\n                    <td>Deliveries with at least one item:</td>\n                    <td className='text-right width-20'>{countWithItems}</td>\n                </tr>\n            </tbody>\n        </table>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<table>\n    <tbody>\n        <tr>\n            <td>Deliveries marked as delivered:</td>\n            <td class=\"text-right width-20\">3</td>\n        </tr>\n        <tr>\n            <td>Deliveries marked as not delivered:</td>\n            <td class=\"text-right width-20\">2</td>\n        </tr>\n        <tr>\n            <td>Deliveries with status \"PENDING\":</td>\n            <td class=\"text-right width-20\">2</td>\n        </tr>\n        <tr>\n            <td>Deliveries with quantity 0:</td>\n            <td class=\"text-right width-20\">2</td>\n        </tr>\n        <tr>\n            <td>Deliveries with a written note:</td>\n            <td class=\"text-right width-20\">2</td>\n        </tr>\n        <tr>\n            <td>Deliveries with at least one item:</td>\n            <td class=\"text-right width-20\">3</td>\n        </tr>\n    </tbody>\n</table>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Options for the `useCount` hook",
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "unknown[]",
+                      "default": "",
+                      "description": "The array of objects to evaluate."
+                    },
+                    {
+                      "name": "path",
+                      "type": "string",
+                      "default": "",
+                      "description": "Dot-separated path to the field that should be checked in each object."
+                    },
+                    {
+                      "name": "options",
+                      "type": "object",
+                      "default": "",
+                      "description": "Optional configuration for counting logic."
+                    },
+                    {
+                      "name": "└equals",
+                      "type": "unknown",
+                      "default": "",
+                      "description": "The exact value to match against. Only values that strictly equal this will be counted. Ignored if `match` is defined."
+                    },
+                    {
+                      "name": "└match",
+                      "type": "(value: unknown) => boolean",
+                      "default": "",
+                      "description": "Custom predicate function that determines whether a value should be counted. Overrides `equals` if defined."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Return value of the `useCount` hook",
+                  "rows": [
+                    {
+                      "name": "count",
+                      "type": "number",
+                      "default": "",
+                      "description": "The number of objects where the target value matches the given condition."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,50 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:44.021Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useDarkMode",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "slug": "utilities/usedarkmode",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "f6bbcfae4bddbe420e300c18e9a5a4ef1e60bdc308360edbc656cf11881d361e"
+  },
+  "title": "useDarkMode",
+  "lead": "The useDarkMode hook enables you to listen for the color scheme change and react accordingly.",
+  "content": [
+    {
+      "heading": "useDarkMode",
+      "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\"><label>isDarkMode:</label><div class=\"margin-15\">false</div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import useDarkMode from '@rio-cloud/rio-uikit/useDarkMode';\n\nexport default () => {\n    const isDarkMode = useDarkMode();\n\n    return (\n        <div className='display-flex flex-column justify-content-center align-items-center'>\n            <label>isDarkMode:</label>\n            <div className='margin-15'>{`${isDarkMode}`}</div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column justify-content-center align-items-center\">\n    <label>isDarkMode:</label>\n    <div class=\"margin-15\">false</div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": []
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,63 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:45.352Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useDebugInfo",
+    "category": "Utilities",
+    "section": "UI state & input hooks",
+    "slug": "utilities/usedebuginfo",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "b6da444b07670e29579d78b5be339ed9b851f20e190af374a46ef4310d2e6f13"
+  },
+  "title": "useDebugInfo",
+  "lead": "The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.",
+  "content": [
+    {
+      "heading": "useDebugInfo",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"margin-bottom-25 padding-15 border\"><div><label>Component props:</label><div><b>isToggled: </b>false</div><div><b>count: </b>0</div></div><div class=\"margin-top-20\"><label>Debug Info:</label><pre class=\"bg-none text-size-12 text-color-darker\">{\n \"renderCount\": 1,\n \"changedProps\": {},\n \"timeSinceLastRender\": 0,\n \"lastRenderTimestamp\": 1763726924627\n}</pre></div></div><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Increment</button></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport useDebugInfo from '@rio-cloud/rio-uikit/useDebugInfo';\n\nconst ChildComponent = (props: { isToggled?: boolean; count?: number }) => {\n    const { isToggled, count } = props;\n\n    const info = useDebugInfo('ChildComponent', props);\n\n    return (\n        <div className='margin-bottom-25 padding-15 border'>\n            <div>\n                <label>Component props:</label>\n                <div>\n                    <b>isToggled: </b>\n                    {isToggled?.toString()}\n                </div>\n                <div>\n                    <b>count: </b>\n                    {count}\n                </div>\n            </div>\n            <div className='margin-top-20'>\n                <label>Debug Info:</label>\n                <pre className='bg-none text-size-12 text-color-darker'>{JSON.stringify(info, null, 1)}</pre>\n            </div>\n        </div>\n    );\n};\n\nexport default () => {\n    const [toggle, setToggle] = useState(false);\n    const [count, setCount] = useState(0);\n\n    return (\n        <div>\n            <ChildComponent isToggled={toggle} count={count} />\n            <div className='btn-toolbar'>\n                <Button onClick={() => setToggle(!toggle)}>Toggle</Button>\n                <Button onClick={() => setCount(prevCount => prevCount + 1)}>Increment</Button>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"margin-bottom-25 padding-15 border\">\n        <div>\n            <label>Component props:</label>\n            <div>\n                <b>isToggled: </b>false\n            </div>\n            <div>\n                <b>count: </b>0\n            </div>\n        </div>\n        <div class=\"margin-top-20\">\n            <label>Debug Info:</label>\n            <pre class=\"bg-none text-size-12 text-color-darker\">{\n \"renderCount\": 1,\n \"changedProps\": {},\n \"timeSinceLastRender\": 0,\n \"lastRenderTimestamp\": 1763726924627\n}</pre>\n        </div>\n    </div>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle</button>\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Increment</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "component",
+                      "type": "String",
+                      "default": "",
+                      "description": "The name of the component that will be printed out."
+                    },
+                    {
+                      "name": "props",
+                      "type": "Object",
+                      "default": "",
+                      "description": "The component props that will be checked for changed values."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,57 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:36.068Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useEffectOnce",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "slug": "utilities/useeffectonce",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "d4e780db1eda085c0cfc3eef1f2115174d7f2feb8a7670559ea36ec8b662854c"
+  },
+  "title": "useEffectOnce",
+  "lead": "The useEffectOnce hook allows to use a side effect only once after the component has been mounted.",
+  "content": [
+    {
+      "heading": "useEffectOnce",
+      "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\"><div class=\"margin-15\">0</div><button class=\"btn btn-default\" type=\"button\">Increment</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport useEffectOnce from '@rio-cloud/rio-uikit/useEffectOnce';\n\nexport default () => {\n    const [count, setCount] = useState(0);\n\n    useEffectOnce(() => alert('Hi'));\n\n    return (\n        <div className='display-flex flex-column justify-content-center align-items-center'>\n            <div className='margin-15'>{count}</div>\n            <button className='btn btn-default' type='button' onClick={() => setCount(value => value + 1)}>\n                Increment\n            </button>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column justify-content-center align-items-center\">\n    <div class=\"margin-15\">0</div>\n    <button class=\"btn btn-default\" type=\"button\">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."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,57 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:36.087Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useElapsedTime",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "slug": "utilities/useelapsedtime",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "58b8a7f8d9944ba4b87cc924dd011d3faf8fcf0209109c3acb3e2e75fdc6c48e"
+  },
+  "title": "useElapsedTime",
+  "lead": null,
+  "content": [
+    {
+      "heading": "useElapsedTime",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Get elapsed time</button><p>Elapsed time sind mount: 0 ms</p></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport useElapsedTime from '@rio-cloud/rio-uikit/useElapsedTime';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nexport default () => {\n    const [timeValue, setTimeValue] = useState(0);\n\n    const getElapsedTime = useElapsedTime();\n\n    const handleClick = () => {\n        const elapsedTime = getElapsedTime();\n        setTimeValue(elapsedTime);\n    };\n\n    return (\n        <div>\n            <Button onClick={handleClick}>Get elapsed time</Button>\n            <p>Elapsed time sind mount: {timeValue} ms</p>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Get elapsed time</button>\n    <p>Elapsed time sind mount: 0 ms</p>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "startTime",
+                      "type": "Function",
+                      "default": "Date.now()",
+                      "description": "The start time in milliseconds from which to measure the elapsed time."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,63 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:38.704Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useElementSize",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "slug": "utilities/useelementsize",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "d3eea30c6bc4d40dc62b3d9f6be6e3d8ebac7915a1d64a8a9917b7cde007275c"
+  },
+  "title": "useElementSize",
+  "lead": "The useElementSize hook allows to easily detect an elements dimension.",
+  "content": [
+    {
+      "heading": "useElementSize",
+      "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>Resize box to see it's width updating</label><div class=\"height-50 bg-info position-relative\" style=\"width: 50px;\"><div class=\"Resizer resize-horizontal resize-right\"></div></div><div>Width: 50, Height: 50</div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState, useRef } from 'react';\n\nimport useElementSize from '@rio-cloud/rio-uikit/useElementSize';\nimport Resizer from '@rio-cloud/rio-uikit/Resizer';\n\nexport default () => {\n    const [boxWidth, setBoxWidth] = useState(50);\n\n    const elementRef = useRef<HTMLDivElement>(null);\n    const [width, height] = useElementSize(elementRef);\n\n    const handleResize = (diff: number) => setBoxWidth(oldWidth => oldWidth - diff);\n\n    return (\n        <div className='display-flex flex-column justify-content-center align-items-center height-100'>\n            <label>Resize box to see it's width updating</label>\n            <div className='height-50 bg-info position-relative' style={{ width: boxWidth }} ref={elementRef}>\n                <Resizer onResize={handleResize} />\n            </div>\n\n            <div>{`Width: ${width}, Height: ${height}`}</div>\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>Resize box to see it's width updating</label>\n    <div class=\"height-50 bg-info position-relative\" style=\"width: 50px;\">\n        <div class=\"Resizer resize-horizontal resize-right\">\n        </div>\n    </div>\n    <div>Width: 50, Height: 50</div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "ref",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Pass a ref of the target element as parameter to the hook to get its height and width."
+                    },
+                    {
+                      "name": "[width, height]",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Returns height and width values of the referenced element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,57 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:39.036Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useEsc",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "slug": "utilities/useesc",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "0b41d89fcc5123c69a3746ce1711d60bf9a4cdadc180564e42062f4436ec8f43"
+  },
+  "title": "useEsc",
+  "lead": "The useEsc hook allows to easily detect keydown events for escape key to to react on. This comes in handy when closing something or aborting some operation on esc.",
+  "content": [
+    {
+      "heading": "useEsc",
+      "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\">Press \"esc\" key</label><textarea class=\"form-control width-50pct\" readonly=\"\" rows=\"4\"></textarea></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport useEsc from '@rio-cloud/rio-uikit/useEsc';\n\nexport default () => {\n    const [log, setLog] = useState('');\n\n    useEsc(event => {\n        console.log(event);\n        setLog(`${log}Esc pressed\\n`);\n    });\n\n    return (\n        <div className='display-flex flex-column justify-content-center align-items-center height-100'>\n            <label className='margin-bottom-10'>Press \"esc\" key</label>\n            <textarea className='form-control width-50pct' value={log} readOnly rows={4} />\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\">Press \"esc\" key</label>\n    <textarea class=\"form-control width-50pct\" readonly=\"\" rows=\"4\">\n</textarea>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "callback",
+                      "type": "Function",
+                      "default": "",
+                      "description": "The callback function to be triggered. It passes the key event as argument."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,75 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:45.470Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useEvent",
+    "category": "Utilities",
+    "section": "UI state & input hooks",
+    "slug": "utilities/useevent",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "6a7d8a54014bf8a51b9d0a2ec6c7ae7f8f78118bfc291cb0473ffc6820524fba"
+  },
+  "title": "useEvent",
+  "lead": "The useEvent hook allows to easily detect given events registered on the document.",
+  "content": [
+    {
+      "heading": "useEvent",
+      "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 justify-content-center align-items-center height-50\"><div class=\"margin-right-10\">Mouse position: </div><div class=\"label label-default\"> </div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport throttle from 'lodash/fp/throttle';\n\nimport useEvent from '@rio-cloud/rio-uikit/useEvent';\n\nconst THROTTLE_TIMEOUT_IN_MS = 100;\n\nexport default () => {\n    const [mousePosition, setMousePosition] = useState(' ');\n\n    const handleMouseMove = throttle(THROTTLE_TIMEOUT_IN_MS)(event => {\n        setMousePosition(`x: ${event.screenX} - y: ${event.screenY}`);\n    });\n\n    useEvent('mousemove', handleMouseMove);\n\n    return (\n        <div className='display-flex justify-content-center align-items-center height-50'>\n            <div className='margin-right-10'>{'Mouse position: '}</div>\n            <div className='label label-default'>{mousePosition}</div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex justify-content-center align-items-center height-50\">\n    <div class=\"margin-right-10\">Mouse position: </div>\n    <div class=\"label label-default\">x: 775 - y: 355</div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "callback",
+                      "type": "Function",
+                      "default": "",
+                      "description": "The callback function to be triggered. It passes the key event as argument."
+                    },
+                    {
+                      "name": "eventType",
+                      "type": "String",
+                      "default": "",
+                      "description": "The event type to listen on."
+                    },
+                    {
+                      "name": "options",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Flag for event listener options."
+                    },
+                    {
+                      "name": "target",
+                      "type": "Node",
+                      "default": "document",
+                      "description": "The target the event shall be registered for. Use \"window\" for \"resize\" events."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,57 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:39.001Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useFocusTrap",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "slug": "utilities/usefocustrap",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "da8de485bc0289908edaac6d3a1451a0f595c585af970ce6a71c3c8eebb4ec74"
+  },
+  "title": "useFocusTrap",
+  "lead": "This custom hook allows to keep the focus inside a defined wrapper element. This might be a dialog or a custom overlay.",
+  "content": [
+    {
+      "heading": "useFocusTrap",
+      "body": "- When you have a external component that will be re-rendered after the overlay opens, you can use the built-in ref. This ref will be returned from this hook and can be set on the respective wrapper element.\n- When you have an element that does not re-render, use a local state setter function to be set as the ref. This element can then be passed as a parameter to this hook and it will be used instead of the built-in ref.const [focusTrapRef, setFocusTrapRef] = useState<HTMLDivElement | null>(null); useFocusTrap(focusTrapRef); <div ref={setFocusTrapRef}>...</div>",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Open Dialog</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useEffect, useRef, useState } from 'react';\n\nimport Dialog from '@rio-cloud/rio-uikit/Dialog';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport useFocusTrap from '@rio-cloud/rio-uikit/useFocusTrap';\n\nconst DemoBody = () => {\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const focusTrapRef = useFocusTrap();\n\n    useEffect(() => {\n        if (inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, [inputRef.current]);\n\n    return (\n        <div ref={focusTrapRef} className='form-group display-flex gap-10'>\n            <input ref={inputRef} className='form-control' />\n            <div className='btn-toolbar flex-nowrap'>\n                <Button>Button 1</Button>\n                <Button>Button 2</Button>\n            </div>\n        </div>\n    );\n};\n\nexport default () => {\n    const [showDialog, setShowDialog] = useState(false);\n\n    return (\n        <div>\n            <Dialog\n                show={showDialog}\n                onClose={() => setShowDialog(false)}\n                title='Demo Focus Trap'\n                showCloseButton\n                bsSize='sm'\n                body={<DemoBody />}\n            />\n            <Button onClick={() => setShowDialog(true)}>Open Dialog</Button>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Open Dialog</button>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "element",
+                      "type": "HTMLDivElement | null",
+                      "default": "",
+                      "description": "The wrapper element that traps the focus. Use this if your component does not rerender, otherwise use the internal ref that gets returned from the hook."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}