@cube-dev/ui-kit 0.22.0 → 0.22.1

package/es/components/content/Skeleton/Skeleton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
@@ -12,37 +12,37 @@ import { Space } from '../../layout/Space';
 import { Grid } from '../../layout/Grid';
 const LAYOUT_MAP = {
     page({ lines, children, ...props }) {
-        return (_jsxs(Flow, { gap: "4x", ...props, children: [_jsxs(Space, { placeContent: "space-between", children: [_jsx(Placeholder, { width: "100px 25% 300px" }), _jsx(Placeholder, { width: "50px 10% 150px" })] }), _jsx(Flow, { gap: "2x", children: children ||
+        return (_jsxs(Flow, { gap: "4x", ...props, children: [_jsxs(Space, { placeContent: "space-between", children: [_jsx(Placeholder, { width: "100px 25% 300px" }, void 0), _jsx(Placeholder, { width: "50px 10% 150px" }, void 0)] }, void 0), _jsx(Flow, { gap: "2x", children: children ||
                         Array(lines || 5)
                             .fill(0)
-                            .map((item, i) => _jsx(Placeholder, {}, i)) })] }));
+                            .map((item, i) => _jsx(Placeholder, {}, i)) }, void 0)] }, void 0));
     },
     content({ children, lines, ...props }) {
         return (_jsx(Flow, { gap: "2x", ...props, children: children ||
                 Array(lines || 5)
                     .fill(0)
-                    .map((item, i) => _jsx(Placeholder, {}, i)) }));
+                    .map((item, i) => _jsx(Placeholder, {}, i)) }, void 0));
     },
     topbar(props) {
-        return (_jsxs(Space, { gap: "4x", placeContent: "space-between", height: "6x", padding: "1x", border: "bottom", ...props, children: [_jsxs(Space, { children: [_jsx(Placeholder, { circle: true, size: "4x" }), _jsx(Placeholder, { width: "20x" })] }), _jsxs(Space, { children: [_jsx(Placeholder, { width: "10x" }), _jsx(Placeholder, { circle: true, size: "4x" })] })] }));
+        return (_jsxs(Space, { gap: "4x", placeContent: "space-between", height: "6x", padding: "1x", border: "bottom", ...props, children: [_jsxs(Space, { children: [_jsx(Placeholder, { circle: true, size: "4x" }, void 0), _jsx(Placeholder, { width: "20x" }, void 0)] }, void 0), _jsxs(Space, { children: [_jsx(Placeholder, { width: "10x" }, void 0), _jsx(Placeholder, { circle: true, size: "4x" }, void 0)] }, void 0)] }, void 0));
     },
     menu({ lines, ...props }) {
         return (_jsx(Flow, { gap: "3.25x", ...props, padding: "3x 1x", children: Array(lines || 5)
                 .fill(0)
-                .map((item, i) => (_jsx(Placeholder, {}, i))) }));
+                .map((item, i) => (_jsx(Placeholder, {}, i))) }, void 0));
     },
     stats({ cards, ...props }) {
         return (_jsx(Space, { gap: "4x", ...props, children: Array(cards || 3)
                 .fill(0)
-                .map((item, i) => (_jsx(Placeholder, { radius: "1x", width: "20x", height: "12x", flexGrow: 1 }, i))) }));
+                .map((item, i) => (_jsx(Placeholder, { radius: "1x", width: "20x", height: "12x", flexGrow: 1 }, i))) }, void 0));
     },
     tabs({ tabs, children, lines, ...props }) {
         return (_jsxs(Flow, { gap: "4x", ...props, children: [_jsx(Space, { children: Array(tabs || 3)
                         .fill(0)
-                        .map((item, i) => (_jsx(Placeholder, { width: "15x" }, i))) }), _jsx(Flow, { gap: "2x", children: children ||
+                        .map((item, i) => (_jsx(Placeholder, { width: "15x" }, i))) }, void 0), _jsx(Flow, { gap: "2x", children: children ||
                         Array(lines || 5)
                             .fill(0)
-                            .map((item, i) => _jsx(Placeholder, {}, i)) })] }));
+                            .map((item, i) => _jsx(Placeholder, {}, i)) }, void 0)] }, void 0));
     },
     table({ rows, columns, ...props }) {
         columns = columns || 5;
@@ -55,7 +55,7 @@ const LAYOUT_MAP = {
                     .map((item, j) => {
                     return (_jsx(Placeholder, { size: !i ? '3x' : '2x' }, `${i}.${j}`));
                 });
-            }) }));
+            }) }, void 0));
     },
     chart({ columns, ...props }) {
         columns = columns || 12;
@@ -64,12 +64,12 @@ const LAYOUT_MAP = {
                 .fill(0)
                 .map((item, i) => {
                 return (_jsx(Placeholder, { height: `${heightMap[i % 12] * 10}%`, width: "max 6x" }, i));
-            }) }));
+            }) }, void 0));
     },
 };
 export function Skeleton({ layout, ...props }) {
     layout = layout || 'page';
-    return LAYOUT_MAP[layout] ? (LAYOUT_MAP[layout]({ ...props, qa: 'Skeleton' })) : (_jsx(Placeholder, { ...props }));
+    return LAYOUT_MAP[layout] ? (LAYOUT_MAP[layout]({ ...props, qa: 'Skeleton' })) : (_jsx(Placeholder, { ...props }, void 0));
 }
 
         

