@fangxinyan/lumina 0.6.13 → 0.6.15

package/dist/index.d.cts

@@ -24,7 +24,10 @@ export { Alert, AlertProps, AlertTone } from './Alert.cjs';
 export { ExpandableConfig, PaginationConfig, RowKey, RowSelectionConfig, Table, TableColumn, TableColumnFilterItem, TableProps, TableScrollConfig, TableVariant } from './Table.cjs';
 export { TablePro, TableProProps } from './TablePro.cjs';
 export { Pagination, PaginationProps } from './Pagination.cjs';
+export { DatePicker, DatePickerFormat, DatePickerProps, DatePickerSize } from './DatePicker.cjs';
+export { DateTimePicker, DateTimePickerFormat, DateTimePickerProps, DateTimePickerSize } from './DateTimePicker.cjs';
 export { Calendar, CalendarProps } from './Calendar.cjs';
+export { TimePicker, TimePickerFormat, TimePickerProps, TimePickerSize, TimePickerValue } from './TimePicker.cjs';
 export { List, ListItem, ListProps } from './List.cjs';
 export { AppShell, AppShellProps, Sidebar, SidebarItem, SidebarProps, TitleBar, TitleBarProps, WindowControls, WindowControlsProps } from './AppShell.cjs';
 export { StatusBar, StatusBarItem, StatusBarItemProps, StatusBarProps } from './StatusBar.cjs';
@@ -49,6 +52,6 @@ import 'react/jsx-runtime';
 import 'react';
 
 /** Package version — bumped by release scripts. */
-declare const VERSION = "0.6.13";
+declare const VERSION = "0.6.15";
 
 export { VERSION };

package/dist/index.d.ts

@@ -24,7 +24,10 @@ export { Alert, AlertProps, AlertTone } from './Alert.js';
 export { ExpandableConfig, PaginationConfig, RowKey, RowSelectionConfig, Table, TableColumn, TableColumnFilterItem, TableProps, TableScrollConfig, TableVariant } from './Table.js';
 export { TablePro, TableProProps } from './TablePro.js';
 export { Pagination, PaginationProps } from './Pagination.js';
+export { DatePicker, DatePickerFormat, DatePickerProps, DatePickerSize } from './DatePicker.js';
+export { DateTimePicker, DateTimePickerFormat, DateTimePickerProps, DateTimePickerSize } from './DateTimePicker.js';
 export { Calendar, CalendarProps } from './Calendar.js';
+export { TimePicker, TimePickerFormat, TimePickerProps, TimePickerSize, TimePickerValue } from './TimePicker.js';
 export { List, ListItem, ListProps } from './List.js';
 export { AppShell, AppShellProps, Sidebar, SidebarItem, SidebarProps, TitleBar, TitleBarProps, WindowControls, WindowControlsProps } from './AppShell.js';
 export { StatusBar, StatusBarItem, StatusBarItemProps, StatusBarProps } from './StatusBar.js';
@@ -49,6 +52,6 @@ import 'react/jsx-runtime';
 import 'react';
 
 /** Package version — bumped by release scripts. */
-declare const VERSION = "0.6.13";
+declare const VERSION = "0.6.15";
 
 export { VERSION };

package/dist/index.js

@@ -1,54 +1,57 @@
-export { Tabs } from './chunk-5MCFW2HC.js';
-export { THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS, ThemePanel } from './chunk-BX45WJRT.js';
-export { Timeline } from './chunk-VGERRI4S.js';
-export { Tooltip } from './chunk-HYXA7S43.js';
-export { Link, Paragraph, Text, Title, Typography } from './chunk-O7OPFKAM.js';
-export { Slider } from './chunk-JST4HJ3I.js';
-export { Splitter } from './chunk-LM5XXSGE.js';
-export { StatusBar, StatusBarItem } from './chunk-E2OC4CUE.js';
-export { SURFACE_THEME_PRESETS, Surface } from './chunk-GGNBMIZ2.js';
+export { Timeline } from './chunk-OTSDPQPV.js';
+export { Tooltip } from './chunk-MOZ52KN6.js';
+export { Link, Paragraph, Text, Title, Typography } from './chunk-6HF6UF73.js';
+export { TablePro } from './chunk-QNN3YV2P.js';
+export { Table } from './chunk-4YSGGZDB.js';
+export { Tabs } from './chunk-ZTCRD2FL.js';
+export { THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS, ThemePanel } from './chunk-3VSHGM54.js';
+export { TimePicker } from './chunk-N7CHFKRS.js';
+export { Skeleton } from './chunk-R3DTXVP2.js';
+export { Slider } from './chunk-D7GK6H6V.js';
+export { Splitter } from './chunk-IZHH6CVY.js';
+export { StatusBar, StatusBarItem } from './chunk-TYLDISRK.js';
+export { SURFACE_THEME_PRESETS, Surface } from './chunk-JFL2WMJZ.js';
 import './chunk-6SPMHY54.js';
