@cube-dev/ui-kit 0.12.1 → 0.12.4

package/es/components/content/Text.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -49,23 +49,23 @@ 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 }), styles: styles, ref: ref }, void 0));
+        }, 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 }, void 0);
     }),
     Danger: forwardRef(function DangerText(props, ref) {
-        return _jsx(_Text, { role: "alert", ref: ref, color: "#danger-text", ...props }, void 0);
+        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 }, void 0);
     }),
     Strong: forwardRef(function StrongText(props, ref) {
-        return (_jsx(_Text, { as: "strong", preset: "strong", ref: ref, color: "#dark", ...props }, void 0));
+        return (_jsx(_Text, { ref: ref, as: "strong", preset: "strong", color: "#dark", ...props }, void 0));
     }),
     Emphasis: forwardRef(function EmphasisText(props, ref) {
-        return _jsx(_Text, { as: "em", preset: "em", ref: ref, ...props }, void 0);
+        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 }, void 0);

package/es/components/content/Title.js

@@ -1,15 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { TEXT_PROP_MAP } from './Text';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
+import { TEXT_PROP_MAP } from './Text';
 const STYLE_LIST = [...TEXT_STYLES, ...CONTAINER_STYLES];
 const TitleElement = tasty({
     qa: 'Title',
@@ -37,14 +37,14 @@ const TitleElement = tasty({
         width: 'max 100%',
     },
 });
-const _Title = forwardRef(({ qa, as, styleName, inline, nowrap, ellipsis, level, ...props }, ref) => {
+const _Title = forwardRef(function Title({ qa, as, styleName, inline, nowrap, ellipsis, level, ...props }, ref) {
     const propsWithSlots = useSlotProps(props, 'heading');
     const tag = `h${level || 1}`;
     const styles = extractStyles(propsWithSlots, STYLE_LIST, {}, TEXT_PROP_MAP);
     return (_jsx(TitleElement, { qa: qa || 'Title', as: as || tag, styleName: styleName, "data-level": level || 1, mods: {
             nowrap,
             ellipsis,
-        }, inline: inline, ...filterBaseProps(propsWithSlots, { eventProps: true }), styles: styles, ref: ref }, void 0));
+        }, inline: inline, ...filterBaseProps(propsWithSlots, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 const Title = Object.assign(_Title, {
     Danger: forwardRef(function DangerTitle(props, ref) {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -19,11 +19,15 @@ import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
 import { useFormProps } from '../Form';
 import { FieldWrapper } from '../FieldWrapper';
+import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
 import { CheckboxGroup } from './CheckboxGroup';
 import { CheckboxGroupContext } from './context';
-import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
-const CheckOutlined = () => (_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));
-const IndeterminateOutline = () => (_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));
+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" }, 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" }, void 0) }, void 0));
+}
 const CheckboxWrapperElement = tasty({
     as: 'label',
     qa: 'CheckboxWrapper',
@@ -77,7 +81,7 @@ function Checkbox(props, ref) {
     let originalProps = props;
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, autoFocus, children, label, extra, validationState, labelProps, labelStyles, labelPosition, necessityLabel, necessityIndicator, message, description, requiredMark = true, tooltip, isHidden, ...otherProps } = props;
+    let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, autoFocus, children, label, extra, validationState, labelProps, labelStyles, labelPosition, necessityLabel, necessityIndicator, message, description, requiredMark = true, tooltip, isHidden, labelSuffix, ...otherProps } = props;
     label = label || children;
     // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.
     // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
@@ -150,6 +154,7 @@ function Checkbox(props, ref) {
                 description,
                 requiredMark,
                 tooltip,
+                labelSuffix,
                 Component: checkboxField,
                 ref: domRef,
             } }, void 0));

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

@@ -1,21 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useDOMRef } from '@react-spectrum/utils';
-import { useProviderProps } from '../../../provider';
 import { useCheckboxGroup } from '@react-aria/checkbox';
 import { useCheckboxGroupState } from '@react-stately/checkbox';
+import { useProviderProps } from '../../../provider';
 import { FormContext, useFormProps } from '../Form/Form';
