@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/utilities/useMutationObserver.md

@@ -0,0 +1,113 @@
+# useMutationObserver
+
+*Category:* Utilities
+*Section:* DOM behavior hooks
+*Source:* https://uikit.developers.rio.cloud/#utilities/useMutationObserver
+*Captured:* 2025-12-12T12:39:42.122Z
+
+The useMutationObserver hook enables you to listen for changes on the given element or on its children. For more details, check out https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
+
+## useMutationObserver
+
+### Example: Example 1
+
+Demo callout
+At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.
+
+Set Default StyleSet Primary StyleSet Secondary StyleSet Warning StyleSet Danger Style
+Element Changes:-
+
+#### Summary
+
+Demo callout
+At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.
+
+Set Default StyleSet Primary StyleSet Secondary StyleSet Warning StyleSet Danger Style
+Element Changes:-
+
+#### React (tsx)
+
+```tsx
+import { useRef, useCallback, useState } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import useMutationObserver from '@rio-cloud/rio-uikit/useMutationObserver';
+
+export default () => {
+    const [changes, setChanges] = useState('-');
+    const [calloutStyle, setCalloutStyle] = useState('default');
+
+    const ref = useRef<HTMLElement>(null);
+
+    const handleTargetMutation = useCallback((mutationList: MutationRecord[]) => {
+        mutationList.forEach((mutation: MutationRecord) => {
+            console.log(mutation);
+            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                setChanges(`className: ${(mutation.target as HTMLElement).className}`);
+            }
+        });
+    }, []);
+
+    useMutationObserver(ref, handleTargetMutation);
+
+    return (
+        <div className='display-grid'>
+            <div className='margin-y-15'>
+                <div ref={ref} className={`callout callout-${calloutStyle}`}>
+                    <div className=' text-medium text-size-20 line-height-125rel margin-bottom-10'>Demo callout</div>
+                    <p>
+                        At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.
+                    </p>
+                </div>
+            </div>
+            <div className='margin-top-20'>
+                <div className='btn-toolbar'>
+                    <Button onClick={() => setCalloutStyle('default')}>Set Default Style</Button>
+                    <Button onClick={() => setCalloutStyle('primary')}>Set Primary Style</Button>
+                    <Button onClick={() => setCalloutStyle('secondary')}>Set Secondary Style</Button>
+                    <Button onClick={() => setCalloutStyle('warning')}>Set Warning Style</Button>
+                    <Button onClick={() => setCalloutStyle('danger')}>Set Danger Style</Button>
+                </div>
+                <div className='margin-top-15'>
+                    <label>Element Changes:</label>
+                    <div>{changes}</div>
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-grid">
+    <div class="margin-y-15">
+        <div class="callout callout-default" data-capture-callout="true">
+            <div class=" text-medium text-size-20 line-height-125rel margin-bottom-10">Demo callout</div>
+            <p>At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.</p>
+        </div>
+    </div>
+    <div class="margin-top-20">
+        <div class="btn-toolbar">
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Set Default Style</button>
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Set Primary Style</button>
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Set Secondary Style</button>
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Set Warning Style</button>
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Set Danger Style</button>
+        </div>
+        <div class="margin-top-15">
+            <label>Element Changes:</label>
+            <div>-</div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| targetElement | HTMLElement \| React.MutableRefObject<object> \| null \| undefined | — | The ref or target element to observe changes for. |
+| callback | MutationCallback | — | The callback to execute when mutations are observed. |
+| options | { attributes?: boolean; childList?: boolean; subtree?: boolean; } | — | Options passed to the mutation observer. |

package/dist/docs/utilities/useOnScreen.md

@@ -0,0 +1,138 @@
+# useOnScreen
+
+*Category:* Utilities
+*Section:* DOM behavior hooks
+*Source:* https://uikit.developers.rio.cloud/#utilities/useOnScreen
+*Captured:* 2025-12-12T12:39:42.305Z
+
+The useOnScreen hook tells you when an element is visible on screen.
+
+## useOnScreen
+
+### Example: Example 1
+
+Header 2 is not visible
+Header
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta? Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto, eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto, unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a, inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus cumque nobis iste asperiores illum fugit
+Header 2
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta? Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto, eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto, unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a, inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus cumque nobis iste asperiores illum fugit veritatis fugiat quia voluptates cupiditate vel rerum eligendi facere sint nostrum quam, maiores dolorem repellat voluptas! Magnam ullam quis quas aut consequuntur quo doloremque, earum sint soluta vero iste quasi voluptates labore rerum aspernatur illum esse maxime laudantium? Tempore perspiciatis perferendis ea dolorem et quasi eos illo beatae consectetur maxime, enim ducimus corrupti, accusantium quisquam rem dolorum itaque iste velit. Amet similique accusamus doloribus expedita modi a architecto accusantium labore unde non, dolore totam quaerat sit laboriosam quae ullam impedit, pariatur repudiandae quisquam debitis repellendus nihil. Cumque blanditiis ut recusandae illum! Maiores eveniet nulla exercitationem natus delectus est minus a architecto pariatur molestias quo nihil maxime quasi facere magnam neque dolorem ad, doloribus hic! Qui corporis perspiciatis dolores rem minima tenetur. Fugit ipsa consectetur ad reiciendis, quia iste, sapiente rerum exercitationem reprehenderit laborum eligendi cumque? Quia porro modi repudiandae nostrum accusamus! Corporis eum fugit nihil facilis placeat ab est obcaecati consequuntur qui atque tempore soluta aliquid saepe ducimus, at sed modi illo ipsa numquam ratione vero eos reprehenderit! Sapiente nesciunt consequatur labore iste quas possimus rem cumque, fugit laborum repellendus nisi adipisci officia temporibus quaerat! Beatae doloribus veritatis at, maiores suscipit debitis reiciendis cum impedit non aut modi iste? Placeat illo quisquam assumenda esse cum ipsum quasi perspiciatis voluptatem rerum itaque, similique quidem molestias exercitationem ullam eum amet tempore dolor aliquid unde deserunt dolore excepturi. Aut dolore rerum sequi nihil soluta eum expedita consequatur aliquid consequuntur saepe esse necessitatibus repudiandae, natus, officia enim odit rem nobis adipisci, voluptates autem dolor blanditiis ipsam animi a. Illo accusantium iure qui aperiam commodi, quidem, dolorem error eum animi, id nam? Corporis, non adipisci!
+
+#### Summary
+
+Header 2 is not visible
+Header
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta? Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto, eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto, unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a, inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus cumque nobis iste asperiores illum fugit
+Header 2
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta? Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto, eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto, unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a, inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus cumque nobis iste asperiores illum fugit veritatis fugiat quia voluptates cupiditate vel rerum eligendi facere sint nostrum quam, maiores dolorem repellat voluptas! Magnam ullam quis quas aut consequuntur quo doloremque, earum sint soluta vero iste quasi voluptates labore rerum aspernatur illum esse maxime laudantium? Tempore perspiciatis perferendis ea dolorem et quasi eos illo beatae consectetur maxime, enim ducimus corrupti, accusantium quisquam rem dolorum itaque iste velit. Amet similique accusamus doloribus expedita modi a architecto accusantium labore unde non, dolore totam quaerat sit laboriosam quae ullam impedit, pariatur repudiandae quisquam debitis repellendus nihil. Cumque blanditiis ut recusandae illum! Maiores eveniet nulla exercitationem natus delectus est minus a architecto pariatur molestias quo nihil maxime quasi facere magnam neque dolorem ad, doloribus hic! Qui corporis perspiciatis dolores rem minima tenetur. Fugit ipsa consectetur ad reiciendis, quia iste, sapiente rerum exercitationem reprehenderit laborum eligendi cumque? Quia porro modi repudiandae nostrum accusamus! Corporis eum fugit nihil facilis placeat ab est obcaecati consequuntur qui atque tempore soluta aliquid saepe ducimus, at sed modi illo ipsa numquam ratione vero eos reprehenderit! Sapiente nesciunt consequatur labore iste quas possimus rem cumque, fugit laborum repellendus nisi adipisci officia temporibus quaerat! Beatae doloribus veritatis at, maiores suscipit debitis reiciendis cum impedit non aut modi iste? Placeat illo quisquam assumenda esse cum ipsum quasi perspiciatis voluptatem rerum itaque, similique quidem molestias exercitationem ullam eum amet tempore dolor aliquid unde deserunt dolore excepturi. Aut dolore rerum sequi nihil soluta eum expedita consequatur aliquid consequuntur saepe esse necessitatibus repudiandae, natus, officia enim odit rem nobis adipisci, voluptates autem dolor blanditiis ipsam animi a. Illo accusantium iure qui aperiam commodi, quidem, dolorem error eum animi, id nam? Corporis, non adipisci!
+
+#### React (tsx)
+
+```tsx
+import { useRef } from 'react';
+
+import useOnScreen from '@rio-cloud/rio-uikit/useOnScreen';
+
+export default () => {
+    const headerTwoRef = useRef<HTMLDivElement>(null);
+    const visible = useOnScreen(headerTwoRef);
+
+    console.log(visible);
+
+    return (
+        <div>
+            <div className='text-medium text-size-14'>{`Header 2 is ${visible ? 'visible' : 'not visible'}`}</div>
+            <hr />
+            <div className='height-300 overflow-scroll'>
+                <div className='h1'>Header</div>
+                <div>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta?
+                    Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates
+                    modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto
+                    dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate
+                    nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel
+                    cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto,
+                    eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae
+                    temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto,
+                    unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos,
+                    tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam
+                    repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis
+                    ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores
+                    accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a,
+                    inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam
+                    facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos,
+                    nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis
+                    exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum
+                    id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus
+                    cumque nobis iste asperiores illum fugit
+                </div>
+                <div className='h1' ref={headerTwoRef}>
+                    Header 2 {visible && '(Visible)'}
+                </div>
+                <div>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta?
+                    Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates
+                    modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto
+                    dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate
+                    nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel
+                    cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto,
+                    eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae
+                    temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto,
+                    unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos,
+                    tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam
+                    repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis
+                    ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores
+                    accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a,
+                    inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam
+                    facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos,
+                    nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis
+                    exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum
+                    id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus
+                    cumque nobis iste asperiores illum fugit veritatis fugiat quia voluptates cupiditate vel rerum
+                    eligendi facere sint nostrum quam, maiores dolorem repellat voluptas! Magnam ullam quis quas aut
+                    consequuntur quo doloremque, earum sint soluta vero iste quasi voluptates labore rerum aspernatur
+                    illum esse maxime laudantium? Tempore perspiciatis perferendis ea dolorem et quasi eos illo beatae
+                    consectetur maxime, enim ducimus corrupti, accusantium quisquam rem dolorum itaque iste velit. Amet
+                    similique accusamus doloribus expedita modi a architecto accusantium labore unde non, dolore totam
+                    quaerat sit laboriosam quae ullam impedit, pariatur repudiandae quisquam debitis repellendus nihil.
+                    Cumque blanditiis ut recusandae illum! Maiores eveniet nulla exercitationem natus delectus est minus
+                    a architecto pariatur molestias quo nihil maxime quasi facere magnam neque dolorem ad, doloribus
+                    hic! Qui corporis perspiciatis dolores rem minima tenetur. Fugit ipsa consectetur ad reiciendis,
+                    quia iste, sapiente rerum exercitationem reprehenderit laborum eligendi cumque? Quia porro modi
+                    repudiandae nostrum accusamus! Corporis eum fugit nihil facilis placeat ab est obcaecati
+                    consequuntur qui atque tempore soluta aliquid saepe ducimus, at sed modi illo ipsa numquam ratione
+                    vero eos reprehenderit! Sapiente nesciunt consequatur labore iste quas possimus rem cumque, fugit
+                    laborum repellendus nisi adipisci officia temporibus quaerat! Beatae doloribus veritatis at, maiores
+                    suscipit debitis reiciendis cum impedit non aut modi iste? Placeat illo quisquam assumenda esse cum
+                    ipsum quasi perspiciatis voluptatem rerum itaque, similique quidem molestias exercitationem ullam
+                    eum amet tempore dolor aliquid unde deserunt dolore excepturi. Aut dolore rerum sequi nihil soluta
+                    eum expedita consequatur aliquid consequuntur saepe esse necessitatibus repudiandae, natus, officia
+                    enim odit rem nobis adipisci, voluptates autem dolor blanditiis ipsam animi a. Illo accusantium iure
+                    qui aperiam commodi, quidem, dolorem error eum animi, id nam? Corporis, non adipisci!
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="text-medium text-size-14">Header 2 is not visible</div>
+    <hr>
+    <div class="height-300 overflow-scroll">
+        <div class="h1">Header</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta? Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto, eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto, unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a, inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus cumque nobis iste asperiores illum fugit</div>
+        <div class="h1">Header 2 </div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta? Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto, eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto, unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a, inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus cumque nobis iste asperiores illum fugit veritatis fugiat quia voluptates cupiditate vel rerum eligendi facere sint nostrum quam, maiores dolorem repellat voluptas! Magnam ullam quis quas aut consequuntur quo doloremque, earum sint soluta vero iste quasi voluptates labore rerum aspernatur illum esse maxime laudantium? Tempore perspiciatis perferendis ea dolorem et quasi eos illo beatae consectetur maxime, enim ducimus corrupti, accusantium quisquam rem dolorum itaque iste velit. Amet similique accusamus doloribus expedita modi a architecto accusantium labore unde non, dolore totam quaerat sit laboriosam quae ullam impedit, pariatur repudiandae quisquam debitis repellendus nihil. Cumque blanditiis ut recusandae illum! Maiores eveniet nulla exercitationem natus delectus est minus a architecto pariatur molestias quo nihil maxime quasi facere magnam neque dolorem ad, doloribus hic! Qui corporis perspiciatis dolores rem minima tenetur. Fugit ipsa consectetur ad reiciendis, quia iste, sapiente rerum exercitationem reprehenderit laborum eligendi cumque? Quia porro modi repudiandae nostrum accusamus! Corporis eum fugit nihil facilis placeat ab est obcaecati consequuntur qui atque tempore soluta aliquid saepe ducimus, at sed modi illo ipsa numquam ratione vero eos reprehenderit! Sapiente nesciunt consequatur labore iste quas possimus rem cumque, fugit laborum repellendus nisi adipisci officia temporibus quaerat! Beatae doloribus veritatis at, maiores suscipit debitis reiciendis cum impedit non aut modi iste? Placeat illo quisquam assumenda esse cum ipsum quasi perspiciatis voluptatem rerum itaque, similique quidem molestias exercitationem ullam eum amet tempore dolor aliquid unde deserunt dolore excepturi. Aut dolore rerum sequi nihil soluta eum expedita consequatur aliquid consequuntur saepe esse necessitatibus repudiandae, natus, officia enim odit rem nobis adipisci, voluptates autem dolor blanditiis ipsam animi a. Illo accusantium iure qui aperiam commodi, quidem, dolorem error eum animi, id nam? Corporis, non adipisci!</div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | React.MutableRefObject<HTMLElement> | — | The react ref to the element to observe visibility for. |
+| options | Object | { rootMargin: "0px" } | Additional IntersectionObserver options. See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API |

package/dist/docs/utilities/useOnlineStatus.md

@@ -0,0 +1,49 @@
+# useOnlineStatus
+
+*Category:* Utilities
+*Section:* Browser & device hooks
+*Source:* https://uikit.developers.rio.cloud/#utilities/useOnlineStatus
+*Captured:* 2025-12-12T12:39:45.334Z
+
+The useOnlineStatus hook tells you when there is a network connection or not.
+
+## useOnlineStatus
+
+### Example: Example 1
+
+You are online
+
+#### Summary
+
+You are online
+
+#### React (tsx)
+
+```tsx
+import useOnlineStatus from '@rio-cloud/rio-uikit/useOnlineStatus';
+
+export default () => {
+    const isOnline = useOnlineStatus();
+
+    return (
+        <div className='display-flex justify-content-center align-items-center'>
+            <div className='display-flex flex-column align-items-center text-size-14'>
+                <span className={`rioglyph rioglyph-wifi text-size-200pct ${isOnline ? '' : 'text-color-light'}`} />
+                <div>{`You are ${isOnline ? 'online' : 'offline'}`}</div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex justify-content-center align-items-center">
+    <div class="display-flex flex-column align-items-center text-size-14">
+        <span class="rioglyph rioglyph-wifi text-size-200pct ">
+        </span>
+        <div>You are online</div>
+    </div>
+</div>
+```

package/dist/docs/utilities/usePostMessage.md

@@ -0,0 +1,117 @@
+# usePostMessage
+
+*Category:* Utilities
+*Section:* Browser & device hooks
+*Source:* https://uikit.developers.rio.cloud/#utilities/usePostMessage
+*Captured:* 2025-12-12T12:39:46.020Z
+
+The usePostMessage hook allows to easily exchange events and data between the parent window and embedded iframes.
+
+## usePostMessage
+
+Deprecated hookThis hook is deprecated and no longer maintained. Please switch to the dedicated sender usePostMessageSender and receiver useIncomingPostMessages hooks instead.
+
+### Example: Example 1
+
+Parent window
+Send message to widget iframe
+Message from widget:-
+
+#### Summary
+
+Parent window
+Send message to widget iframe
+Message from widget:-
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+import IframeResizer from 'iframe-resizer-react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import usePostMessage, { type RemoteAction } from '@rio-cloud/rio-uikit/usePostMessage';
+
+const PREFIX = 'EVENT';
+const EVENT_TYPE = `${PREFIX}_POST_MESSAGE_EXAMPLE`;
+
+export default () => {
+    const [messageFromWidget, setMessageFromWidget] = useState('-');
+
+    const { sendMessageToWidget } = usePostMessage(PREFIX, (remoteAction: RemoteAction) => {
+        if (remoteAction.type === EVENT_TYPE) {
+            setMessageFromWidget(remoteAction.payload);
+        }
+    });
+
+    const handleSentToWidget = () => {
+        sendMessageToWidget(
+            {
+                type: EVENT_TYPE,
+                payload: 'Hello from the parent',
+            },
+            document.getElementById('postMessageExample') as HTMLIFrameElement
+        );
+    };
+
+    return (
+        <div className='display-flex gap-25'>
+            <div className='border rounded padding-20 height-200'>
+                <div className='text-medium'>Parent window</div>
+                <div className='btn-toolbar margin-top-20'>
+                    <Button onClick={handleSentToWidget}>Send message to widget iframe</Button>
+                </div>
+                <div className='margin-top-20'>
+                    <label>Message from widget:</label>
+                    <div>{messageFromWidget}</div>
+                </div>
+            </div>
+            <div className='iframe-wrapper'>
+                <IframeResizer
+                    id='postMessageExample'
+                    src='/#postMessageExample'
+                    className='unstyled width-100pct'
+                    style={{ width: '1px', minWidth: '100%' }}
+                />
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex gap-25">
+    <div class="border rounded padding-20 height-200">
+        <div class="text-medium">Parent window</div>
+        <div class="btn-toolbar margin-top-20">
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Send message to widget iframe</button>
+        </div>
+        <div class="margin-top-20">
+            <label>Message from widget:</label>
+            <div>-</div>
+        </div>
+    </div>
+    <div class="iframe-wrapper">
+        <iframe title="iframe" id="postMessageExample" src="/#postMessageExample" class="unstyled width-100pct" style="width: 1px; min-width: 100%; overflow: hidden; height: 200px;" scrolling="no">
+        </iframe>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| messagePrefix | string | — | A custom prefix to limit the event listener for these events. |
+| onReceiveMessage | (eventData: any) => void | — | A callback function triggered when a message is received. |
+
+#### Props: Returns
+
+### Returns
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| sendMessageToParent | (message: RemoteAction) => void | — | Function to send an event with payload to the parent window. |
+| sendMessageToWidget | (message: RemoteAction, targetFrames: HTMLIFrameElement[]) | — | Function to send an event with payload to a list of iframes. |