-export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, FONT_STACKS, ThemeProvider, applyTheme, normalizeAccentInput, resolveThemeColorScheme, resolveThemeMode, useTheme, useThemeOptional } from './chunk-DEXYWDHF.js';
-export { Switch } from './chunk-BK4XKZUO.js';
-export { TablePro } from './chunk-R3JCW3ES.js';
-export { Table } from './chunk-GVULVTWO.js';
-export { MessageContainer, ToastContainer, message, toast } from './chunk-HAA5C5YW.js';
-export { Modal } from './chunk-WY6AEPFW.js';
-export { Pagination } from './chunk-EVKLGNVR.js';
-export { Popover } from './chunk-BAWP2QVY.js';
-export { Progress } from './chunk-LFPFFSN2.js';
-export { Radio, RadioGroup } from './chunk-TAHZH6DJ.js';
-export { Select } from './chunk-UMLRSKBE.js';
-export { Tag } from './chunk-DCATZUT3.js';
-export { Skeleton } from './chunk-V5HMQGFD.js';
-export { Drawer } from './chunk-A7BI7YWZ.js';
-export { Empty } from './chunk-7RNT6KN4.js';
-export { Form, FormItem, useForm } from './chunk-XJTDCWKP.js';
-export { Image, ImageGrid, LayeredImage, SpriteImage } from './chunk-JKFGLYMM.js';
-export { InputNumber } from './chunk-KRVWQKTZ.js';
-export { List } from './chunk-2M5WJENK.js';
-export { Card } from './chunk-Q4IAUKAW.js';
-export { Spin } from './chunk-LA62SD2F.js';
-export { Cascader } from './chunk-VJVXXCNL.js';
-export { Checkbox } from './chunk-5GKALAMP.js';
-export { Collapse } from './chunk-6Z4PZWND.js';
-export { ColorPicker } from './chunk-QVWCUKEY.js';
-export { CommandPalette } from './chunk-TTXYZDQ3.js';
-export { ContextMenu } from './chunk-ZNR6LWTQ.js';
-export { Divider } from './chunk-NZBOHEQA.js';
-export { Alert } from './chunk-RUE3QE6T.js';
-export { AppShell, Sidebar, TitleBar, WindowControls } from './chunk-UROQO2HR.js';
-export { AutoComplete } from './chunk-EKNDL2XB.js';
+export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, FONT_STACKS, ThemeProvider, applyTheme, normalizeAccentInput, resolveThemeColorScheme, resolveThemeMode, useTheme, useThemeOptional } from './chunk-GNV6W4BN.js';
+export { Switch } from './chunk-PU7VXDAS.js';
+export { InputNumber } from './chunk-3VXGZ3SJ.js';
+export { List } from './chunk-YAFDVNXT.js';
+export { MessageContainer, ToastContainer, message, toast } from './chunk-P64NPZBG.js';
+export { Modal } from './chunk-BVQOJKRX.js';
+export { Pagination } from './chunk-6LC4QROE.js';
+export { Select } from './chunk-6PHPRZTT.js';
+export { Tag } from './chunk-6K5YI4ZE.js';
+export { Popover } from './chunk-I777JTTG.js';
+export { Progress } from './chunk-KMPFESEV.js';
+export { Radio, RadioGroup } from './chunk-KYV75JPQ.js';
+export { DateTimePicker } from './chunk-CUBKHQ63.js';
+export { Divider } from './chunk-HBO7ZDEQ.js';
+export { Drawer } from './chunk-WMGMIE2D.js';
+export { Empty } from './chunk-6MEOLYNQ.js';
+export { Form, FormItem, useForm } from './chunk-ZR4IMROK.js';
+export { Image, ImageGrid, LayeredImage, SpriteImage } from './chunk-EQ4FPOQQ.js';
+export { Card } from './chunk-ARUPS7JH.js';
+export { Spin } from './chunk-FYSXJXNW.js';
+export { Cascader } from './chunk-4HJBF4GY.js';
+export { Checkbox } from './chunk-ZD3L4V3H.js';
+export { Collapse } from './chunk-6LN4VVX7.js';
+export { ColorPicker } from './chunk-TJECLLN4.js';
+export { CommandPalette } from './chunk-5MOYKVB7.js';
+export { ContextMenu } from './chunk-AAPZLBHQ.js';
+export { DatePicker } from './chunk-FKP5D5IS.js';
+export { Alert } from './chunk-A6O25EP2.js';
+export { AppShell, Sidebar, TitleBar, WindowControls } from './chunk-XCXUGHDF.js';
+export { AutoComplete } from './chunk-CFZVWY5N.js';
 import './chunk-DUFRASGO.js';