-import { CheckboxGroupContext } from './context';
 import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableArrayValue, } from '../../../utils/react/nullableValue';
+import { CheckboxGroupContext } from './context';
 const WRAPPER_STYLES = {
     display: 'grid',
     gridColumns: {
@@ -49,7 +49,7 @@ function CheckboxGroup(props, ref) {
     props = castNullableArrayValue(props);
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, ...otherProps } = props;
+    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, labelSuffix, ...otherProps } = props;
     let domRef = useDOMRef(ref);
     let styles = extractStyles(otherProps, OUTER_STYLES, WRAPPER_STYLES);
     let groupStyles = extractStyles(otherProps, BLOCK_STYLES);
@@ -78,6 +78,7 @@ function CheckboxGroup(props, ref) {
             description,
             requiredMark,
             tooltip,
+            labelSuffix,
             Component: radioGroup,
             ref: domRef,
         } }, void 0));

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

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

package/es/components/forms/FieldWrapper.js

@@ -1,21 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Text } from '../content/Text';
-import { Label } from './Label';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { Paragraph } from '../content/Paragraph';
 import { tasty } from '../../tasty';
 import { TooltipProvider } from '../overlays/Tooltip/TooltipProvider';
-import { InfoCircleOutlined } from '@ant-design/icons';
+import { Text } from '../content/Text';
 import { wrapNodeIfPlain } from '../../utils/react';
 import { Space } from '../layout/Space';
 import { Flex } from '../layout/Flex';
+import { Label } from './Label';
 const FieldElement = tasty({
     qa: 'Field',
     styles: {
@@ -67,7 +67,7 @@ const MessageElement = tasty({
 });
 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: [tooltip || labelSuffix || extra ? (_jsxs(Space, { placeItems: "baseline", gap: "0.5x", children: [label ? (tooltip || labelSuffix || extra ? (_jsx("div", { children: label }, void 0)) : (label)) : null, tooltip ? (_jsx(TooltipProvider, { title: tooltip, activeWrap: true, width: "initial max-content 40x", children: _jsx(InfoCircleOutlined, { style: { color: 'var(--primary-color)' } }, void 0) }, void 0)) : null, labelSuffix && _jsx("div", { children: labelSuffix }, void 0)] }, void 0)) : (_jsx("div", { children: label }, void 0)), extra && _jsx(Text, { preset: "t3", children: extra }, void 0)] }, void 0) }, void 0)) : null;
