@fangxinyan/lumina 0.6.13 → 0.6.15

package/dist/tokens.css

@@ -13,6 +13,7 @@
   --fg-subtle: #9ca7ba;
   --border: rgba(130, 148, 175, 0.14);
   --divider: rgba(130, 148, 175, 0.18);
+  --mask-bg: color-mix(in oklch, black 18%, transparent);
 
   /* ---- Shadows ---- */
   --shadow-dark: rgba(163, 177, 198, 0.55);
@@ -139,6 +140,7 @@
   --fg-subtle: #9ca7ba;
   --border: rgba(130, 148, 175, 0.14);
   --divider: rgba(130, 148, 175, 0.18);
+  --mask-bg: color-mix(in oklch, black 18%, transparent);
   --shadow-dark: rgba(163, 177, 198, 0.55);
   --shadow-light: rgba(255, 255, 255, 0.95);
   --shadow-offset: calc(6px * var(--d) * var(--shadow-scale));
@@ -161,6 +163,7 @@
   --fg-subtle: #5f6a82;
   --border: rgba(0, 0, 0, 0.35);
   --divider: rgba(255, 255, 255, 0.06);
+  --mask-bg: color-mix(in oklch, black 55%, transparent);
   /* 强 dark shadow 提供深度;light 高光几乎不可见,去掉白圈效果 */
   --shadow-dark: rgba(0, 0, 0, 0.55);
   --shadow-light: rgba(130, 145, 180, 0.06);

package/docs/llms/calendar.md

@@ -1,6 +1,6 @@
 # Calendar 日历
 
-> 查看与选择日期。
+> 查看与选择日期,支持快速切换年份和月份。
 
 ## 导入
 
@@ -35,6 +35,7 @@ import { Calendar } from "@fangxinyan/lumina";
 | Prop | 类型 | 默认 | 说明 |
 | --- | --- | --- | --- |
 | value / defaultValue | `Date` | — | 受控/初始日期 |
+| viewDate | `Date` | — | 外部日期变化时同步可视月份 |
 | onChange | `(date: Date) => void` | — | 选择回调 |
 | min / max | `Date` | — | 可选范围 |
 | disabledDate | `(date: Date) => boolean` | — | 自定义禁用判断,返回 true 的日期不可选 |

package/docs/llms/datepicker.md

@@ -0,0 +1,69 @@
+# DatePicker 日期选择
+
+> 输入框触发的日期选择器,复用 Calendar 并支持范围、禁用日期和格式化。
+
+## 导入
+
+```tsx
+import { DatePicker } from "@fangxinyan/lumina";
+```
+
+## 示例
+
+### 基础用法
+
+```tsx
+<DatePicker defaultValue={new Date(2026, 4, 25)} />
+```
+
+### 受控
+
+value 使用 Date | null,onChange 同时返回 Date 和格式化字符串。
+
+```tsx
+const [date, setDate] = useState<Date | null>(new Date());
+<DatePicker value={date} onChange={setDate} allowClear />
+```
+
+### 限制范围
+
+min / max 与 disabledDate 会同步作用于 Calendar 单元格和手动输入。
+
+```tsx
+<DatePicker
+  value={workday}
+  onChange={setWorkday}
+  min={new Date(2026, 4, 1)}
+  max={new Date(2026, 4, 31)}
+  disabledDate={(date) => date.getDay() === 0 || date.getDay() === 6}
+/>
+```
+
+### 格式与尺寸
+
+```tsx
+<DatePicker size="sm" format="YYYY/MM/DD" />
+<DatePicker format="YYYY年MM月DD日" />
+<DatePicker size="lg" disabled />
+```
+
+## API
+
+**DatePicker**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| value / defaultValue | `Date | null` | — | 受控/初始日期 |
+| onChange | `(date: Date | null, dateString: string) => void` | — | 选择或清空时触发 |
+| format | `"YYYY-MM-DD" | "YYYY/MM/DD" | "YYYY年MM月DD日" | ((date) => string)` | `"YYYY-MM-DD"` | 显示格式或自定义格式化函数 |
+| min / max | `Date` | — | 可选日期范围 |
+| disabledDate | `(date: Date) => boolean` | — | 自定义禁用日期 |
+| size | `"sm" | "md" | "lg"` | `"md"` | 输入框尺寸 |
+| allowClear | `boolean` | `false` | 允许清空 |
+| open / defaultOpen / onOpenChange | `—` | — | 受控浮层显隐 |
+| popupClassName / dropdownClassName | `string` | — | 浮层 className |
+| disabled / readOnly / invalid / placeholder | `—` | — | 常规输入状态 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/datetimepicker.md

