@teamix-evo/ui 0.1.1 → 0.3.0

package/src/components/masonry/masonry.stories.tsx

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Masonry } from './masonry';
 
 const meta: Meta<typeof Masonry> = {
-  title: '布局与容器 · Layout/Masonry',
+  title: '废弃 · Deprecated/Masonry',
   component: Masonry,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '瀑布流 — CSS column-count + break-inside: avoid 的 0 JS 实现(图片墙 / 资讯卡片流 / Dashboard 卡片墙)。等价 antd `Masonry`(v6.0 新)。响应式建议外层 className 控制(`md:columns-3`)。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n瀑布流 — CSS column-count + break-inside: avoid 的 0 JS 实现(图片墙 / 资讯卡片流 / Dashboard 卡片墙)。等价 antd `Masonry`(v6.0 新)。响应式建议外层 className 控制。',
       },
     },
   },
@@ -35,7 +35,7 @@ export const Playground: Story = {
       {cards.map((c) => (
         <div
           key={c.id}
-          className="flex items-center justify-center rounded-md border bg-card text-sm"
+          className="flex items-center justify-center rounded-md border border-border bg-card text-sm"
           style={{ height: c.h }}
         >
           {c.text}({c.h}px)
@@ -55,7 +55,9 @@ export const ColorfulPhotos: Story = {
           className="rounded-md bg-muted text-center text-xs text-muted-foreground"
           style={{
             height: c.h,
-            background: `linear-gradient(135deg, hsl(${(c.id * 30) % 360}, 60%, 70%), hsl(${(c.id * 30 + 60) % 360}, 60%, 50%))`,
+            background: `linear-gradient(135deg, hsl(${
+              (c.id * 30) % 360
+            }, 60%, 70%), hsl(${(c.id * 30 + 60) % 360}, 60%, 50%))`,
           }}
         >
           <span className="block py-2 text-white/90">photo {c.id + 1}</span>

package/src/components/masonry/masonry.tsx

@@ -44,6 +44,7 @@ const Masonry = React.forwardRef<HTMLDivElement, MasonryProps>(
         {items.map((child, i) => (
           <div
             key={i}
+            // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- runtime CSS var driven by `gap` prop; consumes per-instance var, not tokenizable.
             className="mb-[var(--masonry-gap)] break-inside-avoid"
             style={{ ['--masonry-gap' as string]: `${gap}px` }}
           >

package/src/components/mentions/mentions.meta.md

@@ -1,13 +1,14 @@
 ---
 id: mentions
 name: Mentions
+displayName: 提及
 type: component
-category: form
+category: deprecated
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Mentions
+# Mentions 提及
 
 @提及 — antd 独有补足。在 Textarea 中输入 `@`(或自定义 `prefix`)即弹出候选下拉,选中后插入 `@name `。键盘 ↑↓ 切换、Enter / Tab 选中、Esc 关闭。**异步候选**用 `onSearch(query)` 由消费方刷新 `options`。
 
@@ -21,6 +22,8 @@ package: "@teamix-evo/ui"
 - 全字段候选(下拉选单)→ `Select` / `Combobox`
 - 仅是搜索输入 → `Input` + 业务侧自渲染建议列表
 
+## Props
+
 <!-- auto:props:begin -->
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
@@ -36,6 +39,8 @@ package: "@teamix-evo/ui"
 | `disabled` | `boolean` | – | – | 禁用。 |
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
 ### 同库依赖
 
@@ -44,7 +49,7 @@ package: "@teamix-evo/ui"
 | Entry | 类型 | 描述 |
 | --- | --- | --- |
 | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `textarea` | component | 多行文本输入 — shadcn 基底 + antd autoSize / showCount |
+| `input` | component | 文本输入合集 — Input(单行 + prefix/suffix/clearable/showCount/addonBefore/addonAfter/size)+ Textarea(多行 + autoSize)+ InputGroup 系列(InputGroupAddon / InputGroupInput / InputGroupTextarea)三件合一,size 与 Button 同档(sm 24 / md 32 / lg 36) |
 
 ### npm 依赖
 
@@ -73,7 +78,7 @@ const users = [
 ];
 
 // 静态候选
-<Mentions options={users} placeholder="输入 @ 提及同事..." />
+<Mentions options={users} placeholder="输入 @ 提及同事..." />;
 
 // 异步候选
 const [opts, setOpts] = React.useState(users);
@@ -83,7 +88,32 @@ const [opts, setOpts] = React.useState(users);
     const list = await fetchUsers(q);
     setOpts(list);
   }}
-/>
+/>;
 
 // 双触发符:@ + # — 当前组件支持单 prefix,如需多触发请实例化两个 Mentions
 ```
+
+---
+
+## Mentions 形态 — 旧库无此组件
+
+> 旧库(hybridcloud)不含 Mentions;本组件为**新库独有**,对齐 antd `Mentions` API 形态。
+> 基于内置 Textarea + 自绘候选列表(无 portal);用 `prefix` 触发、`onSearch` 异步刷新、`onSelect` 埋点。
+
+### antd Mentions 对齐表
+
+| antd prop           | 新库 prop          | 备注                                    |
+| ------------------- | ------------------ | --------------------------------------- |
+| `options`           | `options`          | 结构一致 `{ value, label?, disabled? }` |
+| `prefix`            | `prefix`           | 触发符,单字符                           |
+| `split`             | `split`            | 选中后尾随分隔,默认空格                 |
+| `onSearch`          | `onSearch`         | 异步刷新回调                            |
+| `onSelect`          | `onSelect`         | 选中回调                                |
+| `value / onChange`  | `value / onChange` | 受控模式                                |
+| `defaultValue`      | `defaultValue`     | 非受控初值                              |
+| `disabled`          | `disabled`         | 整组禁用                                |
+| `rows`              | `rows`             | Textarea 行数(默认 3)                   |
+| `placement`         | 不支持             | 固定 bottom-left(级联层级场景不需调整)  |
+| `getPopupContainer` | 不支持             | 无 portal,列表就在组件内 relative 定位  |
+| `filterOption`      | 内置 includes      | 如需自定义过滤逻辑,请在 onSearch 中做   |
+| `validateSearch`    | 不支持             | 低频                                    |

package/src/components/mentions/mentions.stories.tsx

@@ -1,22 +1,24 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Mentions } from './mentions';
 
 const meta: Meta<typeof Mentions> = {
-  title: '表单与输入 · Form/Mentions',
+  title: '废弃 · Deprecated/Mentions',
   component: Mentions,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '@提及输入 — Textarea + @ 触发候选下拉(评论 @ 同事、# 话题)。↑↓ 切换、Enter / Tab 选中、Esc 关闭。异步候选用 onSearch 由消费方刷新 options。视觉走 OpenTrek tokens,等价 antd `Mentions`,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n提及输入 —— 在多行文本中输入触发符(`@` / `#` / `/` 等)即弹出候选下拉,选中后插入 `@name<split>`,用于评论 @ 同事、# 话题、/ 命令等场景。基于 `Textarea` + 自定义 portal-less 候选层,等价 antd `Mentions`:`options` 候选、`prefix` 触发符、`split` 分隔、`onSearch` 异步刷新、`onSelect` 选中回调。键盘 ↑↓ 切换、Enter / Tab 选中、Esc 关闭;email 类 `a@b` 不会误触(触发符前必须为空白或行首)。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
       },
     },
   },
   argTypes: {
     prefix: { control: 'text' },
     placeholder: { control: 'text' },
+    rows: { control: { type: 'number', min: 1, max: 10 } },
+    disabled: { control: 'boolean' },
   },
 };
 
@@ -31,11 +33,27 @@ const users = [
 ];
 
 export const Playground: Story = {
-  args: { placeholder: '输入 @ 提及同事...', options: users },
+  args: { placeholder: '输入 @ 提及同事...', options: users, rows: 3 },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '基础 @提及 —— 输入 `@` 触发,候选从 `options` 中按 query 过滤;键盘 ↑↓ + Enter 选中,Esc 关闭。',
+      },
+    },
+  },
 };
 
 export const HashtagPrefix: Story = {
-  parameters: { controls: { disable: true } },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '自定义前缀 —— `prefix="#"` 用于话题标签场景。`prefix` 必须是单字符,多字符会与正文混淆。',
+      },
+    },
+  },
   render: () => (
     <Mentions
       options={[
@@ -49,8 +67,35 @@ export const HashtagPrefix: Story = {
   ),
 };
 
+export const Multiline: Story = {
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '多行场景 —— `rows={6}` 给到更长的输入区域。Enter 在候选打开时被消费(选中候选);候选关闭时回归原生换行 —— 这是预期行为。',
+      },
+    },
+  },
+  render: () => (
+    <Mentions
+      options={users}
+      rows={6}
+      placeholder={'多行评论:\n第一行...\n第二行 @ 提及同事...\n回车在候选打开时是"选中",关闭时是"换行"。'}
+    />
+  ),
+};
+
 export const AsyncSearch: Story = {
-  parameters: { controls: { disable: true } },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '异步候选 —— `onSearch(query, prefix)` 由消费侧拉接口刷新 `options`(组件不内置网络层)。下方实时显示当前候选数。',
+      },
+    },
+  },
   render: () => {
     const [opts, setOpts] = React.useState(users);
     return (
@@ -73,3 +118,72 @@ export const AsyncSearch: Story = {
     );
   },
 };
