@fangxinyan/lumina 0.6.14 → 0.6.16

package/dist/{Calendar-RUTPKREW.css → Calendar-I6NHCXIB.css}

@@ -19,6 +19,36 @@
   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);
@@ -63,3 +93,38 @@
 }
 .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;
+}

package/dist/Calendar.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkZBTGYTQE_cjs = require('./chunk-ZBTGYTQE.cjs');
+var chunk4KDABJSY_cjs = require('./chunk-4KDABJSY.cjs');
 require('./chunk-QMX67CVT.cjs');
 
 
 
 Object.defineProperty(exports, "Calendar", {
   enumerable: true,
-  get: function () { return chunkZBTGYTQE_cjs.Calendar; }
+  get: function () { return chunk4KDABJSY_cjs.Calendar; }
 });

package/dist/Calendar.d.cts

@@ -4,6 +4,8 @@ interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defa
     value?: Date;
     defaultValue?: Date;
     onChange?: (date: Date) => void;
+    /** Sync the visible month to this date when it changes. */
+    viewDate?: Date;
     /** Min selectable date. */
     min?: Date;
     /** Max selectable date. */

package/dist/Calendar.d.ts

@@ -4,6 +4,8 @@ interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defa
     value?: Date;
     defaultValue?: Date;
     onChange?: (date: Date) => void;
+    /** Sync the visible month to this date when it changes. */
+    viewDate?: Date;
     /** Min selectable date. */
     min?: Date;
     /** Max selectable date. */

package/dist/Calendar.js

@@ -1,2 +1,2 @@
-export { Calendar } from './chunk-XG5D777V.js';
+export { Calendar } from './chunk-I7TOBKJO.js';
 import './chunk-FDZG27IG.js';

package/dist/DatePicker-VDVSIARF.css

@@ -0,0 +1,60 @@
+/* ============ 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;
+}

package/dist/DatePicker.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var chunkKHRYPNUV_cjs = require('./chunk-KHRYPNUV.cjs');
+require('./chunk-YB3IWIOJ.cjs');
+require('./chunk-VS3I5OKA.cjs');
+require('./chunk-RZEFKXL3.cjs');
+require('./chunk-SW2HMNCA.cjs');
+require('./chunk-4KDABJSY.cjs');
+require('./chunk-QMX67CVT.cjs');
+
+
+
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () { return chunkKHRYPNUV_cjs.DatePicker; }
+});

package/dist/DatePicker.d.cts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+type DatePickerFormat = "YYYY-MM-DD" | "YYYY/MM/DD" | "YYYY年MM月DD日";
+type DatePickerSize = "sm" | "md" | "lg";
+interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    /** Controlled selected date. Use `null` for an empty picker. */
+    value?: Date | null;
+    /** Initial selected date when uncontrolled. */
+    defaultValue?: Date | null;
+    /** Fires when the date changes or is cleared. */
+    onChange?: (date: Date | null, dateString: string) => void;
+    /** Display and input format. */
+    format?: DatePickerFormat | ((date: Date) => string);
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    size?: DatePickerSize;
+    /** Show a clear button when a date is selected. */
+    allowClear?: boolean;
+    /** Min selectable date. */
+    min?: Date;
+    /** Max selectable date. */
+    max?: Date;
+    /** Predicate that disables individual dates. */
+    disabledDate?: (date: Date) => boolean;
+    /** Where the panel appears relative to the trigger. */
+    placement?: "top" | "bottom" | "left" | "right";
+    /** Controlled panel open state. */
+    open?: boolean;
+    /** Initial panel open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when panel open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Class for the popped-out panel. */
+    popupClassName?: string;
+    /** Alias for `popupClassName`. */
+    dropdownClassName?: string;
+    className?: string;
+}
+/**
+ * `DatePicker` — input-triggered date picker built on top of `Calendar`.
+ *
+ * @example
+ * <DatePicker value={date} onChange={setDate} allowClear />
+ */
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { DatePicker, type DatePickerFormat, type DatePickerProps, type DatePickerSize };