@@ -0,0 +1,83 @@
+# DateTimePicker 日期时间选择
+
+> 输入框触发的日期时间选择器,把 Calendar 与时分秒列组合在同一个浮层内。
+
+## 导入
+
+```tsx
+import { DateTimePicker } from "@fangxinyan/lumina";
+```
+
+## 示例
+
+### 基础用法
+
+```tsx
+<DateTimePicker defaultValue={new Date(2026, 4, 25, 9, 30)} />
+```
+
+### 受控
+
+value 使用 Date | null,onChange 同时返回 Date 和格式化字符串。
+
+```tsx
+const [startAt, setStartAt] = useState<Date | null>(new Date(2026, 4, 25, 9, 30));
+<DateTimePicker value={startAt} onChange={setStartAt} allowClear />
+```
+
+### 秒级选择
+
+```tsx
+<DateTimePicker
+  value={deployAt}
+  onChange={setDeployAt}
+  format="YYYY-MM-DD HH:mm:ss"
+  showSecond
+/>
+```
+
+### 范围与步进
+
+15 分钟粒度,只允许工作日 08:00 到 20:00 之间的时间。
+
+```tsx
+<DateTimePicker
+  min={new Date(2026, 4, 1, 8)}
+  max={new Date(2026, 4, 31, 20)}
+  minuteStep={15}
+  disabledDate={(date) => date.getDay() === 0 || date.getDay() === 6}
+  disabledTime={(time) => time.hour === 12}
+/>
+```
+
+### 尺寸与状态
+
+```tsx
+<DateTimePicker size="sm" />
+<DateTimePicker invalid />
+<DateTimePicker size="lg" disabled />
+```
+
+## API
+
+**DateTimePicker**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| value / defaultValue | `Date | null` | — | 受控/初始日期时间 |
+| onChange | `(date: Date | null, dateString: string) => void` | — | 选择或清空时触发 |
+| format | `"YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss" | ((date) => string)` | `"YYYY-MM-DD HH:mm"` | 显示格式或自定义格式化函数 |
+| showSecond | `boolean` | — | 显示秒列 |
+| hourStep / minuteStep / secondStep | `number` | `1` | 列选项步进 |
+| min / max | `Date` | — | 可选日期时间范围 |
+| disabledDate | `(date: Date) => boolean` | — | 自定义禁用日期 |
+| disabledTime | `(time: TimePickerValue, date: Date) => boolean` | — | 按当前日期禁用具体时间 |
+| size | `"sm" | "md" | "lg"` | `"md"` | 输入框尺寸 |
+| allowClear | `boolean` | `false` | 允许清空 |
+| open / defaultOpen / onOpenChange | `—` | — | 受控浮层显隐 |
+| popupClassName / dropdownClassName | `string` | — | 浮层 className |
+| disabled / readOnly / invalid / placeholder | `—` | — | 常规输入状态 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/drawer.md

