@tecsinapse/cortex-react 1.13.0-beta.5 → 1.13.1-beta.0

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

@@ -11,9 +11,10 @@ require('react-dropzone');
 require('uuid');
 require('@floating-ui/react');
 require('currency.js');
+require('../Popover/Context.js');
 var Calendar = require('../Calendar/Calendar.js');
 var index = require('../Popover/index.js');
-var Content = require('../Select/Content.js');
+var Content = require('../Content.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
 

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

@@ -11,9 +11,10 @@ require('react-dropzone');
 require('uuid');
 require('@floating-ui/react');
 require('currency.js');
+require('../Popover/Context.js');
 var RangeCalendar = require('../Calendar/RangeCalendar.js');
 var index = require('../Popover/index.js');
-var Content = require('./Content.js');
+var Content = require('../Content.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
 

package/dist/cjs/components/ScrollableDigitSelector.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+
+const formatValue = (val) => {
+  return val.toString().padStart(2, "0");
+};
+const ScrollableDigitSelector = ({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1
+}) => {
+  const containerRef = React.useRef(null);
+  const values = React.useMemo(() => {
+    const vals = [];
+    for (let i = min; i <= max; i += step) {
+      vals.push(i);
+    }
+    return vals;
+  }, [min, max, step]);
+  const scrollToValue = (targetValue) => {
+    if (containerRef.current) {
+      const index = values.indexOf(targetValue);
+      if (index !== -1) {
+        const itemHeight = 27;
+        const scrollTop = index * itemHeight;
+        containerRef.current.scrollTop = scrollTop;
+        containerRef.current.scrollTo({ top: scrollTop, behavior: "smooth" });
+      }
+    }
+  };
+  React.useEffect(() => {
+    scrollToValue(value);
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "flex flex-col items-center gap-y-micro p-micro overflow-auto",
+      ref: containerRef
+    },
+    values.map((val) => /* @__PURE__ */ React.createElement("div", { key: val }, /* @__PURE__ */ React.createElement("div", { onClick: () => onChange(val), className: "flex justify-center" }, /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: clsx(
+          "p-micro rounded-micro border-1 border-transparent hover:bg-primary-light hover:border-primary cursor-pointer",
+          value === val && "bg-primary-medium text-white"
+        )
+      },
+      formatValue(val)
+    ))))
+  );
+};
+
+exports.ScrollableDigitSelector = ScrollableDigitSelector;

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

@@ -0,0 +1,48 @@
+'use strict';
+
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var DateSegment = require('../DatePicker/DateSegment.js');
+
+const formatLiteralSegment = (text) => {
+  return text.includes(",") ? text.replace(/,/g, " ") : text;
+};
+const TimeField = ({ onClickTime, ...props }) => {
+  const { value } = props;
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useTimeFieldState({
+    ...props,
+    locale,
+    shouldForceLeadingZeros: true
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = reactAria.useTimeField(
+    { "aria-label": "time-field" },
+    state,
+    ref
+  );
+  const handleOnClickSegment = React.useCallback(
+    (segment) => {
+      if (!segment.isEditable || state.isDisabled) return;
+      if (["hour", "minute", "second", "dayPeriod"].includes(segment.type)) {
+        onClickTime?.();
+      }
+    },
+    [onClickTime, state.isDisabled]
+  );
+  React.useEffect(() => {
+    if (!value) {
+      state.setValue(null);
+    }
+  }, [value]);
+  return /* @__PURE__ */ React.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => {
+    if (segment.type === "literal") {
+      const text = formatLiteralSegment(segment.text);
+      return /* @__PURE__ */ React.createElement("span", { key: i, style: { whiteSpace: "pre" } }, text);
+    }
+    return /* @__PURE__ */ React.createElement("div", { key: i, onClick: () => handleOnClickSegment(segment) }, /* @__PURE__ */ React.createElement(DateSegment.DateSegment, { segment, state }));
+  }));
+};
+
+exports.TimeField = TimeField;

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

