@teamix-evo/ui 0.2.0 → 0.4.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 控制。',
+          '⚠️ **已废弃** — 仅 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)

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

@@ -3,7 +3,7 @@ id: mentions
 name: Mentions
 displayName: 提及
 type: component
-category: form
+category: deprecated
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
@@ -25,39 +25,35 @@ package: '@teamix-evo/ui'
 ## Props
 
 <!-- auto:props:begin -->
-
-| 名称           | 类型                                               | 默认值 | 必填 | 说明                                                            |
-| -------------- | -------------------------------------------------- | ------ | ---- | --------------------------------------------------------------- |
-| `options`      | `MentionsOption[]`                                 | –      | ✓    | 候选项(antd `options` 并集)。                                   |
-| `value`        | `string`                                           | –      | –    | 受控值。                                                        |
-| `defaultValue` | `string`                                           | –      | –    | uncontrolled 初值。                                             |
-| `onChange`     | `(value: string) => void`                          | –      | –    | 文本变化回调。                                                  |
-| `prefix`       | `string`                                           | `"@"`  | –    | 触发符(antd `prefix` 并集) — 通常是 `@` 或 `#`。                |
-| `split`        | `string`                                           | `" "`  | –    | 选中候选项后插入文本的尾随分隔(对齐 antd `split` 默认空格)。    |
-| `onSearch`     | `(query: string, prefix: string) => void`          | –      | –    | 用户在 prefix 后输入时的搜索回调,用于业务侧异步刷新 `options`。 |
-| `onSelect`     | `(option: MentionsOption, prefix: string) => void` | –      | –    | 选中候选项时回调。                                              |
-| `rows`         | `number`                                           | `3`    | –    | 文本框尺寸传透传 Textarea(行数)。                               |
-| `disabled`     | `boolean`                                          | –      | –    | 禁用。                                                          |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `options` | `MentionsOption[]` | – | ✓ | 候选项(antd `options` 并集)。 |
+| `value` | `string` | – | – | 受控值。 |
+| `defaultValue` | `string` | – | – | uncontrolled 初值。 |
+| `onChange` | `(value: string) => void` | – | – | 文本变化回调。 |
+| `prefix` | `string` | `"@"` | – | 触发符(antd `prefix` 并集) — 通常是 `@` 或 `#`。 |
+| `split` | `string` | `" "` | – | 选中候选项后插入文本的尾随分隔(对齐 antd `split` 默认空格)。 |
+| `onSearch` | `(query: string, prefix: string) => void` | – | – | 用户在 prefix 后输入时的搜索回调,用于业务侧异步刷新 `options`。 |
+| `onSelect` | `(option: MentionsOption, prefix: string) => void` | – | – | 选中候选项时回调。 |
+| `rows` | `number` | `3` | – | 文本框尺寸传透传 Textarea(行数)。 |
+| `disabled` | `boolean` | – | – | 禁用。 |
 <!-- auto:props:end -->
 
 ## 依赖
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add mentions` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry      | 类型      | 描述                                                   |
-| ---------- | --------- | ------------------------------------------------------ |
-| `cn`       | util      | Tailwind className 合并工具(clsx + tailwind-merge)     |
-| `textarea` | component | 多行文本输入 — shadcn 基底 + antd autoSize / showCount |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| `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 依赖
 
 _无 — 本组件不依赖任何 npm 包。_
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律
@@ -96,3 +92,28 @@ const [opts, setOpts] = React.useState(users);
 
 // 双触发符:@ + # — 当前组件支持单 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。等价 antd `Mentions`。',
+          '⚠️ **已废弃** — 仅 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

@@ -72,7 +72,7 @@ function getTriggerContext(
     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) };
       }
@@ -107,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);
@@ -143,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}`;
@@ -206,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
@@ -220,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

@@ -3,7 +3,7 @@ id: menubar
 name: Menubar
 displayName: 菜单栏
 type: component
-category: navigation
+category: deprecated
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
@@ -29,9 +29,7 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `Menubar`(Root) 的 props。
 
 <!-- auto:props:begin -->
-
 _(组件无 `<Name>Props` interface — props 详见 [`menubar.tsx`](./menubar.tsx))_
-
 <!-- auto:props:end -->
 
 ## 依赖
@@ -39,14 +37,13 @@ _(组件无 `<Name>Props` interface — props 详见 [`menubar.tsx`](./menubar.t
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add menubar` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -55,7 +52,6 @@ _(组件无 `<Name>Props` interface — props 详见 [`menubar.tsx`](./menubar.t
 ```bash
 pnpm add @radix-ui/react-menubar@^1.1.0 lucide-react@^0.460.0
 ```
-
 <!-- auto:deps:end -->
 
 > 完整子组件:`Menubar` / `MenubarMenu` / `MenubarTrigger` / `MenubarContent` / `MenubarItem` / `MenubarCheckboxItem` / `MenubarRadioItem` / `MenubarLabel` / `MenubarSeparator` / `MenubarShortcut` / `MenubarSub` / `MenubarSubTrigger` / `MenubarSubContent` / `MenubarGroup` / `MenubarRadioGroup` / `MenubarPortal`。

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,17 +11,20 @@ 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:
-          '应用顶部菜单栏 — Radix Menubar(macOS 风格)。支持多级子菜单、快捷键、Checkbox/Radio 选项、hover 切换。',
+          '⚠️ **已废弃** — 仅 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。',
       },
     },
   },
@@ -87,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-menu 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-menu-md 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,7 +2,7 @@
 id: native-select
 name: NativeSelect
 type: component
-category: form
+category: deprecated
 since: 0.1.0
 package: '@teamix-evo/ui'
 displayName: 原生下拉
@@ -27,24 +27,21 @@ displayName: 原生下拉
 ## Props
 
 <!-- auto:props:begin -->
-
-| 名称               | 类型     | 默认值 | 必填 | 说明                                                      |
-| ------------------ | -------- | ------ | ---- | --------------------------------------------------------- |
-| `wrapperClassName` | `string` | –      | –    | 容器额外 className(给外层 wrapper,而非 `<select>` 本身)。 |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `wrapperClassName` | `string` | – | – | 容器额外 className(给外层 wrapper,而非 `<select>` 本身)。 |
 <!-- auto:props:end -->
 
 ## 依赖
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add native-select` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -53,7 +50,6 @@ displayName: 原生下拉
 ```bash
 pnpm add lucide-react@^0.460.0
 ```
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

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 新增。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n原生下拉选择 — 原生 `<select>` 元素的样式封装，零 JS 开销，移动端弹起系统 picker，直接参与 form submit。与 Radix `Select` 互为补充：NativeSelect 面向原生 / 移动端友好，Radix Select 面向自定义项 UI / 受控复杂表单。shadcn 2025-10 新增。',
       },
     },
   },
@@ -74,7 +74,7 @@ export const InForm: Story = {
       </NativeSelect>
       <button
         type="submit"
-        className="rounded-md border px-3 py-1 text-sm hover:bg-accent"
+        className="rounded-md border border-border px-3 py-1 text-sm hover:bg-accent"
       >
         提交
       </button>

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

@@ -33,8 +33,8 @@ const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
         ref={ref}
         disabled={disabled}
         className={cn(
-          'flex h-9 w-full appearance-none rounded-md border border-input bg-background py-1 pl-3 pr-8 text-sm shadow-sm',
-          'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+          'flex h-9 w-full appearance-none rounded-md border border-input bg-card py-1 pl-3 pr-8 text-xs shadow-sm',
+          'focus-visible:outline-none hover:border-ring focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/10',
           'disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}