@cube-dev/ui-kit 0.0.0-canary-f2f75e5 → 0.0.0-canary-6f46707

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

@@ -1,17 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import { useDOMRef } from '@react-spectrum/utils';
 import { useCheckboxGroup } from '@react-aria/checkbox';
 import { useCheckboxGroupState } from '@react-stately/checkbox';
 import { useProviderProps } from '../../../provider';
-import { FormContext, useFieldProps } from '../Form';
-import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { FormContext, useFormProps } from '../Form/Form';
+import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableArrayValue, } from '../../../utils/react/nullableValue';
 import { CheckboxGroupContext } from './context';
@@ -21,7 +22,6 @@ const WRAPPER_STYLES = {
         '': '1fr',
         'has-sider': 'max-content 1fr',
     },
-    placeItems: 'baseline start',
 };
 const CheckGroupElement = tasty({
     qa: 'CheckboxGroup',
@@ -39,26 +39,21 @@ const CheckGroupElement = tasty({
         },
     },
 });
-/**
- * Checkbox groups allow users to select a single option from a list of mutually exclusive options.
- * All possible options are exposed up front for users to compare.
- */
-export const CheckboxGroup = forwardRef(function CheckboxGroup(props, ref) {
+function CheckboxGroup(props, ref) {
     props = castNullableArrayValue(props);
     props = useProviderProps(props);
-    props = useFieldProps(props, {
-        defaultValidationTrigger: 'onChange',
-        valuePropsMapper: ({ value, onChange }) => ({
-            value: value != null ? value : [],
-            onChange: onChange,
-        }),
-    });
-    const { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, labelSuffix, ...otherProps } = props;
-    const styles = extractStyles(otherProps, OUTER_STYLES, WRAPPER_STYLES);
-    const groupStyles = extractStyles(otherProps, BLOCK_STYLES);
-    const state = useCheckboxGroupState(props);
-    const { groupProps, labelProps } = useCheckboxGroup(props, state);
-    const radioGroup = (_jsx(CheckGroupElement, { styles: groupStyles, mods: { horizontal: orientation === 'horizontal' }, children: _jsx(FormContext.Provider, { value: { isDisabled, validationState }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }) }) }));
+    props = useFormProps(props);
+    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, labelSuffix, inputStyles, ...otherProps } = props;
+    let domRef = useDOMRef(ref);
+    let styles = extractStyles(otherProps, CONTAINER_STYLES, WRAPPER_STYLES);
+    let state = useCheckboxGroupState(props);
+    let { groupProps, labelProps } = useCheckboxGroup(props, state);
+    let radioGroup = (_jsx(CheckGroupElement, { styles: inputStyles, mods: {
+            horizontal: orientation === 'horizontal',
+        }, children: _jsx(FormContext.Provider, { value: {
+                isDisabled,
+                validationState,
+            }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -78,17 +73,15 @@ export const CheckboxGroup = forwardRef(function CheckboxGroup(props, ref) {
             tooltip,
             labelSuffix,
             Component: radioGroup,
-            ref,
-        } }));
-});
+            ref: domRef,
+        } }, void 0));
+}
 /**
- * @legacy should be removed with legacy <Field />
+ * Checkbox groups allow users to select a single option from a list of mutually exclusive options.
+ * All possible options are exposed up front for users to compare.
  */
-Object.defineProperty(CheckboxGroup, 'cubeInputType', {
-    enumerable: false,
-    configurable: false,
-    writable: false,
-    value: 'CheckboxGroup',
-});
+const _CheckboxGroup = forwardRef(CheckboxGroup);
+_CheckboxGroup.cubeInputType = 'CheckboxGroup';
+export { _CheckboxGroup as CheckboxGroup };
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/components/forms/{FieldWrapper/FieldWrapper.js → FieldWrapper.js}