@@ -0,0 +1,82 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var index = require('../Input/index.js');
+var lia = require('react-icons/lia');
+var timeFieldInput = require('../../styles/time-field-input.js');
+var io = require('react-icons/io');
+var TimeField = require('./TimeField.js');
+
+const { icon } = timeFieldInput.timePickerInputBase();
+const TimeFieldInput = ({
+  variants,
+  label,
+  disabled = false,
+  value,
+  onChange,
+  onToggle,
+  onClean,
+  hourCycle,
+  granularity
+}) => {
+  const showCloseIcon = React.useMemo(() => {
+    const hasTime = value != void 0;
+    return hasTime;
+  }, [value]);
+  return /* @__PURE__ */ React.createElement(
+    index.Input.Face,
+    {
+      variants,
+      className: "flex flex-row justify-between",
+      "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,
+      {
+        onClickTime: onToggle,
+        disabled,
+        value,
+        onChange,
+        hourCycle,
+        granularity
+      }
+    )),
+    /* @__PURE__ */ React.createElement(index.Input.Right, { className: "h-full justify-center" }, showCloseIcon ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "flex bg-transparent items-center",
+        onClick: onClean,
+        disabled,
+        "data-testid": "time-picker-input-base-clean-button",
+        type: "button"
+      },
+      /* @__PURE__ */ React.createElement(
+        io.IoMdClose,
+        {
+          className: icon({ disabled }),
+          "data-testid": "time-picker-input-base-clean-icon"
+        }
+      )
+    ) : /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "flex bg-transparent items-center",
+        onClick: onToggle,
+        disabled,
+        "data-testid": "time-picker-input-base-calendar-button",
+        type: "button"
+      },
+      /* @__PURE__ */ React.createElement(
+        lia.LiaClock,
+        {
+          className: icon({ disabled }),
+          "data-testid": "time-picker-input-base-calendar-icon"
+        }
+      )
+    ))
+  );
+};
+
+exports.TimeFieldInput = TimeFieldInput;

package/dist/cjs/components/TimePicker/TimePickerInput.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('../Popover/Context.js');
+require('react-dropzone');
+require('uuid');
+require('@floating-ui/react');
+require('currency.js');
+var useTimePickerInput = require('../../hooks/useTimePickerInput.js');
+var index = require('../Popover/index.js');
+var Content = require('../Content.js');
+var TimeFieldInput = require('./TimeFieldInput.js');
+var TimePickerSelector = require('./TimePickerSelector.js');
+
+const TimePickerInputWithPopover = (props) => {
+  const {
+    onChange,
+    value,
+    label,
+    variants,
+    hourCycle = 24,
+    disabled = false,
+    granularity = "minute",
+    minuteInterval = 1,
+    hourLabel,
+    minuteLabel,
+    dayPeriodLabel
+  } = props;
+  const {
+    handleTogglePopover,
+    handleTimeFieldChange,
+    handleChangeTimeOnSelector,
+    popoverTime
+  } = useTimePickerInput.useTimePickerInput({
+    value,
+    onChange,
+    minuteInterval
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(index.Popover.Trigger, { disabled: true }, /* @__PURE__ */ React.createElement(
+    TimeFieldInput.TimeFieldInput,
+    {
+      variants,
+      label,
+      disabled,
+      value,
+      onChange: handleTimeFieldChange,
+      onClean: () => handleTimeFieldChange(null),
+      onToggle: handleTogglePopover,
+      hourCycle,
+      granularity
+    }
+  )), /* @__PURE__ */ React.createElement(
+    index.Popover.Content,
+    {
+      className: "bg-white shadow-none border-none p-deca flex flex-col",
+      initialFocus: -1
+    },
+    /* @__PURE__ */ React.createElement(
+      TimePickerSelector.TimePickerSelector,
+      {
+        onChangeTime: handleChangeTimeOnSelector,
+        value: popoverTime,
+        hourCycle,
+        minuteInterval,
+        onPressOkButton: handleTogglePopover,
+        hourLabel,
+        minuteLabel,
+        dayPeriodLabel
+      }
+    )
+  ));
+};
+const TimePickerInput = (props) => /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React.createElement(Content.Content, null, /* @__PURE__ */ React.createElement(TimePickerInputWithPopover, { ...props })));
+
+exports.TimePickerInput = TimePickerInput;

