@fangxinyan/lumina 0.9.3 → 0.9.4

package/dist/Pagination.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkEBU3DTUN_cjs = require('./chunk-EBU3DTUN.cjs');
-require('./chunk-7RYLV5CM.cjs');
+var chunkA5MLLFKT_cjs = require('./chunk-A5MLLFKT.cjs');
+require('./chunk-562P5YMO.cjs');
 require('./chunk-VNP5WB6M.cjs');
 require('./chunk-FJB3243S.cjs');
 require('./chunk-GFGMGJ5A.cjs');
@@ -15,5 +15,5 @@ require('./chunk-I4GJZLJU.cjs');
 
 Object.defineProperty(exports, "Pagination", {
   enumerable: true,
-  get: function () { return chunkEBU3DTUN_cjs.Pagination; }
+  get: function () { return chunkA5MLLFKT_cjs.Pagination; }
 });

package/dist/Pagination.js

@@ -1,5 +1,5 @@
-export { Pagination } from './chunk-6MT3APJ3.js';
-import './chunk-AFYNTVSH.js';
+export { Pagination } from './chunk-3SUMCW2F.js';
+import './chunk-OKGODC5A.js';
 import './chunk-OGMI3TO5.js';
 import './chunk-3QXP2ZNP.js';
 import './chunk-TUXF2G2O.js';

package/dist/{Select-UTNBARSQ.css → Select-M3HCB3PW.css}

@@ -188,6 +188,72 @@
 .select:hover .select-clear { opacity: 1; }
 .select-clear:hover { color: var(--lmn-select-accent-ink, var(--accent-ink)); box-shadow: var(--lmn-select-neu-shadow-inset, var(--neu-shadow-inset)); }
 
+/* 自适应模式：控件按真实宽度参与布局，标签区只展示测量后能完整容纳的前缀。 */
+.select.multi.responsive .select-trigger {
+  flex-wrap: nowrap;
+  padding: var(--lmn-select-tag-gap, var(--gap-1)) var(--lmn-select-trigger-padding, var(--gap-2));
+  gap: var(--lmn-select-control-gap, var(--gap-2));
+}
+.select.multi.responsive .select-tags {
+  flex-wrap: nowrap;
+  flex: 1 1 0%;
+  gap: var(--lmn-select-tag-gap, var(--gap-1));
+  position: relative;
+}
+.select.multi.responsive .select-tags > .tag,
+.select-tag-measurements > .tag {
+  flex: none;
+  width: max-content;
+  max-width: var(--lmn-select-tag-max-width, 160px);
+}
+.select.multi.responsive .select-tags > .select-tag-overflow {
+  max-width: none;
+}
+.select.multi.responsive [data-collapsed="true"],
+.select-tag-measurements {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.select-tag-measurements {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.select-tag-measurements > .tag {
+  position: absolute;
+  max-width: none;
+}
+.select-search-measure {
+  display: block;
+  width: max-content;
+  min-width: 2ch;
+  padding-inline: calc(var(--gap-1) / 2);
+  padding-inline-end: calc(var(--gap-1) / 2 + 1ch);
+  white-space: pre;
+  font: inherit;
+}
+.select.multi.responsive .select-search-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  field-sizing: fixed;
+}
+.select.multi.responsive .select-caret,
+.select.multi.responsive .select-clear {
+  position: static;
+  transform: none;
+  flex-shrink: 0;
+}
+.select.multi.responsive.open .select-caret { transform: rotate(180deg); }
+.select.multi.responsive .select-tags > .placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* Multi-select menu: leading checkbox per item */
 .menu-check {
   width: 16px;

package/dist/Select.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk7RYLV5CM_cjs = require('./chunk-7RYLV5CM.cjs');
+var chunk562P5YMO_cjs = require('./chunk-562P5YMO.cjs');
 require('./chunk-VNP5WB6M.cjs');
 require('./chunk-FJB3243S.cjs');
 require('./chunk-HSDMJUB6.cjs');
@@ -12,5 +12,5 @@ require('./chunk-I4GJZLJU.cjs');
 
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunk7RYLV5CM_cjs.Select; }
+  get: function () { return chunk562P5YMO_cjs.Select; }
 });

package/dist/Select.d.cts

@@ -113,6 +113,7 @@ interface SingleSelectProps<T extends string | number = string> extends BaseSele
     /** Fired when user clears the selection via the × button. */
     onClear?: () => void;
 }
+/** 多选模式的选值、标签展示和数量限制配置。 */
 interface MultiSelectProps<T extends string | number = string> extends BaseSelectProps<T> {
     multiple: true;
     value?: T[];
@@ -120,8 +121,11 @@ interface MultiSelectProps<T extends string | number = string> extends BaseSelec
     onChange?: SelectMultiChangeHandler<T>;
     /** Fired when user clears all selections via the × button. */
     onClear?: () => void;
-    /** Max selected items shown as tags before collapsing to "+N". */
-    maxTagCount?: number;
+    /**
+     * 显示的标签数量；responsive 按实际可用宽度折叠为 +N，保持单行且不改变选值。
+     * @example <Select multiple maxTagCount="responsive" options={options} />
+     */
+    maxTagCount?: number | "responsive";
     /** 多选允许的最大选择数；达到上限后禁用尚未选中的候选项。 */
     maxCount?: number;
 }

package/dist/Select.d.ts

@@ -113,6 +113,7 @@ interface SingleSelectProps<T extends string | number = string> extends BaseSele
     /** Fired when user clears the selection via the × button. */
     onClear?: () => void;
 }
+/** 多选模式的选值、标签展示和数量限制配置。 */
 interface MultiSelectProps<T extends string | number = string> extends BaseSelectProps<T> {
     multiple: true;
     value?: T[];
@@ -120,8 +121,11 @@ interface MultiSelectProps<T extends string | number = string> extends BaseSelec
     onChange?: SelectMultiChangeHandler<T>;
     /** Fired when user clears all selections via the × button. */
     onClear?: () => void;
-    /** Max selected items shown as tags before collapsing to "+N". */
-    maxTagCount?: number;
+    /**
+     * 显示的标签数量；responsive 按实际可用宽度折叠为 +N，保持单行且不改变选值。
+     * @example <Select multiple maxTagCount="responsive" options={options} />
+     */
+    maxTagCount?: number | "responsive";
     /** 多选允许的最大选择数；达到上限后禁用尚未选中的候选项。 */
     maxCount?: number;
 }

package/dist/Select.js

@@ -1,4 +1,4 @@
-export { Select } from './chunk-AFYNTVSH.js';
+export { Select } from './chunk-OKGODC5A.js';
 import './chunk-OGMI3TO5.js';
 import './chunk-3QXP2ZNP.js';
 import './chunk-2A4GYSN4.js';

package/dist/Table.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkP3ZIABMZ_cjs = require('./chunk-P3ZIABMZ.cjs');
-require('./chunk-EBU3DTUN.cjs');
-require('./chunk-7RYLV5CM.cjs');
+var chunkG5ENSJBS_cjs = require('./chunk-G5ENSJBS.cjs');
+require('./chunk-A5MLLFKT.cjs');
+require('./chunk-562P5YMO.cjs');
 require('./chunk-VNP5WB6M.cjs');
 require('./chunk-KPBZKHCS.cjs');
 require('./chunk-FJB3243S.cjs');
@@ -18,5 +18,5 @@ require('./chunk-I4GJZLJU.cjs');
 
 Object.defineProperty(exports, "Table", {
   enumerable: true,
-  get: function () { return chunkP3ZIABMZ_cjs.Table; }
+  get: function () { return chunkG5ENSJBS_cjs.Table; }
 });