package/dist/DatePicker.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+type DatePickerFormat = "YYYY-MM-DD" | "YYYY/MM/DD" | "YYYY年MM月DD日";
+type DatePickerSize = "sm" | "md" | "lg";
+interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    /** Controlled selected date. Use `null` for an empty picker. */
+    value?: Date | null;
+    /** Initial selected date when uncontrolled. */
+    defaultValue?: Date | null;
+    /** Fires when the date changes or is cleared. */
+    onChange?: (date: Date | null, dateString: string) => void;
+    /** Display and input format. */
+    format?: DatePickerFormat | ((date: Date) => string);
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    size?: DatePickerSize;
+    /** Show a clear button when a date is selected. */
+    allowClear?: boolean;
+    /** Min selectable date. */
+    min?: Date;
+    /** Max selectable date. */
+    max?: Date;
+    /** Predicate that disables individual dates. */
+    disabledDate?: (date: Date) => boolean;
+    /** Where the panel appears relative to the trigger. */
+    placement?: "top" | "bottom" | "left" | "right";
+    /** Controlled panel open state. */
+    open?: boolean;
+    /** Initial panel open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when panel open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Class for the popped-out panel. */
+    popupClassName?: string;
+    /** Alias for `popupClassName`. */
+    dropdownClassName?: string;
+    className?: string;
+}
+/**
+ * `DatePicker` — input-triggered date picker built on top of `Calendar`.
+ *
+ * @example
+ * <DatePicker value={date} onChange={setDate} allowClear />
+ */
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { DatePicker, type DatePickerFormat, type DatePickerProps, type DatePickerSize };

package/dist/DatePicker.js

@@ -0,0 +1,7 @@
+export { DatePicker } from './chunk-FKP5D5IS.js';
+import './chunk-DUFRASGO.js';
+import './chunk-IOAOG5L7.js';
+import './chunk-S7IHWY24.js';
+import './chunk-IPSNC5VZ.js';
+import './chunk-I7TOBKJO.js';
+import './chunk-FDZG27IG.js';

package/dist/DateTimePicker-DRX7XA74.css

@@ -0,0 +1,224 @@
+/* ============ 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: calc((220px - 28px) / 2) 5px;
+  scroll-padding: calc((220px - 28px) / 2) 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: calc((118px - 28px) / 2) 8px;
+    scroll-padding: calc((118px - 28px) / 2) 0;
+  }
+}

package/dist/DateTimePicker.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var chunk32FWB5NO_cjs = require('./chunk-32FWB5NO.cjs');
+require('./chunk-YB3IWIOJ.cjs');
+require('./chunk-VS3I5OKA.cjs');
+require('./chunk-RZEFKXL3.cjs');
+require('./chunk-SW2HMNCA.cjs');
+require('./chunk-4KDABJSY.cjs');
+require('./chunk-QMX67CVT.cjs');
+
+
+
+Object.defineProperty(exports, "DateTimePicker", {
+  enumerable: true,
+  get: function () { return chunk32FWB5NO_cjs.DateTimePicker; }
+});

package/dist/DateTimePicker.d.cts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { TimePickerValue } from './TimePicker.cjs';
+
+type DateTimePickerFormat = "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss";
+type DateTimePickerSize = "sm" | "md" | "lg";
+interface DateTimePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    /** Controlled selected date and time. Use `null` for an empty picker. */
+    value?: Date | null;
+    /** Initial selected date and time when uncontrolled. */
+    defaultValue?: Date | null;
+    /** Fires when the date-time changes or is cleared. */
+    onChange?: (date: Date | null, dateString: string) => void;
+    /** Display and input format. */
+    format?: DateTimePickerFormat | ((date: Date) => string);
+    /** Show the seconds column. Overrides `format` display if true. */
+    showSecond?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    size?: DateTimePickerSize;
+    /** Show a clear button when a value is selected. */
+    allowClear?: boolean;
+    /** Selectable hour increment. Default 1. */
+    hourStep?: number;
+    /** Selectable minute increment. Default 1. */
+    minuteStep?: number;
+    /** Selectable second increment. Default 1. */
+    secondStep?: number;
+    /** Min selectable date-time. */
+    min?: Date;
+    /** Max selectable date-time. */
+    max?: Date;
+    /** Predicate that disables individual days in the calendar. */
+    disabledDate?: (date: Date) => boolean;
+    /** Predicate that disables individual times for the active date. */
+    disabledTime?: (time: TimePickerValue, date: Date) => boolean;
+    /** Where the panel appears relative to the trigger. */
+    placement?: "top" | "bottom" | "left" | "right";
+    /** Controlled panel open state. */
+    open?: boolean;
+    /** Initial panel open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when panel open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Class for the popped-out panel. */
+    popupClassName?: string;
+    /** Alias for `popupClassName`. */
+    dropdownClassName?: string;
+    className?: string;
+}
+/**
+ * `DateTimePicker` — input-triggered date and time picker built from
+ * `Calendar` plus compact hour / minute / optional second columns.
+ *
+ * @example
+ * <DateTimePicker value={startAt} onChange={setStartAt} minuteStep={15} />
+ */
+declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { DateTimePicker, type DateTimePickerFormat, type DateTimePickerProps, type DateTimePickerSize };