package/es/components/content/Tag/Tag.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
@@ -82,9 +82,9 @@ const CloseAction = tasty(Action, {
 function Tag(allProps, ref) {
     let { type, icon, isClosable, onClose, closeButtonStyles, children, ...props } = allProps;
     const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsxs(TagElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, "data-type": type, mods: { closable: isClosable }, children: [icon ? _jsx("div", { "data-element": "TagIcon", children: icon }) : null, _jsx("div", { "data-element": "Content", children: children }), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(CloseAction, { styles: closeButtonStyles, onPress: onClose, children: _jsx(CloseOutlined, { style: {
+    return (_jsxs(TagElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, "data-type": type, mods: { closable: isClosable }, children: [icon ? _jsx("div", { "data-element": "TagIcon", children: icon }, void 0) : null, _jsx("div", { "data-element": "Content", children: children }, void 0), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(CloseAction, { styles: closeButtonStyles, onPress: onClose, children: _jsx(CloseOutlined, { style: {
                             fontSize: 'var(--font-size, inherit)',
-                        } }) }) })) : undefined] }));
+                        } }, void 0) }, void 0) }, void 0)) : undefined] }, void 0));
 }
 const _Tag = forwardRef(Tag);
 export { _Tag as Tag };

package/es/components/content/Text.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
@@ -49,26 +49,26 @@ const _Text = forwardRef(function Text(allProps, ref) {
     return (_jsx(TextElement, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
             nowrap,
             ellipsis,
-        }, block: !!(block || ellipsis), ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }));
+        }, block: !!(block || ellipsis), ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 const Text = Object.assign(_Text, {
     Minor: forwardRef(function MinorText(props, ref) {
-        return _jsx(_Text, { ref: ref, color: "#minor", ...props });
+        return _jsx(_Text, { ref: ref, color: "#minor", ...props }, void 0);
     }),
     Danger: forwardRef(function DangerText(props, ref) {
-        return _jsx(_Text, { ref: ref, role: "alert", color: "#danger-text", ...props });
+        return _jsx(_Text, { ref: ref, role: "alert", color: "#danger-text", ...props }, void 0);
     }),
     Success: forwardRef(function SuccessText(props, ref) {
-        return _jsx(_Text, { ref: ref, color: "#success-text", ...props });
+        return _jsx(_Text, { ref: ref, color: "#success-text", ...props }, void 0);
     }),
     Strong: forwardRef(function StrongText(props, ref) {
-        return (_jsx(_Text, { ref: ref, as: "strong", preset: "strong", color: "#dark", ...props }));
+        return (_jsx(_Text, { ref: ref, as: "strong", preset: "strong", color: "#dark", ...props }, void 0));
     }),
     Emphasis: forwardRef(function EmphasisText(props, ref) {
-        return _jsx(_Text, { ref: ref, as: "em", preset: "em", ...props });
+        return _jsx(_Text, { ref: ref, as: "em", preset: "em", ...props }, void 0);
     }),
     Selection: forwardRef(function SelectionText(props, ref) {
-        return _jsx(_Text, { ref: ref, color: "#dark", fill: "#note.30", ...props });
+        return _jsx(_Text, { ref: ref, color: "#dark", fill: "#note.30", ...props }, void 0);
     }),
 });
 export { Text };