package/dist/Table.js

@@ -1,6 +1,6 @@
-export { Table } from './chunk-X547KNTP.js';
-import './chunk-6MT3APJ3.js';
-import './chunk-AFYNTVSH.js';
+export { Table } from './chunk-QITKDNCX.js';
+import './chunk-3SUMCW2F.js';
+import './chunk-OKGODC5A.js';
 import './chunk-OGMI3TO5.js';
 import './chunk-QSLXUNLM.js';
 import './chunk-3QXP2ZNP.js';

package/dist/TablePro.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunk5Q2ZYR5Z_cjs = require('./chunk-5Q2ZYR5Z.cjs');
-require('./chunk-P3ZIABMZ.cjs');
-require('./chunk-EBU3DTUN.cjs');
-require('./chunk-7RYLV5CM.cjs');
+var chunkV6DY7J2Z_cjs = require('./chunk-V6DY7J2Z.cjs');
+require('./chunk-G5ENSJBS.cjs');
+require('./chunk-A5MLLFKT.cjs');
+require('./chunk-562P5YMO.cjs');
 require('./chunk-VNP5WB6M.cjs');
 require('./chunk-KPBZKHCS.cjs');
 require('./chunk-FJB3243S.cjs');
@@ -19,5 +19,5 @@ require('./chunk-I4GJZLJU.cjs');
 
 Object.defineProperty(exports, "TablePro", {
   enumerable: true,
-  get: function () { return chunk5Q2ZYR5Z_cjs.TablePro; }
+  get: function () { return chunkV6DY7J2Z_cjs.TablePro; }
 });

package/dist/TablePro.js

@@ -1,7 +1,7 @@
-export { TablePro } from './chunk-EP7QREID.js';
-import './chunk-X547KNTP.js';
-import './chunk-6MT3APJ3.js';
-import './chunk-AFYNTVSH.js';
+export { TablePro } from './chunk-T422LYTL.js';
+import './chunk-QITKDNCX.js';
+import './chunk-3SUMCW2F.js';
+import './chunk-OKGODC5A.js';
 import './chunk-OGMI3TO5.js';
 import './chunk-QSLXUNLM.js';
 import './chunk-3QXP2ZNP.js';

package/dist/{chunk-6MT3APJ3.js → chunk-3SUMCW2F.js}

@@ -1,4 +1,4 @@
-import { Select } from './chunk-AFYNTVSH.js';
+import { Select } from './chunk-OKGODC5A.js';
 import { Input } from './chunk-TUXF2G2O.js';
 import { Icon } from './chunk-2BM65ITV.js';
 import { InternalComponentThemePart, withComponentTheme } from './chunk-5HLNFDV4.js';

package/dist/{chunk-7RYLV5CM.cjs → chunk-562P5YMO.cjs}

@@ -8,8 +8,8 @@ var chunkV6BLBIY6_cjs = require('./chunk-V6BLBIY6.cjs');
 var chunkI4GJZLJU_cjs = require('./chunk-I4GJZLJU.cjs');
 require('./tokens-223RYVVS.css');
 require('./shared-NJHRNLRH.css');
