@rio-cloud/uikit-mcp 1.1.6 → 1.1.8

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

@@ -1,199 +0,0 @@
-# Form summary
-
-*Category:* Templates
-*Section:* Forms
-*Source:* https://uikit.developers.rio.cloud/#/templates/form-summary
-*Captured:* 2026-02-23T13:48:42.803Z
-
-## Form summary
-
-### Example: Request summary
-
-Request summary
-Generated client request data
-
-Contact personEunice Cole
-Requested roleNational Branding Analyst
-Contact emailOlivia7@gmail.com
-Annual budget€99,514.00
-Project descriptionEt consuasor summisse tempore valde.
-Crinis adimpleo contigo enim aedificium valde.
-Solutio similique stillicidium expedita tandem denego cursim timidus coerceo.
-Supporting filesproject-outline.pdf
-2.4MB
-Download
-
-wireframes.pdf
-3.7MB
-Download
-
-#### Summary
-
-Request summary
-Generated client request data
-
-Contact personEunice Cole
-Requested roleNational Branding Analyst
-Contact emailOlivia7@gmail.com
-Annual budget€99,514.00
-Project descriptionEt consuasor summisse tempore valde.
-Crinis adimpleo contigo enim aedificium valde.
-Solutio similique stillicidium expedita tandem denego cursim timidus coerceo.
-Supporting filesproject-outline.pdf
-2.4MB
-Download
-
-wireframes.pdf
-3.7MB
-Download
-
-#### React (tsx)
-
-```tsx
-import { faker } from '@faker-js/faker';
-import Button from '@rio-cloud/rio-uikit/Button';
-import { FormattedNumber } from 'react-intl';
-
-export default () => {
-    const subjectInfo = {
-        fullName: faker.person.fullName(),
-        role: faker.person.jobTitle(),
-        email: faker.internet.email(),
-        budget: faker.number.int({ min: 50_000, max: 200_000 }),
-        description: faker.lorem.lines(3),
-        attachments: [
-            {
-                name: 'project-outline.pdf',
-                sizeMB: 2.4,
-            },
-            {
-                name: 'wireframes.pdf',
-                sizeMB: 3.7,
-            },
-        ],
-    };
-
-    return (
-        <div className='max-width-600 margin-auto'>
-            <div>
-                <div className='padding-x-5'>
-                    <h3 className='text-base/7 font-semibold text-text-color-darker'>Request summary</h3>
-                    <p className='mt-1 max-w-2xl text-sm/6 text-gray-500'>Generated client request data</p>
-                </div>
-                <div className='mt-6 border-t border-gray-100'>
-                    <dl className='divider-y-1 divider-color-lighter divider-style-solid'>
-                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
-                            <dt className='text-medium text-color-darkest'>Contact person</dt>
-                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.fullName}</dd>
-                        </div>
-                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
-                            <dt className='text-medium text-color-darkest'>Requested role</dt>
-                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.role}</dd>
-                        </div>
-                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
-                            <dt className='text-medium text-color-darkest'>Contact email</dt>
-                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.email}</dd>
-                        </div>
-                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
-                            <dt className='text-medium text-color-darkest'>Annual budget</dt>
-                            <dd className='grid-colspan-2 text-color-darker'>
-                                <FormattedNumber value={subjectInfo.budget} style='currency' currency='EUR' />
-                            </dd>
-                        </div>
-                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
-                            <dt className='text-medium text-color-darkest'>Project description</dt>
-                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.description}</dd>
-                        </div>
-                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
-                            <dt className='text-medium text-color-darkest'>Supporting files</dt>
-                            <dd className='grid-colspan-2'>
-                                <div className='list-group border rounded'>
-                                    {subjectInfo.attachments.map(file => (
-                                        <div
-                                            key={file.name}
-                                            className='list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5'
-                                        >
-                                            <div className='grid-colspan-4'>{file.name}</div>
-                                            <div className='text-color-dark text-size-12'>
-                                                <FormattedNumber
-                                                    value={file.sizeMB}
-                                                    style='unit'
-                                                    unit='megabyte'
-                                                    unitDisplay='narrow'
-                                                />
-                                            </div>
-                                            <div className='grid-colspan-2 text-right'>
-                                                <Button variant='link'>Download</Button>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            </dd>
-                        </div>
-                    </dl>
-                </div>
-            </div>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="max-width-600 margin-auto">
-    <div>
-        <div class="padding-x-5">
-            <h3 class="text-base/7 font-semibold text-text-color-darker">Request summary</h3>
-            <p class="mt-1 max-w-2xl text-sm/6 text-gray-500">Generated client request data</p>
-        </div>
-        <div class="mt-6 border-t border-gray-100">
-            <dl class="divider-y-1 divider-color-lighter divider-style-solid">
-                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
-                    <dt class="text-medium text-color-darkest">Contact person</dt>
-                    <dd class="grid-colspan-2 text-color-darker">Eunice Cole</dd>
-                </div>
-                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
-                    <dt class="text-medium text-color-darkest">Requested role</dt>
-                    <dd class="grid-colspan-2 text-color-darker">National Branding Analyst</dd>
-                </div>
-                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
-                    <dt class="text-medium text-color-darkest">Contact email</dt>
-                    <dd class="grid-colspan-2 text-color-darker">Olivia7@gmail.com</dd>
-                </div>
-                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
-                    <dt class="text-medium text-color-darkest">Annual budget</dt>
-                    <dd class="grid-colspan-2 text-color-darker">€99,514.00</dd>
-                </div>
-                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
-                    <dt class="text-medium text-color-darkest">Project description</dt>
-                    <dd class="grid-colspan-2 text-color-darker">Et consuasor summisse tempore valde.
-                        Crinis adimpleo contigo enim aedificium valde.
-                        Solutio similique stillicidium expedita tandem denego cursim timidus coerceo.</dd>
-                </div>
-                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
-                    <dt class="text-medium text-color-darkest">Supporting files</dt>
-                    <dd class="grid-colspan-2">
-                        <div class="list-group border rounded">
-                            <div class="list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5">
-                                <div class="grid-colspan-4">project-outline.pdf</div>
-                                <div class="text-color-dark text-size-12">2.4MB</div>
-                                <div class="grid-colspan-2 text-right">
-                                    <button type="button" class="btn btn-default btn-link btn-component" tabindex="0">Download</button>
-                                </div>
-                            </div>
-                            <div class="list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5">
-                                <div class="grid-colspan-4">wireframes.pdf</div>
-                                <div class="text-color-dark text-size-12">3.7MB</div>
-                                <div class="grid-colspan-2 text-right">
-                                    <button type="button" class="btn btn-default btn-link btn-component" tabindex="0">Download</button>
-                                </div>
-                            </div>
-                        </div>
-                    </dd>
-                </div>
-            </dl>
-        </div>
-    </div>
-</div>
-```

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

