@fangxinyan/lumina 0.9.0 → 0.9.2

package/dist/{chunk-AL2PYVVP.js → chunk-MSWWABXP.js}

@@ -1,13 +1,12 @@
 import { Tag } from './chunk-OGMI3TO5.js';
 import { useFloating } from './chunk-3QXP2ZNP.js';
-import { Input } from './chunk-TUXF2G2O.js';
 import { useOverlayLayer } from './chunk-2A4GYSN4.js';
 import { Icon, renderIconSlot } from './chunk-2BM65ITV.js';
 import { withComponentTheme, useComponentPortalTheme, InternalComponentThemePart } from './chunk-5HLNFDV4.js';
 import { usePortalContainer } from './chunk-CPVUDSIY.js';
 import './tokens-223RYVVS.css';
 import './shared-NJHRNLRH.css';
-import './Select-QPBB73KA.css';
+import './Select-Y3X3ZJTC.css';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -29,6 +28,10 @@ var defaultFilter = (input, opt, optionFilterProp) => {
   const txt = propValue != null ? String(propValue) : opt.text ?? (typeof opt.label === "string" ? opt.label : String(opt.value));
   return txt.toLowerCase().includes(q);
 };
+var getSearchInputDisplayWidth = (value) => Array.from(value).reduce(
+  (width, character) => width + ((character.codePointAt(0) ?? 0) > 255 ? 2 : 1),
+  0
+);
 var getOptionAriaLabel = (option) => {
   if (option.ariaLabel) return option.ariaLabel;
   if (typeof option.label === "string" || typeof option.label === "number") {
@@ -47,6 +50,9 @@ var SelectInner = (props, forwardedRef) => {
     allowClear,
     searchable,
     showSearch,
+    searchValue: searchValueProp,
+    defaultSearchValue,
+    onSearch,
     filterOption,
     optionFilterProp,
     loading,
@@ -95,7 +101,7 @@ var SelectInner = (props, forwardedRef) => {
     isMulti && Array.isArray(props.defaultValue) ? props.defaultValue : []
   );
   const [innerOpen, setInnerOpen] = React.useState(defaultOpen ?? false);
-  const [query, setQuery] = React.useState("");
+  const [innerSearchValue, setInnerSearchValue] = React.useState(defaultSearchValue ?? "");
   const [activeIdx, setActiveIdx] = React.useState(-1);
   const searchRef = React.useRef(null);
   const portalContainer = usePortalContainer();
@@ -114,12 +120,29 @@ var SelectInner = (props, forwardedRef) => {
   const openControlled = openProp !== void 0;
   const requestedOpen = openControlled ? openProp : innerOpen;
   const open = !disabled && requestedOpen;
-  const setOpen = (v) => {
-    if (disabled && v) return;
-    if (!openControlled) setInnerOpen(v);
-    onOpenChange?.(v);
-    if (!v) setQuery("");
-  };
+  const requestedOpenRef = React.useRef(requestedOpen);
+  requestedOpenRef.current = requestedOpen;
+  const searchControlled = searchValueProp !== void 0;
+  const searchValue = searchControlled ? searchValueProp : innerSearchValue;
+  const hasInlineSearch = mergedSearchable;
+  const showsInlineSearchInput = hasInlineSearch && (isMulti || open);
+  const updateSearchValue = React.useCallback((nextValue) => {
+    if (!searchControlled) setInnerSearchValue(nextValue);
+    onSearch?.(nextValue);
+  }, [onSearch, searchControlled]);
+  const resetSearchValue = React.useCallback(() => {
+    if (!searchValue) return;
+    if (!searchControlled) setInnerSearchValue("");
+    onSearch?.("");
+  }, [onSearch, searchControlled, searchValue]);
+  const setOpen = React.useCallback((nextOpen) => {
+    if (disabled && nextOpen) return;
+    if (nextOpen === requestedOpenRef.current) return;
+    requestedOpenRef.current = nextOpen;
+    if (!openControlled) setInnerOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+    if (!nextOpen) resetSearchValue();
+  }, [disabled, onOpenChange, openControlled, resetSearchValue]);
   React.useEffect(() => {
     if (!disabled || openControlled || !innerOpen) return;
     setInnerOpen(false);
@@ -130,7 +153,7 @@ var SelectInner = (props, forwardedRef) => {
     placement: "bottom",
     matchTriggerWidth: !hasCustomPopupWidth,
     panelWidth: typeof resolvedPopupWidth === "number" ? resolvedPopupWidth : 360,
-    panelHeight: mergedListHeight + (mergedSearchable ? 58 : 12)
+    panelHeight: mergedListHeight + 12
   });
   useOverlayLayer({
     open: open && portalContainer != null,
@@ -172,7 +195,7 @@ var SelectInner = (props, forwardedRef) => {
     };
     document.addEventListener("mousedown", h);
     return () => document.removeEventListener("mousedown", h);
-  }, [open]);
+  }, [menuRef, open, setOpen, triggerRef]);
   React.useEffect(() => {
     if (open && mergedSearchable) {
       requestAnimationFrame(() => searchRef.current?.focus());
@@ -184,14 +207,32 @@ var SelectInner = (props, forwardedRef) => {
     [options]
   );
   const allFlat = React.useMemo(() => flatten(orderedItems), [orderedItems]);
+  const optionByValue = React.useMemo(() => {
+    const index = /* @__PURE__ */ new Map();
+    allFlat.forEach((option) => index.set(option.value, option));
+    return index;
+  }, [allFlat]);
+  const selectedOptionCacheRef = React.useRef(/* @__PURE__ */ new Map());
+  React.useEffect(() => {
+    selectedValues.forEach((selectedValue) => {
+      const option = optionByValue.get(selectedValue);
+      if (option) selectedOptionCacheRef.current.set(selectedValue, option);
+    });
+  }, [optionByValue, selectedValues]);
+  const selectedOptions = React.useMemo(
+    () => selectedValues.map(
+      (selectedValue) => optionByValue.get(selectedValue) ?? selectedOptionCacheRef.current.get(selectedValue)
+    ).filter((option) => option !== void 0),
+    [optionByValue, selectedValues]
+  );
   const filteredFlat = React.useMemo(() => {
-    if (!query.trim()) return allFlat;
+    if (!searchValue.trim()) return allFlat;
     if (filterOption === false) return allFlat;
     const f = typeof filterOption === "function" ? filterOption : (input, option) => defaultFilter(input, option, optionFilterProp);
-    return allFlat.filter((o) => f(query, o));
-  }, [allFlat, query, filterOption, optionFilterProp]);
+    return allFlat.filter((o) => f(searchValue, o));
+  }, [allFlat, filterOption, optionFilterProp, searchValue]);
   const filteredItems = React.useMemo(() => {
-    if (!query.trim()) {
+    if (!searchValue.trim()) {
       return orderedItems.filter((item) => !isGroup(item) || item.options.length > 0);
     }
     return orderedItems.map((it) => {
@@ -201,7 +242,7 @@ var SelectInner = (props, forwardedRef) => {
       const kept = it.options.filter((o) => filteredFlat.includes(o));
       return kept.length ? { ...it, options: kept } : null;
     }).filter((x) => x !== null);
-  }, [orderedItems, filteredFlat, query]);
+  }, [orderedItems, filteredFlat, searchValue]);
   React.useEffect(() => {
     setActiveIdx((current) => {
       if (current >= 0 && current < filteredFlat.length && !isOptionDisabled(filteredFlat[current])) {
@@ -212,6 +253,7 @@ var SelectInner = (props, forwardedRef) => {
   }, [filteredFlat, isOptionDisabled]);
   const pickSingle = (opt) => {
     if (disabled || isOptionDisabled(opt)) return;
+    selectedOptionCacheRef.current.set(opt.value, opt);
     if (!singleControlled) setInnerSingle(opt.value);
     props.onChange?.(opt.value);
     setOpen(false);
@@ -220,8 +262,17 @@ var SelectInner = (props, forwardedRef) => {
     if (disabled || isOptionDisabled(opt)) return;
     const cur = multiValue ?? [];
     const next = cur.includes(opt.value) ? cur.filter((v) => v !== opt.value) : [...cur, opt.value];
+    selectedOptionCacheRef.current.set(opt.value, opt);
+    if (!multiControlled) setInnerMulti(next);
+    props.onChange?.(next);
+    if (hasInlineSearch) requestAnimationFrame(() => searchRef.current?.focus());
+  };
+  const removeMultiValue = (removedValue) => {
+    if (disabled) return;
+    const next = (multiValue ?? []).filter((value) => value !== removedValue);
     if (!multiControlled) setInnerMulti(next);
     props.onChange?.(next);
+    if (hasInlineSearch) requestAnimationFrame(() => searchRef.current?.focus());
   };
   const clearAll = () => {
     if (disabled) return;
@@ -237,13 +288,20 @@ var SelectInner = (props, forwardedRef) => {
   };
   const isSelected = (val) => isMulti ? (multiValue ?? []).includes(val) : singleValue === val;
   const onKeyDown = (e) => {
-    if ((e.key === "Backspace" || e.key === "Delete") && showClear) {
+    const fromSearchInput = e.target === searchRef.current;
+    if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+    if (fromSearchInput && e.key === "Backspace" && !searchValue && isMulti && multiValue.length > 0) {
+      e.preventDefault();
+      removeMultiValue(multiValue[multiValue.length - 1]);
+      return;
+    }
+    if (!fromSearchInput && (e.key === "Backspace" || e.key === "Delete") && showClear) {
       e.preventDefault();
       clearAll();
       return;
     }
     if (!open) {
-      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      if (e.key === "Enter" || !fromSearchInput && e.key === " " || e.key === "ArrowDown") {
         e.preventDefault();
         setOpen(true);
       }
@@ -286,13 +344,47 @@ var SelectInner = (props, forwardedRef) => {
       return;
     }
   };
+  const renderInlineSearchInput = () => {
+    if (!showsInlineSearchInput) return null;
+    const multiHasSelection = isMulti && multiValue.length > 0;
+    const searchDisplayWidth = getSearchInputDisplayWidth(searchValue);
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: searchRef,
+        id: fieldId,
+        className: `select-search-input ${multiHasSelection ? "with-selection" : "empty"}`,
+        type: "search",
+        value: searchValue,
+        style: multiHasSelection ? { width: `${Math.min(Math.max(searchDisplayWidth + 1, 2), 32)}ch` } : void 0,
+        placeholder: isMulti ? multiValue.length === 0 ? placeholder : void 0 : "\u641C\u7D22...",
+        disabled,
+        autoComplete: "off",
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-invalid": ariaInvalid,
+        "aria-required": ariaRequired,
+        "aria-describedby": ariaDescribedBy,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? listboxId : void 0,
+        "aria-activedescendant": open && activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
+        onChange: (event) => {
+          updateSearchValue(event.target.value);
+          if (!open) setOpen(true);
+        }
+      }
+    );
+  };
   const renderTrigger = () => {
     if (isMulti) {
-      const selected = (multiValue ?? []).map((v) => allFlat.find((o) => o.value === v)).filter((o) => !!o);
+      const selected = selectedOptions;
       const max = maxTagCount;
       const shown = max != null ? selected.slice(0, max) : selected;
       const overflow = selected.length - shown.length;
-      if (selected.length === 0) {
+      if (selected.length === 0 && !hasInlineSearch) {
         return /* @__PURE__ */ jsx("span", { className: "placeholder", children: placeholder });
       }
       return /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Tag", children: /* @__PURE__ */ jsxs("span", { className: "select-tags", children: [
@@ -301,24 +393,25 @@ var SelectInner = (props, forwardedRef) => {
           {
             tone: "accent",
             removable: !disabled,
-            onRemove: () => {
-              const cur = multiValue ?? [];
-              const next = cur.filter((v) => v !== o.value);
-              if (!multiControlled) setInnerMulti(next);
-              props.onChange?.(next);
+            onRemove: () => removeMultiValue(o.value),
+            onMouseDown: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
             },
             onClick: (e) => e.stopPropagation(),
-            children: selectedRender?.(o, { value: o.value, multiple: true }) ?? o.label
+            children: /* @__PURE__ */ jsx("span", { className: "select-tag-label", children: selectedRender?.(o, { value: o.value, multiple: true }) ?? o.label })
           },
           String(o.value)
         )),
-        overflow > 0 && /* @__PURE__ */ jsxs(Tag, { tone: "neutral", children: [
+        overflow > 0 && /* @__PURE__ */ jsxs(Tag, { className: "select-tag-overflow", tone: "neutral", children: [
           "+",
           overflow
-        ] })
+        ] }),
+        renderInlineSearchInput()
       ] }) });
     }
-    const current = allFlat.find((o) => o.value === singleValue);
+    if (showsInlineSearchInput) return renderInlineSearchInput();
+    const current = selectedOptions[0];
     if (!current) return /* @__PURE__ */ jsx("span", { className: "placeholder", children: placeholder });
     if (selectedRender) {
       return /* @__PURE__ */ jsx("span", { className: "select-value select-value-custom", children: selectedRender(current, { value: current.value, multiple: false }) });
@@ -365,6 +458,9 @@ var SelectInner = (props, forwardedRef) => {
               "aria-label": getOptionAriaLabel(o),
               disabled: optionDisabled,
               className: `menu-item ${sel ? "active" : ""} ${active ? "highlight" : ""}`,
+              onMouseDown: (event) => {
+                if (hasInlineSearch) event.preventDefault();
+              },
               onClick: () => isMulti ? toggleMulti(o) : pickSingle(o),
               children: [
                 isMulti && /* @__PURE__ */ jsx("span", { className: `menu-check ${sel ? "on" : ""}`, "aria-hidden": true, children: sel && /* @__PURE__ */ jsx(Icon, { name: "check", size: 11, stroke: 3 }) }),
@@ -391,15 +487,32 @@ var SelectInner = (props, forwardedRef) => {
       item.options.map((option) => renderOption(option, !!item.pinned))
     ] }, `g-${groupIndex}-${item.pinned ? "pinned" : "regular"}`) : renderOption(item)
   );
+  const handleTriggerClick = (event) => {
+    if (disabled) return;
+    if (!hasInlineSearch) {
+      setOpen(!open);
+      return;
+    }
+    const target = event.target;
+    if (target.closest(".select-caret")) {
+      setOpen(!open);
+      return;
+    }
+    setOpen(true);
+    searchRef.current?.focus();
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: setTriggerRef,
       ...rest,
-      className: `select ${size} ${isMulti ? "multi" : ""} ${open ? "open" : ""} ${disabled ? "disabled" : ""} ${invalid ? "invalid" : ""} ${className}`,
+      className: `select ${size} ${isMulti ? "multi" : ""} ${hasInlineSearch ? "searchable" : ""} ${open ? "open" : ""} ${disabled ? "disabled" : ""} ${invalid ? "invalid" : ""} ${className}`,
       onKeyDown: (e) => {
         onRootKeyDown?.(e);
-        if (!e.defaultPrevented && e.target.classList.contains("select-trigger")) onKeyDown(e);
+        const target = e.target;
+        if (!e.defaultPrevented && (target.classList.contains("select-trigger") || target === searchRef.current)) {
+          onKeyDown(e);
+        }
       },
       onBlur: (event) => {
         onRootBlur?.(event);
@@ -424,20 +537,20 @@ var SelectInner = (props, forwardedRef) => {
           "div",
           {
             className: "select-trigger",
-            onClick: () => !disabled && setOpen(!open),
-            tabIndex: disabled ? -1 : triggerTabIndex ?? 0,
-            id: fieldId,
-            role: "combobox",
-            "aria-disabled": disabled || void 0,
-            "aria-label": ariaLabel,
-            "aria-labelledby": ariaLabelledBy,
-            "aria-invalid": ariaInvalid,
-            "aria-required": ariaRequired,
-            "aria-describedby": ariaDescribedBy,
-            "aria-haspopup": "listbox",
-            "aria-expanded": open,
-            "aria-controls": open ? listboxId : void 0,
-            "aria-activedescendant": open && activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
+            onClick: handleTriggerClick,
+            tabIndex: showsInlineSearchInput || disabled ? -1 : triggerTabIndex ?? 0,
+            id: showsInlineSearchInput ? void 0 : fieldId,
+            role: showsInlineSearchInput ? void 0 : "combobox",
+            "aria-disabled": showsInlineSearchInput ? void 0 : disabled || void 0,
+            "aria-label": showsInlineSearchInput ? void 0 : ariaLabel,
+            "aria-labelledby": showsInlineSearchInput ? void 0 : ariaLabelledBy,
+            "aria-invalid": showsInlineSearchInput ? void 0 : ariaInvalid,
+            "aria-required": showsInlineSearchInput ? void 0 : ariaRequired,
+            "aria-describedby": showsInlineSearchInput ? void 0 : ariaDescribedBy,
+            "aria-haspopup": showsInlineSearchInput ? void 0 : "listbox",
+            "aria-expanded": showsInlineSearchInput ? void 0 : open,
+            "aria-controls": showsInlineSearchInput ? void 0 : open ? listboxId : void 0,
+            "aria-activedescendant": showsInlineSearchInput ? void 0 : open && activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
             children: [
               renderTrigger(),
               /* @__PURE__ */ jsx(Icon, { name: "chevDown", size: 14, className: "select-caret" })
@@ -451,7 +564,10 @@ var SelectInner = (props, forwardedRef) => {
             className: "select-clear",
             "aria-label": "Clear",
             onPointerDown: (event) => event.stopPropagation(),
-            onMouseDown: (event) => event.stopPropagation(),
+            onMouseDown: (event) => {
+              if (hasInlineSearch) event.preventDefault();
+              event.stopPropagation();
+            },
             onClick: (event) => {
               event.stopPropagation();
               clearAll();
@@ -460,7 +576,7 @@ var SelectInner = (props, forwardedRef) => {
           }
         ),
         open && portalContainer && createPortal(
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             "div",
             {
               ref: menuRef,
@@ -475,44 +591,20 @@ var SelectInner = (props, forwardedRef) => {
                 ...portalTheme.styles.popup,
                 ...popupStyle
               },
-              children: [
-                mergedSearchable && /* @__PURE__ */ jsx("div", { className: "menu-search", children: /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Input", children: /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    ref: searchRef,
-                    size: "sm",
-                    leadingIcon: "search",
-                    value: query,
-                    placeholder: "\u641C\u7D22...",
-                    role: "combobox",
-                    "aria-autocomplete": "list",
-                    "aria-expanded": open,
-                    "aria-controls": listboxId,
-                    "aria-activedescendant": activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
-                    onValueChange: setQuery,
-                    onKeyDown: (e) => {
-                      if (e.key === "Escape" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
-                        e.preventDefault();
-                        onKeyDown(e);
-                      }
-                    }
-                  }
-                ) }) }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "menu-options",
-                    style: { maxHeight: mergedListHeight },
-                    children: loading ? /* @__PURE__ */ jsxs("div", { className: "menu-state", children: [
-                      /* @__PURE__ */ jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsx("span", { className: "spinner" }) }),
-                      /* @__PURE__ */ jsx("span", { children: "\u52A0\u8F7D\u4E2D..." })
-                    ] }) : filteredFlat.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "menu-state", children: [
-                      /* @__PURE__ */ jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsx(Icon, { name: "search", size: 16 }) }),
-                      /* @__PURE__ */ jsx("span", { children: emptyContent ?? "\u6682\u65E0\u5339\u914D\u9879" })
-                    ] }) : renderMenuItems(filteredItems)
-                  }
-                )
-              ]
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "menu-options",
+                  style: { maxHeight: mergedListHeight },
+                  children: loading ? /* @__PURE__ */ jsxs("div", { className: "menu-state", children: [
+                    /* @__PURE__ */ jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsx("span", { className: "spinner" }) }),
+                    /* @__PURE__ */ jsx("span", { children: "\u52A0\u8F7D\u4E2D..." })
+                  ] }) : filteredFlat.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "menu-state", children: [
+                    /* @__PURE__ */ jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsx(Icon, { name: "search", size: 16 }) }),
+                    /* @__PURE__ */ jsx("span", { children: emptyContent ?? "\u6682\u65E0\u5339\u914D\u9879" })
+                  ] }) : renderMenuItems(filteredItems)
+                }
+              )
             }
           ),
           portalContainer

