@cube-dev/ui-kit 0.22.8 → 0.23.0

package/es/components/content/Header.js

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

package/es/components/content/Paragraph.js

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

package/es/components/content/Placeholder/Placeholder.js

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

package/es/components/content/PrismCode/PrismCode.js

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

package/es/components/content/Result/Result.js

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

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

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

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

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

package/es/components/content/Text.js

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

package/es/components/content/Title.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.8
+ * @cube-dev/ui-kit v0.23.0
  * Released under the MIT license.
  */
 
@@ -19,7 +19,7 @@ const TitleElement = tasty({
         display: 'block',
         color: '#dark',
         preset: {
-            '': 'h6m',
+            '': 'h6',
             '[data-level="1"]': 'h1',
             '[data-level="2"]': 'h2',
             '[data-level="3"]': 'h3',

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

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.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 { useProviderProps } from '../../../provider';
+import { wrapWithField } from '../wrapper';
+import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';
+import { mergeProps } from '../../../utils/react';
+import { useFieldProps, useFormProps } from '../Form';
+import { useFocusManagerRef } from './utils';
+import { DateInputBase } from './DateInputBase';
+import { DatePickerSegment } from './DatePickerSegment';
+import { DEFAULT_DATE_PROPS } from './props';
+import { parseAbsoluteDate } from './parseDate';
+function DateInput(props, ref) {
+    props = useProviderProps(props);
+    props = useFormProps(props);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onBlur',
+        valuePropsMapper: ({ value, onChange }) => ({
+            value: typeof value === 'string' ? parseAbsoluteDate(value) : value,
+            onChange,
+        }),
+    });
+    props = Object.assign({}, DEFAULT_DATE_PROPS, props);
+    let { autoFocus, isDisabled, inputStyles, wrapperStyles, isReadOnly, isRequired, size = 'medium', } = props;
+    let styles = extractStyles(props, CONTAINER_STYLES, wrapperStyles);
+    let domRef = useFocusManagerRef(ref);
+    let { locale } = useLocale();
+    let state = useDateFieldState({
+        ...props,
+        locale,
+        createCalendar,
+    });
+    let fieldRef = useRef(null);
+    let { labelProps, fieldProps } = useDateField(props, state, fieldRef);
+    const component = (_jsx(DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, validationState: state.validationState, styles: wrapperStyles, inputStyles: inputStyles, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }, void 0));
+    return wrapWithField(component, domRef, {
+        ...props,
+        styles,
+        labelProps: mergeProps(props.labelProps, labelProps),
+    });
+}
+/**
+ * DateInputs allow users to enter and edit date and time values using a keyboard.
+ * Each part of a date value is displayed in an individually editable segment.
+ */
+const _DateInput = forwardRef(DateInput);
+export { _DateInput as DateInput };
+
+        

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

