@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/fadeExpander.md

@@ -0,0 +1,180 @@
+# FadeExpander
+
+*Category:* Components
+*Section:* Show/Hide
+*Source:* https://uikit.developers.rio.cloud/#components/fadeExpander
+*Captured:* 2025-12-12T12:38:22.077Z
+
+The FadeExpander component fades in and expands when the content.
+
+## FadeExpander
+
+### Example:
+
+Lorem ipsum dolor sit amet
+
+Enable lorem ipsum dolor sit amet
+
+#### Summary
+
+Lorem ipsum dolor sit amet
+
+Enable lorem ipsum dolor sit amet
+
+#### React (tsx)
+
+```tsx
+import { useRef, useState } from 'react';
+
+import FadeExpander from '@rio-cloud/rio-uikit/FadeExpander';
+import Switch from '@rio-cloud/rio-uikit/Switch';
+
+export default () => {
+    const [showContent1, setShowContent1] = useState(false);
+    const [showContent2, setShowContent2] = useState(false);
+
+    const [isSwitch1Toggled, setIsSwitch1Toggled] = useState(false);
+
+    const input1Ref = useRef<HTMLInputElement>(null);
+    const input2Ref = useRef<HTMLInputElement>(null);
+
+    const locationBlock = (
+        <div className='position-relative bg-white border border-top-none rounded rounded-bottom margin-top-0 padding-x-10 padding-y-15'>
+            <div className='display-flex cursor-pointer align-items-center gap-15 padding-x-5'>
+                <div className='display-grid place-items-center height-40 width-40 rounded-circle bg-primary text-color-white'>
+                    <span className='rioglyph rioglyph-location-arrow text-size-20' />
+                </div>
+                <div className=''>
+                    <div className='text-medium text-size-16 text-color-primary'>Allow location access</div>
+                    <div className='text-size-12 text-color-darker'>Based on sources like your browser</div>
+                </div>
+            </div>
+        </div>
+    );
+
+    return (
+        <div className='max-width-500 border rounded display-flex flex-column shadow-default bg-white'>
+            <div className='padding-15 text-medium shadow-muted-down z-index-10'>Lorem ipsum dolor sit amet</div>
+            <div className=''>
+                <div className='bg-lightest border border-top-only border-color-lighter padding-x-15 padding-y-20'>
+                    <div className='form-group'>
+                        <div className='input-group shadow-subtle'>
+                            <span className='input-group-addon'>
+                                <span className='rioglyph rioglyph-start' />
+                            </span>
+                            <input
+                                className='form-control'
+                                placeholder='Add starting point'
+                                ref={input1Ref}
+                                onFocus={() => setShowContent1(true)}
+                                onBlur={() => setShowContent1(false)}
+                            />
+                        </div>
+                        <FadeExpander show={showContent1}>{locationBlock}</FadeExpander>
+                    </div>
+                    <div className='form-group margin-0'>
+                        <div className='input-group shadow-subtle'>
+                            <span className='input-group-addon'>
+                                <span className='rioglyph rioglyph-finish' />
+                            </span>
+                            <input
+                                className='form-control'
+                                placeholder='Add destination'
+                                ref={input2Ref}
+                                onFocus={() => setShowContent2(true)}
+                                onBlur={() => setShowContent2(false)}
+                            />
+                        </div>
+                        <FadeExpander show={showContent2}>{locationBlock}</FadeExpander>
+                    </div>
+                </div>
+                <div className='padding-15 border border-top-only border-color-lighter'>
+                    <div className='display-flex justify-content-between'>
+                        <div className='text-color-darker'>Enable lorem ipsum dolor sit amet</div>
+                        <div className='text-color-dark'>
+                            <Switch
+                                onChange={() => setIsSwitch1Toggled(!isSwitch1Toggled)}
+                                checked={isSwitch1Toggled}
+                            />
+                        </div>
+                    </div>
+                    <FadeExpander show={isSwitch1Toggled} className='margin-top-15'>
+                        <div className='bg-lightest padding-15 rounded rounded-large text-color-dark'>
+                            <div className='text-size-h5 text-color-darker margin-bottom-10'>Settings</div>
+                            <div className='display-grid grid-cols-2 gap-10'>
+                                <div className='form-group margin-0'>
+                                    <label className='form-label' htmlFor='subgrid-username'>
+                                        Lorem ipsum
+                                    </label>
+                                    <input id='subgrid-username' type='text' className='form-control' />
+                                </div>
+                                <div className='form-group margin-0'>
+                                    <label className='form-label' htmlFor='subgrid-password'>
+                                        Dolor sit amet
+                                    </label>
+                                    <input id='subgrid-password' type='password' className='form-control' />
+                                </div>
+                            </div>
+                        </div>
+                    </FadeExpander>
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-500 border rounded display-flex flex-column shadow-default bg-white">
+    <div class="padding-15 text-medium shadow-muted-down z-index-10">Lorem ipsum dolor sit amet</div>
+    <div class="">
+        <div class="bg-lightest border border-top-only border-color-lighter padding-x-15 padding-y-20">
+            <div class="form-group">
+                <div class="input-group shadow-subtle">
+                    <span class="input-group-addon">
+                        <span class="rioglyph rioglyph-start">
+                        </span>
+                    </span>
+                    <input class="form-control" placeholder="Add starting point">
+                </div>
+            </div>
+            <div class="form-group margin-0">
+                <div class="input-group shadow-subtle">
+                    <span class="input-group-addon">
+                        <span class="rioglyph rioglyph-finish">
+                        </span>
+                    </span>
+                    <input class="form-control" placeholder="Add destination">
+                </div>
+            </div>
+        </div>
+        <div class="padding-15 border border-top-only border-color-lighter">
+            <div class="display-flex justify-content-between">
+                <div class="text-color-darker">Enable lorem ipsum dolor sit amet</div>
+                <div class="text-color-dark">
+                    <div class="uikit-switch">
+                        <label class="switch-label">
+                            <input type="checkbox" class="switch-input">
+                            <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
+                                <div class="switch-handle">
+                                </div>
+                            </div>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | boolean | false | Defines if the content is shown or not. |
+| delay | Number | 0 | Defines the time the animation should wait until it starts. |
+| duration | Number | 0.2 | Defines the duration in seconds of the expand animation. |
+| className | String | — | Additional classes names added to the motion div wrapper. |