@cube-dev/ui-kit 0.39.1 → 0.41.0

package/cjs/components/content/Paragraph.js

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

package/cjs/components/content/Placeholder/Placeholder.js

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

package/cjs/components/content/PrismCode/PrismCode.js

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

package/cjs/components/content/Result/Result.js

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

package/cjs/components/content/Skeleton/Skeleton.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.39.1
+ * @cube-dev/ui-kit v0.41.0
  * Released under the MIT license.
  */
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Skeleton = void 0;
+exports.Skeleton = Skeleton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Placeholder_1 = require("../Placeholder/Placeholder");
 const Flow_1 = require("../../layout/Flow");
@@ -74,6 +74,5 @@ function Skeleton({ layout, isStatic, ...props }) {
     layout = layout || 'page';
     return LAYOUT_MAP[layout] ? (LAYOUT_MAP[layout]({ isStatic, ...props, qa: 'Skeleton' })) : ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { ...props }));
 }
-exports.Skeleton = Skeleton;
 
         

package/cjs/components/content/Tag/Tag.js

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

package/cjs/components/content/Text.js

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

package/cjs/components/content/Title.js

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

package/cjs/components/{forms → fields}/Checkbox/Checkbox.js

@@ -1,28 +1,28 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.39.1
+ * @cube-dev/ui-kit v0.41.0
  * Released under the MIT license.
  */
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
+exports.useCheckbox = exports.Checkbox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("@react-spectrum/utils");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
+Object.defineProperty(exports, "useCheckbox", { enumerable: true, get: function () { return react_aria_1.useCheckbox; } });
 const react_stately_1 = require("react-stately");
 const provider_1 = require("../../../provider");
 const tasty_1 = require("../../../tasty");
 const interactions_1 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
-const Label_1 = require("../Label");
 const HiddenInput_1 = require("../../HiddenInput");
-const Form_1 = require("../Form");
+const form_1 = require("../../form");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
 const Text_1 = require("../../content/Text");
