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

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

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

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

@@ -0,0 +1,76 @@
+import React__default from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '../Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
+import { useTimePickerInput } from '../../hooks/useTimePickerInput.js';
+import { Popover } from '../Popover/index.js';
+import { Content } from '../Content.js';
+import { TimeFieldInput } from './TimeFieldInput.js';
+import { TimePickerSelector } from './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({
+    value,
+    onChange,
+    minuteInterval
+  });
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Popover.Trigger, { disabled: true }, /* @__PURE__ */ React__default.createElement(
+    TimeFieldInput,
+    {
+      variants,
+      label,
+      disabled,
+      value,
+      onChange: handleTimeFieldChange,
+      onClean: () => handleTimeFieldChange(null),
+      onToggle: handleTogglePopover,
+      hourCycle,
+      granularity
+    }
+  )), /* @__PURE__ */ React__default.createElement(
+    Popover.Content,
+    {
+      className: "bg-white shadow-lg border-none p-deca flex flex-col",
+      initialFocus: -1
+    },
+    /* @__PURE__ */ React__default.createElement(
+      TimePickerSelector,
+      {
+        onChangeTime: handleChangeTimeOnSelector,
+        value: popoverTime,
+        hourCycle,
+        minuteInterval,
+        onPressOkButton: handleTogglePopover,
+        hourLabel,
+        minuteLabel,
+        dayPeriodLabel
+      }
+    )
+  ));
+};
+const TimePickerInput = (props) => /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(TimePickerInputWithPopover, { ...props })));
+
+export { TimePickerInput };

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

@@ -0,0 +1,116 @@
+import { Time } from '@internationalized/date';
+import React__default, { useMemo } from 'react';
+import { ScrollableDigitSelector } from '../ScrollableDigitSelector.js';
+import clsx from 'clsx';
+import { Button } from '../Button.js';
+import { MdClose } from '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 Time(newHour, value.minute, value.second);
+    onChangeTime(newTime);
+  };
+  const handleMinuteChange = (minute) => {
+    const newTime = new 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 Time(newHour, value.minute, value.second);
+    onChangeTime(newTime);
+  };
+  const isPM = value && value?.hour >= 12;
+  const displayHour = 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__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      className: "p-micro",
+      variants: {
+        size: "circle",
+        variant: "outline"
+      },
+      onClick: onPressOkButton
+    },
+    /* @__PURE__ */ React__default.createElement(MdClose, null)
+  )), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-row gap-x-deca max-h-[300px] overflow-hidden" }, /* @__PURE__ */ React__default.createElement("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-base font-bold text-center" }, hourLabel), /* @__PURE__ */ React__default.createElement(
+    ScrollableDigitSelector,
+    {
+      value: displayHour,
+      onChange: handleHourChange,
+      min: hourCycle === 12 ? 1 : 0,
+      max: hourCycle === 12 ? 12 : 23
+    }
+  )), /* @__PURE__ */ React__default.createElement("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-base font-bold text-center" }, minuteLabel), /* @__PURE__ */ React__default.createElement(
+    ScrollableDigitSelector,
+    {
+      value: value?.minute ?? 0,
+      onChange: handleMinuteChange,
+      min: 0,
+      max: 59,
+      step: minuteInterval
+    }
+  )), hourCycle === 12 && /* @__PURE__ */ React__default.createElement("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-base font-bold text-center" }, dayPeriodLabel), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-y-micro p-micro overflow-auto" }, /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      onClick: () => handlePeriodChange(false),
+      className: "flex justify-center"
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        className: clsx(
+          dayPeriodStyle,
+          !isPM && "bg-primary-medium text-white"
+        )
+      },
+      "AM"
+    )
+  ), /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      onClick: () => handlePeriodChange(true),
+      className: "flex justify-center"
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        className: clsx(
+          dayPeriodStyle,
+          isPM && "bg-primary-medium text-white"
+        )
+      },
+      "PM"
+    )
+  )))));
+};
+
+export { TimePickerSelector };

package/dist/esm/hooks/useTimePickerInput.js

@@ -0,0 +1,43 @@
+import { useState, useCallback } from 'react';
+import { usePopoverContext } from '../components/Popover/Context.js';
+import { Time } from '@internationalized/date';
+
+const useTimePickerInput = ({
+  value,
+  onChange,
+  minuteInterval
+}) => {
+  const { setIsOpen } = usePopoverContext();
+  const [popoverTime, setPopoverTime] = useState(value ?? new 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 Time(newValue.hour, newValue.minute, newValue.second) : void 0;
+    onChange?.(newTime);
+    setPopoverTime(newTime ?? new Time(0, 0));
+  };
+  const handleTogglePopover = useCallback(() => {
+    setIsOpen((open) => !open);
+  }, []);
+  const handleChangeTimeOnSelector = useCallback(
+    (time) => {
+      setPopoverTime(time);
+      handleTimeFieldChange(time);
+    },
+    [handleTimeFieldChange]
+  );
+  return {
+    handleTogglePopover,
+    handleTimeFieldChange,
+    handleChangeTimeOnSelector,
+    popoverTime
+  };
+};
+
+export { useTimePickerInput };