@@ -0,0 +1,55 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.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 { 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';
+const DateInputWrapperElement = tasty({
+    qa: 'DateInputWrapper',
+    role: 'presentation',
+    styles: {
+        ...INPUT_WRAPPER_STYLES,
+        display: 'flex',
+    },
+});
+const DateInputElement = tasty({
+    role: 'presentation',
+    styles: {
+        ...DEFAULT_INPUT_STYLES,
+        display: 'flex',
+        flow: 'row',
+        placeItems: 'center start',
+    },
+});
+function DateInputBase(props, ref) {
+    let inputRef = useRef(null);
+    let { isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, validationState, isLoading, size = 'medium', } = props;
+    let styles = extractStyles(props, CONTAINER_STYLES);
+    let { focusProps, isFocusVisible, isFocused } = useFocusRing({
+        isTextInput: true,
+        within: true,
+        autoFocus,
+    });
+    let isInvalid = validationState === 'invalid';
+    let validationIcon = isInvalid ? InvalidIcon : ValidIcon;
+    let validation = cloneElement(validationIcon);
+    return (_jsxs(DateInputWrapperElement, { styles: styles, "data-size": size, mods: {
+            disabled: isDisabled,
+            focused: isFocused,
+            invalid: isInvalid,
+            'focus-ring': isFocusVisible && !disableFocusRing,
+        }, ...mergeProps(fieldProps ?? {}, focusProps), style: style, children: [_jsx("div", { "data-element": "Contents", role: "presentation", children: _jsx(DateInputElement, { ref: mergeRefs(ref, inputRef), "data-size": size, role: "presentation", styles: inputStyles, children: children }, void 0) }, void 0), validationState && !isLoading ? validation : undefined] }, void 0));
+}
+const _DateInputBase = React.forwardRef(DateInputBase);
+export { _DateInputBase as DateInputBase };
+
+        

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

@@ -0,0 +1,67 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.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 { useProviderProps } from '../../../provider';
+import { wrapWithField } from '../wrapper';
+import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';
+import { mergeProps } from '../../../utils/react';
+import { useFieldProps, useFormProps } from '../Form';
+import { Space } from '../../layout/Space';
+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';
+function DatePicker(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, shouldFlip, placeholderValue, isDisabled, validationState } = props;
+    let targetRef = useRef(null);
+    let state = useDatePickerState({
+        ...props,
+        shouldCloseOnSelect: () => !state.hasTime,
+    });
+    let { isOpen, setOpen } = state;
+    let domRef = useFocusManagerRef(ref);
+    let { groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps, } = useDatePicker(props, state, 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);
+    const component = (_jsxs(Space, { gap: "0", styles: props.wrapperStyles, children: [_jsx(DateInputBase, { disableFocusRing: true, radius: "left", border: "top left bottom", isDisabled: isDisabled, validationState: validationState, size: size, children: _jsx(DatePickerInput, { ...fieldProps }, void 0) }, void 0), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom left", targetRef: targetRef, isOpen: isOpen, offset: 8, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...buttonProps, isDisabled: isDisabled }, void 0), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(Calendar, { ...calendarProps }, void 0), 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 }, void 0))] }, void 0)] }, void 0)] }, void 0));
+    return wrapWithField(component, domRef, {
+        ...props,
+        styles,
+        labelProps: mergeProps(props.labelProps, labelProps),
+        fieldProps: groupProps,
+    });
+}
+const _DatePicker = forwardRef(DatePicker);
+export { _DatePicker as DatePicker };
+
+        

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

@@ -0,0 +1,21 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CalendarOutlined } from '@ant-design/icons';
+import { tasty } from '../../../tasty';
+import { Button } from '../../actions';
+export const DatePickerButton = tasty(Button, {
+    icon: _jsx(CalendarOutlined, {}, void 0),
+    styles: {
+        radius: '1r right',
+        border: 'top right bottom',
+        backgroundClip: 'content-box',
+    },
+});
+
+        

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

@@ -0,0 +1,37 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.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 { tasty } from '../../../tasty';
+import { DatePickerSegment } from './DatePickerSegment';
+const DateInputElement = tasty({
+    role: 'presentation',
+    styles: {
+        display: 'flex',
+        flow: 'row',
+        placeItems: 'center start',
+    },
+});
+export function DatePickerInput(props) {
+    let { isDisabled, isReadOnly, isRequired } = props;
+    let ref = useRef(null);
+    let { locale } = useLocale();
+    let state = useDateFieldState({
+        ...props,
+        locale,
+        createCalendar,
+    });
+    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))) }, void 0));
+}
+
+        

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

@@ -0,0 +1,66 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.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 { tasty } from '../../../tasty';
+const LiteralSegmentElement = tasty({
+    qa: 'LiteralSegment',
+    as: 'span',
+    'aria-hidden': 'true',
+    styles: {},
+});
+const EditableSegmentElement = tasty({
+    qa: 'EditableSegment',
+    styles: {
+        padding: '0 1bw',
+        fontVariantNumeric: 'tabular-nums lining-nums',
+        textAlign: 'right',
+        font: 'monospace',
+        color: {
+            '': 'inherit',
+            ':focus': '#white',
+        },
+        fill: {
+            '': '#clear',
+            ':focus': '#purple',
+        },
+        radius: '.5r',
+        Placeholder: {
+            opacity: '#disabled-opacity',
+        },
+    },
+});
+export function DatePickerSegment({ segment, state, ...otherProps }) {
+    switch (segment.type) {
+        // A separator, e.g. punctuation
+        case 'literal':
+            return _jsx(LiteralSegment, { segment: segment }, void 0);
+        // Editable segment
+        default:
+            return (_jsx(EditableSegment, { segment: segment, state: state, ...otherProps }, void 0));
+    }
+}
+function LiteralSegment({ segment }) {
+    return (_jsx(LiteralSegmentElement, { "data-type": segment.type === 'literal' ? undefined : segment.type, children: segment.text }, void 0));
+}
+function EditableSegment({ segment, state }) {
+    let ref = useRef(null);
+    let { segmentProps } = useDateSegment(segment, state, ref);
+    return (_jsx(EditableSegmentElement, { ...segmentProps, ref: ref, mods: {
+            placeholder: segment.isPlaceholder,
+            'read-only': !segment.isEditable,
+        }, style: {
+            ...segmentProps.style,
+            minWidth: segment.maxValue != null
+                ? `calc(${String(segment.maxValue).length + 'ch'})`
+                : undefined,
+        }, "data-testid": segment.type, children: segment.isPlaceholder ? (_jsx("span", { "data-element": "Placeholder", "aria-hidden": "true", children: segment.placeholder }, void 0)) : (segment.text) }, void 0));
+}
+
+        

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

