@fangxinyan/lumina 0.6.17 → 0.7.0

package/dist/{chunk-BNY2NVTL.cjs → chunk-TYZ6L7E6.cjs}

@@ -1,9 +1,10 @@
 'use strict';
 
-var chunkQMX67CVT_cjs = require('./chunk-QMX67CVT.cjs');
-require('./tokens-RYJ3DFTU.css');
+var chunk2AUXUZ3Z_cjs = require('./chunk-2AUXUZ3Z.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
 require('./shared-NJHRNLRH.css');
-require('./Collapse-UNBHEPYP.css');
+require('./Collapse-BTSBHBSY.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -27,7 +28,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var CollapsePanel = ({ open, children }) => {
+var CollapsePanel = ({ open, id, labelledBy, children }) => {
   const innerRef = React__namespace.useRef(null);
   const [h, setH] = React__namespace.useState(0);
   const [animated, setAnimated] = React__namespace.useState(false);
@@ -40,21 +41,28 @@ var CollapsePanel = ({ open, children }) => {
     return () => ro.disconnect();
   }, []);
   React__namespace.useEffect(() => {
-    const id = requestAnimationFrame(() => setAnimated(true));
-    return () => cancelAnimationFrame(id);
+    const id2 = requestAnimationFrame(() => setAnimated(true));
+    return () => cancelAnimationFrame(id2);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      id,
       className: "collapse-body",
       style: { maxHeight: open ? h : 0, transition: animated ? void 0 : "none" },
       "aria-hidden": !open,
+      "aria-labelledby": labelledBy,
+      role: "region",
+      ...!open ? { inert: "" } : {},
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: innerRef, className: "collapse-body-inner", children })
     }
   );
 };