package/es/components/content/Title.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
@@ -53,14 +53,14 @@ const _Title = forwardRef(function Title({ qa, as, styleName, inline, nowrap, el
     return (_jsx(TitleElement, { qa: qa || 'Title', as: as || tag, styleName: styleName, "data-level": level || 1, mods: {
             nowrap,
             ellipsis,
-        }, inline: inline, ...filterBaseProps(propsWithSlots, { eventProps: true }), ref: ref, styles: styles }));
+        }, inline: inline, ...filterBaseProps(propsWithSlots, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 const Title = Object.assign(_Title, {
     Danger: forwardRef(function DangerTitle(props, ref) {
-        return _jsx(Title, { ref: ref, color: "#danger-text", ...props });
+        return _jsx(Title, { ref: ref, color: "#danger-text", ...props }, void 0);
     }),
     Success: forwardRef(function SuccessTitle(props, ref) {
-        return _jsx(Title, { ref: ref, color: "#success-text", ...props });
+        return _jsx(Title, { ref: ref, color: "#success-text", ...props }, void 0);
     }),
 });
 export { Title };

package/es/components/forms/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
@@ -24,10 +24,10 @@ import { Text } from '../../content/Text';
 import { CheckboxGroup } from './CheckboxGroup';
 import { CheckboxGroupContext } from './context';
 function CheckOutlined() {
-    return (_jsx("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.417 7.604l-.017.018-3.4-3.4 1.433-1.433 1.985 1.985L8.192 0l1.432 1.433-6.189 6.189-.018-.018z", fill: "currentColor" }) }));
+    return (_jsx("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.417 7.604l-.017.018-3.4-3.4 1.433-1.433 1.985 1.985L8.192 0l1.432 1.433-6.189 6.189-.018-.018z", fill: "currentColor" }, void 0) }, void 0));
 }
 function IndeterminateOutline() {
-    return (_jsx("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }) }));
+    return (_jsx("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }, void 0) }, void 0));
 }
 const CheckboxWrapperElement = tasty({
     as: 'label',
@@ -121,7 +121,7 @@ function Checkbox(props, ref) {
                 ? { 'aria-label': label }
                 : {}),
         }, toggleState, inputRef);
-    let markIcon = isIndeterminate ? _jsx(IndeterminateOutline, {}) : _jsx(CheckOutlined, {});
+    let markIcon = isIndeterminate ? _jsx(IndeterminateOutline, {}, void 0) : _jsx(CheckOutlined, {}, void 0);
     if (groupState) {
         for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {
             if (originalProps[key] != null) {
@@ -143,7 +143,7 @@ function Checkbox(props, ref) {
         'side-label': labelPosition === 'side',
         'inside-form': insideForm,
     };
-    const checkboxField = (_jsxs(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Checkbox', ...mergeProps(inputProps, focusProps), ref: inputRef }), _jsx(CheckboxElement, { qa: "Checkbox", mods: mods, styles: inputStyles, children: markIcon }), children && _jsx(Text, { children: children })] }));
+    const checkboxField = (_jsxs(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Checkbox', ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(CheckboxElement, { qa: "Checkbox", mods: mods, styles: inputStyles, children: markIcon }, void 0), children && _jsx(Text, { children: children }, void 0)] }, void 0));
     if (insideForm && !groupState) {
         return (_jsx(FieldWrapper, { ...{
                 as: 'label',
@@ -167,13 +167,13 @@ function Checkbox(props, ref) {
                 labelSuffix,
                 Component: checkboxField,
                 ref: domRef,
-            } }));
+            } }, void 0));
     }
     return (_jsxs(CheckboxWrapperElement, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [checkboxField, label ? (_jsx(Element, { styles: labelStyles, mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
-                }, ...filterBaseProps(labelProps), children: label })) : null] }));
+                }, ...filterBaseProps(labelProps), children: label }, void 0)) : null] }, void 0));
 }
 /**
  * Checkboxes allow users to select multiple items from a list of individual items,

package/es/components/forms/Checkbox/CheckboxGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
@@ -54,8 +54,8 @@ function CheckboxGroup(props, ref) {
         }, children: _jsx(FormContext.Provider, { value: {
                 isDisabled,
                 validationState,
-            }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }) }) }));
-    return (_jsx(FieldWrapper, { ...fieldWrapperProps, ref: domRef, Component: radioGroup, fieldProps: groupProps, labelProps: labelProps, styles: styles }));
+            }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
+    return (_jsx(FieldWrapper, { ...fieldWrapperProps, ref: domRef, Component: radioGroup, fieldProps: groupProps, labelProps: labelProps, styles: styles }, void 0));
 }
 /**
  * Checkbox groups allow users to select a single option from a list of mutually exclusive options.

package/es/components/forms/Checkbox/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 

package/es/components/forms/FieldWrapper/FieldWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
@@ -72,18 +72,18 @@ const MessageElement = tasty({
  */
 export const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
     const { as, labelPosition = 'top', label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, } = props;
