@wisdomgarden/torque 0.1.0

package/dist/components/date-picker/date-picker.types.d.ts

@@ -0,0 +1,543 @@
+import type { FormProps, InputWrapProps } from '../../common/components.types';
+import type { BaseInputClassNames } from '../base-input';
+import type { IconName } from '@wisdomgarden/torque-icons';
+import type { Dayjs } from 'dayjs';
+import type { ReactNode } from 'react';
+/**
+ * DatePicker 家族可以接受的"单值"输入。
+ *
+ * - `string`：任何 dayjs 能解析的格式（ISO / 本地化字符串等）
+ * - `number`：毫秒级时间戳
+ * - `Date`：原生日期对象
+ * - `null` / `undefined` / `''`：视作"空值"
+ */
+export type DateValue = string | number | Date | null | undefined;
+/** 起止两端都使用 `DateValue` 的范围值。 */
+export type DateRangeValue = [DateValue, DateValue];
+/**
+ * 日期格相对于范围选择的从属状态（六态互斥，按优先级自顶向下判定）。
+ *
+ * - `Both`    — 起止同为一天
+ * - `Start`   — 范围起点（已确认，或正在选终点时的起点）
+ * - `End`     — 范围终点
+ * - `InRange` — 已确认起止区间的**内部**（不含端点）
+ * - `Preview` — 已选起点、未选终点时，hover 位置与起点之间的**预览**内部
+ * - `None`    — 不参与任何范围（单选模式下的所有格子也是这个态）
+ *
+ * 优先级：`Both > Start/End > InRange > Preview > None`。
+ */
+export declare enum DateRangeMembership {
+    /** 不参与任何范围 */
+    None = "none",
+    /** 范围起点 */
+    Start = "start",
+    /** 范围终点 */
+    End = "end",
+    /** 起止同一天 */
+    Both = "both",
+    /** 已确认区间内部 */
+    InRange = "in-range",
+    /** hover 预览区间内部 */
+    Preview = "preview"
+}
+/**
+ * 时间列禁用函数集合（时 / 分 / 秒三个维度）。
+ * 供 DateTimePicker / DateTimeRangePicker 在内部合并自动推导与用户自定义禁用规则时使用。
+ */
+export interface DisabledTimeFns {
+    disabledHours?: () => number[];
+    disabledMinutes?: (hour: number) => number[];
+    disabledSeconds?: (hour: number, minute: number) => number[];
+}
+/**
+ * 时间面板使用的纯值对象（不含年月日信息）。
+ */
+export interface TimeValue {
+    /** 小时；统一以 24 小时制存储，12 小时制仅用于展示 */
+    hour: number;
+    /** 分钟，0–59 */
+    minute: number;
+    /** 秒，0–59 */
+    second: number;
+}
+/**
+ * 日历中的一天。
+ */
+export interface CalendarDay {
+    /** 该格对应的日期（精确到天） */
+    date: Dayjs;
+    /** 是否属于当前月份；`false` 时即上/下月的填充格 */
+    isCurrentMonth: boolean;
+    /** 是否为"今天" */
+    isToday: boolean;
+}
+/**
+ * 范围选择内部的状态机对象。
+ */
+export interface RangeState {
+    /** 已确认的起点 */
+    start: Dayjs | null;
+    /** 已确认的终点 */
+    end: Dayjs | null;
+    /** 鼠标 hover 的日期；仅在 `pickingEnd=true` 时被跟踪，用于预览高亮 */
+    hover: Dayjs | null;
+    /** 是否已选起点、正在等待选终点的中间态 */
+    pickingEnd: boolean;
+}
+/**
+ * `DateRangePicker` 的快捷预设项。
+ */
+export interface DateRangePreset {
+    /** 预设在侧边栏中的展示文本 */
+    label: string;
+    /** 预设对应的起止日期（同样接受 `Date | string`） */
+    value: [Date | string, Date | string];
+}
+/**
+ * DatePicker 家族通用的 classNames 映射。
+ * 所有字段都可选，未指定的 slot 回退到内部默认样式。
+ */
+export interface PickerClassNames {
+    /** 根容器（Popover.Target 包裹层） */
+    root?: string;
+    /** 透传到内部 BaseInput 的 classNames */
+    input?: BaseInputClassNames;
+    /** Popover.Dropdown 容器 */
+    dropdown?: string;
+    /** dropdown 内容区（日历 / 时间 / 快捷条） */
+    dropdownBody?: string;
+    /** 快捷预设侧边栏容器 */
+    presets?: string;
+    /** 单个快捷预设项 */
+    presetItem?: string;
+    /** 日历整体面板 */
+    calendar?: string;
+    /** 日历头部 */
+    header?: string;
+    /** 头部标题（年月） */
+    headerTitle?: string;
+    /** 头部左右导航按钮 */
+    headerNav?: string;
+    /** 星期表头行 */
+    weekdays?: string;
+    /** 单个星期标签 */
+    weekday?: string;
+    /** 日期网格（rowgroup） */
+    grid?: string;
+    /** 单个日期单元格 */
+    cell?: string;
+    /** 时间面板容器 */
+    time?: string;
+    /** 时间列（时/分/秒/AM-PM） */
+    timeColumn?: string;
+    /** 时间选项 */
+    timeItem?: string;
+    /** 底部操作区 */
+    footer?: string;
+}
+/**
+ * 单值 / 范围值通用的外观与表单配置。
+ *
+ * 所有 Picker（`DatePicker` / `DateRangePicker` / `TimePicker` / …）都继承此接口；
+ * `classNames` 里列出的 slot 覆盖了从输入框外壳到日历 / 时间面板的所有层次。
+ */
+export interface PickerShellConfig {
+    /** 稳定 id，供 FormItemWrapper 的 htmlFor 和 BaseInput 的 id 共用 */
+    id?: string;
+    /** 占位符；范围模式建议传完整字符串，如 `"YYYY-MM-DD ~ YYYY-MM-DD"` */
+    placeholder?: string;
+    /** 是否显示清空按钮 */
+    clearable?: boolean;
+    /** 整体禁用（不可聚焦 / 不可触发弹层） */
+    disabled?: boolean;
+    /** 只读（不可触发弹层，但仍可聚焦） */
+    readOnly?: boolean;
+    /** PC 端下拉是否渲染到 Portal；嵌套浮层关系由 Popover 自动处理。 @default true */
+    withinPortal?: boolean;
+    /** 错误态；传字符串时同时作为错误描述 */
+    error?: boolean | string;
+    /** input 左侧自定义渲染 */
+    leftSection?: ReactNode;
+    /** input 右侧自定义渲染（覆盖默认 clear / icon） */
+    rightSection?: ReactNode;
+    /** 根容器 className */
+    className?: string;
+    /** 内部各 slot 的 className 映射 */
+    classNames?: PickerClassNames;
+    /** 无可见 label 时的无障碍 label */
+    'aria-label'?: string;
+    /** 引用外部 label 元素的 id */
+    'aria-labelledby'?: string;
+    /** 关联到描述 / 错误节点的 id（由 FormItemWrapper 派生） */
+    'aria-describedby'?: string;
+}
+/**
+ * 日历能用到的日期限制配置。
+ *
+ * - `minDate` / `maxDate`：闭区间（边界日期本身可选）
+ * - `shouldDisableDate`：自定义禁用谓词，优先级最高
+ */
+export interface CalendarLimitProps {
+    /** 最早可选日期（闭区间） */
+    minDate?: Date | string;
+    /** 最晚可选日期（闭区间） */
+    maxDate?: Date | string;
+    /** 自定义禁用谓词；优先级高于 min/maxDate */
+    shouldDisableDate?: (date: Date) => boolean;
+}
+/**
+ * `DatePicker`（单日期）组件 props。
+ *
+ * `format` 控制显示格式。
+ * `closeOnSelect` 默认开启：选中即关闭下拉，符合"快速选日期"的直觉。
+ */
+export interface DatePickerProps extends PickerShellConfig, CalendarLimitProps, InputWrapProps, FormProps {
+    /** 受控值 */
+    value?: DateValue;
+    /** 非受控初始值 */
+    defaultValue?: DateValue;
+    /**
+     * 值变化回调。
+     * @param value 选中的日期对象，清空时为 `null`
+     * @param formattedString 按 `format` 格式化后的字符串，空值时为 `''`
+     */
+    onChange?: (value: Date | null, formattedString: string) => void;
+    /** 显示与解析格式，默认 `YYYY-MM-DD` */
+    format?: string;
+    /** 选中后是否自动关闭下拉，默认 `true` */
+    closeOnSelect?: boolean;
+}
+/**
+ * `DateRangePicker`（日期范围）组件 props。
+ *
+ * 相对于 `DatePickerProps`：`value` / `defaultValue` 改为元组；新增双月布局、
+ * 起止同日、快捷预设等开关。
+ *
+ * 范围选择采用 draft + 「确定」模型，面板内始终带底部确认栏，
+ * 因此不再支持 `closeOnSelect`。
+ */
+export interface DateRangePickerProps extends PickerShellConfig, CalendarLimitProps, InputWrapProps, FormProps {
+    /** 受控值（起止元组） */
+    value?: DateRangeValue;
+    /** 非受控初始值（起止元组） */
+    defaultValue?: DateRangeValue;
+    /**
+     * 值变化回调。
+     * @param value 起止日期元组
+     * @param formatted 起止对应的格式化字符串元组
+     */
+    onChange?: (value: [Date | null, Date | null], formatted: [string, string]) => void;
+    /** 显示与解析格式 */
+    format?: string;
+    /** 是否允许起点终点为同一天，默认 `true` */
+    allowSingleDateInRange?: boolean;
+    /** 快捷预设（如"最近 7 天"） */
+    presets?: DateRangePreset[];
+}
+/**
+ * 时间面板相关的字段（步长 / 粒度 / 级联禁用等）。
+ *
+ * `TimePicker` 和各类"日期 + 时间"组件都共享这组字段，抽出来避免
+ * 多个接口反复 `Pick` / 重写同样的 JSDoc。
+ *
+ * 禁用函数三件套继承自 `DisabledTimeFns`，保持单一来源。
+ */
+export interface TimeFieldProps extends DisabledTimeFns {
+    /** 是否显示秒列 */
+    withSeconds?: boolean;
+    /** 是否启用 12 小时制 + AM/PM 列 */
+    use12Hours?: boolean;
+    /** 小时步长 */
+    hourStep?: number;
+    /** 分钟步长 */
+    minuteStep?: number;
+    /** 秒步长 */
+    secondStep?: number;
+}
+/**
+ * `TimePicker`（单时间）组件 props。
+ *
+ * 值仍以 `Date` 承载，年月日由内部 `dayjs().startOf('day')` 占位。
+ */
+export interface TimePickerProps extends Omit<PickerShellConfig, 'classNames'>, TimeFieldProps, InputWrapProps, FormProps {
+    /** 内部各 slot 的 className 映射（不含日历和预设相关 slot） */
+    classNames?: Omit<PickerClassNames, 'presets' | 'presetItem' | 'calendar' | 'header' | 'headerTitle' | 'headerNav' | 'weekdays' | 'weekday' | 'grid' | 'cell'>;
+    /** 受控值 */
+    value?: DateValue;
+    /** 非受控初始值 */
+    defaultValue?: DateValue;
+    /** 值变化回调 */
+    onChange?: (value: Date | null, formattedString: string) => void;
+    /** 显示 / 解析格式；不传时根据 `withSeconds` + `use12Hours` 自动推导 */
+    format?: string;
+}
+/**
+ * `TimeRangePicker`（时间范围）组件 props。
+ *
+ * 继承 `TimePickerProps` 的时间粒度字段，将 `value/defaultValue/onChange` 替换为元组形式。
+ */
+export interface TimeRangePickerProps extends Omit<TimePickerProps, 'value' | 'defaultValue' | 'onChange'> {
+    /** 受控值（起止元组） */
+    value?: DateRangeValue;
+    /** 非受控初始值 */
+    defaultValue?: DateRangeValue;
+    /** 值变化回调 */
+    onChange?: (value: [Date | null, Date | null], formatted: [string, string]) => void;
+}
+/**
+ * `DateTimePicker`（日期 + 时间）组件 props。
+ *
+ * 等价于 `DatePickerProps` ∪ `TimeFieldProps` 的时间粒度字段。
+ */
+export interface DateTimePickerProps extends DatePickerProps, TimeFieldProps {
+    /**
+     * 呼出面板时触发（点击输入框或键盘打开都会触发，关闭时不触发）。
+     *
+     * 典型用途是「空值默认回填」：在此回调里写入默认值，面板会立刻按新值定位并高亮，
+     * 用户不改动直接点「确定」即保留该默认值。
+     */
+    onClick?: () => void;
+}
+/**
+ * `DateTimeRangePicker`（日期 + 时间范围）组件 props。
+ *
+ * 等价于 `DateRangePickerProps` ∪ `TimeFieldProps` 的时间粒度字段。
+ */
+export interface DateTimeRangePickerProps extends DateRangePickerProps, TimeFieldProps {
+}
+/**
+ * `CalendarPanel`（日历面板）组件 props。
+ *
+ * 单选模式下传 `selectedDate`；范围模式下传 `rangeStart` / `rangeEnd` / `rangeHover`。
+ */
+export interface CalendarPanelProps extends CalendarLimitProps {
+    /** 单选 — 当前选中 */
+    readonly selectedDate?: Dayjs | null;
+    /** 范围 — 起点 */
+    readonly rangeStart?: Dayjs | null;
+    /** 范围 — 终点 */
+    readonly rangeEnd?: Dayjs | null;
+    /** 范围 — 当前鼠标 hover 的日期，用于预览高亮 */
+    readonly rangeHover?: Dayjs | null;
+    /** 同时展示几个月（1 或 2） */
+    readonly numberOfMonths?: 1 | 2;
+    /** 当前视图的第一月 */
+    readonly viewMonth: Dayjs;
+    /** 视图月份变更回调 */
+    readonly onViewMonthChange: (d: Dayjs) => void;
+    /** 选择日期回调 */
+    readonly onSelect: (d: Dayjs) => void;
+    /** hover 回调（范围模式使用） */
+    readonly onHover?: (d: Dayjs | null) => void;
+    /** classNames 透传 */
+    readonly classNames?: PickerClassNames;
+    /** 面板级 aria-label */
+    readonly 'aria-label'?: string;
+}
+/**
+ * `CalendarHeader`（日历头部）组件 props。
+ *
+ * `isFirst` / `isLast` 在双月布局下决定显示哪一侧的翻页按钮。
+ */
+export interface CalendarHeaderProps {
+    /** 当前头部代表的月份 */
+    readonly currentMonth: Dayjs;
+    /** 是否为双月布局中最左侧的月份（决定是否显示"上一页"） */
+    readonly isFirst?: boolean;
+    /** 是否为双月布局中最右侧的月份（决定是否显示"下一页"） */
+    readonly isLast?: boolean;
+    /** 头部相关 slot 的 className 透传 */
+    readonly classNames?: Pick<PickerClassNames, 'header' | 'headerTitle' | 'headerNav'>;
+    /** 点击左侧翻页按钮 */
+    readonly onPrev: () => void;
+    /** 点击右侧翻页按钮 */
+    readonly onNext: () => void;
+    /** 点击年月标题（为未来切换年/月视图预留） */
+    readonly onTitleClick?: () => void;
+}
+/**
+ * `DateCell`（单日期格）组件 props。
+ *
+ * 所有状态都由父级 `MonthView` 计算后传入；本组件只渲染与转发事件。
+ */
+export interface DateCellProps {
+    /** 该单元格对应的日期 */
+    readonly date: Dayjs;
+    /** 是否属于当前月（否则为跨月填充） */
+    readonly isCurrentMonth: boolean;
+    /** 是否为"今天" */
+    readonly isToday: boolean;
+    /** 是否被选中（单选模式） */
+    readonly isSelected: boolean;
+    /** 是否禁用 */
+    readonly isDisabled: boolean;
+    /** 是否为当前键盘焦点所在格（控制 tabIndex） */
+    readonly isFocused: boolean;
+    /** 范围选择成员态（端点 / 区间内部 / hover 预览） */
+    readonly rangeMembership?: DateRangeMembership;
+    /** 附加 className */
+    readonly className?: string;
+    /** 点击选择日期 */
+    readonly onSelect: (date: Dayjs) => void;
+    /** 鼠标进入 / 离开（离开时参数为 `null`） */
+    readonly onHover?: (date: Dayjs | null) => void;
+    /** focus 时把键盘焦点同步到该日期 */
+    readonly onFocusCell?: (date: Dayjs) => void;
+}
+/**
+ * `MonthView`（单月视图）组件 props。
+ */
+export interface MonthViewProps {
+    /** 该视图所展示的月份 */
+    readonly currentMonth: Dayjs;
+    /** 单选模式下的当前选中 */
+    readonly selectedDate: Dayjs | null;
+    /** 当前键盘焦点所在的日期（若在本月内则会高亮并设置 tabIndex=0） */
+    readonly focusedDate: Dayjs | null;
+    /** 范围 — 起点 */
+    readonly rangeStart?: Dayjs | null;
+    /** 范围 — 终点 */
+    readonly rangeEnd?: Dayjs | null;
+    /** 范围 — hover */
+    readonly rangeHover?: Dayjs | null;
+    /**
+     * 判断某日是否被禁用。由 `CalendarPanel` 根据 `minDate` / `maxDate` /
+     * `shouldDisableDate` 统一计算后下传，避免两处重复。
+     */
+    readonly isDisabled: (date: Dayjs) => boolean;
+    /** 透传给星期表头 / 网格 / 单元格的 className */
+    readonly classNames?: Pick<PickerClassNames, 'weekdays' | 'weekday' | 'grid' | 'cell'>;
+    /** 选择日期回调 */
+    readonly onSelect: (date: Dayjs) => void;
+    /** hover 回调 */
+    readonly onHover?: (date: Dayjs | null) => void;
+    /** 单元格 focus 时同步焦点 */
+    readonly onFocusCell?: (date: Dayjs) => void;
+}
+/**
+ * 单值选择器外壳 `PickerShell` 的 props。
+ *
+ * 在 `PickerShellConfig` 外观配置之外，还需要由上层组件传入弹层开合状态、
+ * 输入框文本、各回调，以及下拉面板渲染函数。
+ */
+export interface PickerShellProps extends PickerShellConfig {
+    /** 弹层是否打开 */
+    readonly opened: boolean;
+    /** 弹层开合变化回调 */
+    readonly onOpenChange: (next: boolean) => void;
+    /** 当前输入框展示的字符串值 */
+    readonly value: string;
+    /** 是否有可清空内容（驱动右侧 clear 图标显示） */
+    readonly canClear: boolean;
+    /** 默认右侧图标名；日期组件为 `calendar`，时间组件覆盖为 `clock` */
+    readonly defaultIconName?: IconName;
+    /** 清空按钮点击回调 */
+    readonly onClear: () => void;
+    /** 下拉内容渲染函数（日历 / 时间 / 组合面板） */
+    readonly renderPanel: () => ReactNode;
+}
+/**
+ * 范围选择器外壳 `SingleRangeShell` 的 props。
+ *
+ * 相对于 `PickerShellProps`：`value` 改为两端 `values` 元组；UI 上以一个只读
+ * 输入框展示「起始 `separator` 结束」字符串。
+ */
+export interface RangeShellProps extends PickerShellConfig {
+    /** 弹层是否打开 */
+    readonly opened: boolean;
+    /** 弹层开合变化回调 */
+    readonly onOpenChange: (next: boolean) => void;
+    /** 两个输入框各自的字符串值 */
+    readonly values: [string, string];
+    /** 是否有可清空内容 */
+    readonly canClear: boolean;
+    /** 默认右侧图标名 */
+    readonly defaultIconName?: IconName;
+    /** 清空两端 */
+    readonly onClear: () => void;
+    /** 下拉内容渲染函数 */
+    readonly renderPanel: () => ReactNode;
+    /** 起止之间的分隔符，默认 `'~'`；占位符和已选值都用此分隔符拼接 */
+    readonly separator?: ReactNode;
+}
+/**
+ * `TimeColumn`（单列时间选择器）组件 props。
+ */
+export interface TimeColumnProps {
+    /** 可供选择的全量数值（如 `[0,1,...,23]`） */
+    readonly items: number[];
+    /** 当前选中值；`null` 表示未选，不会滚动到任何位置 */
+    readonly value: number | null;
+    /** 被禁用的子集 */
+    readonly disabledValues?: number[];
+    /** 列的无障碍 label；也作为 option id 前缀 */
+    readonly label: string;
+    /** 是否补零显示；默认 `true`（AM/PM 列需手动传 `false`） */
+    readonly pad?: boolean;
+    /** 自定义展示文本（如把 `0/1` 渲染为 `AM/PM`） */
+    readonly formatLabel?: (v: number) => string;
+    /** 值变更回调 */
+    readonly onChange: (v: number) => void;
+    /** classNames 透传 */
+    readonly classNames?: Pick<PickerClassNames, 'timeColumn' | 'timeItem'>;
+    /**
+     * 是否作为"初始焦点列"自动登记到 `PickerFocusContext`；
+     * 由 `TimePanel` 标记在小时列上，用户打开弹层后直接落焦此列。
+     */
+    readonly asInitialFocus?: boolean;
+}
+/**
+ * `TimePanel`（时间面板）组件 props。
+ *
+ * 步长 / 粒度 / 禁用函数继承自 `TimeFieldProps`（via `Readonly<>`），
+ * 此处只声明面板自身独有的字段。
+ */
+export interface TimePanelProps extends Readonly<TimeFieldProps> {
+    /** 当前时间值；`null` 时各列不高亮选中 */
+    readonly value: TimeValue | null;
+    /** classNames 透传 */
+    readonly classNames?: PickerClassNames;
+    /** 值变更回调 */
+    readonly onChange: (v: TimeValue) => void;
+    /**
+     * 是否把小时列登记为弹层的初始焦点目标。
+     * 单值场景保持默认 `true`；范围场景（两个 TimePanel 并排）只让首个面板为 `true`。
+     * @default true
+     */
+    readonly asInitialFocus?: boolean;
+}
+/**
+ * `useGridKeyboard` hook 的入参。
+ *
+ * hook 内部会自行维护 `focused` 状态、同步外部选中、把焦点送到真实 DOM、
+ * 登记初始焦点到 `PickerFocusContext`，因此调用方只需提供日历上下文。
+ */
+export interface UseGridKeyboardParams {
+    /** grid 根节点的 ref，用于查询当前 `tabIndex=0` 的 cell 并转移真实焦点 */
+    gridRef: import('react').RefObject<HTMLElement | null>;
+    /** 单选当前值，hook 会据此把 `focused` 对齐到选中日 */
+    selectedDate?: Dayjs | null;
+    /** 范围起点，hook 会据此把 `focused` 对齐到起点 */
+    rangeStart?: Dayjs | null;
+    /** 按下 Enter/Space 时选择日期 */
+    onSelect: (d: Dayjs) => void;
+    /** 当焦点跨月时，同步外层视图月份 */
+    onViewMonthChange: (d: Dayjs) => void;
+    /** 判断日期是否被禁用 */
+    isDisabled: (d: Dayjs) => boolean;
+    /** 是否为 RTL 布局（影响 ArrowLeft/ArrowRight 的方向） */
+    isRtl: boolean;
+}
+/**
+ * `useGridKeyboard` hook 的返回。
+ */
+export interface UseGridKeyboardResult {
+    /** 当前聚焦日期（由 hook 维护） */
+    focused: Dayjs;
+    /** 供外部（如 DateCell 的 onFocus）同步焦点日期 */
+    setFocused: (d: Dayjs) => void;
+    /** 绑定到 grid 根节点的 `onKeyDown` */
+    handleKeyDown: (e: import('react').KeyboardEvent<HTMLElement>) => void;
+}
+/** 向后兼容：历史上对外暴露过的别名，与 `PickerClassNames` 等价。 */
+export type DatePickerClassNames = PickerClassNames;