package/dist/cjs/components/TimePicker/TimePickerSelector.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var date = require('@internationalized/date');
+var React = require('react');
+var ScrollableDigitSelector = require('../ScrollableDigitSelector.js');
+var clsx = require('clsx');
+var Button = require('../Button.js');
+var md = require('react-icons/md');
+
+const dayPeriodStyle = "p-micro rounded-micro border-1 border-transparent hover:bg-primary-light hover:border-primary cursor-pointer";
+const TimePickerSelector = ({
+  value,
+  hourCycle,
+  minuteInterval,
+  onPressOkButton,
+  onChangeTime,
+  hourLabel = "Hour",
+  minuteLabel = "Minute",
+  dayPeriodLabel = "Day Period"
+}) => {
+  const handleHourChange = (hour) => {
+    let newHour = hour;
+    if (hourCycle === 12) {
+      if (isPM && newHour < 12) {
+        newHour += 12;
+      } else if (!isPM && newHour >= 12) {
+        newHour -= 12;
+      }
+    }
+    const newTime = new date.Time(newHour, value.minute, value.second);
+    onChangeTime(newTime);
+  };
+  const handleMinuteChange = (minute) => {
+    const newTime = new date.Time(value.hour, minute, value.second);
+    onChangeTime(newTime);
+  };
+  const handlePeriodChange = (isPM2) => {
+    if (value === void 0) return;
+    let newHour = value.hour;
+    if (hourCycle === 12) {
+      if (isPM2 && newHour < 12) {
+        newHour += 12;
+      } else if (!isPM2 && newHour >= 12) {
+        newHour -= 12;
+      }
+    }
+    const newTime = new date.Time(newHour, value.minute, value.second);
+    onChangeTime(newTime);
+  };
+  const isPM = value && value?.hour >= 12;
+  const displayHour = React.useMemo(() => {
+    if (value === void 0) return 0;
+    return hourCycle === 12 ? value.hour === 0 ? 12 : value.hour > 12 ? value.hour - 12 : value.hour : value.hour;
+  }, [value, hourCycle]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React.createElement(
+    Button.Button,
+    {
+      className: "p-micro",
+      variants: {
+        size: "circle",
+        variant: "outline"
+      },
+      onClick: onPressOkButton
+    },
+    /* @__PURE__ */ React.createElement(md.MdClose, null)
+  )), /* @__PURE__ */ React.createElement("div", { className: "flex flex-row gap-x-deca max-h-[300px] overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro" }, /* @__PURE__ */ React.createElement("span", { className: "text-base font-bold text-center" }, hourLabel), /* @__PURE__ */ React.createElement(
+    ScrollableDigitSelector.ScrollableDigitSelector,
+    {
+      value: displayHour,
+      onChange: handleHourChange,
+      min: hourCycle === 12 ? 1 : 0,
+      max: hourCycle === 12 ? 12 : 23
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro" }, /* @__PURE__ */ React.createElement("span", { className: "text-base font-bold text-center" }, minuteLabel), /* @__PURE__ */ React.createElement(
+    ScrollableDigitSelector.ScrollableDigitSelector,
+    {
+      value: value?.minute ?? 0,
+      onChange: handleMinuteChange,
+      min: 0,
+      max: 59,
+      step: minuteInterval
+    }
+  )), hourCycle === 12 && /* @__PURE__ */ React.createElement("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro" }, /* @__PURE__ */ React.createElement("span", { className: "text-base font-bold text-center" }, dayPeriodLabel), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-y-micro p-micro overflow-auto" }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: () => handlePeriodChange(false),
+      className: "flex justify-center"
+    },
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: clsx(
+          dayPeriodStyle,
+          !isPM && "bg-primary-medium text-white"
+        )
+      },
+      "AM"
+    )
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: () => handlePeriodChange(true),
+      className: "flex justify-center"
+    },
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: clsx(
+          dayPeriodStyle,
+          isPM && "bg-primary-medium text-white"
+        )
+      },
+      "PM"
+    )
+  )))));
+};
+
+exports.TimePickerSelector = TimePickerSelector;