-export { Input, InputPassword } from './chunk-IZGHMMX7.js';
-export { TextArea, Textarea } from './chunk-M63HWVOS.js';
-export { Avatar } from './chunk-TCWGIRAW.js';
-export { Badge } from './chunk-T7RV2UMU.js';
-export { Button, IconButton } from './chunk-CQKQ7KS2.js';
-export { Calendar } from './chunk-J3LUTXVO.js';
-export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, isIconName, renderIconSlot, resolveIconName } from './chunk-HHBXCBZP.js';
+export { Input, InputPassword } from './chunk-IOAOG5L7.js';
+export { TextArea, Textarea } from './chunk-S7IHWY24.js';
+export { Avatar } from './chunk-RR2BKV65.js';
+export { Badge } from './chunk-DSLYWX4O.js';
+export { Button, IconButton } from './chunk-IPSNC5VZ.js';
+export { Calendar } from './chunk-I7TOBKJO.js';
+export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, isIconName, renderIconSlot, resolveIconName } from './chunk-FDZG27IG.js';
 
 // src/index.ts
-var VERSION = "0.6.13";
+var VERSION = "0.6.15";
 
 export { VERSION };

package/dist/styles.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);
@@ -138,6 +139,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));
@@ -159,6 +161,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);
@@ -1628,7 +1631,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background: color-mix(in oklch, var(--bg-sunken) 60%, transparent);
+  background: var(--modal-mask-bg, var(--mask-bg));
   backdrop-filter: blur(8px);
   display: grid;
   place-items: center;