@@ -44,6 +44,17 @@ placement 控制滑出方向;top / bottom 用 size 控高度。
 <Drawer mask={false} />
 ```
 
+### 遮罩定制
+
+默认遮罩使用中性 --mask-bg,不跟随 --bg-sunken 的色相;maskClassName / maskStyle 可定制遮罩层。
+
+```tsx
+<Drawer
+  maskClassName="settings-drawer-mask"
+  maskStyle={{ background: "var(--mask-bg)", backdropFilter: "none" }}
+/>
+```
+
 ## API
 
 **Drawer**
@@ -58,6 +69,8 @@ placement 控制滑出方向;top / bottom 用 size 控高度。
 | extra | `ReactNode` | — | 标题右侧的附加操作区 |
 | mask | `boolean` | `true` | 是否渲染遮罩 |
 | maskClosable | `boolean` | `true` | 点击遮罩关闭 |
+| maskClassName | `string` | — | 遮罩层 className |
+| maskStyle | `CSSProperties` | — | 遮罩层内联样式 |
 | keyboard | `boolean` | `true` | Esc 关闭 |
 | closable | `boolean` | `true` | 右上角 × |
 | closeIcon | `ReactNode` | — | 自定义关闭图标 |

package/docs/llms/image.md

@@ -16,6 +16,18 @@ import { Image, ImageGrid, SpriteImage, LayeredImage } from "@fangxinyan/lumina"
 <Image src={url} width={240} height={160} />
 ```
 
+### 预览遮罩
+
+全屏预览默认使用中性 --mask-bg,previewClassName / previewStyle 可单独控制预览蒙层。
+
+```tsx
+<Image
+  src={url}
+  previewClassName="asset-preview-mask"
+  previewStyle={{ background: "var(--mask-bg)", backdropFilter: "none" }}
+/>
+```
+
 ### 图标 / 原始资源
 
 variant="icon" 会默认去掉外层 padding,适合 1:1 装备、物品、头像缩略图；variant="raw" 保留原始图片比例。
@@ -68,6 +80,8 @@ LayeredImage 将多张图片叠在同一个盒子里,适合头像 + 头像框、
 | padding | `number | string` | — | 外层留白,raw/icon 默认 0 |
 | objectFit / objectPosition | `CSSProperties` | — | 底层 img 的 object-fit / object-position |
 | preview | `boolean` | `true` | 支持点击全屏预览 |
+| previewClassName | `string` | — | 预览蒙层 className |
+| previewStyle | `CSSProperties` | — | 预览蒙层内联样式 |
 | hover | `boolean` | `true` | 悬浮放大 |
 | placeholder | `ReactNode` | — | 占位/错误时内容 |
 | imgProps | `ImgHTMLAttributes` | — | 透传到底层 img 的属性 |

package/docs/llms/modal.md

