@fangxinyan/lumina 0.6.18 → 0.7.0

package/dist/chunk-2BIOTRQC.js

@@ -0,0 +1,40 @@
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Divider-OI2BXPBU.css';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var DividerBase = React.forwardRef(({
+  direction = "horizontal",
+  label,
+  sunken,
+  dashed,
+  orientation = "center",
+  className = "",
+  ...rest
+}, ref) => {
+  const cls = [
+    "divider",
+    direction,
+    sunken && "sunken",
+    dashed && "dashed",
+    label && direction === "horizontal" && `orient-${orientation}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cls,
+      role: "separator",
+      "aria-orientation": direction === "vertical" ? "vertical" : "horizontal",
+      ...rest,
+      children: label && /* @__PURE__ */ jsx("span", { className: "divider-label", children: label })
+    }
+  );
+});
+DividerBase.displayName = "Divider";
+var Divider = withComponentTheme(DividerBase, "Divider", "divider");
+
+export { Divider };

package/dist/{chunk-A6O25EP2.js → chunk-2HIN5NFM.js}

@@ -1,11 +1,12 @@
-import { renderIconSlot, Icon } from './chunk-FDZG27IG.js';
-import './tokens-RYJ3DFTU.css';
+import { renderIconSlot, Icon } from './chunk-LQMOYVQF.js';
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Alert-HVPI6L4V.css';
+import './Alert-DJ3K7N7L.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var Alert = React.forwardRef(({
+var AlertBase = React.forwardRef(({
   tone = "info",
   title,
   children,
@@ -17,7 +18,13 @@ var Alert = React.forwardRef(({
   className = "",
   ...rest
 }, ref) => {
+  const [closed, setClosed] = React.useState(false);
   const iconNode = icon ?? (tone === "success" ? "check2" : tone === "warning" || tone === "danger" ? "alert" : "info");
+  const handleClose = () => {
+    setClosed(true);
+    onClose?.();
+  };
+  if (closed) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -32,11 +39,12 @@ var Alert = React.forwardRef(({
           children && /* @__PURE__ */ jsx("div", { className: "alert-desc", children })
         ] }),
         action && /* @__PURE__ */ jsx("div", { className: "alert-action", children: action }),
-        closable && /* @__PURE__ */ jsx("button", { type: "button", className: "alert-close", onClick: onClose, "aria-label": "Dismiss", children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 12 }) })
+        closable && /* @__PURE__ */ jsx("button", { type: "button", className: "alert-close", onClick: handleClose, "aria-label": "\u5173\u95ED\u63D0\u793A", children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 12 }) })
       ]
     }
   );
 });
-Alert.displayName = "Alert";
+AlertBase.displayName = "Alert";
+var Alert = withComponentTheme(AlertBase, "Alert", "alert");
 
 export { Alert };

package/dist/{chunk-I7TOBKJO.js → chunk-3DKFS44V.js}

@@ -1,7 +1,8 @@
-import { Icon } from './chunk-FDZG27IG.js';
-import './tokens-RYJ3DFTU.css';
+import { Icon } from './chunk-LQMOYVQF.js';
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Calendar-I6NHCXIB.css';
+import './Calendar-QJ5HWEJQ.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -10,22 +11,28 @@ 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(({
+var startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+var CalendarBase = React.forwardRef(({
   value,
   defaultValue,
   onChange,
   viewDate,
+  onViewChange,
   min,
   max,
   disabledDate,
   className = "",
   ...rest
 }, ref) => {
-  const [inner, setInner] = React.useState(defaultValue ?? /* @__PURE__ */ new Date());
+  const [inner, setInner] = React.useState(
+    () => isValidDate(defaultValue) ? startOfDay(defaultValue) : startOfDay(/* @__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 sel = isControlled ? isValidDate(value) ? startOfDay(value) : null : inner;
+  const initialView = sel ?? startOfDay(/* @__PURE__ */ new Date());
+  const [view, setView] = React.useState(new Date(initialView.getFullYear(), initialView.getMonth(), 1));
   const [mode, setMode] = React.useState("date");
+  const rootRef = React.useRef(null);
   const viewDateTime = isValidDate(viewDate) ? viewDate.getTime() : null;
   const viewDateYear = isValidDate(viewDate) ? viewDate.getFullYear() : null;
   const viewDateMonth = isValidDate(viewDate) ? viewDate.getMonth() : null;
@@ -34,16 +41,55 @@ var Calendar = React.forwardRef(({
     setView(new Date(viewDateYear, viewDateMonth, 1));
     setMode("date");
   }, [viewDateMonth, viewDateTime, viewDateYear]);
+  const selectedTime = sel?.getTime() ?? null;
+  React.useEffect(() => {
+    if (viewDateTime != null || selectedTime == null) return;
+    const selected = new Date(selectedTime);
+    setView(new Date(selected.getFullYear(), selected.getMonth(), 1));
+  }, [selectedTime, viewDateTime]);
   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 normalizedMin = React.useMemo(() => isValidDate(min) ? startOfDay(min) : void 0, [min]);
+  const normalizedMax = React.useMemo(() => isValidDate(max) ? startOfDay(max) : void 0, [max]);
   const isDisabledDay = React.useCallback(
-    (date) => min && date < min || max && date > max || (disabledDate?.(date) ?? false),
-    [disabledDate, max, min]
+    (date) => normalizedMin && startOfDay(date) < normalizedMin || normalizedMax && startOfDay(date) > normalizedMax || (disabledDate?.(startOfDay(date)) ?? false),
+    [disabledDate, normalizedMax, normalizedMin]
   );
+  const setRootRef = React.useCallback((node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  const handleGridKeyDown = (event) => {
+    const buttons = Array.from(
+      rootRef.current?.querySelectorAll(".calendar-grid button.calendar-cell") ?? []
+    );
+    const index = buttons.indexOf(event.target);
+    if (index < 0) return;
+    let step = 0;
+    let nextIndex = index;
+    if (event.key === "ArrowRight") step = 1;
+    else if (event.key === "ArrowLeft") step = -1;
+    else if (event.key === "ArrowDown") step = 7;
+    else if (event.key === "ArrowUp") step = -7;
+    else if (event.key === "Home") nextIndex = buttons.findIndex((button) => !button.disabled);
+    else if (event.key === "End") {
+      nextIndex = buttons.length - 1;
+      while (nextIndex >= 0 && buttons[nextIndex].disabled) nextIndex -= 1;
+    } else return;
+    event.preventDefault();
+    if (step !== 0) {
+      nextIndex += step;
+      while (nextIndex >= 0 && nextIndex < buttons.length && buttons[nextIndex].disabled) {
+        nextIndex += step;
+      }
+    }
+    if (nextIndex >= 0 && nextIndex < buttons.length) buttons[nextIndex].focus();
+  };
   const isMonthDisabled = React.useCallback(
     (year, month) => {
       const count = new Date(year, month + 1, 0).getDate();
@@ -60,6 +106,11 @@ var Calendar = React.forwardRef(({
     ),
     [isMonthDisabled]
   );
+  const selectedInView = !!sel && sel.getFullYear() === view.getFullYear() && sel.getMonth() === view.getMonth();
+  const focusableSelectionInView = selectedInView && !!sel && !isDisabledDay(sel);
+  const firstFocusableDay = cells.find(
+    (day) => day != null && !isDisabledDay(new Date(view.getFullYear(), view.getMonth(), day))
+  );
   const pick = (d) => {
     const next = new Date(view.getFullYear(), view.getMonth(), d);
     if (isDisabledDay(next)) return;
@@ -67,24 +118,29 @@ var Calendar = React.forwardRef(({
     onChange?.(next);
   };
   const shiftView = (step) => {
+    let next;
     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;
+      next = new Date(view.getFullYear() + step * YEARS_PER_PAGE, view.getMonth(), 1);
+    } else if (mode === "month") {
+      next = new Date(view.getFullYear() + step, view.getMonth(), 1);
+    } else {
+      next = new Date(view.getFullYear(), view.getMonth() + step, 1);
     }
-    setView(new Date(view.getFullYear(), view.getMonth() + step, 1));
+    setView(next);
+    onViewChange?.(next);
   };
   const pickMonth = (month) => {
     if (isMonthDisabled(view.getFullYear(), month)) return;
-    setView(new Date(view.getFullYear(), month, 1));
+    const next = new Date(view.getFullYear(), month, 1);
+    setView(next);
+    onViewChange?.(next);
     setMode("date");
   };
   const pickYear = (year) => {
     if (isYearDisabled(year)) return;
-    setView(new Date(year, view.getMonth(), 1));
+    const next = new Date(year, view.getMonth(), 1);
+    setView(next);
+    onViewChange?.(next);
     setMode("month");
   };
   const yearPageStart = Math.floor(view.getFullYear() / YEARS_PER_PAGE) * YEARS_PER_PAGE;
@@ -141,7 +197,7 @@ var Calendar = React.forwardRef(({
       )
     ] });
   };
-  return /* @__PURE__ */ jsxs("div", { ref, className: `calendar ${className}`, ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: setRootRef, className: `calendar ${className}`, ...rest, children: [
     /* @__PURE__ */ jsxs("div", { className: "calendar-head", children: [
       /* @__PURE__ */ jsx(
         "button",
@@ -165,8 +221,8 @@ var Calendar = React.forwardRef(({
         }
       )
     ] }),
-    mode === "date" && /* @__PURE__ */ jsxs("div", { className: "calendar-grid", children: [
-      WEEKDAYS.map((w) => /* @__PURE__ */ jsx("div", { className: "calendar-dow", children: w }, w)),
+    mode === "date" && /* @__PURE__ */ jsxs("div", { className: "calendar-grid", role: "grid", "aria-label": `${view.getFullYear()} \u5E74 ${view.getMonth() + 1} \u6708`, onKeyDown: handleGridKeyDown, children: [
+      WEEKDAYS.map((w) => /* @__PURE__ */ jsx("div", { className: "calendar-dow", role: "columnheader", 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);
@@ -175,8 +231,12 @@ var Calendar = React.forwardRef(({
           "button",
           {
             type: "button",
+            role: "gridcell",
+            "aria-label": `${view.getFullYear()}-${String(view.getMonth() + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`,
+            "aria-selected": !!sel && isSameDay(date, sel),
             disabled: !!disabled,
-            className: `calendar-cell ${isSameDay(date, sel) ? "selected" : ""} ${isSameDay(date, /* @__PURE__ */ new Date()) ? "today" : ""} ${disabled ? "disabled" : ""}`,
+            tabIndex: focusableSelectionInView && !!sel && isSameDay(date, sel) || !focusableSelectionInView && d === firstFocusableDay ? 0 : -1,
+            className: `calendar-cell ${sel && isSameDay(date, sel) ? "selected" : ""} ${isSameDay(date, /* @__PURE__ */ new Date()) ? "today" : ""} ${disabled ? "disabled" : ""}`,
             onClick: () => pick(d),
             children: d
           },
@@ -214,6 +274,7 @@ var Calendar = React.forwardRef(({
     }) })
   ] });
 });
-Calendar.displayName = "Calendar";
+CalendarBase.displayName = "Calendar";
+var Calendar = withComponentTheme(CalendarBase, "Calendar", "calendar");
 
 export { Calendar };