@wisdomgarden/torque 0.1.0

package/dist/components/date-picker/components/common/month-view.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsxs as v, jsx as u } from "react/jsx-runtime";
+import { clsx as a } from "clsx";
+import { DateRangeMembership as t } from "../../date-picker.types.js";
+import { useCalendar as x, useWeekdayLabels as B } from "../../hooks/use-calendar.js";
+import f from "../../styles/month-view.module.css.js";
+import { DateCell as C } from "./date-cell.js";
+const S = (i, s, o, r, l) => {
+  const n = !!s && i.isSame(s, "day"), d = !!o && i.isSame(o, "day");
+  return n && d ? t.Both : n ? t.Start : d ? t.End : s && o && i.isAfter(s, "day") && i.isBefore(o, "day") ? t.InRange : r && l && i.isAfter(r, "day") && i.isBefore(l, "day") ? t.Preview : t.None;
+}, E = ({
+  currentMonth: i,
+  selectedDate: s,
+  focusedDate: o,
+  rangeStart: r,
+  rangeEnd: l,
+  rangeHover: n,
+  isDisabled: d,
+  classNames: m,
+  onSelect: p,
+  onHover: h,
+  onFocusCell: y
+}) => {
+  const w = x(i), k = B(), [M, b] = !r || !n || l ? [null, null] : r.isBefore(n) ? [r, n] : [n, r];
+  return /* @__PURE__ */ v("div", { children: [
+    /* @__PURE__ */ u("div", { role: "row", className: a(f.weekdays, m?.weekdays), children: k.map((e, c) => /* @__PURE__ */ u(
+      "div",
+      {
+        role: "columnheader",
+        className: a(f.weekday, m?.weekday),
+        children: e
+      },
+      c
+    )) }),
+    /* @__PURE__ */ u("div", { role: "rowgroup", className: a(f.grid, m?.grid), children: w.map((e) => {
+      const c = S(
+        e.date,
+        r,
+        l,
+        M,
+        b
+      );
+      return /* @__PURE__ */ u(
+        C,
+        {
+          date: e.date,
+          isCurrentMonth: e.isCurrentMonth,
+          isToday: e.isToday,
+          isSelected: !!s && e.date.isSame(s, "day"),
+          isDisabled: d(e.date),
+          isFocused: !!o && e.date.isSame(o, "day"),
+          rangeMembership: c,
+          className: m?.cell,
+          onSelect: p,
+          onHover: h,
+          onFocusCell: y
+        },
+        e.date.valueOf()
+      );
+    }) })
+  ] });
+};
+export {
+  E as MonthView
+};

package/dist/components/date-picker/components/common/picker-footer.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+/**
+ * DatePicker 家族统一的底部操作栏。
+ *
+ * 布局：可选的 `leftSlot`（例如「今日」快捷按钮）占据左侧，
+ * 「取消」「确定」始终贴右。无 `leftSlot` 时整体右对齐；有 `leftSlot`
+ * 时形成 space-between 的视觉效果，不需要额外容器。
+ *
+ * 与 `<PickerShell>` 和 `<RangeShell>` 解耦：本组件只渲染按钮与响应点击，
+ * 提交 / 回滚的业务逻辑由调用方在 `onCancel` / `onConfirm` 里处理。
+ */
+export interface PickerFooterProps {
+    /** 左侧扩展槽，DateTimePicker 放「今日」 */
+    readonly leftSlot?: ReactNode;
+    /** 取消按钮文案，默认 `locale.cancel` */
+    readonly cancelLabel?: ReactNode;
+    /** 确定按钮文案，默认 `locale.ok` */
+    readonly confirmLabel?: ReactNode;
+    /** 根节点附加 className */
+    readonly className?: string;
+    /** 确定按钮是否禁用 */
+    readonly confirmDisabled?: boolean;
+    /** 取消点击回调 */
+    readonly onCancel: () => void;
+    /** 确定点击回调 */
+    readonly onConfirm: () => void;
+}
+export declare const PickerFooter: ({ leftSlot, cancelLabel, confirmLabel, className, confirmDisabled, onCancel, onConfirm, }: PickerFooterProps) => import("react").JSX.Element;

