@cube-dev/ui-kit 0.27.2 → 0.29.0

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

@@ -1,16 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFocusableRef } from '@react-spectrum/utils';
-import { forwardRef, useContext, useRef } from 'react';
-import { useCheckbox, useCheckboxGroupItem } from '@react-aria/checkbox';
-import { useHover } from '@react-aria/interactions';
-import { useToggleState } from '@react-stately/toggle';
+import { forwardRef, useContext, useMemo, useRef } from 'react';
+import { useCheckbox, useCheckboxGroupItem, useHover } from 'react-aria';
+import { useToggleState } from 'react-stately';
 import { useProviderProps } from '../../../provider';
 import { BLOCK_STYLES, Element, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
@@ -18,16 +17,16 @@ import { mergeProps } from '../../../utils/react';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
 import { useFieldProps, useFormProps } from '../Form';
-import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
 import { Text } from '../../content/Text';
+import { wrapWithField } from '../wrapper';
 import { CheckboxGroup } from './CheckboxGroup';
 import { CheckboxGroupContext } from './context';
 function CheckOutlined() {
     return (_jsx("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.417 7.604l-.017.018-3.4-3.4 1.433-1.433 1.985 1.985L8.192 0l1.432 1.433-6.189 6.189-.018-.018z", fill: "currentColor" }) }));
 }
 function IndeterminateOutline() {
-    return (_jsx("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }) }));
+    return (_jsx("svg", { width: "8", height: "2", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }) }));
 }
 const CheckboxWrapperElement = tasty({
     as: 'label',
@@ -41,6 +40,7 @@ const CheckboxWrapperElement = tasty({
         flow: 'row',
         preset: 'default',
         cursor: 'pointer',
+        width: 'max max-content',
     },
 });
 const CheckboxElement = tasty({
@@ -92,13 +92,13 @@ function Checkbox(props, ref) {
         }),
         unsafe__isDisabled: !!groupState,
     });
-    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;
+    let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, children, label, validationState, labelProps, labelStyles, labelPosition, inputStyles, isHidden, ...otherProps } = props;
     let styles = extractStyles(props, OUTER_STYLES);
-    let inputStyles = extractStyles(props, BLOCK_STYLES);
-    labelStyles = {
-        ...(insideForm && !groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),
+    inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);
+    labelStyles = useMemo(() => ({
+        ...(insideForm ? LABEL_STYLES : INLINE_LABEL_STYLES),
         ...labelStyles,
-    };
+    }), [insideForm, labelStyles]);
     let { isFocused, focusProps } = useFocus({ isDisabled }, true);
     let { hoverProps, isHovered } = useHover({ isDisabled });
     let inputRef = useRef(null);
@@ -143,30 +143,15 @@ function Checkbox(props, ref) {
         'side-label': labelPosition === 'side',
         'inside-form': insideForm,
     };
