@cognite/aura 0.3.2 → 0.3.4

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-single-date-state.js

@@ -1,32 +1,25 @@
-import { useState as l, useRef as i } from "react";
-const g = ({
-  value: e,
-  defaultDate: a,
-  mapDate: r,
-  onDateSelected: D
-}) => {
-  const [p, h] = l(e), [u, o] = l(
-    () => e ?? a
-  ), n = i({ tempDate: e }), s = (t) => {
-    n.current.tempDate = t, h(t);
-  };
-  return {
-    tempDate: p,
-    displayedMonth: u,
-    stateRef: n,
-    handleDateClick: (t) => {
-      const c = r ? r(t) : t;
-      s(c), D?.(c);
-    },
-    handleMonthChange: (t) => {
-      o(t);
-    },
-    clearDate: () => n.current.tempDate === null ? !1 : (s(null), !0),
-    resetDate: (t) => {
-      s(t), o(t ?? a);
-    }
-  };
-};
-export {
-  g as useSingleDateState
+import { useRef as e, useState as t } from "react";
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/hooks/use-single-date-state.ts
+var n = ({ value: n, defaultDate: r, mapDate: i, onDateSelected: a }) => {
+	let [o, s] = t(n), [c, l] = t(() => n ?? r), u = e({ tempDate: n }), d = (e) => {
+		u.current.tempDate = e, s(e);
+	};
+	return {
+		tempDate: o,
+		displayedMonth: c,
+		stateRef: u,
+		handleDateClick: (e) => {
+			let t = i ? i(e) : e;
+			d(t), a?.(t);
+		},
+		handleMonthChange: (e) => {
+			l(e);
+		},
+		clearDate: () => u.current.tempDate === null ? !1 : (d(null), !0),
+		resetDate: (e) => {
+			d(e), l(e ?? r);
+		}
+	};
 };
+//#endregion
+export { n as useSingleDateState };

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-time-state.d.ts

@@ -1,4 +1,4 @@
-import { TimeFormat } from '../../utils/format-utils';
+import { AmPm, TimeFormat } from '../../utils/format-utils';
 export interface UseTimeStateOptions {
     initialHour?: number;
     initialMinute?: number;
@@ -7,11 +7,11 @@ export interface UseTimeStateOptions {
 export interface UseTimeStateReturn {
     hour: number;
     minute: number;
-    amPm: 'AM' | 'PM';
+    amPm: AmPm;
     hour24: number;
     handleHourChange: (hour: number) => void;
     handleMinuteChange: (minute: number) => void;
-    handleAmPmChange: (amPm: 'AM' | 'PM') => void;
+    handleAmPmChange: (amPm: AmPm) => void;
     resetTime: (hour: number, minute: number) => void;
 }
 export declare const useTimeState: ({ initialHour, initialMinute, timeFormat, }?: UseTimeStateOptions) => UseTimeStateReturn;

package/dist/components/ui/core/date-time-pickers/shared/hooks/use-time-state.js

@@ -1,34 +1,25 @@
-import { useState as r, useMemo as C, useCallback as M } from "react";
-import { getAmPmFromHour as m, convert12HourTo24Hour as P, convert24HourTo12Hour as T } from "../../utils/time-utils.js";
-import { DEFAULT_START_HOUR as U, DEFAULT_MINUTE as f } from "../constants.js";
-const S = ({
-  initialHour: s = U,
-  initialMinute: a = f,
-  timeFormat: o = "24h"
-} = {}) => {
-  const l = o === "12h" ? T(s) : s, [e, u] = r(l), [p, h] = r(a), [t, c] = r(
-    () => m(s)
-  ), A = C(
-    () => o === "12h" ? P(e, t) : e,
-    [e, t, o]
-  ), H = M(
-    (n, d) => {
-      const g = o === "12h" ? T(n) : n;
-      u(g), h(d), c(m(n));
-    },
-    [o]
-  );
-  return {
-    hour: e,
-    minute: p,
-    amPm: t,
-    hour24: A,
-    handleHourChange: u,
-    handleMinuteChange: h,
-    handleAmPmChange: c,
-    resetTime: H
-  };
-};
-export {
-  S as useTimeState
+import { convert12HourTo24Hour as e, convert24HourTo12Hour as t, getAmPmFromHour as n } from "../../utils/time-utils.js";
+import { useCallback as r, useMemo as i, useState as a } from "react";
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/hooks/use-time-state.ts
+var o = ({ initialHour: o = 9, initialMinute: s = 0, timeFormat: c = "24h" } = {}) => {
+	let [l, u] = a(c === "12h" ? t(o) : o), [d, f] = a(s), [p, m] = a(() => n(o));
+	return {
+		hour: l,
+		minute: d,
+		amPm: p,
+		hour24: i(() => c === "12h" ? e(l, p) : l, [
+			l,
+			p,
+			c
+		]),
+		handleHourChange: u,
+		handleMinuteChange: f,
+		handleAmPmChange: m,
+		resetTime: r((e, r) => {
+			let i = c === "12h" ? t(e) : e;
+			u(i), f(r), m(n(e));
+		}, [c])
+	};
 };
+//#endregion
+export { o as useTimeState };

package/dist/components/ui/core/date-time-pickers/shared/scroll-cell-classes.js

@@ -1,7 +1,4 @@
-const r = "overflow-y-auto flex flex-col items-center py-2 w-9 h-72 shrink-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", o = "w-9 h-9 flex items-center justify-center rounded-lg cursor-pointer text-sm font-medium leading-[18px] tracking-normal select-none transition-colors duration-150 shrink-0", e = "bg-primary-background text-foreground-on-primary hover:bg-primary-background", n = "text-secondary-foreground hover:bg-accent-background";
-export {
-  r as SCROLL_CONTAINER_CLASSES,
-  o as SCROLL_ITEM_BASE_CLASSES,
-  e as SCROLL_ITEM_SELECTED_CLASSES,
-  n as SCROLL_ITEM_UNSELECTED_CLASSES
-};
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/scroll-cell-classes.ts
+var e = "overflow-y-auto flex flex-col items-center py-2 w-9 h-72 shrink-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", t = "w-9 h-9 flex items-center justify-center rounded-lg cursor-pointer text-sm font-medium leading-[18px] tracking-normal select-none transition-colors duration-150 shrink-0", n = "bg-primary-background text-foreground-on-primary hover:bg-primary-background", r = "text-secondary-foreground hover:bg-accent-background";
+//#endregion
+export { e as SCROLL_CONTAINER_CLASSES, t as SCROLL_ITEM_BASE_CLASSES, n as SCROLL_ITEM_SELECTED_CLASSES, r as SCROLL_ITEM_UNSELECTED_CLASSES };

package/dist/components/ui/core/date-time-pickers/shared/shortcuts-panel/shortcuts-panel.d.ts

@@ -1,13 +1,14 @@
 import { FC } from 'react';
 import { Dayjs } from 'dayjs';
+export type ShortcutValueDayjs = Dayjs | [Dayjs | null, Dayjs | null];
 export interface ShortcutItem {
     id?: string;
     label: string;
-    getValue: () => [Dayjs, Dayjs] | Dayjs | [Dayjs | null, Dayjs | null];
+    getValue: () => ShortcutValueDayjs;
 }
 export interface ShortcutsPanelProps {
     shortcuts?: ShortcutItem[];
-    onShortcutClick: (value: [Dayjs, Dayjs] | Dayjs | [Dayjs | null, Dayjs | null]) => void;
+    onShortcutClick: (value: ShortcutValueDayjs) => void;
     className?: string;
 }
 export declare const ShortcutsPanel: FC<ShortcutsPanelProps>;

package/dist/components/ui/core/date-time-pickers/shared/shortcuts-panel/shortcuts-panel.js

@@ -1,31 +1,17 @@
-import { jsx as l } from "react/jsx-runtime";
-import { cn as t } from "../../../../../../lib/utils.js";
-import { Button as n } from "../../../button/button.js";
-const i = [], m = ({
-  shortcuts: r = i,
-  onShortcutClick: a,
-  className: o
-}) => r.length === 0 ? null : /* @__PURE__ */ l(
-  "div",
-  {
-    "data-slot": "shortcuts-panel",
-    className: t(
-      "flex flex-col gap-1 p-3 border-r border-border min-w-[150px]",
-      o
-    ),
-    children: r.map((e) => /* @__PURE__ */ l(
-      n,
-      {
-        variant: "ghost",
-        size: "default",
-        className: "w-full justify-start text-secondary-foreground",
-        onClick: () => a(e.getValue()),
-        children: e.label
-      },
-      e.id ?? e.label
-    ))
-  }
-);
-export {
-  m as ShortcutsPanel
-};
+import { cn as e } from "../../../../../../lib/utils.js";
+import { Button as t } from "../../../button/button.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/shortcuts-panel/shortcuts-panel.tsx
+var r = [], i = ({ shortcuts: i = r, onShortcutClick: a, className: o }) => i.length === 0 ? null : /* @__PURE__ */ n("div", {
+	"data-slot": "shortcuts-panel",
+	className: e("flex flex-col gap-1 p-3 border-r border-border min-w-[150px]", o),
+	children: i.map((e) => /* @__PURE__ */ n(t, {
+		variant: "ghost",
+		size: "default",
+		className: "w-full justify-start text-secondary-foreground",
+		onClick: () => a(e.getValue()),
+		children: e.label
+	}, e.id ?? e.label))
+});
+//#endregion
+export { i as ShortcutsPanel };

package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.d.ts

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { AmPm } from '../../utils/format-utils';
 type TimePickerPanelBaseProps = {
     hour: number;
     minute: number;
@@ -8,8 +9,8 @@ type TimePickerPanelBaseProps = {
 };
 export type TimePickerPanelProps = TimePickerPanelBaseProps & ({
     timeFormat: '12h';
-    amPm: 'AM' | 'PM';
-    onAmPmChange: (amPm: 'AM' | 'PM') => void;
+    amPm: AmPm;
+    onAmPmChange: (amPm: AmPm) => void;
 } | {
     timeFormat?: '24h';
     amPm?: undefined;

package/dist/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.js

@@ -1,41 +1,41 @@
-import { jsxs as r, jsx as e, Fragment as c } from "react/jsx-runtime";
-import { cn as h } from "../../../../../../lib/utils.js";
-import { AmPmScroll as d } from "../am-pm-scroll/am-pm-scroll.js";
-import { TimePickerScroll as a } from "../time-picker-scroll/time-picker-scroll.js";
-const f = (m) => {
-  const { hour: t, minute: i, onHourChange: n, onMinuteChange: l, className: o } = m, s = m.timeFormat ?? "24h";
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      "data-slot": "time-picker-panel",
-      className: h("flex items-stretch", o),
-      children: [
-        /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(
-          a,
-          {
-            value: t,
-            onChange: n,
-            type: "hour",
-            timeFormat: s
-          }
-        ) }),
-        /* @__PURE__ */ e("div", { className: "w-px bg-border shrink-0 self-stretch" }),
-        /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(
-          a,
-          {
-            value: i,
-            onChange: l,
-            type: "minute"
-          }
-        ) }),
-        m.timeFormat === "12h" && /* @__PURE__ */ r(c, { children: [
-          /* @__PURE__ */ e("div", { className: "w-px bg-border shrink-0 self-stretch" }),
-          /* @__PURE__ */ e("div", { className: "px-3", children: /* @__PURE__ */ e(d, { value: m.amPm, onChange: m.onAmPmChange }) })
-        ] })
-      ]
-    }
-  );
-};
-export {
-  f as TimePickerPanel
+import { cn as e } from "../../../../../../lib/utils.js";
+import { AmPmScroll as t } from "../am-pm-scroll/am-pm-scroll.js";
+import { TimePickerScroll as n } from "../time-picker-scroll/time-picker-scroll.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/time-picker-panel/time-picker-panel.tsx
+var o = (o) => {
+	let { hour: s, minute: c, onHourChange: l, onMinuteChange: u, className: d } = o, f = o.timeFormat ?? "24h";
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "time-picker-panel",
+		className: e("flex items-stretch", d),
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "px-3",
+				children: /* @__PURE__ */ i(n, {
+					value: s,
+					onChange: l,
+					type: "hour",
+					timeFormat: f
+				})
+			}),
+			/* @__PURE__ */ i("div", { className: "w-px bg-border shrink-0 self-stretch" }),
+			/* @__PURE__ */ i("div", {
+				className: "px-3",
+				children: /* @__PURE__ */ i(n, {
+					value: c,
+					onChange: u,
+					type: "minute"
+				})
+			}),
+			o.timeFormat === "12h" && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", { className: "w-px bg-border shrink-0 self-stretch" }), /* @__PURE__ */ i("div", {
+				className: "px-3",
+				children: /* @__PURE__ */ i(t, {
+					value: o.amPm,
+					onChange: o.onAmPmChange
+				})
+			})] })
+		]
+	});
 };
