@rio-cloud/uikit-mcp 1.1.3 → 1.1.4

package/dist/docs/components/rules.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#components/rules
-*Captured:* 2026-01-07T12:11:59.018Z
+*Captured:* 2026-01-14T09:07:50.442Z
 
 ## RulesWrapper, RuleContainer and RuleConnector
 
@@ -130,18 +130,17 @@ export default () => {
                 </RuleContainer>
                 {firstConditionsSelected.map((selectedCondition, index) => {
                     const isLastCondition = index === size(firstConditionsSelected) - 1;
+                    const condition = availableFirstConditions.find(condition => condition.id === selectedCondition);
+                    if (!condition) {
+                        return null;
+                    }
                     return (
                         <RuleContainer
                             key={selectedCondition}
                             show={!isEmpty(firstConditionsSelected)}
                             hideConnector={isLastCondition && allConditionsSelected}
                         >
-                            <ConditionEditor
-                                condition={
-                                    availableFirstConditions.find(condition => condition.id === selectedCondition)!
-                                }
-                                onDelete={handleRemoveFirstCondition}
-                            />
+                            <ConditionEditor condition={condition} onDelete={handleRemoveFirstCondition} />
                         </RuleContainer>
                     );
                 })}
@@ -224,6 +223,7 @@ const ConditionsList = ({
                                     clickable={condition.enabled}
                                     disabled={!condition.enabled}
                                     onClick={() => handleSelectOption(condition.id)}
+                                    round={false}
                                 >
                                     {condition.id}
                                 </Tag>
@@ -261,10 +261,10 @@ const ConditionsTwo = ({ onRuleSelect }: ConditionsTwoProps) => {
         <div className='display-flex flex-column align-items-center gap-15'>
             <div className='text-center'>When should the rule be triggered?</div>
             <TagList>
-                <Tag active clickable={false}>
+                <Tag active clickable={false} round={false}>
                     Immediately
                 </Tag>
-                <Tag clickable onClick={onRuleSelect}>
+                <Tag clickable onClick={onRuleSelect} round={false}>
                     When all conditions apply for at least
                 </Tag>
             </TagList>
@@ -310,13 +310,13 @@ const ConditionEditorTwo = ({ onDelete }: ConditionEditorTwpProps) => {
                             <div class="display-flex flex-column align-items-center gap-15">
                                 <div class="text-center">Why should the rule be triggered?</div>
                                 <div class="taglist taglist-autowidth">
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Mileage</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Speed</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Engine Speed</div>
                                     </div>
                                 </div>
@@ -351,10 +351,10 @@ const ConditionEditorTwo = ({ onDelete }: ConditionEditorTwpProps) => {
                         <div class="display-flex flex-column align-items-center gap-15">
                             <div class="text-center">When should the rule be triggered?</div>
                             <div class="taglist taglist-autowidth">
-                                <div class="tag active clickable rioglyph rioglyph-ok">
+                                <div class="tag active clickable rioglyph rioglyph-ok rounded">
                                     <div class="tag-inner">Immediately</div>
                                 </div>
-                                <div class="tag clickable">
+                                <div class="tag clickable rounded">
                                     <div class="tag-inner">When all conditions apply for at least</div>
                                 </div>
                             </div>
@@ -383,36 +383,6 @@ const ConditionEditorTwo = ({ onDelete }: ConditionEditorTwpProps) => {
 </div>
 ```
 
-#### Props: RuleContainer
-
-### RuleContainer
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| show | Boolean | true | Defines whether the container is shown. |
-| unchecked | Boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |
-| background | String | bg-lightest | The box background class name. |
-| borderColor | String | — | The border color class name. |
-| hideConnector | Boolean | false | Defines whether the connector is shown. |
-| customConnector | String \| Node | — | Overwrites the default connector. |
-| className | String | — | Additional classes for the wrapper element. |
-
-#### Props: RuleConnector
-
-### RuleConnector
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| placement | String | center | The placement for the connector. Possible values are "start", "center" and "end". |
-| icon | String | rioglyph-plus | The rioglyph icon name. |
-| hidden | Boolean | false | Defines whether the connector is shown. |
-| background | String | bg-lightest | Background color of the connector itself. |
-| pageBackground | String | bg-white | Background color of the surrounding area where the rule containers are placed. |
-| contentClassName | String | text-color-light | Classes to be set on the connector content. |
-| hasBorder | Boolean | false | Defines whether the connector has a border. |
-| borderColor | String | — | The border color class name. |
-| className | String | — | Additional classes for the wrapper element. |
-
 ### Example: Example 2
 
 Default Example with morde conditions - (static)Mileage is greater than
@@ -534,28 +504,52 @@ export default () => (
                     <div className='flex-1-1-0'>
                         <legend>Category A</legend>
                         <TagList>
-                            <Tag clickable>Mileage</Tag>
-                            <Tag clickable>Fuel Level</Tag>
-                            <Tag clickable>Engine speed</Tag>
-                            <Tag clickable>Driving/standing</Tag>
+                            <Tag round={false} clickable>
+                                Mileage
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Fuel Level
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Engine speed
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Driving/standing
+                            </Tag>
                         </TagList>
                     </div>
                     <div className='flex-1-1-0'>
                         <legend>Category B</legend>
                         <TagList>
-                            <Tag clickable>Remaining daily driving time</Tag>
-                            <Tag clickable>Remaining weekly driving time</Tag>
-                            <Tag clickable>Daily driving time</Tag>
-                            <Tag clickable>Weekly driving time</Tag>
+                            <Tag round={false} clickable>
+                                Remaining daily driving time
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Remaining weekly driving time
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Daily driving time
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Weekly driving time
+                            </Tag>
                         </TagList>
                     </div>
                     <div className='flex-1-1-0'>
                         <legend>Category C</legend>
                         <TagList>
-                            <Tag clickable>Driver Card</Tag>
-                            <Tag clickable>Power take-off</Tag>
-                            <Tag clickable>Inside/Outside geofence</Tag>
-                            <Tag clickable>Inside/Outside Country</Tag>
+                            <Tag round={false} clickable>
+                                Driver Card
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Power take-off
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Inside/Outside geofence
+                            </Tag>
+                            <Tag round={false} clickable>
+                                Inside/Outside Country
+                            </Tag>
                         </TagList>
                     </div>
                 </div>
@@ -566,10 +560,12 @@ export default () => (
                     <span>When should the rule be triggered?</span>
 
                     <TagList>
-                        <Tag active clickable={false}>
+                        <Tag round={false} active clickable={false}>
                             Immediately
                         </Tag>
-                        <Tag clickable>When all conditions apply for at least</Tag>
+                        <Tag round={false} clickable>
+                            When all conditions apply for at least
+                        </Tag>
                     </TagList>
                 </div>
             </RuleContainer>
@@ -661,16 +657,16 @@ export default () => (
                             <div class="flex-1-1-0">
                                 <legend>Category A</legend>
                                 <div class="taglist taglist-autowidth">
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Mileage</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Fuel Level</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Engine speed</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Driving/standing</div>
                                     </div>
                                 </div>
@@ -678,16 +674,16 @@ export default () => (
                             <div class="flex-1-1-0">
                                 <legend>Category B</legend>
                                 <div class="taglist taglist-autowidth">
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Remaining daily driving time</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Remaining weekly driving time</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Daily driving time</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Weekly driving time</div>
                                     </div>
                                 </div>
@@ -695,16 +691,16 @@ export default () => (
                             <div class="flex-1-1-0">
                                 <legend>Category C</legend>
                                 <div class="taglist taglist-autowidth">
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Driver Card</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Power take-off</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Inside/Outside geofence</div>
                                     </div>
-                                    <div class="tag clickable">
+                                    <div class="tag clickable rounded">
                                         <div class="tag-inner">Inside/Outside Country</div>
                                     </div>
                                 </div>
@@ -735,10 +731,10 @@ export default () => (
                         <div class="display-flex flex-column align-items-center gap-15">
                             <span>When should the rule be triggered?</span>
                             <div class="taglist taglist-autowidth">
-                                <div class="tag active clickable rioglyph rioglyph-ok">
+                                <div class="tag active clickable rioglyph rioglyph-ok rounded">
                                     <div class="tag-inner">Immediately</div>
                                 </div>
-                                <div class="tag clickable">
+                                <div class="tag clickable rounded">
                                     <div class="tag-inner">When all conditions apply for at least</div>
                                 </div>
                             </div>
@@ -767,36 +763,6 @@ export default () => (
 </div>
 ```
 
-#### Props: RuleContainer
-
-### RuleContainer
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| show | Boolean | true | Defines whether the container is shown. |
-| unchecked | Boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |
-| background | String | bg-lightest | The box background class name. |
-| borderColor | String | — | The border color class name. |
-| hideConnector | Boolean | false | Defines whether the connector is shown. |
-| customConnector | String \| Node | — | Overwrites the default connector. |
-| className | String | — | Additional classes for the wrapper element. |
-
-#### Props: RuleConnector
-
-### RuleConnector
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| placement | String | center | The placement for the connector. Possible values are "start", "center" and "end". |
-| icon | String | rioglyph-plus | The rioglyph icon name. |
-| hidden | Boolean | false | Defines whether the connector is shown. |
-| background | String | bg-lightest | Background color of the connector itself. |
-| pageBackground | String | bg-white | Background color of the surrounding area where the rule containers are placed. |
-| contentClassName | String | text-color-light | Classes to be set on the connector content. |
-| hasBorder | Boolean | false | Defines whether the connector has a border. |
-| borderColor | String | — | The border color class name. |
-| className | String | — | Additional classes for the wrapper element. |
-
 ### Example: AND
 
 Custom Example
@@ -932,34 +898,4 @@ const CustomConnector = ({ value }: { value: string }) => (
         </div>
     </div>
 </div>
-```
-
-#### Props: RuleContainer
-
-### RuleContainer
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| show | Boolean | true | Defines whether the container is shown. |
-| unchecked | Boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |
-| background | String | bg-lightest | The box background class name. |
-| borderColor | String | — | The border color class name. |
-| hideConnector | Boolean | false | Defines whether the connector is shown. |
-| customConnector | String \| Node | — | Overwrites the default connector. |
-| className | String | — | Additional classes for the wrapper element. |
-
-#### Props: RuleConnector
-
-### RuleConnector
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| placement | String | center | The placement for the connector. Possible values are "start", "center" and "end". |
-| icon | String | rioglyph-plus | The rioglyph icon name. |
-| hidden | Boolean | false | Defines whether the connector is shown. |
-| background | String | bg-lightest | Background color of the connector itself. |
-| pageBackground | String | bg-white | Background color of the surrounding area where the rule containers are placed. |
-| contentClassName | String | text-color-light | Classes to be set on the connector content. |
-| hasBorder | Boolean | false | Defines whether the connector has a border. |
-| borderColor | String | — | The border color class name. |
-| className | String | — | Additional classes for the wrapper element. |
+```