+
+export const WithOnSelect: Story = {
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'onSelect 回调 —— 在选中候选时记录最后一次选择。注意:`onSelect` 与 `onChange` 互不替代 —— 文本写入由 `onChange` 已经处理,`onSelect` 仅做埋点 / 业务联动。',
+      },
+    },
+  },
+  render: () => {
+    const [picked, setPicked] = React.useState<string | null>(null);
+    return (
+      <div className="flex flex-col gap-2">
+        <Mentions
+          options={users}
+          placeholder="选一个 @ 试试..."
+          onSelect={(opt, prefix) => setPicked(`${prefix}${opt.value}`)}
+        />
+        <div className="text-xs text-muted-foreground">
+          上次选中:{' '}
+          <code className="rounded bg-muted px-1">{picked ?? '(无)'}</code>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const DisabledOption: Story = {
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '禁用候选项 —— 单个 option 的 `disabled` 会让它在下拉中变灰且不可选中(键盘跳过、点击无效)。',
+      },
+    },
+  },
+  render: () => (
+    <Mentions
+      options={[
+        { value: 'alice', label: 'Alice (在线)' },
+        { value: 'bob', label: 'Bob (离线)', disabled: true },
+        { value: 'carol', label: 'Carol (在线)' },
+      ]}
+      placeholder="@ 试试,Bob 不可选..."
+    />
+  ),
+};
+
+export const Disabled: Story = {
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '整组禁用 —— `disabled` 透传 Textarea,既不可输入也不弹出候选。',
+      },
+    },
+  },
+  render: () => (
+    <Mentions
+      options={users}
+      defaultValue="@alice 这个评论已经被锁定..."
+      disabled
+    />
+  ),
+};

