@fangxinyan/lumina 0.6.18 → 0.8.0

package/dist/{chunk-MYW7LNB2.cjs → chunk-WROF2PVG.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('./Switch-COAQIOMH.css');
+require('./Switch-TATU3LPB.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/Switch/Switch.tsx
-var Switch = React__namespace.forwardRef(({
+var SwitchBase = React__namespace.forwardRef(({
   checked,
   defaultChecked,
   onChange,
@@ -38,14 +38,22 @@ var Switch = React__namespace.forwardRef(({
   unCheckedChildren,
   className = "",
   id,
+  name,
+  value: formValue,
+  required,
+  form,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
   ...rest
 }, ref) => {
   const [inner, setInner] = React__namespace.useState(defaultChecked ?? false);
   const isControlled = checked !== void 0;
   const value = isControlled ? checked : inner;
-  const toggle = () => {
+  const toggle = (next) => {
     if (disabled) return;
-    const next = !value;
     if (!isControlled) setInner(next);
     onChange?.(next);
   };
@@ -59,28 +67,39 @@ var Switch = React__namespace.forwardRef(({
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { ref, className: cls, ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
       {
-        type: "button",
-        role: "switch",
-        "aria-checked": value,
+        type: "checkbox",
+        className: "switch-native",
+        checked: value,
         disabled,
-        onClick: toggle,
+        onChange: (event) => toggle(event.target.checked),
         id,
-        className: "switch-track",
-        children: [
-          hasChildren && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "switch-inner", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "switch-inner-on", children: checkedChildren }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "switch-inner-off", children: unCheckedChildren })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "switch-thumb" })
-        ]
+        name,
+        value: formValue ?? "on",
+        required,
+        form,
+        role: "switch",
+        "aria-checked": value,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": ariaInvalid,
+        "aria-required": ariaRequired
       }
     ),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", className: "switch-track", children: [
+      hasChildren && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "switch-inner", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "switch-inner-on", children: checkedChildren }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "switch-inner-off", children: unCheckedChildren })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "switch-thumb" })
+    ] }),
     label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "switch-label", children: label })
   ] });
 });
-Switch.displayName = "Switch";
+SwitchBase.displayName = "Switch";
+var Switch = chunkNRJXZPZR_cjs.withComponentTheme(SwitchBase, "Switch", "switch");
 
 exports.Switch = Switch;

package/dist/{chunk-5VOUUQF5.js → chunk-Y22PTPA7.js}

@@ -1,8 +1,11 @@
-import { IconButton, Button } from './chunk-IPSNC5VZ.js';
-import { Icon } from './chunk-FDZG27IG.js';
-import './tokens-RYJ3DFTU.css';
+import { useOverlayZIndex, useOverlayLayer, OverlayZIndexProvider } from './chunk-2A4GYSN4.js';
+import { IconButton, Button } from './chunk-JHM7MN3G.js';
+import { Icon } from './chunk-LQMOYVQF.js';
+import { useComponentPortalTheme, InternalComponentThemePart, withComponentTheme } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Image-NISJRUWX.css';
+import './Image-CZJPPURT.css';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -244,7 +247,7 @@ var readPreviewThemeBridge = (source) => {
   }
   return { attrs, style };
 };
