@tecsinapse/cortex-react 1.9.16 → 1.9.17

package/dist/cjs/components/DatePicker/DateField.js

@@ -6,7 +6,11 @@ var reactAria = require('react-aria');
 var reactStately = require('react-stately');
 var DateSegment = require('./DateSegment.js');
 
-const DateField = ({ onClick, ...props }) => {
+const DateField = ({
+  onClickDate,
+  onClickTime,
+  ...props
+}) => {
   const { locale } = reactAria.useLocale();
   const state = reactStately.useDateFieldState({
     ...props,
@@ -19,16 +23,29 @@ const DateField = ({ onClick, ...props }) => {
     state,
     ref
   );
+  const handleOnClickSegment = React.useCallback((segment) => {
+    if (!segment.isEditable || state.isDisabled) return;
+    if (["hour", "minute", "second"].includes(segment.type)) onClickTime?.();
+    if (["year", "month", "day"].includes(segment.type)) onClickDate?.();
+  }, []);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...fieldProps,
       ref,
       className: "flex flex-row",
-      onClick,
       "data-testid": "date-field-div"
     },
-    state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(DateSegment.DateSegment, { key: i, segment, state }))
+    state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: i,
+        onClick: () => {
+          handleOnClickSegment(segment);
+        }
+      },
+      /* @__PURE__ */ React.createElement(DateSegment.DateSegment, { segment, state })
+    ))
   );
 };
 

package/dist/cjs/components/DatePicker/DatePickerInput.js