-    const labelComponent = label ? (_jsx(Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": label, ...labelProps, children: _jsxs(Flex, { placeContent: "baseline space-between", width: "100%", children: [_jsxs(Space, { placeItems: "center", gap: "0.25x", children: [_jsx("div", { children: label }), tooltip ? (_jsx(TooltipProvider, { activeWrap: true, title: tooltip, width: "initial max-content 40x", children: _jsx(InfoCircleOutlined, { style: {
+    const labelComponent = label ? (_jsx(Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": label, ...labelProps, children: _jsxs(Flex, { placeContent: "baseline space-between", width: "100%", children: [_jsxs(Space, { placeItems: "center", gap: "0.25x", children: [_jsx("div", { children: label }, void 0), tooltip ? (_jsx(TooltipProvider, { activeWrap: true, title: tooltip, width: "initial max-content 40x", children: _jsx(InfoCircleOutlined, { style: {
                                     color: 'var(--primary-color)',
                                     margin: '0 4px',
-                                } }) })) : null, _jsx("div", { children: labelSuffix })] }), extra && _jsx(Text, { preset: "t3", children: extra })] }) })) : null;
-    let descriptionComponent = description ? (_jsx("div", { "data-element": "Description", children: wrapNodeIfPlain(description, () => (_jsx(Paragraph, { children: description }))) })) : null;
+                                } }, void 0) }, void 0)) : null, _jsx("div", { children: labelSuffix }, void 0)] }, void 0), extra && _jsx(Text, { preset: "t3", children: extra }, void 0)] }, void 0) }, void 0)) : null;
+    let descriptionComponent = description ? (_jsx("div", { "data-element": "Description", children: wrapNodeIfPlain(description, () => (_jsx(Paragraph, { children: description }, void 0))) }, void 0)) : null;
     const mods = {
         'has-sider': labelPosition === 'side',
         'has-description': !!description,
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return (_jsxs(FieldElement, { ref: ref, as: as ?? 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] })) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }))] })] }));
+    return (_jsxs(FieldElement, { ref: ref, as: as ?? 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
 });
 
         

package/es/components/forms/FieldWrapper/extract-field-wrapper-props.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 

package/es/components/forms/FieldWrapper/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 

package/es/components/forms/FieldWrapper/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 

package/es/components/forms/FileInput/FileInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
@@ -132,7 +132,7 @@ function FileInput(props, ref) {
                     setDragHover(false);
                 }, onDrop: () => {
                     setDragHover(false);
-                }, ...inputProps }), _jsx("div", { "data-element": "Button", children: "Choose file" }), _jsx("div", { "data-element": !!fileName ? 'Value' : 'Placeholder', children: fileName || placeholder || 'No file selected' })] }));
+                }, ...inputProps }, void 0), _jsx("div", { "data-element": "Button", children: "Choose file" }, void 0), _jsx("div", { "data-element": !!fileName ? 'Value' : 'Placeholder', children: fileName || placeholder || 'No file selected' }, void 0)] }, void 0));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -153,7 +153,7 @@ function FileInput(props, ref) {
             labelSuffix,
             Component: fileInput,
             ref: domRef,
-        } }));
+        } }, void 0));
 }
 /**
  * FileInputs are file inputs that allow users to select local files to

package/es/components/forms/Form/Field.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
@@ -72,7 +72,7 @@ function getValueProps(type, value, onChange, allowsCustomValue) {
 }
 export function Field(props) {
     const allProps = useFormProps(props);
-    let { children, form, label, extra, validationState, necessityLabel, necessityIndicator, message, description, tooltip, isHidden, isDisabled, isLoading, styles, labelPosition = 'top', labelStyles, labelSuffix, } = allProps;
+    let { children, form, label, extra, necessityLabel, necessityIndicator, description, tooltip, isHidden, isDisabled, isLoading, styles, labelPosition = 'top', labelStyles, labelSuffix, } = allProps;
     if (typeof children === 'function') {
         children = children(form);
     }
@@ -81,11 +81,11 @@ export function Field(props) {
     const __props = useField(allProps, {
         defaultValidationTrigger: getDefaultValidateTrigger(inputType),
     });
-    const { field, isRequired, name, id } = __props;
+    const { validationState, message, isRequired, name, id } = __props;
     if (!child)
         return null;
     if (__props.nonInput) {
-        return (_jsx(LegacyFieldProvider, { children: _jsx(FieldWrapper, { isHidden: isHidden, isDisabled: isDisabled, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child, styles: styles, labelPosition: labelPosition, labelStyles: labelStyles, labelSuffix: labelSuffix }) }));
+        return (_jsx(LegacyFieldProvider, { children: _jsx(FieldWrapper, { isHidden: isHidden, isDisabled: isDisabled, validationState: __props.validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child, styles: styles, labelPosition: labelPosition, labelStyles: labelStyles, labelSuffix: labelSuffix }, void 0) }, void 0));
     }
     if (!form) {
         warn('Form Field requires declared form instance if field name is specified');
@@ -97,7 +97,7 @@ export function Field(props) {
                 label: name,
                 name,
                 id,
-            })) }));
+            })) }, void 0));
     }
     const newProps = {
         id,
@@ -137,25 +137,17 @@ export function Field(props) {
     if (isLoading != null) {
         newProps.isLoading = isLoading;
     }
-    if (field?.errors?.length) {
-        if (!validationState) {
-            newProps.validationState = 'invalid';
-        }
-        if (!message) {
-            newProps.message = field.errors[0];
-        }
-    }
     Object.assign(newProps, getValueProps(inputType, __props.field?.inputValue, __props.onChange, child.props.allowsCustomValue));
     const { onChange, onSelectionChange, ...childProps } = child.props;
     // onChange event passed to the child should be executed after Form onChange logic
-    return (_jsx(LegacyFieldProvider, { children: cloneElement(child, mergeProps(childProps, newProps, onChange ? { onChange: __props.onChange } : {}, onSelectionChange ? { onSelectionChange: __props.onChange } : {})) }));
+    return (_jsx(LegacyFieldProvider, { children: cloneElement(child, mergeProps(childProps, newProps, onChange ? { onChange: __props.onChange } : {}, onSelectionChange ? { onSelectionChange: __props.onChange } : {})) }, void 0));
 }
 const LegacyFieldContext = createContext({
     insideLegacyField: false,
 });
 function LegacyFieldProvider(props) {
     const value = useMemo(() => ({ insideLegacyField: true }), []);
-    return (_jsx(LegacyFieldContext.Provider, { value: value, children: props.children }));
+    return (_jsx(LegacyFieldContext.Provider, { value: value, children: props.children }, void 0));
 }
 export function useInsideLegacyField() {
     const { insideLegacyField } = useContext(LegacyFieldContext);

package/es/components/forms/Form/Form.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
@@ -12,7 +12,7 @@ import { Provider, useProviderProps } from '../../../provider';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
 import { useCombinedRefs } from '../../../utils/react';
 import { timeout } from '../../../utils/promise';
-import { useForm } from './useForm';
+import { useForm } from './use-form';
 export const FormContext = createContext({});
 const FormElement = tasty({
     as: 'form',
@@ -47,7 +47,7 @@ const formPropNames = new Set([
 ]);
 function Form(props, ref) {
     props = useProviderProps(props);
-    let { qa, name, children, labelPosition, orientation, isRequired, necessityIndicator, isDisabled, isReadOnly, validationState, labelStyles, validateTrigger, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
+    let { qa, name, children, labelPosition, orientation, isRequired, necessityIndicator, isDisabled, isReadOnly, validationState, labelStyles, validateTrigger, showValid, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
     const firstRunRef = useRef(true);
     const isHorizontal = orientation === 'horizontal';
     if (!orientation) {
@@ -122,6 +122,7 @@ function Form(props, ref) {
         necessityIndicator,
         validateTrigger,
         requiredMark,
+        showValid,
         form,
         submitError: form.submitError,
         idPrefix: name,
@@ -138,7 +139,7 @@ function Form(props, ref) {
             form?.setInitialFieldsValue(defaultValues);
         }
     }, [defaultValues]);
-    return (_jsx(FormElement, { ...filterBaseProps(otherProps, { propNames: formPropNames }), ref: domRef, noValidate: true, styles: styles, mods: { 'has-sider': labelPosition === 'side', horizontal: isHorizontal }, onSubmit: onSubmitCallback, children: _jsx(FormContext.Provider, { value: ctx, children: _jsx(Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }) }) }));
+    return (_jsx(FormElement, { ...filterBaseProps(otherProps, { propNames: formPropNames }), ref: domRef, noValidate: true, styles: styles, mods: { 'has-sider': labelPosition === 'side', horizontal: isHorizontal }, onSubmit: onSubmitCallback, children: _jsx(FormContext.Provider, { value: ctx, children: _jsx(Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }, void 0) }, void 0) }, void 0));
 }
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.

package/es/components/forms/Form/Submit/Submit.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ export const Submit = forwardRef(function Submit(props, ref) {
     const { form, ...otherProps } = props;
     const formData = form?.getFieldsValue() ?? {};
     const isInvalid = Object.keys(formData).some((name) => form?.isFieldInvalid(name) ?? false);
-    return (_jsx(Button, { ref: ref, type: "primary", htmlType: "submit", isLoading: form?.isSubmitting, isDisabled: isInvalid, ...otherProps }));
+    return (_jsx(Button, { ref: ref, type: "primary", htmlType: "submit", isLoading: form?.isSubmitting, isDisabled: isInvalid, ...otherProps }, void 0));
 });
 
         

package/es/components/forms/Form/Submit/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/SubmitError.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
@@ -21,7 +21,7 @@ export const SubmitError = function SubmitError(props) {
         typeof submitError !== 'string') {
         submitError = 'Internal error';
     }
-    return (_jsx(Alert, { theme: "danger", ...props, children: submitError }));
+    return (_jsx(Alert, { theme: "danger", ...props, children: submitError }, void 0));
 };
 
         

package/es/components/forms/Form/index.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
 import { Field } from './Field';
 import { SubmitError } from './SubmitError';
-import { useForm } from './useForm';
+import { useForm } from './use-form';
 import { useFormProps, FormContext, Form as _Form } from './Form';
 const Form = Object.assign(_Form, { Item: Field, useForm, SubmitError });
 export { useFormProps, Form, Field, useForm, FormContext, SubmitError };

package/es/components/forms/Form/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/use-field/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/use-field/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/use-field/use-field-props.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/use-field/use-field.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.1
  * Released under the MIT license.
  */
 
