@fangxinyan/lumina 0.6.18 → 0.7.0

package/dist/{chunk-FDZG27IG.js → chunk-LQMOYVQF.js}

@@ -1,9 +1,10 @@
-import './tokens-RYJ3DFTU.css';
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
+import './Icon-HJSUVW4O.css';
 import * as React from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-// src/components/Icon/Icon.tsx
 var paths = {
   search: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
@@ -164,11 +165,11 @@ var paths = {
   ] }),
   checkCircleFilled: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor", stroke: "none" }),
-    /* @__PURE__ */ jsx("path", { d: "m7.8 12.2 2.7 2.7 5.8-6", stroke: "var(--bg)", strokeWidth: "2.2", fill: "none" })
+    /* @__PURE__ */ jsx("path", { d: "m7.8 12.2 2.7 2.7 5.8-6", stroke: "var(--lmn-icon-bg, var(--bg))", strokeWidth: "2.2", fill: "none" })
   ] }),
   clockCircleFilled: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor", stroke: "none" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 6.5v5.7l3.6 2.1", stroke: "var(--bg)", strokeWidth: "2.1", fill: "none" })
+    /* @__PURE__ */ jsx("path", { d: "M12 6.5v5.7l3.6 2.1", stroke: "var(--lmn-icon-bg, var(--bg))", strokeWidth: "2.1", fill: "none" })
   ] }),
   closeCircle: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
@@ -234,27 +235,50 @@ var paths = {
     /* @__PURE__ */ jsx("circle", { cx: "4", cy: "18", r: "1", fill: "currentColor", stroke: "none" })
   ] })
 };
-var Icon = React.forwardRef(
-  ({ name, size = 16, stroke = 2, style, ...rest }, ref) => /* @__PURE__ */ jsx(
-    "svg",
-    {
-      ref,
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: stroke,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      overflow: "visible",
-      style,
-      ...rest,
-      children: paths[name]
-    }
-  )
+var IconBase = React.forwardRef(
+  ({
+    name,
+    size = 16,
+    stroke = 2,
+    title,
+    style,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    focusable,
+    ...rest
+  }, ref) => {
+    const semantic = !!(title || ariaLabel || ariaLabelledBy || role);
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: stroke,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        overflow: "visible",
+        style,
+        role: semantic ? role ?? "img" : void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-hidden": semantic ? void 0 : true,
+        focusable: focusable ?? "false",
+        ...rest,
+        children: [
+          title && /* @__PURE__ */ jsx("title", { children: title }),
+          paths[name]
+        ]
+      }
+    );
+  }
 );
