@tecsinapse/cortex-react 1.13.0 → 1.13.1-beta.1

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';
 
@@ -64,7 +65,7 @@ const DatePickerInputWithPopover = (props) => {
   )), /* @__PURE__ */ React__default.createElement(
     Popover.Content,
     {
-      className: "bg-inherit shadow-none border-none",
+      className: "bg-inherit shadow-lg border-none",
       initialFocus: -1
     },
     /* @__PURE__ */ React__default.createElement(Calendar, { value, onChange: handleChangeCalendar })

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';
 
@@ -77,7 +78,7 @@ const DateRangePickerInputWithPopover = (props) => {
   )), /* @__PURE__ */ React__default.createElement(
     Popover.Content,
     {
-      className: "bg-inherit shadow-none border-none",
+      className: "bg-inherit shadow-lg border-none",
       initialFocus: -1
     },
     /* @__PURE__ */ React__default.createElement(RangeCalendar, { value, onChange: handleChangeCalendar })

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/Select/CustomMultiOption.js

@@ -0,0 +1,36 @@
+import { option, checkbox } from '@tecsinapse/cortex-core';
+import React__default from 'react';
+import { useMultiSelectOption } from './useMultiSelectOption.js';
+
+const SelectCustomMultiOption = ({
+  onSelect,
+  option: option$1,
+  grouped = false,
+  children
+}) => {
+  const { onClickOption, isChecked, inputRef } = useMultiSelectOption(
+    option$1,
+    onSelect
+  );
+  return /* @__PURE__ */ React__default.createElement(
+    "li",
+    {
+      onClick: onClickOption,
+      className: option({ grouped }),
+      role: "option"
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "input",
+      {
+        type: "checkbox",
+        checked: isChecked,
+        className: checkbox({ className: "pointer-events-none" }),
+        onChange: () => false,
+        ref: inputRef
+      }
+    ),
+    children
+  );
+};
+
+export { SelectCustomMultiOption };

package/dist/esm/components/Select/CustomOption.js

@@ -0,0 +1,29 @@
+import React__default, { useContext } from 'react';
+import { SelectContext } from './context.js';
+import { option } from '@tecsinapse/cortex-core';
+
+const SelectCustomOption = ({
+  option: option$1,
+  onSelectOption,
+  grouped = false,
+  children
+}) => {
+  const { keyExtractor, value } = useContext(SelectContext);
+  return /* @__PURE__ */ React__default.createElement(
+    "li",
+    {
+      onClick: (e) => {
+        e.preventDefault();
+        onSelectOption(option$1);
+      },
+      className: option({
+        selected: value && keyExtractor(value) === keyExtractor(option$1),
+        grouped
+      }),
+      role: "option"
+    },
+    children
+  );
+};
+
+export { SelectCustomOption };

package/dist/esm/components/Select/MultiCheckAllOptions.js

@@ -31,7 +31,7 @@ const SelectMultiCheckAllOptions = ({
           updateSelected.splice(updateSelected.indexOf(it), 1);
         });
       }