package/dist/esm/index.js

@@ -35,8 +35,10 @@ export { Stepper } from './components/Stepper/index.js';
 export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
 export { Tag } from './components/Tag.js';
 export { TextArea } from './components/TextArea/index.js';
-export { TimeField } from './components/TimeField/TimeField.js';
-export { TimeFieldInput } from './components/TimeField/TimeFieldInput.js';
+export { TimeField } from './components/TimePicker/TimeField.js';
+export { TimePickerInput } from './components/TimePicker/TimePickerInput.js';
+export { TimePickerSelector } from './components/TimePicker/TimePickerSelector.js';
+export { TimeFieldInput } from './components/TimePicker/TimeFieldInput.js';
 export { Toggle } from './components/Toggle.js';
 export { Tooltip } from './components/Tooltip.js';
 export { Uploader } from './components/Uploader/index.js';
@@ -56,6 +58,7 @@ export { useRangeCalendar } from './hooks/useRangeCalendar.js';
 export { useSelectGroupedOptions } from './hooks/useSelectGroupedOptions.js';
 export { useSelectOptions } from './hooks/useSelectOptions.js';
 export { applyStringMask, getMask, mergeMask, useStringMask } from './hooks/useStringMask.js';
+export { useTimePickerInput } from './hooks/useTimePickerInput.js';
 export { SnackbarSonner } from './service/SnackbarSonner.js';
 export { MenubarProvider } from './provider/MenubarProvider.js';
 export { SnackbarProvider, useSnackbar } from './provider/SnackbarProvider.js';

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

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+const timePickerInputBase = tv({
+  slots: {
+    icon: "cursor-pointer text-deca"
+  },
+  variants: {
+    disabled: {
+      true: {
+        icon: "text-secondary-light cursor-default"
+      }
+    }
+  }
+});
+
+export { timePickerInputBase };

package/dist/esm/utils/date.js

@@ -1,4 +1,4 @@
-import { CalendarDateTime, getLocalTimeZone, Time } from '@internationalized/date';
+import { CalendarDateTime, getLocalTimeZone } from '@internationalized/date';
 
 const dateToCalendarDateTime = (value) => {
   return new CalendarDateTime(
@@ -14,9 +14,5 @@ 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, dateToCalendarDateTime, timeFromTimeValue };
+export { calendarDateToDate, dateToCalendarDateTime };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ScrollableDigitSelectorProps {
+    value: number;
+    onChange: (value: number) => void;
+    min: number;
+    max: number;
+    step?: number;
+}
+export declare const ScrollableDigitSelector: ({ value, onChange, min, max, step, }: ScrollableDigitSelectorProps) => React.JSX.Element;
+export {};

package/dist/types/components/Select/CustomMultiOption.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CustomMultiOptionProps } from './types';
+export declare const SelectCustomMultiOption: <T>({ onSelect, option, grouped, children, }: CustomMultiOptionProps<T>) => React.JSX.Element;

package/dist/types/components/Select/CustomOption.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CustomOptionProps } from './types';
+export declare const SelectCustomOption: <T>({ option, onSelectOption, grouped, children, }: CustomOptionProps<T>) => React.JSX.Element;

package/dist/types/components/Select/MultiOption.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { SelectMultiOptionProps } from './types';
-export declare const SelectMultiOption: <T>({ onSelectOption, option, grouped, }: SelectMultiOptionProps<T>) => React.JSX.Element;
+export declare const SelectMultiOption: <T>({ onSelect, option, grouped, }: SelectMultiOptionProps<T>) => React.JSX.Element;

package/dist/types/components/Select/Options.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { SelectOptionsProps } from './types';
-export declare const SelectOptions: <T>({ onSelect, options, }: SelectOptionsProps<T>) => React.JSX.Element;
+export declare const SelectOptions: <T>({ onSelect, options, children, }: SelectOptionsProps<T>) => React.JSX.Element;

package/dist/types/components/Select/context.d.ts