-Icon.displayName = "Icon";
+IconBase.displayName = "Icon";
+var Icon = withComponentTheme(IconBase, "Icon", "icon");
 var isIconName = (value) => typeof value === "string" && Object.prototype.hasOwnProperty.call(paths, value);
 var renderIconSlot = (icon, { size = 14, className } = {}) => {
   if (icon == null || icon === false) return null;
@@ -311,7 +335,7 @@ var NAMED_ICON_MAP = {
 var resolveIconName = (name, fallback = "appstore") => NAMED_ICON_MAP[name] ?? fallback;
 var createNamedIcon = (displayName, defaultSpin = false) => {
   const iconName = NAMED_ICON_MAP[displayName];
-  const Component = React.forwardRef(
+  const NamedIconBase = React.forwardRef(
     ({ spin, rotate, size = "1em", className = "", style, ...rest }, ref) => {
       const shouldSpin = spin ?? defaultSpin;
       const transform = rotate ? `${style?.transform ? `${style.transform} ` : ""}rotate(${rotate}deg)` : style?.transform;
@@ -321,7 +345,7 @@ var createNamedIcon = (displayName, defaultSpin = false) => {
           ref,
           role: "img",
           "aria-label": displayName,
-          className,
+          className: `named-icon ${shouldSpin ? "spinning" : ""} ${className}`.trim(),
           style: {
             display: "inline-flex",
             alignItems: "center",
@@ -333,19 +357,20 @@ var createNamedIcon = (displayName, defaultSpin = false) => {
           },
           ...rest,
           children: /* @__PURE__ */ jsx(
-            Icon,
+            IconBase,
             {
               name: iconName,
-              size,
-              style: shouldSpin ? { animation: "spin 0.9s linear infinite" } : void 0
+              size
             }
           )
         }
       );
     }
   );
-  Component.displayName = displayName;
-  return Component;
+  NamedIconBase.displayName = displayName;
+  const NamedIcon = withComponentTheme(NamedIconBase, "Icon", "icon");
+  NamedIcon.displayName = displayName;
+  return NamedIcon;
 };
 var AimOutlined = createNamedIcon("AimOutlined");
 var AppstoreOutlined = createNamedIcon("AppstoreOutlined");

package/dist/{chunk-P2OQTJZP.cjs → chunk-MCDW3VKZ.cjs}

@@ -1,8 +1,9 @@
 'use strict';
 
-require('./tokens-RYJ3DFTU.css');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
 require('./shared-NJHRNLRH.css');
-require('./Divider-RPQCVH3J.css');
+require('./Divider-OI2BXPBU.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -26,8 +27,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// src/components/Divider/Divider.tsx
-var Divider = React__namespace.forwardRef(({
+var DividerBase = React__namespace.forwardRef(({
   direction = "horizontal",
   label,
   sunken,
@@ -44,8 +44,19 @@ var Divider = React__namespace.forwardRef(({
     label && direction === "horizontal" && `orient-${orientation}`,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cls, role: "separator", ...rest, children: label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "divider-label", children: label }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cls,
+      role: "separator",
+      "aria-orientation": direction === "vertical" ? "vertical" : "horizontal",
+      ...rest,
+      children: label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "divider-label", children: label })
+    }
+  );
 });
-Divider.displayName = "Divider";
+DividerBase.displayName = "Divider";
+var Divider = chunkNRJXZPZR_cjs.withComponentTheme(DividerBase, "Divider", "divider");
 
 exports.Divider = Divider;

package/dist/{chunk-BT2RXFT4.cjs → chunk-MUZQWIMR.cjs}

@@ -1,10 +1,13 @@
 'use strict';
 
-var chunkSW2HMNCA_cjs = require('./chunk-SW2HMNCA.cjs');
-var chunkQMX67CVT_cjs = require('./chunk-QMX67CVT.cjs');
-require('./tokens-RYJ3DFTU.css');
+var chunkHSDMJUB6_cjs = require('./chunk-HSDMJUB6.cjs');
+var chunkT4RR6NVU_cjs = require('./chunk-T4RR6NVU.cjs');
+var chunk2AUXUZ3Z_cjs = require('./chunk-2AUXUZ3Z.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+var chunkEE5KXDRK_cjs = require('./chunk-EE5KXDRK.cjs');
+require('./tokens-CEJVVA3G.css');
 require('./shared-NJHRNLRH.css');
-require('./Modal-ZFWNFEA5.css');
+require('./Modal-UI2FXNDR.css');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var client = require('react-dom/client');
@@ -34,39 +37,48 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 
 var ANIM_MS = 280;
-var ModalBase = React__namespace.forwardRef(({
-  open,
-  onClose,
-  onCancel,
-  onOk,
-  title,
-  description,
-  footer,
-  children,
-  width = 440,
-  closable = true,
-  closeIcon,
-  maskClosable = true,
-  maskClassName = "",
-  maskStyle,
-  escClosable = true,
-  okText = "\u786E\u5B9A",
-  cancelText = "\u53D6\u6D88",
-  okButtonProps,
-  cancelButtonProps,
-  confirmLoading,
-  bodyClassName = "",
-  bodyStyle,
-  bodyProps,
-  bodyOverflow,
-  destroyOnClose = false,
-  afterOpenChange,
-  zIndex,
-  className = "",
-  style,
-  onClick,
-  ...rest
-}, ref) => {
+var ModalBase = React__namespace.forwardRef((props, ref) => {
+  const hasExplicitWidth = props.width !== void 0;
+  const {
+    open,
+    onClose,
+    onCancel,
+    onOk,
+    title,
+    description,
+    footer,
+    children,
+    width = 440,
+    closable = true,
+    closeIcon,
+    maskClosable = true,
+    maskClassName = "",
+    maskStyle,
+    escClosable = true,
+    okText = "\u786E\u5B9A",
+    cancelText = "\u53D6\u6D88",
+    okButtonProps,
+    cancelButtonProps,
+    confirmLoading,
+    bodyClassName = "",
+    bodyStyle,
+    bodyProps,
+    bodyOverflow,
+    bodyInset = "safe",
+    destroyOnClose = false,
+    afterOpenChange,
+    zIndex,
+    className = "",
+    style,
+    onClick,
+    ...rest
+  } = props;
+  const portalContainer = chunkEE5KXDRK_cjs.usePortalContainer();
+  const portalTheme = chunkNRJXZPZR_cjs.useComponentPortalTheme("Modal");
+  const panelRef = React__namespace.useRef(null);
+  const titleId = React__namespace.useId();
+  const descriptionId = React__namespace.useId();
+  const overlayZIndex = chunkHSDMJUB6_cjs.useOverlayZIndex(open, zIndex);
   const [hasOpenedOnce, setHasOpenedOnce] = React__namespace.useState(open);
   React__namespace.useEffect(() => {
     if (open) setHasOpenedOnce(true);
@@ -75,32 +87,52 @@ var ModalBase = React__namespace.forwardRef(({
     if (onCancel) onCancel();
     else onClose?.();
   }, [onCancel, onClose]);
-  React__namespace.useEffect(() => {
-    if (!open || !escClosable) return;
-    const h = (e) => {
-      if (e.key === "Escape") handleCancel();
-    };
-    window.addEventListener("keydown", h);
-    return () => window.removeEventListener("keydown", h);
-  }, [open, escClosable, handleCancel]);
+  chunkHSDMJUB6_cjs.useOverlayLayer({
+    open: open && portalContainer != null,
+    containerRef: panelRef,
+    zIndex: overlayZIndex,
+    onEscape: handleCancel,
+    escapeEnabled: escClosable,
+    trapFocus: true,
+    autoFocus: true,
+    restoreFocus: true,
+    lockScroll: true
+  });
+  const setPanelRef = React__namespace.useCallback((node) => {
+    panelRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
   const prevOpen = React__namespace.useRef(open);
+  const afterOpenChangeRef = React__namespace.useRef(afterOpenChange);
+  afterOpenChangeRef.current = afterOpenChange;
   React__namespace.useEffect(() => {
     if (prevOpen.current !== open) {
       prevOpen.current = open;
-      if (afterOpenChange) {
-        const id = window.setTimeout(() => afterOpenChange(open), ANIM_MS);
-        return () => window.clearTimeout(id);
-      }
+      const id = window.setTimeout(() => afterOpenChangeRef.current?.(open), ANIM_MS);
+      return () => window.clearTimeout(id);
     }
-  }, [open, afterOpenChange]);
-  if (typeof document === "undefined") return null;
+  }, [open]);
+  if (!portalContainer) return null;
   if (!hasOpenedOnce) return null;
   if (!open && destroyOnClose) return null;
-  const overlayStyle = zIndex != null || maskStyle ? { ...maskStyle, ...zIndex != null ? { zIndex } : {} } : void 0;
-  const defaultFooter = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkSW2HMNCA_cjs.Button, { variant: "ghost", onClick: handleCancel, ...cancelButtonProps, children: cancelText }),
+  const overlayStyle = {
+    ...portalTheme.styles.overlay,
+    ...maskStyle,
+    zIndex: overlayZIndex
+  };
+  const panelStyle = {
+    ...portalTheme.style,
+    width,
+    maxWidth: "92vw",
+    ...portalTheme.styles.popup,
+    ...hasExplicitWidth ? { width } : null,
+    ...style
+  };
+  const defaultFooter = /* @__PURE__ */ jsxRuntime.jsxs(chunkNRJXZPZR_cjs.InternalComponentThemePart, { components: "Button", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkT4RR6NVU_cjs.Button, { variant: "ghost", onClick: handleCancel, ...cancelButtonProps, children: cancelText }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkSW2HMNCA_cjs.Button,
+      chunkT4RR6NVU_cjs.Button,
       {
         variant: "primary",
         loading: confirmLoading,
@@ -110,21 +142,21 @@ var ModalBase = React__namespace.forwardRef(({
       }
     )
   ] });
-  const modalBodyStyle = bodyOverflow == null ? bodyStyle : { overflow: bodyOverflow, ...bodyStyle };
+  const modalBodyStyle = bodyOverflow == null ? { ...portalTheme.styles.body, ...bodyStyle } : { ...portalTheme.styles.body, overflow: bodyOverflow, ...bodyStyle };
   return ReactDOM__default.default.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(chunkHSDMJUB6_cjs.OverlayZIndexProvider, { zIndex: overlayZIndex, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: ["modal-overlay", open ? "" : "hidden", className, maskClassName].filter(Boolean).join(" "),
+        className: ["modal-overlay", open ? "" : "hidden", maskClassName].filter(Boolean).join(" "),
         style: overlayStyle,
         onClick: () => maskClosable && handleCancel(),
         role: "presentation",
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            ref,
-            className: "modal",
-            style: { width, ...style },
+            ref: setPanelRef,
+            className: ["modal", className].filter(Boolean).join(" "),
+            style: panelStyle,
             onClick: (e) => {
               onClick?.(e);
               e.stopPropagation();
@@ -132,12 +164,16 @@ var ModalBase = React__namespace.forwardRef(({
             role: "dialog",
             "aria-modal": true,
             "aria-hidden": !open,
+            "aria-labelledby": title ? titleId : void 0,
+            "aria-describedby": description ? descriptionId : void 0,
+            tabIndex: -1,
+            ...portalTheme.dataAttributes,
             ...rest,
             children: [
               (title || description || closable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-head", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-titles", children: [
-                  title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-title", children: title }),
-                  description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-desc", children: description })
+                  title && /* @__PURE__ */ jsxRuntime.jsx("div", { id: titleId, className: "modal-title", children: title }),
+                  description && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descriptionId, className: "modal-desc", children: description })
                 ] }),
                 closable && /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
@@ -146,7 +182,7 @@ var ModalBase = React__namespace.forwardRef(({
                     className: "modal-close",
                     onClick: handleCancel,
                     "aria-label": "Close",
-                    children: closeIcon ?? /* @__PURE__ */ jsxRuntime.jsx(chunkQMX67CVT_cjs.Icon, { name: "x", size: 16 })
+                    children: closeIcon ?? /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "x", size: 16 })
                   }
                 )
               ] }),
@@ -154,7 +190,7 @@ var ModalBase = React__namespace.forwardRef(({
                 "div",
                 {
                   ...bodyProps,
-                  className: `modal-body ${bodyClassName}`.trim(),
+                  className: ["modal-body", `inset-${bodyInset}`, bodyClassName].filter(Boolean).join(" "),
                   style: modalBodyStyle,
                   children
                 }
@@ -164,11 +200,17 @@ var ModalBase = React__namespace.forwardRef(({
           }
         )
       }
-    ),
-    document.body
+    ) }),
+    portalContainer
   );
 });
 ModalBase.displayName = "Modal";
+var ThemedModalBase = chunkNRJXZPZR_cjs.withComponentTheme(
+  ModalBase,
+  "Modal",
+  ["modal", "button"],
+  { portalOnly: true }
+);
 var staticHandles = /* @__PURE__ */ new Set();
 var staticIconName = {
   confirm: "info",
@@ -214,16 +256,16 @@ var StaticModalHost = ({
       setLoading(true);
       result.then((next) => {
         if (next !== false) destroy();
-      }).finally(() => setLoading(false));
+      }, () => void 0).finally(() => setLoading(false));
       return;
     }
     destroy();
   }, [destroy, onOk]);
   const okVariant = kind === "error" ? "danger" : "primary";
-  const mergedFooter = footer !== void 0 ? footer : okCancel ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkSW2HMNCA_cjs.Button, { variant: "ghost", onClick: close, ...cancelButtonProps, children: cancelText }),
+  const mergedFooter = footer !== void 0 ? footer : okCancel ? /* @__PURE__ */ jsxRuntime.jsxs(chunkNRJXZPZR_cjs.InternalComponentThemePart, { components: "Button", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkT4RR6NVU_cjs.Button, { variant: "ghost", onClick: close, ...cancelButtonProps, children: cancelText }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkSW2HMNCA_cjs.Button,
+      chunkT4RR6NVU_cjs.Button,
       {
         variant: okVariant,
         loading: loading || confirmLoading,
@@ -232,8 +274,8 @@ var StaticModalHost = ({
         children: okText
       }
     )
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-    chunkSW2HMNCA_cjs.Button,
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(chunkNRJXZPZR_cjs.InternalComponentThemePart, { components: "Button", children: /* @__PURE__ */ jsxRuntime.jsx(
+    chunkT4RR6NVU_cjs.Button,
     {
       variant: okVariant,
       loading: loading || confirmLoading,
@@ -241,9 +283,9 @@ var StaticModalHost = ({
       ...okButtonProps,
       children: okText
     }
-  );
+  ) });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ModalBase,
+    ThemedModalBase,
     {
       ...modalProps,
       open,
@@ -252,9 +294,10 @@ var StaticModalHost = ({
       footer: mergedFooter,
       maskClosable: maskClosable ?? false,
       escClosable: escClosable ?? true,
-      className: `modal-static-overlay ${className}`,
+      className,
+      maskClassName: ["modal-static-overlay", config.maskClassName].filter(Boolean).join(" "),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-static-body", children: [
-        icon !== false && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `modal-static-icon ${kind}`, children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(chunkQMX67CVT_cjs.Icon, { name: staticIconName[kind], size: 20 }) }),
+        icon !== false && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `modal-static-icon ${kind}`, children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: staticIconName[kind], size: 20 }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-static-content", children: content ?? children })
       ] })
     }
@@ -309,7 +352,7 @@ var createStaticModal = (kind, config) => {
   render();
   return handle;
 };
-var Modal = ModalBase;
+var Modal = ThemedModalBase;
 Modal.confirm = (config) => createStaticModal("confirm", config);
 Modal.info = (config) => createStaticModal("info", config);
 Modal.success = (config) => createStaticModal("success", config);