@@ -18,11 +18,22 @@ var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
 
 const DatePickerInputWithPopover = (props) => {
-  const { onChange, value, label, variants, disabled } = props;
-  const { fieldProps, state, ref } = useDatePickerInput.useDatePickerInput({ value, onChange });
+  const {
+    onChange,
+    value,
+    label,
+    variants,
+    disabled,
+    hourCycle = 24,
+    granularity = "day"
+  } = props;
+  const { fieldProps, state, ref } = useDatePickerInput.useDatePickerInput({
+    value,
+    onChange
+  });
   const { handleTogglePopover, handleChangeCalendar, handleCloseCalendar } = useDatePickerInputCommon.useDatePickerInputCommon({
     onChangeCalendar: (value2) => {
-      state.setDateValue(date.dateToCalendarDate(value2));
+      state.setValue(date.dateToCalendarDateTime(value2));
     }
   });
   return /* @__PURE__ */ React.createElement("div", { ref, "data-testid": "date-picker-input" }, /* @__PURE__ */ React.createElement(index.Popover.Trigger, { disabled: true }, /* @__PURE__ */ React.createElement(
@@ -47,7 +58,9 @@ const DatePickerInputWithPopover = (props) => {
           handleCloseCalendar();
         },
         isDisabled: disabled,
-        onClick: handleTogglePopover
+        onClickDate: handleTogglePopover,
+        hourCycle,
+        granularity
       }
     )
   )), /* @__PURE__ */ React.createElement(

package/dist/cjs/components/DatePicker/DatePickerInputBase.js

@@ -33,7 +33,8 @@ const DatePickerInputBase = ({
     {
       onClick: onClean,
       disabled,
-      "data-testid": "date-picker-input-base-clean-button"
+      "data-testid": "date-picker-input-base-clean-button",
+      type: "button"
     },
     /* @__PURE__ */ React.createElement(
       io.IoMdClose,
@@ -47,7 +48,8 @@ const DatePickerInputBase = ({
     {
       onClick: onToggle,
       disabled,
-      "data-testid": "date-picker-input-base-calendar-button"
+      "data-testid": "date-picker-input-base-calendar-button",
+      type: "button"
     },
     /* @__PURE__ */ React.createElement(
       lia.LiaCalendar,

package/dist/cjs/components/DatePicker/DateRangePickerInput.js

@@ -18,13 +18,21 @@ var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
 
 const DateRangePickerInputWithPopover = (props) => {
-  const { onChange, value, label, variants, disabled = false } = props;
+  const {
+    onChange,
+    value,
+    label,
+    variants,
+    disabled = false,
+    hourCycle = 24,
+    granularity = "day"
+  } = props;
   const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput.useDateRangePickerInput({ value, onChange });
   const { handleTogglePopover, handleChangeCalendar, handleCloseCalendar } = useDatePickerInputCommon.useDatePickerInputCommon({
     onChangeRangeCalendar: (value2) => {
       state.setDateRange({
-        start: date.dateToCalendarDate(value2?.start),
-        end: date.dateToCalendarDate(value2?.end)
+        start: date.dateToCalendarDateTime(value2?.start),
+        end: date.dateToCalendarDateTime(value2?.end)
       });
     }
   });
@@ -50,7 +58,9 @@ const DateRangePickerInputWithPopover = (props) => {
           handleCloseCalendar();
         },
         isDisabled: disabled,
-        onClick: handleTogglePopover
+        onClickDate: handleTogglePopover,
+        hourCycle,
+        granularity
       }
     ), /* @__PURE__ */ React.createElement("span", null, "-"), /* @__PURE__ */ React.createElement(
       DateField.DateField,
@@ -61,7 +71,9 @@ const DateRangePickerInputWithPopover = (props) => {
           handleCloseCalendar();
         },
         isDisabled: disabled,
-        onClick: handleTogglePopover
+        onClickDate: handleTogglePopover,
+        hourCycle,
+        granularity
       }
     ))
   )), /* @__PURE__ */ React.createElement(

package/dist/cjs/components/TimeField/TimeField.js

@@ -1,11 +1,23 @@
 'use strict';
 
 var React = require('react');
-var useTimeField = require('../../hooks/useTimeField.js');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
 var DateSegment = require('../DatePicker/DateSegment.js');
 
-const TimeField = (props) => {
-  const { fieldProps, ref, state } = useTimeField.useTimeField(props);
+const TimeField = ({ disabled, ...props }) => {
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useTimeFieldState({
+    ...props,
+    locale,
+    isDisabled: disabled
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = reactAria.useTimeField(
+    { "aria-label": "time-field" },
+    state,
+    ref
+  );
   return /* @__PURE__ */ React.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(DateSegment.DateSegment, { key: i, segment, state })));
 };
 

package/dist/cjs/components/TimeField/TimeFieldInput.js

@@ -2,11 +2,20 @@
 
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
+var date = require('../../utils/date.js');
 var index = require('../Input/index.js');
 var TimeField = require('./TimeField.js');
 
 const TimeFieldInput = (props) => {
-  const { onChange, value, label, variants } = props;
+  const {
+    onChange,
+    value,
+    label,
+    variants,
+    hourCycle = 24,
+    granularity = "minute",
+    disabled = false
+  } = props;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     index.Input.Face,
     {
@@ -15,7 +24,18 @@ const TimeFieldInput = (props) => {
       "data-testid": "time-field-input"
     },
     /* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label),
-    /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label) }, /* @__PURE__ */ React.createElement(TimeField.TimeField, { onChange, value }))
+    /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label) }, /* @__PURE__ */ React.createElement(
+      TimeField.TimeField,
+      {
+        onChange: (value2) => {
+          onChange(date.timeFromTimeValue(value2));
+        },
+        value,
+        hourCycle,
+        granularity,
+        isDisabled: disabled
+      }
+    ))
   ));
 };
 

package/dist/cjs/hooks/useCalendar.js

