@rio-cloud/uikit-mcp 1.1.5 → 1.1.7

package/dist/docs/components/radioCardGroup.md

@@ -0,0 +1,487 @@
+# RadioCardGroup
+
+*Category:* Components
+*Section:* Interaction
+*Source:* https://uikit.developers.rio.cloud/#/components/radioCardGroup
+*Captured:* 2026-02-23T15:48:16.558Z
+
+Card-based radio selection built on top of RadioButton. Supports options-based usage and a compound API via RadioCardItem and RadioCardIndicator.
+
+## RadioCardGroup
+
+### Example: This option is a first option
+
+Inline cardsOption 1
+This option is a first option
+
+Option 2
+This option is a second option
+
+Option 3
+This option is a third option
+
+Stacked horizontal cardsLorem ipsum
+
+Dolor sit amet
+
+Qui repellat dolores
+
+Stacked cardsOption 1
+This option is a first option
+
+Option 2 (disabled)
+This option is a second option
+
+Option 3
+This option is a third option
+
+Option 4
+This option is a forth option
+
+Reset selectionUnselect
+
+#### Summary
+
+Inline cardsOption 1
+This option is a first option
+
+Option 2
+This option is a second option
+
+Option 3
+This option is a third option
+
+Stacked horizontal cardsLorem ipsum
+
+Dolor sit amet
+
+Qui repellat dolores
+
+Stacked cardsOption 1
+This option is a first option
+
+Option 2 (disabled)
+This option is a second option
+
+Option 3
+This option is a third option
+
+Option 4
+This option is a forth option
+
+Reset selectionUnselect
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import RadioCardGroup, { type RadioCardOption } from '@rio-cloud/rio-uikit/RadioCardGroup';
+
+const boxOptions: RadioCardOption[] = [
+    {
+        value: 'option-1',
+        label: 'Option 1',
+        description: 'This option is a first option',
+    },
+    {
+        value: 'option-2',
+        label: 'Option 2',
+        description: 'This option is a second option',
+    },
+    {
+        value: 'option-3',
+        label: 'Option 3',
+        description: 'This option is a third option',
+    },
+];
+
+const stackedHorizontalOption: RadioCardOption[] = [
+    {
+        value: 'option-1',
+        label: 'Lorem ipsum',
+    },
+    {
+        value: 'option-2',
+        label: 'Dolor sit amet',
+    },
+    {
+        value: 'option-3',
+        label: 'Qui repellat dolores',
+    },
+];
+
+const stackedOptions: RadioCardOption[] = [
+    {
+        value: 'option-1',
+        label: 'Option 1',
+        description: 'This option is a first option',
+    },
+    {
+        value: 'option-2',
+        label: 'Option 2 (disabled)',
+        description: 'This option is a second option',
+        disabled: true,
+    },
+    {
+        value: 'option-3',
+        label: 'Option 3',
+        description: 'This option is a third option',
+    },
+    {
+        value: 'option-4',
+        label: 'Option 4',
+        description: 'This option is a forth option',
+    },
+];
+
+export default () => {
+    const [boxValue, setBoxValue] = useState('option-1');
+    const [stackedValue, setStackedValue] = useState('option-1');
+    const [stackedHorizontalValue, setStackedHorizontalValue] = useState('option-1');
+
+    return (
+        <div className='space-y-50'>
+            <div>
+                <label>Inline cards</label>
+                <RadioCardGroup
+                    name='radioCardGroupInline'
+                    options={boxOptions}
+                    value={boxValue}
+                    onChange={nextValue => setBoxValue(nextValue)}
+                />
+            </div>
+            <div>
+                <label>Stacked horizontal cards</label>
+                <RadioCardGroup
+                    name='radioCardGroupStackedHorizontal'
+                    options={stackedHorizontalOption}
+                    value={stackedHorizontalValue}
+                    onChange={nextValue => setStackedHorizontalValue(nextValue)}
+                    variant='stacked-horizontal'
+                />
+            </div>
+            <div>
+                <label>Stacked cards</label>
+                <RadioCardGroup
+                    name='radioCardGroupStacked'
+                    options={stackedOptions}
+                    value={stackedValue}
+                    onChange={nextValue => setStackedValue(nextValue)}
+                    variant='stacked'
+                />
+                <div className='display-flex gap-10 margin-top-10'>
+                    <Button onClick={() => setStackedValue('option-1')}>Reset selection</Button>
+                    <Button onClick={() => setStackedValue('')}>Unselect</Button>
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="space-y-50">
+    <div>
+        <label>Inline cards</label>
+        <div class="display-flex gap-15">
+            <label class="radio padding-15 border rounded border-color-highlight" tabindex="0">
+                <input type="radio" class="padding-15 border rounded border-color-highlight" name="radioCardGroupInline" value="option-1" checked="">
+                <div class="radio-text-wrapper display-flex">
+                    <span class="radio-text">
+                    </span>
+                    <div class="margin-left-5 margin-right-5">
+                        <div class="text-medium">Option 1</div>
+                        <div class="text-color-dark">This option is a first option</div>
+                    </div>
+                </div>
+            </label>
+            <label class="radio padding-15 border rounded" tabindex="0">
+                <input type="radio" class="padding-15 border rounded" name="radioCardGroupInline" value="option-2">
+                <div class="radio-text-wrapper display-flex">
+                    <span class="radio-text">
+                    </span>
+                    <div class="margin-left-5 margin-right-5">
+                        <div class="text-medium">Option 2</div>
+                        <div class="text-color-dark">This option is a second option</div>
+                    </div>
+                </div>
+            </label>
+            <label class="radio padding-15 border rounded" tabindex="0">
+                <input type="radio" class="padding-15 border rounded" name="radioCardGroupInline" value="option-3">
+                <div class="radio-text-wrapper display-flex">
+                    <span class="radio-text">
+                    </span>
+                    <div class="margin-left-5 margin-right-5">
+                        <div class="text-medium">Option 3</div>
+                        <div class="text-color-dark">This option is a third option</div>
+                    </div>
+                </div>
+            </label>
+        </div>
+    </div>
+    <div>
+        <label>Stacked horizontal cards</label>
+        <div class="display-flex">
+            <label class="radio padding-15 border rounded-top-left rounded-bottom-left border-color-highlight bg-highlight-decent z-index-1" tabindex="0">
+                <input type="radio" class="padding-15 border rounded-top-left rounded-bottom-left border-color-highlight bg-highlight-decent z-index-1" name="radioCardGroupStackedHorizontal" value="option-1" checked="">
+                <div class="radio-text-wrapper display-flex">
+                    <span class="radio-text">
+                    </span>
+                    <div class="margin-left-5 margin-right-5">
+                        <div class="text-medium">Lorem ipsum</div>
+                    </div>
+                </div>
+            </label>
+            <label class="radio padding-15 border margin-left--1" tabindex="0">
+                <input type="radio" class="padding-15 border margin-left--1" name="radioCardGroupStackedHorizontal" value="option-2">
+                <div class="radio-text-wrapper display-flex">
+                    <span class="radio-text">
+                    </span>
+                    <div class="margin-left-5 margin-right-5">
+                        <div class="text-medium">Dolor sit amet</div>
+                    </div>
+                </div>
+            </label>
+            <label class="radio padding-15 border margin-left--1 rounded-top-right rounded-bottom-right" tabindex="0">
+                <input type="radio" class="padding-15 border margin-left--1 rounded-top-right rounded-bottom-right" name="radioCardGroupStackedHorizontal" value="option-3">
+                <div class="radio-text-wrapper display-flex">
+                    <span class="radio-text">
+                    </span>
+                    <div class="margin-left-5 margin-right-5">
+                        <div class="text-medium">Qui repellat dolores</div>
+                    </div>
+                </div>
+            </label>
+        </div>
+    </div>
+    <div>
+        <label>Stacked cards</label>
+        <div class="display-flex flex-column">
+            <label class="radio padding-15 border rounded-top-left rounded-top-right border-color-highlight bg-highlight-decent z-index-1" tabindex="0">
+                <input type="radio" class="padding-15 border rounded-top-left rounded-top-right border-color-highlight bg-highlight-decent z-index-1" name="radioCardGroupStacked" value="option-1" checked="">
+                <div class="radio-text-wrapper display-flex">
+                    <span class="radio-text">
+                    </span>
+                    <div class="margin-left-5 margin-right-5">
+                        <div class="text-medium">Option 1</div>
+                        <div class="text-color-dark">This option is a first option</div>
+                    </div>
+                </div>
+            </label>
+            <label class="radio padding-15 border margin-top--1" tabindex="0">
+                <input type="radio" disabled="" class="padding-15 border margin-top--1" name="radioCardGroupStacked" value="option-2">
+                <div class="radio-text-wrapper display-flex">
+                    <span class="radio-text">
+                    </span>
+                    <div class="margin-left-5 margin-right-5">
+                        <div class="text-medium">Option 2 (disabled)</div>
+                        <div class="text-color-dark">This option is a second option</div>
+                    </div>
+                </div>
+            </label>
+            <label class="radio padding-15 border margin-top--1" tabindex="0">
+                <input type="radio" class="padding-15 border margin-top--1" name="radioCardGroupStacked" value="option-3">
+                <div class="radio-text-wrapper display-flex">
+                    <span class="radio-text">
+                    </span>
+                    <div class="margin-left-5 margin-right-5">
+                        <div class="text-medium">Option 3</div>
+                        <div class="text-color-dark">This option is a third option</div>
+                    </div>
+                </div>
+            </label>
+            <label class="radio padding-15 border margin-top--1 rounded-bottom-left rounded-bottom-right" tabindex="0">
+                <input type="radio" class="padding-15 border margin-top--1 rounded-bottom-left rounded-bottom-right" name="radioCardGroupStacked" value="option-4">
+                <div class="radio-text-wrapper display-flex">
+                    <span class="radio-text">
+                    </span>
+                    <div class="margin-left-5 margin-right-5">
+                        <div class="text-medium">Option 4</div>
+                        <div class="text-color-dark">This option is a forth option</div>
+                    </div>
+                </div>
+            </label>
+        </div>
+        <div class="display-flex gap-10 margin-top-10">
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Reset selection</button>
+            <button type="button" class="btn btn-default btn-component" tabindex="0">Unselect</button>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: RadioCardGroup
+
+### RadioCardGroup
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | string | — | Name used for all radios in this group. |
+| options | RadioCardOption[] | — | List of selectable options. |
+| value | string | — | Selected value (controlled usage). |
+| defaultValue | string | — | Initially selected value (uncontrolled usage). |
+| variant | 'inline' \| 'stacked' \| 'stacked-horizontal' | 'inline' | Card layout variant. Possible values are: 'inline', 'stacked' or 'stacked-horizontal'. |
+| gap | string | 'gap-15' | Gap utility class used for the inline layout. |
+| onChange | (value: string, event: ChangeEvent<HTMLInputElement>) => void | — | Callback invoked when selection changes. |
+| cardClassName | string | — | Additional classes applied to each card. |
+
+#### Props: RadioCardItem
+
+### RadioCardItem
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | string | — | Value passed to the underlying radio input. |
+| disabled | boolean | false | Disables this radio card. |
+
+## Compound API with mapped items
+
+### Example: This option is a first option
+
+Compound API with mapped itemsOption 1
+This option is a first option
+
+Option 2
+This option is a second option
+
+Option 3
+This option is a third option
+
+#### Summary
+
+Compound API with mapped itemsOption 1
+This option is a first option
+
+Option 2
+This option is a second option
+
+Option 3
+This option is a third option
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import RadioCardGroup, {
+    RadioCardIndicator,
+    RadioCardItem,
+    type RadioCardOption,
+} from '@rio-cloud/rio-uikit/RadioCardGroup';
+
+const options: RadioCardOption[] = [
+    {
+        value: 'option-1',
+        label: 'Option 1',
+        description: 'This option is a first option',
+    },
+    {
+        value: 'option-2',
+        label: 'Option 2',
+        description: 'This option is a second option',
+    },
+    {
+        value: 'option-3',
+        label: 'Option 3',
+        description: 'This option is a third option',
+    },
+];
+
+export default () => {
+    const [value, setValue] = useState('option-1');
+
+    return (
+        <div className='max-width-500'>
+            <label>Compound API with mapped items</label>
+            <RadioCardGroup
+                name='radioCardGroupCompound'
+                value={value}
+                onChange={nextValue => setValue(nextValue)}
+                className='display-grid grid-cols-2 gap-10'
+                cardClassName='text-size-14'
+            >
+                {options.map(option => (
+                    <RadioCardItem key={option.value} value={option.value}>
+                        <div className='flex-1-1 margin-x-5'>
+                            <div className='text-medium'>{option.label}</div>
+                            <div className='text-color-dark'>{option.description}</div>
+                        </div>
+                        <RadioCardIndicator />
+                    </RadioCardItem>
+                ))}
+            </RadioCardGroup>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-500">
+    <label>Compound API with mapped items</label>
+    <div class="display-flex gap-15 display-grid grid-cols-2 gap-10">
+        <label class="radio padding-15 border rounded border-color-highlight text-size-14" tabindex="0">
+            <input type="radio" class="padding-15 border rounded border-color-highlight text-size-14" name="radioCardGroupCompound" value="option-1" checked="">
+            <div class="radio-text-wrapper display-flex">
+                <div class="flex-1-1 margin-x-5">
+                    <div class="text-medium">Option 1</div>
+                    <div class="text-color-dark">This option is a first option</div>
+                </div>
+                <span class="radio-text">
+                </span>
+            </div>
+        </label>
+        <label class="radio padding-15 border rounded text-size-14" tabindex="0">
+            <input type="radio" class="padding-15 border rounded text-size-14" name="radioCardGroupCompound" value="option-2">
+            <div class="radio-text-wrapper display-flex">
+                <div class="flex-1-1 margin-x-5">
+                    <div class="text-medium">Option 2</div>
+                    <div class="text-color-dark">This option is a second option</div>
+                </div>
+                <span class="radio-text">
+                </span>
+            </div>
+        </label>
+        <label class="radio padding-15 border rounded text-size-14" tabindex="0">
+            <input type="radio" class="padding-15 border rounded text-size-14" name="radioCardGroupCompound" value="option-3">
+            <div class="radio-text-wrapper display-flex">
+                <div class="flex-1-1 margin-x-5">
+                    <div class="text-medium">Option 3</div>
+                    <div class="text-color-dark">This option is a third option</div>
+                </div>
+                <span class="radio-text">
+                </span>
+            </div>
+        </label>
+    </div>
+</div>
+```
+
+#### Props: RadioCardGroup
+
+### RadioCardGroup
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | string | — | Name used for all radios in this group. |
+| options | RadioCardOption[] | — | List of selectable options. |
+| value | string | — | Selected value (controlled usage). |
+| defaultValue | string | — | Initially selected value (uncontrolled usage). |
+| variant | 'inline' \| 'stacked' \| 'stacked-horizontal' | 'inline' | Card layout variant. Possible values are: 'inline', 'stacked' or 'stacked-horizontal'. |
+| gap | string | 'gap-15' | Gap utility class used for the inline layout. |
+| onChange | (value: string, event: ChangeEvent<HTMLInputElement>) => void | — | Callback invoked when selection changes. |
+| cardClassName | string | — | Additional classes applied to each card. |
+
+#### Props: RadioCardItem
+
+### RadioCardItem
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | string | — | Value passed to the underlying radio input. |
+| disabled | boolean | false | Disables this radio card. |

package/dist/docs/components/radiobutton.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Interaction
-*Source:* https://uikit.developers.rio.cloud/#components/radiobutton
-*Captured:* 2026-02-03T14:04:20.757Z
+*Source:* https://uikit.developers.rio.cloud/#/components/radiobutton
+*Captured:* 2026-02-23T15:48:19.148Z
 
 NoteWhen using the custom option, make sure to wrap the children with the class name radio-text-wrapper. For using the radio tick, use an element with class name radio-text.
 

package/dist/docs/components/releaseNotes.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Misc
-*Source:* https://uikit.developers.rio.cloud/#components/releaseNotes
-*Captured:* 2026-02-03T14:05:02.678Z
+*Source:* https://uikit.developers.rio.cloud/#/components/releaseNotes
+*Captured:* 2026-02-23T15:48:59.724Z
 
 Component to render release notes in a standardized manner.
 

package/dist/docs/components/resizer.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Misc
-*Source:* https://uikit.developers.rio.cloud/#components/resizer
-*Captured:* 2026-02-03T14:05:03.241Z
+*Source:* https://uikit.developers.rio.cloud/#/components/resizer
+*Captured:* 2026-02-23T15:49:00.593Z
 
 A helper component to allow elements to resize.
 

package/dist/docs/components/responsiveColumnStripe.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#components/responsiveColumnStripe
-*Captured:* 2026-02-03T14:04:48.518Z
+*Source:* https://uikit.developers.rio.cloud/#/components/responsiveColumnStripe
+*Captured:* 2026-02-23T15:48:46.065Z
 
 The ResponsiveColumnStripe component is designed to work with any list of items. The individual items are spread equally according to the available space. The component is totally customizable and does not style the individual items to give maximum flexibility.
 

package/dist/docs/components/responsiveVideo.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Misc
-*Source:* https://uikit.developers.rio.cloud/#components/responsiveVideo
-*Captured:* 2026-02-03T14:05:03.249Z
+*Source:* https://uikit.developers.rio.cloud/#/components/responsiveVideo
+*Captured:* 2026-02-23T15:49:01.107Z
 
 ## Responsive Video
 

package/dist/docs/components/rioglyph.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Misc
-*Source:* https://uikit.developers.rio.cloud/#components/rioglyph
-*Captured:* 2026-02-03T14:05:04.531Z
+*Source:* https://uikit.developers.rio.cloud/#/components/rioglyph
+*Captured:* 2026-02-23T15:49:01.328Z
 
 The Rioglyph component is a React wrapper for the Rioglyph icon set. It provides a convenient and type-safe way to render icons without directly dealing with the utility classnames.
 

package/dist/docs/components/rules.md

@@ -2,8 +2,8 @@
 
 *Category:* Components
 *Section:* Misc
-*Source:* https://uikit.developers.rio.cloud/#components/rules
-*Captured:* 2026-02-03T14:05:05.690Z
+*Source:* https://uikit.developers.rio.cloud/#/components/rules
+*Captured:* 2026-02-23T15:49:02.733Z
 
 ## RulesWrapper, RuleContainer and RuleConnector