@fangxinyan/lumina 0.6.14 → 0.6.16

package/dist/chunk-FKP5D5IS.js

@@ -0,0 +1,271 @@
+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 './shared-NJHRNLRH.css';
+import './DatePicker-VDVSIARF.css';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var pad = (value) => String(value).padStart(2, "0");
+var startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+var isValidDate = (date) => date instanceof Date && !Number.isNaN(date.getTime());
+var formatDate = (date, format) => {
+  if (!isValidDate(date)) return "";
+  if (typeof format === "function") return format(date);
+  const year = String(date.getFullYear());
+  const month = pad(date.getMonth() + 1);
+  const day = pad(date.getDate());
+  if (format === "YYYY/MM/DD") return `${year}/${month}/${day}`;
+  if (format === "YYYY\u5E74MM\u6708DD\u65E5") return `${year}\u5E74${month}\u6708${day}\u65E5`;
+  return `${year}-${month}-${day}`;
+};
+var parseDateInput = (input) => {
+  const text = input.trim();
+  if (!text) return null;
+  const match = text.match(/^(\d{4})[-/.年](\d{1,2})[-/.月](\d{1,2})日?$/);
+  if (!match) return null;
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  const date = new Date(year, month - 1, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null;
+  }
+  return date;
+};
+var DatePicker = React.forwardRef(
+  ({
+    value,
+    defaultValue = null,
+    onChange,
+    format = "YYYY-MM-DD",
+    placeholder = "\u8BF7\u9009\u62E9\u65E5\u671F",
+    disabled,
+    readOnly,
+    invalid,
+    size = "md",
+    allowClear,
+    min,
+    max,
+    disabledDate,
+    placement = "bottom",
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    popupClassName = "",
+    dropdownClassName = "",
+    className = "",
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const controlled = value !== void 0;
+    const [inner, setInner] = React.useState(
+      isValidDate(defaultValue) ? startOfDay(defaultValue) : null
+    );
+    const current = controlled ? isValidDate(value) ? startOfDay(value) : null : inner;
+    const currentTime = current?.getTime() ?? null;
+    const formattedCurrent = React.useMemo(
+      () => currentTime == null ? "" : formatDate(new Date(currentTime), format),
+      [currentTime, format]
+    );
+    const [draft, setDraft] = React.useState(formattedCurrent);
+    React.useEffect(() => {
+      setDraft(formattedCurrent);
+    }, [formattedCurrent]);
+    const openControlled = openProp !== void 0;
+    const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+    const open = openControlled ? !!openProp : innerOpen;
+    const setOpen = React.useCallback(
+      (next) => {
+        if (disabled || readOnly) return;
+        if (!openControlled) setInnerOpen(next);
+        onOpenChange?.(next);
+      },
+      [disabled, onOpenChange, openControlled, readOnly]
+    );
+    const rootRef = React.useRef(null);
+    const panelRef = React.useRef(null);
+    const { triggerRef, floatingStyle } = useFloating({
+      open,
+      placement,
+      panelWidth: 344,
+      panelHeight: 404
+    });
+    const setRootRef = React.useCallback(
+      (node) => {
+        rootRef.current = node;
+        triggerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref, triggerRef]
+    );
+    const normalizedMin = React.useMemo(() => isValidDate(min) ? startOfDay(min) : void 0, [min]);
+    const normalizedMax = React.useMemo(() => isValidDate(max) ? startOfDay(max) : void 0, [max]);
+    const isDisabledDate = React.useCallback(
+      (date) => {
+        const day = startOfDay(date);
+        if (normalizedMin && day < normalizedMin) return true;
+        if (normalizedMax && day > normalizedMax) return true;
+        return disabledDate?.(day) ?? false;
+      },
+      [disabledDate, normalizedMax, normalizedMin]
+    );
+    const commit = React.useCallback(
+      (next, close = false) => {
+        if (!next) {
+          if (!controlled) setInner(null);
+          setDraft("");
+          onChange?.(null, "");
+          if (close) setOpen(false);
+          return;
+        }
+        const normalized = startOfDay(next);
+        if (isDisabledDate(normalized)) return;
+        if (!controlled) setInner(normalized);
+        const nextString = formatDate(normalized, format);
+        setDraft(nextString);
+        onChange?.(normalized, nextString);
+        if (close) setOpen(false);
+      },
+      [controlled, format, isDisabledDate, onChange, setOpen]
+    );
+    React.useEffect(() => {
+      if (!open) return;
+      const onDown = (event) => {
+        const target = event.target;
+        if (rootRef.current?.contains(target)) return;
+        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 handleInputChange = (next) => {
+      setDraft(next);
+      if (next.trim() === "") commit(null);
+    };
+    const handleInputBlur = () => {
+      if (!draft.trim()) {
+        setDraft(formattedCurrent);
+        return;
+      }
+      if (typeof format === "function") {
+        setDraft(formattedCurrent);
+        return;
+      }
+      const parsed = parseDateInput(draft);
+      if (!parsed || isDisabledDate(parsed)) {
+        setDraft(formattedCurrent);
+        return;
+      }
+      commit(parsed);
+    };
+    const handleRootKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if ((event.key === "ArrowDown" || event.key === "Enter") && !open) {
+        event.preventDefault();
+        setOpen(true);
+      }
+      if (event.key === "Escape" && open) {
+        event.preventDefault();
+        setOpen(false);
+      }
+    };
+    const today = startOfDay(/* @__PURE__ */ new Date());
+    const calendarValue = current ?? today;
+    const mergedPanelClassName = [popupClassName, dropdownClassName].filter(Boolean).join(" ");
+    const rootClassName = [
+      "date-picker",
+      size,
+      open && "open",
+      disabled && "disabled",
+      readOnly && "readonly",
+      invalid && "invalid",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ref: setRootRef, className: rootClassName, onKeyDown: handleRootKeyDown, ...rest, children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: draft,
+          size,
+          placeholder,
+          disabled,
+          readOnly,
+          invalid,
+          allowClear,
+          leadingIcon: "calendar",
+          onFocus: () => setOpen(true),
+          onClick: () => setOpen(true),
+          onValueChange: handleInputChange,
+          onBlur: handleInputBlur,
+          inputMode: "numeric",
+          "aria-expanded": open,
+          "aria-haspopup": "dialog"
+        }
+      ),
+      open && !disabled && !readOnly && typeof document !== "undefined" && createPortal(
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: panelRef,
+            className: `date-picker-panel ${mergedPanelClassName}`,
+            role: "dialog",
+            style: floatingStyle,
+            children: [
+              /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  value: calendarValue,
+                  min: normalizedMin,
+                  max: normalizedMax,
+                  disabledDate: isDisabledDate,
+                  onChange: (next) => commit(next, true)
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "date-picker-footer", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "sm",
+                    variant: "ghost",
+                    disabled: isDisabledDate(today),
+                    onClick: () => commit(today, true),
+                    children: "\u4ECA\u5929"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "date-picker-footer-spacer" }),
+                allowClear && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "sm",
+                    variant: "ghost",
+                    onClick: () => commit(null, true),
+                    children: "\u6E05\u7A7A"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", onClick: () => setOpen(false), children: "\u786E\u5B9A" })
+              ] })
+            ]
+          }
+        ),
+        document.body
+      )
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };

package/dist/chunk-I7TOBKJO.js

@@ -0,0 +1,219 @@
+import { Icon } from './chunk-FDZG27IG.js';
+import './tokens-RYJ3DFTU.css';
+import './shared-NJHRNLRH.css';
+import './Calendar-I6NHCXIB.css';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var WEEKDAYS = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
+var MONTHS = Array.from({ length: 12 }, (_, index) => `${index + 1} \u6708`);
+var YEARS_PER_PAGE = 12;
+var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var isValidDate = (date) => date instanceof Date && !Number.isNaN(date.getTime());
+var Calendar = React.forwardRef(({
+  value,
+  defaultValue,
+  onChange,
+  viewDate,
+  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 [mode, setMode] = React.useState("date");
+  const viewDateTime = isValidDate(viewDate) ? viewDate.getTime() : null;
+  const viewDateYear = isValidDate(viewDate) ? viewDate.getFullYear() : null;
+  const viewDateMonth = isValidDate(viewDate) ? viewDate.getMonth() : null;
+  React.useEffect(() => {
+    if (viewDateTime == null || viewDateYear == null || viewDateMonth == null) return;
+    setView(new Date(viewDateYear, viewDateMonth, 1));
+    setMode("date");
+  }, [viewDateMonth, viewDateTime, viewDateYear]);
+  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 isDisabledDay = React.useCallback(
+    (date) => min && date < min || max && date > max || (disabledDate?.(date) ?? false),
+    [disabledDate, max, min]
+  );
+  const isMonthDisabled = React.useCallback(
+    (year, month) => {
+      const count = new Date(year, month + 1, 0).getDate();
+      for (let day = 1; day <= count; day++) {
+        if (!isDisabledDay(new Date(year, month, day))) return false;
+      }
+      return true;
+    },
+    [isDisabledDay]
+  );
+  const isYearDisabled = React.useCallback(
+    (year) => Array.from({ length: 12 }, (_, month) => month).every(
+      (month) => isMonthDisabled(year, month)
+    ),
+    [isMonthDisabled]
+  );
+  const pick = (d) => {
+    const next = new Date(view.getFullYear(), view.getMonth(), d);
+    if (isDisabledDay(next)) return;
+    if (!isControlled) setInner(next);
+    onChange?.(next);
+  };
+  const shiftView = (step) => {
+    if (mode === "year") {
+      setView(new Date(view.getFullYear() + step * YEARS_PER_PAGE, view.getMonth(), 1));
+      return;
+    }
+    if (mode === "month") {
+      setView(new Date(view.getFullYear() + step, view.getMonth(), 1));
+      return;
+    }
+    setView(new Date(view.getFullYear(), view.getMonth() + step, 1));
+  };
+  const pickMonth = (month) => {
+    if (isMonthDisabled(view.getFullYear(), month)) return;
+    setView(new Date(view.getFullYear(), month, 1));
+    setMode("date");
+  };
+  const pickYear = (year) => {
+    if (isYearDisabled(year)) return;
+    setView(new Date(year, view.getMonth(), 1));
+    setMode("month");
+  };
+  const yearPageStart = Math.floor(view.getFullYear() / YEARS_PER_PAGE) * YEARS_PER_PAGE;
+  const years = Array.from({ length: YEARS_PER_PAGE }, (_, index) => yearPageStart + index);
+  const renderTitle = () => {
+    if (mode === "year") {
+      return /* @__PURE__ */ jsxs("span", { className: "calendar-title static", children: [
+        yearPageStart,
+        " - ",
+        yearPageStart + YEARS_PER_PAGE - 1
+      ] });
+    }
+    if (mode === "month") {
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "calendar-title",
+          onClick: () => setMode("year"),
+          "aria-label": "\u9009\u62E9\u5E74\u4EFD",
+          children: [
+            view.getFullYear(),
+            " \u5E74"
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "calendar-title-group", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "calendar-title-part",
+          onClick: () => setMode("year"),
+          "aria-label": "\u9009\u62E9\u5E74\u4EFD",
+          children: [
+            view.getFullYear(),
+            " \u5E74"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "calendar-title-part",
+          onClick: () => setMode("month"),
+          "aria-label": "\u9009\u62E9\u6708\u4EFD",
+          children: [
+            view.getMonth() + 1,
+            " \u6708"
+          ]
+        }
+      )
+    ] });
+  };
+  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: () => shiftView(-1),
+          "aria-label": mode === "year" ? "Previous years" : mode === "month" ? "Previous year" : "Previous month",
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevLeft", size: 14 })
+        }
+      ),
+      renderTitle(),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "btn icon sm ghost",
+          onClick: () => shiftView(1),
+          "aria-label": mode === "year" ? "Next years" : mode === "month" ? "Next year" : "Next month",
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevRight", size: 14 })
+        }
+      )
+    ] }),
+    mode === "date" && /* @__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 = isDisabledDay(date);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: !!disabled,
+            className: `calendar-cell ${isSameDay(date, sel) ? "selected" : ""} ${isSameDay(date, /* @__PURE__ */ new Date()) ? "today" : ""} ${disabled ? "disabled" : ""}`,
+            onClick: () => pick(d),
+            children: d
+          },
+          i
+        );
+      })
+    ] }),
+    mode === "month" && /* @__PURE__ */ jsx("div", { className: "calendar-select-grid month", children: MONTHS.map((month, index) => {
+      const disabled = isMonthDisabled(view.getFullYear(), index);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled,
+          className: `calendar-select-option ${index === view.getMonth() ? "selected" : ""} ${disabled ? "disabled" : ""}`,
+          onClick: () => pickMonth(index),
+          children: month
+        },
+        month
+      );
+    }) }),
+    mode === "year" && /* @__PURE__ */ jsx("div", { className: "calendar-select-grid year", children: years.map((year) => {
+      const disabled = isYearDisabled(year);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled,
+          className: `calendar-select-option ${year === view.getFullYear() ? "selected" : ""} ${disabled ? "disabled" : ""}`,
+          onClick: () => pickYear(year),
+          children: year
+        },
+        year
+      );
+    }) })
+  ] });
+});
+Calendar.displayName = "Calendar";
+
+export { Calendar };