@@ -11,7 +11,7 @@ const useCalendar = ({ value, onChange }) => {
   const state = reactStately.useCalendarState({
     locale,
     createCalendar: date.createCalendar,
-    defaultValue: value ? date$1.dateToCalendarDate(value) : null,
+    defaultValue: value ? date$1.dateToCalendarDateTime(value) : null,
     onChange: (value2) => onChange(date$1.calendarDateToDate(value2))
   });
   const { calendarProps, title } = reactAria.useCalendar({}, state);

package/dist/cjs/hooks/useDatePickerInput.js

@@ -10,7 +10,7 @@ const useDatePickerInput = ({
   onChange
 }) => {
   const state = reactStately.useDatePickerState({
-    defaultValue: value ? date.dateToCalendarDate(value) : null,
+    defaultValue: value ? date.dateToCalendarDateTime(value) : null,
     onChange: (value2) => {
       onChange(date.calendarDateToDate(value2));
     }

package/dist/cjs/hooks/useDateRangePickerInput.js

@@ -11,8 +11,8 @@ const useDateRangePickerInput = ({
 }) => {
   const state = reactStately.useDateRangePickerState({
     defaultValue: value ? {
-      start: date.dateToCalendarDate(value?.start),
-      end: date.dateToCalendarDate(value?.end)
+      start: date.dateToCalendarDateTime(value?.start),
+      end: date.dateToCalendarDateTime(value?.end)
     } : null,
     onChange: (value2) => {
       onChange({

package/dist/cjs/hooks/useRangeCalendar.js

@@ -15,8 +15,8 @@ const useRangeCalendar = ({
     locale,
     createCalendar: date.createCalendar,
     defaultValue: {
-      start: date$1.dateToCalendarDate(value?.start),
-      end: date$1.dateToCalendarDate(value?.end)
+      start: date$1.dateToCalendarDateTime(value?.start),
+      end: date$1.dateToCalendarDateTime(value?.end)
     },
     onChange: (value2) => onChange({
       start: date$1.calendarDateToDate(value2.start),

package/dist/cjs/utils/date.js

@@ -2,17 +2,25 @@
 
 var date = require('@internationalized/date');
 
-const dateToCalendarDate = (value) => {
-  return new date.CalendarDate(
+const dateToCalendarDateTime = (value) => {
+  return new date.CalendarDateTime(
     value?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear(),
     value?.getMonth() !== void 0 ? value.getMonth() + 1 : (/* @__PURE__ */ new Date()).getMonth() + 1,
-    value?.getDate() ?? (/* @__PURE__ */ new Date()).getDate()
+    value?.getDate() ?? (/* @__PURE__ */ new Date()).getDate(),
+    value?.getHours() ?? (/* @__PURE__ */ new Date()).getHours(),
+    value?.getMinutes() ?? (/* @__PURE__ */ new Date()).getMinutes(),
+    value?.getSeconds() ?? (/* @__PURE__ */ new Date()).getSeconds()
   );
 };
 const calendarDateToDate = (value) => {
   if (!value) return void 0;
   return value.toDate(date.getLocalTimeZone());
 };
+const timeFromTimeValue = (value) => {
+  if (!value) return void 0;
+  return new date.Time(value.hour, value.minute, value.second, value.millisecond);
+};
 
 exports.calendarDateToDate = calendarDateToDate;
-exports.dateToCalendarDate = dateToCalendarDate;
+exports.dateToCalendarDateTime = dateToCalendarDateTime;
+exports.timeFromTimeValue = timeFromTimeValue;

package/dist/esm/components/DatePicker/DateField.js

@@ -1,10 +1,14 @@
 import { createCalendar } from '@internationalized/date';
-import React__default from 'react';
+import React__default, { useCallback } from 'react';
 import { useLocale, useDateField } from 'react-aria';
 import { useDateFieldState } from 'react-stately';
 import { DateSegment } from './DateSegment.js';
 
-const DateField = ({ onClick, ...props }) => {
+const DateField = ({
+  onClickDate,
+  onClickTime,
+  ...props
+}) => {
   const { locale } = useLocale();
   const state = useDateFieldState({
     ...props,
@@ -17,16 +21,29 @@ const DateField = ({ onClick, ...props }) => {
     state,
     ref
   );
+  const handleOnClickSegment = useCallback((segment) => {
+    if (!segment.isEditable || state.isDisabled) return;
+    if (["hour", "minute", "second"].includes(segment.type)) onClickTime?.();
+    if (["year", "month", "day"].includes(segment.type)) onClickDate?.();
+  }, []);
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
       ...fieldProps,
       ref,
       className: "flex flex-row",
-      onClick,
       "data-testid": "date-field-div"
     },
-    state.segments.map((segment, i) => /* @__PURE__ */ React__default.createElement(DateSegment, { key: i, segment, state }))
+    state.segments.map((segment, i) => /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        key: i,
+        onClick: () => {
+          handleOnClickSegment(segment);
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(DateSegment, { segment, state })
+    ))
   );
 };
 

package/dist/esm/components/DatePicker/DatePickerInput.js

@@ -2,7 +2,7 @@ import React__default from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
-import { dateToCalendarDate } from '../../utils/date.js';
+import { dateToCalendarDateTime } from '../../utils/date.js';
 import { useDatePickerInput } from '../../hooks/useDatePickerInput.js';
 import { useDatePickerInputCommon } from '../../hooks/useDatePickerInputCommon.js';
 import 'react-dropzone';
@@ -16,11 +16,22 @@ import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';
 
 const DatePickerInputWithPopover = (props) => {
-  const { onChange, value, label, variants, disabled } = props;
-  const { fieldProps, state, ref } = useDatePickerInput({ value, onChange });
+  const {
+    onChange,
+    value,
+    label,
+    variants,
+    disabled,
+    hourCycle = 24,
+    granularity = "day"
+  } = props;
+  const { fieldProps, state, ref } = useDatePickerInput({
+    value,
+    onChange
+  });
   const { handleTogglePopover, handleChangeCalendar, handleCloseCalendar } = useDatePickerInputCommon({
     onChangeCalendar: (value2) => {
-      state.setDateValue(dateToCalendarDate(value2));
+      state.setValue(dateToCalendarDateTime(value2));
     }
   });
   return /* @__PURE__ */ React__default.createElement("div", { ref, "data-testid": "date-picker-input" }, /* @__PURE__ */ React__default.createElement(Popover.Trigger, { disabled: true }, /* @__PURE__ */ React__default.createElement(
@@ -45,7 +56,9 @@ const DatePickerInputWithPopover = (props) => {
           handleCloseCalendar();
         },
         isDisabled: disabled,
-        onClick: handleTogglePopover
+        onClickDate: handleTogglePopover,
+        hourCycle,
+        granularity
       }
     )
   )), /* @__PURE__ */ React__default.createElement(

package/dist/esm/components/DatePicker/DatePickerInputBase.js

@@ -31,7 +31,8 @@ const DatePickerInputBase = ({
     {
       onClick: onClean,
       disabled,
-      "data-testid": "date-picker-input-base-clean-button"
+      "data-testid": "date-picker-input-base-clean-button",
+      type: "button"
     },
     /* @__PURE__ */ React__default.createElement(
       IoMdClose,
@@ -45,7 +46,8 @@ const DatePickerInputBase = ({
     {
       onClick: onToggle,
       disabled,
-      "data-testid": "date-picker-input-base-calendar-button"
+      "data-testid": "date-picker-input-base-calendar-button",
+      type: "button"
     },
     /* @__PURE__ */ React__default.createElement(
       LiaCalendar,

package/dist/esm/components/DatePicker/DateRangePickerInput.js

@@ -2,7 +2,7 @@ import React__default from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
-import { dateToCalendarDate } from '../../utils/date.js';
+import { dateToCalendarDateTime } from '../../utils/date.js';
 import { useDatePickerInputCommon } from '../../hooks/useDatePickerInputCommon.js';
 import { useDateRangePickerInput } from '../../hooks/useDateRangePickerInput.js';
 import 'react-dropzone';
@@ -16,13 +16,21 @@ import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';
 
 const DateRangePickerInputWithPopover = (props) => {
-  const { onChange, value, label, variants, disabled = false } = props;
+  const {
+    onChange,
+    value,
+    label,
+    variants,
+    disabled = false,
+    hourCycle = 24,
+    granularity = "day"
+  } = props;
   const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput({ value, onChange });
   const { handleTogglePopover, handleChangeCalendar, handleCloseCalendar } = useDatePickerInputCommon({
     onChangeRangeCalendar: (value2) => {
       state.setDateRange({
-        start: dateToCalendarDate(value2?.start),
-        end: dateToCalendarDate(value2?.end)
+        start: dateToCalendarDateTime(value2?.start),
+        end: dateToCalendarDateTime(value2?.end)
       });
     }
   });
@@ -48,7 +56,9 @@ const DateRangePickerInputWithPopover = (props) => {
           handleCloseCalendar();
         },
         isDisabled: disabled,
-        onClick: handleTogglePopover
+        onClickDate: handleTogglePopover,
+        hourCycle,
+        granularity
       }
     ), /* @__PURE__ */ React__default.createElement("span", null, "-"), /* @__PURE__ */ React__default.createElement(
       DateField,
@@ -59,7 +69,9 @@ const DateRangePickerInputWithPopover = (props) => {
           handleCloseCalendar();
         },
         isDisabled: disabled,
-        onClick: handleTogglePopover
+        onClickDate: handleTogglePopover,
+        hourCycle,
+        granularity
       }
     ))
   )), /* @__PURE__ */ React__default.createElement(

package/dist/esm/components/TimeField/TimeField.js

@@ -1,9 +1,21 @@
 import React__default from 'react';
-import { useTimeField } from '../../hooks/useTimeField.js';
+import { useLocale, useTimeField } from 'react-aria';
+import { useTimeFieldState } from 'react-stately';
 import { DateSegment } from '../DatePicker/DateSegment.js';
 
-const TimeField = (props) => {
-  const { fieldProps, ref, state } = useTimeField(props);
+const TimeField = ({ disabled, ...props }) => {
+  const { locale } = useLocale();
+  const state = useTimeFieldState({
+    ...props,
+    locale,
+    isDisabled: disabled
+  });
+  const ref = React__default.useRef(null);
+  const { fieldProps } = useTimeField(
+    { "aria-label": "time-field" },
+    state,
+    ref
+  );
   return /* @__PURE__ */ React__default.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React__default.createElement(DateSegment, { key: i, segment, state })));
 };
 

package/dist/esm/components/TimeField/TimeFieldInput.js

@@ -1,10 +1,19 @@
 import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
 import React__default from 'react';
+import { timeFromTimeValue } from '../../utils/date.js';
 import { Input } from '../Input/index.js';
 import { TimeField } from './TimeField.js';
 
 const TimeFieldInput = (props) => {
-  const { onChange, value, label, variants } = props;
+  const {
+    onChange,
+    value,
+    label,
+    variants,
+    hourCycle = 24,
+    granularity = "minute",
+    disabled = false
+  } = props;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     Input.Face,
     {
@@ -13,7 +22,18 @@ const TimeFieldInput = (props) => {
       "data-testid": "time-field-input"
     },
     /* @__PURE__ */ React__default.createElement("span", { className: labelStyle({}) }, label),
-    /* @__PURE__ */ React__default.createElement("div", { className: inputBox("", label) }, /* @__PURE__ */ React__default.createElement(TimeField, { onChange, value }))
+    /* @__PURE__ */ React__default.createElement("div", { className: inputBox("", label) }, /* @__PURE__ */ React__default.createElement(
+      TimeField,
+      {
+        onChange: (value2) => {
+          onChange(timeFromTimeValue(value2));
+        },
+        value,
+        hourCycle,
+        granularity,
+        isDisabled: disabled
+      }
+    ))
   ));
 };
 

package/dist/esm/hooks/useCalendar.js

@@ -1,7 +1,7 @@
 import { createCalendar } from '@internationalized/date';
 import { useLocale, useCalendar as useCalendar$1 } from 'react-aria';
 import { useCalendarState } from 'react-stately';
-import { dateToCalendarDate, calendarDateToDate } from '../utils/date.js';
+import { dateToCalendarDateTime, calendarDateToDate } from '../utils/date.js';
 import 'react';
 
 const useCalendar = ({ value, onChange }) => {
@@ -9,7 +9,7 @@ const useCalendar = ({ value, onChange }) => {
   const state = useCalendarState({
     locale,
     createCalendar,
-    defaultValue: value ? dateToCalendarDate(value) : null,
+    defaultValue: value ? dateToCalendarDateTime(value) : null,
     onChange: (value2) => onChange(calendarDateToDate(value2))
   });
   const { calendarProps, title } = useCalendar$1({}, state);

package/dist/esm/hooks/useDatePickerInput.js

@@ -1,14 +1,14 @@
 import { useRef } from 'react';
 import { useDatePicker } from 'react-aria';
 import { useDatePickerState } from 'react-stately';
-import { dateToCalendarDate, calendarDateToDate } from '../utils/date.js';
+import { dateToCalendarDateTime, calendarDateToDate } from '../utils/date.js';
 
 const useDatePickerInput = ({
   value,
   onChange
 }) => {
   const state = useDatePickerState({
-    defaultValue: value ? dateToCalendarDate(value) : null,
+    defaultValue: value ? dateToCalendarDateTime(value) : null,
     onChange: (value2) => {
       onChange(calendarDateToDate(value2));
     }

package/dist/esm/hooks/useDateRangePickerInput.js

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { useDateRangePicker } from 'react-aria';
 import { useDateRangePickerState } from 'react-stately';
-import { dateToCalendarDate, calendarDateToDate } from '../utils/date.js';
+import { dateToCalendarDateTime, calendarDateToDate } from '../utils/date.js';
 
 const useDateRangePickerInput = ({
   value,
@@ -9,8 +9,8 @@ const useDateRangePickerInput = ({
 }) => {
   const state = useDateRangePickerState({
     defaultValue: value ? {
-      start: dateToCalendarDate(value?.start),
-      end: dateToCalendarDate(value?.end)
+      start: dateToCalendarDateTime(value?.start),
+      end: dateToCalendarDateTime(value?.end)
     } : null,
     onChange: (value2) => {
       onChange({

package/dist/esm/hooks/useRangeCalendar.js

@@ -2,7 +2,7 @@ import { createCalendar } from '@internationalized/date';
 import { useRef } from 'react';
 import { useLocale, useRangeCalendar as useRangeCalendar$1 } from 'react-aria';
 import { useRangeCalendarState } from 'react-stately';
-import { dateToCalendarDate, calendarDateToDate } from '../utils/date.js';
+import { dateToCalendarDateTime, calendarDateToDate } from '../utils/date.js';
 
 const useRangeCalendar = ({
   value,
@@ -13,8 +13,8 @@ const useRangeCalendar = ({
     locale,
     createCalendar,
     defaultValue: {
-      start: dateToCalendarDate(value?.start),
-      end: dateToCalendarDate(value?.end)
+      start: dateToCalendarDateTime(value?.start),
+      end: dateToCalendarDateTime(value?.end)
     },
     onChange: (value2) => onChange({
       start: calendarDateToDate(value2.start),

package/dist/esm/utils/date.js

@@ -1,15 +1,22 @@
-import { CalendarDate, getLocalTimeZone } from '@internationalized/date';
+import { CalendarDateTime, getLocalTimeZone, Time } from '@internationalized/date';
 
-const dateToCalendarDate = (value) => {
-  return new CalendarDate(
+const dateToCalendarDateTime = (value) => {
+  return new CalendarDateTime(
     value?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear(),
     value?.getMonth() !== void 0 ? value.getMonth() + 1 : (/* @__PURE__ */ new Date()).getMonth() + 1,
-    value?.getDate() ?? (/* @__PURE__ */ new Date()).getDate()
+    value?.getDate() ?? (/* @__PURE__ */ new Date()).getDate(),
+    value?.getHours() ?? (/* @__PURE__ */ new Date()).getHours(),
+    value?.getMinutes() ?? (/* @__PURE__ */ new Date()).getMinutes(),
+    value?.getSeconds() ?? (/* @__PURE__ */ new Date()).getSeconds()
   );
 };
 const calendarDateToDate = (value) => {
   if (!value) return void 0;
   return value.toDate(getLocalTimeZone());
 };
+const timeFromTimeValue = (value) => {
+  if (!value) return void 0;
+  return new Time(value.hour, value.minute, value.second, value.millisecond);
+};
 
-export { calendarDateToDate, dateToCalendarDate };
+export { calendarDateToDate, dateToCalendarDateTime, timeFromTimeValue };

package/dist/types/components/DatePicker/DateField.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { AriaDateFieldProps, DateValue } from 'react-aria';
 interface DateFieldProps extends AriaDateFieldProps<DateValue> {
-    onClick?: () => void;
+    onClickDate?: () => void;
+    onClickTime?: () => void;
 }
-export declare const DateField: ({ onClick, ...props }: DateFieldProps) => JSX.Element;
+export declare const DateField: ({ onClickDate, onClickTime, ...props }: DateFieldProps) => JSX.Element;
 export {};

package/dist/types/components/DatePicker/DatePickerInput.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
+import { Granularity } from '@react-types/datepicker';
 import { InputProps } from '../Input';
 export interface DatePickerInputProps extends Omit<InputProps, 'value' | 'onChange'> {
     value?: Date;
     onChange: (date?: Date) => void;
+    hourCycle?: 12 | 24;
+    granularity?: Granularity;
 }
 export declare const DatePickerInput: (props: DatePickerInputProps) => JSX.Element;

package/dist/types/components/DatePicker/DateRangePickerInput.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
+import { Granularity } from '@react-types/datepicker';
 import { DateRange } from '../Calendar/RangeCalendar';
 import { InputProps } from '../Input';
 export interface DateRangePickerInputProps extends Omit<InputProps, 'value' | 'onChange'> {
     value?: DateRange;
     onChange: (date?: DateRange) => void;
+    hourCycle?: 12 | 24;
+    granularity?: Granularity;
 }
 export declare const DateRangePickerInput: (props: DateRangePickerInputProps) => JSX.Element;

package/dist/types/components/DatePicker/DateSegment.d.ts

@@ -1,6 +1,6 @@
-import { HTMLAttributes } from 'react';
+/// <reference types="react" />
 import { DateFieldState, DateSegment as DateSegmentType } from 'react-stately';
-interface DateSegmentProps extends HTMLAttributes<HTMLDivElement> {
+interface DateSegmentProps {
     segment: DateSegmentType;
     state: DateFieldState;
 }

package/dist/types/components/TimeField/TimeField.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { TimeValueType } from './TimeFieldInput';
-export interface TimeFieldProps {
-    value?: TimeValueType;
-    onChange: (number: TimeValueType) => void;
+import { AriaTimeFieldProps, TimeValue } from 'react-aria';
+export interface TimeFieldProps extends AriaTimeFieldProps<TimeValue> {
+    disabled?: boolean;
 }
-export declare const TimeField: (props: TimeFieldProps) => JSX.Element;
+export declare const TimeField: ({ disabled, ...props }: TimeFieldProps) => JSX.Element;

package/dist/types/components/TimeField/TimeFieldInput.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
+import { Time } from '@internationalized/date';
 import { InputPropsBase } from '../Input';
-export type TimeValueType = {
-    hour: number;
-    minute: number;
-};
 export interface TimeFieldInputProps extends InputPropsBase {
-    value?: TimeValueType;
-    onChange: (number: TimeValueType) => void;
+    value?: Time;
+    onChange: (value?: Time) => void;
+    hourCycle?: 12 | 24;
+    granularity?: 'hour' | 'minute' | 'second';
+    disabled?: boolean;
 }
 export declare const TimeFieldInput: (props: TimeFieldInputProps) => JSX.Element;

package/dist/types/utils/date.d.ts

@@ -1,3 +1,5 @@
-import { CalendarDate } from '@internationalized/date';
-export declare const dateToCalendarDate: (value?: Date) => CalendarDate;
-export declare const calendarDateToDate: (value: CalendarDate) => Date | undefined;
+import { CalendarDateTime, Time } from '@internationalized/date';
+import { TimeValue } from 'react-aria';
+export declare const dateToCalendarDateTime: (value?: Date) => CalendarDateTime;
+export declare const calendarDateToDate: (value?: CalendarDateTime) => Date | undefined;
+export declare const timeFromTimeValue: (value?: TimeValue) => Time | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.9.16",
+  "version": "1.9.17",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -48,5 +48,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "533e8dc8a0f331d6d4ee09c0c3da7c02b6297c97"
+  "gitHead": "54a3803d3508ab42402e82c1a459173ad7d03579"
 }

package/dist/cjs/hooks/useTimeField.js

@@ -1,32 +0,0 @@
-'use strict';
-
-var React = require('react');
-var reactAria = require('react-aria');
-var reactStately = require('react-stately');
-var date = require('@internationalized/date');
-
-const useTimeField = (props) => {
-  const { value, onChange } = props;
-  const { locale } = reactAria.useLocale();
-  const state = reactStately.useTimeFieldState({
-    value: new date.Time(value?.hour, value?.minute),
-    onChange: (timeValue) => onChange({ hour: timeValue.hour, minute: timeValue.minute }),
-    locale
-  });
-  const ref = React.useRef(null);
-  const { fieldProps } = reactAria.useTimeField(
-    {
-      "aria-label": "time-field",
-      hourCycle: 24
-    },
-    state,
-    ref
-  );
-  return {
-    fieldProps,
-    ref,
-    state
-  };
-};
-
-exports.useTimeField = useTimeField;

package/dist/esm/hooks/useTimeField.js

@@ -1,30 +0,0 @@
-import React__default from 'react';
-import { useLocale, useTimeField as useTimeField$1 } from 'react-aria';
-import { useTimeFieldState } from 'react-stately';
-import { Time } from '@internationalized/date';
-
-const useTimeField = (props) => {
-  const { value, onChange } = props;
-  const { locale } = useLocale();
-  const state = useTimeFieldState({
-    value: new Time(value?.hour, value?.minute),
-    onChange: (timeValue) => onChange({ hour: timeValue.hour, minute: timeValue.minute }),
-    locale
-  });
-  const ref = React__default.useRef(null);
-  const { fieldProps } = useTimeField$1(
-    {
-      "aria-label": "time-field",
-      hourCycle: 24
-    },
-    state,
-    ref
-  );
-  return {
-    fieldProps,
-    ref,
-    state
-  };
-};
-
-export { useTimeField };

package/dist/types/hooks/useTimeField.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { TimeFieldProps } from '../components/TimeField';
-export declare const useTimeField: (props: TimeFieldProps) => {
-    fieldProps: import("@react-types/shared").GroupDOMAttributes;
-    ref: React.MutableRefObject<null>;
-    state: import("react-stately").TimeFieldState;
-};