-var Image = React.forwardRef(({
+var ImageBase = React.forwardRef(({
   src,
   alt,
   width = 200,
@@ -265,6 +268,8 @@ var Image = React.forwardRef(({
   imgProps,
   className = "",
   style,
+  onClick,
+  onKeyDown,
   ...rest
 }, ref) => {
   const [loaded, setLoaded] = React.useState(false);
@@ -278,6 +283,10 @@ var Image = React.forwardRef(({
   const rootRef = React.useRef(null);
   const imageRef = React.useRef(null);
   const overlayRef = React.useRef(null);
+  const portalContainer = usePortalContainer();
+  const portalTheme = useComponentPortalTheme(["Image", "ImageGrid"]);
+  const explicitPreviewZIndex = typeof previewStyle?.zIndex === "number" ? previewStyle.zIndex : void 0;
+  const previewZIndex = useOverlayZIndex(open, explicitPreviewZIndex);
   const dragRef = React.useRef(null);
   const visualFrame = frame ?? variant === "framed";
   const resolvedHeight = height ?? (variant === "icon" ? width : 140);
@@ -340,7 +349,21 @@ var Image = React.forwardRef(({
     dragRef.current = null;
     setPreviewDragging(false);
     setOpen(false);
+    window.requestAnimationFrame(() => rootRef.current?.focus());
   }, []);
+  React.useEffect(() => {
+    if (open && !canPreview) closePreview();
+  }, [canPreview, closePreview, open]);
+  useOverlayLayer({
+    open: open && portalContainer != null,
+    containerRef: overlayRef,
+    ownerRef: rootRef,
+    zIndex: previewZIndex,
+    onEscape: closePreview,
+    trapFocus: true,
+    autoFocus: true,
+    lockScroll: true
+  });
   const openPreview = React.useCallback(() => {
     setPreviewMode("fit");
     resetPreview();
@@ -417,7 +440,20 @@ var Image = React.forwardRef(({
         ref: setRootRef,
         className: `n-image ${variant} ${visualFrame ? "framed" : "unframed"} ${hover ? "hover" : ""} ${canPreview ? "clickable" : ""} ${className}`,
         style: { width, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
-        onClick: () => canPreview && openPreview(),
+        role: canPreview ? "button" : void 0,
+        tabIndex: canPreview ? 0 : void 0,
+        "aria-label": canPreview ? `\u9884\u89C8${alt ? `\uFF1A${alt}` : "\u56FE\u7247"}` : void 0,
+        onClick: (event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented && canPreview) openPreview();
+        },
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (!event.defaultPrevented && event.target === event.currentTarget && canPreview && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            openPreview();
+          }
+        },
         ...rest,
         children: /* @__PURE__ */ jsxs("div", { className: "n-image-frame", style: { width: "100%", height: resolvedHeight }, children: [
           !err && src && /* @__PURE__ */ jsx(
@@ -471,18 +507,25 @@ var Image = React.forwardRef(({
         ] })
       }
     ),
-    open && typeof document !== "undefined" && ReactDOM.createPortal(
-      /* @__PURE__ */ jsxs(
+    open && portalContainer && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx(OverlayZIndexProvider, { zIndex: previewZIndex, children: /* @__PURE__ */ jsxs(
         "div",
         {
           ...previewTheme.attrs,
+          ...portalTheme.dataAttributes,
           ref: overlayRef,
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "\u56FE\u7247\u9884\u89C8",
           tabIndex: -1,
           className: ["image-preview-overlay", previewClassName].filter(Boolean).join(" "),
-          style: { ...previewTheme.style, ...previewStyle },
+          style: {
+            ...previewTheme.style,
+            ...portalTheme.style,
+            ...portalTheme.styles.overlay,
+            ...previewStyle,
+            zIndex: previewStyle?.zIndex ?? previewZIndex
+          },
           onClick: closePreview,
           onWheel: handlePreviewWheel,
           onMouseMove: movePreviewDrag,
@@ -498,66 +541,68 @@ var Image = React.forwardRef(({
                 "aria-label": "\u56FE\u7247\u9884\u89C8\u5DE5\u5177\u680F",
                 onClick: (event) => event.stopPropagation(),
                 children: [
-                  /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      icon: "minus",
-                      size: "sm",
-                      variant: "ghost",
-                      tip: "\u7F29\u5C0F",
-                      disabled: previewScale <= PREVIEW_MIN_SCALE,
-                      onClick: zoomOut
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("span", { className: "image-preview-scale", "aria-live": "polite", children: [
-                    Math.round(previewScale * 100),
-                    "%"
+                  /* @__PURE__ */ jsxs(InternalComponentThemePart, { components: ["IconButton", "Button"], children: [
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        icon: "minus",
+                        size: "sm",
+                        variant: "ghost",
+                        tip: "\u7F29\u5C0F",
+                        disabled: previewScale <= PREVIEW_MIN_SCALE,
+                        onClick: zoomOut
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: "image-preview-scale", "aria-live": "polite", children: [
+                      Math.round(previewScale * 100),
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        icon: "plus",
+                        size: "sm",
+                        variant: "ghost",
+                        tip: "\u653E\u5927",
+                        disabled: previewScale >= PREVIEW_MAX_SCALE,
+                        onClick: zoomIn
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "ghost",
+                        className: "image-preview-ratio",
+                        "aria-label": "\u9002\u914D\u7A97\u53E3",
+                        onClick: fitToWindow,
+                        children: "\u9002\u914D"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "ghost",
+                        className: "image-preview-ratio",
+                        "aria-label": "1:1",
+                        onClick: actualSize,
+                        children: "1:1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        icon: "reload",
+                        size: "sm",
+                        variant: "ghost",
+                        tip: "\u91CD\u7F6E",
+                        onClick: resetPreview
+                      }
+                    )
                   ] }),
-                  /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      icon: "plus",
-                      size: "sm",
-                      variant: "ghost",
-                      tip: "\u653E\u5927",
-                      disabled: previewScale >= PREVIEW_MAX_SCALE,
-                      onClick: zoomIn
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      size: "sm",
-                      variant: "ghost",
-                      className: "image-preview-ratio",
-                      "aria-label": "\u9002\u914D\u7A97\u53E3",
-                      onClick: fitToWindow,
-                      children: "\u9002\u914D"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      size: "sm",
-                      variant: "ghost",
-                      className: "image-preview-ratio",
-                      "aria-label": "1:1",
-                      onClick: actualSize,
-                      children: "1:1"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      icon: "reload",
-                      size: "sm",
-                      variant: "ghost",
-                      tip: "\u91CD\u7F6E",
-                      onClick: resetPreview
-                    }
-                  ),
                   renderPreviewToolbar && /* @__PURE__ */ jsx("span", { className: "image-preview-toolbar-slot", children: renderPreviewToolbar(previewToolbarProps) }),
-                  /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "IconButton", children: /* @__PURE__ */ jsx(
                     IconButton,
                     {
                       icon: "x",
@@ -566,7 +611,7 @@ var Image = React.forwardRef(({
                       tip: "\u5173\u95ED",
                       onClick: closePreview
                     }
-                  )
+                  ) })
                 ]
               }
             ),
@@ -589,13 +634,18 @@ var Image = React.forwardRef(({
             )
           ]
         }
-      ),
-      document.body
+      ) }),
+      portalContainer
     )
   ] });
 });
-Image.displayName = "Image";
-var ImageGrid = React.forwardRef(({
+ImageBase.displayName = "Image";
+var Image = withComponentTheme(
+  ImageBase,
+  "Image",
+  ["image", "button"]
+);
+var ImageGridBase = React.forwardRef(({
   images,
   columns,
   itemHeight = 130,
@@ -617,7 +667,7 @@ var ImageGrid = React.forwardRef(({
       ...style
     },
     ...rest,
-    children: images.map((img, i) => /* @__PURE__ */ jsx(
+    children: images.map((img, i) => /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Image", children: /* @__PURE__ */ jsx(
       Image,
       {
         ...imageProps,
@@ -626,13 +676,17 @@ var ImageGrid = React.forwardRef(({
         alt: img.alt,
         width: img.width ?? "100%",
         height: img.height ?? itemHeight
-      },
-      i
-    ))
+      }
+    ) }, i))
   }
 ));
-ImageGrid.displayName = "ImageGrid";
-var SpriteImage = React.forwardRef(({
+ImageGridBase.displayName = "ImageGrid";
+var ImageGrid = withComponentTheme(
+  ImageGridBase,
+  "ImageGrid",
+  ["image", "button"]
+);
+var SpriteImageBase = React.forwardRef(({
   src,
   sprite,
   alt,
@@ -678,13 +732,18 @@ var SpriteImage = React.forwardRef(({
     }
   );
 });
-SpriteImage.displayName = "SpriteImage";
+SpriteImageBase.displayName = "SpriteImage";
+var SpriteImage = withComponentTheme(
+  SpriteImageBase,
+  "SpriteImage",
+  "image"
+);
 var insetStyle = (inset) => {
   if (inset == null) return { inset: 0 };
   if (typeof inset === "number" || typeof inset === "string") return { inset };
   return inset;
 };
-var LayeredImage = React.forwardRef(({
+var LayeredImageBase = React.forwardRef(({
   layers,
   width = 64,
   height = 64,
@@ -731,6 +790,11 @@ var LayeredImage = React.forwardRef(({
     }
   );
 });
-LayeredImage.displayName = "LayeredImage";
+LayeredImageBase.displayName = "LayeredImage";
+var LayeredImage = withComponentTheme(
+  LayeredImageBase,
+  "LayeredImage",
+  "image"
+);
 
 export { Image, ImageGrid, LayeredImage, SpriteImage };

package/dist/chunk-Y2MT6PI6.js

@@ -0,0 +1,207 @@
+import { Spin } from './chunk-PQOBBASY.js';
+import { Button } from './chunk-JHM7MN3G.js';
+import { InternalComponentThemePart, withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Card-VPMTWAWZ.css';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CARD_INTERACTIVE_SELECTOR = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "[role='button']",
+  "[role='link']",
+  "[contenteditable='true']"
+].join(",");
+function isNestedCardControl(target, currentTarget) {
+  if (!(target instanceof Element)) return false;
+  const control = target.closest(CARD_INTERACTIVE_SELECTOR);
+  return !!control && !control.classList.contains("card-interactive-control") && control !== currentTarget && currentTarget.contains(control);
+}
+function getCardText(node) {
+  return React.Children.toArray(node).map((child) => {
+    if (typeof child === "string" || typeof child === "number") return String(child);
+    if (React.isValidElement(child)) {
+      return getCardText(child.props.children);
+    }
+    return "";
+  }).filter(Boolean).join(" ").trim();
+}
+function hasCardControlNode(node) {
+  return React.Children.toArray(node).some((child) => {
+    if (!React.isValidElement(child)) return false;
+    const type = child.type;
+    const displayName = typeof type !== "string" && type != null ? type.displayName : void 0;
+    const interactiveType = typeof type === "string" && ["a", "button", "input", "select", "textarea"].includes(type);
+    if (interactiveType || displayName === "Button" || displayName === "IconButton") return true;
+    if (child.props.role === "button" || child.props.role === "link") return true;
+    return hasCardControlNode(child.props.children);
+  });
+}
+function handleCardControlKeyDown(event) {
+  if (event.key !== "Enter" && event.key !== " ") return;
+  event.preventDefault();
+  event.currentTarget.click();
+}
+var CardBase = React.forwardRef(
+  ({
+    variant = "raised",
+    padding = "md",
+    hoverable,
+    interactive,
+    disabled = false,
+    title,
+    description,
+    actions,
+    background,
+    fill = false,
+    bodyLayout,
+    bodyClassName = "",
+    bodyStyle,
+    bodyProps,
+    loading = false,
+    loadingOverlay,
+    className = "",
+    style,
+    children,
+    onClick,
+    onKeyDown,
+    onClickCapture,
+    onKeyDownCapture,
+    role,
+    tabIndex,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...rest
+  }, ref) => {
+    const contentRef = React.useRef(null);
+    const headRef = React.useRef(null);
+    const actionsRef = React.useRef(null);
+    const isInteractive = interactive ?? !!onClick;
+    React.useEffect(() => {
+      const isolated = disabled || loading;
+      if (contentRef.current) contentRef.current.inert = isolated;
+      if (headRef.current) headRef.current.inert = isolated;
+      if (actionsRef.current) actionsRef.current.inert = isolated;
+    }, [disabled, loading]);
+    const resolvedBodyLayout = bodyLayout ?? (fill ? "fill" : "block");
+    const cls = [
+      "card",
+      variant,
+      padding !== "md" && `pad-${padding}`,
+      fill && "fill",
+      hoverable && !disabled && !loading && "hoverable",
+      isInteractive && "interactive",
+      disabled && "disabled",
+      loading && "loading",
+      className
+    ].filter(Boolean).join(" ");
+    const bodyCls = [
+      "card-body",
+      resolvedBodyLayout !== "block" && `body-${resolvedBodyLayout}`,
+      loading && "loading",
+      bodyClassName
+    ].filter(Boolean).join(" ");
+    const cardStyle = background ? {
+      "--card-bg": background,
+      ...style
+    } : style;
+    const bodyLabel = hasCardControlNode(children) ? "" : getCardText(children);
+    const interactiveLabel = ariaLabel ?? (getCardText(title ?? description) || bodyLabel || "\u53EF\u64CD\u4F5C\u5361\u7247");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: cls,
+        style: cardStyle,
+        role,
+        tabIndex: isInteractive ? void 0 : tabIndex,
+        "aria-label": role ? ariaLabel : void 0,
+        "aria-labelledby": role ? ariaLabelledBy : void 0,
+        "aria-disabled": isInteractive && (disabled || loading) ? true : void 0,
+        "aria-busy": loading || void 0,
+        onClickCapture: (event) => {
+          if (disabled || loading) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
+          onClickCapture?.(event);
+        },
+        onKeyDownCapture: (event) => {
+          if (disabled || loading) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
+          onKeyDownCapture?.(event);
+        },
+        onClick: (event) => {
+          if (disabled || loading) {
+            event.preventDefault();
+            return;
+          }
+          if (isNestedCardControl(event.target, event.currentTarget)) return;
+          onClick?.(event);
+        },
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (isInteractive && !disabled && !loading && !event.defaultPrevented && event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            event.currentTarget.click();
+          }
+        },
+        ...rest,
+        children: [
+          isInteractive && /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Button", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              className: "card-interactive-control",
+              "aria-label": interactiveLabel,
+              "aria-labelledby": ariaLabelledBy,
+              tabIndex: disabled || loading ? -1 : tabIndex ?? 0,
+              disabled: disabled || loading,
+              onKeyDown: handleCardControlKeyDown
+            }
+          ) }),
+          (title || description || actions) && /* @__PURE__ */ jsxs("div", { ref: headRef, className: "card-head", children: [
+            /* @__PURE__ */ jsxs("div", { className: "card-titles", children: [
+              title && /* @__PURE__ */ jsx("div", { className: "card-title", children: title }),
+              description && /* @__PURE__ */ jsx("div", { className: "card-desc", children: description })
+            ] }),
+            actions && /* @__PURE__ */ jsx("div", { ref: actionsRef, className: "card-actions", children: actions })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { ...bodyProps, className: bodyCls, style: bodyStyle, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: contentRef,
+                className: "card-body-content",
+                "aria-hidden": loading || void 0,
+                children
+              }
+            ),
+            loading && /* @__PURE__ */ jsx("div", { className: "card-loading-overlay", "aria-live": "polite", children: loadingOverlay ?? /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Spin", children: /* @__PURE__ */ jsx(Spin, { tip: "\u52A0\u8F7D\u4E2D..." }) }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+CardBase.displayName = "Card";
+var Card = withComponentTheme(
+  CardBase,
+  "Card",
+  ["card", "button", "spin"]
+);
+
+export { Card };