package/dist/components/date-picker/components/common/picker-footer.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { clsx as p } from "clsx";
+import "../../../../provider/ui-context.js";
+import "react";
+import { useLocale as f } from "../../../../provider/hooks.js";
+import { Button as e } from "../../../button/button.js";
+import s from "../../styles/picker-footer.module.css.js";
+const C = ({
+  leftSlot: t,
+  cancelLabel: c,
+  confirmLabel: l,
+  className: m,
+  confirmDisabled: n,
+  onCancel: a,
+  onConfirm: d
+}) => {
+  const o = f();
+  return /* @__PURE__ */ r("div", { className: p(s.root, m), children: [
+    t,
+    /* @__PURE__ */ r("div", { className: s.actions, children: [
+      /* @__PURE__ */ i(e, { variant: "stroke", size: "sm", onClick: a, children: c ?? o.cancel }),
+      /* @__PURE__ */ i(e, { size: "sm", disabled: n, onClick: d, children: l ?? o.ok })
+    ] })
+  ] });
+};
+export {
+  C as PickerFooter
+};

package/dist/components/date-picker/components/common/picker-sections.d.ts

@@ -0,0 +1,14 @@
+interface PickerRightSectionProps {
+    readonly rightSection?: React.ReactNode;
+    readonly clearable?: boolean;
+    readonly canClear?: boolean;
+    readonly disabled?: boolean;
+    readonly readOnly?: boolean;
+    readonly onClear: () => void;
+}
+/**
+ * 日期 / 时间选择器输入框的右侧区域。
+ * 负责渲染清除按钮或自定义内容。
+ */
+export declare const PickerRightSection: ({ rightSection, clearable, canClear, disabled, readOnly, onClear, }: PickerRightSectionProps) => import("react").JSX.Element | null;
+export {};

package/dist/components/date-picker/components/common/picker-sections.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as o, Fragment as m } from "react/jsx-runtime";
+import "../../../../provider/ui-context.js";
+import "react";
+import { useLocale as s } from "../../../../provider/hooks.js";
+import { IconButton as u } from "../../../icon-button/icon-button.js";
+const k = ({
+  rightSection: r,
+  clearable: e = !0,
+  canClear: t = !1,
+  disabled: l = !1,
+  readOnly: a = !1,
+  onClear: i
+}) => {
+  const n = s();
+  return r !== void 0 ? /* @__PURE__ */ o(m, { children: r }) : e && t && !l && !a ? /* @__PURE__ */ o(
+    u,
+    {
+      variant: "text",
+      color: "regular",
+      "aria-label": n.clear,
+      onClick: (c) => {
+        c.stopPropagation(), i();
+      },
+      iconName: "close"
+    }
+  ) : null;
+};
+export {
+  k as PickerRightSection
+};

package/dist/components/date-picker/components/common/picker-target-input.d.ts

@@ -0,0 +1,7 @@
+import type { BaseInputProps } from '../../../base-input';
+type PickerTargetInputProps = Omit<BaseInputProps, 'ref' | 'wrapperRef'> & {
+    readonly ref?: React.Ref<HTMLDivElement>;
+    readonly inputRef?: React.Ref<HTMLInputElement>;
+};
+export declare const PickerTargetInput: ({ ref, inputRef, ...props }: PickerTargetInputProps) => import("react").JSX.Element;
+export {};

package/dist/components/date-picker/components/common/picker-target-input.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { BaseInput as o } from "../../../base-input/base-input.js";
+const i = ({
+  ref: r,
+  inputRef: e,
+  ...t
+}) => /* @__PURE__ */ p(o, { ...t, ref: e, wrapperRef: r });
+export {
+  i as PickerTargetInput
+};

package/dist/components/date-picker/components/common/time-column.d.ts

@@ -0,0 +1,6 @@
+import type { TimeColumnProps } from '../../date-picker.types';
+/**
+ * 时间面板中的单列可滚动选择器。
+ * 支持键盘导航与平滑滚动。
+ */
+export declare const TimeColumn: ({ items, value, disabledValues, label, pad, formatLabel, onChange, classNames, asInitialFocus, }: TimeColumnProps) => import("react").JSX.Element;