@@ -1723,7 +1726,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .drawer-overlay {
   position: fixed;
   inset: 0;
-  background: color-mix(in oklch, var(--bg-sunken) 50%, transparent);
+  background: var(--drawer-mask-bg, var(--mask-bg));
   backdrop-filter: blur(4px);
   z-index: 150;
   animation: fadeIn var(--dur) var(--ease);
@@ -2565,6 +2568,249 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .skeleton-box .skeleton-row {
   display: block;
 }
+/* ============ DatePicker ============ */
+.date-picker {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  min-width: 180px;
+}
+.date-picker.disabled {
+  opacity: 0.55;
+  pointer-events: none;
+}
+.date-picker.readonly .input-wrap {
+  cursor: default;
+}
+.date-picker .input-wrap {
+  width: 100%;
+}
+.date-picker.open .input-wrap {
+  box-shadow: var(--neu-shadow-inset);
+}
+.date-picker-panel {
+  position: fixed;
+  z-index: 1000;
+  width: 344px;
+  padding: var(--gap-3);
+  border-radius: var(--r-md);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-float);
+  animation: menuIn var(--dur) var(--ease);
+}
+.date-picker-panel .calendar {
+  width: 100%;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.date-picker-panel .calendar-head {
+  padding: 0 0 var(--gap-3);
+}
+.date-picker-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-2);
+  margin-top: var(--gap-3);
+  padding-top: var(--gap-3);
+  border-top: 1px solid var(--divider);
+}
+.date-picker-footer-spacer {
+  flex: 1;
+  min-width: 0;
+}
+/* ============ DateTimePicker ============ */
+.date-time-picker {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  min-width: 220px;
+}
+.date-time-picker.disabled {
+  opacity: 0.55;
+  pointer-events: none;
+}
+.date-time-picker.readonly .input-wrap {
+  cursor: default;
+}
+.date-time-picker .input-wrap {
+  width: 100%;
+}
+.date-time-picker.open .input-wrap {
+  box-shadow: var(--neu-shadow-inset);
+}
+.date-time-picker-panel {
+  position: fixed;
+  z-index: 1000;
+  width: 476px;
+  padding: var(--gap-2) var(--gap-3);
+  border-radius: var(--r-md);
+  background: var(--bg);
+  box-shadow:
+    0 calc(var(--shadow-offset) * 1.1) calc(var(--shadow-blur) * 1.3) color-mix(in oklch, var(--shadow-dark) 72%, transparent),
+    inset 0 0 0 1px var(--divider);
+  animation: menuIn var(--dur) var(--ease);
+}
+.date-time-picker-body {
+  display: grid;
+  grid-template-columns: 272px minmax(0, 168px);
+  gap: var(--gap-3);
+  align-items: start;
+}
+.date-time-picker-panel .calendar {
+  width: 100%;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.date-time-picker-panel .calendar-head {
+  padding: 0 0 var(--gap-1);
+}
+.date-time-picker-panel .calendar-title {
+  padding: var(--gap-1) var(--gap-2);
+  font-size: var(--fs-sm);
+}
+.date-time-picker-panel .calendar-title-part {
+  padding: var(--gap-1) 6px;
+  font-size: var(--fs-sm);
+}
+.date-time-picker-panel .calendar-grid {
+  gap: 1px;
+  min-height: 222px;
+}
+.date-time-picker-panel .calendar-dow {
+  padding: var(--gap-1) 0;
+}
+.date-time-picker-panel .calendar-cell {
+  aspect-ratio: auto;
+  height: 32px;
+  font-size: var(--fs-xs);
+  border-radius: 7px;
+}
+.date-time-picker-panel .calendar-cell.today::after {
+  bottom: 3px;
+}
+.date-time-picker-panel .calendar-select-grid {
+  min-height: 222px;
+  gap: var(--gap-1);
+}
+.date-time-picker-panel .calendar-select-option {
+  height: 34px;
+  font-size: var(--fs-xs);
+}
+.date-time-picker-time {
+  min-width: 0;
+}
+.date-time-picker-time-columns {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  padding: 8px;
+  border-radius: var(--r-sm);
+  background: var(--bg);
+  box-shadow: inset 0 0 0 1px var(--divider);
+  overflow: hidden;
+}
+.date-time-picker-panel.without-second .date-time-picker-time-columns {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.date-time-picker-time-column {
+  min-width: 0;
+}
+.date-time-picker-time-column + .date-time-picker-time-column {
+  border-left: 1px solid var(--divider);
+}
+.date-time-picker-time-label {
+  height: 20px;
+  display: grid;
+  place-items: center;
+  font-size: var(--fs-xs);
+  font-weight: 700;
+  color: var(--fg-muted);
+}
+.date-time-picker-time-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  height: 220px;
+  overflow-y: auto;
+  padding: 90px 5px;
+  scroll-padding: 90px 0;
+  scrollbar-width: none;
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
+  mask-image: linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
+}
+.date-time-picker-time-list::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+.date-time-picker-time-option {
+  flex: 0 0 28px;
+  width: 100%;
+  height: 28px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--fg);
+  cursor: pointer;
+  font: 600 var(--fs-md) var(--font-mono);
+  transition:
+    color var(--dur-fast) var(--ease),
+    background var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease);
+}
+.date-time-picker-time-option:hover:not(:disabled) {
+  color: var(--accent-ink);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-subtle);
+}
+.date-time-picker-time-option.selected {
+  color: var(--accent-ink);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-subtle);
+}
+.date-time-picker-time-option:disabled {
+  color: var(--fg-subtle);
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.date-time-picker-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-2);
+  margin-top: var(--gap-2);
+  padding-top: var(--gap-2);
+  border-top: 1px solid var(--divider);
+}
+.date-time-picker-footer-spacer {
+  flex: 1;
+  min-width: 0;
+}
+.date-time-picker-footer .btn {
+  min-width: 54px;
+}
+@media (max-width: 640px) {
+  .date-time-picker-panel {
+    width: 332px;
+  }
+
+  .date-time-picker-body {
+    display: block;
+  }
+
+  .date-time-picker-time {
+    margin-top: var(--gap-3);
+  }
+
+  .date-time-picker-time-columns {
+    height: auto;
+  }
+
+  .date-time-picker-time-list {
+    height: 118px;
+    padding: 28px 8px;
+    scroll-padding: 28px 0;
+  }
+}
 /* ============ Calendar ============ */
 .calendar {
   background: var(--bg);
@@ -2586,6 +2832,36 @@ input, textarea, select { font-family: inherit; color: inherit; }
   transition: all var(--dur-fast) var(--ease);
 }
 .calendar-title:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