@@ -1,21 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Paragraph } from '../../content/Paragraph';
-import { tasty } from '../../../tasty';
-import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';
-import { Text } from '../../content/Text';
-import { wrapNodeIfPlain } from '../../../utils/react';
-import { Space } from '../../layout/Space';
-import { Flex } from '../../layout/Flex';
-import { Label } from '../Label';
+import { Paragraph } from '../content/Paragraph';
+import { tasty } from '../../tasty';
+import { TooltipProvider } from '../overlays/Tooltip/TooltipProvider';
+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: {
@@ -49,9 +49,6 @@ const FieldElement = tasty({
         },
     },
 });
-if (process.env.NODE_ENV === 'development') {
-    FieldElement.displayName = 'FieldWrapperElement';
-}
 const MessageElement = tasty({
     qa: 'Field_Message',
     styles: {
@@ -66,24 +63,25 @@ const MessageElement = tasty({
         userSelect: 'none',
     },
 });
-/**
- * A wrapper for form fields to provide additional decoration for inputs.
- * @internal Do not use this component directly.
- */
-export const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
+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));
+}
+/**
+ * A wrapper for form fields to provide additional decoration for inputs.
+ */
+const _FieldWrapper = forwardRef(FieldWrapper);
+export { _FieldWrapper as FieldWrapper };
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 
@@ -9,7 +9,7 @@ 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';
+import { Action } from '../../actions/Action';
 import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 const FileInputElement = tasty(Action, {
@@ -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/LegacyField.js → Field.js}

@@ -1,16 +1,16 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement, createContext, useContext, useEffect, useState, } from 'react';
-import { useWarn } from '../../../../_internal';
-import { mergeProps } from '../../../../utils/react';
-import { FieldWrapper } from '../../FieldWrapper';
-import { useFormProps } from '../Form';
+import { Children, cloneElement, useEffect, useRef, useState, } from 'react';
+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)
@@ -71,12 +71,6 @@ function getValueProps(type, value, onChange, allowsCustomValue) {
             onChange: onChange,
         };
     }