package/src/components/mentions/mentions.tsx

@@ -68,10 +68,11 @@ function getTriggerContext(
   // Walk backwards from caret until we hit a whitespace, newline, or `prefix`.
   for (let i = caret - 1; i >= 0; i--) {
     const ch = value[i];
+    if (ch === undefined) return null;
     if (ch === prefix) {
       // The char immediately before prefix must be start-of-string / whitespace / newline,
       // otherwise we'd trigger on emails like a@b.
-      const prev = i === 0 ? '' : value[i - 1];
+      const prev = i === 0 ? '' : value[i - 1] ?? '';
       if (prev === '' || /\s/.test(prev)) {
         return { start: i, query: value.slice(i + 1, caret) };
       }
@@ -106,7 +107,10 @@ const Mentions = React.forwardRef<HTMLTextAreaElement, MentionsProps>(
     const current = isControlled ? value! : internal;
 
     const innerRef = React.useRef<HTMLTextAreaElement | null>(null);
-    React.useImperativeHandle(ref, () => innerRef.current as HTMLTextAreaElement);
+    React.useImperativeHandle(
+      ref,
+      () => innerRef.current as HTMLTextAreaElement,
+    );
 
     const [ctx, setCtx] = React.useState<TriggerCtx | null>(null);
     const [activeIdx, setActiveIdx] = React.useState(0);
@@ -142,7 +146,7 @@ const Mentions = React.forwardRef<HTMLTextAreaElement, MentionsProps>(
       const el = innerRef.current;
       const before = current.slice(0, ctx.start);
       const after = current.slice(
-        (el?.selectionStart ?? ctx.start + 1 + ctx.query.length),
+        el?.selectionStart ?? ctx.start + 1 + ctx.query.length,
       );
       const inserted = `${prefix}${opt.value}${split}`;
       const next = `${before}${inserted}${after}`;
@@ -205,7 +209,7 @@ const Mentions = React.forwardRef<HTMLTextAreaElement, MentionsProps>(
         {ctx && filtered.length > 0 ? (
           <ul
             role="listbox"
-            className="absolute left-0 top-full z-50 mt-1 max-h-60 w-56 overflow-auto rounded-md border bg-popover p-1 text-sm text-popover-foreground shadow-md"
+            className="absolute left-0 top-full z-50 mt-1 max-h-60 w-56 overflow-auto rounded-md border border-border bg-popover p-1 text-xs text-popover-foreground shadow-md"
           >
             {filtered.map((opt, i) => (
               <li
@@ -219,7 +223,9 @@ const Mentions = React.forwardRef<HTMLTextAreaElement, MentionsProps>(
                 onMouseEnter={() => setActiveIdx(i)}
                 className={cn(
                   'cursor-pointer rounded-sm px-2 py-1.5',
-                  i === activeIdx && !opt.disabled && 'bg-accent text-accent-foreground',
+                  i === activeIdx &&
+                    !opt.disabled &&
+                    'bg-accent text-accent-foreground',
                   opt.disabled && 'cursor-not-allowed opacity-50',
                 )}
               >

package/src/components/menubar/menubar.meta.md

@@ -1,13 +1,14 @@
 ---
 id: menubar
 name: Menubar
+displayName: 菜单栏
 type: component
-category: navigation
+category: deprecated
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Menubar
+# Menubar 菜单栏
 
 应用顶部菜单栏 — Radix Menubar(典型 macOS 风格,文件 / 编辑 / 视图 / 帮助)。
 **与 DropdownMenu 区别**:Menubar 是**横排多个一级菜单**,鼠标 hover 切换;DropdownMenu 是单个独立下拉。
@@ -66,17 +67,28 @@ pnpm add @radix-ui/react-menubar@^1.1.0 lucide-react@^0.460.0
 
 ```tsx
 import {
-  Menubar, MenubarMenu, MenubarTrigger, MenubarContent,
-  MenubarItem, MenubarSeparator, MenubarShortcut,
-  MenubarSub, MenubarSubTrigger, MenubarSubContent,
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
 } from '@/components/ui/menubar';
 
 <Menubar>
   <MenubarMenu>
     <MenubarTrigger>文件</MenubarTrigger>
     <MenubarContent>
-      <MenubarItem>新建文件 <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
-      <MenubarItem>打开 <MenubarShortcut>⌘O</MenubarShortcut></MenubarItem>
+      <MenubarItem>
+        新建文件 <MenubarShortcut>⌘N</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>
+        打开 <MenubarShortcut>⌘O</MenubarShortcut>
+      </MenubarItem>
       <MenubarSeparator />
       <MenubarSub>
         <MenubarSubTrigger>分享</MenubarSubTrigger>
@@ -86,15 +98,21 @@ import {
         </MenubarSubContent>
       </MenubarSub>
       <MenubarSeparator />
-      <MenubarItem>退出 <MenubarShortcut>⌘Q</MenubarShortcut></MenubarItem>
+      <MenubarItem>
+        退出 <MenubarShortcut>⌘Q</MenubarShortcut>
+      </MenubarItem>
     </MenubarContent>
   </MenubarMenu>
   <MenubarMenu>
     <MenubarTrigger>编辑</MenubarTrigger>
     <MenubarContent>
-      <MenubarItem>撤销 <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
-      <MenubarItem>重做 <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
+      <MenubarItem>
+        撤销 <MenubarShortcut>⌘Z</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>
+        重做 <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+      </MenubarItem>
     </MenubarContent>
   </MenubarMenu>
-</Menubar>
+</Menubar>;
 ```

package/src/components/menubar/menubar.stories.tsx

@@ -1,4 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Menubar,
   MenubarMenu,
@@ -10,12 +11,23 @@ import {
   MenubarSub,
   MenubarSubTrigger,
   MenubarSubContent,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
 } from './menubar';
 
 const meta: Meta<typeof Menubar> = {
-  title: '导航 · Navigation/Menubar',
+  title: '废弃 · Deprecated/Menubar',
   component: Menubar,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\nMenubar 菜单栏 —— 在桌面应用或编辑器顶部带出 macOS 风格的“文件 / 编辑 / 视图 / 帮助”多一级菜单。Radix `Menubar` 内核 + shadcn 原子，**shadcn 专有、antd 未提供对应原子**，对齐 shadcn 的 `MenubarMenu` / `MenubarTrigger` / `MenubarContent` / `MenubarShortcut` / `MenubarSub` / `MenubarCheckboxItem` / `MenubarRadioItem`。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/tokens`，无 mock。',
+      },
+    },
+  },
 };
 
 export default meta;
@@ -79,3 +91,51 @@ export const Default: Story = {
     </Menubar>
   ),
 };
+
+export const WithCheckboxAndRadio: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [showStatus, setShowStatus] = React.useState(true);
+    const [showActivity, setShowActivity] = React.useState(false);
+    const [profile, setProfile] = React.useState('benoit');
+    return (
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>视图</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem checked={showStatus} onCheckedChange={setShowStatus}>
+              状态栏
+            </MenubarCheckboxItem>
+            <MenubarCheckboxItem checked={showActivity} onCheckedChange={setShowActivity}>
+              活动栏
+            </MenubarCheckboxItem>
+            <MenubarSeparator />
+            <MenubarRadioGroup value={profile} onValueChange={setProfile}>
+              <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+              <MenubarRadioItem value="colm">Colm</MenubarRadioItem>
+              <MenubarRadioItem value="hubert">Hubert</MenubarRadioItem>
+            </MenubarRadioGroup>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+    );
+  },
+};
+
+export const DisabledItems: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>文件</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>新建</MenubarItem>
+          <MenubarItem disabled>从模板新建（即将上线）</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>保存</MenubarItem>
+          <MenubarItem disabled>发布到云端（未设置）</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+};

package/src/components/menubar/menubar.tsx

@@ -21,7 +21,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      'flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-sm',
+      'flex h-9 items-center gap-1 rounded-md border border-border bg-background p-1 shadow-sm',
       className,
     )}
     {...props}
@@ -36,7 +36,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      'flex cursor-pointer select-none items-center rounded-sm px-3 py-1 text-xs font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
       className,
     )}
     {...props}
@@ -53,7 +53,7 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      'flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
       inset && 'pl-8',
       className,
     )}
@@ -72,7 +72,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+      'z-50 min-w-menu overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
       className,
     )}
     {...props}
@@ -95,7 +95,7 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          'z-50 min-w-menu-md overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
           className,
         )}
         {...props}
@@ -114,7 +114,7 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className,
     )}
@@ -130,7 +130,7 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     checked={checked}
@@ -153,7 +153,7 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     {...props}
@@ -177,7 +177,7 @@ const MenubarLabel = React.forwardRef<
   <MenubarPrimitive.Label
     ref={ref}
     className={cn(
-      'px-2 py-1.5 text-sm font-semibold',
+      'px-2 py-1.5 text-xs font-semibold',
       inset && 'pl-8',
       className,
     )}

package/src/components/native-select/native-select.meta.md

@@ -2,12 +2,13 @@
 id: native-select
 name: NativeSelect
 type: component
-category: form
+category: deprecated
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 原生下拉
 ---
 
-# NativeSelect
+# NativeSelect 原生下拉
 
 原生下拉选择 — shadcn 2025-10 新增。**原生 `<select>` 元素**的样式封装,零 JS 开销,移动端弹起系统 picker,直接参与 form `submit`。与 `Select`(Radix)互为补充,分别面向"原生友好"与"可定制项 UI"两种诉求。
 
@@ -23,12 +24,16 @@ package: "@teamix-evo/ui"
 - 需要搜索 / 虚拟列表 / 自定义选项渲染 → `Select`(Radix)/ `Combobox`
 - 多选 → `Select multiple`(原生 multi 体验差)→ 用 Radix 版
 
+## Props
+
 <!-- auto:props:begin -->
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
 | `wrapperClassName` | `string` | – | – | 容器额外 className(给外层 wrapper,而非 `<select>` 本身)。 |
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
 ### 同库依赖
 

package/src/components/native-select/native-select.stories.tsx

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { NativeSelect } from './native-select';
 
 const meta: Meta<typeof NativeSelect> = {
-  title: '表单与输入 · Form/NativeSelect',
+  title: '废弃 · Deprecated/NativeSelect',
   component: NativeSelect,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '原生下拉选择 — 原生 `<select>` 元素的样式封装,零 JS 开销,移动端弹起系统 picker,直接参与 form submit。与 Radix `Select` 互为补充:NativeSelect 面向原生 / 移动端友好,Radix Select 面向自定义项 UI / 受控复杂表单。shadcn 2025-10 新增,等价 antd 体系中无直接对应(antd Select 全用 popup)。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n原生下拉选择 — 原生 `<select>` 元素的样式封装，零 JS 开销，移动端弹起系统 picker，直接参与 form submit。与 Radix `Select` 互为补充：NativeSelect 面向原生 / 移动端友好，Radix Select 面向自定义项 UI / 受控复杂表单。shadcn 2025-10 新增。',
       },
     },
   },
@@ -63,7 +63,7 @@ export const InForm: Story = {
       onSubmit={(e) => {
         e.preventDefault();
         const fd = new FormData(e.currentTarget);
-        // eslint-disable-next-line no-alert
+
         alert(`提交: sort=${fd.get('sort')}`);
       }}
       className="flex items-center gap-2"
@@ -72,7 +72,10 @@ export const InForm: Story = {
         <option value="date">按日期</option>
         <option value="name">按名称</option>
       </NativeSelect>
-      <button type="submit" className="rounded-md border px-3 py-1 text-sm hover:bg-accent">
+      <button
+        type="submit"
+        className="rounded-md border border-border px-3 py-1 text-sm hover:bg-accent"
+      >
         提交
       </button>
     </form>