-const wrapper_1 = require("../wrapper");
+const form_2 = require("../../form");
 const CheckboxGroup_1 = require("./CheckboxGroup");
 const context_1 = require("./context");
 function CheckOutlined() {
@@ -85,8 +85,8 @@ function Checkbox(props, ref) {
     props = (0, nullableValue_1.castNullableIsSelected)(props);
     let originalProps = props;
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
-    props = (0, Form_1.useFieldProps)(props, {
+    props = (0, form_1.useFormProps)(props);
+    props = (0, form_1.useFieldProps)(props, {
         defaultValidationTrigger: 'onChange',
         valuePropsMapper: ({ value, onChange }) => ({
             isSelected: value ?? false,
@@ -99,7 +99,7 @@ function Checkbox(props, ref) {
     let styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES);
     inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES, inputStyles);
     labelStyles = (0, react_1.useMemo)(() => ({
-        ...(insideForm ? Label_1.LABEL_STYLES : Label_1.INLINE_LABEL_STYLES),
+        ...(insideForm ? form_1.LABEL_STYLES : form_1.INLINE_LABEL_STYLES),
         ...labelStyles,
     }), [insideForm, labelStyles]);
     let { isFocused, focusProps } = (0, interactions_1.useFocus)({ isDisabled }, true);
@@ -148,7 +148,7 @@ function Checkbox(props, ref) {
     };
     const checkboxField = ((0, jsx_runtime_1.jsxs)(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": "HiddenInput", ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }), (0, jsx_runtime_1.jsx)(CheckboxElement, { qa: qa || 'Checkbox', mods: mods, styles: inputStyles, children: markIcon }), children && (0, jsx_runtime_1.jsx)(Text_1.Text, { nowrap: true, children: children })] }));
     if (insideForm && !groupState) {
-        return (0, wrapper_1.wrapWithField)(checkboxField, domRef, {
+        return (0, form_2.wrapWithField)(checkboxField, domRef, {
             ...props,
             children: null,
             labelStyles,

package/cjs/components/{forms → fields}/Checkbox/CheckboxGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.39.1
+ * @cube-dev/ui-kit v0.41.0
  * Released under the MIT license.
  */
 
@@ -16,9 +16,8 @@ const react_stately_1 = require("react-stately");
 const provider_1 = require("../../../provider");
 const tasty_1 = require("../../../tasty");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-const Form_1 = require("../Form");
+const form_1 = require("../../form");
 const react_2 = require("../../../utils/react");
-const wrapper_1 = require("../wrapper");
 const context_1 = require("./context");
 const CheckGroupElement = (0, tasty_1.tasty)({
     qa: 'CheckboxGroup',
@@ -39,8 +38,8 @@ const CheckGroupElement = (0, tasty_1.tasty)({
 function CheckboxGroup(props, ref) {
     props = (0, nullableValue_1.castNullableArrayValue)(props);
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
-    props = (0, Form_1.useFieldProps)(props, {
+    props = (0, form_1.useFormProps)(props);
+    props = (0, form_1.useFieldProps)(props, {
         defaultValidationTrigger: 'onChange',
         valuePropsMapper: ({ value, onChange }) => ({
             value: value != null ? value : [],
@@ -54,11 +53,11 @@ function CheckboxGroup(props, ref) {
     let { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)(props, state);
     let radioGroup = ((0, jsx_runtime_1.jsx)(CheckGroupElement, { styles: inputStyles, mods: {
             horizontal: orientation === 'horizontal',
-        }, children: (0, jsx_runtime_1.jsx)(Form_1.FormContext.Provider, { value: {
+        }, children: (0, jsx_runtime_1.jsx)(form_1.FormContext.Provider, { value: {
                 isDisabled,
                 validationState,
             }, children: (0, jsx_runtime_1.jsx)(context_1.CheckboxGroupContext.Provider, { value: state, children: children }) }) }));
-    return (0, wrapper_1.wrapWithField)(radioGroup, domRef, {
+    return (0, form_1.wrapWithField)(radioGroup, domRef, {
         ...props,
         children: null,
         fieldProps: groupProps,

package/cjs/components/{forms → fields}/Checkbox/context.js

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

package/cjs/components/{forms/Slider → fields/Checkbox}/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.39.1
+ * @cube-dev/ui-kit v0.41.0
  * Released under the MIT license.
  */
 
@@ -21,8 +21,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./RangeSlider"), exports);
-__exportStar(require("./Slider"), exports);
-__exportStar(require("./types"), exports);
+__exportStar(require("./Checkbox"), exports);
+__exportStar(require("./CheckboxGroup"), exports);
 
         

package/cjs/components/{pickers → fields}/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.39.1
+ * @cube-dev/ui-kit v0.41.0
  * Released under the MIT license.
  */
 
@@ -12,15 +12,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
-const forms_1 = require("../../forms");
+const form_1 = require("../../form");
+const index_1 = require("../index");
 const provider_1 = require("../../../provider");
 const tasty_1 = require("../../../tasty");
 const interactions_1 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
-const Select_1 = require("../Select/Select");
-const forms_2 = require("../../forms");
+const Select_1 = require("../Select");
 const OverlayWrapper_1 = require("../../overlays/OverlayWrapper");
-const wrapper_1 = require("../../forms/wrapper");
 const icons_1 = require("../../../icons");
 const InvalidIcon_1 = require("../../shared/InvalidIcon");
 const ValidIcon_1 = require("../../shared/ValidIcon");
@@ -28,11 +27,11 @@ function CaretDownIcon() {
     return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }) }));
 }
 const ComboBoxWrapperElement = (0, tasty_1.tasty)({
-    styles: forms_2.INPUT_WRAPPER_STYLES,
+    styles: index_1.INPUT_WRAPPER_STYLES,
 });
 const InputElement = (0, tasty_1.tasty)({
     as: 'input',
-    styles: forms_2.DEFAULT_INPUT_STYLES,
+    styles: index_1.DEFAULT_INPUT_STYLES,
 });
 const TriggerElement = (0, tasty_1.tasty)({
     as: 'button',
@@ -63,8 +62,8 @@ const TriggerElement = (0, tasty_1.tasty)({
 });
 exports.ComboBox = (0, react_1.forwardRef)(function ComboBox(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, forms_1.useFormProps)(props);
-    props = (0, forms_1.useFieldProps)(props, {
+    props = (0, form_1.useFormProps)(props);
+    props = (0, form_1.useFieldProps)(props, {
         valuePropsMapper: ({ value, onChange }) => ({
             inputValue: value != null ? value : '',
             onInputChange: (val) => onChange(val, !props.allowsCustomValue),
@@ -74,43 +73,12 @@ exports.ComboBox = (0, react_1.forwardRef)(function ComboBox(props, ref) {
     let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, suffix, listBoxStyles, overlayStyles, hideTrigger, message, description, size, autoComplete = 'off', direction = 'bottom', shouldFlip = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, ...otherProps } = props;
     let isAsync = loadingState != null;
     let { contains } = (0, react_aria_1.useFilter)({ sensitivity: 'base' });
-    const comboboxProps = {
-        ...otherProps,
-        inputValue: props.inputValue,
-        defaultInputValue: props.defaultInputValue,
-        defaultItems: props.defaultItems,
-        defaultSelectedKey: props.defaultSelectedKey,
-        children: props.children,
-        items: props.items,
-        selectedKey: props.selectedKey,
-        label: props.label,
-        isDisabled: props.isDisabled,
-        validationState: props.validationState,
-        placeholder: props.placeholder,
-        description: props.description,
-        autoFocus: props.autoFocus,
-        isRequired: props.isRequired,
-        allowsCustomValue: props.allowsCustomValue,
-        menuTrigger,
-        disabledKeys: props.disabledKeys,
-        name: props.name,
-        onInputChange: props.onInputChange,
-        errorMessage: props.errorMessage,
-        isReadOnly: props.isReadOnly,
-        onBlur: props.onBlur,
-        onFocus: props.onFocus,
-        onSelectionChange: props.onSelectionChange,
-        onFocusChange: props.onFocusChange,
-        onKeyDown: props.onKeyDown,
-        onKeyUp: props.onKeyUp,
-        onOpenChange: props.onOpenChange,
-        defaultFilter: filter || contains,
-        allowsEmptyCollection: isAsync,
-    };
     let state = (0, react_stately_1.useComboBoxState)({
-        ...comboboxProps,
+        ...props,
         defaultFilter: filter || contains,
+        filter: undefined,
         allowsEmptyCollection: isAsync,
+        menuTrigger,
     });
     const outerStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
     inputStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, inputStyles);
@@ -131,7 +99,7 @@ exports.ComboBox = (0, react_1.forwardRef)(function ComboBox(props, ref) {
         offset: overlayOffset,
     });
     let { labelProps, inputProps, listBoxProps, buttonProps: triggerProps, } = (0, react_aria_1.useComboBox)({
-        ...comboboxProps,
+        ...props,
         inputRef,
         buttonRef: triggerRef,
         listBoxRef,
@@ -189,7 +157,7 @@ exports.ComboBox = (0, react_1.forwardRef)(function ComboBox(props, ref) {
                             disabled: isDisabled,
                             loading: isLoading,
                         }), ref: triggerRef, "data-size": size, isDisabled: isDisabled, styles: triggerStyles, children: (0, jsx_runtime_1.jsx)(CaretDownIcon, {}) })) : null] }), (0, jsx_runtime_1.jsx)(OverlayWrapper_1.OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: (0, jsx_runtime_1.jsx)(Select_1.ListBoxPopup, { ...listBoxProps, shouldUseVirtualFocus: true, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth }) })] }));
-    return (0, wrapper_1.wrapWithField)(comboBoxField, ref, (0, react_2.mergeProps)({ ...props, styles }, { labelProps }));
+    return (0, form_1.wrapWithField)(comboBoxField, ref, (0, react_2.mergeProps)({ ...props, styles }, { labelProps }));
 });
 exports.ComboBox.Item = react_stately_1.Item;
 Object.defineProperty(exports.ComboBox, 'cubeInputType', {

package/cjs/components/fields/ComboBox/index.js

@@ -0,0 +1,26 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.41.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ComboBox"), exports);
+
+        

package/cjs/components/{forms → fields}/DatePicker/DateInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.39.1
+ * @cube-dev/ui-kit v0.41.0
  * Released under the MIT license.
  */
 
@@ -14,10 +14,9 @@ const date_1 = require("@internationalized/date");
 const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
 const provider_1 = require("../../../provider");
-const wrapper_1 = require("../wrapper");
+const form_1 = require("../../form");
 const tasty_1 = require("../../../tasty");
 const react_2 = require("../../../utils/react");
-const Form_1 = require("../Form");
 const utils_1 = require("./utils");
 const DateInputBase_1 = require("./DateInputBase");
 const DatePickerSegment_1 = require("./DatePickerSegment");
@@ -25,8 +24,8 @@ const props_1 = require("./props");
 const parseDate_1 = require("./parseDate");
 function DateInput(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
-    props = (0, Form_1.useFieldProps)(props, {
+    props = (0, form_1.useFormProps)(props);
+    props = (0, form_1.useFieldProps)(props, {
         defaultValidationTrigger: 'onBlur',
         valuePropsMapper: ({ value, onChange }) => ({
             value: typeof value === 'string' ? (0, parseDate_1.parseAbsoluteDate)(value) : value,
@@ -49,7 +48,7 @@ function DateInput(props, ref) {
     let fieldRef = (0, react_1.useRef)(null);
     let { labelProps, fieldProps } = (0, react_aria_1.useDateField)(props, state, fieldRef);
     const component = ((0, jsx_runtime_1.jsx)(DateInputBase_1.DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, validationState: state.validationState, styles: wrapperStyles, inputStyles: inputStyles, children: state.segments.map((segment, i) => ((0, jsx_runtime_1.jsx)(DatePickerSegment_1.DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
-    return (0, wrapper_1.wrapWithField)(component, domRef, {
+    return (0, form_1.wrapWithField)(component, domRef, {
         ...props,
         styles,
         labelProps: (0, react_2.mergeProps)(props.labelProps, labelProps),

package/cjs/components/{forms → fields}/DatePicker/DateInputBase.js

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

package/cjs/components/{forms → fields}/DatePicker/DatePicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.39.1
+ * @cube-dev/ui-kit v0.41.0
  * Released under the MIT license.
  */
 
@@ -13,10 +13,9 @@ const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
 const provider_1 = require("../../../provider");
-const wrapper_1 = require("../wrapper");
 const tasty_1 = require("../../../tasty");
 const react_2 = require("../../../utils/react");
-const Form_1 = require("../Form");
+const form_1 = require("../../form");
 const Dialog_1 = require("../../overlays/Dialog");
 const Calendar_1 = require("../../other/Calendar/Calendar");
 const utils_1 = require("./utils");
@@ -29,8 +28,8 @@ const intl_1 = require("./intl");
 const DatePickerElement_1 = require("./DatePickerElement");
 function DatePicker(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
-    props = (0, Form_1.useFieldProps)(props, {
+    props = (0, form_1.useFormProps)(props);
+    props = (0, form_1.useFieldProps)(props, {
         defaultValidationTrigger: 'onBlur',
     });
     props = Object.assign({}, props_1.DEFAULT_DATE_PROPS, props);
@@ -66,7 +65,7 @@ function DatePicker(props, ref) {
     let showTimeField = !!timeGranularity;
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
     const component = ((0, jsx_runtime_1.jsxs)(DatePickerElement_1.DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [(0, jsx_runtime_1.jsx)(DateInputBase_1.DateInputBase, { disableFocusRing: true, radius: "left", border: "top left bottom", isDisabled: isDisabled, validationState: validationState, size: size, children: (0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...fieldProps }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: props.shouldFlip, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(DatePickerButton_1.DatePickerButton, { size: size, ...(0, react_2.mergeProps)(buttonProps, focusPropsButton), isDisabled: isDisabled }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...dialogProps, width: "max-content", children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, { ...calendarProps }), showTimeField && ((0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['time'], value: state.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: state.setTimeValue }))] })] })] }));
-    return (0, wrapper_1.wrapWithField)(component, domRef, {
+    return (0, form_1.wrapWithField)(component, domRef, {
         ...props,
         styles,
         labelProps: (0, react_2.mergeProps)(props.labelProps, labelProps),

package/cjs/components/{forms → fields}/DatePicker/DatePickerButton.js

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

package/cjs/components/{forms → fields}/DatePicker/DatePickerElement.js

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

package/cjs/components/{forms → fields}/DatePicker/DatePickerInput.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.39.1
+ * @cube-dev/ui-kit v0.41.0
  * Released under the MIT license.
  */
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerInput = void 0;
+exports.DatePickerInput = DatePickerInput;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const date_1 = require("@internationalized/date");
@@ -50,6 +50,5 @@ function DatePickerInput(props) {
     let { fieldProps } = (0, react_aria_1.useDateField)(props, state, ref);
     return ((0, jsx_runtime_1.jsx)(DateInputElement, { ref: ref, ...(0, react_2.mergeProps)(fieldProps, focusWithinProps), children: state.segments.map((segment, i) => ((0, jsx_runtime_1.jsx)(DatePickerSegment_1.DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
 }
-exports.DatePickerInput = DatePickerInput;
 
         

package/cjs/components/{forms → fields}/DatePicker/DatePickerSegment.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.39.1
+ * @cube-dev/ui-kit v0.41.0
  * Released under the MIT license.
  */
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerSegment = void 0;
+exports.DatePickerSegment = DatePickerSegment;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -49,7 +49,6 @@ function DatePickerSegment({ segment, state, ...otherProps }) {
             return ((0, jsx_runtime_1.jsx)(EditableSegment, { segment: segment, state: state, ...otherProps }));
     }
 }
-exports.DatePickerSegment = DatePickerSegment;
 function LiteralSegment({ segment }) {
     return ((0, jsx_runtime_1.jsx)(LiteralSegmentElement, { "data-type": segment.type === 'literal' ? undefined : segment.type, children: segment.text }));
 }

package/cjs/components/{forms → fields}/DatePicker/DateRangePicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.39.1
+ * @cube-dev/ui-kit v0.41.0
  * Released under the MIT license.
  */
 
@@ -13,10 +13,9 @@ const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
 const provider_1 = require("../../../provider");
-const wrapper_1 = require("../wrapper");
 const tasty_1 = require("../../../tasty");
 const react_2 = require("../../../utils/react");
-const Form_1 = require("../Form");
+const form_1 = require("../../form");
 const Space_1 = require("../../layout/Space");
 const Dialog_1 = require("../../overlays/Dialog");
 const RangeCalendar_1 = require("../../other/Calendar/RangeCalendar");
@@ -38,8 +37,8 @@ const DateRangeDash = (0, tasty_1.tasty)({
 });
 function DateRangePicker(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
-    props = (0, Form_1.useFieldProps)(props, {
+    props = (0, form_1.useFormProps)(props);
+    props = (0, form_1.useFieldProps)(props, {
         defaultValidationTrigger: 'onBlur',
     });
     props = Object.assign({}, props_1.DEFAULT_DATE_PROPS, props);
@@ -75,7 +74,7 @@ function DateRangePicker(props, ref) {
     let showTimeField = !!timeGranularity;
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
     const component = ((0, jsx_runtime_1.jsxs)(DatePickerElement_1.DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [(0, jsx_runtime_1.jsxs)(DateInputBase_1.DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: [(0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }), (0, jsx_runtime_1.jsx)(DateRangeDash, {}), (0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps })] }), (0, jsx_runtime_1.jsxs)(Dialog_1.DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(DatePickerButton_1.DatePickerButton, { size: size, ...(0, react_2.mergeProps)(buttonProps, focusPropsButton), isDisabled: isDisabled }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...dialogProps, width: "max-content", children: [(0, jsx_runtime_1.jsx)(RangeCalendar_1.RangeCalendar, { ...calendarProps }), showTimeField && ((0, jsx_runtime_1.jsxs)(Space_1.Space, { children: [(0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['startTime'], value: state.timeRange?.start || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('start', v) }), (0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['endTime'], value: state.timeRange?.end || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('end', v) })] }))] })] })] }));
-    return (0, wrapper_1.wrapWithField)(component, domRef, {
+    return (0, form_1.wrapWithField)(component, domRef, {
         ...props,
         styles,
         labelProps: (0, react_2.mergeProps)(props.labelProps, labelProps),

package/cjs/components/{forms → fields}/DatePicker/DateRangeSeparatedPicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.39.1
+ * @cube-dev/ui-kit v0.41.0
  * Released under the MIT license.
  */
 
@@ -13,10 +13,9 @@ const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
 const provider_1 = require("../../../provider");
-const wrapper_1 = require("../wrapper");
 const tasty_1 = require("../../../tasty");
 const react_2 = require("../../../utils/react");
-const Form_1 = require("../Form");
+const form_1 = require("../../form");
 const Dialog_1 = require("../../overlays/Dialog");
 const Calendar_1 = require("../../other/Calendar/Calendar");
 const utils_1 = require("./utils");
@@ -37,8 +36,8 @@ const DateRangeDash = (0, tasty_1.tasty)({
 });
 function DateRangeSeparatedPicker(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
-    props = (0, Form_1.useFieldProps)(props, {
+    props = (0, form_1.useFormProps)(props);
+    props = (0, form_1.useFieldProps)(props, {
         defaultValidationTrigger: 'onBlur',
     });
     props = Object.assign({}, props_1.DEFAULT_DATE_PROPS, props);
@@ -120,7 +119,7 @@ function DateRangeSeparatedPicker(props, ref) {
     const component = ((0, jsx_runtime_1.jsxs)(DatePickerElement_1.DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, children: [(0, jsx_runtime_1.jsxs)(DatePickerElement_1.DatePickerElement, { ...startFocusRingProps.focusProps, mods: { focused: startFocusRingProps.isFocused }, children: [(0, jsx_runtime_1.jsx)(DateInputBase_1.DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: (0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: startState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: startState.setOpen, children: [(0, jsx_runtime_1.jsx)(DatePickerButton_1.DatePickerButton, { size: size, ...(0, react_2.mergeProps)(startProps.buttonProps, startFocusProps.focusProps), isDisabled: isDisabled }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...startProps.dialogProps, width: "max-content", children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, { ...startProps.calendarProps, defaultFocusedValue: state.value?.start || state.value?.end || undefined, selectedRange: state.value?.start && state.value?.end ? state.value : undefined, onChange: (value) => onChange(value, 'start') }), showTimeField && ((0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['time'], value: startState.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: startState.setTimeValue }))] })] })] }), (0, jsx_runtime_1.jsx)(DateRangeDash, {}), (0, jsx_runtime_1.jsxs)(DatePickerElement_1.DatePickerElement, { ...endFocusRingProps.focusProps, mods: { focused: endFocusRingProps.isFocused }, children: [(0, jsx_runtime_1.jsx)(DateInputBase_1.DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, radius: "left", border: "top left bottom", children: (0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: endState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: endState.setOpen, children: [(0, jsx_runtime_1.jsx)(DatePickerButton_1.DatePickerButton, { "aria-label": "Show calendar for the end date", size: size, ...(0, react_2.mergeProps)(endFocusProps.focusProps, endProps.buttonProps), isDisabled: isDisabled }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...endProps.dialogProps, width: "max-content", children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, { ...endProps.calendarProps, defaultFocusedValue: state.value?.end || state.value?.start || undefined, selectedRange: state.value?.start && state.value?.end ? state.value : undefined, onChange: (value) => {
                                             onChange(value, 'end');
                                         } }), showTimeField && ((0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['time'], value: endState.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: endState.setTimeValue }))] })] })] })] }));
-    return (0, wrapper_1.wrapWithField)(component, domRef, {
+    return (0, form_1.wrapWithField)(component, domRef, {
         ...props,
         styles,
         labelProps: (0, react_2.mergeProps)(props.labelProps, labelProps),