package/dist/components/date-picker/date-picker.types.js

@@ -0,0 +1,5 @@
+"use client";
+var o = /* @__PURE__ */ ((n) => (n.None = "none", n.Start = "start", n.End = "end", n.Both = "both", n.InRange = "in-range", n.Preview = "preview", n))(o || {});
+export {
+  o as DateRangeMembership
+};

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

@@ -0,0 +1,5 @@
+import type { DateRangePickerProps } from './date-picker.types';
+/**
+ * 日期范围选择器。
+ */
+export declare const DateRangePicker: (props: DateRangePickerProps) => import("react").JSX.Element;

package/dist/components/date-picker/date-range-picker.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as d } from "react/jsx-runtime";
+import { useId as N } from "@mantine/hooks";
+import { useState as W, useMemo as $ } from "react";
+import { dayjs as g } from "../../common/dayjs.js";
+import { useFormWrapperProps as k } from "../../common/use-form-wrapper-props.js";
+import { FormItemWrapper as B } from "../form-wrapper/form-item-wrapper.js";
+import { RangePanel as T } from "./components/range/range-panel.js";
+import { RangeShell as z } from "./components/range/range-shell.js";
+import { isDateDisabled as C } from "./hooks/date-disabled.js";
+import { formatOrEmpty as D } from "./hooks/use-date-parser.js";
+import { useRangeDraft as A } from "./hooks/use-range-draft.js";
+const ie = (r) => {
+  const i = N(r.id), { wrapProps: u, rest: b, outerDescribedBy: R, formProps: a } = k(
+    r,
+    i
+  ), {
+    value: G,
+    onChange: J,
+    error: K,
+    defaultValue: y,
+    format: o = "YYYY-MM-DD",
+    minDate: n,
+    maxDate: t,
+    shouldDisableDate: l,
+    allowSingleDateInRange: P = !0,
+    presets: w,
+    required: L,
+    borderRadius: Q,
+    ...m
+  } = b, M = a ? a.value : r.value, v = a?.error ?? r.error, {
+    opened: S,
+    rangeDayjs: f,
+    currentRange: s,
+    inputs: V,
+    canClear: _,
+    hover: I,
+    setHover: O,
+    handleOpenChange: Y,
+    handleSelect: j,
+    commitDraft: E,
+    handleClear: q,
+    handleConfirm: x
+  } = A({
+    controlledValue: M,
+    defaultValue: y,
+    format: o,
+    allowSingleDateInRange: P,
+    onCommit: (e) => {
+      a?.onChange?.(e), r.onChange?.(e, [
+        D(e[0], o),
+        D(e[1], o)
+      ]);
+    }
+  }), [F, c] = W(
+    () => f[0] ?? g()
+  ), H = $(() => {
+    const [e, p] = s;
+    return !!(!e || !p || C(e, n, t, l) || C(p, n, t, l));
+  }, [s, n, t, l]), h = (e) => {
+    e && c(f[0] ?? g()), Y(e);
+  };
+  return /* @__PURE__ */ d(B, { ...u, id: i, children: /* @__PURE__ */ d(
+    z,
+    {
+      ...m,
+      id: i,
+      opened: S,
+      onOpenChange: h,
+      values: V,
+      canClear: _,
+      placeholder: m.placeholder ?? `${o} ~ ${o}`,
+      error: v,
+      "aria-describedby": R,
+      "aria-labelledby": u.labelId ?? m["aria-labelledby"],
+      onClear: q,
+      renderPanel: () => /* @__PURE__ */ d(
+        T,
+        {
+          currentRange: s,
+          hover: I,
+          viewMonth: F,
+          minDate: n,
+          maxDate: t,
+          shouldDisableDate: l,
+          classNames: m.classNames,
+          withTime: !1,
+          presets: w,
+          confirmDisabled: H,
+          onViewMonthChange: c,
+          onSelect: j,
+          onHover: O,
+          onCommitPreset: E,
+          onCancel: () => h(!1),
+          onConfirm: x
+        }
+      )
+    }
+  ) });
+};
+export {
+  ie as DateRangePicker
+};

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

@@ -0,0 +1,6 @@
+import type { DateTimePickerProps } from './date-picker.types';
+/**
+ * 日期 + 时间选择器。
+ * 支持日期和时间的组合选择，采用草稿模式，点击确认后提交。
+ */
+export declare const DateTimePicker: (props: DateTimePickerProps) => import("react").JSX.Element;