-    else if (type === 'RangeSlider') {
-        return {
-            value: value != null ? value : undefined,
-            onChange: onChange,
-        };
-    }
     else if (type === 'ComboBox') {
         return {
             inputValue: value != null ? value : '',
@@ -95,22 +89,13 @@ function getValueProps(type, value, onChange, allowsCustomValue) {
         onChange,
     };
 }
-/**
- * @deprecated Use component without `Field`
- *
- * ```tsx
-    <Form>
-        <Checkbox />
-    </Form>
- *```
- */
-export function Field(props) {
-    const fullProps = useFormProps(props);
-    let { defaultValue, type: inputType, id, idPrefix, children, name, form, rules, label, extra, validateTrigger, validationState, necessityLabel, necessityIndicator, shouldUpdate, message, description, tooltip, isHidden, isDisabled, isLoading, styles, labelPosition = 'top', labelStyles, labelSuffix, } = fullProps;
+export function Field(allProps) {
+    const props = useFormProps(allProps);
+    let { defaultValue, type: inputType, id, idPrefix, children, name, form, rules, label, extra, validateTrigger, validationState, necessityLabel, necessityIndicator, shouldUpdate, message, description, tooltip, isHidden, isDisabled, isLoading, styles, labelPosition = 'top', labelStyles, labelSuffix, } = props;
     const nonInput = !name;
     const fieldName = name != null ? (Array.isArray(name) ? name.join('.') : name) : '';
+    let firstRunRef = useRef(true);
     let [fieldId, setFieldId] = useState(id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName));
-    useWarn(!form, 'Form Field requires declared form instance if field name is specified');
     useEffect(() => {
         let newId;
         if (!id && !nonInput) {
@@ -148,27 +133,32 @@ export function Field(props) {
         return null;
     let child = Children.only(children);
     if (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(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 }, void 0));
     }
     if (!form) {
+        warn('Form Field requires declared form instance if field name is specified');
         return null;
     }
     inputType =
         inputType || child.type.cubeInputType || 'Text';
     const defaultValidateTrigger = getDefaultValidateTrigger(inputType);
-    if (field) {
-        field.rules = rules;
-        if (defaultValue != null && !field.touched) {
-            form?.setFieldValue(fieldName, defaultValue, false, true);
+    if (firstRunRef.current && defaultValue != null) {
+        if (!field) {
+            form.createField(fieldName, true);
+        }
+        if (field?.value == null) {
+            form.setFieldValue(fieldName, defaultValue, false, true);
+            field = form?.getFieldInstance(fieldName);
         }
     }
+    firstRunRef.current = false;
     if (!field) {
-        return (_jsx(LegacyFieldProvider, { children: cloneElement(child, mergeProps(child.props, {
-                ...getValueProps(inputType),
-                label: fieldName,
-                name: fieldName,
-                id: fieldId,
-            })) }));
+        return cloneElement(child, mergeProps(child.props, {
+            ...getValueProps(inputType),
+            label: fieldName,
+            name: fieldName,
+            id: fieldId,
+        }));
     }
     if (!validateTrigger) {
         validateTrigger = defaultValidateTrigger;
@@ -251,17 +241,7 @@ export function Field(props) {
     Object.assign(newProps, getValueProps(inputType, 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 (_jsx(LegacyFieldProvider, { children: cloneElement(child, mergeProps(childProps, newProps, onChange ? { onChange } : {}, onSelectionChange ? { onSelectionChange } : {})) }));
-}
-const LegacyFieldContext = createContext({
-    insideLegacyField: false,
-});
-function LegacyFieldProvider({ children }) {
-    return (_jsx(LegacyFieldContext.Provider, { value: { insideLegacyField: true }, children: children }));
-}
-export function useInsideLegacyField() {
-    const { insideLegacyField } = useContext(LegacyFieldContext);
-    return insideLegacyField;
+    return cloneElement(child, mergeProps(childProps, newProps, onChange ? { onChange } : {}, onSelectionChange ? { onSelectionChange } : {}));
 }
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 
@@ -106,7 +106,7 @@ function Form(props, ref) {
             // onSubmit(Object.fromEntries(new FormData(e.target).entries()));
         };
     }
-    [form] = useForm(form, ref?.current, {
+    [form] = useForm(form, ref && ref.current, {
         onSubmit: onSubmitCallback,
         onValuesChange,
     });
@@ -138,7 +138,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/SubmitError.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * 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,17 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 
-import { Submit } from './Submit';
 import { Field } from './Field';
 import { SubmitError } from './SubmitError';
 import { useForm } from './useForm';
 import { useFormProps, FormContext, Form as _Form } from './Form';
-const Form = Object.assign(_Form, { Item: Field, useForm, Submit, SubmitError });
-export { useFormProps, Form, Field, useForm, FormContext, Submit, SubmitError };
-export * from './Field';
+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.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * 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.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 
@@ -217,7 +217,6 @@ export class CubeFormInstance {
         if (!skipRender) {
             this.forceReRender();
         }
-        return this.fields[name];
     }
     removeField(name, skipRender) {
         if (this.fields[name]) {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

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

@@ -1,16 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 
-import { TextInput } from '../TextInput';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { TextInput } from '../TextInput/TextInput';
 import { PasswordInput } from '../PasswordInput/PasswordInput';
 import { NumberInput } from '../NumberInput/NumberInput';
 import { FileInput } from '../FileInput/FileInput';
 import { TextArea } from '../TextArea/TextArea';
-export const Input = Object.assign(TextInput, {
+export const Input = Object.assign(forwardRef(function Input(props, ref) {
+    return _jsx(TextInput, { ref: ref, ...props }, void 0);
+}), {
     Text: TextInput,
     Password: PasswordInput,
     Number: NumberInput,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * 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.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ const REQUIRED_ICON = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", versio
         width: '.8em',
         height: '.8em',
         transform: 'rotate(-5deg)',
-    }, children: _jsx("switch", { children: _jsx("g", { children: _jsx("polygon", { fill: "currentColor", points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57" }) }) }) }));
+    }, children: _jsx("switch", { children: _jsx("g", { children: _jsx("polygon", { fill: "currentColor", points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57" }, void 0) }, void 0) }, void 0) }, void 0));
 const INTL_MESSAGES = {
     '(required)': '(required)',
     '(optional)': '(optional)',
@@ -58,7 +58,7 @@ function Label(props, ref) {
         : formatMessage('(optional)');
     let icon = (_jsx("span", { "aria-label": includeNecessityIndicatorInAccessibilityName
             ? formatMessage('(required)')
-            : undefined, children: REQUIRED_ICON }));
+            : undefined, children: REQUIRED_ICON }, void 0));
     return (_jsx(LabelElement, { ...filterBaseProps(otherProps), ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
             side: labelPosition === 'side',
             disabled: isDisabled,
@@ -68,7 +68,7 @@ function Label(props, ref) {
                     (necessityIndicator === 'icon' && isRequired)) &&
                     ' \u200b', necessityIndicator === 'label' && (_jsx("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
                         ? isRequired
-                        : undefined, children: necessityLabel })), necessityIndicator === 'icon' && isRequired && icon] })) }));
+                        : undefined, children: necessityLabel }, void 0)), necessityIndicator === 'icon' && isRequired && icon] }, void 0)) }, void 0));
 }
 let _Label = forwardRef(Label);
 export { _Label as Label };

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 
@@ -10,9 +10,9 @@ import { forwardRef, useRef } from 'react';
 import { useLocale } from '@react-aria/i18n';
 import { useNumberFieldState } from '@react-stately/numberfield';
 import { useNumberField } from '@react-aria/numberfield';
-import { useFieldProps } from '../Form';
+import { useFormProps } from '../Form';
 import { useProviderProps } from '../../../provider';
-import { TextInputBase } from '../TextInput';
+import { TextInputBase, } from '../TextInput/TextInputBase';
 import { tasty } from '../../../tasty';
 import { castNullableNumberValue, } from '../../../utils/react/nullableValue';
 import { StepButton } from './StepButton';
@@ -30,29 +30,23 @@ const StepperContainer = tasty({
         placeSelf: 'stretch',
     },
 });
-/**
- * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
- */
-export const NumberInput = forwardRef(function NumberInput(props, ref) {
+function NumberInput(props, ref) {
     props = castNullableNumberValue(props);
     props = useProviderProps(props);
-    props = useFieldProps(props);
+    props = useFormProps(props);
     let { hideStepper, suffix, value, defaultValue, onChange, ...otherProps } = props;
     let showStepper = !hideStepper;
     let { locale } = useLocale();
     let state = useNumberFieldState({ ...props, locale });
     let inputRef = useRef(null);
     let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = useNumberField(props, state, inputRef);
-    return (_jsx(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }), _jsx(StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size })] })) : (suffix) }));
-});
+    return (_jsx(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }, void 0), _jsx(StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size }, void 0)] }, void 0)) : (suffix) }, void 0));
+}
 /**
- * @legacy should be removed with legacy <Field />
+ * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
  */