-var normalizeKeys = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
-var Collapse = React__namespace.forwardRef(({
+var normalizeKeys = (value, singleOpen = false) => {
+  const keys = value == null ? [] : Array.isArray(value) ? value : [value];
+  return singleOpen ? keys.slice(0, 1) : keys;
+};
+var CollapseBase = React__namespace.forwardRef(({
   items,
   accordion = false,
   multiple = true,
@@ -67,10 +75,14 @@ var Collapse = React__namespace.forwardRef(({
   className = "",
   ...rest
 }, ref) => {
-  const [inner, setInner] = React__namespace.useState(() => normalizeKeys(defaultActiveKey));
-  const isControlled = activeKey !== void 0;
-  const keys = isControlled ? normalizeKeys(activeKey) : inner;
+  const baseId = React__namespace.useId();
   const singleOpen = accordion || !multiple;
+  const [inner, setInner] = React__namespace.useState(() => normalizeKeys(defaultActiveKey, singleOpen));
+  const isControlled = activeKey !== void 0;
+  const keys = normalizeKeys(isControlled ? activeKey : inner, singleOpen);
+  React__namespace.useEffect(() => {
+    if (!isControlled && singleOpen && inner.length > 1) setInner(inner.slice(0, 1));
+  }, [inner, isControlled, singleOpen]);
   const toggle = (k, itemDisabled) => {
     if (collapsible === "disabled" || itemDisabled) return;
     const next = keys.includes(k) ? keys.filter((x) => x !== k) : singleOpen ? [k] : [...keys, k];
@@ -83,42 +95,49 @@ var Collapse = React__namespace.forwardRef(({
       ref,
       className: `collapse ${ghost ? "ghost" : ""} ${size} ${className}`,
       ...rest,
-      children: items.map((it) => {
+      children: items.map((it, index) => {
         const open = keys.includes(it.key);
         const isDisabled = it.disabled || collapsible === "disabled";
         const headerClickable = collapsible === "header" && !isDisabled;
+        const headerId = `${baseId}-header-${index}`;
+        const panelId = `${baseId}-panel-${index}`;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: `collapse-item ${open ? "open" : ""} ${isDisabled ? "disabled" : ""} ${collapsible === "icon" ? "icon-only" : ""}`,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
+              collapsible === "icon" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { id: headerId, className: "collapse-head", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: it.label }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "collapse-chev clickable",
+                    disabled: isDisabled,
+                    onClick: () => toggle(it.key, it.disabled),
+                    "aria-expanded": open,
+                    "aria-controls": panelId,
+                    "aria-label": open ? "\u6536\u8D77\u9762\u677F" : "\u5C55\u5F00\u9762\u677F",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "chevDown", size: 16, "aria-hidden": true })
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
+                  id: headerId,
                   type: "button",
                   className: "collapse-head",
                   disabled: isDisabled,
                   onClick: () => headerClickable && toggle(it.key, it.disabled),
                   "aria-expanded": open,
+                  "aria-controls": panelId,
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { children: it.label }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        className: `collapse-chev${collapsible === "icon" ? " clickable" : ""}`,
-                        onClick: (e) => {
-                          if (collapsible === "icon" && !isDisabled) {
-                            e.stopPropagation();
-                            toggle(it.key, it.disabled);
-                          }
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(chunkQMX67CVT_cjs.Icon, { name: "chevDown", size: 16 })
-                      }
-                    )
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "collapse-chev", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "chevDown", size: 16 }) })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(CollapsePanel, { open, children: it.children })
+              /* @__PURE__ */ jsxRuntime.jsx(CollapsePanel, { open, id: panelId, labelledBy: headerId, children: it.children })
             ]
           },
           it.key
@@ -127,6 +146,7 @@ var Collapse = React__namespace.forwardRef(({
     }
   );
 });
-Collapse.displayName = "Collapse";
+CollapseBase.displayName = "Collapse";
+var Collapse = chunkNRJXZPZR_cjs.withComponentTheme(CollapseBase, "Collapse", "collapse");
 
 exports.Collapse = Collapse;

package/dist/{chunk-MOZ52KN6.js → chunk-U3SG2YT2.js}

@@ -1,7 +1,10 @@
-import { useFloating } from './chunk-DUFRASGO.js';
-import './tokens-RYJ3DFTU.css';
+import { useFloating } from './chunk-3QXP2ZNP.js';
+import { useOverlayLayer } from './chunk-2A4GYSN4.js';
+import { useComponentPortalTheme, withComponentTheme } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Tooltip-5FSPJWLX.css';
+import './Tooltip-2EUNTOTW.css';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -11,7 +14,7 @@ var normalizePlacement = (placement) => {
   const alignCross = placement.endsWith("Left") || placement.endsWith("Top") ? "start" : placement.endsWith("Right") || placement.endsWith("Bottom") ? "end" : "center";
   return { placement: base, alignCross };
 };
-var Tooltip = React.forwardRef(({
+var TooltipBase = React.forwardRef(({
   content,
   title,
   placement = "top",
@@ -26,6 +29,7 @@ var Tooltip = React.forwardRef(({
   closeDelay = 300,
   overlayClassName = "",
   popupClassName = "",
+  className = "",
   onMouseEnter,
   onMouseLeave,
   onPointerEnter,
@@ -34,14 +38,22 @@ var Tooltip = React.forwardRef(({
   onBlur,
   ...rest
 }, ref) => {
+  const portalContainer = usePortalContainer();
+  const portalTheme = useComponentPortalTheme("Tooltip");
   const [innerShow, setInnerShow] = React.useState(defaultOpen);
   const openTimerRef = React.useRef();
   const closeTimerRef = React.useRef();
   const controlledShow = openProp ?? visible;
   const show = controlledShow ?? innerShow;
+  const tooltipId = React.useId();
   const resolvedContent = content ?? title;
   const disabledTooltip = disabled || resolvedContent == null || resolvedContent === "";
+  const effectiveShow = show && !disabledTooltip;
+  const showRef = React.useRef(show);
+  showRef.current = show;
   const setShow = React.useCallback((next) => {
+    if (showRef.current === next) return;
+    showRef.current = next;
     if (controlledShow === void 0) setInnerShow(next);
     onOpenChange?.(next);
     onVisibleChange?.(next);
@@ -79,9 +91,10 @@ var Tooltip = React.forwardRef(({
     triggerRef,
     floatingRef,
     floatingStyle,
-    placement: resolved
+    placement: resolved,
+    zIndex: tooltipZIndex
   } = useFloating({
-    open: show,
+    open: effectiveShow,
     placement: normalized.placement,
     panelWidth: 160,
     panelHeight: 32,
@@ -95,12 +108,23 @@ var Tooltip = React.forwardRef(({
     },
     [ref, triggerRef]
   );
+  useOverlayLayer({
+    open: effectiveShow && portalContainer != null,
+    containerRef: floatingRef,
+    ownerRef: triggerRef,
+    zIndex: tooltipZIndex,
+    onEscape: () => setShow(false)
+  });
+  const childDescribedBy = children.props["aria-describedby"];
+  const triggerChild = React.cloneElement(children, {
+    "aria-describedby": [childDescribedBy, effectiveShow ? tooltipId : void 0].filter(Boolean).join(" ") || void 0
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "span",
       {
         ref: setTriggerRef,
-        className: "tip-anchor",
+        className: `tip-anchor ${className}`,
         onMouseEnter: (e) => {
           onMouseEnter?.(e);
           open();
@@ -126,16 +150,18 @@ var Tooltip = React.forwardRef(({
           close();
         },
         ...rest,
-        children
+        children: triggerChild
       }
     ),
-    show && typeof document !== "undefined" && createPortal(
+    effectiveShow && portalContainer && createPortal(
       /* @__PURE__ */ jsx(
         "div",
         {
           ref: floatingRef,
+          id: tooltipId,
           className: `tip ${resolved} ${overlayClassName} ${popupClassName}`,
-          style: floatingStyle,
+          ...portalTheme.dataAttributes,
+          style: { ...floatingStyle, ...portalTheme.style, ...portalTheme.styles.popup },
           role: "tooltip",
           onMouseEnter: open,
           onMouseLeave: close,
@@ -144,10 +170,11 @@ var Tooltip = React.forwardRef(({
           children: resolvedContent
         }
       ),
-      document.body
+      portalContainer
     )
   ] });
 });
-Tooltip.displayName = "Tooltip";
+TooltipBase.displayName = "Tooltip";
+var Tooltip = withComponentTheme(TooltipBase, "Tooltip", "tooltip");
 
 export { Tooltip };

package/dist/{chunk-POU3W5J3.cjs → chunk-U5YYOOLC.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('./StatusBar-FJKEEPXU.css');
+require('./StatusBar-TCGR3LXP.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/StatusBar/StatusBar.tsx
-var StatusBarItem = React__namespace.forwardRef(({
+var StatusBarItemBase = React__namespace.forwardRef(({
   icon,
   tone = "default",
   onClick,
@@ -48,13 +48,19 @@ var StatusBarItem = React__namespace.forwardRef(({
         type: "button",
         className: cls,
         onClick,
+        ...rest,
         children: content
       }
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cls, ...rest, children: content });
 });
-StatusBarItem.displayName = "StatusBarItem";
+StatusBarItemBase.displayName = "StatusBarItem";
+var StatusBarItem = chunkNRJXZPZR_cjs.withComponentTheme(
+  StatusBarItemBase,
+  "StatusBarItem",
+  "status-bar"
+);
 var StatusBarBase = React__namespace.forwardRef(({
   left,
   center,
@@ -69,7 +75,8 @@ var StatusBarBase = React__namespace.forwardRef(({
   right != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "statusbar-section right", children: right })
 ] }));
 StatusBarBase.displayName = "StatusBar";
-var StatusBar = StatusBarBase;
+var ThemedStatusBar = chunkNRJXZPZR_cjs.withComponentTheme(StatusBarBase, "StatusBar", "status-bar");
+var StatusBar = ThemedStatusBar;
 StatusBar.Item = StatusBarItem;
 
 exports.StatusBar = StatusBar;

package/dist/chunk-U7VEPMCX.cjs

@@ -0,0 +1,221 @@
+'use strict';
+
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
+require('./shared-NJHRNLRH.css');
+require('./Splitter-IQ3PFIKK.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);
+
+function clampSplitterSize(value, minimum, maximum) {
+  const normalized = Number.isFinite(value) ? value : minimum;
+  return Math.max(minimum, Math.min(maximum, normalized));
+}
+function readStoredSplitterSize(storageKey) {
+  if (!storageKey || typeof window === "undefined") return void 0;
+  try {
+    const storedValue = window.localStorage.getItem(`lumina:splitter:v1:${storageKey}`);
+    if (storedValue == null) return void 0;
+    const value = Number(storedValue);
+    return Number.isFinite(value) ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+var SplitterBase = React__namespace.forwardRef(({
+  direction = "horizontal",
+  defaultSize = 240,
+  size,
+  onResize,
+  onResizeEnd,
+  min = 80,
+  max = Infinity,
+  step = 16,
+  children,
+  className = "",
+  handleClassName = "",
+  handleProps,
+  secondMin = 24,
+  storageKey,
+  ...rest
+}, ref) => {
+  const isControlled = size !== void 0;
+  const containerRef = React__namespace.useRef(null);
+  const cleanupDragRef = React__namespace.useRef(null);
+  const [inner, setInner] = React__namespace.useState(
+    () => clampSplitterSize(readStoredSplitterSize(storageKey) ?? defaultSize, min, max)
+  );
+  const [containerSize, setContainerSize] = React__namespace.useState(Infinity);
+  const [dragging, setDragging] = React__namespace.useState(false);
+  const clamp = React__namespace.useCallback(
+    (value) => {
+      const availableMaximum = Number.isFinite(containerSize) && containerSize > 0 ? Math.max(0, containerSize - Math.max(0, secondMin) - 6) : Infinity;
+      const effectiveMaximum = Math.max(min, Math.min(max, availableMaximum));
+      return clampSplitterSize(value, min, effectiveMaximum);
+    },
+    [containerSize, max, min, secondMin]
+  );
+  const rawCurrent = isControlled ? size : inner;
+  const current = clamp(rawCurrent);
+  const persistSize = React__namespace.useCallback((value) => {
+    if (!storageKey || typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(`lumina:splitter:v1:${storageKey}`, String(value));
+    } catch {
+    }
+  }, [storageKey]);
+  const commit = React__namespace.useCallback(
+    (value) => {
+      const clamped = clamp(value);
+      if (!isControlled) setInner(clamped);
+      onResize?.(clamped);
+      return clamped;
+    },
+    [clamp, isControlled, onResize]
+  );
+  React__namespace.useLayoutEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const updateContainerSize = () => {
+      setContainerSize(direction === "horizontal" ? element.clientWidth : element.clientHeight);
+    };
+    updateContainerSize();
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(updateContainerSize);
+      observer.observe(element);
+      return () => observer.disconnect();
+    }
+    window.addEventListener("resize", updateContainerSize);
+    return () => window.removeEventListener("resize", updateContainerSize);
+  }, [direction]);
+  React__namespace.useEffect(() => () => cleanupDragRef.current?.(), []);
+  const onPointerDown = (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    setDragging(true);
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    let latest = current;
+    const move = (ev) => {
+      const next = direction === "horizontal" ? ev.clientX - rect.left : ev.clientY - rect.top;
+      latest = commit(next);
+    };
+    const finish = () => {
+      setDragging(false);
+      onResizeEnd?.(latest);
+      persistSize(latest);
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", finish);
+      window.removeEventListener("pointercancel", finish);
+      window.removeEventListener("blur", finish);
+      cleanupDragRef.current = null;
+    };
+    cleanupDragRef.current?.();
+    cleanupDragRef.current = finish;
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", finish);
+    window.addEventListener("pointercancel", finish);
+    window.addEventListener("blur", finish);
+  };
+  const onKeyDown = (e) => {
+    const increment = (delta) => {
+      const next = commit(current + delta);
+      onResizeEnd?.(next);
+      persistSize(next);
+    };
+    if (direction === "horizontal") {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        increment(-step);
+      }
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        increment(step);
+      }
+    } else {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        increment(-step);
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        increment(step);
+      }
+    }
+    if (e.key === "Home") {
+      e.preventDefault();
+      const next = commit(min);
+      onResizeEnd?.(next);
+      persistSize(next);
+    }
+    if (e.key === "End") {
+      e.preventDefault();
+      const next = commit(Number.MAX_SAFE_INTEGER);
+      onResizeEnd?.(next);
+      persistSize(next);
+    }
+  };
+  const firstStyle = direction === "horizontal" ? { width: current } : { height: current };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: `splitter ${direction} ${dragging ? "dragging" : ""} ${className}`,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "splitter-panel first", style: firstStyle, children: children[0] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ...handleProps,
+            role: "separator",
+            tabIndex: 0,
+            "aria-label": handleProps?.["aria-label"] ?? "\u8C03\u6574\u5206\u680F\u5C3A\u5BF8",
+            "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+            "aria-valuenow": current,
+            "aria-valuemin": min,
+            "aria-valuemax": Number.isFinite(max) ? clamp(max) : void 0,
+            className: `splitter-handle ${handleClassName}`,
+            onPointerDown,
+            onKeyDown: (event) => {
+              handleProps?.onKeyDown?.(event);
+              if (!event.defaultPrevented) onKeyDown(event);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "splitter-handle-grip", "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "splitter-panel second", children: children[1] })
+      ]
+    }
+  );
+});
+SplitterBase.displayName = "Splitter";
+var Splitter = chunkNRJXZPZR_cjs.withComponentTheme(SplitterBase, "Splitter", "splitter");
+
+exports.Splitter = Splitter;