@fangxinyan/lumina 0.9.1 → 0.9.3

package/dist/styles.css

@@ -1689,19 +1689,71 @@ button.collapse-chev {
   flex: 1;
   min-width: 0;
   align-items: center;
+  width: 100%;
 }
 .select.multi .select-trigger > .placeholder {
   padding-left: 6px;
   line-height: calc(var(--ctrl-h) - 8px);
 }
 .select.multi .select-tags > .tag {
-  max-width: 160px;
+  max-width: min(160px, 100%);
+  min-width: 0;
+  flex-shrink: 1;
 }
-.select.multi .select-tags > .tag > span:not(.dot):not(.x) {
+.select.multi .select-tag-label {
+  display: block;
+  min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.select.multi .select-tag-label > * {
+  min-width: 0;
+  max-width: 100%;
+}
+.select.multi .select-tag-overflow {
+  flex-shrink: 0;
+}
+.select.multi.searchable .select-trigger {
+  cursor: text;
+}
+.select-search-input {
+  min-width: 0;
+  height: 24px;
+  padding: 0 2px;
+  border: 0;
+  outline: 0;
+  appearance: none;
+  background: transparent;
+  color: var(--lmn-select-fg, var(--fg));
+  font: inherit;
+  line-height: 24px;
+}
+.select-search-input[data-inline-size="fill"] {
+  flex: 1 1 auto;
+  width: 100%;
+}
+.select-search-input[data-inline-size="content"] {
+  flex: 0 1 auto;
+  min-width: 2ch;
+  max-width: 100%;
+  field-sizing: content;
+}
+.select-search-input::placeholder {
+  color: var(--lmn-select-fg-subtle, var(--fg-subtle));
+}
+.select-search-input::-webkit-search-cancel-button {
+  appearance: none;
+}
+.select-search-input:focus-visible {
+  box-shadow: none;
+}
+.select.searchable:focus-within .select-trigger {
+  box-shadow: var(--lmn-select-neu-shadow-inset, var(--neu-shadow-inset)), 0 0 0 3px var(--lmn-select-accent-glow, var(--accent-glow));
+}
+.select.multi.searchable .select-caret {
+  cursor: pointer;
+}
 .select-clear {
   position: absolute;
   right: 30px;
@@ -1742,14 +1794,6 @@ button.collapse-chev {
   background: var(--lmn-select-accent, var(--accent));
   box-shadow: var(--lmn-select-neu-shadow-control, var(--neu-shadow-control)), 0 1px 4px var(--lmn-select-accent-glow, var(--accent-glow));
 }
-/* Menu search — flush with menu, single subtle separator (no nested frame) */
-.menu-search {
-  display: block;
-  padding: 4px 2px 8px;
-  margin: -2px -2px 4px;
-  border-bottom: 1px solid var(--lmn-select-divider, var(--divider));
-}
-.menu-search .input-wrap { width: 100%; }
 /* Menu state (loading / empty) */
 .menu-state {
   display: flex;

package/docs/llms/select.md

@@ -27,6 +27,43 @@ multiple + Tag 形式呈现已选项。
 <Select multiple clearable value={tags} onChange={setTags} options={...} />
 ```
 
+### 远程搜索多选
+
+searchable 在单选和多选中都复用选择框本体作为输入；多选 Tag 后的空输入会收缩，不单独占行。选中后保持展开和关键词，业务层负责防抖与迟到结果保护。
+
+```tsx
+const [value, setValue] = useState<string[]>([]);
+const [searchValue, setSearchValue] = useState("");
+const [options, setOptions] = useState<SelectOption[]>([]);
+const [loading, setLoading] = useState(false);
+const latestRequest = useRef(0);
+
+useEffect(() => {
+  const requestId = ++latestRequest.current;
+  setLoading(true);
+  const timer = window.setTimeout(() => {
+    void fetchOptions(searchValue).then((nextOptions) => {
+      if (requestId !== latestRequest.current) return;
+      setOptions(nextOptions);
+      setLoading(false);
+    });
+  }, 300);
+  return () => {
+    window.clearTimeout(timer);
+    if (requestId === latestRequest.current) latestRequest.current += 1;
+  };
+}, [searchValue]);
+
+<Select
+  multiple searchable clearable
+  value={value} onChange={setValue}
+  searchValue={searchValue} onSearch={setSearchValue}
+  options={options} loading={loading}
+  filterOption={false}
+  maxTagCount={2}
+/>
+```
+
 ### 数量上限 / 分类限选
 
 maxCount 限制总数；getOptionDisabled 可读取当前选择，实现“一类最多选一个”。
@@ -147,8 +184,10 @@ loading 时显示 spinner,emptyContent 自定义空态。
 | maxTagCount | `number` | — | 多选时显示的标签数(超出折叠 +N) |
 | maxCount | `number` | — | 多选允许的最大选择数；达到上限后禁用未选项 |
 | getOptionDisabled | `(option, selectedValues) => boolean` | — | 基于候选项和当前选择动态判断禁用状态 |
-| searchable | `boolean` | `false` | 可搜索 |
+| searchable | `boolean` | `false` | 在选择框本体内启用搜索，单选和多选共用同一交互形态 |
 | showSearch | `boolean` | `false` | searchable 的等价别名 |
+| searchValue / defaultSearchValue | `string` | — | 受控搜索词 / 非受控初始搜索词；多选 searchable 时输入框位于标签同一触发器内 |
+| onSearch | `(value: string) => void` | — | 搜索词交互变化回调；多选选中不会清空关键词，关闭时清空并回调空字符串 |
 | filterOption | `(input, option) => boolean` | — | 自定义过滤 |
 | optionFilterProp | `"label" | "value" | "text" | string` | — | 默认过滤使用的 option 字段 |
 | clearable | `boolean` | `false` | 显示独立且可访问的清除按钮 |

package/docs/llms.md

@@ -3,7 +3,7 @@
 > 拟态风格的 React 18 组件库,目标是 Electron 桌面应用。**写给 AI 编程助手**的按需文档 —— 每个组件单独一个 `.md`,避免一次性读取全部。示例源自 playground 的 demo,可直接复制运行。
 
 - **包名**: `@fangxinyan/lumina`
-- **版本**: `0.9.1`
+- **版本**: `0.9.3`
 - **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.1",
+  "version": "0.9.3",
   "description": "Lumina — Neumorphic component library for Electron & React apps",
   "type": "module",
   "main": "./dist/index.cjs",