@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/templates/progress-success.md

@@ -0,0 +1,142 @@
+# Progress success
+
+*Category:* Templates
+*Section:* Progress
+*Source:* https://uikit.developers.rio.cloud/#templates/progress-success
+*Captured:* 2025-12-12T12:39:33.047Z
+
+## Progress success
+
+### Example: Diam nonummy
+
+Lorem ipsum dolor sit amet
+Diam nonummy
+Consetetur sadipscing
+Voluptua
+Eirmod tempor
+Eum iriure
+500
+Sanctus
+No sea takimata
+Vulputate
+Tempor invidunt
+Duis autem vel eum
+
+#### Summary
+
+Lorem ipsum dolor sit amet
+Diam nonummy
+Consetetur sadipscing
+Voluptua
+Eirmod tempor
+Eum iriure
+500
+Sanctus
+No sea takimata
+Vulputate
+Tempor invidunt
+Duis autem vel eum
+
+#### React (tsx)
+
+```tsx
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+
+export default () => {
+    return (
+        <div className='max-width-500 margin-auto'>
+            <div className='display-grid place-items-center margin-y-25 margin-x-25-sm'>
+                <div className='width-100pct max-width-500'>
+                    <div className='panel panel-default position-relative'>
+                        <div
+                            className={
+                                'position-absolute top-0pct left-50pct translate-x-50pct-y-50pct ' +
+                                'border rounded-circle width-60 height-60 display-grid place-items-center bg-white'
+                            }
+                        >
+                            <span className='rioglyph rioglyph-ok text-color-success text-size-16 scale-150' />
+                        </div>
+                        <div className='panel-body padding-10 padding-25-ls'>
+                            <div className='border border-bottom-only padding-x-20 padding-top-25 padding-bottom-15 text-center'>
+                                <span className='text-color-success text-size-20'>Lorem ipsum dolor sit amet</span>
+                            </div>
+                            <div className='padding-10 padding-20-ls'>
+                                <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
+                                    <FormLabel className='text-right margin-0 line-height-20'>Diam nonummy</FormLabel>
+                                    <span>Consetetur sadipscing</span>
+                                </div>
+                                <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
+                                    <FormLabel className='text-right margin-0 line-height-20'>Voluptua</FormLabel>
+                                    <span>Eirmod tempor</span>
+                                </div>
+                                <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
+                                    <FormLabel className='text-right margin-0 line-height-20'>Eum iriure</FormLabel>
+                                    <span>500</span>
+                                </div>
+                                <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
+                                    <FormLabel className='text-right margin-0 line-height-20'>Sanctus</FormLabel>
+                                    <span className='text-medium'>No sea takimata</span>
+                                </div>
+                                <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
+                                    <FormLabel className='text-right margin-0 line-height-20'>Vulputate</FormLabel>
+                                    <div>
+                                        <div>Tempor invidunt</div>
+                                        <div className='margin-top-5 text-color-gray'>Duis autem vel eum</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-500 margin-auto">
+    <div class="display-grid place-items-center margin-y-25 margin-x-25-sm">
+        <div class="width-100pct max-width-500">
+            <div class="panel panel-default position-relative">
+                <div class="position-absolute top-0pct left-50pct translate-x-50pct-y-50pct border rounded-circle width-60 height-60 display-grid place-items-center bg-white">
+                    <span class="rioglyph rioglyph-ok text-color-success text-size-16 scale-150">
+                    </span>
+                </div>
+                <div class="panel-body padding-10 padding-25-ls">
+                    <div class="border border-bottom-only padding-x-20 padding-top-25 padding-bottom-15 text-center">
+                        <span class="text-color-success text-size-20">Lorem ipsum dolor sit amet</span>
+                    </div>
+                    <div class="padding-10 padding-20-ls">
+                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
+                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Diam nonummy</div>
+                            <span>Consetetur sadipscing</span>
+                        </div>
+                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
+                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Voluptua</div>
+                            <span>Eirmod tempor</span>
+                        </div>
+                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
+                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Eum iriure</div>
+                            <span>500</span>
+                        </div>
+                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
+                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Sanctus</div>
+                            <span class="text-medium">No sea takimata</span>
+                        </div>
+                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
+                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Vulputate</div>
+                            <div>
+                                <div>Tempor invidunt</div>
+                                <div class="margin-top-5 text-color-gray">Duis autem vel eum</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```

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

@@ -0,0 +1,434 @@
+# Form blocks
+
+*Category:* Templates
+*Section:* Forms
+*Source:* https://uikit.developers.rio.cloud/#templates/settings-form
+*Captured:* 2025-12-12T12:39:30.825Z
+
+## Form blocks
+
+### Example: This name will appear on your team profile page
+
+SettingsCompany 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).
+
+Sharable clear-thinking capability
+
+Company email
+Your contact email address for customer communication
+
+Display email on team page
+
+Office location
+Primary business address used for official correspondence
+
+MichiganMichigan
+North Carolina
+
+VenezuelaVenezuela
+Mauritius
+
+Preferred currency
+All pricing and payouts will be shown in this currency
+
+EUR - EuroUSD - US Dollar
+EUR - Euro
+GBP - British Pound
+
+DiscardApply changes
+
+#### Summary
+
+SettingsCompany 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).
+
+Sharable clear-thinking capability
+
+Company email
+Your contact email address for customer communication
+
+Display email on team page
+
+Office location
+Primary business address used for official correspondence
+
+MichiganMichigan
+North Carolina
+
+VenezuelaVenezuela
+Mauritius
+
+Preferred currency
+All pricing and payouts will be shown in this currency
+
+EUR - EuroUSD - US Dollar
+EUR - Euro
+GBP - British Pound
+
+DiscardApply 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 () => {
+    return (
+        <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="Heidenreich 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">Sharable clear-thinking capability</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="Sarina_Lehner66@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="611 Esperanza Mission">
+                            <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="Brookline">
+                            <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">Michigan</span>
+                                    <span class="clearButton hide pointer-events-none">
+                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                        </span>
+                                    </span>
+                                    <span class="caret">
+                                    </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">Michigan</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">North Carolina</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="99539-6575">
+                                <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">Venezuela</span>
+                                <span class="clearButton hide pointer-events-none">
+                                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                    </span>
+                                </span>
+                                <span class="caret">
+                                </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">Venezuela</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">Mauritius</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="clearButton hide pointer-events-none">
+                                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                    </span>
+                                </span>
+                                <span class="caret">
+                                </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>
+```