@@ -8,7 +8,7 @@ interface SelectContextProps<T> {
 export declare const SelectContext: import("react").Context<SelectContextProps<any>>;
 interface SelectMultiOptionsContextProps<T> {
     options?: T[];
-    onSelect: (value: T[]) => void;
+    onSelect?: (value: T[]) => void;
 }
 export declare const SelectMultiOptionsContext: import("react").Context<SelectMultiOptionsContextProps<any>>;
 export {};

package/dist/types/components/Select/index.d.ts

@@ -2,12 +2,14 @@ export declare const Select: {
     Root: <T>({ children, value, keyExtractor, labelExtractor, className, }: import("./types").SelectRootProps<T>) => import("react").JSX.Element;
     Trigger: ({ label, placeholder, disabled, multiLabelSelected, ...rest }: import("./types").SelectTriggerProps) => import("react").JSX.Element;
     Popover: ({ children }: import("./types").SelectPopoverProps) => import("react").JSX.Element;
-    Options: <T>({ onSelect, options, }: import("./types").SelectOptionsProps<T>) => import("react").JSX.Element;
+    Options: <T>({ onSelect, options, children, }: import("./types").SelectOptionsProps<T>) => import("react").JSX.Element;
     GroupedOptions: <T>({ onSelect, groupedLabelExtractor, options, }: import("./types").SelectGroupedOptionsProps<T>) => import("react").JSX.Element;
     Option: <T>({ onSelectOption, option, grouped, }: import("./types").SelectOptionProps<T>) => import("react").JSX.Element;
     MultiOptions: <T>({ onSelect, options, children, }: import("./types").SelectMultiOptionsProps<T>) => import("react").JSX.Element;
     MultiGroupedOptions: <T>({ onSelect, groupedLabelExtractor, options, children, }: import("./types").SelectMultiGroupedOptionsProps<T>) => import("react").JSX.Element;
-    MultiOption: <T>({ onSelectOption, option, grouped, }: import("./types").SelectMultiOptionProps<T>) => import("react").JSX.Element;
+    MultiOption: <T>({ onSelect, option, grouped, }: import("./types").SelectMultiOptionProps<T>) => import("react").JSX.Element;
     MultiCheckAllOptions: <T>({ checkAllLabel, }: import("./types").SelectMultiCheckAllOptionsProps) => import("react").JSX.Element;
+    CustomOption: <T>({ option, onSelectOption, grouped, children, }: import("./types").CustomOptionProps<T>) => import("react").JSX.Element;
+    CustomMultiOption: <T>({ onSelect, option, grouped, children, }: import("./types").CustomMultiOptionProps<T>) => import("react").JSX.Element;
 };
 export * from './types';

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

@@ -19,12 +19,15 @@ export interface SelectMultiGroupedOptionsProps<T> {
 }
 export interface SelectMultiOptionProps<T> {
     option: T;
-    onSelectOption: (option: T) => void;
+    onSelect?: (option: T[]) => void;
     grouped?: boolean;
 }
+export interface CustomMultiOptionProps<T> extends SelectMultiOptionProps<T> {
+    children?: ReactNode;
+}
 export interface SelectMultiOptionsProps<T> {
     options?: T[] | (() => Promise<T[]>);
-    onSelect: (value: T[]) => void;
+    onSelect?: (value: T[]) => void;
     children?: React.ReactNode;
 }
 export interface SelectOptionProps<T> {
@@ -32,9 +35,13 @@ export interface SelectOptionProps<T> {
     onSelectOption: (option: T) => void;
     grouped?: boolean;
 }
+export interface CustomOptionProps<T> extends SelectOptionProps<T> {
+    children?: ReactNode;
+}
 export interface SelectOptionsProps<T> {
     options?: T[] | (() => Promise<T[]>);
-    onSelect: (value: T) => void;
+    onSelect?: (value: T) => void;
+    children?: ReactNode;
 }
 export interface SelectPopoverProps {
     children: ReactNode;

package/dist/types/components/Select/useMultiSelectOption.d.ts

@@ -0,0 +1,8 @@
+export declare const useMultiSelectOption: <T>(option: T, onSelect?: (option: T[]) => void) => {
+    keyExtractor: (value: any) => string;
+    value: any;
+    isChecked: boolean;
+    onClickOption: () => void;
+    inputRef: import("react").RefObject<HTMLInputElement>;
+    labelExtractor: (value: any) => string;
+};

package/dist/types/components/Select/utils.d.ts

@@ -1 +1 @@
-export declare const handleSelectMulti: <T>(option: T, value: T[], onSelect: (value: T[]) => void, keyExtractor: (value: T) => string) => void;
+export declare const handleSelectMulti: <T>(option: T, value: T[], keyExtractor: (value: T) => string, onSelect?: (value: T[]) => void) => void;

package/dist/types/components/{TimeField → TimePicker}/TimeField.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 import { AriaTimeFieldProps, TimeValue } from 'react-aria';
 export interface TimeFieldProps extends AriaTimeFieldProps<TimeValue> {
     disabled?: boolean;
+    onClickTime?: () => void;
 }
-export declare const TimeField: ({ disabled, ...props }: TimeFieldProps) => React.JSX.Element;
+export declare const TimeField: ({ onClickTime, ...props }: TimeFieldProps) => React.JSX.Element;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { InputProps } from '../Input';
+import { TimeValue } from 'react-aria';
+interface TimePickerInputBaseProps extends Omit<InputProps, 'value' | 'onChange'> {
+    value?: TimeValue;
+    onChange: (value: TimeValue | null) => void;
+    onClean?: () => void;
+    onToggle?: () => void;
+    disabled?: boolean;
+    hourCycle?: 12 | 24;
+    granularity?: 'hour' | 'minute' | 'second';
+}
+export declare const TimeFieldInput: ({ variants, label, disabled, value, onChange, onToggle, onClean, hourCycle, granularity, }: TimePickerInputBaseProps) => React.JSX.Element;
+export {};

package/dist/types/components/TimePicker/TimePickerInput.d.ts

@@ -0,0 +1,15 @@
+import { Time } from '@internationalized/date';
+import React from 'react';
+import { InputProps } from '../Input';
+export interface TimePickerInputProps extends Omit<InputProps, 'value' | 'onChange'> {
+    value?: Time;
+    onChange: (value?: Time) => void;
+    hourCycle?: 12 | 24;
+    granularity?: 'hour' | 'minute' | 'second';
+    disabled?: boolean;
+    minuteInterval?: number;
+    hourLabel?: string;
+    minuteLabel?: string;
+    dayPeriodLabel?: string;
+}
+export declare const TimePickerInput: (props: TimePickerInputProps) => React.JSX.Element;

package/dist/types/components/TimePicker/TimePickerSelector.d.ts

@@ -0,0 +1,14 @@
+import { Time } from '@internationalized/date';
+import React from 'react';
+interface TimePickerSelectorProps {
+    value: Time;
+    hourCycle: 12 | 24;
+    minuteInterval: number;
+    onPressOkButton: () => void;
+    onChangeTime: (time: Time) => void;
+    hourLabel?: string;
+    minuteLabel?: string;
+    dayPeriodLabel?: string;
+}
+export declare const TimePickerSelector: ({ value, hourCycle, minuteInterval, onPressOkButton, onChangeTime, hourLabel, minuteLabel, dayPeriodLabel, }: TimePickerSelectorProps) => React.JSX.Element;
+export {};

package/dist/types/components/TimePicker/index.d.ts

@@ -0,0 +1,4 @@
+export * from './TimeField';
+export * from './TimePickerInput';
+export * from './TimePickerSelector';
+export * from './TimeFieldInput';

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

@@ -28,7 +28,7 @@ export * from './Stepper';
 export * from './Table';
 export * from './Tag';
 export * from './TextArea';
-export * from './TimeField';
+export * from './TimePicker';
 export * from './Toggle';
 export * from './Tooltip';
 export * from './Uploader';

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

@@ -14,3 +14,4 @@ export * from './useRangeCalendar';
 export * from './useSelectGroupedOptions';
 export * from './useSelectOptions';
 export * from './useStringMask';
+export * from './useTimePickerInput';

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

@@ -0,0 +1,14 @@
+import { Time } from '@internationalized/date';
+import { TimeValue } from 'react-aria';
+interface useTimePickerInputProps {
+    value?: Time;
+    onChange?: (value?: Time) => void;
+    minuteInterval: number;
+}
+export declare const useTimePickerInput: ({ value, onChange, minuteInterval, }: useTimePickerInputProps) => {
+    handleTogglePopover: () => void;
+    handleTimeFieldChange: (newValue: TimeValue | null) => void;
+    handleChangeTimeOnSelector: (time: Time) => void;
+    popoverTime: Time;
+};
+export {};

package/dist/types/styles/time-field-input.d.ts

@@ -0,0 +1,25 @@
+export declare const timePickerInputBase: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            icon: string;
+        };
+    };
+}, {
+    icon: string;
+}, undefined, {
+    disabled: {
+        true: {
+            icon: string;
+        };
+    };
+}, {
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            icon: string;
+        };
+    };
+}, {
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.13.0",
+  "version": "1.13.1-beta.1",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -47,5 +47,5 @@
     "react-icons": ">=5.2.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "2161799fe52315370cbe2b5b10e2245c232a5ee1"
+  "gitHead": "7481b077fea291e92cdf8389d7fd5c7a8ef703be"
 }

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

@@ -1,24 +0,0 @@
-'use strict';
-
-var React = require('react');
-var reactAria = require('react-aria');
-var reactStately = require('react-stately');
-var DateSegment = require('../DatePicker/DateSegment.js');
-
-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 })));
-};
-
-exports.TimeField = TimeField;