@@ -0,0 +1,75 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.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 { 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 { Space } from '../../layout/Space';
+import { Dialog, DialogTrigger } from '../../overlays/Dialog';
+import { RangeCalendar } from '../../other/Calendar/RangeCalendar';
+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';
+const DateRangeDash = tasty({
+    'aria-hidden': 'true',
+    'data-qa': 'DateRangeDash',
+    children: '–',
+    styles: {
+        padding: '0 .5x',
+    },
+});
+function DateRangePicker(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, shouldFlip, placeholderValue, isDisabled, validationState } = props;
+    let targetRef = useRef(null);
+    let state = useDateRangePickerState({
+        ...props,
+        shouldCloseOnSelect: () => !state.hasTime,
+    });
+    let { isOpen, setOpen } = state;
+    let domRef = useFocusManagerRef(ref);
+    let { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps, calendarProps, } = useDateRangePicker(props, state, 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);
+    const component = (_jsxs(Space, { gap: "0", styles: props.wrapperStyles, children: [_jsxs(DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: [_jsx(DatePickerInput, { ...startFieldProps }, void 0), _jsx(DateRangeDash, {}, void 0), _jsx(DatePickerInput, { ...endFieldProps }, void 0)] }, void 0), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom left", targetRef: targetRef, isOpen: isOpen, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...buttonProps, isDisabled: isDisabled }, void 0), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(RangeCalendar, { ...calendarProps }, void 0), 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) }, void 0), _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) }, void 0)] }, void 0))] }, void 0)] }, void 0)] }, void 0));
+    return wrapWithField(component, domRef, {
+        ...props,
+        styles,
+        labelProps: mergeProps(props.labelProps, labelProps),
+        fieldProps: groupProps,
+    });
+}
+const _DateRangePicker = forwardRef(DateRangePicker);
+export { _DateRangePicker as DateRangePicker };
+
+        

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

@@ -0,0 +1,52 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.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 { wrapWithField } from '../wrapper';
+import { useProviderProps } from '../../../provider';
+import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';
+import { useFieldProps, useFormProps } from '../Form';
+import { DateInputBase } from './DateInputBase';
+import { DatePickerSegment } from './DatePickerSegment';
+import { useFocusManagerRef } from './utils';
+import { DEFAULT_TIME_PROPS } from './props';
+function TimeInput(props, ref) {
+    props = useProviderProps(props);
+    props = useFormProps(props);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onBlur',
+    });
+    props = Object.assign({}, DEFAULT_TIME_PROPS, props);
+    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 state = useTimeFieldState({
+        ...props,
+        locale,
+    });
+    let fieldRef = useRef(null);
+    let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);
+    const timeInput = (_jsx(DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, inputStyles: inputStyles, styles: wrapperStyles, validationState: validationState, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }, void 0));
+    return wrapWithField(timeInput, domRef, {
+        ...props,
+        styles,
+        labelProps,
+    });
+}
+/**
+ * TimeFields allow users to enter and edit time values using a keyboard.
+ * Each part of the time is displayed in an individually editable segment.
+ */
+const _TimeInput = forwardRef(TimeInput);
+export { _TimeInput as TimeInput };
+
+        

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

@@ -0,0 +1,14 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.0
+ * Released under the MIT license.
+ */
+
+export * from './TimeInput';
+export * from './DateInput';
+export * from './DatePicker';
+export * from './DateRangePicker';
+export * from './parseDate';
+
+        

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

@@ -0,0 +1,14 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.0
+ * Released under the MIT license.
+ */
+
+export const dateMessages = {
+    time: 'Time',
+    startTime: 'Start time',
+    endTime: 'End time',
+};
+
+        

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

@@ -0,0 +1,30 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.0
+ * Released under the MIT license.
+ */
+
+import { parseAbsolute } from '@internationalized/date';
+export function parseAbsoluteDate(val) {
+    if (!val || (typeof val === 'string' && val.trim() === '')) {
+        return undefined;
+    }
+    if (val instanceof Date) {
+        return parseAbsolute(val.toISOString(), 'UTC');
+    }
+    try {
+        parseAbsolute(val, 'UTC');
+    }
+    catch (e) {
+        if (!Number.isNaN(Date.parse(val))) {
+            return parseAbsolute(new Date(val).toISOString(), 'UTC');
+        }
+        else {
+            console.error('Invalid date format', val);
+            return undefined;
+        }
+    }
+}
+
+        

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

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.23.0
+ * Released under the MIT license.
+ */
+
+export const DEFAULT_DATE_PROPS = {
+    granularity: 'day',
+    hideTimeZone: true,
+    hourCycle: 24,
+    shouldForceLeadingZeros: true,
+};
+export const DEFAULT_TIME_PROPS = {
+    hideTimeZone: true,
+    hourCycle: 24,
+    shouldForceLeadingZeros: true,
+};
+
+