-Object.defineProperty(NumberInput, 'cubeInputType', {
-    enumerable: false,
-    configurable: false,
-    writable: false,
-    value: 'Number',
-});
+const _NumberInput = forwardRef(NumberInput);
+_NumberInput.cubeInputType = 'Number';
+export { _NumberInput as NumberInput };
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 
@@ -32,10 +32,10 @@ const STEP_BUTTON_STYLES = {
  * Buttons for NumberField.
  */
 export function StepButton(props) {
-    return (_jsx(Button, { preventDefault: true, type: "neutral", styles: STEP_BUTTON_STYLES, icon: props.direction === 'up' ? (_jsx(CaretUpOutlined, { style: { fontSize: 'var(--icon-size)' } })) : (_jsx(CaretDownOutlined, { style: { fontSize: 'var(--icon-size)' } })), mods: {
+    return (_jsx(Button, { preventDefault: true, type: "neutral", styles: STEP_BUTTON_STYLES, icon: props.direction === 'up' ? (_jsx(CaretUpOutlined, { style: { fontSize: 'var(--icon-size)' } }, void 0)) : (_jsx(CaretDownOutlined, { style: { fontSize: 'var(--icon-size)' } }, void 0)), mods: {
             up: props.direction === 'up',
             down: props.direction === 'down',
-        }, label: `Step ${props.direction}`, ...props }));
+        }, label: `Step ${props.direction}`, ...props }, void 0));
 }