+    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' } }, 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',
@@ -75,7 +75,7 @@ function FieldWrapper(props, ref) {
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return (_jsxs(FieldElement, { as: as || 'div', ref: ref, 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));
+    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));
 }
 /**
  * A wrapper for form fields to provide additional decoration for inputs.

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

@@ -1,23 +1,23 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
+import { createFocusableRef } from '@react-spectrum/utils';
 import { useProviderProps } from '../../../provider';
 import { Action } from '../../actions/Action';
 import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
-import { createFocusableRef } from '@react-spectrum/utils';
 import { FieldWrapper } from '../FieldWrapper';
 const FileInputElement = tasty(Action, {
     styles: {
         display: 'inline-flex',
         position: 'relative',
         preset: 't3',
-        padding: '.75x 1x',
+        padding: '.5x 1x',
         gap: '1x',
         flow: 'row',
         placeItems: 'center start',
@@ -30,15 +30,23 @@ const FileInputElement = tasty(Action, {
         cursor: 'pointer',
         overflow: 'hidden',
         Button: {
-            radius: 'round',
+            radius: true,
+            border: {
+                '': '#clear',
+                pressed: '#purple.30',
+            },
             fill: {
-                '': '#light',
-                'hovered | focused | pressed': '#purple-04',
-                disabled: '#light',
+                '': '#purple.10',
+                hovered: '#purple.16',
+                pressed: '#purple.10',
+                '[disabled]': '#dark.04',
+            },
+            color: {
+                '': '#purple',
+                '[disabled]': '#dark.30',
             },
-            color: '#dark',
-            padding: '.5x 1x',
-            transition: 'fill',
+            padding: '.5x (1.5x - 1px)',
+            transition: 'theme',
         },
         Placeholder: {
             color: '#dark-02',
@@ -70,7 +78,7 @@ function extractContents(element, callback) {
     }
 }
 function FileInput(props, ref) {
-    let { id, name, qa, qaVal, onChange, placeholder, inputRef, label, extra, labelPosition, isRequired, necessityIndicator, necessityLabel, labelStyles, labelProps, isDisabled, validationState, message, description, requiredMark, tooltip, isHidden, inputStyles, type = 'file', ...otherProps } = useProviderProps(props);
+    let { id, name, qa, qaVal, onChange, placeholder, inputRef, label, extra, labelPosition, isRequired, necessityIndicator, necessityLabel, labelStyles, labelProps, isDisabled, validationState, message, description, requiredMark, tooltip, isHidden, inputStyles, labelSuffix, type = 'file', ...otherProps } = useProviderProps(props);
     const [value, setValue] = useState();
     const [dragHover, setDragHover] = useState(false);
     let domRef = useRef(null);
@@ -99,7 +107,7 @@ function FileInput(props, ref) {
             return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
         },
     }));
-    const fileInput = (_jsxs(FileInputElement, { qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, ref: domRef, mods: {
+    const fileInput = (_jsxs(FileInputElement, { ref: domRef, qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, mods: {
             selected: !!value,
             'drag-hover': dragHover,
         }, onKeyDown: (e) => {
@@ -107,7 +115,7 @@ function FileInput(props, ref) {
             if (e.key === 'Enter' || e.key === 'Space') {
                 (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
             }
-        }, children: [_jsx("input", { id: id, name: name, ref: inputRef, onChange: onLocalChange, "data-element": "Input", type: "file", tabIndex: -1, onDragEnter: () => {
+        }, children: [_jsx("input", { ref: inputRef, id: id, name: name, "data-element": "Input", type: "file", tabIndex: -1, onChange: onLocalChange, onDragEnter: () => {
                     setDragHover(true);
                 }, onDragLeave: () => {
                     setDragHover(false);
@@ -131,6 +139,7 @@ function FileInput(props, ref) {
             requiredMark,
             tooltip,
             isHidden,
+            labelSuffix,
             Component: fileInput,
             ref: domRef,
         } }, void 0));

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

@@ -1,16 +1,16 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement, useEffect, useRef, useState, } from 'react';
-import { useFormProps } from './Form';
 import { mergeProps } from '../../../utils/react';
 import { FieldWrapper } from '../FieldWrapper';
 import { warn } from '../../../utils/warnings';
+import { useFormProps } from './Form';
 const ID_MAP = {};
 function createId(name) {
     if (!name)
@@ -36,7 +36,7 @@ function getDefaultValidateTrigger(type) {
     type = type || '';
     return type === 'Number' || type.includes('Text') ? 'onBlur' : 'onChange';
 }
-function getValueProps(type, value, onChange) {
+function getValueProps(type, value, onChange, allowsCustomValue) {
     type = type || '';
     if (type === 'Number') {
         return {
@@ -68,7 +68,8 @@ function getValueProps(type, value, onChange) {
     else if (type === 'ComboBox') {
         return {
             inputValue: value != null ? value : '',
-            onInputChange: onChange,
+            onInputChange: (val) => onChange(val, !allowsCustomValue),
+            onSelectionChange: onChange,
         };
     }
     else if (type === 'Select') {
@@ -148,6 +149,7 @@ export function Field(allProps) {
     if (!field) {
         return cloneElement(child, mergeProps(child.props, {
             ...getValueProps(inputType),
+            label: fieldName,
             name: fieldName,
             id: fieldId,
         }));
@@ -155,7 +157,7 @@ export function Field(allProps) {
     if (!validateTrigger) {
         validateTrigger = defaultValidateTrigger;
     }
-    function onChangeHandler(val) {
+    function onChangeHandler(val, dontTouch) {
         const field = form.getFieldInstance(fieldName);
         if (shouldUpdate) {
             const fieldsValue = form.getFieldsValue();
@@ -170,9 +172,10 @@ export function Field(allProps) {
                 return;
             }
         }
-        form.setFieldValue(fieldName, val, true);
-        if (validateTrigger === 'onChange' ||
-            (field && field.errors && field.errors.length)) {
+        form.setFieldValue(fieldName, val, !dontTouch, false, dontTouch);
+        if (!dontTouch &&
+            (validateTrigger === 'onChange' ||
+                (field && field.errors && field.errors.length))) {
             form.validateField(fieldName).catch(() => { }); // do nothing on fail
         }
     }
@@ -181,7 +184,7 @@ export function Field(allProps) {
         name: fieldName,
         onBlur() {
             if (validateTrigger === 'onBlur') {
-                // We need timeout so the change event can be done.
+                // We need a timeout so the change event can be done.
                 setTimeout(() => {
                     form.validateField(fieldName).catch(() => { }); // do nothing on fail
                 });
@@ -229,7 +232,7 @@ export function Field(allProps) {
             newProps.message = field.errors[0];
         }
     }
-    Object.assign(newProps, getValueProps(inputType, field === null || field === void 0 ? void 0 : field.value, onChangeHandler));
+    Object.assign(newProps, getValueProps(inputType, field === null || field === void 0 ? void 0 : field.inputValue, onChangeHandler, child.props.allowsCustomValue));
     const { onChange, onSelectionChange, ...childProps } = child.props;
     // onChange event passed to the child should be executed after Form onChange logic
     return cloneElement(child, mergeProps(childProps, newProps, onChange ? { onChange } : {}, onSelectionChange ? { onSelectionChange } : {}));

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

@@ -1,18 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useDOMRef } from '@react-spectrum/utils';
-import { Provider, useProviderProps } from '../../../provider';
 import { createContext, forwardRef, useContext, useEffect, useRef, } from 'react';
+import { Provider, useProviderProps } from '../../../provider';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
-import { useForm } from './useForm';
 import { useCombinedRefs } from '../../../utils/react';
 import { timeout } from '../../../utils/promise';
+import { useForm } from './useForm';
 export const FormContext = createContext({});
 const FormElement = tasty({
     as: 'form',
@@ -108,7 +108,7 @@ function Form(props, ref) {
             form === null || form === void 0 ? void 0 : form.setInitialFieldsValue(defaultValues);
         }
     }, [defaultValues]);
-    return (_jsx(FormElement, { ...filterBaseProps(otherProps, { propNames: formPropNames }), onSubmit: onSubmitCallback, noValidate: true, styles: styles, ref: domRef, mods: { 'has-sider': labelPosition === 'side' }, 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));
+    return (_jsx(FormElement, { ...filterBaseProps(otherProps, { propNames: formPropNames }), ref: domRef, noValidate: true, styles: styles, mods: { 'has-sider': labelPosition === 'side' }, 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/index.js

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -31,7 +31,7 @@ export class CubeFormInstance {
         this.isSubmitting = false;
         this.onValuesChange = () => { };
         this.onSubmit = () => { };
-        this.setFieldsValue = (newData, touched, skipRender, createFields = false) => {
+        this.setFieldsValue = (newData, touched, skipRender, createFields = false, inputOnly = false) => {
             let flag = false;
             Object.keys(newData).forEach((name) => {
                 let field = this.fields[name];
@@ -46,7 +46,10 @@ export class CubeFormInstance {
                     return;
                 }
                 flag = true;
-                field.value = newData[name];
+                if (!inputOnly) {
+                    field.value = newData[name];
+                }
+                field.inputValue = newData[name];
                 if (touched === true) {
                     field.touched = touched;
                 }
@@ -57,7 +60,7 @@ export class CubeFormInstance {
             });
             if (flag && !skipRender) {
                 this.forceReRender();
-                if (touched) {
+                if (touched && !inputOnly) {
                     this.onValuesChange && this.onValuesChange(this.getFormData());
                 }
             }
@@ -105,12 +108,15 @@ export class CubeFormInstance {
             return map;
         }, {});
     }
-    setFieldValue(name, value, touched = false, skipRender = false) {
+    setFieldValue(name, value, touched = false, skipRender = false, inputOnly = false) {
         const field = this.fields[name];
         if (!field || isEqual(value, field.value)) {
             return;
         }
-        field.value = value;
+        if (!inputOnly) {
+            field.value = value;
+        }
+        field.inputValue = value;
         if (touched) {
             field.touched = touched;
         }
@@ -118,7 +124,7 @@ export class CubeFormInstance {
             field.errors = [];
             this.forceReRender();
         }
-        if (touched) {
+        if (touched && !inputOnly) {
             this.onValuesChange && this.onValuesChange(this.getFormData());
         }
     }
@@ -235,13 +241,18 @@ export class CubeFormInstance {
         this.forceReRender();
     }
     _createField(name, data) {
-        return {
+        let obj = {
             name,
             validating: false,
             touched: false,
             errors: [],
             ...data,
         };
+        if (obj) {
+            // condition is here to avoid typing issues
+            obj.inputValue = obj.value;
+        }
+        return obj;
     }
 }
 export function useForm(form, ref, options = {}) {

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

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

package/es/components/forms/Input/Input.js

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

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

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

package/es/components/forms/Label.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -27,7 +27,6 @@ export const INLINE_LABEL_STYLES = {
     color: {
         '': '#dark.85',
         invalid: '#danger-text',
-        disabled: '#dark.30',
     },
     whiteSpace: 'nowrap',
 };
@@ -38,7 +37,6 @@ export const LABEL_STYLES = {
     color: {
         '': '#dark',
         invalid: '#danger-text',
-        disabled: '#dark.30',
     },
     whiteSpace: 'nowrap',
     width: {
@@ -63,12 +61,12 @@ function Label(props, ref) {
     let icon = (_jsx("span", { "aria-label": includeNecessityIndicatorInAccessibilityName
             ? formatMessage('(required)')
             : undefined, children: REQUIRED_ICON }, void 0));
-    return (_jsx(LabelElement, { ...filterBaseProps(otherProps), onClick: onClick, ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
+    return (_jsx(LabelElement, { ...filterBaseProps(otherProps), ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
             side: labelPosition === 'side',
             disabled: isDisabled,
             invalid: validationState === 'invalid',
             valid: validationState === 'valid',
-        }, children: typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [children, (necessityIndicator === 'label' ||
+        }, onClick: onClick, children: typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [children, (necessityIndicator === 'label' ||
                     (necessityIndicator === 'icon' && isRequired)) &&
                     ' \u200b', necessityIndicator === 'label' && (_jsx("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
                         ? isRequired

package/es/components/forms/NumberInput/NumberInput.js

@@ -1,21 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
-import { useFormProps } from '../Form';
-import { useProviderProps } from '../../../provider';
 import { useLocale } from '@react-aria/i18n';
-import { TextInputBase, } from '../TextInput/TextInputBase';
 import { useNumberFieldState } from '@react-stately/numberfield';
 import { useNumberField } from '@react-aria/numberfield';
-import { StepButton } from './StepButton';
+import { useFormProps } from '../Form';
+import { useProviderProps } from '../../../provider';
+import { TextInputBase, } from '../TextInput/TextInputBase';
 import { tasty } from '../../../tasty';
 import { castNullableNumberValue, } from '../../../utils/react/nullableValue';
+import { StepButton } from './StepButton';
 const StepperContainer = tasty({
     styles: {
         display: 'grid',
@@ -35,7 +35,7 @@ function NumberInput(props, ref) {
     let state = useNumberFieldState({ ...props, locale });
     let inputRef = useRef(null);
     let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = useNumberField(props, state, inputRef);
-    return (_jsx(TextInputBase, { ...otherProps, labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { direction: "up", ...incrementButtonProps }, void 0), _jsx(StepButton, { direction: "down", ...decrementButtonProps }, void 0)] }, void 0)) : null }, void 0));
+    return (_jsx(TextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { direction: "up", ...incrementButtonProps }, void 0), _jsx(StepButton, { direction: "down", ...decrementButtonProps }, void 0)] }, void 0)) : null }, void 0));
 }
 /**
  * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.