@fangxinyan/lumina 0.6.18 → 0.8.0

package/dist/{chunk-SOCYOUGM.js → chunk-4SKHRPDH.js}

@@ -1,23 +1,27 @@
 import { useInputTriggerToggle } from './chunk-RC6ULCQP.js';
-import { useFloating } from './chunk-DUFRASGO.js';
-import { Input } from './chunk-IOAOG5L7.js';
-import { Button } from './chunk-IPSNC5VZ.js';
-import { Calendar } from './chunk-I7TOBKJO.js';
-import './tokens-RYJ3DFTU.css';
+import { useFloating } from './chunk-3QXP2ZNP.js';
+import { Input } from './chunk-UE4HFGJ6.js';
+import { useOverlayLayer } from './chunk-2A4GYSN4.js';
+import { Button } from './chunk-JHM7MN3G.js';
+import { Calendar } from './chunk-3DKFS44V.js';
+import { useComponentPortalTheme, InternalComponentThemePart, withComponentTheme } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './DateTimePicker-DRX7XA74.css';
+import './DateTimePicker-EWSISVIF.css';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var pad = (value) => String(value).padStart(2, "0");
+var MAX_DAY_AVAILABILITY_PROBES = 4096;
+var MAX_EAGER_CALENDAR_CANDIDATES = 256;
 var clampStep = (value) => {
   if (!Number.isFinite(value) || !value || value < 1) return 1;
   return Math.floor(value);
 };
 var isValidDate = (date) => date instanceof Date && !Number.isNaN(date.getTime());
 var startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