-require('./Select-UTNBARSQ.css');
-var React = require('react');
+require('./Select-M3HCB3PW.css');
+var React2 = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -31,8 +31,64 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React2__namespace.useLayoutEffect : React2__namespace.useEffect;
+function measureResponsiveTags(container) {
+  const availableWidth = container.getBoundingClientRect().width;
+  if (availableWidth <= 0) return void 0;
+  const tags = Array.from(container.querySelectorAll("[data-select-tag]"));
+  const overflows = Array.from(container.querySelectorAll("[data-select-overflow]"));
+  const search = container.querySelector(".select-search-measure");
+  const gap = parseFloat(getComputedStyle(container).columnGap) || 0;
+  const tagWidths = tags.map((tag) => tag.getBoundingClientRect().width);
+  const overflowWidths = [0, ...overflows.map((tag) => tag.getBoundingClientRect().width)];
+  const inputWidth = search ? Math.min(search.getBoundingClientRect().width, Math.max(
+    0,
+    availableWidth - (overflowWidths[tags.length] ?? 0) - (tags.length > 0 ? gap : 0)
+  )) : 0;
+  let count = 0;
+  let prefixWidth = 0;
+  for (let index = 0; index <= tags.length; index += 1) {
+    const remaining = tags.length - index;
+    const itemCount = index + (remaining > 0 ? 1 : 0) + (search ? 1 : 0);
+    const width = prefixWidth + (overflowWidths[remaining] ?? 0) + inputWidth + Math.max(0, itemCount - 1) * gap;
+    if (width <= availableWidth) count = index;
+    prefixWidth += tagWidths[index] ?? 0;
+  }
+  return { count, inputWidth };
+}
+function useResponsiveTags(enabled, items, searchable) {
+  const tagsRef = React2__namespace.useRef(null);
+  const [layout, setLayout] = React2__namespace.useState({ count: 0, inputWidth: 0 });
+  const measure = React2__namespace.useCallback(() => {
+    if (!tagsRef.current) return;
+    const next = measureResponsiveTags(tagsRef.current);
+    if (next) setLayout((previous) => previous.count === next.count && previous.inputWidth === next.inputWidth ? previous : next);
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (enabled) measure();
+  });
+  useIsomorphicLayoutEffect(() => {
+    const container = tagsRef.current;
+    if (!enabled || !container) return;
+    let frame = 0;
+    const scheduleMeasure = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    };
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleMeasure) : void 0;
+    observer?.observe(container);
+    container.querySelectorAll("[data-select-tag], [data-select-overflow], .select-search-measure").forEach((element) => observer?.observe(element));
+    window.addEventListener("resize", scheduleMeasure);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", scheduleMeasure);
+      cancelAnimationFrame(frame);
+    };
+  }, [enabled, items, searchable, measure]);
+  return { tagsRef, count: Math.min(layout.count, items.length), inputWidth: layout.inputWidth };
+}
 var isGroup = (it) => Array.isArray(it.options);
 var flatten = (items) => items.flatMap((it) => isGroup(it) ? it.options : [it]);
 var prioritizePinnedGroups = (items) => {
@@ -111,21 +167,22 @@ var SelectInner = (props, forwardedRef) => {
     ...rest
   } = props;
   const isMulti = multiple === true;
+  const responsiveTags = isMulti && maxTagCount === "responsive";
   const mergedClearable = clearable ?? !!allowClear;
   const mergedClearIcon = typeof allowClear === "object" ? allowClear.clearIcon : void 0;
   const mergedSearchable = searchable ?? !!showSearch;
   const mergedListHeight = Number.isFinite(listHeight) && listHeight > 0 ? listHeight : 260;
   const mergedMenuClassName = [menuClassName, popupClassName, dropdownClassName].filter(Boolean).join(" ");
-  const [innerSingle, setInnerSingle] = React__namespace.useState(
+  const [innerSingle, setInnerSingle] = React2__namespace.useState(
     !isMulti ? props.defaultValue : void 0
   );
-  const [innerMulti, setInnerMulti] = React__namespace.useState(
+  const [innerMulti, setInnerMulti] = React2__namespace.useState(
     isMulti && Array.isArray(props.defaultValue) ? props.defaultValue : []
   );
-  const [innerOpen, setInnerOpen] = React__namespace.useState(defaultOpen ?? false);
-  const [innerSearchValue, setInnerSearchValue] = React__namespace.useState(defaultSearchValue ?? "");
-  const [activeIdx, setActiveIdx] = React__namespace.useState(-1);
-  const searchRef = React__namespace.useRef(null);
+  const [innerOpen, setInnerOpen] = React2__namespace.useState(defaultOpen ?? false);
+  const [innerSearchValue, setInnerSearchValue] = React2__namespace.useState(defaultSearchValue ?? "");
+  const [activeIdx, setActiveIdx] = React2__namespace.useState(-1);
+  const searchRef = React2__namespace.useRef(null);
   const portalContainer = chunkI4GJZLJU_cjs.usePortalContainer();
   const portalTheme = chunkV6BLBIY6_cjs.useComponentPortalTheme([
     "Select",
@@ -138,26 +195,26 @@ var SelectInner = (props, forwardedRef) => {
     (styleValue) => styleValue?.width != null || styleValue?.minWidth != null || styleValue?.maxWidth != null
   );
   const resolvedPopupWidth = popupStyle?.width ?? themedPopupStyle?.width;
-  const listboxId = React__namespace.useId();
+  const listboxId = React2__namespace.useId();
   const openControlled = openProp !== void 0;
   const requestedOpen = openControlled ? openProp : innerOpen;
   const open = !disabled && requestedOpen;
-  const requestedOpenRef = React__namespace.useRef(requestedOpen);
+  const requestedOpenRef = React2__namespace.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__namespace.useCallback((nextValue) => {
+  const updateSearchValue = React2__namespace.useCallback((nextValue) => {
     if (!searchControlled) setInnerSearchValue(nextValue);
     onSearch?.(nextValue);
   }, [onSearch, searchControlled]);
-  const resetSearchValue = React__namespace.useCallback(() => {
+  const resetSearchValue = React2__namespace.useCallback(() => {
     if (!searchValue) return;
     if (!searchControlled) setInnerSearchValue("");
     onSearch?.("");
   }, [onSearch, searchControlled, searchValue]);
-  const setOpen = React__namespace.useCallback((nextOpen) => {
+  const setOpen = React2__namespace.useCallback((nextOpen) => {
     if (disabled && nextOpen) return;
     if (nextOpen === requestedOpenRef.current) return;
     requestedOpenRef.current = nextOpen;
@@ -165,7 +222,7 @@ var SelectInner = (props, forwardedRef) => {
     onOpenChange?.(nextOpen);
     if (!nextOpen) resetSearchValue();
   }, [disabled, onOpenChange, openControlled, resetSearchValue]);
-  React__namespace.useEffect(() => {
+  React2__namespace.useEffect(() => {
     if (!disabled || openControlled || !innerOpen) return;
     setInnerOpen(false);
     onOpenChange?.(false);
@@ -185,7 +242,7 @@ var SelectInner = (props, forwardedRef) => {
     onEscape: () => setOpen(false),
     restoreFocus: true
   });
-  const setTriggerRef = React__namespace.useCallback(
+  const setTriggerRef = React2__namespace.useCallback(
     (node) => {
       triggerRef.current = node;
       if (typeof forwardedRef === "function") forwardedRef(node);
@@ -198,16 +255,16 @@ var SelectInner = (props, forwardedRef) => {
   const singleValue = singleControlled ? props.value : innerSingle;
   const controlledMultiValue = props.value;
   const multiValue = multiControlled ? Array.isArray(controlledMultiValue) ? controlledMultiValue : [] : innerMulti;
-  const selectedValues = React__namespace.useMemo(
+  const selectedValues = React2__namespace.useMemo(
     () => isMulti ? multiValue : singleValue !== void 0 ? [singleValue] : [],
     [isMulti, multiValue, singleValue]
   );
   const selectionLimit = maxCount !== void 0 && Number.isFinite(maxCount) ? Math.max(0, Math.floor(maxCount)) : void 0;
-  const isOptionDisabled = React__namespace.useCallback((option) => {
+  const isOptionDisabled = React2__namespace.useCallback((option) => {
     const selected = selectedValues.includes(option.value);
     return !!option.disabled || !!getOptionDisabled?.(option, selectedValues) || isMulti && !selected && selectionLimit !== void 0 && selectedValues.length >= selectionLimit;
   }, [getOptionDisabled, isMulti, selectedValues, selectionLimit]);
-  React__namespace.useEffect(() => {
+  React2__namespace.useEffect(() => {
     if (!open) return;
     const h = (e) => {
       const t = e.target;
@@ -218,42 +275,43 @@ var SelectInner = (props, forwardedRef) => {
     document.addEventListener("mousedown", h);
     return () => document.removeEventListener("mousedown", h);
   }, [menuRef, open, setOpen, triggerRef]);
-  React__namespace.useEffect(() => {
+  React2__namespace.useEffect(() => {
     if (open && mergedSearchable) {
       requestAnimationFrame(() => searchRef.current?.focus());
     }
     if (!open) setActiveIdx(-1);
   }, [open, mergedSearchable]);
-  const orderedItems = React__namespace.useMemo(
+  const orderedItems = React2__namespace.useMemo(
     () => prioritizePinnedGroups(options),
     [options]
   );
-  const allFlat = React__namespace.useMemo(() => flatten(orderedItems), [orderedItems]);
-  const optionByValue = React__namespace.useMemo(() => {
+  const allFlat = React2__namespace.useMemo(() => flatten(orderedItems), [orderedItems]);
+  const optionByValue = React2__namespace.useMemo(() => {
     const index = /* @__PURE__ */ new Map();
     allFlat.forEach((option) => index.set(option.value, option));
     return index;
   }, [allFlat]);
-  const selectedOptionCacheRef = React__namespace.useRef(/* @__PURE__ */ new Map());
-  React__namespace.useEffect(() => {
+  const selectedOptionCacheRef = React2__namespace.useRef(/* @__PURE__ */ new Map());
+  React2__namespace.useEffect(() => {
     selectedValues.forEach((selectedValue) => {
       const option = optionByValue.get(selectedValue);
       if (option) selectedOptionCacheRef.current.set(selectedValue, option);
     });
   }, [optionByValue, selectedValues]);
-  const selectedOptions = React__namespace.useMemo(
+  const selectedOptions = React2__namespace.useMemo(
     () => selectedValues.map(
       (selectedValue) => optionByValue.get(selectedValue) ?? selectedOptionCacheRef.current.get(selectedValue)
     ).filter((option) => option !== void 0),
     [optionByValue, selectedValues]
   );
-  const filteredFlat = React__namespace.useMemo(() => {
+  const responsiveLayout = useResponsiveTags(responsiveTags, selectedOptions, hasInlineSearch);
+  const filteredFlat = React2__namespace.useMemo(() => {
     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(searchValue, o));
   }, [allFlat, filterOption, optionFilterProp, searchValue]);
-  const filteredItems = React__namespace.useMemo(() => {
+  const filteredItems = React2__namespace.useMemo(() => {
     if (!searchValue.trim()) {
       return orderedItems.filter((item) => !isGroup(item) || item.options.length > 0);
     }
@@ -265,7 +323,7 @@ var SelectInner = (props, forwardedRef) => {
       return kept.length ? { ...it, options: kept } : null;
     }).filter((x) => x !== null);
   }, [orderedItems, filteredFlat, searchValue]);
-  React__namespace.useEffect(() => {
+  React2__namespace.useEffect(() => {
     setActiveIdx((current) => {
       if (current >= 0 && current < filteredFlat.length && !isOptionDisabled(filteredFlat[current])) {
         return current;
@@ -379,7 +437,7 @@ var SelectInner = (props, forwardedRef) => {
         "data-inline-size": multiHasSelection ? "content" : "fill",
         type: "search",
         value: searchValue,
-        style: multiHasSelection ? { width: `${Math.min(Math.max(searchDisplayWidth + 1, 2), 32)}ch` } : void 0,
+        style: responsiveTags ? { width: responsiveLayout.inputWidth } : 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",
@@ -404,16 +462,21 @@ var SelectInner = (props, forwardedRef) => {
   const renderTrigger = () => {
     if (isMulti) {
       const selected = selectedOptions;
-      const max = maxTagCount;
+      const max = typeof maxTagCount === "number" ? maxTagCount : void 0;
       const shown = max != null ? selected.slice(0, max) : selected;
-      const overflow = selected.length - shown.length;
-      if (selected.length === 0 && !hasInlineSearch) {
+      const overflow = selected.length - (responsiveTags ? responsiveLayout.count : shown.length);
+      if (selected.length === 0 && !hasInlineSearch && !responsiveTags) {
         return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "placeholder", children: placeholder });
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(chunkV6BLBIY6_cjs.InternalComponentThemePart, { components: "Tag", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "select-tags", children: [
-        shown.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(chunkV6BLBIY6_cjs.InternalComponentThemePart, { components: "Tag", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "select-tags", ref: responsiveLayout.tagsRef, children: [
+        selected.length === 0 && !hasInlineSearch && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "placeholder", children: placeholder }),
+        shown.map((o, index) => /* @__PURE__ */ jsxRuntime.jsx(
           chunkVNP5WB6M_cjs.Tag,
           {
+            "data-select-tag": responsiveTags ? "" : void 0,
+            "data-collapsed": responsiveTags && index >= responsiveLayout.count ? "true" : void 0,
+            "aria-hidden": responsiveTags && index >= responsiveLayout.count ? true : void 0,
+            ...responsiveTags && index >= responsiveLayout.count ? { inert: "" } : {},
             tone: "accent",
             removable: !disabled,
             onRemove: () => removeMultiValue(o.value),
@@ -430,7 +493,14 @@ var SelectInner = (props, forwardedRef) => {
           "+",
           overflow
         ] }),
-        renderInlineSearchInput()
+        renderInlineSearchInput(),
+        responsiveTags && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "select-tag-measurements", "aria-hidden": "true", ...{ inert: "" }, children: [
+          selected.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(chunkVNP5WB6M_cjs.Tag, { tone: "neutral", "data-select-overflow": "", children: [
+            "+",
+            index + 1
+          ] }, String(option.value))),
+          hasInlineSearch && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "select-search-measure", children: searchValue || "\u200B" })
+        ] })
       ] }) });
     }
     if (showsInlineSearchInput) return renderInlineSearchInput();
@@ -446,6 +516,24 @@ var SelectInner = (props, forwardedRef) => {
   };
   const hasSelection = isMulti ? multiValue.length > 0 : singleValue != null;
   const showClear = mergedClearable && hasSelection && !disabled;
+  const renderClearButton = () => showClear && /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: "select-clear",
+      "aria-label": "Clear",
+      onPointerDown: (event) => event.stopPropagation(),
+      onMouseDown: (event) => {
+        if (hasInlineSearch) event.preventDefault();
+        event.stopPropagation();
+      },
+      onClick: (event) => {
+        event.stopPropagation();
+        clearAll();
+      },
+      children: mergedClearIcon ?? /* @__PURE__ */ jsxRuntime.jsx(chunkVDVKY2IX_cjs.Icon, { name: "x", size: 12 })
+    }
+  );
   let renderIdx = -1;
   const renderOption = (o, groupPinned = false) => {
     renderIdx += 1;
@@ -505,7 +593,7 @@ var SelectInner = (props, forwardedRef) => {
     );
   };
   const renderMenuItems = (items) => items.map(
-    (item, groupIndex) => isGroup(item) ? /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+    (item, groupIndex) => isGroup(item) ? /* @__PURE__ */ jsxRuntime.jsxs(React2__namespace.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "menu-group-label", children: item.label }),
       item.options.map((option) => renderOption(option, !!item.pinned))
     ] }, `g-${groupIndex}-${item.pinned ? "pinned" : "regular"}`) : renderOption(item)
@@ -529,7 +617,7 @@ var SelectInner = (props, forwardedRef) => {
     {
       ref: setTriggerRef,
       ...rest,
-      className: `select ${size} ${isMulti ? "multi" : ""} ${hasInlineSearch ? "searchable" : ""} ${open ? "open" : ""} ${disabled ? "disabled" : ""} ${invalid ? "invalid" : ""} ${className}`,
+      className: `select ${size} ${isMulti ? "multi" : ""} ${responsiveTags ? "responsive" : ""} ${hasInlineSearch ? "searchable" : ""} ${open ? "open" : ""} ${disabled ? "disabled" : ""} ${invalid ? "invalid" : ""} ${className}`,
       onKeyDown: (e) => {
         onRootKeyDown?.(e);
         const target = e.target;
@@ -576,28 +664,12 @@ var SelectInner = (props, forwardedRef) => {
             "aria-activedescendant": showsInlineSearchInput ? void 0 : open && activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
             children: [
               renderTrigger(),
+              responsiveTags && renderClearButton(),
               /* @__PURE__ */ jsxRuntime.jsx(chunkVDVKY2IX_cjs.Icon, { name: "chevDown", size: 14, className: "select-caret" })
             ]
           }
         ),
-        showClear && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: "select-clear",
-            "aria-label": "Clear",
-            onPointerDown: (event) => event.stopPropagation(),
-            onMouseDown: (event) => {
-              if (hasInlineSearch) event.preventDefault();
-              event.stopPropagation();
-            },
-            onClick: (event) => {
-              event.stopPropagation();
-              clearAll();
-            },
-            children: mergedClearIcon ?? /* @__PURE__ */ jsxRuntime.jsx(chunkVDVKY2IX_cjs.Icon, { name: "x", size: 12 })
-          }
-        ),
+        !responsiveTags && renderClearButton(),
         open && portalContainer && reactDom.createPortal(
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -636,7 +708,7 @@ var SelectInner = (props, forwardedRef) => {
     }
   );
 };
-var SelectBase = React__namespace.forwardRef(SelectInner);
+var SelectBase = React2__namespace.forwardRef(SelectInner);
 SelectBase.displayName = "Select";
 var Select = chunkV6BLBIY6_cjs.withComponentTheme(
   SelectBase,

package/dist/{chunk-EBU3DTUN.cjs → chunk-A5MLLFKT.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk7RYLV5CM_cjs = require('./chunk-7RYLV5CM.cjs');
+var chunk562P5YMO_cjs = require('./chunk-562P5YMO.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(
-        chunk7RYLV5CM_cjs.Select,
+        chunk562P5YMO_cjs.Select,
         {
           value: normalizedPageSize,
           size: "sm",

package/dist/{chunk-P3ZIABMZ.cjs → chunk-G5ENSJBS.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkEBU3DTUN_cjs = require('./chunk-EBU3DTUN.cjs');
+var chunkA5MLLFKT_cjs = require('./chunk-A5MLLFKT.cjs');
 var chunkKPBZKHCS_cjs = require('./chunk-KPBZKHCS.cjs');
 var chunkFJB3243S_cjs = require('./chunk-FJB3243S.cjs');
 var chunkHSDMJUB6_cjs = require('./chunk-HSDMJUB6.cjs');
@@ -503,7 +503,7 @@ var TableInner = ({
       }
     ),
     pagEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-pagination", children: /* @__PURE__ */ jsxRuntime.jsx(chunkV6BLBIY6_cjs.InternalComponentThemePart, { components: "Pagination", children: /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEBU3DTUN_cjs.Pagination,
+      chunkA5MLLFKT_cjs.Pagination,
       {
         total: totalCount,
         pageSize: curPageSize,

package/dist/{chunk-AFYNTVSH.js → chunk-OKGODC5A.js}

@@ -6,11 +6,67 @@ import { withComponentTheme, useComponentPortalTheme, InternalComponentThemePart
 import { usePortalContainer } from './chunk-CPVUDSIY.js';
 import './tokens-223RYVVS.css';
 import './shared-NJHRNLRH.css';
-import './Select-UTNBARSQ.css';
-import * as React from 'react';
+import './Select-M3HCB3PW.css';
+import * as React2 from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React2.useLayoutEffect : React2.useEffect;
+function measureResponsiveTags(container) {
+  const availableWidth = container.getBoundingClientRect().width;
+  if (availableWidth <= 0) return void 0;
+  const tags = Array.from(container.querySelectorAll("[data-select-tag]"));
+  const overflows = Array.from(container.querySelectorAll("[data-select-overflow]"));
+  const search = container.querySelector(".select-search-measure");
+  const gap = parseFloat(getComputedStyle(container).columnGap) || 0;
+  const tagWidths = tags.map((tag) => tag.getBoundingClientRect().width);
+  const overflowWidths = [0, ...overflows.map((tag) => tag.getBoundingClientRect().width)];
+  const inputWidth = search ? Math.min(search.getBoundingClientRect().width, Math.max(
+    0,
+    availableWidth - (overflowWidths[tags.length] ?? 0) - (tags.length > 0 ? gap : 0)
+  )) : 0;
+  let count = 0;
+  let prefixWidth = 0;
+  for (let index = 0; index <= tags.length; index += 1) {
+    const remaining = tags.length - index;
+    const itemCount = index + (remaining > 0 ? 1 : 0) + (search ? 1 : 0);
+    const width = prefixWidth + (overflowWidths[remaining] ?? 0) + inputWidth + Math.max(0, itemCount - 1) * gap;
+    if (width <= availableWidth) count = index;
+    prefixWidth += tagWidths[index] ?? 0;
+  }
+  return { count, inputWidth };
+}
+function useResponsiveTags(enabled, items, searchable) {
+  const tagsRef = React2.useRef(null);
+  const [layout, setLayout] = React2.useState({ count: 0, inputWidth: 0 });
+  const measure = React2.useCallback(() => {
+    if (!tagsRef.current) return;
+    const next = measureResponsiveTags(tagsRef.current);
+    if (next) setLayout((previous) => previous.count === next.count && previous.inputWidth === next.inputWidth ? previous : next);
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (enabled) measure();
+  });
+  useIsomorphicLayoutEffect(() => {
+    const container = tagsRef.current;
+    if (!enabled || !container) return;
+    let frame = 0;
+    const scheduleMeasure = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    };
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleMeasure) : void 0;
+    observer?.observe(container);
+    container.querySelectorAll("[data-select-tag], [data-select-overflow], .select-search-measure").forEach((element) => observer?.observe(element));
+    window.addEventListener("resize", scheduleMeasure);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", scheduleMeasure);
+      cancelAnimationFrame(frame);
+    };
+  }, [enabled, items, searchable, measure]);
+  return { tagsRef, count: Math.min(layout.count, items.length), inputWidth: layout.inputWidth };
+}
 var isGroup = (it) => Array.isArray(it.options);
 var flatten = (items) => items.flatMap((it) => isGroup(it) ? it.options : [it]);
 var prioritizePinnedGroups = (items) => {
@@ -89,21 +145,22 @@ var SelectInner = (props, forwardedRef) => {
     ...rest
   } = props;
   const isMulti = multiple === true;
+  const responsiveTags = isMulti && maxTagCount === "responsive";
   const mergedClearable = clearable ?? !!allowClear;
   const mergedClearIcon = typeof allowClear === "object" ? allowClear.clearIcon : void 0;
   const mergedSearchable = searchable ?? !!showSearch;
   const mergedListHeight = Number.isFinite(listHeight) && listHeight > 0 ? listHeight : 260;
   const mergedMenuClassName = [menuClassName, popupClassName, dropdownClassName].filter(Boolean).join(" ");
-  const [innerSingle, setInnerSingle] = React.useState(
+  const [innerSingle, setInnerSingle] = React2.useState(
     !isMulti ? props.defaultValue : void 0
   );
-  const [innerMulti, setInnerMulti] = React.useState(
+  const [innerMulti, setInnerMulti] = React2.useState(
     isMulti && Array.isArray(props.defaultValue) ? props.defaultValue : []
   );
-  const [innerOpen, setInnerOpen] = React.useState(defaultOpen ?? false);
-  const [innerSearchValue, setInnerSearchValue] = React.useState(defaultSearchValue ?? "");
-  const [activeIdx, setActiveIdx] = React.useState(-1);
-  const searchRef = React.useRef(null);
+  const [innerOpen, setInnerOpen] = React2.useState(defaultOpen ?? false);
+  const [innerSearchValue, setInnerSearchValue] = React2.useState(defaultSearchValue ?? "");
+  const [activeIdx, setActiveIdx] = React2.useState(-1);
+  const searchRef = React2.useRef(null);
   const portalContainer = usePortalContainer();
   const portalTheme = useComponentPortalTheme([
     "Select",
@@ -116,26 +173,26 @@ var SelectInner = (props, forwardedRef) => {
     (styleValue) => styleValue?.width != null || styleValue?.minWidth != null || styleValue?.maxWidth != null
   );
   const resolvedPopupWidth = popupStyle?.width ?? themedPopupStyle?.width;
-  const listboxId = React.useId();
+  const listboxId = React2.useId();
   const openControlled = openProp !== void 0;
   const requestedOpen = openControlled ? openProp : innerOpen;
   const open = !disabled && requestedOpen;
-  const requestedOpenRef = React.useRef(requestedOpen);
+  const requestedOpenRef = React2.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) => {
+  const updateSearchValue = React2.useCallback((nextValue) => {
     if (!searchControlled) setInnerSearchValue(nextValue);
     onSearch?.(nextValue);
   }, [onSearch, searchControlled]);
-  const resetSearchValue = React.useCallback(() => {
+  const resetSearchValue = React2.useCallback(() => {
     if (!searchValue) return;
     if (!searchControlled) setInnerSearchValue("");
     onSearch?.("");
   }, [onSearch, searchControlled, searchValue]);
-  const setOpen = React.useCallback((nextOpen) => {
+  const setOpen = React2.useCallback((nextOpen) => {
     if (disabled && nextOpen) return;
     if (nextOpen === requestedOpenRef.current) return;
     requestedOpenRef.current = nextOpen;
@@ -143,7 +200,7 @@ var SelectInner = (props, forwardedRef) => {
     onOpenChange?.(nextOpen);
     if (!nextOpen) resetSearchValue();
   }, [disabled, onOpenChange, openControlled, resetSearchValue]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!disabled || openControlled || !innerOpen) return;
     setInnerOpen(false);
     onOpenChange?.(false);
@@ -163,7 +220,7 @@ var SelectInner = (props, forwardedRef) => {
     onEscape: () => setOpen(false),
     restoreFocus: true
   });
-  const setTriggerRef = React.useCallback(
+  const setTriggerRef = React2.useCallback(
     (node) => {
       triggerRef.current = node;
       if (typeof forwardedRef === "function") forwardedRef(node);
@@ -176,16 +233,16 @@ var SelectInner = (props, forwardedRef) => {
   const singleValue = singleControlled ? props.value : innerSingle;
   const controlledMultiValue = props.value;
   const multiValue = multiControlled ? Array.isArray(controlledMultiValue) ? controlledMultiValue : [] : innerMulti;
-  const selectedValues = React.useMemo(
+  const selectedValues = React2.useMemo(
     () => isMulti ? multiValue : singleValue !== void 0 ? [singleValue] : [],
     [isMulti, multiValue, singleValue]
   );
   const selectionLimit = maxCount !== void 0 && Number.isFinite(maxCount) ? Math.max(0, Math.floor(maxCount)) : void 0;
-  const isOptionDisabled = React.useCallback((option) => {
+  const isOptionDisabled = React2.useCallback((option) => {
     const selected = selectedValues.includes(option.value);
     return !!option.disabled || !!getOptionDisabled?.(option, selectedValues) || isMulti && !selected && selectionLimit !== void 0 && selectedValues.length >= selectionLimit;
   }, [getOptionDisabled, isMulti, selectedValues, selectionLimit]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!open) return;
     const h = (e) => {
       const t = e.target;
@@ -196,42 +253,43 @@ var SelectInner = (props, forwardedRef) => {
     document.addEventListener("mousedown", h);
     return () => document.removeEventListener("mousedown", h);
   }, [menuRef, open, setOpen, triggerRef]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (open && mergedSearchable) {
       requestAnimationFrame(() => searchRef.current?.focus());
     }
     if (!open) setActiveIdx(-1);
   }, [open, mergedSearchable]);
-  const orderedItems = React.useMemo(
+  const orderedItems = React2.useMemo(
     () => prioritizePinnedGroups(options),
     [options]
   );
-  const allFlat = React.useMemo(() => flatten(orderedItems), [orderedItems]);
-  const optionByValue = React.useMemo(() => {
+  const allFlat = React2.useMemo(() => flatten(orderedItems), [orderedItems]);
+  const optionByValue = React2.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(() => {
+  const selectedOptionCacheRef = React2.useRef(/* @__PURE__ */ new Map());
+  React2.useEffect(() => {
     selectedValues.forEach((selectedValue) => {
       const option = optionByValue.get(selectedValue);
       if (option) selectedOptionCacheRef.current.set(selectedValue, option);
     });
   }, [optionByValue, selectedValues]);
-  const selectedOptions = React.useMemo(
+  const selectedOptions = React2.useMemo(
     () => selectedValues.map(
       (selectedValue) => optionByValue.get(selectedValue) ?? selectedOptionCacheRef.current.get(selectedValue)
     ).filter((option) => option !== void 0),
     [optionByValue, selectedValues]
   );
-  const filteredFlat = React.useMemo(() => {
+  const responsiveLayout = useResponsiveTags(responsiveTags, selectedOptions, hasInlineSearch);
+  const filteredFlat = React2.useMemo(() => {
     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(searchValue, o));
   }, [allFlat, filterOption, optionFilterProp, searchValue]);
-  const filteredItems = React.useMemo(() => {
+  const filteredItems = React2.useMemo(() => {
     if (!searchValue.trim()) {
       return orderedItems.filter((item) => !isGroup(item) || item.options.length > 0);
     }
@@ -243,7 +301,7 @@ var SelectInner = (props, forwardedRef) => {
       return kept.length ? { ...it, options: kept } : null;
     }).filter((x) => x !== null);
   }, [orderedItems, filteredFlat, searchValue]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     setActiveIdx((current) => {
       if (current >= 0 && current < filteredFlat.length && !isOptionDisabled(filteredFlat[current])) {
         return current;
@@ -357,7 +415,7 @@ var SelectInner = (props, forwardedRef) => {
         "data-inline-size": multiHasSelection ? "content" : "fill",
         type: "search",
         value: searchValue,
-        style: multiHasSelection ? { width: `${Math.min(Math.max(searchDisplayWidth + 1, 2), 32)}ch` } : void 0,
+        style: responsiveTags ? { width: responsiveLayout.inputWidth } : 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",
@@ -382,16 +440,21 @@ var SelectInner = (props, forwardedRef) => {
   const renderTrigger = () => {
     if (isMulti) {
       const selected = selectedOptions;
-      const max = maxTagCount;
+      const max = typeof maxTagCount === "number" ? maxTagCount : void 0;
       const shown = max != null ? selected.slice(0, max) : selected;
-      const overflow = selected.length - shown.length;
-      if (selected.length === 0 && !hasInlineSearch) {
+      const overflow = selected.length - (responsiveTags ? responsiveLayout.count : shown.length);
+      if (selected.length === 0 && !hasInlineSearch && !responsiveTags) {
         return /* @__PURE__ */ jsx("span", { className: "placeholder", children: placeholder });
       }
-      return /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Tag", children: /* @__PURE__ */ jsxs("span", { className: "select-tags", children: [
-        shown.map((o) => /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Tag", children: /* @__PURE__ */ jsxs("span", { className: "select-tags", ref: responsiveLayout.tagsRef, children: [
+        selected.length === 0 && !hasInlineSearch && /* @__PURE__ */ jsx("span", { className: "placeholder", children: placeholder }),
+        shown.map((o, index) => /* @__PURE__ */ jsx(
           Tag,
           {
+            "data-select-tag": responsiveTags ? "" : void 0,
+            "data-collapsed": responsiveTags && index >= responsiveLayout.count ? "true" : void 0,
+            "aria-hidden": responsiveTags && index >= responsiveLayout.count ? true : void 0,
+            ...responsiveTags && index >= responsiveLayout.count ? { inert: "" } : {},
             tone: "accent",
             removable: !disabled,
             onRemove: () => removeMultiValue(o.value),
@@ -408,7 +471,14 @@ var SelectInner = (props, forwardedRef) => {
           "+",
           overflow
         ] }),
-        renderInlineSearchInput()
+        renderInlineSearchInput(),
+        responsiveTags && /* @__PURE__ */ jsxs("span", { className: "select-tag-measurements", "aria-hidden": "true", ...{ inert: "" }, children: [
+          selected.map((option, index) => /* @__PURE__ */ jsxs(Tag, { tone: "neutral", "data-select-overflow": "", children: [
+            "+",
+            index + 1
+          ] }, String(option.value))),
+          hasInlineSearch && /* @__PURE__ */ jsx("span", { className: "select-search-measure", children: searchValue || "\u200B" })
+        ] })
       ] }) });
     }
     if (showsInlineSearchInput) return renderInlineSearchInput();
@@ -424,6 +494,24 @@ var SelectInner = (props, forwardedRef) => {
   };
   const hasSelection = isMulti ? multiValue.length > 0 : singleValue != null;
   const showClear = mergedClearable && hasSelection && !disabled;
+  const renderClearButton = () => showClear && /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "select-clear",
+      "aria-label": "Clear",
+      onPointerDown: (event) => event.stopPropagation(),
+      onMouseDown: (event) => {
+        if (hasInlineSearch) event.preventDefault();
+        event.stopPropagation();
+      },
+      onClick: (event) => {
+        event.stopPropagation();
+        clearAll();
+      },
+      children: mergedClearIcon ?? /* @__PURE__ */ jsx(Icon, { name: "x", size: 12 })
+    }
+  );
   let renderIdx = -1;
   const renderOption = (o, groupPinned = false) => {
     renderIdx += 1;
@@ -483,7 +571,7 @@ var SelectInner = (props, forwardedRef) => {
     );
   };
   const renderMenuItems = (items) => items.map(
-    (item, groupIndex) => isGroup(item) ? /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    (item, groupIndex) => isGroup(item) ? /* @__PURE__ */ jsxs(React2.Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: "menu-group-label", children: item.label }),
       item.options.map((option) => renderOption(option, !!item.pinned))
     ] }, `g-${groupIndex}-${item.pinned ? "pinned" : "regular"}`) : renderOption(item)
@@ -507,7 +595,7 @@ var SelectInner = (props, forwardedRef) => {
     {
       ref: setTriggerRef,
       ...rest,
-      className: `select ${size} ${isMulti ? "multi" : ""} ${hasInlineSearch ? "searchable" : ""} ${open ? "open" : ""} ${disabled ? "disabled" : ""} ${invalid ? "invalid" : ""} ${className}`,
+      className: `select ${size} ${isMulti ? "multi" : ""} ${responsiveTags ? "responsive" : ""} ${hasInlineSearch ? "searchable" : ""} ${open ? "open" : ""} ${disabled ? "disabled" : ""} ${invalid ? "invalid" : ""} ${className}`,
       onKeyDown: (e) => {
         onRootKeyDown?.(e);
         const target = e.target;
@@ -554,28 +642,12 @@ var SelectInner = (props, forwardedRef) => {
             "aria-activedescendant": showsInlineSearchInput ? void 0 : open && activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
             children: [
               renderTrigger(),
+              responsiveTags && renderClearButton(),
               /* @__PURE__ */ jsx(Icon, { name: "chevDown", size: 14, className: "select-caret" })
             ]
           }
         ),
-        showClear && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "select-clear",
-            "aria-label": "Clear",
-            onPointerDown: (event) => event.stopPropagation(),
-            onMouseDown: (event) => {
-              if (hasInlineSearch) event.preventDefault();
-              event.stopPropagation();
-            },
-            onClick: (event) => {
-              event.stopPropagation();
-              clearAll();
-            },
-            children: mergedClearIcon ?? /* @__PURE__ */ jsx(Icon, { name: "x", size: 12 })
-          }
-        ),
+        !responsiveTags && renderClearButton(),
         open && portalContainer && createPortal(
           /* @__PURE__ */ jsx(
             "div",
@@ -614,7 +686,7 @@ var SelectInner = (props, forwardedRef) => {
     }
   );
 };
-var SelectBase = React.forwardRef(SelectInner);
+var SelectBase = React2.forwardRef(SelectInner);
 SelectBase.displayName = "Select";
 var Select = withComponentTheme(
   SelectBase,

package/dist/{chunk-X547KNTP.js → chunk-QITKDNCX.js}

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

package/dist/{chunk-EP7QREID.js → chunk-T422LYTL.js}

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

package/dist/{chunk-5Q2ZYR5Z.cjs → chunk-V6DY7J2Z.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkP3ZIABMZ_cjs = require('./chunk-P3ZIABMZ.cjs');
+var chunkG5ENSJBS_cjs = require('./chunk-G5ENSJBS.cjs');
 var chunkV6BLBIY6_cjs = require('./chunk-V6BLBIY6.cjs');
 require('./tokens-223RYVVS.css');
 require('./shared-NJHRNLRH.css');
@@ -77,7 +77,7 @@ var TableProInner = ({
           actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-toolbar-actions", children: actions })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(chunkV6BLBIY6_cjs.InternalComponentThemePart, { components: "Table", children: /* @__PURE__ */ jsxRuntime.jsx(
-          chunkP3ZIABMZ_cjs.Table,
+          chunkG5ENSJBS_cjs.Table,
           {
             columns,
             data,

package/dist/index.cjs

@@ -3,8 +3,8 @@
 var chunkRXITGNPX_cjs = require('./chunk-RXITGNPX.cjs');
 var chunkXHKSUKKL_cjs = require('./chunk-XHKSUKKL.cjs');
 var chunk3D5RJA7R_cjs = require('./chunk-3D5RJA7R.cjs');
-var chunk5Q2ZYR5Z_cjs = require('./chunk-5Q2ZYR5Z.cjs');
-var chunkP3ZIABMZ_cjs = require('./chunk-P3ZIABMZ.cjs');
+var chunkV6DY7J2Z_cjs = require('./chunk-V6DY7J2Z.cjs');
+var chunkG5ENSJBS_cjs = require('./chunk-G5ENSJBS.cjs');
 var chunkAEY76EAH_cjs = require('./chunk-AEY76EAH.cjs');
 require('./chunk-HYJSMFZA.cjs');
 var chunkAQN3PD24_cjs = require('./chunk-AQN3PD24.cjs');
@@ -20,8 +20,8 @@ var chunk6WEXRX7K_cjs = require('./chunk-6WEXRX7K.cjs');
 var chunkZ6AG7O4B_cjs = require('./chunk-Z6AG7O4B.cjs');
 var chunkTPFY5SKB_cjs = require('./chunk-TPFY5SKB.cjs');
 var chunkSOAGRYM3_cjs = require('./chunk-SOAGRYM3.cjs');
-var chunkEBU3DTUN_cjs = require('./chunk-EBU3DTUN.cjs');
-var chunk7RYLV5CM_cjs = require('./chunk-7RYLV5CM.cjs');
+var chunkA5MLLFKT_cjs = require('./chunk-A5MLLFKT.cjs');
+var chunk562P5YMO_cjs = require('./chunk-562P5YMO.cjs');
 var chunkVNP5WB6M_cjs = require('./chunk-VNP5WB6M.cjs');
 var chunk3J7HOTD6_cjs = require('./chunk-3J7HOTD6.cjs');
 var chunkPYCAGTO7_cjs = require('./chunk-PYCAGTO7.cjs');
@@ -58,7 +58,7 @@ require('./chunk-V6BLBIY6.cjs');
 var chunkI4GJZLJU_cjs = require('./chunk-I4GJZLJU.cjs');
 
 // src/index.ts
-var VERSION = "0.9.3";
+var VERSION = "0.9.4";
 
 Object.defineProperty(exports, "Timeline", {
   enumerable: true,
@@ -90,11 +90,11 @@ Object.defineProperty(exports, "Typography", {
 });
 Object.defineProperty(exports, "TablePro", {
   enumerable: true,
-  get: function () { return chunk5Q2ZYR5Z_cjs.TablePro; }
+  get: function () { return chunkV6DY7J2Z_cjs.TablePro; }
 });
 Object.defineProperty(exports, "Table", {
   enumerable: true,
-  get: function () { return chunkP3ZIABMZ_cjs.Table; }
+  get: function () { return chunkG5ENSJBS_cjs.Table; }
 });
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
@@ -190,11 +190,11 @@ Object.defineProperty(exports, "Modal", {
 });
 Object.defineProperty(exports, "Pagination", {
   enumerable: true,
-  get: function () { return chunkEBU3DTUN_cjs.Pagination; }
+  get: function () { return chunkA5MLLFKT_cjs.Pagination; }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunk7RYLV5CM_cjs.Select; }
+  get: function () { return chunk562P5YMO_cjs.Select; }
 });
 Object.defineProperty(exports, "Tag", {
   enumerable: true,

package/dist/index.d.cts

@@ -54,6 +54,6 @@ import 'react/jsx-runtime';
 import 'react';
 
 /** Package version — bumped by release scripts. */
-declare const VERSION = "0.9.3";
+declare const VERSION = "0.9.4";
 
 export { VERSION };

package/dist/index.d.ts

@@ -54,6 +54,6 @@ import 'react/jsx-runtime';
 import 'react';
 
 /** Package version — bumped by release scripts. */
-declare const VERSION = "0.9.3";
+declare const VERSION = "0.9.4";
 
 export { VERSION };

package/dist/index.js

@@ -1,8 +1,8 @@
 export { Timeline } from './chunk-U7V2FOIM.js';
 export { Tooltip } from './chunk-TALNKJQ2.js';
 export { Link, Paragraph, Text, Title, Typography } from './chunk-2COQYOVG.js';
-export { TablePro } from './chunk-EP7QREID.js';
-export { Table } from './chunk-X547KNTP.js';
+export { TablePro } from './chunk-T422LYTL.js';
+export { Table } from './chunk-QITKDNCX.js';
 export { Tabs } from './chunk-4JANYBXO.js';
 import './chunk-EE7IJ3MB.js';
 export { THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS, ThemePanel } from './chunk-IU6PLLEL.js';
@@ -18,8 +18,8 @@ export { InputNumber } from './chunk-RYF5ADJW.js';
 export { List } from './chunk-LACXN5CI.js';
 export { MessageContainer, ToastContainer, message, toast } from './chunk-2V6RQQRI.js';
 export { Modal } from './chunk-RJCPXAZ3.js';
-export { Pagination } from './chunk-6MT3APJ3.js';
-export { Select } from './chunk-AFYNTVSH.js';
+export { Pagination } from './chunk-3SUMCW2F.js';
+export { Select } from './chunk-OKGODC5A.js';
 export { Tag } from './chunk-OGMI3TO5.js';
 export { Popover } from './chunk-A34P5CU7.js';
 export { Progress } from './chunk-BOBT7JUB.js';
@@ -56,6 +56,6 @@ import './chunk-5HLNFDV4.js';
 export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, DEFAULT_THEME_COLORS, FONT_STACKS, ThemeProvider, applyTheme, componentTokensToStyle, deriveThemeColors, normalizeAccentInput, resolveThemeColorScheme, resolveThemeColors, resolveThemeMode, resolveVisualThemeSnapshot, themeColorsToStyle, themeTokenToKebabCase, useTheme, useThemeOptional, visualThemeToStyle } from './chunk-CPVUDSIY.js';
 
 // src/index.ts
-var VERSION = "0.9.3";
+var VERSION = "0.9.4";
 
 export { VERSION };

package/dist/styles.css

@@ -1777,6 +1777,71 @@ button.collapse-chev {
 }
 .select:hover .select-clear { opacity: 1; }
 .select-clear:hover { color: var(--lmn-select-accent-ink, var(--accent-ink)); box-shadow: var(--lmn-select-neu-shadow-inset, var(--neu-shadow-inset)); }
+/* 自适应模式：控件按真实宽度参与布局，标签区只展示测量后能完整容纳的前缀。 */
+.select.multi.responsive .select-trigger {
+  flex-wrap: nowrap;
+  padding: var(--lmn-select-tag-gap, var(--gap-1)) var(--lmn-select-trigger-padding, var(--gap-2));
+  gap: var(--lmn-select-control-gap, var(--gap-2));
+}
+.select.multi.responsive .select-tags {
+  flex-wrap: nowrap;
+  flex: 1 1 0%;
+  gap: var(--lmn-select-tag-gap, var(--gap-1));
+  position: relative;
+}
+.select.multi.responsive .select-tags > .tag,
+.select-tag-measurements > .tag {
+  flex: none;
+  width: max-content;
+  max-width: var(--lmn-select-tag-max-width, 160px);
+}
+.select.multi.responsive .select-tags > .select-tag-overflow {
+  max-width: none;
+}
+.select.multi.responsive [data-collapsed="true"],
+.select-tag-measurements {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.select-tag-measurements {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.select-tag-measurements > .tag {
+  position: absolute;
+  max-width: none;
+}
+.select-search-measure {
+  display: block;
+  width: max-content;
+  min-width: 2ch;
+  padding-inline: calc(var(--gap-1) / 2);
+  padding-inline-end: calc(var(--gap-1) / 2 + 1ch);
+  white-space: pre;
+  font: inherit;
+}
+.select.multi.responsive .select-search-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  field-sizing: fixed;
+}
+.select.multi.responsive .select-caret,
+.select.multi.responsive .select-clear {
+  position: static;
+  transform: none;
+  flex-shrink: 0;
+}
+.select.multi.responsive.open .select-caret { transform: rotate(180deg); }
+.select.multi.responsive .select-tags > .placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 /* Multi-select menu: leading checkbox per item */
 .menu-check {
   width: 16px;

package/docs/llms/select.md

@@ -27,6 +27,20 @@ multiple + Tag 形式呈现已选项。
 <Select multiple clearable value={tags} onChange={setTags} options={...} />
 ```
 
+### 单行自适应标签折叠
+
+maxTagCount="responsive" 按标签、+N、输入框和按钮的实际占位自动增减展示数量，始终单行。长搜索词在原输入框内横向编辑；折叠不改变完整选值。仅多选启用，数字值与未设置时仍保留原来的数量折叠和换行行为。
+
+```tsx
+<Select
+  multiple searchable allowClear
+  maxTagCount="responsive"
+  style={{ width: 218 }}
+  value={values} onChange={setValues}
+  options={options}
+/>
+```
+
 ### 远程搜索多选
 
 searchable 在单选和多选中都复用选择框本体作为输入；多选 Tag 后的空输入会收缩，不单独占行。选中后保持展开和关键词，业务层负责防抖与迟到结果保护。
@@ -181,7 +195,7 @@ loading 时显示 spinner,emptyContent 自定义空态。
 | onChange | `(value) => void` | — | 变更 |
 | placeholder | `string` | `"请选择…"` | 空选择时的提示文本 |
 | multiple | `boolean` | `false` | 多选 |
-| maxTagCount | `number` | — | 多选时显示的标签数(超出折叠 +N) |
+| maxTagCount | `number | "responsive"` | — | 多选标签展示上限；responsive 按可用宽度动态折叠为 +N 并保持单行，搜索词可横向编辑；不改变选值。数字和未设置时保留既有换行行为 |
 | maxCount | `number` | — | 多选允许的最大选择数；达到上限后禁用未选项 |
 | getOptionDisabled | `(option, selectedValues) => boolean` | — | 基于候选项和当前选择动态判断禁用状态 |
 | searchable | `boolean` | `false` | 在选择框本体内启用搜索，单选和多选共用同一交互形态 |

package/docs/llms.md

@@ -3,7 +3,7 @@
 > 拟态风格的 React 18 组件库,目标是 Electron 桌面应用。**写给 AI 编程助手**的按需文档 —— 每个组件单独一个 `.md`,避免一次性读取全部。示例源自 playground 的 demo,可直接复制运行。
 
 - **包名**: `@fangxinyan/lumina`
-- **版本**: `0.9.3`
+- **版本**: `0.9.4`
 - **React 最低版本**: 18
 - **环境**: 带打包器的 React 工程(Vite / Next.js / Webpack / Remix / Electron + Vite 等)
 - **零运行时依赖**: 只依赖 `react` / `react-dom` (peer deps)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fangxinyan/lumina",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "Lumina — Neumorphic component library for Electron & React apps",
   "type": "module",
   "main": "./dist/index.cjs",