@fangxinyan/lumina 0.9.2 → 0.9.4

package/dist/Pagination.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkQZ2AAQBX_cjs = require('./chunk-QZ2AAQBX.cjs');
-require('./chunk-CDT2QCBL.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 chunkQZ2AAQBX_cjs.Pagination; }
+  get: function () { return chunkA5MLLFKT_cjs.Pagination; }
 });

package/dist/Pagination.js

@@ -1,5 +1,5 @@
-export { Pagination } from './chunk-LZXJN3XA.js';
-import './chunk-MSWWABXP.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-Y3X3ZJTC.css → Select-M3HCB3PW.css}

@@ -139,11 +139,11 @@
   font: inherit;
   line-height: 24px;
 }
-.select-search-input.empty {
+.select-search-input[data-inline-size="fill"] {
   flex: 1 1 auto;
   width: 100%;
 }
-.select-search-input.with-selection {
+.select-search-input[data-inline-size="content"] {
   flex: 0 1 auto;
   min-width: 2ch;
   max-width: 100%;
@@ -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 chunkCDT2QCBL_cjs = require('./chunk-CDT2QCBL.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 chunkCDT2QCBL_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-MSWWABXP.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 chunkMJYMPK5K_cjs = require('./chunk-MJYMPK5K.cjs');
-require('./chunk-QZ2AAQBX.cjs');
-require('./chunk-CDT2QCBL.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 chunkMJYMPK5K_cjs.Table; }
+  get: function () { return chunkG5ENSJBS_cjs.Table; }
 });

package/dist/Table.js

@@ -1,6 +1,6 @@
-export { Table } from './chunk-RM6JIM6O.js';
-import './chunk-LZXJN3XA.js';
-import './chunk-MSWWABXP.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 chunkIDEE7PP5_cjs = require('./chunk-IDEE7PP5.cjs');
-require('./chunk-MJYMPK5K.cjs');
-require('./chunk-QZ2AAQBX.cjs');
-require('./chunk-CDT2QCBL.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 chunkIDEE7PP5_cjs.TablePro; }
+  get: function () { return chunkV6DY7J2Z_cjs.TablePro; }
 });

package/dist/TablePro.js

@@ -1,7 +1,7 @@
-export { TablePro } from './chunk-U3T6RC6U.js';
-import './chunk-RM6JIM6O.js';
-import './chunk-LZXJN3XA.js';
-import './chunk-MSWWABXP.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-LZXJN3XA.js → chunk-3SUMCW2F.js}

@@ -1,4 +1,4 @@
-import { Select } from './chunk-MSWWABXP.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-CDT2QCBL.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-Y3X3ZJTC.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;
@@ -375,10 +433,11 @@ var SelectInner = (props, forwardedRef) => {
       {
         ref: searchRef,
         id: fieldId,
-        className: `select-search-input ${multiHasSelection ? "with-selection" : "empty"}`,
+        className: "select-search-input",
+        "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",
@@ -403,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),
@@ -429,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();
@@ -445,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;
@@ -504,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)
@@ -528,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;
@@ -575,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",
@@ -635,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-QZ2AAQBX.cjs → chunk-A5MLLFKT.cjs}

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