@@ -32,7 +32,7 @@ function removeId(name, id) {
 }
 export function useField(props, params) {
     props = useFormProps(props);
-    let { defaultValue, id, idPrefix, name, form, rules, validateTrigger = params.defaultValidationTrigger, validationState, validationDelay, shouldUpdate, } = props;
+    let { defaultValue, id, idPrefix, name, form, rules, message, validateTrigger = params.defaultValidationTrigger, validationState, validationDelay, showValid, shouldUpdate, } = props;
     if (rules && rules.length && validationDelay) {
         rules.unshift(delayValidationRule(validationDelay));
     }
@@ -124,15 +124,21 @@ export function useField(props, params) {
         form,
         field,
         nonInput,
-        validationState: validationState ?? (field?.errors?.length ? 'invalid' : undefined),
+        validationState: validationState ??
+            (field?.errors?.length
+                ? 'invalid'
+                : showValid && field?.status === 'valid'
+                    ? 'valid'
+                    : undefined),
         ...(isRequired && { isRequired }),
-        ...(field?.errors?.length && { message: field.errors[0] }),
+        message: message ?? (field?.status === 'invalid' && field?.errors?.[0]),
         onBlur: onBlurHandler,
         onChange: onChangeHandler,
     }), [
         form,
         field,
         field?.errors?.length,
+        field?.status,
         field?.inputValue,
         fieldId,
         fieldName,
@@ -141,6 +147,7 @@ export function useField(props, params) {
         onChangeHandler,
         validateTrigger,
         validationState,
+        showValid,
         nonInput,
     ]);
 }