package/dist/{chunk-VTN6YLRJ.cjs → chunk-QZ2AAQBX.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkK3KHQ77L_cjs = require('./chunk-K3KHQ77L.cjs');
+var chunkCDT2QCBL_cjs = require('./chunk-CDT2QCBL.cjs');
 var chunkGFGMGJ5A_cjs = require('./chunk-GFGMGJ5A.cjs');
 var chunkVDVKY2IX_cjs = require('./chunk-VDVKY2IX.cjs');
 var chunkV6BLBIY6_cjs = require('./chunk-V6BLBIY6.cjs');
@@ -137,7 +137,7 @@ var PaginationBase = React__namespace.forwardRef(({
         }
       ),
       showSizeChanger && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pg-size-changer", children: /* @__PURE__ */ jsxRuntime.jsx(
-        chunkK3KHQ77L_cjs.Select,
+        chunkCDT2QCBL_cjs.Select,
         {
           value: normalizedPageSize,
           size: "sm",

package/dist/{chunk-GMFOY7RD.js → chunk-RJCPXAZ3.js}

@@ -5,7 +5,7 @@ import { useComponentPortalTheme, InternalComponentThemePart, withComponentTheme
 import { usePortalContainer } from './chunk-CPVUDSIY.js';
 import './tokens-223RYVVS.css';
 import './shared-NJHRNLRH.css';
-import './Modal-UI2FXNDR.css';
+import './Modal-KLLX3Z2M.css';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
@@ -118,6 +118,7 @@ var ModalBase = React.forwardRef((props, ref) => {
     )
   ] });
   const modalBodyStyle = bodyOverflow == null ? { ...portalTheme.styles.body, ...bodyStyle } : { ...portalTheme.styles.body, overflow: bodyOverflow, ...bodyStyle };
+  const usesDefaultBodyOverflow = bodyOverflow == null && bodyStyle?.overflow == null && portalTheme.styles.body?.overflow == null;
   return ReactDOM.createPortal(
     /* @__PURE__ */ jsx(OverlayZIndexProvider, { zIndex: overlayZIndex, children: /* @__PURE__ */ jsx(
       "div",
@@ -145,7 +146,7 @@ var ModalBase = React.forwardRef((props, ref) => {
             ...portalTheme.dataAttributes,
             ...rest,
             children: [
-              (title || description || closable) && /* @__PURE__ */ jsxs("div", { className: "modal-head", children: [
+              (title || description || closable) && /* @__PURE__ */ jsxs("div", { className: "modal-head", style: portalTheme.styles.header, children: [
                 /* @__PURE__ */ jsxs("div", { className: "modal-titles", children: [
                   title && /* @__PURE__ */ jsx("div", { id: titleId, className: "modal-title", children: title }),
                   description && /* @__PURE__ */ jsx("div", { id: descriptionId, className: "modal-desc", children: description })
@@ -165,12 +166,17 @@ var ModalBase = React.forwardRef((props, ref) => {
                 "div",
                 {
                   ...bodyProps,
-                  className: ["modal-body", `inset-${bodyInset}`, bodyClassName].filter(Boolean).join(" "),
+                  className: [
+                    "modal-body",
+                    `inset-${bodyInset}`,
+                    usesDefaultBodyOverflow ? "default-overflow" : "",
+                    bodyClassName
+                  ].filter(Boolean).join(" "),
                   style: modalBodyStyle,
                   children
                 }
               ),
-              footer === null ? null : /* @__PURE__ */ jsx("div", { className: "modal-foot", children: footer ?? defaultFooter })
+              footer === null ? null : /* @__PURE__ */ jsx("div", { className: "modal-foot", style: portalTheme.styles.footer, children: footer ?? defaultFooter })
             ]
           }
         )

package/dist/{chunk-JMYUO7V7.js → chunk-RM6JIM6O.js}

@@ -1,4 +1,4 @@
-import { Pagination } from './chunk-UCE53RYR.js';
+import { Pagination } from './chunk-LZXJN3XA.js';
 import { Checkbox } from './chunk-QSLXUNLM.js';
 import { useFloating } from './chunk-3QXP2ZNP.js';
 import { useOverlayLayer } from './chunk-2A4GYSN4.js';

package/dist/{chunk-I2YL5XE4.cjs → chunk-SOAGRYM3.cjs}

@@ -7,7 +7,7 @@ var chunkV6BLBIY6_cjs = require('./chunk-V6BLBIY6.cjs');
 var chunkI4GJZLJU_cjs = require('./chunk-I4GJZLJU.cjs');
 require('./tokens-223RYVVS.css');
 require('./shared-NJHRNLRH.css');
-require('./Modal-UI2FXNDR.css');
+require('./Modal-KLLX3Z2M.css');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var client = require('react-dom/client');
@@ -143,6 +143,7 @@ var ModalBase = React__namespace.forwardRef((props, ref) => {
     )
   ] });
   const modalBodyStyle = bodyOverflow == null ? { ...portalTheme.styles.body, ...bodyStyle } : { ...portalTheme.styles.body, overflow: bodyOverflow, ...bodyStyle };
+  const usesDefaultBodyOverflow = bodyOverflow == null && bodyStyle?.overflow == null && portalTheme.styles.body?.overflow == null;
   return ReactDOM__default.default.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(chunkHSDMJUB6_cjs.OverlayZIndexProvider, { zIndex: overlayZIndex, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -170,7 +171,7 @@ var ModalBase = React__namespace.forwardRef((props, ref) => {
             ...portalTheme.dataAttributes,
             ...rest,
             children: [
-              (title || description || closable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-head", children: [
+              (title || description || closable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-head", style: portalTheme.styles.header, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-titles", children: [
                   title && /* @__PURE__ */ jsxRuntime.jsx("div", { id: titleId, className: "modal-title", children: title }),
                   description && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descriptionId, className: "modal-desc", children: description })
@@ -190,12 +191,17 @@ var ModalBase = React__namespace.forwardRef((props, ref) => {
                 "div",
                 {
                   ...bodyProps,
-                  className: ["modal-body", `inset-${bodyInset}`, bodyClassName].filter(Boolean).join(" "),
+                  className: [
+                    "modal-body",
+                    `inset-${bodyInset}`,
+                    usesDefaultBodyOverflow ? "default-overflow" : "",
+                    bodyClassName
+                  ].filter(Boolean).join(" "),
                   style: modalBodyStyle,
                   children
                 }
               ),
-              footer === null ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-foot", children: footer ?? defaultFooter })
+              footer === null ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-foot", style: portalTheme.styles.footer, children: footer ?? defaultFooter })
             ]
           }
         )

package/dist/{chunk-2NECDEAJ.js → chunk-U3T6RC6U.js}

@@ -1,4 +1,4 @@
-import { Table } from './chunk-JMYUO7V7.js';
+import { Table } from './chunk-RM6JIM6O.js';
 import { withComponentTheme, InternalComponentThemePart } from './chunk-5HLNFDV4.js';
 import './tokens-223RYVVS.css';
 import './shared-NJHRNLRH.css';

package/dist/{componentThemeTypes-Jt4B5aU8.d.ts → componentThemeTypes-C7lS3Hi8.d.cts}

@@ -60,8 +60,12 @@ interface ComponentThemeOverride<TSlot extends string = string> {
     tokens?: ThemeTokens;
     styles?: Partial<Record<TSlot, React.CSSProperties>>;
 }
+/** Modal 对外提供的稳定结构样式插槽。 */
+type ModalThemeSlot = "root" | "popup" | "overlay" | "header" | "body" | "footer";
 /** 按公共组件名称配置的主题覆盖。 */
-type ComponentThemeOverrides = Partial<Record<ComponentThemeName, ComponentThemeOverride>>;
+type ComponentThemeOverrides = Partial<{
+    [TName in ComponentThemeName]: TName extends "Modal" ? ComponentThemeOverride<ModalThemeSlot> : ComponentThemeOverride;
+}>;
 /** 单个组件或组件子树使用的视觉主题。 */
 interface ComponentThemeOptions extends Omit<ComponentThemeOverride, "styles"> {
     scope?: ComponentThemeScope;
@@ -74,4 +78,4 @@ interface ComponentThemeProps {
     theme?: ComponentTheme;
 }
 
-export type { AccentKey as A, ComponentTheme as C, ResolvedThemeColors as R, ThemeBaseMode as T, AccentPalette as a, ComponentThemeName as b, ComponentThemeOptions as c, ComponentThemeOverride as d, ComponentThemeOverrides as e, ComponentThemeProps as f, ComponentThemeScope as g, CustomAccentInput as h, ThemeColorOverrides as i, ThemeSemanticColors as j, ThemeSurfacePalette as k, ThemeTokens as l };
+export type { AccentKey as A, ComponentTheme as C, ModalThemeSlot as M, ResolvedThemeColors as R, ThemeBaseMode as T, AccentPalette as a, ComponentThemeName as b, ComponentThemeOptions as c, ComponentThemeOverride as d, ComponentThemeOverrides as e, ComponentThemeProps as f, ComponentThemeScope as g, CustomAccentInput as h, ThemeColorOverrides as i, ThemeSemanticColors as j, ThemeSurfacePalette as k, ThemeTokens as l };

package/dist/{componentThemeTypes-Jt4B5aU8.d.cts → componentThemeTypes-C7lS3Hi8.d.ts}

@@ -60,8 +60,12 @@ interface ComponentThemeOverride<TSlot extends string = string> {
     tokens?: ThemeTokens;
     styles?: Partial<Record<TSlot, React.CSSProperties>>;
 }
+/** Modal 对外提供的稳定结构样式插槽。 */
+type ModalThemeSlot = "root" | "popup" | "overlay" | "header" | "body" | "footer";
 /** 按公共组件名称配置的主题覆盖。 */
-type ComponentThemeOverrides = Partial<Record<ComponentThemeName, ComponentThemeOverride>>;
+type ComponentThemeOverrides = Partial<{
+    [TName in ComponentThemeName]: TName extends "Modal" ? ComponentThemeOverride<ModalThemeSlot> : ComponentThemeOverride;
+}>;
 /** 单个组件或组件子树使用的视觉主题。 */
 interface ComponentThemeOptions extends Omit<ComponentThemeOverride, "styles"> {
     scope?: ComponentThemeScope;
@@ -74,4 +78,4 @@ interface ComponentThemeProps {
     theme?: ComponentTheme;
 }
 
-export type { AccentKey as A, ComponentTheme as C, ResolvedThemeColors as R, ThemeBaseMode as T, AccentPalette as a, ComponentThemeName as b, ComponentThemeOptions as c, ComponentThemeOverride as d, ComponentThemeOverrides as e, ComponentThemeProps as f, ComponentThemeScope as g, CustomAccentInput as h, ThemeColorOverrides as i, ThemeSemanticColors as j, ThemeSurfacePalette as k, ThemeTokens as l };
+export type { AccentKey as A, ComponentTheme as C, ModalThemeSlot as M, ResolvedThemeColors as R, ThemeBaseMode as T, AccentPalette as a, ComponentThemeName as b, ComponentThemeOptions as c, ComponentThemeOverride as d, ComponentThemeOverrides as e, ComponentThemeProps as f, ComponentThemeScope as g, CustomAccentInput as h, ThemeColorOverrides as i, ThemeSemanticColors as j, ThemeSurfacePalette as k, ThemeTokens as l };