@@ -1,367 +0,0 @@
-# Form toggle
-
-*Category:* Templates
-*Section:* Forms
-*Source:* https://uikit.developers.rio.cloud/#/templates/form-toggle
-*Captured:* 2026-02-23T13:48:42.030Z
-
-## Form toggle
-
-### Example: Example 1
-
-Size by form-group
-Note
-Different form-group sizes come with different bottom spacing
-
-Wrapped by sized form-groups
-form-group-sm + form-group-not-editableLorem Ipsum Dolor
-
-form-group + form-group-not-editableLorem Ipsum Dolor
-
-form-group-lg + form-group-not-editableLorem Ipsum Dolor
-
-Edit
-
-Size by input-group
-Note
-No form-group size results in the same bottom spacing
-
-Wrapped only by form-group
-input-group-sm input-group-not-editableLorem Ipsum Dolor
-
-input-group input-group-not-editableLorem Ipsum Dolor
-
-input-group-lg input-group-not-editableLorem Ipsum Dolor
-
-Edit
-
-#### Summary
-
-Size by form-group
-Note
-Different form-group sizes come with different bottom spacing
-
-Wrapped by sized form-groups
-form-group-sm + form-group-not-editableLorem Ipsum Dolor
-
-form-group + form-group-not-editableLorem Ipsum Dolor
-
-form-group-lg + form-group-not-editableLorem Ipsum Dolor
-
-Edit
-
-Size by input-group
-Note
-No form-group size results in the same bottom spacing
-
-Wrapped only by form-group
-input-group-sm input-group-not-editableLorem Ipsum Dolor
-
-input-group input-group-not-editableLorem Ipsum Dolor
-
-input-group-lg input-group-not-editableLorem Ipsum Dolor
-
-Edit
-
-#### React (tsx)
-
-```tsx
-import { useState } from 'react';
-
-import { Note } from '../../../components/Note';
-
-import Button from '@rio-cloud/rio-uikit/Button';
-import Card from '@rio-cloud/rio-uikit/Card';
-import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
-
-type FormGroupProps = {
-    size?: 'sm' | 'lg';
-    value: string;
-    editMode: boolean;
-    onChange: VoidFunction;
-};
-
-const FormGroup = ({ size, value, editMode, onChange }: FormGroupProps) => {
-    return (
-        <div className={`form-group ${size ? `form-group-${size}` : ''} ${!editMode ? 'form-group-not-editable' : ''}`}>
-            <FormLabel htmlFor='input1'>{`form-group${size ? `-${size}` : ''} ${
-                !editMode ? '+ form-group-not-editable' : ''
-            }`}</FormLabel>
-            {editMode ? (
-                <div className='input-group'>
-                    <input id='input1' className='form-control' type='text' defaultValue={value} onChange={onChange} />
-                    <span className='input-group-btn'>
-                        <Button
-                            iconOnly
-                            iconName='rioglyph-trash'
-                            bsSize={size}
-                            className={!editMode ? 'form-group-not-editable' : ''}
-                        />
-                    </span>
-                </div>
-            ) : (
-                <div>{value}</div>
-            )}
-        </div>
-    );
-};
-
-type InputGroupProps = {
-    size?: 'sm' | 'lg';
-    value: string;
-    editMode: boolean;
-    onChange: VoidFunction;
-};
-
-const InputGroup = ({ size, value, editMode, onChange }: InputGroupProps) => {
-    return (
-        <>
-            <FormLabel htmlFor='input2'>{`input-group${size ? `-${size}` : ''} ${
-                !editMode ? 'input-group-not-editable' : ''
-            }`}</FormLabel>
-            <div
-                className={`input-group ${size ? `input-group-${size}` : ''} ${
-                    !editMode ? '+ input-group-not-editable' : ''
-                }`}
-            >
-                {editMode ? (
-                    <>
-                        <input
-                            id='input2'
-                            className='form-control'
-                            type='text'
-                            defaultValue={value}
-                            onChange={onChange}
-                        />
-                        <span className='input-group-btn'>
-                            <Button
-                                iconOnly
-                                iconName='rioglyph-trash'
-                                bsSize={size}
-                                className={!editMode ? 'form-group-not-editable' : ''}
-                            />
-                        </span>
-                    </>
-                ) : (
-                    <div>{value}</div>
-                )}
-            </div>
-        </>
-    );
-};
-
-export default () => {
-    const [editModes, setEditModes] = useState<Record<string, boolean>>({
-        formGroupEditMode: false,
-        inputGroupEditMode: false,
-    });
-
-    const [hasFormGroupExampleChanged, setHasFormGroupExampleChanged] = useState(false);
-    const [hasInputGroupExampleChanged, setHasInputGroupExampleChanged] = useState(false);
-
-    const handleFormInputChange = () => setHasFormGroupExampleChanged(true);
-    const handleInputChange = () => setHasInputGroupExampleChanged(true);
-
-    const handleChange = (key: string) => {
-        const newState = !editModes[key];
-
-        setEditModes({
-            ...editModes,
-            [key]: newState,
-        });
-
-        setHasFormGroupExampleChanged(false);
-        setHasInputGroupExampleChanged(false);
-    };
-
-    const { formGroupEditMode, inputGroupEditMode } = editModes;
-
-    return (
-        <div className='display-grid gap-25 grid-cols-1 grid-cols-2-sm'>
-            <Card className='display-flex flex-column justify-content-between' padding={25}>
-                <div>
-                    <div className='text-medium text-size-18 margin-bottom-5'>Size by form-group</div>
-                    <Note>Different form-group sizes come with different bottom spacing</Note>
-                    <hr className='margin-top-20 margin-bottom-15' />
-
-                    <div className='h5'>Wrapped by sized form-groups</div>
-                    <FormGroup
-                        onChange={handleFormInputChange}
-                        editMode={formGroupEditMode}
-                        size='sm'
-                        value='Lorem Ipsum Dolor'
-                    />
-                    <FormGroup
-                        onChange={handleFormInputChange}
-                        editMode={formGroupEditMode}
-                        value='Lorem Ipsum Dolor'
-                    />
-                    <FormGroup
-                        onChange={handleFormInputChange}
-                        editMode={formGroupEditMode}
-                        size='lg'
-                        value='Lorem Ipsum Dolor'
-                    />
-                </div>
-
-                <div className={`margin-top-25 display-flex ${formGroupEditMode ? 'justify-content-end' : ''}`}>
-                    {!formGroupEditMode && (
-                        <Button iconName='rioglyph-pencil' onClick={() => handleChange('formGroupEditMode')}>
-                            Edit
-                        </Button>
-                    )}
-                    {formGroupEditMode && (
-                        <div className='btn-toolbar'>
-                            <Button onClick={() => handleChange('formGroupEditMode')}>Cancel</Button>
-                            <Button
-                                bsStyle='primary'
-                                disabled={!hasFormGroupExampleChanged}
-                                onClick={() => handleChange('formGroupEditMode')}
-                            >
-                                Save changes
-                            </Button>
-                        </div>
-                    )}
-                </div>
-            </Card>
-
-            <Card className='display-flex flex-column justify-content-between' padding={25}>
-                <div>
-                    <div className='text-medium text-size-18 margin-bottom-5'>Size by input-group</div>
-                    <Note>No form-group size results in the same bottom spacing</Note>
-                    <hr className='margin-top-20 margin-bottom-15' />
-                    <div className='h5'>Wrapped only by form-group</div>
-                    <div className='form-group'>
-                        <InputGroup
-                            onChange={handleInputChange}
-                            editMode={inputGroupEditMode}
-                            size='sm'
-                            value='Lorem Ipsum Dolor'
-                        />
-                    </div>
-                    <div className='form-group'>
-                        <InputGroup
-                            onChange={handleInputChange}
-                            editMode={inputGroupEditMode}
-                            value='Lorem Ipsum Dolor'
-                        />
-                    </div>
-                    <div className='form-group'>
-                        <InputGroup
-                            onChange={handleInputChange}
-                            editMode={inputGroupEditMode}
-                            size='lg'
-                            value='Lorem Ipsum Dolor'
-                        />
-                    </div>
-                </div>
-
-                <div className={`margin-top-25 display-flex ${inputGroupEditMode ? 'justify-content-end' : ''}`}>
-                    {!inputGroupEditMode && (
-                        <Button iconName='rioglyph-pencil' onClick={() => handleChange('inputGroupEditMode')}>
-                            Edit
-                        </Button>
-                    )}
-                    {inputGroupEditMode && (
-                        <div className='btn-toolbar'>
-                            <Button onClick={() => handleChange('inputGroupEditMode')}>Cancel</Button>
-                            <Button
-                                bsStyle='primary'
-                                disabled={!hasInputGroupExampleChanged}
-                                onClick={() => handleChange('inputGroupEditMode')}
-                            >
-                                Save changes
-                            </Button>
-                        </div>
-                    )}
-                </div>
-            </Card>
-        </div>
-    );
-};
-```
-
-#### HTML (html)
-
-```html
-<div class="display-grid gap-25 grid-cols-1 grid-cols-2-sm">
-    <div class="bg-white rounded border shadow-default padding-25 display-flex flex-column justify-content-between">
-        <div>
-            <div class="text-medium text-size-18 margin-bottom-5">Size by form-group</div>
-            <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0" data-capture-callout="true">
-                <div>
-                    <span class="label label-info label-condensed label-filled">Note</span>
-                </div>
-                <div class="width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1">Different form-group sizes come with different bottom spacing</div>
-            </div>
-            <hr class="margin-top-20 margin-bottom-15">
-            <div class="h5">Wrapped by sized form-groups</div>
-            <div class="form-group form-group-sm form-group-not-editable">
-                <label for="input1" class="display-inline-block">
-                    <span>form-group-sm + form-group-not-editable</span>
-                </label>
-                <div>Lorem Ipsum Dolor</div>
-            </div>
-            <div class="form-group  form-group-not-editable">
-                <label for="input1" class="display-inline-block">
-                    <span>form-group + form-group-not-editable</span>
-                </label>
-                <div>Lorem Ipsum Dolor</div>
-            </div>
-            <div class="form-group form-group-lg form-group-not-editable">
-                <label for="input1" class="display-inline-block">
-                    <span>form-group-lg + form-group-not-editable</span>
-                </label>
-                <div>Lorem Ipsum Dolor</div>
-            </div>
-        </div>
-        <div class="margin-top-25 display-flex ">
-            <button type="button" class="btn btn-default btn-component" tabindex="0">
-                <span class="rioglyph rioglyph-pencil">
-                </span>Edit</button>
-        </div>
-    </div>
-    <div class="bg-white rounded border shadow-default padding-25 display-flex flex-column justify-content-between">
-        <div>
-            <div class="text-medium text-size-18 margin-bottom-5">Size by input-group</div>
-            <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0" data-capture-callout="true">
-                <div>
-                    <span class="label label-info label-condensed label-filled">Note</span>
-                </div>
-                <div class="width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1">No form-group size results in the same bottom spacing</div>
-            </div>
-            <hr class="margin-top-20 margin-bottom-15">
-            <div class="h5">Wrapped only by form-group</div>
-            <div class="form-group">
-                <label for="input2" class="display-inline-block">
-                    <span>input-group-sm input-group-not-editable</span>
-                </label>
-                <div class="input-group input-group-sm + input-group-not-editable">
-                    <div>Lorem Ipsum Dolor</div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label for="input2" class="display-inline-block">
-                    <span>input-group input-group-not-editable</span>
-                </label>
-                <div class="input-group  + input-group-not-editable">
-                    <div>Lorem Ipsum Dolor</div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label for="input2" class="display-inline-block">
-                    <span>input-group-lg input-group-not-editable</span>
-                </label>
-                <div class="input-group input-group-lg + input-group-not-editable">
-                    <div>Lorem Ipsum Dolor</div>
-                </div>
-            </div>
-        </div>
-        <div class="margin-top-25 display-flex ">
-            <button type="button" class="btn btn-default btn-component" tabindex="0">
-                <span class="rioglyph rioglyph-pencil">
-                </span>Edit</button>
-        </div>
-    </div>
-</div>
-```