@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

package/dist/docs/templates/settings-form.md

@@ -0,0 +1,401 @@
+# Form blocks
+
+*Category:* Templates
+*Section:* Forms
+*Source:* https://uikit.developers.rio.cloud/#/templates/settings-form
+*Captured:* 2026-04-20T12:55:44.679Z
+
+## Form blocks
+
+### Example: This name will appear on your team profile page
+
+Settings Company display name
+This name will appear on your team profile page
+
+About the team
+Write a short summary about your organization or group (max 240 characters).
+
+Stand-alone system-worthy capacity
+
+Company email
+Your contact email address for customer communication
+
+Display email on team page
+
+Office location
+Primary business address used for official correspondence
+
+Wyoming Wyoming
+Louisiana
+
+Lithuania Lithuania
+Serbia
+
+Preferred currency
+All pricing and payouts will be shown in this currency
+
+EUR - Euro USD - US Dollar
+EUR - Euro
+GBP - British Pound
+
+Discard Apply changes
+
+#### React (tsx)
+
+```tsx
+import { faker } from '@faker-js/faker';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
+import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+import Select from '@rio-cloud/rio-uikit/Select';
+
+export default () => (
+    <div className='margin-25-md'>
+        <section className='padding-25-ls max-width-800 margin-auto'>
+            <fieldset>
+                <legend className='text-size-h2'>Settings</legend>
+
+                <form className='display-grid-md grid-cols-2-md row-gap-25 margin-top-25'>
+                    <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>
+                        <div>
+                            <div className='text-size-16 text-medium'>Company display name</div>
+                            <p className='text-wrap-balance text-color-dark'>
+                                This name will appear on your team profile page
+                            </p>
+                        </div>
+                        <div className='form-group'>
+                            <ClearableInput value={faker.company.name()} />
+                        </div>
+                    </section>
+
+                    <div className='grid-colspan-2'>
+                        <Divider dividerColor='lighter' />
+                    </div>
+
+                    <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>
+                        <div>
+                            <div className='text-size-16 text-medium'>About the team</div>
+                            <p className='text-wrap-balance text-color-dark'>
+                                Write a short summary about your organization or group (max 240 characters).
+                            </p>
+                        </div>
+                        <div className='form-group'>
+                            <textarea className='form-control' rows={4} defaultValue={faker.company.catchPhrase()} />
+                        </div>
+                    </section>
+
+                    <div className='grid-colspan-2'>
+                        <Divider dividerColor='lighter' />
+                    </div>
+
+                    <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>
+                        <div>
+                            <div className='text-size-16 text-medium'>Company email</div>
+                            <p className='text-wrap-balance text-color-dark'>
+                                Your contact email address for customer communication
+                            </p>
+                        </div>
+                        <div className='form-group'>
+                            <ClearableInput type='email' value={faker.internet.email()} />
+                            <Checkbox className='margin-top-15' defaultChecked>
+                                Display email on team page
+                            </Checkbox>
+                        </div>
+                    </section>
+
+                    <div className='grid-colspan-2'>
+                        <Divider dividerColor='lighter' />
+                    </div>
+
+                    <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>
+                        <div>
+                            <div className='text-size-16 text-medium'>Office location</div>
+                            <p className='text-wrap-balance text-color-dark'>
+                                Primary business address used for official correspondence
+                            </p>
+                        </div>
+                        <div className='form-group display-flex flex-column gap-15'>
+                            <ClearableInput value={faker.location.streetAddress()} placeholder='Street address' />
+                            <ClearableInput value={faker.location.city()} placeholder='City' />
+                            <div className='display-flex gap-15'>
+                                <Select
+                                    options={[
+                                        { id: '1', label: faker.location.state(), selected: true },
+                                        { id: '2', label: faker.location.state() },
+                                    ]}
+                                />
+                                <ClearableInput value={faker.location.zipCode()} placeholder='Zip code' />
+                            </div>
+                            <Select
+                                options={[
+                                    { id: '1', label: faker.location.country(), selected: true },
+                                    { id: '2', label: faker.location.country() },
+                                ]}
+                            />
+                        </div>
+                    </section>
+
+                    <div className='grid-colspan-2'>
+                        <Divider dividerColor='lighter' />
+                    </div>
+
+                    <section className='display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25'>
+                        <div>
+                            <div className='text-size-16 text-medium'>Preferred currency</div>
+                            <p className='text-wrap-balance text-color-dark'>
+                                All pricing and payouts will be shown in this currency
+                            </p>
+                        </div>
+                        <div className='form-group'>
+                            <Select
+                                options={[
+                                    { id: '1', label: 'USD - US Dollar' },
+                                    { id: '2', label: 'EUR - Euro', selected: true },
+                                    { id: '3', label: 'GBP - British Pound' },
+                                ]}
+                            />
+                        </div>
+                    </section>
+
+                    <div className='grid-colspan-2'>
+                        <Divider dividerColor='lighter' />
+                    </div>
+
+                    <section className='grid-colspan-2'>
+                        <ButtonToolbar alignment='right'>
+                            <Button bsStyle='muted-filled'>Discard</Button>
+                            <Button type='submit' bsStyle='primary'>
+                                Apply changes
+                            </Button>
+                        </ButtonToolbar>
+                    </section>
+                </form>
+            </fieldset>
+        </section>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md">
+    <section class="padding-25-ls max-width-800 margin-auto">
+        <fieldset>
+            <legend class="text-size-h2">Settings</legend>
+            <form class="display-grid-md grid-cols-2-md row-gap-25 margin-top-25">
+                <section class="display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25">
+                    <div>
+                        <div class="text-size-16 text-medium">Company display name</div>
+                        <p class="text-wrap-balance text-color-dark">This name will appear on your team profile page</p>
+                    </div>
+                    <div class="form-group">
+                        <div class="ClearableInput input-group">
+                            <input class="form-control withClearButton" type="text" tabindex="0" value="Schuster Inc">
+                            <span class="clearButton">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </section>
+                <div class="grid-colspan-2">
+                    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
+                        </div>
+                    </div>
+                </div>
+                <section class="display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25">
+                    <div>
+                        <div class="text-size-16 text-medium">About the team</div>
+                        <p class="text-wrap-balance text-color-dark">Write a short summary about your organization or group (max 240 characters).</p>
+                    </div>
+                    <div class="form-group">
+                        <textarea class="form-control" rows="4">Stand-alone system-worthy capacity</textarea>
+                    </div>
+                </section>
+                <div class="grid-colspan-2">
+                    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
+                        </div>
+                    </div>
+                </div>
+                <section class="display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25">
+                    <div>
+                        <div class="text-size-16 text-medium">Company email</div>
+                        <p class="text-wrap-balance text-color-dark">Your contact email address for customer communication</p>
+                    </div>
+                    <div class="form-group">
+                        <div class="ClearableInput input-group">
+                            <input class="form-control withClearButton" type="email" tabindex="0" value="Nadine_Baumbach@gmail.com">
+                            <span class="clearButton">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                        </div>
+                        <label class="checkbox margin-top-15" tabindex="0">
+                            <input type="checkbox" class="margin-top-15" checked="">
+                            <span class="checkbox-text">
+                                <span>Display email on team page</span>
+                            </span>
+                        </label>
+                    </div>
+                </section>
+                <div class="grid-colspan-2">
+                    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
+                        </div>
+                    </div>
+                </div>
+                <section class="display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25">
+                    <div>
+                        <div class="text-size-16 text-medium">Office location</div>
+                        <p class="text-wrap-balance text-color-dark">Primary business address used for official correspondence</p>
+                    </div>
+                    <div class="form-group display-flex flex-column gap-15">
+                        <div class="ClearableInput input-group">
+                            <input placeholder="Street address" class="form-control withClearButton" type="text" tabindex="0" value="27532 Boehm Loaf">
+                            <span class="clearButton">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                        </div>
+                        <div class="ClearableInput input-group">
+                            <input placeholder="City" class="form-control withClearButton" type="text" tabindex="0" value="Fort Kieranland">
+                            <span class="clearButton">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                        </div>
+                        <div class="display-flex gap-15">
+                            <div class="select dropdown dropup">
+                                <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
+                                    <span class="selected-option-text">Wyoming</span>
+                                    <span class="select-toggle-actions">
+                                        <span class="clearButton hide pointer-events-none">
+                                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                            </span>
+                                        </span>
+                                        <span class="caret">
+                                        </span>
+                                    </span>
+                                </button>
+                                <ul class="dropdown-menu" role="menu">
+                                    <li class="" role="listitem">
+                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="1" data-item-index="0">
+                                            <span class="selected-option-dropdown-item">Wyoming</span>
+                                            <input type="hidden" value="1">
+                                        </a>
+                                    </li>
+                                    <li class="" role="listitem">
+                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
+                                            <span class="selected-option-dropdown-item">Louisiana</span>
+                                            <input type="hidden" value="2">
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="ClearableInput input-group">
+                                <input placeholder="Zip code" class="form-control withClearButton" type="text" tabindex="0" value="48640">
+                                <span class="clearButton">
+                                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                    </span>
+                                </span>
+                            </div>
+                        </div>
+                        <div class="select dropdown dropup">
+                            <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
+                                <span class="selected-option-text">Lithuania</span>
+                                <span class="select-toggle-actions">
+                                    <span class="clearButton hide pointer-events-none">
+                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                        </span>
+                                    </span>
+                                    <span class="caret">
+                                    </span>
+                                </span>
+                            </button>
+                            <ul class="dropdown-menu" role="menu">
+                                <li class="" role="listitem">
+                                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="1" data-item-index="0">
+                                        <span class="selected-option-dropdown-item">Lithuania</span>
+                                        <input type="hidden" value="1">
+                                    </a>
+                                </li>
+                                <li class="" role="listitem">
+                                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
+                                        <span class="selected-option-dropdown-item">Serbia</span>
+                                        <input type="hidden" value="2">
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </section>
+                <div class="grid-colspan-2">
+                    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
+                        </div>
+                    </div>
+                </div>
+                <section class="display-grid-md grid-cols-subgrid grid-column-start-1 grid-column-end-3 gap-25">
+                    <div>
+                        <div class="text-size-16 text-medium">Preferred currency</div>
+                        <p class="text-wrap-balance text-color-dark">All pricing and payouts will be shown in this currency</p>
+                    </div>
+                    <div class="form-group">
+                        <div class="select dropdown dropup">
+                            <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
+                                <span class="selected-option-text">EUR - Euro</span>
+                                <span class="select-toggle-actions">
+                                    <span class="clearButton hide pointer-events-none">
+                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                        </span>
+                                    </span>
+                                    <span class="caret">
+                                    </span>
+                                </span>
+                            </button>
+                            <ul class="dropdown-menu" role="menu">
+                                <li class="" role="listitem">
+                                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="1" data-item-index="0">
+                                        <span class="selected-option-dropdown-item">USD - US Dollar</span>
+                                        <input type="hidden" value="1">
+                                    </a>
+                                </li>
+                                <li class="" role="listitem">
+                                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
+                                        <span class="selected-option-dropdown-item">EUR - Euro</span>
+                                        <input type="hidden" value="2">
+                                    </a>
+                                </li>
+                                <li class="" role="listitem">
+                                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="3" data-item-index="2">
+                                        <span class="selected-option-dropdown-item">GBP - British Pound</span>
+                                        <input type="hidden" value="3">
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </section>
+                <div class="grid-colspan-2">
+                    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+                        <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
+                        </div>
+                    </div>
+                </div>
+                <section class="grid-colspan-2">
+                    <div class="btn-toolbar justify-content-end">
+                        <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Discard</button>
+                        <button type="submit" class="btn btn-primary btn-component" tabindex="0">Apply changes</button>
+                    </div>
+                </section>
+            </form>
+        </fieldset>
+    </section>
+</div>
+```