@@ -34,6 +34,17 @@ Modal.confirm({
 Modal.warning({ title: "容量不足", content: "请先清理缓存。" });
 ```
 
+### 遮罩定制
+
+默认遮罩使用中性 --mask-bg,不跟随 --bg-sunken 的色相;maskClassName / maskStyle 可定制遮罩层。
+
+```tsx
+<Modal
+  maskClassName="settings-mask"
+  maskStyle={{ background: "var(--mask-bg)", backdropFilter: "none" }}
+/>
+```
+
 ### 确认操作 (footer 自定义)
 
 用 footer 自定义底部按钮。传 null 可以去掉 footer。
@@ -115,6 +126,8 @@ bodyClassName / bodyStyle / bodyProps 可直接作用到正文容器；bodyOverf
 | closable | `boolean` | `true` | 显示右上角 × |
 | closeIcon | `ReactNode` | — | 自定义关闭图标 |
 | maskClosable | `boolean` | `true` | 点击遮罩关闭 |
+| maskClassName | `string` | — | 遮罩层 className |
+| maskStyle | `CSSProperties` | — | 遮罩层内联样式 |
 | escClosable | `boolean` | `true` | Esc 关闭 |
 | width | `number | string` | `440` | 宽度 |
 | destroyOnClose | `boolean` | `false` | 关闭时卸载子树 |

package/docs/llms/timepicker.md

@@ -0,0 +1,81 @@
+# TimePicker 时间选择
+
+> 输入框触发的时分秒选择器,支持步进、范围、禁用时间和秒级选择。
+
+## 导入
+
+```tsx
+import { TimePicker } from "@fangxinyan/lumina";
+```
+
+## 示例
+
+### 基础用法
+
+```tsx
+<TimePicker defaultValue="09:30" />
+```
+
+### 受控
+
+value 是 HH:mm / HH:mm:ss 字符串或 null,onChange 第二个参数返回结构化 time。
+
+```tsx
+const [time, setTime] = useState<string | null>("09:30");
+<TimePicker value={time} onChange={setTime} allowClear />
+```
+
+### 秒级选择
+
+```tsx
+<TimePicker
+  value={precise}
+  onChange={setPrecise}
+  format="HH:mm:ss"
+  showSecond
+/>
+```
+
+### 范围与步进
+
+15 分钟粒度,只允许 08:00 到 20:00 之间的时间。
+
+```tsx
+<TimePicker
+  min="08:00"
+  max="20:00"
+  minuteStep={15}
+  disabledTime={(time) => time.hour === 12}
+/>
+```
+
+### 尺寸与状态
+
+```tsx
+<TimePicker size="sm" />
+<TimePicker invalid />
+<TimePicker size="lg" disabled />
+```
+
+## API
+
+**TimePicker**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| value / defaultValue | `string | null` | — | 受控/初始时间 |
+| onChange | `(value: string | null, time: TimePickerValue | null) => void` | — | 选择或清空时触发 |
+| format | `"HH:mm" | "HH:mm:ss"` | `"HH:mm"` | 输出和显示格式 |
+| showSecond | `boolean` | — | 显示秒列 |
+| hourStep / minuteStep / secondStep | `number` | `1` | 列选项步进 |
+| min / max | `string` | — | 可选时间范围 |
+| disabledTime | `(time: TimePickerValue) => boolean` | — | 自定义禁用时间 |
+| size | `"sm" | "md" | "lg"` | `"md"` | 输入框尺寸 |
+| allowClear | `boolean` | `false` | 允许清空 |
+| open / defaultOpen / onOpenChange | `—` | — | 受控浮层显隐 |
+| popupClassName / dropdownClassName | `string` | — | 浮层 className |
+| disabled / readOnly / invalid / placeholder | `—` | — | 常规输入状态 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms.md

@@ -3,7 +3,7 @@
 > 拟态风格的 React 18 组件库,目标是 Electron 桌面应用。**写给 AI 编程助手**的按需文档 —— 每个组件单独一个 `.md`,避免一次性读取全部。示例源自 playground 的 demo,可直接复制运行。
 
 - **包名**: `@fangxinyan/lumina`
-- **版本**: `0.6.13`
+- **版本**: `0.6.15`
 - **React 最低版本**: 18
 - **环境**: 带打包器的 React 工程(Vite / Next.js / Webpack / Remix / Electron + Vite 等)
 - **零运行时依赖**: 只依赖 `react` / `react-dom` (peer deps)
@@ -64,6 +64,9 @@
 - [Select 下拉选择](./llms/select.md) — 下拉选择,支持单/多选、搜索、分组、加载态。
 - [AutoComplete 自动补全](./llms/autocomplete.md) — 输入时展示建议下拉,不限定必须从候选中选。
 - [Cascader 级联选择](./llms/cascader.md) — 层级关联数据集合中的多级选择。
+- [DatePicker 日期选择](./llms/datepicker.md) — 输入框触发的日期选择器,复用 Calendar 并支持范围、禁用日期和格式化。
+- [DateTimePicker 日期时间选择](./llms/datetimepicker.md) — 输入框触发的日期时间选择器,把 Calendar 与时分秒列组合在同一个浮层内。
+- [TimePicker 时间选择](./llms/timepicker.md) — 输入框触发的时分秒选择器,支持步进、范围、禁用时间和秒级选择。
 - [ColorPicker 颜色选择](./llms/colorpicker.md) — 拟态风格的颜色选择器:HSV 色域、色相、hex 输入、预设调色板。
 - [Form 表单](./llms/form.md) — 受控表单,字段绑定 + 校验。
 
@@ -83,7 +86,7 @@
 - [Pagination 分页](./llms/pagination.md) — 分页控件,支持快速跳转与每页条数切换。
 - [Tabs 选项卡](./llms/tabs.md) — 同一层级的内容分组,通过标签切换。
 - [Collapse 折叠面板](./llms/collapse.md) — 纵向折叠面板。
-- [Calendar 日历](./llms/calendar.md) — 查看与选择日期。
+- [Calendar 日历](./llms/calendar.md) — 查看与选择日期,支持快速切换年份和月份。
 
 ### 反馈
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fangxinyan/lumina",
-  "version": "0.6.13",
+  "version": "0.6.15",
   "description": "Lumina — Neumorphic component library for Electron & React apps",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -144,9 +144,10 @@
     "build:lib": "tsup",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
+    "test:unit": "vitest run --root . --environment jsdom",
     "gen:docs": "node scripts/gen-llms-doc.mjs",
     "verify:public-api": "node scripts/verify-public-api.mjs",
-    "prepublishOnly": "npm run typecheck && npm run gen:docs && npm run build:lib && npm run verify:public-api"
+    "prepublishOnly": "npm run typecheck && npm run test:unit && npm run gen:docs && npm run build:lib && npm run verify:public-api"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -154,11 +155,13 @@
   },
   "devDependencies": {
     "@babel/standalone": "^7.29.2",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^25.6.0",
     "@types/prismjs": "^1.26.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "jsdom": "^29.1.1",
     "postcss": "^8.5.10",
     "postcss-import": "^16.1.1",
     "prismjs": "^1.30.0",
@@ -166,7 +169,8 @@
     "react-dom": "^18.3.1",
     "tsup": "^8.2.4",
     "typescript": "^5.5.4",
-    "vite": "^5.4.2"
+    "vite": "^5.4.2",
+    "vitest": "^4.1.6"
   },
   "keywords": [
     "react",

package/dist/chunk-56U4P7QA.cjs

@@ -1,112 +0,0 @@
-'use strict';
-
-var chunkOCQC2ZSV_cjs = require('./chunk-OCQC2ZSV.cjs');
-require('./tokens-OJLK3XMZ.css');
-require('./shared-NJHRNLRH.css');
-require('./Calendar-RUTPKREW.css');
-var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-var WEEKDAYS = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
-var Calendar = React__namespace.forwardRef(({
-  value,
-  defaultValue,
-  onChange,
-  min,
-  max,
-  disabledDate,
-  className = "",
-  ...rest
-}, ref) => {
-  const [inner, setInner] = React__namespace.useState(defaultValue ?? /* @__PURE__ */ new Date());
-  const isControlled = value !== void 0;
-  const sel = isControlled ? value : inner;
-  const [view, setView] = React__namespace.useState(new Date(sel.getFullYear(), sel.getMonth(), 1));
-  const first = new Date(view.getFullYear(), view.getMonth(), 1);
-  const startDay = first.getDay();
-  const daysInMonth = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
-  const cells = [];
-  for (let i = 0; i < startDay; i++) cells.push(null);
-  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
-  const isSame = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-  const pick = (d) => {
-    const next = new Date(view.getFullYear(), view.getMonth(), d);
-    if (min && next < min) return;
-    if (max && next > max) return;
-    if (disabledDate?.(next)) return;
-    if (!isControlled) setInner(next);
-    onChange?.(next);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: `calendar ${className}`, ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "calendar-head", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: "btn icon sm ghost",
-          onClick: () => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1)),
-          "aria-label": "Previous month",
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkOCQC2ZSV_cjs.Icon, { name: "chevLeft", size: 14 })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "calendar-title", children: [
-        view.getFullYear(),
-        " \u5E74 ",
-        view.getMonth() + 1,
-        " \u6708"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: "btn icon sm ghost",
-          onClick: () => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1)),
-          "aria-label": "Next month",
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkOCQC2ZSV_cjs.Icon, { name: "chevRight", size: 14 })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "calendar-grid", children: [
-      WEEKDAYS.map((w) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "calendar-dow", children: w }, w)),
-      cells.map((d, i) => {
-        if (d === null) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "calendar-cell out" }, i);
-        const date = new Date(view.getFullYear(), view.getMonth(), d);
-        const disabled = min && date < min || max && date > max || (disabledDate?.(date) ?? false);
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            disabled: !!disabled,
-            className: `calendar-cell ${isSame(date, sel) ? "selected" : ""} ${isSame(date, /* @__PURE__ */ new Date()) ? "today" : ""} ${disabled ? "disabled" : ""}`,
-            onClick: () => pick(d),
-            children: d
-          },
-          i
-        );
-      })
-    ] })
-  ] });
-});
-Calendar.displayName = "Calendar";
-
-exports.Calendar = Calendar;

package/dist/chunk-J3LUTXVO.js

@@ -1,90 +0,0 @@
-import { Icon } from './chunk-HHBXCBZP.js';
-import './tokens-OJLK3XMZ.css';
-import './shared-NJHRNLRH.css';
-import './Calendar-RUTPKREW.css';
-import * as React from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var WEEKDAYS = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
-var Calendar = React.forwardRef(({
-  value,
-  defaultValue,
-  onChange,
-  min,
-  max,
-  disabledDate,
-  className = "",
-  ...rest
-}, ref) => {
-  const [inner, setInner] = React.useState(defaultValue ?? /* @__PURE__ */ new Date());
-  const isControlled = value !== void 0;
-  const sel = isControlled ? value : inner;
-  const [view, setView] = React.useState(new Date(sel.getFullYear(), sel.getMonth(), 1));
-  const first = new Date(view.getFullYear(), view.getMonth(), 1);
-  const startDay = first.getDay();
-  const daysInMonth = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
-  const cells = [];
-  for (let i = 0; i < startDay; i++) cells.push(null);
-  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
-  const isSame = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-  const pick = (d) => {
-    const next = new Date(view.getFullYear(), view.getMonth(), d);
-    if (min && next < min) return;
-    if (max && next > max) return;
-    if (disabledDate?.(next)) return;
-    if (!isControlled) setInner(next);
-    onChange?.(next);
-  };
-  return /* @__PURE__ */ jsxs("div", { ref, className: `calendar ${className}`, ...rest, children: [
-    /* @__PURE__ */ jsxs("div", { className: "calendar-head", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "btn icon sm ghost",
-          onClick: () => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1)),
-          "aria-label": "Previous month",
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevLeft", size: 14 })
-        }
-      ),
-      /* @__PURE__ */ jsxs("button", { type: "button", className: "calendar-title", children: [
-        view.getFullYear(),
-        " \u5E74 ",
-        view.getMonth() + 1,
-        " \u6708"
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "btn icon sm ghost",
-          onClick: () => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1)),
-          "aria-label": "Next month",
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevRight", size: 14 })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "calendar-grid", children: [
-      WEEKDAYS.map((w) => /* @__PURE__ */ jsx("div", { className: "calendar-dow", children: w }, w)),
-      cells.map((d, i) => {
-        if (d === null) return /* @__PURE__ */ jsx("div", { className: "calendar-cell out" }, i);
-        const date = new Date(view.getFullYear(), view.getMonth(), d);
-        const disabled = min && date < min || max && date > max || (disabledDate?.(date) ?? false);
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            disabled: !!disabled,
-            className: `calendar-cell ${isSame(date, sel) ? "selected" : ""} ${isSame(date, /* @__PURE__ */ new Date()) ? "today" : ""} ${disabled ? "disabled" : ""}`,
-            onClick: () => pick(d),
-            children: d
-          },
-          i
-        );
-      })
-    ] })
-  ] });
-});
-Calendar.displayName = "Calendar";
-
-export { Calendar };