@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/filePickers.md

@@ -0,0 +1,370 @@
+# FilePicker
+
+*Category:* Components
+*Section:* Pickers
+*Source:* https://uikit.developers.rio.cloud/#components/filePickers
+*Captured:* 2025-12-12T12:38:32.659Z
+
+## FilePicker
+
+### Example: Example 1
+
+FilePicker for single imagesSelect image
+
+#### Summary
+
+FilePicker for single imagesSelect image
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import FilePicker from '@rio-cloud/rio-uikit/FilePicker';
+
+const accept = { 'image/jpeg': ['.jpg', '.jpeg'], 'image/png': ['.png'], 'image/svg': [] };
+
+const FilePickerExample = () => {
+    const [files, setFiles] = useState<File[]>([]);
+
+    const handleDeleteFiles = (id: number) => setFiles([...files.filter((_, index) => index !== id)]);
+
+    return (
+        <div className='div'>
+            <label>FilePicker for single images</label>
+            <FilePicker
+                label='Select image'
+                className='margin-bottom-20'
+                onPick={(acceptedFiles: FileList | null) => setFiles([...(acceptedFiles ?? [])])}
+                multiple={false}
+                accept={accept}
+            />
+            {(files as FileWithPreview[]).map((file, id) => (
+                <FilePreview file={file} key={file.name} id={id} onDelete={handleDeleteFiles} />
+            ))}
+        </div>
+    );
+};
+
+type FileWithPreview = File & { preview: string };
+
+type FilePreviewProps = { id: number; file: FileWithPreview; onDelete: (id: number) => void };
+
+const FilePreview = ({ file, id, onDelete }: FilePreviewProps) => (
+    <div className='panel panel-default position-relative'>
+        <div className='panel-heading border-none line-height-125rel word-break-all'>
+            <b>{file.name}</b>
+        </div>
+        <RemoveImageButton id={id} onDelete={onDelete} />
+        <div className='panel-body padding-top-0'>
+            {'preview' in file && <img className='img-responsive' src={file.preview as string} alt={file.name} />}
+        </div>
+    </div>
+);
+
+type RemoveImageButtonProps = { id: number; onDelete: (id: number) => void };
+
+const RemoveImageButton = ({ id, onDelete = () => {} }: RemoveImageButtonProps) => (
+    <div
+        onClick={() => onDelete(id)}
+        className={
+            'width-20 aspect-ratio-1 rounded-circle bg-white border border-color-light ' +
+            'display-grid place-items-center cursor-pointer position-absolute top-0 right-0 ' +
+            'translate-x50pct-y-50pct'
+        }
+    >
+        <span className='rioglyph rioglyph-remove text-size-12' />
+    </div>
+);
+
+export default FilePickerExample;
+```
+
+#### HTML (html)
+
+```html
+<div class="div">
+    <label>FilePicker for single images</label>
+    <div class="FilePicker">
+        <button type="button" class="btn btn-default btn-component margin-bottom-20" tabindex="0">Select image</button>
+        <div role="presentation" tabindex="0">
+            <input accept="image/jpeg,.jpg,.jpeg,image/png,.png,image/svg" type="file" tabindex="-1" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;">
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| displayMode | String | button | Defines the file picker display mode. Possible values are: button for a single button, dropzone for a custom dropzone passed as child function or full for showing both. |
+| multiple | Boolean | true | Indicating if multiple files may be selected. |
+| label | String / Node | Select Files | Text to display on Button if displayMode is set to "button". |
+| accept | Object | — | Object list of accepted Mime Types as keys and file extensions array as value. |
+| maxSize | Number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |
+| onPick | (files: FileList \| null) => void | () => {} | Callback function after one or multiple files have been picked. |
+| fullHeight | boolean | false | Flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow. |
+| className | String | — | Additional classes for the select button. |
+| children | ({ isDragActive }: FilePickerRenderProps) => any | — | Pass a custom dropzone element as function receiving some render props. |
+
+### Example: Example 2
+
+FilePicker for multiple images and with dropzoneSelect multiple ImagesDrag & drop files here, or click to select files
+
+#### Summary
+
+FilePicker for multiple images and with dropzoneSelect multiple ImagesDrag & drop files here, or click to select files
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import FilePicker from '@rio-cloud/rio-uikit/FilePicker';
+
+const accept = { 'image/jpeg': ['.jpg', '.jpeg'], 'image/png': ['.png'], 'image/svg': [] };
+
+const FilePickerWithDropzoneExample = () => {
+    const [files, setFiles] = useState<File[]>([]);
+
+    const handleDeleteFiles = (id: number) => setFiles([...files.filter((_, index) => index !== id)]);
+
+    return (
+        <div>
+            <label>FilePicker for multiple images and with dropzone</label>
+            <FilePicker
+                displayMode='full'
+                label='Select multiple Images'
+                className='margin-bottom-20'
+                onPick={(acceptedFiles: FileList | null) =>
+                    setFiles(previousFiles => [...previousFiles, ...(acceptedFiles ?? [])])
+                }
+                accept={accept}
+                fullHeight
+            >
+                {/* as long as the component accepts a "isDragActive" prop, you can just use it like this: */}
+                {dropArea}
+            </FilePicker>
+            <div className='display-grid grid-cols-1 grid-cols-3-sm gap-25 margin-top-20'>
+                {(files as FileWithPreview[]).map((file, id) => (
+                    <FilePreview file={file} key={file.name} id={id} onDelete={handleDeleteFiles} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+type FileWithPreview = File & { preview: string };
+
+type FilePreviewProps = { id: number; file: FileWithPreview; onDelete: (id: number) => void };
+
+const FilePreview = ({ file, id, onDelete }: FilePreviewProps) => (
+    <div className='panel panel-default position-relative'>
+        <div className='panel-heading border-none line-height-125rel word-break-all'>
+            <b>{file.name}</b>
+        </div>
+        <RemoveImageButton id={id} onDelete={onDelete} />
+        <div className='panel-body padding-top-0'>
+            {'preview' in file && <img className='img-responsive' src={file.preview as string} alt={file.name} />}
+        </div>
+    </div>
+);
+
+type RemoveImageButtonProps = { id: number; onDelete: (id: number) => void };
+
+const RemoveImageButton = ({ id, onDelete = () => {} }: RemoveImageButtonProps) => (
+    <div
+        onClick={() => onDelete(id)}
+        className={
+            'width-20 aspect-ratio-1 rounded-circle bg-white border border-color-light ' +
+            'display-grid place-items-center cursor-pointer position-absolute top-0 right-0 ' +
+            'translate-x50pct-y-50pct'
+        }
+    >
+        <span className='rioglyph rioglyph-remove text-size-12' />
+    </div>
+);
+
+const dropArea = ({ isDragActive }: { isDragActive: boolean }) => (
+    <div
+        className={
+            'rounded border border-style-dashed border-color-gray bg-lightest ' +
+            'text-center text-color-darker opacity-50 padding-20 cursor-pointer'
+        }
+    >
+        <div className='margin-10'>
+            {isDragActive ? 'Drop files here ...' : 'Drag & drop files here, or click to select files'}
+        </div>
+    </div>
+);
+
+export default FilePickerWithDropzoneExample;
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <label>FilePicker for multiple images and with dropzone</label>
+    <div class="FilePicker">
+        <button type="button" class="btn btn-default btn-component margin-bottom-20" tabindex="0">Select multiple Images</button>
+        <div role="presentation" tabindex="0" class="height-100pct">
+            <input accept="image/jpeg,.jpg,.jpeg,image/png,.png,image/svg" multiple="" type="file" tabindex="-1" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;">
+            <div class="rounded border border-style-dashed border-color-gray bg-lightest text-center text-color-darker opacity-50 padding-20 cursor-pointer">
+                <div class="margin-10">Drag &amp; drop files here, or click to select files</div>
+            </div>
+        </div>
+    </div>
+    <div class="display-grid grid-cols-1 grid-cols-3-sm gap-25 margin-top-20">
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| displayMode | String | button | Defines the file picker display mode. Possible values are: button for a single button, dropzone for a custom dropzone passed as child function or full for showing both. |
+| multiple | Boolean | true | Indicating if multiple files may be selected. |
+| label | String / Node | Select Files | Text to display on Button if displayMode is set to "button". |
+| accept | Object | — | Object list of accepted Mime Types as keys and file extensions array as value. |
+| maxSize | Number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |
+| onPick | (files: FileList \| null) => void | () => {} | Callback function after one or multiple files have been picked. |
+| fullHeight | boolean | false | Flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow. |
+| className | String | — | Additional classes for the select button. |
+| children | ({ isDragActive }: FilePickerRenderProps) => any | — | Pass a custom dropzone element as function receiving some render props. |
+
+### Example: You have no file selected yet
+
+FilePicker for all files and with dropzone onlyDrag & drop PDF files here or click to select
+
+You have no file selected yet
+
+#### Summary
+
+FilePicker for all files and with dropzone onlyDrag & drop PDF files here or click to select
+
+You have no file selected yet
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import FilePicker from '@rio-cloud/rio-uikit/FilePicker';
+
+const FilePickerDocumentExample = () => {
+    const [file, setFile] = useState<File | undefined>();
+
+    return (
+        <div>
+            <label>FilePicker for all files and with dropzone only</label>
+            <FilePicker
+                displayMode='dropzone'
+                className='margin-bottom-20'
+                onPick={(acceptedFiles: FileList | null) => setFile(acceptedFiles?.[0])}
+                multiple={false}
+            >
+                {dropArea}
+            </FilePicker>
+            <FilePreview file={file as unknown as FileWithMetadata | undefined} />
+        </div>
+    );
+};
+
+const dropArea = ({ isDragActive }: { isDragActive: boolean }) => (
+    <div
+        className={`
+            rounded border border-style-dashed border-color-gray bg-lightest text-size-14
+            text-center text-color-darker opacity-50 padding-25 cursor-pointer
+        `}
+    >
+        <span className='rioglyph rioglyph-files text-size-200pct opacity-50 margin-top-20' />
+        <div className='margin-top-10'>
+            {isDragActive ? 'Drop files here ...' : 'Drag & drop PDF files here or click to select'}
+        </div>
+    </div>
+);
+
+type FileWithMetadata = File & { lastModifiedDate: string; path: string };
+
+const FilePreview = ({ file }: { file: FileWithMetadata | undefined }) => (
+    <div className='panel panel-default margin-top-20'>
+        <div className='panel-body'>
+            {file && (
+                <>
+                    <div>
+                        <b>{`${file?.name}`}</b>
+                    </div>
+                    <ul className='margin-0'>
+                        <li>
+                            <label className='margin-right-10'>type: </label>
+                            <i>{`${file?.type}`}</i>
+                        </li>
+                        <li>
+                            <label className='margin-right-10'>size: </label>
+                            <i>{`${file?.size}`}</i>
+                        </li>
+                        <li>
+                            <label className='margin-right-10'>lastModified: </label>
+                            <i>{`${file?.lastModified}`}</i>
+                        </li>
+                        <li>
+                            <label className='margin-right-10'>lastModifiedDate: </label>
+                            <i>{`${file?.lastModifiedDate}`}</i>
+                        </li>
+                        <li>
+                            <label className='margin-right-10'>path: </label>
+                            <i>{`${file?.path}`}</i>
+                        </li>
+                    </ul>
+                </>
+            )}
+            {!file && <div className='text-color-dark text-italic'>You have no file selected yet</div>}
+        </div>
+    </div>
+);
+
+export default FilePickerDocumentExample;
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <label>FilePicker for all files and with dropzone only</label>
+    <div class="FilePicker">
+        <div role="presentation" tabindex="0">
+            <input type="file" tabindex="-1" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;">
+            <div class="
+            rounded border border-style-dashed border-color-gray bg-lightest text-size-14
+            text-center text-color-darker opacity-50 padding-25 cursor-pointer
+        ">
+                <span class="rioglyph rioglyph-files text-size-200pct opacity-50 margin-top-20">
+                </span>
+                <div class="margin-top-10">Drag &amp; drop PDF files here or click to select</div>
+            </div>
+        </div>
+    </div>
+    <div class="panel panel-default margin-top-20">
+        <div class="panel-body">
+            <div class="text-color-dark text-italic">You have no file selected yet</div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| displayMode | String | button | Defines the file picker display mode. Possible values are: button for a single button, dropzone for a custom dropzone passed as child function or full for showing both. |
+| multiple | Boolean | true | Indicating if multiple files may be selected. |
+| label | String / Node | Select Files | Text to display on Button if displayMode is set to "button". |
+| accept | Object | — | Object list of accepted Mime Types as keys and file extensions array as value. |
+| maxSize | Number | — | Maximum file size in byte. 5 MB = 5,242,880 byte |
+| onPick | (files: FileList \| null) => void | () => {} | Callback function after one or multiple files have been picked. |
+| fullHeight | boolean | false | Flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow. |
+| className | String | — | Additional classes for the select button. |
+| children | ({ isDragActive }: FilePickerRenderProps) => any | — | Pass a custom dropzone element as function receiving some render props. |

package/dist/docs/components/formLabel.md

@@ -0,0 +1,251 @@
+# FormLabel
+
+*Category:* Components
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#components/formLabel
+*Captured:* 2025-12-12T12:38:40.338Z
+
+A small convenience component for a form label or just a label style used without a form element.
+
+## FormLabel
+
+### Example: A label for another form elementSupporting text
+
+A label for a form element
+A label for a form element with additional infoSupporting text
+A label for a form element with additional info as icon
+A label for another form elementSupporting text
+
+Lorem ipsum dolor
+
+A label for some other elements
+ButtonButton
+
+#### Summary
+
+A label for a form element
+A label for a form element with additional infoSupporting text
+A label for a form element with additional info as icon
+A label for another form elementSupporting text
+
+Lorem ipsum dolor
+
+A label for some other elements
+ButtonButton
+
+#### React (tsx)
+
+```tsx
+import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
+import Button from '@rio-cloud/rio-uikit/Button';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+import Switch from '@rio-cloud/rio-uikit/Switch';
+import useToggle from '@rio-cloud/rio-uikit/useToggle';
+import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
+
+export default () => {
+    const { isToggled, toggle } = useToggle(true);
+
+    return (
+        <div className='display-flex flex-column gap-15 max-width-500'>
+            <div className='form-group'>
+                <FormLabel htmlFor='sample-input'>A label for a form element</FormLabel>
+                <input id='sample-input' className='form-control' placeholder='Some random input' />
+            </div>
+
+            <div className='form-group'>
+                <FormLabel htmlFor='sample-input' supportingText='Supporting text'>
+                    A label for a form element with additional info
+                </FormLabel>
+                <input id='sample-input' className='form-control' placeholder='Some random input' />
+            </div>
+
+            <div className='form-group'>
+                <FormLabel
+                    htmlFor='sample-input'
+                    supportingText={
+                        <SimpleTooltip content='Lorem ipsum dolor sit amet' placement='top' width={150}>
+                            <span className='rioglyph rioglyph-question-sign text-size-14 hover-text-color-info cursor-pointer' />
+                        </SimpleTooltip>
+                    }
+                >
+                    A label for a form element with additional info as icon
+                </FormLabel>
+                <input id='sample-input' className='form-control' placeholder='Some random input' />
+            </div>
+
+            <div className='form-group'>
+                <FormLabel supportingText='Supporting text'>A label for another form element</FormLabel>
+                <div className='bg-lightest rounded padding-15'>
+                    <Switch onChange={() => toggle()} checked={isToggled}>
+                        Lorem ipsum dolor
+                    </Switch>
+                </div>
+            </div>
+
+            <div className='form-group'>
+                <FormLabel>A label for some other elements</FormLabel>
+                <ButtonToolbar>
+                    <Button>Button</Button>
+                    <Button bsStyle='primary'>Button</Button>
+                </ButtonToolbar>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column gap-15 max-width-500">
+    <div class="form-group">
+        <label for="sample-input" class="display-inline-block">
+            <span>A label for a form element</span>
+        </label>
+        <input id="sample-input" class="form-control" placeholder="Some random input">
+    </div>
+    <div class="form-group">
+        <label for="sample-input" class="display-inline-flex flex-wrap justify-content-between width-100pct">
+            <span>A label for a form element with additional info</span>
+            <span class="text-color-gray text-italic text-size-12">Supporting text</span>
+        </label>
+        <input id="sample-input" class="form-control" placeholder="Some random input">
+    </div>
+    <div class="form-group">
+        <label for="sample-input" class="display-inline-flex flex-wrap justify-content-between width-100pct">
+            <span>A label for a form element with additional info as icon</span>
+            <span class="text-color-gray text-size-12">
+                <span class="rioglyph rioglyph-question-sign text-size-14 hover-text-color-info cursor-pointer">
+                </span>
+            </span>
+        </label>
+        <input id="sample-input" class="form-control" placeholder="Some random input">
+    </div>
+    <div class="form-group">
+        <div class="text-color-dark max-width-100pct text-size-12 display-inline-flex flex-wrap justify-content-between width-100pct margin-bottom-5">A label for another form element<span class="text-color-gray text-italic text-size-12">Supporting text</span>
+        </div>
+        <div class="bg-lightest rounded padding-15">
+            <div class="uikit-switch">
+                <label class="switch-label label-position-right">
+                    <input type="checkbox" class="switch-input" checked="">
+                    <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
+                        <div class="switch-handle">
+                        </div>
+                    </div>Lorem ipsum dolor
+                </label>
+            </div>
+        </div>
+    </div>
+    <div class="form-group">
+        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">A label for some other elements</div>
+        <div class="btn-toolbar">
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Button</button>
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Button</button>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| htmlFor | string | — | Used for form elements. If given the tag will be set to "label", otherwise it uses a "div". |
+| supportingText | String / Node | — | Additional supporting text displayed next to the label. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+
+### Example: A label for some large buttons
+
+Labels for various sized elements using the form-group-sm and form-group-lg class on the parent element.
+A label for a small form elementLorem ipsum
+A label for a large form elementLorem ipsum
+A label for some large buttons
+ButtonButton
+
+#### Summary
+
+Labels for various sized elements using the form-group-sm and form-group-lg class on the parent element.
+A label for a small form elementLorem ipsum
+A label for a large form elementLorem ipsum
+A label for some large buttons
+ButtonButton
+
+#### React (tsx)
+
+```tsx
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+import Button from '@rio-cloud/rio-uikit/Button';
+import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
+
+export default () => {
+    return (
+        <div className='display-flex flex-column gap-15 max-width-500'>
+            <p>
+                Labels for various sized elements using the <code>form-group-sm</code> and <code>form-group-lg</code>{' '}
+                class on the parent element.
+            </p>
+            <div className='form-group form-group-sm'>
+                <FormLabel htmlFor='sample-sm-input' supportingText='Lorem ipsum'>
+                    A label for a small form element
+                </FormLabel>
+                <input id='sample-sm-input' className='form-control' placeholder='Some input' />
+            </div>
+
+            <div className='form-group form-group-lg'>
+                <FormLabel htmlFor='sample-lg-input' supportingText='Lorem ipsum'>
+                    A label for a large form element
+                </FormLabel>
+                <input id='sample-lg-input' className='form-control' placeholder='Some input' />
+            </div>
+
+            <div className='form-group form-group-lg'>
+                <FormLabel>A label for some large buttons</FormLabel>
+                <ButtonToolbar>
+                    <Button bsSize='lg'>Button</Button>
+                    <Button bsSize='lg' bsStyle='primary'>
+                        Button
+                    </Button>
+                </ButtonToolbar>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column gap-15 max-width-500">
+    <p>Labels for various sized elements using the <code>form-group-sm</code> and <code>form-group-lg</code> class on the parent element.</p>
+    <div class="form-group form-group-sm">
+        <label for="sample-sm-input" class="display-inline-flex flex-wrap justify-content-between width-100pct">
+            <span>A label for a small form element</span>
+            <span class="text-color-gray text-italic text-size-10">Lorem ipsum</span>
+        </label>
+        <input id="sample-sm-input" class="form-control" placeholder="Some input">
+    </div>
+    <div class="form-group form-group-lg">
+        <label for="sample-lg-input" class="display-inline-flex flex-wrap justify-content-between width-100pct">
+            <span>A label for a large form element</span>
+            <span class="text-color-gray text-italic text-size-14">Lorem ipsum</span>
+        </label>
+        <input id="sample-lg-input" class="form-control" placeholder="Some input">
+    </div>
+    <div class="form-group form-group-lg">
+        <div class="text-color-dark max-width-100pct text-size-14 display-inline-block margin-bottom-5">A label for some large buttons</div>
+        <div class="btn-toolbar">
+            <button type="button" class="btn btn-default btn-lg btn-component" tabindex="0">Button</button>
+            <button type="button" class="btn btn-primary btn-lg btn-component" tabindex="0">Button</button>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| htmlFor | string | — | Used for form elements. If given the tag will be set to "label", otherwise it uses a "div". |
+| supportingText | String / Node | — | Additional supporting text displayed next to the label. |
+| className | string | — | Additional classes to be set on the wrapper element. |

package/dist/docs/components/fullscreenMap.md

@@ -0,0 +1,10 @@
+# components/fullscreenMap
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#components/fullscreenMap
+*Captured:* 2025-12-12T12:39:16.346Z
+
+## Overview
+
+- resize: 1