package/dist/cjs/hooks/useTimePickerInput.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('react');
+var Context = require('../components/Popover/Context.js');
+var date = require('@internationalized/date');
+
+const useTimePickerInput = ({
+  value,
+  onChange,
+  minuteInterval
+}) => {
+  const { setIsOpen } = Context.usePopoverContext();
+  const [popoverTime, setPopoverTime] = React.useState(value ?? new date.Time(0, 0));
+  const handleTimeFieldChange = (newValue) => {
+    if (newValue && minuteInterval > 1) {
+      const time = newValue;
+      const adjustedMinute = Math.round(time.minute / minuteInterval) * minuteInterval % 60;
+      const adjustedTime = time.set({ minute: adjustedMinute });
+      onChange?.(adjustedTime);
+      setPopoverTime(adjustedTime);
+      return;
+    }
+    const newTime = newValue ? new date.Time(newValue.hour, newValue.minute, newValue.second) : void 0;
+    onChange?.(newTime);
+    setPopoverTime(newTime ?? new date.Time(0, 0));
+  };
+  const handleTogglePopover = React.useCallback(() => {
+    setIsOpen((open) => !open);
+  }, []);
+  const handleChangeTimeOnSelector = React.useCallback(
+    (time) => {
+      setPopoverTime(time);
+      handleTimeFieldChange(time);
+    },
+    [handleTimeFieldChange]
+  );
+  return {
+    handleTogglePopover,
+    handleTimeFieldChange,
+    handleChangeTimeOnSelector,
+    popoverTime
+  };
+};
+
+exports.useTimePickerInput = useTimePickerInput;

package/dist/cjs/index.js

@@ -37,8 +37,10 @@ var index$5 = require('./components/Stepper/index.js');
 var Table = require('./components/Table.js');
 var Tag = require('./components/Tag.js');
 var index$6 = require('./components/TextArea/index.js');
-var TimeField = require('./components/TimeField/TimeField.js');
-var TimeFieldInput = require('./components/TimeField/TimeFieldInput.js');
+var TimeField = require('./components/TimePicker/TimeField.js');
+var TimePickerInput = require('./components/TimePicker/TimePickerInput.js');
+var TimePickerSelector = require('./components/TimePicker/TimePickerSelector.js');
+var TimeFieldInput = require('./components/TimePicker/TimeFieldInput.js');
 var Toggle = require('./components/Toggle.js');
 var Tooltip = require('./components/Tooltip.js');
 var index$7 = require('./components/Uploader/index.js');
@@ -58,6 +60,7 @@ var useRangeCalendar = require('./hooks/useRangeCalendar.js');
 var useSelectGroupedOptions = require('./hooks/useSelectGroupedOptions.js');
 var useSelectOptions = require('./hooks/useSelectOptions.js');
 var useStringMask = require('./hooks/useStringMask.js');
+var useTimePickerInput = require('./hooks/useTimePickerInput.js');
 var SnackbarSonner = require('./service/SnackbarSonner.js');
 var MenubarProvider = require('./provider/MenubarProvider.js');
 var SnackbarProvider = require('./provider/SnackbarProvider.js');
@@ -116,6 +119,8 @@ exports.Td = Table.Td;
 exports.Tag = Tag.Tag;
 exports.TextArea = index$6.TextArea;
 exports.TimeField = TimeField.TimeField;
+exports.TimePickerInput = TimePickerInput.TimePickerInput;
+exports.TimePickerSelector = TimePickerSelector.TimePickerSelector;
 exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.Toggle = Toggle.Toggle;
 exports.Tooltip = Tooltip.Tooltip;
@@ -141,6 +146,7 @@ exports.applyStringMask = useStringMask.applyStringMask;
 exports.getMask = useStringMask.getMask;
 exports.mergeMask = useStringMask.mergeMask;
 exports.useStringMask = useStringMask.useStringMask;
+exports.useTimePickerInput = useTimePickerInput.useTimePickerInput;
 exports.SnackbarSonner = SnackbarSonner.SnackbarSonner;
 exports.MenubarProvider = MenubarProvider.MenubarProvider;
 exports.SnackbarProvider = SnackbarProvider.SnackbarProvider;

package/dist/cjs/styles/time-field-input.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const timePickerInputBase = tailwindVariants.tv({
+  slots: {
+    icon: "cursor-pointer text-deca"
+  },
+  variants: {
+    disabled: {
+      true: {
+        icon: "text-secondary-light cursor-default"
+      }
+    }
+  }
+});
+
+exports.timePickerInputBase = timePickerInputBase;

package/dist/cjs/utils/date.js

@@ -16,11 +16,6 @@ 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.dateToCalendarDateTime = dateToCalendarDateTime;
-exports.timeFromTimeValue = timeFromTimeValue;

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