+.calendar-title.static {
+  cursor: default;
+}
+.calendar-title.static:hover {
+  background: transparent;
+  box-shadow: none;
+}
+.calendar-title-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-1);
+}
+.calendar-title-part {
+  border: none;
+  border-radius: var(--r-sm);
+  padding: 6px 8px;
+  background: transparent;
+  color: var(--fg);
+  cursor: pointer;
+  font: 600 14px var(--font-sans);
+  transition:
+    color var(--dur-fast) var(--ease),
+    background var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease);
+}
+.calendar-title-part:hover {
+  color: var(--accent-ink);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-subtle);
+}
 .calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -2630,6 +2906,172 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .calendar-cell.disabled { color: var(--fg-subtle); opacity: 0.4; cursor: not-allowed; }
 .calendar-cell.disabled:hover { background: transparent; box-shadow: none; }
+.calendar-select-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--gap-2);
+  min-height: 244px;
+  align-content: center;
+}
+.calendar-select-option {
+  height: 42px;
+  border: none;
+  border-radius: var(--r-sm);
+  background: transparent;
+  color: var(--fg);
+  cursor: pointer;
+  font: 600 var(--fs-md) var(--font-mono);
+  transition:
+    color var(--dur-fast) var(--ease),
+    background var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease);
+}
+.calendar-select-option:hover:not(:disabled) {
+  color: var(--accent-ink);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-subtle);
+}
+.calendar-select-option.selected {
+  color: var(--accent-ink);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-inset);
+}
+.calendar-select-option.disabled {
+  color: var(--fg-subtle);
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+/* ============ TimePicker ============ */
+.time-picker {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  min-width: 180px;
+}
+.time-picker.disabled {
+  opacity: 0.55;
+  pointer-events: none;
+}
+.time-picker.readonly .input-wrap {
+  cursor: default;
+}
+.time-picker .input-wrap {
+  width: 100%;
+}
+.time-picker.open .input-wrap {
+  box-shadow: var(--neu-shadow-inset);
+}
+.time-picker-panel {
+  position: fixed;
+  z-index: 1000;
+  width: 300px;
+  padding: 10px;
+  border-radius: var(--r-md);
+  background: var(--bg);
+  box-shadow:
+    0 calc(var(--shadow-offset) * 1.1) calc(var(--shadow-blur) * 1.3) color-mix(in oklch, var(--shadow-dark) 72%, transparent),
+    inset 0 0 0 1px var(--divider);
+  animation: menuIn var(--dur) var(--ease);
+}
+.time-picker-panel.without-second {
+  width: 228px;
+}
+.time-picker-columns {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0;
+  padding: 8px;
+  border-radius: var(--r-sm);
+  background: var(--bg);
+  box-shadow: inset 0 0 0 1px var(--divider);
+  overflow: hidden;
+}
+.time-picker-column + .time-picker-column {
+  border-left: 1px solid var(--divider);
+}
+.time-picker-panel.without-second .time-picker-columns {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.time-picker-column {
+  min-width: 0;
+}
+.time-picker-column-label {
+  height: 22px;
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  font-size: var(--fs-xs);
+  font-weight: 700;
+  color: var(--fg-muted);
+}
+.time-picker-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  height: 166px;
+  overflow-y: auto;
+  padding: 40px 8px;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  scroll-padding: 40px 0;
+  scrollbar-width: none;
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
+  mask-image: linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
+}
+.time-picker-list::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+.time-picker-option {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 30px;
+  width: 100%;
+  height: 30px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--fg);
+  cursor: pointer;
+  font: 600 var(--fs-md) var(--font-mono);
+  transition:
+    color var(--dur-fast) var(--ease),
+    background var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease);
+}
+.time-picker-option:hover:not(:disabled) {
+  color: var(--accent-ink);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-subtle);
+}
+.time-picker-option.selected {
+  background: var(--bg);
+  color: var(--accent-ink);
+  box-shadow: var(--neu-shadow-subtle);
+}
+.time-picker-option:disabled {
+  color: var(--fg-subtle);
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.time-picker-footer {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  padding: 8px 0 0;
+  border-top: 1px solid var(--divider);
+}
+.time-picker-footer-spacer {
+  flex: 1;
+  min-width: 0;
+}
+.time-picker-footer .btn {
+  min-width: 54px;
+}
 /* ============ Image ============ */
 .n-image {
   display: inline-block;
@@ -2746,7 +3188,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .n-image:hover .image-hint { opacity: 1; transform: translateY(0); }
 .image-preview-overlay {
   position: fixed; inset: 0;
-  background: color-mix(in oklch, var(--bg-sunken) 82%, transparent);
+  background: var(--image-preview-mask-bg, var(--mask-bg));
   backdrop-filter: blur(16px);
   display: grid; place-items: center;
   z-index: 500;

package/dist/{tokens-OJLK3XMZ.css → tokens-RYJ3DFTU.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);