@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/filepickers.json

@@ -0,0 +1,269 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:30.140Z",
+    "source": "https://uikit.developers.rio.cloud/#components/filePickers",
+    "category": "Components",
+    "section": "Pickers",
+    "slug": "components/filepickers",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "c073a80b2f42a94a2c880b0fc3db1d95b5d59987c360dde97bcbee0697e5f904"
+  },
+  "title": "FilePicker",
+  "lead": null,
+  "content": [
+    {
+      "heading": "FilePicker",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport FilePicker from '@rio-cloud/rio-uikit/FilePicker';\n\nconst accept = { 'image/jpeg': ['.jpg', '.jpeg'], 'image/png': ['.png'], 'image/svg': [] };\n\nconst FilePickerExample = () => {\n    const [files, setFiles] = useState<File[]>([]);\n\n    const handleDeleteFiles = (id: number) => setFiles([...files.filter((_, index) => index !== id)]);\n\n    return (\n        <div className='div'>\n            <label>FilePicker for single images</label>\n            <FilePicker\n                label='Select image'\n                className='margin-bottom-20'\n                onPick={(acceptedFiles: FileList | null) => setFiles([...(acceptedFiles ?? [])])}\n                multiple={false}\n                accept={accept}\n            />\n            {(files as FileWithPreview[]).map((file, id) => (\n                <FilePreview file={file} key={file.name} id={id} onDelete={handleDeleteFiles} />\n            ))}\n        </div>\n    );\n};\n\ntype FileWithPreview = File & { preview: string };\n\ntype FilePreviewProps = { id: number; file: FileWithPreview; onDelete: (id: number) => void };\n\nconst FilePreview = ({ file, id, onDelete }: FilePreviewProps) => (\n    <div className='panel panel-default position-relative'>\n        <div className='panel-heading border-none line-height-125rel word-break-all'>\n            <b>{file.name}</b>\n        </div>\n        <RemoveImageButton id={id} onDelete={onDelete} />\n        <div className='panel-body padding-top-0'>\n            {'preview' in file && <img className='img-responsive' src={file.preview as string} alt={file.name} />}\n        </div>\n    </div>\n);\n\ntype RemoveImageButtonProps = { id: number; onDelete: (id: number) => void };\n\nconst RemoveImageButton = ({ id, onDelete = () => {} }: RemoveImageButtonProps) => (\n    <div\n        onClick={() => onDelete(id)}\n        className={\n            'width-20 aspect-ratio-1 rounded-circle bg-white border border-color-light ' +\n            'display-grid place-items-center cursor-pointer position-absolute top-0 right-0 ' +\n            'translate-x50pct-y-50pct'\n        }\n    >\n        <span className='rioglyph rioglyph-remove text-size-12' />\n    </div>\n);\n\nexport default FilePickerExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"div\">\n    <label>FilePicker for single images</label>\n    <div class=\"FilePicker\">\n        <button type=\"button\" class=\"btn btn-default btn-component margin-bottom-20\" tabindex=\"0\">Select image</button>\n        <div role=\"presentation\" tabindex=\"0\">\n            <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;\">\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "displayMode",
+                      "type": "String",
+                      "default": "button",
+                      "description": "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."
+                    },
+                    {
+                      "name": "multiple",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Indicating if multiple files may be selected."
+                    },
+                    {
+                      "name": "label",
+                      "type": "String / Node",
+                      "default": "Select Files",
+                      "description": "Text to display on Button if displayMode is set to \"button\"."
+                    },
+                    {
+                      "name": "accept",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Object list of accepted Mime Types as keys and file extensions array as value."
+                    },
+                    {
+                      "name": "maxSize",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Maximum file size in byte. 5 MB = 5,242,880 byte"
+                    },
+                    {
+                      "name": "onPick",
+                      "type": "(files: FileList | null) => void",
+                      "default": "() => {}",
+                      "description": "Callback function after one or multiple files have been picked."
+                    },
+                    {
+                      "name": "fullHeight",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "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."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the select button."
+                    },
+                    {
+                      "name": "children",
+                      "type": "({ isDragActive }: FilePickerRenderProps) => any",
+                      "default": "",
+                      "description": "Pass a custom dropzone element as function receiving some render props."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport isEmpty from 'lodash/fp/isEmpty';\n\nimport FilePicker from '@rio-cloud/rio-uikit/FilePicker';\n\nconst accept = { 'image/jpeg': ['.jpg', '.jpeg'], 'image/png': ['.png'], 'image/svg': [] };\n\nconst FilePickerWithDropzoneExample = () => {\n    const [files, setFiles] = useState<File[]>([]);\n\n    const handleDeleteFiles = (id: number) => setFiles([...files.filter((_, index) => index !== id)]);\n\n    return (\n        <div>\n            <label>FilePicker for multiple images and with dropzone</label>\n            <FilePicker\n                displayMode='full'\n                label='Select multiple Images'\n                className='margin-bottom-20'\n                onPick={(acceptedFiles: FileList | null) =>\n                    setFiles(previousFiles => [...previousFiles, ...(acceptedFiles ?? [])])\n                }\n                accept={accept}\n                fullHeight\n            >\n                {/* as long as the component accepts a \"isDragActive\" prop, you can just use it like this: */}\n                {dropArea}\n            </FilePicker>\n            <div className='display-grid grid-cols-1 grid-cols-3-sm gap-25 margin-top-20'>\n                {(files as FileWithPreview[]).map((file, id) => (\n                    <FilePreview file={file} key={file.name} id={id} onDelete={handleDeleteFiles} />\n                ))}\n            </div>\n        </div>\n    );\n};\n\ntype FileWithPreview = File & { preview: string };\n\ntype FilePreviewProps = { id: number; file: FileWithPreview; onDelete: (id: number) => void };\n\nconst FilePreview = ({ file, id, onDelete }: FilePreviewProps) => (\n    <div className='panel panel-default position-relative'>\n        <div className='panel-heading border-none line-height-125rel word-break-all'>\n            <b>{file.name}</b>\n        </div>\n        <RemoveImageButton id={id} onDelete={onDelete} />\n        <div className='panel-body padding-top-0'>\n            {'preview' in file && <img className='img-responsive' src={file.preview as string} alt={file.name} />}\n        </div>\n    </div>\n);\n\ntype RemoveImageButtonProps = { id: number; onDelete: (id: number) => void };\n\nconst RemoveImageButton = ({ id, onDelete = () => {} }: RemoveImageButtonProps) => (\n    <div\n        onClick={() => onDelete(id)}\n        className={\n            'width-20 aspect-ratio-1 rounded-circle bg-white border border-color-light ' +\n            'display-grid place-items-center cursor-pointer position-absolute top-0 right-0 ' +\n            'translate-x50pct-y-50pct'\n        }\n    >\n        <span className='rioglyph rioglyph-remove text-size-12' />\n    </div>\n);\n\nconst dropArea = ({ isDragActive }: { isDragActive: boolean }) => (\n    <div\n        className={\n            'rounded border border-style-dashed border-color-gray bg-lightest ' +\n            'text-center text-color-darker opacity-50 padding-20 cursor-pointer'\n        }\n    >\n        <div className='margin-10'>\n            {isDragActive ? 'Drop files here ...' : 'Drag & drop files here, or click to select files'}\n        </div>\n    </div>\n);\n\nexport default FilePickerWithDropzoneExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>FilePicker for multiple images and with dropzone</label>\n    <div class=\"FilePicker\">\n        <button type=\"button\" class=\"btn btn-default btn-component margin-bottom-20\" tabindex=\"0\">Select multiple Images</button>\n        <div role=\"presentation\" tabindex=\"0\" class=\"height-100pct\">\n            <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;\">\n            <div class=\"rounded border border-style-dashed border-color-gray bg-lightest text-center text-color-darker opacity-50 padding-20 cursor-pointer\">\n                <div class=\"margin-10\">Drag &amp; drop files here, or click to select files</div>\n            </div>\n        </div>\n    </div>\n    <div class=\"display-grid grid-cols-1 grid-cols-3-sm gap-25 margin-top-20\">\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "displayMode",
+                      "type": "String",
+                      "default": "button",
+                      "description": "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."
+                    },
+                    {
+                      "name": "multiple",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Indicating if multiple files may be selected."
+                    },
+                    {
+                      "name": "label",
+                      "type": "String / Node",
+                      "default": "Select Files",
+                      "description": "Text to display on Button if displayMode is set to \"button\"."
+                    },
+                    {
+                      "name": "accept",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Object list of accepted Mime Types as keys and file extensions array as value."
+                    },
+                    {
+                      "name": "maxSize",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Maximum file size in byte. 5 MB = 5,242,880 byte"
+                    },
+                    {
+                      "name": "onPick",
+                      "type": "(files: FileList | null) => void",
+                      "default": "() => {}",
+                      "description": "Callback function after one or multiple files have been picked."
+                    },
+                    {
+                      "name": "fullHeight",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "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."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the select button."
+                    },
+                    {
+                      "name": "children",
+                      "type": "({ isDragActive }: FilePickerRenderProps) => any",
+                      "default": "",
+                      "description": "Pass a custom dropzone element as function receiving some render props."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "You have no file selected yet",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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=\"\n            rounded border border-style-dashed border-color-gray bg-lightest text-size-14\n            text-center text-color-darker opacity-50 padding-25 cursor-pointer\n        \"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport FilePicker from '@rio-cloud/rio-uikit/FilePicker';\n\nconst FilePickerDocumentExample = () => {\n    const [file, setFile] = useState<File | undefined>();\n\n    return (\n        <div>\n            <label>FilePicker for all files and with dropzone only</label>\n            <FilePicker\n                displayMode='dropzone'\n                className='margin-bottom-20'\n                onPick={(acceptedFiles: FileList | null) => setFile(acceptedFiles?.[0])}\n                multiple={false}\n            >\n                {dropArea}\n            </FilePicker>\n            <FilePreview file={file as unknown as FileWithMetadata | undefined} />\n        </div>\n    );\n};\n\nconst dropArea = ({ isDragActive }: { isDragActive: boolean }) => (\n    <div\n        className={`\n            rounded border border-style-dashed border-color-gray bg-lightest text-size-14\n            text-center text-color-darker opacity-50 padding-25 cursor-pointer\n        `}\n    >\n        <span className='rioglyph rioglyph-files text-size-200pct opacity-50 margin-top-20' />\n        <div className='margin-top-10'>\n            {isDragActive ? 'Drop files here ...' : 'Drag & drop PDF files here or click to select'}\n        </div>\n    </div>\n);\n\ntype FileWithMetadata = File & { lastModifiedDate: string; path: string };\n\nconst FilePreview = ({ file }: { file: FileWithMetadata | undefined }) => (\n    <div className='panel panel-default margin-top-20'>\n        <div className='panel-body'>\n            {file && (\n                <>\n                    <div>\n                        <b>{`${file?.name}`}</b>\n                    </div>\n                    <ul className='margin-0'>\n                        <li>\n                            <label className='margin-right-10'>type: </label>\n                            <i>{`${file?.type}`}</i>\n                        </li>\n                        <li>\n                            <label className='margin-right-10'>size: </label>\n                            <i>{`${file?.size}`}</i>\n                        </li>\n                        <li>\n                            <label className='margin-right-10'>lastModified: </label>\n                            <i>{`${file?.lastModified}`}</i>\n                        </li>\n                        <li>\n                            <label className='margin-right-10'>lastModifiedDate: </label>\n                            <i>{`${file?.lastModifiedDate}`}</i>\n                        </li>\n                        <li>\n                            <label className='margin-right-10'>path: </label>\n                            <i>{`${file?.path}`}</i>\n                        </li>\n                    </ul>\n                </>\n            )}\n            {!file && <div className='text-color-dark text-italic'>You have no file selected yet</div>}\n        </div>\n    </div>\n);\n\nexport default FilePickerDocumentExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>FilePicker for all files and with dropzone only</label>\n    <div class=\"FilePicker\">\n        <div role=\"presentation\" tabindex=\"0\">\n            <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;\">\n            <div class=\"\n            rounded border border-style-dashed border-color-gray bg-lightest text-size-14\n            text-center text-color-darker opacity-50 padding-25 cursor-pointer\n        \">\n                <span class=\"rioglyph rioglyph-files text-size-200pct opacity-50 margin-top-20\">\n                </span>\n                <div class=\"margin-top-10\">Drag &amp; drop PDF files here or click to select</div>\n            </div>\n        </div>\n    </div>\n    <div class=\"panel panel-default margin-top-20\">\n        <div class=\"panel-body\">\n            <div class=\"text-color-dark text-italic\">You have no file selected yet</div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "displayMode",
+                      "type": "String",
+                      "default": "button",
+                      "description": "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."
+                    },
+                    {
+                      "name": "multiple",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Indicating if multiple files may be selected."
+                    },
+                    {
+                      "name": "label",
+                      "type": "String / Node",
+                      "default": "Select Files",
+                      "description": "Text to display on Button if displayMode is set to \"button\"."
+                    },
+                    {
+                      "name": "accept",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Object list of accepted Mime Types as keys and file extensions array as value."
+                    },
+                    {
+                      "name": "maxSize",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Maximum file size in byte. 5 MB = 5,242,880 byte"
+                    },
+                    {
+                      "name": "onPick",
+                      "type": "(files: FileList | null) => void",
+                      "default": "() => {}",
+                      "description": "Callback function after one or multiple files have been picked."
+                    },
+                    {
+                      "name": "fullHeight",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "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."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the select button."
+                    },
+                    {
+                      "name": "children",
+                      "type": "({ isDragActive }: FilePickerRenderProps) => any",
+                      "default": "",
+                      "description": "Pass a custom dropzone element as function receiving some render props."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Components/components/formlabel.json

@@ -0,0 +1,115 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:37.054Z",
+    "source": "https://uikit.developers.rio.cloud/#components/formLabel",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/formlabel",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "49e6e707d07e96cbb9c2557025a9a392b650e1b55689b3f886fe51731665ea85"
+  },
+  "title": "FormLabel",
+  "lead": "A small convenience component for a form label or just a label style used without a form element.",
+  "content": [
+    {
+      "heading": "FormLabel",
+      "body": "",
+      "examples": [
+        {
+          "caption": "A label for another form elementSupporting text",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport Switch from '@rio-cloud/rio-uikit/Switch';\nimport useToggle from '@rio-cloud/rio-uikit/useToggle';\nimport SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';\n\nexport default () => {\n    const { isToggled, toggle } = useToggle(true);\n\n    return (\n        <div className='display-flex flex-column gap-15 max-width-500'>\n            <div className='form-group'>\n                <FormLabel htmlFor='sample-input'>A label for a form element</FormLabel>\n                <input id='sample-input' className='form-control' placeholder='Some random input' />\n            </div>\n\n            <div className='form-group'>\n                <FormLabel htmlFor='sample-input' supportingText='Supporting text'>\n                    A label for a form element with additional info\n                </FormLabel>\n                <input id='sample-input' className='form-control' placeholder='Some random input' />\n            </div>\n\n            <div className='form-group'>\n                <FormLabel\n                    htmlFor='sample-input'\n                    supportingText={\n                        <SimpleTooltip content='Lorem ipsum dolor sit amet' placement='top' width={150}>\n                            <span className='rioglyph rioglyph-question-sign text-size-14 hover-text-color-info cursor-pointer' />\n                        </SimpleTooltip>\n                    }\n                >\n                    A label for a form element with additional info as icon\n                </FormLabel>\n                <input id='sample-input' className='form-control' placeholder='Some random input' />\n            </div>\n\n            <div className='form-group'>\n                <FormLabel supportingText='Supporting text'>A label for another form element</FormLabel>\n                <div className='bg-lightest rounded padding-15'>\n                    <Switch onChange={() => toggle()} checked={isToggled}>\n                        Lorem ipsum dolor\n                    </Switch>\n                </div>\n            </div>\n\n            <div className='form-group'>\n                <FormLabel>A label for some other elements</FormLabel>\n                <ButtonToolbar>\n                    <Button>Button</Button>\n                    <Button bsStyle='primary'>Button</Button>\n                </ButtonToolbar>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column gap-15 max-width-500\">\n    <div class=\"form-group\">\n        <label for=\"sample-input\" class=\"display-inline-block\">\n            <span>A label for a form element</span>\n        </label>\n        <input id=\"sample-input\" class=\"form-control\" placeholder=\"Some random input\">\n    </div>\n    <div class=\"form-group\">\n        <label for=\"sample-input\" class=\"display-inline-flex flex-wrap justify-content-between width-100pct\">\n            <span>A label for a form element with additional info</span>\n            <span class=\"text-color-gray text-italic text-size-12\">Supporting text</span>\n        </label>\n        <input id=\"sample-input\" class=\"form-control\" placeholder=\"Some random input\">\n    </div>\n    <div class=\"form-group\">\n        <label for=\"sample-input\" class=\"display-inline-flex flex-wrap justify-content-between width-100pct\">\n            <span>A label for a form element with additional info as icon</span>\n            <span class=\"text-color-gray text-size-12\">\n                <span class=\"rioglyph rioglyph-question-sign text-size-14 hover-text-color-info cursor-pointer\">\n                </span>\n            </span>\n        </label>\n        <input id=\"sample-input\" class=\"form-control\" placeholder=\"Some random input\">\n    </div>\n    <div class=\"form-group\">\n        <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>\n        </div>\n        <div class=\"bg-lightest rounded padding-15\">\n            <div class=\"uikit-switch\">\n                <label class=\"switch-label label-position-right\">\n                    <input type=\"checkbox\" class=\"switch-input\" checked=\"\">\n                    <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\">\n                        <div class=\"switch-handle\">\n                        </div>\n                    </div>Lorem ipsum dolor\n                </label>\n            </div>\n        </div>\n    </div>\n    <div class=\"form-group\">\n        <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">A label for some other elements</div>\n        <div class=\"btn-toolbar\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Button</button>\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Button</button>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "htmlFor",
+                      "type": "string",
+                      "default": "",
+                      "description": "Used for form elements. If given the tag will be set to \"label\", otherwise it uses a \"div\"."
+                    },
+                    {
+                      "name": "supportingText",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Additional supporting text displayed next to the label."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "A label for some large buttons",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\n\nexport default () => {\n    return (\n        <div className='display-flex flex-column gap-15 max-width-500'>\n            <p>\n                Labels for various sized elements using the <code>form-group-sm</code> and <code>form-group-lg</code>{' '}\n                class on the parent element.\n            </p>\n            <div className='form-group form-group-sm'>\n                <FormLabel htmlFor='sample-sm-input' supportingText='Lorem ipsum'>\n                    A label for a small form element\n                </FormLabel>\n                <input id='sample-sm-input' className='form-control' placeholder='Some input' />\n            </div>\n\n            <div className='form-group form-group-lg'>\n                <FormLabel htmlFor='sample-lg-input' supportingText='Lorem ipsum'>\n                    A label for a large form element\n                </FormLabel>\n                <input id='sample-lg-input' className='form-control' placeholder='Some input' />\n            </div>\n\n            <div className='form-group form-group-lg'>\n                <FormLabel>A label for some large buttons</FormLabel>\n                <ButtonToolbar>\n                    <Button bsSize='lg'>Button</Button>\n                    <Button bsSize='lg' bsStyle='primary'>\n                        Button\n                    </Button>\n                </ButtonToolbar>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column gap-15 max-width-500\">\n    <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>\n    <div class=\"form-group form-group-sm\">\n        <label for=\"sample-sm-input\" class=\"display-inline-flex flex-wrap justify-content-between width-100pct\">\n            <span>A label for a small form element</span>\n            <span class=\"text-color-gray text-italic text-size-10\">Lorem ipsum</span>\n        </label>\n        <input id=\"sample-sm-input\" class=\"form-control\" placeholder=\"Some input\">\n    </div>\n    <div class=\"form-group form-group-lg\">\n        <label for=\"sample-lg-input\" class=\"display-inline-flex flex-wrap justify-content-between width-100pct\">\n            <span>A label for a large form element</span>\n            <span class=\"text-color-gray text-italic text-size-14\">Lorem ipsum</span>\n        </label>\n        <input id=\"sample-lg-input\" class=\"form-control\" placeholder=\"Some input\">\n    </div>\n    <div class=\"form-group form-group-lg\">\n        <div class=\"text-color-dark max-width-100pct text-size-14 display-inline-block margin-bottom-5\">A label for some large buttons</div>\n        <div class=\"btn-toolbar\">\n            <button type=\"button\" class=\"btn btn-default btn-lg btn-component\" tabindex=\"0\">Button</button>\n            <button type=\"button\" class=\"btn btn-primary btn-lg btn-component\" tabindex=\"0\">Button</button>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "htmlFor",
+                      "type": "string",
+                      "default": "",
+                      "description": "Used for form elements. If given the tag will be set to \"label\", otherwise it uses a \"div\"."
+                    },
+                    {
+                      "name": "supportingText",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Additional supporting text displayed next to the label."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Components/components/fullscreenmap.json

@@ -0,0 +1,22 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:16.622Z",
+    "source": "https://uikit.developers.rio.cloud/#components/fullscreenMap",
+    "category": "Components",
+    "section": "Map",
+    "slug": "components/fullscreenmap",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "4f0110275aa274962a725755e8a8e3dd7aad289e252d78ee311b399c89cac8c1"
+  },
+  "title": null,
+  "lead": null,
+  "content": [
+    {
+      "heading": "Overview",
+      "body": "- resize: 1",
+      "examples": []
+    }
+  ],
+  "see_also": []
+}