package/dist/components/date-picker/components/common/time-column.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as D } from "react/jsx-runtime";
+import { clsx as I } from "clsx";
+import { useRef as u, useState as w, useCallback as R, useMemo as j, useEffect as L } from "react";
+import S from "../../styles/time-column.module.css.js";
+import { useRegisterPickerFocus as M } from "../picker-focus-context.js";
+const z = ({
+  items: r,
+  value: o,
+  disabledValues: m,
+  label: l,
+  pad: C = !0,
+  formatLabel: p,
+  onChange: b,
+  classNames: h,
+  asInitialFocus: $ = !1
+}) => {
+  const f = u(null), [y, A] = w(null), E = R((e) => {
+    f.current = e, A(e);
+  }, []);
+  M($ ? y : null);
+  const x = u({}), d = j(
+    () => new Set(m ?? []),
+    [m]
+  ), [c, i] = w(() => {
+    if (o === null) return 0;
+    const e = r.indexOf(o);
+    return e >= 0 ? e : 0;
+  }), a = (e) => d.has(e), k = u(!0);
+  L(() => {
+    if (o === null) return;
+    const e = x.current[o];
+    if (e && f.current) {
+      const t = f.current, n = e.offsetTop - t.clientHeight / 2 + e.clientHeight / 2;
+      t.scrollTo({
+        top: n,
+        behavior: k.current ? "auto" : "smooth"
+      }), k.current = !1;
+    }
+  }, [o]);
+  const g = R(
+    (e) => {
+      i((t) => {
+        let n = t + e;
+        for (let s = 0; s < r.length && (n < 0 && (n = r.length - 1), n >= r.length && (n = 0), !!d.has(r[n])); s++)
+          n += e;
+        return n;
+      });
+    },
+    [r, d]
+  ), F = (e) => {
+    switch (e.key) {
+      case "ArrowUp":
+        e.preventDefault(), g(-1);
+        break;
+      case "ArrowDown":
+        e.preventDefault(), g(1);
+        break;
+      case "Home":
+        e.preventDefault(), i(r.findIndex((t) => !a(t)));
+        break;
+      case "End":
+        e.preventDefault();
+        for (let t = r.length - 1; t >= 0; t--)
+          if (!a(r[t])) {
+            i(t);
+            break;
+          }
+        break;
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        const t = r[c];
+        a(t) || b(t);
+        break;
+      }
+    }
+  }, H = c >= 0 ? `time-item-${l}-${r[c]}` : void 0;
+  return /* @__PURE__ */ D(
+    "div",
+    {
+      ref: E,
+      role: "listbox",
+      "aria-label": l,
+      "aria-activedescendant": H,
+      tabIndex: 0,
+      onKeyDown: F,
+      className: I(S.timeColumn, h?.timeColumn),
+      children: r.map((e, t) => {
+        const n = a(e), s = o === e, N = t === c, T = p ? p(e) : C ? String(e).padStart(2, "0") : String(e);
+        return (
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
+          /* @__PURE__ */ D(
+            "div",
+            {
+              id: `time-item-${l}-${e}`,
+              ref: (K) => {
+                x.current[e] = K;
+              },
+              role: "option",
+              "aria-selected": s,
+              "aria-disabled": n,
+              "data-selected": s,
+              "data-disabled": n,
+              "data-focused": N,
+              className: I(S.timeItem, h?.timeItem),
+              onClick: () => {
+                n || (b(e), i(t));
+              },
+              children: T
+            },
+            e
+          )
+        );
+      })
+    }
+  );
+};
+export {
+  z as TimeColumn
+};

package/dist/components/date-picker/components/common/time-input-row.d.ts