-      onSelect(updateSelected);
+      onSelect?.(updateSelected);
     }
   }, [options, onSelect]);
   return options?.length ? /* @__PURE__ */ React__default.createElement("div", { className: option(), onClick: checkAll }, /* @__PURE__ */ React__default.createElement(

package/dist/esm/components/Select/MultiGroupedOptions.js

@@ -12,7 +12,6 @@ import { useSelectGroupedOptions } from '../../hooks/useSelectGroupedOptions.js'
 import { SelectMultiOption } from './MultiOption.js';
 import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';
-import { handleSelectMulti } from './utils.js';
 
 const { groupedTitle, list } = selectVariants();
 const SelectMultiGroupedOptions = ({
@@ -21,7 +20,7 @@ const SelectMultiGroupedOptions = ({
   options,
   children
 }) => {
-  const { value: currentValue = [], keyExtractor } = useContext(SelectContext);
+  const { keyExtractor } = useContext(SelectContext);
   const { options: _options, isLoading } = useSelectGroupedOptions({ options });
   const flattenMap = useMemo(
     () => _options ? Array.from(_options?.values()).flatMap((value) => value) : [],
@@ -39,12 +38,7 @@ const SelectMultiGroupedOptions = ({
         grouped: true,
         option,
         key: keyExtractor(option),
-        onSelectOption: (option2) => handleSelectMulti(
-          option2,
-          currentValue,
-          onSelect,
-          keyExtractor
-        )
+        onSelect
       }
     )))))
   );

package/dist/esm/components/Select/MultiOption.js

@@ -1,22 +1,13 @@
 import { option, checkbox } from '@tecsinapse/cortex-core';
-import React__default, { useContext, useRef, useMemo, useCallback } from 'react';
-import { SelectContext } from './context.js';
+import React__default from 'react';
+import { useMultiSelectOption } from './useMultiSelectOption.js';
 
 const SelectMultiOption = ({
-  onSelectOption,
+  onSelect,
   option: option$1,
   grouped = false
 }) => {
-  const { keyExtractor, labelExtractor, value } = useContext(SelectContext);
-  const inputRef = useRef(null);
-  const isChecked = useMemo(
-    () => value?.length > 0 && value.find((it) => keyExtractor(it) === keyExtractor(option$1)) !== void 0,
-    [value, option$1]
-  );
-  const onClickOption = useCallback(() => {
-    onSelectOption(option$1);
-    inputRef.current?.click();
-  }, [onSelectOption, inputRef]);
+  const { onClickOption, isChecked, inputRef, labelExtractor } = useMultiSelectOption(option$1, onSelect);
   return /* @__PURE__ */ React__default.createElement(
     "li",
     {

package/dist/esm/components/Select/MultiOptions.js

@@ -12,7 +12,6 @@ import { useSelectOptions } from '../../hooks/useSelectOptions.js';
 import { SelectMultiOption } from './MultiOption.js';
 import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';
-import { handleSelectMulti } from './utils.js';
 
 const { list } = selectVariants();
 const SelectMultiOptions = ({
@@ -20,14 +19,14 @@ const SelectMultiOptions = ({
   options,
   children
 }) => {
-  const { keyExtractor, value: currentValue = [] } = useContext(SelectContext);
+  const { keyExtractor } = useContext(SelectContext);
   const { options: _options, isLoading } = useSelectOptions({ options });
   return /* @__PURE__ */ React__default.createElement(SelectMultiOptionsContext.Provider, { value: { onSelect, options: _options } }, isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, children, _options?.map((option) => /* @__PURE__ */ React__default.createElement(
     SelectMultiOption,
     {
       option,
       key: keyExtractor(option),
-      onSelectOption: (option2) => handleSelectMulti(option2, currentValue, onSelect, keyExtractor)
+      onSelect
     }
   ))));
 };

package/dist/esm/components/Select/Options.js

@@ -1,5 +1,5 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React__default, { useContext, useCallback } from 'react';
+import React__default, { useContext, useCallback, useMemo } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
@@ -16,26 +16,31 @@ import { SelectContext } from './context.js';
 const { list } = selectVariants();
 const SelectOptions = ({
   onSelect,
-  options
+  options,
+  children
 }) => {
   const { keyExtractor } = useContext(SelectContext);
   const { setIsOpen } = usePopoverContext();
   const { options: _options, isLoading } = useSelectOptions({ options });
   const handleSelect = useCallback(
     (option) => {
-      onSelect(option);
+      onSelect?.(option);
       setIsOpen?.(false);
     },
     [onSelect]
   );
-  return isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, _options?.map((option) => /* @__PURE__ */ React__default.createElement(
-    SelectOption,
-    {
-      option,
-      key: keyExtractor(option),
-      onSelectOption: handleSelect
-    }
-  )));
+  const defaultOptions = useMemo(
+    () => _options?.map((option) => /* @__PURE__ */ React__default.createElement(
+      SelectOption,
+      {
+        option,
+        key: keyExtractor(option),
+        onSelectOption: handleSelect
+      }
+    )) ?? [],
+    [_options, keyExtractor, handleSelect]
+  );
+  return isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, children ?? defaultOptions);
 };
 
 export { SelectOptions };

package/dist/esm/components/Select/index.js

@@ -8,6 +8,8 @@ import { SelectOptions } from './Options.js';
 import { SelectPopover } from './Popover.js';
 import { SelectRoot } from './Root.js';
 import { SelectTrigger } from './Trigger.js';
+import { SelectCustomOption } from './CustomOption.js';
+import { SelectCustomMultiOption } from './CustomMultiOption.js';
 
 const Select = {
   Root: SelectRoot,
@@ -19,7 +21,9 @@ const Select = {
   MultiOptions: SelectMultiOptions,
   MultiGroupedOptions: SelectMultiGroupedOptions,
   MultiOption: SelectMultiOption,
-  MultiCheckAllOptions: SelectMultiCheckAllOptions
+  MultiCheckAllOptions: SelectMultiCheckAllOptions,
+  CustomOption: SelectCustomOption,
+  CustomMultiOption: SelectCustomMultiOption
 };
 
 export { Select };

package/dist/esm/components/Select/useMultiSelectOption.js

@@ -0,0 +1,27 @@
+import { useContext, useRef, useMemo, useCallback } from 'react';
+import { SelectContext } from './context.js';
+import { handleSelectMulti } from './utils.js';
+
+const useMultiSelectOption = (option, onSelect) => {
+  const { keyExtractor, value, labelExtractor } = useContext(SelectContext);
+  const inputRef = useRef(null);
+  const onSelectOption = (option2) => handleSelectMulti(option2, value, keyExtractor, onSelect);
+  const isChecked = useMemo(
+    () => value?.length > 0 && value.find((it) => keyExtractor(it) === keyExtractor(option)) !== void 0,
+    [value, option]
+  );
+  const onClickOption = useCallback(() => {
+    onSelectOption(option);
+    inputRef.current?.click();
+  }, [onSelectOption, inputRef]);
+  return {
+    keyExtractor,
+    value,
+    isChecked,
+    onClickOption,
+    inputRef,
+    labelExtractor
+  };
+};
+
+export { useMultiSelectOption };

package/dist/esm/components/Select/utils.js

@@ -1,4 +1,4 @@
-const handleSelectMulti = (option, value, onSelect, keyExtractor) => {
+const handleSelectMulti = (option, value, keyExtractor, onSelect) => {
   const current = Array.from(value ?? []);
   const indexOf = current.findIndex(
     (it) => keyExtractor(it) === keyExtractor(option)
@@ -8,7 +8,7 @@ const handleSelectMulti = (option, value, onSelect, keyExtractor) => {
   } else {
     current.splice(indexOf, 1);
   }
-  onSelect(current);
+  onSelect?.(current);
 };
 
 export { handleSelectMulti };

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 };