-    const checkboxField = (_jsxs(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Checkbox', ...mergeProps(inputProps, focusProps), ref: inputRef }), _jsx(CheckboxElement, { qa: "Checkbox", mods: mods, styles: inputStyles, children: markIcon }), children && _jsx(Text, { children: children })] }));
+    const checkboxField = (_jsxs(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }), _jsx(CheckboxElement, { qa: qa || 'Checkbox', mods: mods, styles: inputStyles, children: markIcon }), children && _jsx(Text, { nowrap: true, children: children })] }));
     if (insideForm && !groupState) {
-        return (_jsx(FieldWrapper, { ...{
-                as: 'label',
-                labelPosition,
-                label,
-                extra,
-                styles,
-                isRequired,
-                labelStyles,
-                isHidden,
-                labelProps,
-                isDisabled,
-                validationState,
-                necessityLabel,
-                necessityIndicator,
-                message,
-                description,
-                requiredMark,
-                tooltip,
-                labelSuffix,
-                Component: checkboxField,
-                ref: domRef,
-            } }));
+        return wrapWithField(checkboxField, domRef, {
+            ...props,
+            children: null,
+            labelStyles,
+            inputStyles,
+            styles,
+        });
     }
     return (_jsxs(CheckboxWrapperElement, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [checkboxField, label ? (_jsx(Element, { styles: labelStyles, mods: {
                     invalid: validationState === 'invalid',

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

@@ -1,20 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * 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 { useCheckboxGroup } from 'react-aria';
+import { useCheckboxGroupState } from 'react-stately';
 import { useProviderProps } from '../../../provider';
 import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
-import { extractFieldWrapperProps, FieldWrapper } from '../FieldWrapper';
 import { castNullableArrayValue, } from '../../../utils/react/nullableValue';
 import { useFieldProps, FormContext, useFormProps } from '../Form';
+import { mergeProps } from '../../../utils/react';
+import { wrapWithField } from '../wrapper';
 import { CheckboxGroupContext } from './context';
 const CheckGroupElement = tasty({
     qa: 'CheckboxGroup',
@@ -43,10 +44,9 @@ function CheckboxGroup(props, ref) {
             onChange: onChange,
         }),
     });
-    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, validationState, children, orientation = 'vertical', message, description, labelStyles, tooltip, labelSuffix, inputStyles, ...otherProps } = props;
+    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, validationState, children, orientation = 'vertical', message, description, labelStyles, tooltip, labelProps: baseLabelProps, labelSuffix, inputStyles, ...otherProps } = props;
     let domRef = useDOMRef(ref);
     let styles = extractStyles(otherProps, CONTAINER_STYLES);
-    let { fieldWrapperProps } = extractFieldWrapperProps(props);
     let state = useCheckboxGroupState(props);
     let { groupProps, labelProps } = useCheckboxGroup(props, state);
     let radioGroup = (_jsx(CheckGroupElement, { styles: inputStyles, mods: {
@@ -55,7 +55,13 @@ function CheckboxGroup(props, ref) {
                 isDisabled,
                 validationState,
             }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }) }) }));
-    return (_jsx(FieldWrapper, { ...fieldWrapperProps, ref: domRef, Component: radioGroup, fieldProps: groupProps, labelProps: labelProps, styles: styles }));
+    return wrapWithField(radioGroup, domRef, {
+        ...props,
+        children: null,
+        fieldProps: groupProps,
+        labelProps: mergeProps(baseLabelProps, labelProps),
+        styles,
+    });
 }
 /**
  * Checkbox groups allow users to select a single option from a list of mutually exclusive options.

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

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

package/es/components/forms/DatePicker/DateInput.js

@@ -1,16 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
 import { createCalendar } from '@internationalized/date';
-import { useDateField } from '@react-aria/datepicker';
-import { useDateFieldState } from '@react-stately/datepicker';
-import { useLocale } from '@react-aria/i18n';
+import { useDateField, useLocale } from 'react-aria';
+import { useDateFieldState } from 'react-stately';
 import { useProviderProps } from '../../../provider';
 import { wrapWithField } from '../wrapper';
 import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';
@@ -38,10 +37,10 @@ function DateInput(props, ref) {
     let { locale } = useLocale();
     let state = useDateFieldState({
         ...props,
-        locale,
+        locale: useLocaleProp ? locale : 'en-US',
         createCalendar,
     });
-    if (!useLocaleProp) {
+    if (useLocaleProp == null) {
         state.segments = formatSegments(state.segments);
     }
     let fieldRef = useRef(null);

package/es/components/forms/DatePicker/DateInputBase.js

@@ -1,18 +1,19 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { mergeProps, mergeRefs } from '@react-aria/utils';
 import React, { cloneElement, useRef } from 'react';
-import { useFocusRing } from '@react-aria/focus';
+import { mergeRefs } from '@react-aria/utils';
+import { useFocusRing } from 'react-aria';
 import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../TextInput/TextInputBase';
 import { InvalidIcon } from '../../shared/InvalidIcon';
 import { ValidIcon } from '../../shared/ValidIcon';
+import { mergeProps } from '../../../utils/react';
 const DateInputWrapperElement = tasty({
     qa: 'DateInputWrapper',
     role: 'presentation',

package/es/components/forms/DatePicker/DatePicker.js

@@ -1,15 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
-import { useDatePicker } from '@react-aria/datepicker';
-import { useDatePickerState } from '@react-stately/datepicker';
-import { useFocusRing } from '@react-aria/focus';
+import { useDatePicker, useFocusRing } from 'react-aria';
+import { useDatePickerState } from 'react-stately';
 import { useProviderProps } from '../../../provider';
 import { wrapWithField } from '../wrapper';
 import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';
@@ -62,7 +61,6 @@ function DatePicker(props, ref) {
         ? state.granularity
         : null;
     let showTimeField = !!timeGranularity;
-    //
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
     const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [_jsx(DateInputBase, { disableFocusRing: true, radius: "left", border: "top left bottom", isDisabled: isDisabled, validationState: validationState, size: size, children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...fieldProps }) }), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: props.shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(Calendar, { ...calendarProps }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: state.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: state.setTimeValue }))] })] })] }));
     return wrapWithField(component, domRef, {

package/es/components/forms/DatePicker/DatePickerButton.js

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

package/es/components/forms/DatePicker/DatePickerElement.js

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

package/es/components/forms/DatePicker/DatePickerInput.js

@@ -1,17 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { createCalendar } from '@internationalized/date';
-import { useDateField } from '@react-aria/datepicker';
-import { useDateFieldState } from '@react-stately/datepicker';
-import { useLocale } from '@react-aria/i18n';
+import { useDateField, useFocusWithin, useLocale } from 'react-aria';
+import { useDateFieldState } from 'react-stately';
 import { tasty } from '../../../tasty';
+import { mergeProps } from '../../../utils/react';
 import { DatePickerSegment } from './DatePickerSegment';
 import { formatSegments } from './utils';
 const DateInputElement = tasty({
@@ -28,14 +28,24 @@ export function DatePickerInput(props) {
     let { locale } = useLocale();
     let state = useDateFieldState({
         ...props,
-        locale,
+        locale: useLocaleProp ? locale : 'en-US',
         createCalendar,
     });
-    if (!useLocaleProp) {
+    if (useLocaleProp == null) {
         state.segments = formatSegments(state.segments);
     }
+    const focusWithinProps = useFocusWithin({
+        onFocusWithinChange: (isFocused) => {
+            if (isFocused) {
+                props.onFocus?.();
+            }
+            else {
+                props.onBlur?.();
+            }
+        },
+    });
     let { fieldProps } = useDateField(props, state, ref);
-    return (_jsx(DateInputElement, { ref: ref, ...fieldProps, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
+    return (_jsx(DateInputElement, { ref: ref, ...mergeProps(fieldProps, focusWithinProps), children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
 }
 
         

package/es/components/forms/DatePicker/DatePickerSegment.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { useDateSegment } from '@react-aria/datepicker';
+import { useDateSegment } from 'react-aria';
 import { tasty } from '../../../tasty';
 const LiteralSegmentElement = tasty({
     qa: 'LiteralSegment',

package/es/components/forms/DatePicker/DateRangePicker.js

@@ -1,15 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
-import { useDateRangePicker } from '@react-aria/datepicker';
-import { useDateRangePickerState } from '@react-stately/datepicker';
-import { useFocusRing } from '@react-aria/focus';
+import { useDateRangePicker, useFocusRing } from 'react-aria';
+import { useDateRangePickerState } from 'react-stately';
 import { useProviderProps } from '../../../provider';
 import { wrapWithField } from '../wrapper';
 import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
@@ -71,7 +70,6 @@ function DateRangePicker(props, ref) {
         ? state.granularity
         : null;
     let showTimeField = !!timeGranularity;
-    //
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
     const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [_jsxs(DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: [_jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }), _jsx(DateRangeDash, {}), _jsx(DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps })] }), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(RangeCalendar, { ...calendarProps }), showTimeField && (_jsxs(Space, { children: [_jsx(TimeInput, { padding: "1x", label: 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) }), _jsx(TimeInput, { padding: "1x", label: 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 wrapWithField(component, domRef, {

package/es/components/forms/DatePicker/DateRangeSeparatedPicker.js

@@ -0,0 +1,130 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.29.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from 'react';
+import { useDatePicker, useDateRangePicker, useFocusRing } from 'react-aria';
+import { useDatePickerState, useDateRangePickerState } from 'react-stately';
+import { useProviderProps } from '../../../provider';
+import { wrapWithField } from '../wrapper';
+import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
+import { mergeProps } from '../../../utils/react';
+import { useFieldProps, useFormProps } from '../Form';
+import { Dialog, DialogTrigger } from '../../overlays/Dialog';
+import { Calendar } from '../../other/Calendar/Calendar';
+import { useFocusManagerRef } from './utils';
+import { DateInputBase } from './DateInputBase';
+import { DatePickerInput } from './DatePickerInput';
+import { TimeInput } from './TimeInput';
+import { DatePickerButton } from './DatePickerButton';
+import { DEFAULT_DATE_PROPS } from './props';
+import { dateMessages } from './intl';
+import { DatePickerElement } from './DatePickerElement';
+const DateRangeDash = tasty({
+    'aria-hidden': 'true',
+    'data-qa': 'DateRangeDash',
+    children: '––',
+    styles: {
+        padding: '0 .5x',
+    },
+});
+function DateRangeSeparatedPicker(props, ref) {
+    props = useProviderProps(props);
+    props = useFormProps(props);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onBlur',
+    });
+    props = Object.assign({}, DEFAULT_DATE_PROPS, props);
+    let styles = extractStyles(props, CONTAINER_STYLES);
+    let { size, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus, } = props;
+    let targetRef = useRef(null);
+    let state = useDateRangePickerState({
+        ...props,
+    });
+    let startState = useDatePickerState({
+        ...props,
+        onChange: null,
+        value: state.value?.start,
+    });
+    let endState = useDatePickerState({
+        ...props,
+        onChange: null,
+        value: state.value?.end,
+    });
+    let startFocusRingProps = useFocusRing({
+        within: true,
+        isTextInput: true,
+        autoFocus,
+    });
+    let startFocusProps = useFocusRing({
+        within: false,
+        isTextInput: false,
+        autoFocus,
+    });
+    let endFocusRingProps = useFocusRing({
+        within: true,
+        isTextInput: true,
+        autoFocus,
+    });
+    let endFocusProps = useFocusRing({
+        within: false,
+        isTextInput: false,
+        autoFocus,
+    });
+    let domRef = useFocusManagerRef(ref);
+    let { groupProps, labelProps, startFieldProps, endFieldProps } = useDateRangePicker(props, state, targetRef);
+    let startProps = useDatePicker(props, startState, targetRef);
+    let endProps = useDatePicker(props, endState, targetRef);
+    let placeholder = placeholderValue;
+    let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;
+    let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : undefined;
+    let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;
+    let timeGranularity = state.granularity === 'hour' ||
+        state.granularity === 'minute' ||
+        state.granularity === 'second'
+        ? state.granularity
+        : null;
+    let showTimeField = !!timeGranularity;
+    // let visibleMonths = useVisibleMonths(maxVisibleMonths);
+    function onChange(value, type) {
+        if (type === 'start') {
+            const newRange = { ...state.value, start: value };
+            if (newRange.start &&
+                newRange.end &&
+                newRange.end.compare(newRange.start) < 0) {
+                newRange.end = newRange.start;
+            }
+            state.setValue(newRange);
+            startProps.calendarProps.onChange(value);
+            startState.setOpen(false);
+        }
+        else {
+            const newRange = { ...state.value, end: value };
+            if (newRange.start &&
+                newRange.end &&
+                newRange.end.compare(newRange.start) < 0) {
+                newRange.start = newRange.end;
+            }
+            state.setValue(newRange);
+            endProps.calendarProps.onChange(value);
+            endState.setOpen(false);
+        }
+    }
+    const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, children: [_jsxs(DatePickerElement, { ...startFocusRingProps.focusProps, mods: { focused: startFocusRingProps.isFocused }, children: [_jsx(DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }) }), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: startState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: startState.setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(startProps.buttonProps, startFocusProps.focusProps), isDisabled: isDisabled }), _jsxs(Dialog, { ...startProps.dialogProps, width: "max-content", children: [_jsx(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 && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: startState.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: startState.setTimeValue }))] })] })] }), _jsx(DateRangeDash, {}), _jsxs(DatePickerElement, { ...endFocusRingProps.focusProps, mods: { focused: endFocusRingProps.isFocused }, children: [_jsx(DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, radius: "left", border: "top left bottom", children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps }) }), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: endState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: endState.setOpen, children: [_jsx(DatePickerButton, { "aria-label": "Show calendar for the end date", size: size, ...mergeProps(endFocusProps.focusProps, endProps.buttonProps), isDisabled: isDisabled }), _jsxs(Dialog, { ...endProps.dialogProps, width: "max-content", children: [_jsx(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 && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: endState.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: endState.setTimeValue }))] })] })] })] }));
+    return wrapWithField(component, domRef, {
+        ...props,
+        styles,
+        labelProps: mergeProps(props.labelProps, labelProps),
+        fieldProps: groupProps,
+    });
+}
+const _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker);
+export { _DateRangeSeparatedPicker as DateRangeSeparatedPicker };
+
+        

package/es/components/forms/DatePicker/TimeInput.js

@@ -1,15 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
-import { useLocale } from '@react-aria/i18n';
-import { useTimeField } from '@react-aria/datepicker';
-import { useTimeFieldState } from '@react-stately/datepicker';
+import { useTimeField } from 'react-aria';
+import { useTimeFieldState } from 'react-stately';
 import { wrapWithField } from '../wrapper';
 import { useProviderProps } from '../../../provider';
 import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';
@@ -28,10 +27,10 @@ function TimeInput(props, ref) {
     let styles = extractStyles(props, CONTAINER_STYLES);
     let { inputStyles, wrapperStyles, autoFocus, isDisabled, isReadOnly, isRequired, validationState, size = 'medium', } = props;
     let domRef = useFocusManagerRef(ref);
-    let { locale } = useLocale();
+    // let { locale } = useLocale();
     let state = useTimeFieldState({
         ...props,
-        locale,
+        locale: 'en-US',
     });
     let fieldRef = useRef(null);
     let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.29.0
  * Released under the MIT license.
  */
 
@@ -10,5 +10,6 @@ export * from './DateInput';
 export * from './DatePicker';
 export * from './DateRangePicker';
 export * from './parseDate';
+export * from './DateRangeSeparatedPicker';
 
         

package/es/components/forms/DatePicker/intl.js

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

package/es/components/forms/DatePicker/parseDate.js

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

package/es/components/forms/DatePicker/props.js

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