package/dist/DateTimePicker.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { TimePickerValue } from './TimePicker.js';
+
+type DateTimePickerFormat = "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss";
+type DateTimePickerSize = "sm" | "md" | "lg";
+interface DateTimePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    /** Controlled selected date and time. Use `null` for an empty picker. */
+    value?: Date | null;
+    /** Initial selected date and time when uncontrolled. */
+    defaultValue?: Date | null;
+    /** Fires when the date-time changes or is cleared. */
+    onChange?: (date: Date | null, dateString: string) => void;
+    /** Display and input format. */
+    format?: DateTimePickerFormat | ((date: Date) => string);
+    /** Show the seconds column. Overrides `format` display if true. */
+    showSecond?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    size?: DateTimePickerSize;
+    /** Show a clear button when a value is selected. */
+    allowClear?: boolean;
+    /** Selectable hour increment. Default 1. */
+    hourStep?: number;
+    /** Selectable minute increment. Default 1. */
+    minuteStep?: number;
+    /** Selectable second increment. Default 1. */
+    secondStep?: number;
+    /** Min selectable date-time. */
+    min?: Date;
+    /** Max selectable date-time. */
+    max?: Date;
+    /** Predicate that disables individual days in the calendar. */
+    disabledDate?: (date: Date) => boolean;
+    /** Predicate that disables individual times for the active date. */
+    disabledTime?: (time: TimePickerValue, date: Date) => boolean;
+    /** Where the panel appears relative to the trigger. */
+    placement?: "top" | "bottom" | "left" | "right";
+    /** Controlled panel open state. */
+    open?: boolean;
+    /** Initial panel open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when panel open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Class for the popped-out panel. */
+    popupClassName?: string;
+    /** Alias for `popupClassName`. */
+    dropdownClassName?: string;
+    className?: string;
+}
+/**
+ * `DateTimePicker` — input-triggered date and time picker built from
+ * `Calendar` plus compact hour / minute / optional second columns.
+ *
+ * @example
+ * <DateTimePicker value={startAt} onChange={setStartAt} minuteStep={15} />
+ */
+declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { DateTimePicker, type DateTimePickerFormat, type DateTimePickerProps, type DateTimePickerSize };

package/dist/DateTimePicker.js

@@ -0,0 +1,7 @@
+export { DateTimePicker } from './chunk-YPE6CDXQ.js';
+import './chunk-DUFRASGO.js';
+import './chunk-IOAOG5L7.js';
+import './chunk-S7IHWY24.js';
+import './chunk-IPSNC5VZ.js';
+import './chunk-I7TOBKJO.js';
+import './chunk-FDZG27IG.js';