-var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 var normalizeDateTime = (date, includeSecond) => {
   const normalized = new Date(date);
   if (!includeSecond) normalized.setSeconds(0);
@@ -34,11 +38,6 @@ var composeDateTime = (date, time, includeSecond) => {
   next.setHours(time.hour, time.minute, includeSecond ? time.second : 0, 0);
   return next;
 };
-var composeTime = (base, key, value) => ({
-  hour: key === "hour" ? value : base.hour,
-  minute: key === "minute" ? value : base.minute,
-  second: key === "second" ? value : base.second
-});
 var byDistanceFrom = (preferred) => (a, b) => Math.abs(a - preferred) - Math.abs(b - preferred) || a - b;
 var buildOptions = (max, step, selected) => {
   const safeStep = clampStep(step);
@@ -84,12 +83,13 @@ var parseDateTimeInput = (input, includeSecond) => {
   return date;
 };
 var getNow = (includeSecond) => normalizeDateTime(/* @__PURE__ */ new Date(), includeSecond);
-var DateTimePicker = React.forwardRef(
+var DateTimePickerBase = React.forwardRef(
   ({
     value,
     defaultValue = null,
     onChange,
     format = "YYYY-MM-DD HH:mm",
+    parse,
     showSecond,
     placeholder = "\u8BF7\u9009\u62E9\u65E5\u671F\u65F6\u95F4",
     disabled,
@@ -112,6 +112,12 @@ var DateTimePicker = React.forwardRef(
     dropdownClassName = "",
     className = "",
     onKeyDown,
+    id: fieldId,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-required": ariaRequired,
+    "aria-label": ariaLabel,
     ...rest
   }, ref) => {
     const includeSecond = showSecond ?? format === "YYYY-MM-DD HH:mm:ss";
@@ -134,6 +140,7 @@ var DateTimePicker = React.forwardRef(
     const open = openControlled ? !!openProp : innerOpen;
     const [compactPanel, setCompactPanel] = React.useState(false);
     const [calendarViewDate, setCalendarViewDate] = React.useState(null);
+    const [calendarVisibleDate, setCalendarVisibleDate] = React.useState(null);
     const wasOpenRef = React.useRef(false);
     const scrollSignatureRef = React.useRef(null);
     const scrollFramesRef = React.useRef(/* @__PURE__ */ new Map());
@@ -152,13 +159,23 @@ var DateTimePicker = React.forwardRef(
       setOpen
     });
     const rootRef = React.useRef(null);
-    const panelRef = React.useRef(null);
-    const { triggerRef, floatingStyle } = useFloating({
+    const panelId = React.useId();
+    const portalContainer = usePortalContainer();
+    const portalTheme = useComponentPortalTheme("DateTimePicker");
+    const { triggerRef, floatingRef: panelRef, floatingStyle, zIndex: panelZIndex } = useFloating({
       open,
       placement,
       panelWidth: compactPanel ? 332 : 476,
       panelHeight: compactPanel ? includeSecond ? 492 : 468 : 328
     });
+    useOverlayLayer({
+      open: open && !disabled && !readOnly && portalContainer != null,
+      containerRef: panelRef,
+      ownerRef: triggerRef,
+      zIndex: panelZIndex,
+      onEscape: () => setOpen(false),
+      restoreFocus: true
+    });
     const setRootRef = React.useCallback(
       (node) => {
         rootRef.current = node;
@@ -169,7 +186,7 @@ var DateTimePicker = React.forwardRef(
       [ref, triggerRef]
     );
     React.useEffect(() => {
-      if (typeof window === "undefined") return;
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
       const media = window.matchMedia("(max-width: 640px)");
       const update = () => setCompactPanel(media.matches);
       update();
@@ -193,15 +210,18 @@ var DateTimePicker = React.forwardRef(
       },
       [disabledDate, normalizedMax, normalizedMin]
     );
-    const isDisabledDateTime = React.useCallback(
+    const isDisabledTimeOnEnabledDay = React.useCallback(
       (date) => {
         const normalized = normalizeDateTime(date, includeSecond);
-        if (isDisabledDay(normalized)) return true;
         if (normalizedMin && normalized < normalizedMin) return true;
         if (normalizedMax && normalized > normalizedMax) return true;
         return disabledTime?.(getTimeParts(normalized), startOfDay(normalized)) ?? false;
       },
-      [disabledTime, includeSecond, isDisabledDay, normalizedMax, normalizedMin]
+      [disabledTime, includeSecond, normalizedMax, normalizedMin]
+    );
+    const isDisabledDateTime = React.useCallback(
+      (date) => isDisabledDay(date) || isDisabledTimeOnEnabledDay(date),
+      [isDisabledDay, isDisabledTimeOnEnabledDay]
     );
     const commit = React.useCallback(
       (next, close = false) => {
@@ -230,20 +250,16 @@ var DateTimePicker = React.forwardRef(
         if (panelRef.current?.contains(target)) return;
         setOpen(false);
       };
-      const onDocKey = (event) => {
-        if (event.key === "Escape") setOpen(false);
-      };
       document.addEventListener("mousedown", onDown);
-      document.addEventListener("keydown", onDocKey);
       return () => {
         document.removeEventListener("mousedown", onDown);
-        document.removeEventListener("keydown", onDocKey);
       };
     }, [open, setOpen]);
     const scrollListTo = React.useCallback(
       (list, top, animate) => {
         const frame = scrollFramesRef.current.get(list);
         if (frame != null) cancelAnimationFrame(frame);
+        scrollFramesRef.current.delete(list);
         if (!animate) {
           list.scrollTop = top;
           return;
@@ -273,7 +289,8 @@ var DateTimePicker = React.forwardRef(
     );
     React.useEffect(() => {
       if (!open) return;
-      const shouldAnimate = wasOpenRef.current && scrollSignatureRef.current != null && scrollSignatureRef.current !== scrollSignature;
+      const prefersReducedMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const shouldAnimate = !prefersReducedMotion && wasOpenRef.current && scrollSignatureRef.current != null && scrollSignatureRef.current !== scrollSignature;
       requestAnimationFrame(() => {
         panelRef.current?.querySelectorAll(".date-time-picker-time-list").forEach((list) => {
           const selected = list.querySelector(".date-time-picker-time-option.selected");
@@ -290,6 +307,7 @@ var DateTimePicker = React.forwardRef(
       wasOpenRef.current = false;
       scrollSignatureRef.current = null;
       setCalendarViewDate(null);
+      setCalendarVisibleDate(null);
     }, [open]);
     React.useEffect(
       () => () => {
@@ -304,37 +322,95 @@ var DateTimePicker = React.forwardRef(
     const hourOptions = buildOptions(23, hourStep, timeParts.hour);
     const minuteOptions = buildOptions(59, minuteStep, timeParts.minute);
     const secondOptions = buildOptions(59, secondStep, timeParts.second);
-    const findAvailableTime = (key, value2) => {
-      const preferred = composeTime(timeParts, key, value2);
-      if (!isDisabledDateTime(composeDateTime(selectedDay, preferred, includeSecond))) {
-        return preferred;
+    const sortedHourOptions = [...hourOptions].sort(byDistanceFrom(timeParts.hour));
+    const sortedMinuteOptions = [...minuteOptions].sort(byDistanceFrom(timeParts.minute));
+    const sortedSecondOptions = includeSecond ? [...secondOptions].sort(byDistanceFrom(timeParts.second)) : [0];
+    const dayCandidateCount = sortedHourOptions.length * sortedMinuteOptions.length * sortedSecondOptions.length;
+    const availabilityCache = React.useMemo(
+      () => /* @__PURE__ */ new Map(),
+      [
+        disabledDate,
+        disabledTime,
+        hourStep,
+        includeSecond,
+        minuteStep,
+        normalizedMax?.getTime(),
+        normalizedMin?.getTime(),
+        secondStep,
+        timeParts.hour,
+        timeParts.minute,
+        timeParts.second
+      ]
+    );
+    const getDayAvailability = (date) => {
+      const dayKey = startOfDay(date).getTime();
+      const cached = availabilityCache.get(dayKey);
+      if (cached) return cached;
+      const availability = {
+        closestDateTime: null,
+        byPart: {
+          hour: /* @__PURE__ */ new Map(),
+          minute: /* @__PURE__ */ new Map(),
+          second: /* @__PURE__ */ new Map()
+        },
+        complete: false
+      };
+      availabilityCache.set(dayKey, availability);
+      const day = startOfDay(date);
+      if (isDisabledDay(day)) {
+        availability.complete = true;
+        return availability;
       }
-      const hours = key === "hour" ? [value2] : [...hourOptions].sort(byDistanceFrom(timeParts.hour));
-      const minutes = key === "minute" ? [value2] : [...minuteOptions].sort(byDistanceFrom(timeParts.minute));
-      const seconds = key === "second" ? [value2] : includeSecond ? [...secondOptions].sort(byDistanceFrom(timeParts.second)) : [0];
-      for (const hour of hours) {
-        for (const minute of minutes) {
-          for (const second of seconds) {
-            const candidate = { hour, minute, second };
-            if (!isDisabledDateTime(composeDateTime(selectedDay, candidate, includeSecond))) {
-              return candidate;
+      const visited = /* @__PURE__ */ new Set();
+      const inspectCandidate = (time) => {
+        const key = `${time.hour}:${time.minute}:${time.second}`;
+        if (visited.has(key) || visited.size >= MAX_DAY_AVAILABILITY_PROBES) return;
+        visited.add(key);
+        const candidate = composeDateTime(day, time, includeSecond);
+        if (isDisabledTimeOnEnabledDay(candidate)) return;
+        availability.closestDateTime ?? (availability.closestDateTime = candidate);
+        availability.byPart.hour.set(time.hour, availability.byPart.hour.get(time.hour) ?? time);
+        availability.byPart.minute.set(time.minute, availability.byPart.minute.get(time.minute) ?? time);
+        availability.byPart.second.set(time.second, availability.byPart.second.get(time.second) ?? time);
+      };
+      const allPartsCovered = () => availability.byPart.hour.size === hourOptions.length && availability.byPart.minute.size === minuteOptions.length && availability.byPart.second.size === sortedSecondOptions.length;
+      inspectCandidate(timeParts);
+      sortedHourOptions.forEach((hour) => inspectCandidate({ ...timeParts, hour }));
+      sortedMinuteOptions.forEach((minute) => inspectCandidate({ ...timeParts, minute }));
+      sortedSecondOptions.forEach((second) => inspectCandidate({ ...timeParts, second }));
+      scanCandidates:
+        for (const minute of sortedMinuteOptions) {
+          for (const second of sortedSecondOptions) {
+            for (const hour of sortedHourOptions) {
+              if (visited.size >= MAX_DAY_AVAILABILITY_PROBES || allPartsCovered()) {
+                break scanCandidates;
+              }
+              inspectCandidate({ hour, minute, second });
             }
           }
         }
+      availability.complete = visited.size >= dayCandidateCount;
+      return availability;
+    };
+    const findAvailableTime = (key, value2) => {
+      return getDayAvailability(selectedDay).byPart[key].get(value2) ?? null;
+    };
+    const findAvailableDateTimeOnDay = (date) => {
+      return getDayAvailability(date).closestDateTime;
+    };
+    const isCalendarDayDisabled = (date) => {
+      if (isDisabledDay(date)) return true;
+      const visible = calendarVisibleDate ?? calendarViewDate ?? selectedDay;
+      if (date.getFullYear() !== visible.getFullYear() || date.getMonth() !== visible.getMonth()) {
+        return false;
       }
-      return null;
+      if (dayCandidateCount > MAX_EAGER_CALENDAR_CANDIDATES) return false;
+      const availability = getDayAvailability(date);
+      return availability.complete && availability.closestDateTime == null;
     };
     const handleDatePick = (date) => {
-      const next = composeDateTime(date, timeParts, includeSecond);
-      if (normalizedMin && isSameDay(next, normalizedMin) && next < normalizedMin) {
-        commit(normalizedMin);
-        return;
-      }
-      if (normalizedMax && isSameDay(next, normalizedMax) && next > normalizedMax) {
-        commit(normalizedMax);
-        return;
-      }
-      commit(next);
+      const available = findAvailableDateTimeOnDay(date);
+      if (available) commit(available);
     };
     const pickTime = (key, nextValue) => {
       const nextTime = findAvailableTime(key, nextValue);
@@ -349,12 +425,8 @@ var DateTimePicker = React.forwardRef(
         setDraft(formatDateTime(current, format, includeSecond));
         return;
       }
-      if (typeof format === "function") {
-        setDraft(formatDateTime(current, format, includeSecond));
-        return;
-      }
-      const parsed = parseDateTimeInput(draft, includeSecond);
-      if (!parsed || isDisabledDateTime(parsed)) {
+      const parsed = parse ? parse(draft) : typeof format === "function" ? null : parseDateTimeInput(draft, includeSecond);
+      if (!isValidDate(parsed) || isDisabledDateTime(parsed)) {
         setDraft(formatDateTime(current, format, includeSecond));
         return;
       }
@@ -372,6 +444,20 @@ var DateTimePicker = React.forwardRef(
         setOpen(false);
       }
     };
+    const handleTimeOptionKeyDown = (event) => {
+      const list = event.currentTarget.parentElement;
+      if (!list) return;
+      const options = Array.from(list.querySelectorAll("button:not(:disabled)"));
+      const index = options.indexOf(event.currentTarget);
+      let nextIndex = index;
+      if (event.key === "ArrowDown" || event.key === "ArrowRight") nextIndex = index + 1;
+      else if (event.key === "ArrowUp" || event.key === "ArrowLeft") nextIndex = index - 1;
+      else if (event.key === "Home") nextIndex = 0;
+      else if (event.key === "End") nextIndex = options.length - 1;
+      else return;
+      event.preventDefault();
+      options[Math.max(0, Math.min(options.length - 1, nextIndex))]?.focus();
+    };
     const renderTimeColumn = (label, key, options) => /* @__PURE__ */ jsxs("div", { className: "date-time-picker-time-column", children: [
       /* @__PURE__ */ jsx("div", { className: "date-time-picker-time-label", children: label }),
       /* @__PURE__ */ jsx("div", { className: "date-time-picker-time-list", role: "listbox", "aria-label": label, children: options.map((option) => {
@@ -386,6 +472,7 @@ var DateTimePicker = React.forwardRef(
             disabled: optionDisabled,
             className: `date-time-picker-time-option ${selected ? "selected" : ""}`,
             onClick: () => pickTime(key, option),
+            onKeyDown: handleTimeOptionKeyDown,
             children: pad(option)
           },
           option
@@ -403,10 +490,16 @@ var DateTimePicker = React.forwardRef(
       invalid && "invalid",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs("div", { ref: setRootRef, className: rootClassName, onKeyDown: handleRootKeyDown, ...rest, children: [
+    return /* @__PURE__ */ jsx("div", { ref: setRootRef, className: rootClassName, onKeyDown: handleRootKeyDown, ...rest, children: /* @__PURE__ */ jsxs(InternalComponentThemePart, { components: ["Input", "Calendar", "Button"], children: [
       /* @__PURE__ */ jsx(
         Input,
         {
+          id: fieldId,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-invalid": ariaInvalid,
+          "aria-required": ariaRequired,
+          "aria-describedby": ariaDescribedBy,
           value: draft,
           size,
           placeholder,
@@ -420,17 +513,21 @@ var DateTimePicker = React.forwardRef(
           onBlur: handleInputBlur,
           inputMode: "numeric",
           "aria-expanded": open,
-          "aria-haspopup": "dialog"
+          "aria-haspopup": "dialog",
+          "aria-controls": open ? panelId : void 0
         }
       ),
-      open && !disabled && !readOnly && typeof document !== "undefined" && createPortal(
+      open && !disabled && !readOnly && portalContainer && createPortal(
         /* @__PURE__ */ jsxs(
           "div",
           {
             ref: panelRef,
+            id: panelId,
             className: `date-time-picker-panel ${includeSecond ? "with-second" : "without-second"} ${mergedPanelClassName}`,
             role: "dialog",
-            style: floatingStyle,
+            "aria-label": "\u9009\u62E9\u65E5\u671F\u548C\u65F6\u95F4",
+            ...portalTheme.dataAttributes,
+            style: { ...floatingStyle, ...portalTheme.style, ...portalTheme.styles.popup },
             children: [
               /* @__PURE__ */ jsxs("div", { className: "date-time-picker-body", children: [
                 /* @__PURE__ */ jsx(
@@ -440,7 +537,8 @@ var DateTimePicker = React.forwardRef(
                     viewDate: calendarViewDate ?? void 0,
                     min: normalizedMin ? startOfDay(normalizedMin) : void 0,
                     max: normalizedMax ? startOfDay(normalizedMax) : void 0,
-                    disabledDate: isDisabledDay,
+                    disabledDate: isCalendarDayDisabled,
+                    onViewChange: setCalendarVisibleDate,
                     onChange: handleDatePick
                   }
                 ),
@@ -459,6 +557,7 @@ var DateTimePicker = React.forwardRef(
                     disabled: isDisabledDateTime(today),
                     onClick: () => {
                       setCalendarViewDate(today);
+                      setCalendarVisibleDate(today);
                       commit(today);
                     },
                     children: "\u73B0\u5728"
@@ -479,11 +578,16 @@ var DateTimePicker = React.forwardRef(
             ]
           }
         ),
-        document.body
+        portalContainer
       )
-    ] });
+    ] }) });
   }
 );
-DateTimePicker.displayName = "DateTimePicker";
+DateTimePickerBase.displayName = "DateTimePicker";
+var DateTimePicker = withComponentTheme(
+  DateTimePickerBase,
+  "DateTimePicker",
+  ["date-time-picker", "calendar", "input", "button"]
+);
 
 export { DateTimePicker };

package/dist/{chunk-R3DTXVP2.js → chunk-5AXNUX3J.js}

@@ -1,12 +1,12 @@
-import './tokens-RYJ3DFTU.css';
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Skeleton-CVWH2VWN.css';
+import './Skeleton-FMFE3BRI.css';
 import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/components/Skeleton/Skeleton.tsx
 var AVATAR_SIZE_PX = { sm: 32, md: 40, lg: 56 };
-var Skeleton = React.forwardRef(({
+var SkeletonBase = React.forwardRef(({
   width = "100%",
   height = 16,
   circle,
@@ -26,6 +26,7 @@ var Skeleton = React.forwardRef(({
         ref,
         className: `skeleton ${animation} ${circle ? "circle" : ""} ${className}`.trim(),
         style: { width, height, borderRadius: circle ? "50%" : void 0, ...style },
+        "aria-hidden": "true",
         ...rest
       }
     );
@@ -48,6 +49,7 @@ var Skeleton = React.forwardRef(({
       ref,
       className: `skeleton-box ${className}`.trim(),
       style,
+      "aria-hidden": "true",
       ...rest,
       children: [
         avatarCfg && /* @__PURE__ */ jsx(
@@ -83,6 +85,7 @@ var Skeleton = React.forwardRef(({
     }
   );
 });
-Skeleton.displayName = "Skeleton";
+SkeletonBase.displayName = "Skeleton";
+var Skeleton = withComponentTheme(SkeletonBase, "Skeleton", "skeleton");
 
 export { Skeleton };