@@ -9,9 +9,10 @@ import 'react-dropzone';
 import 'uuid';
 import '@floating-ui/react';
 import 'currency.js';
+import '../Popover/Context.js';
 import { Calendar } from '../Calendar/Calendar.js';
 import { Popover } from '../Popover/index.js';
-import { Content } from '../Select/Content.js';
+import { Content } from '../Content.js';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';
 

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

@@ -9,9 +9,10 @@ import 'react-dropzone';
 import 'uuid';
 import '@floating-ui/react';
 import 'currency.js';
+import '../Popover/Context.js';
 import { RangeCalendar } from '../Calendar/RangeCalendar.js';
 import { Popover } from '../Popover/index.js';
-import { Content } from './Content.js';
+import { Content } from '../Content.js';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';
 

package/dist/esm/components/ScrollableDigitSelector.js

@@ -0,0 +1,55 @@
+import React__default, { useRef, useMemo, useEffect } from 'react';
+import clsx from 'clsx';
+
+const formatValue = (val) => {
+  return val.toString().padStart(2, "0");
+};
+const ScrollableDigitSelector = ({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1
+}) => {
+  const containerRef = useRef(null);
+  const values = useMemo(() => {
+    const vals = [];
+    for (let i = min; i <= max; i += step) {
+      vals.push(i);
+    }
+    return vals;
+  }, [min, max, step]);
+  const scrollToValue = (targetValue) => {
+    if (containerRef.current) {
+      const index = values.indexOf(targetValue);
+      if (index !== -1) {
+        const itemHeight = 27;
+        const scrollTop = index * itemHeight;
+        containerRef.current.scrollTop = scrollTop;
+        containerRef.current.scrollTo({ top: scrollTop, behavior: "smooth" });
+      }
+    }
+  };
+  useEffect(() => {
+    scrollToValue(value);
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: "flex flex-col items-center gap-y-micro p-micro overflow-auto",
+      ref: containerRef
+    },
+    values.map((val) => /* @__PURE__ */ React__default.createElement("div", { key: val }, /* @__PURE__ */ React__default.createElement("div", { onClick: () => onChange(val), className: "flex justify-center" }, /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        className: clsx(
+          "p-micro rounded-micro border-1 border-transparent hover:bg-primary-light hover:border-primary cursor-pointer",
+          value === val && "bg-primary-medium text-white"
+        )
+      },
+      formatValue(val)
+    ))))
+  );
+};
+
+export { ScrollableDigitSelector };

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

@@ -0,0 +1,46 @@
+import React__default, { useCallback, useEffect } from 'react';
+import { useLocale, useTimeField } from 'react-aria';
+import { useTimeFieldState } from 'react-stately';
+import { DateSegment } from '../DatePicker/DateSegment.js';
+
+const formatLiteralSegment = (text) => {
+  return text.includes(",") ? text.replace(/,/g, " ") : text;
+};
+const TimeField = ({ onClickTime, ...props }) => {
+  const { value } = props;
+  const { locale } = useLocale();
+  const state = useTimeFieldState({
+    ...props,
+    locale,
+    shouldForceLeadingZeros: true
+  });
+  const ref = React__default.useRef(null);
+  const { fieldProps } = useTimeField(
+    { "aria-label": "time-field" },
+    state,
+    ref
+  );
+  const handleOnClickSegment = useCallback(
+    (segment) => {
+      if (!segment.isEditable || state.isDisabled) return;
+      if (["hour", "minute", "second", "dayPeriod"].includes(segment.type)) {
+        onClickTime?.();
+      }
+    },
+    [onClickTime, state.isDisabled]
+  );
+  useEffect(() => {
+    if (!value) {
+      state.setValue(null);
+    }
+  }, [value]);
+  return /* @__PURE__ */ React__default.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => {
+    if (segment.type === "literal") {
+      const text = formatLiteralSegment(segment.text);
+      return /* @__PURE__ */ React__default.createElement("span", { key: i, style: { whiteSpace: "pre" } }, text);
+    }
+    return /* @__PURE__ */ React__default.createElement("div", { key: i, onClick: () => handleOnClickSegment(segment) }, /* @__PURE__ */ React__default.createElement(DateSegment, { segment, state }));
+  }));
+};
+
+export { TimeField };