@@ -0,0 +1,20 @@
+import type { TimeValue } from '../../date-picker.types';
+import type { Dayjs } from 'dayjs';
+export interface TimeInputRowProps {
+    readonly label: string;
+    readonly d: Dayjs | null;
+    readonly withSeconds: boolean;
+    readonly use12Hours: boolean;
+    readonly hourStep?: number;
+    readonly minuteStep?: number;
+    readonly secondStep?: number;
+    readonly disabledHours?: () => number[];
+    readonly disabledMinutes?: (hour: number) => number[];
+    readonly disabledSeconds?: (hour: number, minute: number) => number[];
+    readonly onTimeChange?: (tv: TimeValue) => void;
+    readonly showDateStr?: boolean;
+}
+/**
+ * 日期和时间一起选择的时候，时间以下拉框形式选择
+ */
+export declare const TimeInputRow: ({ label, d, withSeconds, use12Hours, hourStep, minuteStep, secondStep, disabledHours, disabledMinutes, disabledSeconds, onTimeChange, showDateStr, }: TimeInputRowProps) => import("react").JSX.Element;

package/dist/components/date-picker/components/common/time-input-row.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { Button as T } from "../../../button/button.js";
+import { Popover as m } from "../../../popover/index.js";
+import { toTimeValue as b, ZERO_TIME as H } from "../../hooks/time-utils.js";
+import { formatOrEmpty as n } from "../../hooks/use-date-parser.js";
+import r from "../../styles/time-input-row.module.css.js";
+import { TimePanel as Y } from "./time-panel.js";
+const j = ({
+  label: a,
+  d: t,
+  withSeconds: i,
+  use12Hours: s,
+  hourStep: l,
+  minuteStep: p,
+  secondStep: c,
+  disabledHours: u,
+  disabledMinutes: d,
+  disabledSeconds: f,
+  onTimeChange: h,
+  showDateStr: I = !0
+}) => {
+  const v = t ? n(t, i ? "HH:mm:ss" : "HH:mm") : "--:--", D = t ? n(t, "YYYY/MM/DD") : "----/--/--";
+  return /* @__PURE__ */ o("div", { className: r.timeInputRow, children: [
+    /* @__PURE__ */ o("span", { className: r.timeInputLabel, children: [
+      a,
+      ":"
+    ] }),
+    /* @__PURE__ */ o("div", { className: r.timeInputValueGroup, children: [
+      I && /* @__PURE__ */ e("span", { className: r.timeInputDateStr, children: D }),
+      /* @__PURE__ */ o(m, { position: "bottom-end", children: [
+        /* @__PURE__ */ e(m.Target, { children: /* @__PURE__ */ e(
+          T,
+          {
+            type: "button",
+            disabled: !t,
+            size: "md",
+            color: "regular",
+            variant: "stroke",
+            children: v
+          }
+        ) }),
+        /* @__PURE__ */ e(m.Dropdown, { className: r.timeInputDropdown, children: /* @__PURE__ */ e(
+          Y,
+          {
+            value: b(t, H),
+            withSeconds: i,
+            use12Hours: s,
+            hourStep: l,
+            minuteStep: p,
+            secondStep: c,
+            disabledHours: u,
+            disabledMinutes: d,
+            disabledSeconds: f,
+            onChange: (N) => h?.(N),
+            asInitialFocus: !1
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  j as TimeInputRow
+};

package/dist/components/date-picker/components/common/time-panel.d.ts

@@ -0,0 +1,6 @@
+import type { TimePanelProps } from '../../date-picker.types';
+/**
+ * 时间面板：由多列 `TimeColumn` 组成（小时 / 分钟 / 秒 / AM-PM）。
+ * 处理时间部分的选择与禁用级联逻辑。
+ */
+export declare const TimePanel: ({ value, withSeconds, use12Hours, hourStep, minuteStep, secondStep, disabledHours, disabledMinutes, disabledSeconds, classNames, onChange, asInitialFocus, }: TimePanelProps) => import("react").JSX.Element;

package/dist/components/date-picker/components/common/time-panel.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsxs as y, jsx as s } from "react/jsx-runtime";
+import { clsx as H } from "clsx";
+import "../../../../provider/ui-context.js";
+import "react";
+import { useLocale as k } from "../../../../provider/hooks.js";
+import q from "../../styles/time-panel.module.css.js";
+import { TimeColumn as m } from "./time-column.js";
+const a = (c, d, t) => {
+  const r = [];
+  for (let i = c; i < d; i += t) r.push(i);
+  return r;
+}, I = ({
+  value: c,
+  withSeconds: d = !1,
+  use12Hours: t = !1,
+  hourStep: r = 1,
+  minuteStep: i = 1,
+  secondStep: M = 1,
+  disabledHours: b,
+  disabledMinutes: v,
+  disabledSeconds: A,
+  classNames: l,
+  onChange: u,
+  asInitialFocus: P = !0
+}) => {
+  const h = k(), e = c ?? { hour: 0, minute: 0, second: 0 }, x = a(0, 24, r), g = a(1, 13, r), V = a(0, 60, i), j = a(0, 60, M), C = t ? e.hour === 0 ? 12 : e.hour > 12 ? e.hour - 12 : e.hour : e.hour, f = e.hour >= 12 ? "PM" : "AM", L = (o) => {
+    let n = o;
+    t && (f === "AM" ? n = o === 12 ? 0 : o : n = o === 12 ? 12 : o + 12), u({ ...e, hour: n });
+  }, T = (o) => {
+    const n = o === 1;
+    let p = e.hour % 12;
+    n && (p += 12), u({ ...e, hour: p });
+  };
+  return /* @__PURE__ */ y("div", { role: "group", className: H(q.time, l?.time), children: [
+    /* @__PURE__ */ s(
+      m,
+      {
+        items: t ? g : x,
+        value: C,
+        disabledValues: b?.(),
+        label: h.time.hour,
+        onChange: L,
+        classNames: l,
+        asInitialFocus: P
+      }
+    ),
+    /* @__PURE__ */ s(
+      m,
+      {
+        items: V,
+        value: e.minute,
+        disabledValues: v?.(e.hour),
+        label: h.time.minute,
+        onChange: (o) => u({ ...e, minute: o }),
+        classNames: l
+      }
+    ),
+    d && /* @__PURE__ */ s(
+      m,
+      {
+        items: j,
+        value: e.second,
+        disabledValues: A?.(e.hour, e.minute),
+        label: h.time.second,
+        onChange: (o) => u({ ...e, second: o }),
+        classNames: l
+      }
+    ),
+    t && /* @__PURE__ */ s(
+      m,
+      {
+        items: [0, 1],
+        value: f === "AM" ? 0 : 1,
+        label: "AM/PM",
+        pad: !1,
+        formatLabel: (o) => o === 0 ? "AM" : "PM",
+        onChange: (o) => T(o),
+        classNames: l
+      }
+    )
+  ] });
+};
+export {
+  I as TimePanel
+};

package/dist/components/date-picker/components/common/year-view.d.ts

@@ -0,0 +1,8 @@
+import type { Dayjs } from 'dayjs';
+export interface YearViewProps {
+    readonly currentMonth: Dayjs;
+    readonly minDate?: Date | string;
+    readonly maxDate?: Date | string;
+    readonly onSelectMonth: (month: number) => void;
+}
+export declare const YearView: ({ currentMonth, minDate, maxDate, onSelectMonth, }: YearViewProps) => import("react").JSX.Element;

package/dist/components/date-picker/components/common/year-view.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { dayjs as e } from "../../../../common/dayjs.js";
+import c from "../../styles/year-view.module.css.js";
+const y = ({
+  currentMonth: n,
+  minDate: s,
+  maxDate: o,
+  onSelectMonth: m
+}) => {
+  const d = Array.from({ length: 12 }, (t, r) => r), f = n.month(), a = s ? e(s).startOf("month") : null, i = o ? e(o).endOf("month") : null, u = (t) => {
+    const r = n.month(t);
+    return !!(a && r.isBefore(a, "month") || i && r.isAfter(i, "month"));
+  };
+  return /* @__PURE__ */ l("div", { className: c.grid, children: d.map((t) => {
+    const r = u(t);
+    return /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: c.cell,
+        "data-active": t === f,
+        "data-disabled": r,
+        disabled: r,
+        onClick: () => {
+          r || m(t);
+        },
+        children: e().month(t).format("MMM")
+      },
+      t
+    );
+  }) });
+};
+export {
+  y as YearView
+};

package/dist/components/date-picker/components/picker-focus-context.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 在 Shell 和 Panel 之间传递"初始焦点目标"的通道。
+ *
+ * 动机：Popover 需要一个 `initialFocusRef` 才能把焦点精确送到期望元素，
+ * 但这个元素由 Panel（CalendarPanel/TimePanel/TimeColumn）计算得出。
+ * 若通过 props 一路传 ref，picker 层要声明 ref、往下传两次，噪声大。
+ * Context 让 Panel 直接"汇报"自己要聚焦的 DOM，Shell 透明地收集并转给 Popover。
+ */
+export interface PickerFocusContextValue {
+    /** Panel 调用以登记期望接收初始焦点的 DOM 节点；传 `null` 表示撤销 */
+    register: (el: HTMLElement | null) => void;
+}
+export declare const PickerFocusContext: import("react").Context<PickerFocusContextValue | null>;
+/**
+ * 在 Panel / Column 里声明"这就是打开弹层后应该收到焦点的元素"。
+ *
+ * `el` 为 `null` 时不做登记也不撤销 —— 避免不打算参与的兄弟组件
+ * （如 DateTimePicker 中的 TimePanel）把前面 Panel 登记的目标清掉。
+ * 组件卸载时自动撤销登记。
+ */
+export declare function useRegisterPickerFocus(el: HTMLElement | null): void;

package/dist/components/date-picker/components/picker-focus-context.js

@@ -0,0 +1,16 @@
+"use client";
+import { createContext as r, useContext as n, useEffect as c } from "react";
+const o = r(
+  null
+);
+function u(t) {
+  const e = n(o);
+  c(() => {
+    if (!(!e || !t))
+      return e.register(t), () => e.register(null);
+  }, [e, t]);
+}
+export {
+  o as PickerFocusContext,
+  u as useRegisterPickerFocus
+};

package/dist/components/date-picker/components/range/range-panel.d.ts

@@ -0,0 +1,33 @@
+import type { DateRangePreset, DisabledTimeFns, PickerClassNames, TimeValue } from '../../date-picker.types';
+import type { Dayjs } from 'dayjs';
+/**
+ * 范围选择面板（日期范围 / 日期+时间范围共用）。
+ * 处理起止日期的选择、悬停及面板视图组合。
+ */
+export interface RangePanelProps {
+    readonly currentRange: [Dayjs | null, Dayjs | null];
+    readonly hover: Dayjs | null;
+    readonly viewMonth: Dayjs;
+    readonly minDate?: Date | string;
+    readonly maxDate?: Date | string;
+    readonly shouldDisableDate?: (date: Date) => boolean;
+    readonly classNames?: PickerClassNames;
+    readonly withTime?: boolean;
+    readonly withSeconds?: boolean;
+    readonly use12Hours?: boolean;
+    readonly hourStep?: number;
+    readonly minuteStep?: number;
+    readonly secondStep?: number;
+    readonly disabledTimeStart?: DisabledTimeFns;
+    readonly disabledTimeEnd?: DisabledTimeFns;
+    readonly presets?: DateRangePreset[];
+    readonly onViewMonthChange: (d: Dayjs) => void;
+    readonly onSelect: (d: Dayjs) => void;
+    readonly onHover: (hover: Dayjs | null) => void;
+    readonly onTimeChange?: (idx: 0 | 1, tv: TimeValue) => void;
+    readonly onCommitPreset: (range: [Dayjs | null, Dayjs | null]) => void;
+    readonly confirmDisabled?: boolean;
+    readonly onCancel: () => void;
+    readonly onConfirm: () => void;
+}
+export declare const RangePanel: ({ currentRange, hover, viewMonth, minDate, maxDate, shouldDisableDate, classNames, withTime, withSeconds, use12Hours, hourStep, minuteStep, secondStep, disabledTimeStart, disabledTimeEnd, presets, onViewMonthChange, onSelect, onHover, onTimeChange, onCommitPreset, onCancel, onConfirm, confirmDisabled, }: RangePanelProps) => import("react").JSX.Element;