@teamix-evo/ui 0.2.0 → 0.3.0

package/src/components/label/label.tsx

@@ -1,11 +1,18 @@
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { Info } from 'lucide-react';
 
 import { cn } from '@/utils/cn';
+import {
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from '@/components/tooltip/tooltip';
 
 const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  'text-xs font-medium leading-8 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
   {
     variants: {
       disabled: {
@@ -29,11 +36,33 @@ export interface LabelProps
    */
   disabled?: boolean;
   /**
-   * 必填标记。`true` 时在 children 后追加红色 `*`(语义来自 design destructive token),
+   * 必填标记。`true` 时在 children 与 info icon **后**追加红色 `*`
+   * (语义来自 design destructive token);顺序为 `文字 ⓘ *`,三者间距 4px。
    * 配合 `aria-required` 在 input 上一起使用以保证可访问性。
    * @default false
    */
   required?: boolean;
+  /**
+   * 辅助说明文本 — 有值时在 label 文字后渲染 info icon + hover tooltip
+   * (对齐 antd `Form.Item.tooltip` 习惯)。
+   */
+  tooltip?: string;
+  /**
+   * Tooltip 弹出方向。
+   * @default 'top'
+   */
+  tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
+  /**
+   * 最大宽度 — 超出时截断省略号。数字单位为 px,字符串直接用作 CSS 值。
+   * 适合长字段名在固定宽度表单中防止换行影响布局。
+   * @default undefined
+   */
+  maxWidth?: number | string;
+  /**
+   * 最小宽度(px) — 防止过度压缩,在响应式布局中保留可读宽度下限。
+   * @default undefined
+   */
+  minWidth?: number;
 }
 
 const Label = React.forwardRef<
@@ -41,25 +70,68 @@ const Label = React.forwardRef<
   LabelProps
 >(
   (
-    { className, disabled = false, required = false, children, ...props },
+    {
+      className,
+      style,
+      disabled = false,
+      required = false,
+      tooltip,
+      tooltipSide = 'top',
+      maxWidth,
+      minWidth,
+      children,
+      ...props
+    },
     ref,
-  ) => (
-    <LabelPrimitive.Root
-      ref={ref}
-      className={cn(labelVariants({ disabled }), className)}
-      {...props}
-    >
-      {children}
-      {required ? (
-        <span
-          className="ml-0.5 text-destructive"
-          aria-hidden="true"
-        >
-          *
+  ) => {
+    const mergedStyle: React.CSSProperties = {
+      ...style,
+      ...(maxWidth !== undefined && {
+        maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
+      }),
+      ...(minWidth !== undefined && { minWidth: `${minWidth}px` }),
+    };
+
+    return (
+      <LabelPrimitive.Root
+        ref={ref}
+        data-required={required ? '' : undefined}
+        style={mergedStyle}
+        className={cn(
+          labelVariants({ disabled }),
+          maxWidth !== undefined && 'truncate',
+          className,
+        )}
+        {...props}
+      >
+        <span className="inline-flex items-center gap-1 align-middle">
+          <span className={cn(maxWidth !== undefined && 'truncate')}>
+            {children}
+          </span>
+          {tooltip ? (
+            <TooltipProvider delayDuration={200}>
+              <TooltipRoot>
+                <TooltipTrigger asChild>
+                  <Info
+                    className="size-3.5 shrink-0 cursor-help text-muted-foreground transition-colors hover:text-foreground"
+                    aria-hidden="true"
+                  />
+                </TooltipTrigger>
+                <TooltipContent side={tooltipSide}>
+                  <p className="max-w-xs text-xs">{tooltip}</p>
+                </TooltipContent>
+              </TooltipRoot>
+            </TooltipProvider>
+          ) : null}
+          {required ? (
+            <span className="shrink-0 text-destructive" aria-hidden="true">
+              *
+            </span>
+          ) : null}
         </span>
-      ) : null}
-    </LabelPrimitive.Root>
-  ),
+      </LabelPrimitive.Root>
+    );
+  },
 );
 Label.displayName = 'Label';
 

package/src/components/masonry/masonry.meta.md

@@ -3,7 +3,7 @@ id: masonry
 name: Masonry
 displayName: 瀑布流
 type: component
-category: layout
+category: deprecated
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
@@ -27,30 +27,26 @@ package: '@teamix-evo/ui'
 ## Props
 
 <!-- auto:props:begin -->
-
-| 名称      | 类型     | 默认值 | 必填 | 说明                                                                                                                                                                                                                                                                           |
-| --------- | -------- | ------ | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `columns` | `number` | `3`    | –    | 列数(antd `columns` 并集) — 固定值或响应式断点配置 `{ default, sm, md, lg, xl }`。 **响应式注意**:本组件用 CSS `column-count`,断点匹配靠 Tailwind `@container` 不便, 简化为 fixed 列数。响应式建议直接在外层包 className(如 `md:columns-3 columns-2`)+ `columns={undefined}`。 |
-| `gap`     | `number` | `16`   | –    | 列间距(像素)。                                                                                                                                                                                                                                                                 |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `columns` | `number` | `3` | – | 列数(antd `columns` 并集) — 固定值或响应式断点配置 `{ default, sm, md, lg, xl }`。 **响应式注意**:本组件用 CSS `column-count`,断点匹配靠 Tailwind `@container` 不便, 简化为 fixed 列数。响应式建议直接在外层包 className(如 `md:columns-3 columns-2`)+ `columns={undefined}`。 |
+| `gap` | `number` | `16` | – | 列间距(像素)。 |
 <!-- auto:props:end -->
 
 ## 依赖
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add masonry` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
 _无 — 本组件不依赖任何 npm 包。_
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

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>
+  ),
+};