@fangxinyan/lumina 0.6.18 → 0.7.0

package/dist/{chunk-2FOC3D6X.js → chunk-WMZV7PNO.js}

@@ -1,7 +1,8 @@
-import { Table } from './chunk-UGAN4BBW.js';
-import './tokens-RYJ3DFTU.css';
+import { Table } from './chunk-EA3NZBCZ.js';
+import { withComponentTheme, InternalComponentThemePart } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './TablePro-3NGWERWT.css';
+import './TablePro-WYE6TXWJ.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -23,6 +24,7 @@ var TableProInner = ({
   sortKey,
   sortDir,
   onSort,
+  onChange,
   rowSelection,
   selectable,
   selected,
@@ -30,6 +32,8 @@ var TableProInner = ({
   expandable,
   pagination,
   scroll,
+  tableProps,
+  caption,
   onRowClick,
   empty,
   ...rootProps
@@ -48,7 +52,7 @@ var TableProInner = ({
           /* @__PURE__ */ jsx("div", { className: "table-toolbar-main", children: toolbar }),
           actions && /* @__PURE__ */ jsx("div", { className: "table-toolbar-actions", children: actions })
         ] }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Table", children: /* @__PURE__ */ jsx(
           Table,
           {
             columns,
@@ -60,6 +64,7 @@ var TableProInner = ({
             sortKey,
             sortDir,
             onSort,
+            onChange,
             rowSelection,
             selectable,
             selected,
@@ -67,18 +72,25 @@ var TableProInner = ({
             expandable,
             pagination,
             scroll,
+            tableProps,
+            caption,
             onRowClick,
             empty,
             className: innerTableClassName,
             style: tableStyle
           }
-        ),
+        ) }),
         footer && /* @__PURE__ */ jsx("div", { className: "table-footer", children: footer })
       ]
     }
   );
 };
-var TablePro = React.forwardRef(TableProInner);
-TablePro.displayName = "TablePro";
+var TableProBase = React.forwardRef(TableProInner);
+TableProBase.displayName = "TablePro";
+var TablePro = withComponentTheme(
+  TableProBase,
+  "TablePro",
+  ["table-pro", "table", "button", "checkbox", "pagination", "select", "input"]
+);
 
 export { TablePro };

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-XZXY3XCL.cjs

@@ -0,0 +1,105 @@
+'use strict';
+
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
+require('./shared-NJHRNLRH.css');
+require('./Tabs-A3IG6UZ6.css');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var getFirstEnabledKey = (items) => items.find((item) => !item.disabled)?.key;
+var TabsBase = React__namespace.forwardRef(({
+  items,
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  variant = "line",
+  centered,
+  className = "",
+  ...rest
+}, ref) => {
+  const baseId = React__namespace.useId();
+  const tabRefs = React__namespace.useRef(/* @__PURE__ */ new Map());
+  const [inner, setInner] = React__namespace.useState(defaultActiveKey ?? getFirstEnabledKey(items));
+  const isControlled = activeKey !== void 0;
+  const requested = isControlled ? activeKey : inner;
+  const current = items.some((item) => item.key === requested && !item.disabled) ? requested : getFirstEnabledKey(items);
+  const select = (k) => {
+    if (items.find((item) => item.key === k)?.disabled) return;
+    if (!isControlled) setInner(k);
+    onChange?.(k);
+  };
+  const handleTabKeyDown = (event) => {
+    const enabled = items.filter((item) => !item.disabled);
+    const index = enabled.findIndex((item) => item.key === current);
+    let target;
+    if (event.key === "ArrowRight") target = enabled[(index + 1) % enabled.length];
+    if (event.key === "ArrowLeft") target = enabled[(index - 1 + enabled.length) % enabled.length];
+    if (event.key === "Home") target = enabled[0];
+    if (event.key === "End") target = enabled[enabled.length - 1];
+    if (!target) return;
+    event.preventDefault();
+    tabRefs.current.get(target.key)?.focus();
+    select(target.key);
+  };
+  const active = items.find((i) => i.key === current);
+  const activeIndex = items.findIndex((item) => item.key === current);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: `tabs ${variant} ${centered ? "centered" : ""} ${className}`, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tabs-nav", role: "tablist", children: items.map((it, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: (node) => {
+          if (node) tabRefs.current.set(it.key, node);
+          else tabRefs.current.delete(it.key);
+        },
+        type: "button",
+        role: "tab",
+        id: `${baseId}-tab-${index}`,
+        "aria-selected": current === it.key,
+        "aria-controls": it.content !== void 0 ? `${baseId}-panel-${index}` : void 0,
+        tabIndex: current === it.key ? 0 : -1,
+        disabled: it.disabled,
+        className: `tab ${current === it.key ? "active" : ""}`,
+        onClick: () => select(it.key),
+        onKeyDown: handleTabKeyDown,
+        children: it.label
+      },
+      it.key
+    )) }),
+    active?.content !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: `${baseId}-panel-${activeIndex}`,
+        className: "tabs-content",
+        role: "tabpanel",
+        "aria-labelledby": `${baseId}-tab-${activeIndex}`,
+        tabIndex: 0,
+        children: active.content
+      }
+    )
+  ] });
+});
+TabsBase.displayName = "Tabs";
+var Tabs = chunkNRJXZPZR_cjs.withComponentTheme(TabsBase, "Tabs", "tabs");
+
+exports.Tabs = Tabs;

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 };