+//#endregion
+export { o as TimePickerPanel };

package/dist/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.js

@@ -1,52 +1,35 @@
+import { cn as e } from "../../../../../../lib/utils.js";
+import { SCROLL_CONTAINER_CLASSES as t, SCROLL_ITEM_BASE_CLASSES as n, SCROLL_ITEM_SELECTED_CLASSES as r, SCROLL_ITEM_UNSELECTED_CLASSES as i } from "../scroll-cell-classes.js";
+import { generateHours as a, generateMinutes as o } from "../../utils/time-utils.js";
+import { useEffect as s, useRef as c } from "react";
 import { jsx as l } from "react/jsx-runtime";
-import { useRef as f, useEffect as p } from "react";
-import { cn as E } from "../../../../../../lib/utils.js";
-import { generateHours as C, generateMinutes as d } from "../../utils/time-utils.js";
-import { MIDNIGHT_HOUR as h, HOURS_IN_12H as s } from "../constants.js";
-import { SCROLL_ITEM_SELECTED_CLASSES as u, SCROLL_ITEM_UNSELECTED_CLASSES as R, SCROLL_ITEM_BASE_CLASSES as T, SCROLL_CONTAINER_CLASSES as a } from "../scroll-cell-classes.js";
-const M = ({
-  value: r,
-  onChange: m,
-  type: c,
-  timeFormat: i = "24h",
-  className: L
-}) => {
-  const e = f(null), n = f(null), _ = c === "hour" ? C(i) : d(), S = r === null ? null : c === "hour" && i === "12h" ? r === h ? s : r > s ? r - s : r : r;
-  return p(() => {
-    if (r !== null && n.current && e.current) {
-      const o = e.current, t = n.current;
-      o.scrollTo({
-        top: t.offsetTop - o.offsetHeight / 2 + t.offsetHeight / 2,
-        behavior: "smooth"
-      });
-    }
-  }, [r]), /* @__PURE__ */ l(
-    "div",
-    {
-      "data-slot": "time-picker-scroll",
-      ref: e,
-      className: E(a, L),
-      children: _.map((o) => {
-        const t = S !== null && o === S;
-        return /* @__PURE__ */ l(
-          "div",
-          {
-            ref: t ? n : void 0,
-            className: E(
-              T,
-              t ? u : R
-            ),
-            onClick: () => m(o),
-            role: "option",
-            "aria-selected": t,
-            children: o.toString().padStart(2, "0")
-          },
-          o
-        );
-      })
-    }
-  );
-};
-export {
-  M as TimePickerScroll
+//#region libs/aura/src/components/ui/core/date-time-pickers/shared/time-picker-scroll/time-picker-scroll.tsx
+var u = ({ value: u, onChange: d, type: f, timeFormat: p = "24h", className: m }) => {
+	let h = c(null), g = c(null), _ = f === "hour" ? a(p) : o(), v = u === null ? null : f === "hour" && p === "12h" ? u === 0 ? 12 : u > 12 ? u - 12 : u : u;
+	return s(() => {
+		if (u !== null && g.current && h.current) {
+			let e = h.current, t = g.current;
+			e.scrollTo({
+				top: t.offsetTop - e.offsetHeight / 2 + t.offsetHeight / 2,
+				behavior: "smooth"
+			});
+		}
+	}, [u]), /* @__PURE__ */ l("div", {
+		"data-slot": "time-picker-scroll",
+		ref: h,
+		className: e(t, m),
+		children: _.map((t) => {
+			let a = v !== null && t === v;
+			return /* @__PURE__ */ l("div", {
+				ref: a ? g : void 0,
+				className: e(n, a ? r : i),
+				onClick: () => d(t),
+				role: "option",
+				"aria-selected": a,
+				children: t.toString().padStart(2, "0")
+			}, t);
+		})
+	});
 };
+//#endregion
+export { u as TimePickerScroll };

package/dist/components/ui/core/date-time-pickers/time-picker/time-picker.js

@@ -1,100 +1,79 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import { cn as T } from "../../../../../lib/utils.js";
-import { Button as b } from "../../button/button.js";
-import { Popover as w, PopoverTrigger as H, PopoverContent as M } from "../../popover/popover.js";
-import { DateTimeInput as O } from "../shared/date-time-input/date-time-input.js";
-import { ShortcutsPanel as S } from "../shared/shortcuts-panel/shortcuts-panel.js";
-import { TimePickerPanel as h } from "../shared/time-picker-panel/time-picker-panel.js";
-import { useTimePicker as j } from "./use-time-picker.js";
-const z = ({
-  value: p,
-  onChange: c,
-  timeFormat: r = "24h",
-  format: d,
-  placeholder: s,
-  shortcuts: n,
-  defaultDate: f,
-  className: u
-}) => {
-  const g = d ?? (r === "12h" ? "h:mm A" : "HH:mm"), {
-    isOpen: a,
-    hour: i,
-    minute: l,
-    amPm: v,
-    displayValue: C,
-    handleOpenChange: P,
-    handleApply: x,
-    handleHourChange: t,
-    handleMinuteChange: m,
-    handleAmPmChange: k,
-    handleApplyShortcut: N,
-    inputRef: y,
-    popoverRef: A
-  } = j({ value: p, onChange: c, timeFormat: r, defaultDate: f });
-  return /* @__PURE__ */ e("div", { "data-slot": "time-picker", className: T("relative w-full", u), children: /* @__PURE__ */ o(w, { open: a, onOpenChange: P, children: [
-    /* @__PURE__ */ e(H, { render: /* @__PURE__ */ e("div", { ref: y, className: "w-full" }), children: /* @__PURE__ */ e(
-      O,
-      {
-        value: C,
-        format: g,
-        placeholder: s,
-        isOpen: a,
-        variant: "time",
-        ariaLabel: "Time picker"
-      }
-    ) }),
-    /* @__PURE__ */ e(
-      M,
-      {
-        ref: A,
-        className: "rounded-xl w-auto p-0",
-        side: "bottom",
-        align: "start",
-        children: /* @__PURE__ */ o("div", { "data-slot": "time-picker-content", className: "flex flex-col", children: [
-          /* @__PURE__ */ o("div", { className: "flex flex-row", children: [
-            n && n.length > 0 && /* @__PURE__ */ e(
-              S,
-              {
-                shortcuts: n,
-                onShortcutClick: N
-              }
-            ),
-            r === "12h" ? /* @__PURE__ */ e(
-              h,
-              {
-                hour: i,
-                minute: l,
-                amPm: v,
-                timeFormat: "12h",
-                onHourChange: t,
-                onMinuteChange: m,
-                onAmPmChange: k
-              }
-            ) : /* @__PURE__ */ e(
-              h,
-              {
-                hour: i,
-                minute: l,
-                timeFormat: "24h",
-                onHourChange: t,
-                onMinuteChange: m
-              }
-            )
-          ] }),
-          /* @__PURE__ */ e("div", { className: "flex p-2 border-t border-border", children: /* @__PURE__ */ e(
-            b,
-            {
-              variant: "secondary",
-              className: "w-full",
-              onClick: x,
-              children: "Apply"
-            }
-          ) })
-        ] })
-      }
-    )
-  ] }) });
-};
-export {
-  z as TimePicker
+import { cn as e } from "../../../../../lib/utils.js";
+import { Button as t } from "../../button/button.js";
+import { Popover as n, PopoverContent as r, PopoverTrigger as i } from "../../popover/popover.js";
+import { DateTimeInput as a } from "../shared/date-time-input/date-time-input.js";
+import { ShortcutsPanel as o } from "../shared/shortcuts-panel/shortcuts-panel.js";
+import { TimePickerPanel as s } from "../shared/time-picker-panel/time-picker-panel.js";
+import { useTimePicker as c } from "./use-time-picker.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region libs/aura/src/components/ui/core/date-time-pickers/time-picker/time-picker.tsx
+var d = ({ value: d, onChange: f, timeFormat: p = "24h", format: m, placeholder: h, shortcuts: g, defaultDate: _, className: v }) => {
+	let y = m ?? (p === "12h" ? "h:mm A" : "HH:mm"), { isOpen: b, hour: x, minute: S, amPm: C, displayValue: w, handleOpenChange: T, handleApply: E, handleHourChange: D, handleMinuteChange: O, handleAmPmChange: k, handleApplyShortcut: A, inputRef: j, popoverRef: M } = c({
+		value: d,
+		onChange: f,
+		timeFormat: p,
+		defaultDate: _
+	});
+	return /* @__PURE__ */ l("div", {
+		"data-slot": "time-picker",
+		className: e("relative w-full", v),
+		children: /* @__PURE__ */ u(n, {
+			open: b,
+			onOpenChange: T,
+			children: [/* @__PURE__ */ l(i, {
+				render: /* @__PURE__ */ l("div", {
+					ref: j,
+					className: "w-full"
+				}),
+				children: /* @__PURE__ */ l(a, {
+					value: w,
+					format: y,
+					placeholder: h,
+					isOpen: b,
+					variant: "time",
+					ariaLabel: "Time picker"
+				})
+			}), /* @__PURE__ */ l(r, {
+				ref: M,
+				className: "rounded-xl w-auto p-0",
+				side: "bottom",
+				align: "start",
+				children: /* @__PURE__ */ u("div", {
+					"data-slot": "time-picker-content",
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ u("div", {
+						className: "flex flex-row",
+						children: [g && g.length > 0 && /* @__PURE__ */ l(o, {
+							shortcuts: g,
+							onShortcutClick: A
+						}), p === "12h" ? /* @__PURE__ */ l(s, {
+							hour: x,
+							minute: S,
+							amPm: C,
+							timeFormat: "12h",
+							onHourChange: D,
+							onMinuteChange: O,
+							onAmPmChange: k
+						}) : /* @__PURE__ */ l(s, {
+							hour: x,
+							minute: S,
+							timeFormat: "24h",
+							onHourChange: D,
+							onMinuteChange: O
+						})]
+					}), /* @__PURE__ */ l("div", {
+						className: "flex p-2 border-t border-border",
+						children: /* @__PURE__ */ l(t, {
+							variant: "secondary",
+							className: "w-full",
+							onClick: E,
+							children: "Apply"
+						})
+					})]
+				})
+			})]
+		})
+	});
 };
+//#endregion
+export { d as TimePicker };

package/dist/components/ui/core/date-time-pickers/time-picker/types.d.ts

@@ -1,5 +1,6 @@
 import { Dayjs } from 'dayjs';
-import { TimeFormat } from '../utils/format-utils';
+import { ShortcutValueDayjs } from '../shared/shortcuts-panel/shortcuts-panel';
+import { AmPm, TimeFormat } from '../utils/format-utils';
 export interface UseTimePickerProps {
     value: Dayjs | null;
     onChange: (time: Dayjs | null) => void;
@@ -10,14 +11,14 @@ export interface UseTimePickerReturn {
     isOpen: boolean;
     hour: number;
     minute: number;
-    amPm: 'AM' | 'PM';
+    amPm: AmPm;
     displayValue: Dayjs | null;
     handleOpenChange: (open: boolean) => void;
     handleApply: () => void;
     handleHourChange: (hour: number) => void;
     handleMinuteChange: (minute: number) => void;
-    handleAmPmChange: (amPm: 'AM' | 'PM') => void;
-    handleApplyShortcut: (shortcutValue: Dayjs | [Dayjs, Dayjs] | [Dayjs | null, Dayjs | null]) => void;
+    handleAmPmChange: (amPm: AmPm) => void;
+    handleApplyShortcut: (shortcutValue: ShortcutValueDayjs) => void;
     inputRef: React.RefObject<HTMLDivElement>;
     popoverRef: React.RefObject<HTMLDivElement>;
 }