@teamix-evo/ui 0.1.1 → 0.3.0

package/src/components/alert-dialog/alert-dialog.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   AlertDialog,
   AlertDialogTrigger,
@@ -13,23 +13,60 @@ import {
 import { Button, buttonVariants } from '@/components/button/button';
 
 const meta: Meta<typeof AlertDialogContent> = {
-  title: '反馈与浮层 · Feedback/AlertDialog',
+  title: '反馈 · Feedback/AlertDialog',
   component: AlertDialogContent,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '命令式确认弹窗 — 用于高风险操作(删除、不可恢复变更)的二次确认。基于 Radix AlertDialog，语义角色为 `alertdialog`，自动陷阱焦点 + ESC 关闭；Cancel + Action 双按钮范式对齐 antd `Modal.confirm`。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+          '确认对话框 —— 对高风险、不可逆的操作做二次拦截,强制用户在「确认 / 取消」之间做出选择。基于 Radix AlertDialog 内核(焦点陷阱 + ESC 行为受控 + `role="alertdialog"`)+ 对齐 antd `Modal.confirm` / `Modal.alert` 的双按钮范式(`AlertDialogAction` / `AlertDialogCancel`);视觉上与 `Dialog` 同源(`--radius-dialog` 16px、无 border、纯白 + shadow 分界),`size` 四档绑定 `--layout-dialog-{sm|md|lg|xl}`,默认 `sm`(确认场景信息密度低)。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
       },
     },
   },
+  argTypes: {
+    size: {
+      control: 'inline-radio',
+      options: ['sm', 'md', 'lg', 'xl'],
+      description:
+        '宽度档位,绑定 `--layout-dialog-{sm|md|lg|xl}`(OpenTrek 400/600/800/1200px)',
+    },
+  },
+  args: { size: 'sm' },
 };
 
 export default meta;
 type Story = StoryObj<typeof AlertDialogContent>;
 
+export const Playground: Story = {
+  render: (args) => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">删除项目</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent {...args}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>确认删除项目?</AlertDialogTitle>
+          <AlertDialogDescription>
+            将永久删除 <b>"运营后台"</b> 项目及其下 142 个资源。此操作不可撤销。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction
+            className={buttonVariants({ variant: 'destructive' })}
+          >
+            删除
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};
+
 export const Destructive: Story = {
+  name: '高危删除(destructive)',
+  parameters: { controls: { disable: true } },
   render: () => (
     <AlertDialog>
       <AlertDialogTrigger asChild>
@@ -58,6 +95,7 @@ export const Destructive: Story = {
 };
 
 export const NormalConfirm: Story = {
+  name: '业务确认(primary action)',
   parameters: { controls: { disable: true } },
   render: () => (
     <AlertDialog>
@@ -79,3 +117,107 @@ export const NormalConfirm: Story = {
     </AlertDialog>
   ),
 };
+
+export const AlertOnly: Story = {
+  name: 'Alert(单一确认,模拟 Modal.alert)',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '只展示单个 Action 按钮 — 模拟 antd `Modal.alert` 的单确认形态。适用于"已完成"、"权限不足"等仅需告知的场景。',
+      },
+    },
+  },
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">查看通知</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>升级完成</AlertDialogTitle>
+          <AlertDialogDescription>
+            已切换到企业版,新功能将在下次刷新页面后生效。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction>知道了</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};
+
+export const SizeMatrix: Story = {
+  name: 'Size 档位 · sm / md / lg / xl',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '依次触发四档尺寸 — 确认对话框默认 `sm` 即可,只有当需要列出资源清单 / 影响图谱时才升档。',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      {(['sm', 'md', 'lg', 'xl'] as const).map((size) => (
+        <AlertDialog key={size}>
+          <AlertDialogTrigger asChild>
+            <Button variant="outline">size = {size}</Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent size={size}>
+            <AlertDialogHeader>
+              <AlertDialogTitle>确认操作?({size})</AlertDialogTitle>
+              <AlertDialogDescription>
+                宽度绑定 `--layout-dialog-{size}`,实际像素由当前主题变体的
+                tokens 决定。
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>取消</AlertDialogCancel>
+              <AlertDialogAction>确认</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      ))}
+    </div>
+  ),
+};
+
+export const BorderlessShowcase: Story = {
+  name: '无 border border-border · 16px 圆角',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '与 `Dialog` 同源 — `AlertDialogContent` 已 `border-0`,16px 圆角(`--radius-dialog`)由 tokens 提供。请不要在 `className` 里加 `border *` 或覆盖 `rounded-*`。',
+      },
+    },
+  },
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">释放实例</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>确认释放实例?</AlertDialogTitle>
+          <AlertDialogDescription>
+            释放后实例及挂载数据将无法恢复。请确认已完成数据备份。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction
+            className={buttonVariants({ variant: 'destructive' })}
+          >
+            确认释放
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};

package/src/components/alert-dialog/alert-dialog.tsx

@@ -1,13 +1,25 @@
 import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/utils/cn';
 import { buttonVariants } from '@/components/button/button';
 
 const AlertDialog = AlertDialogPrimitive.Root;
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
+const AlertDialogTrigger = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Trigger
+    ref={ref}
+    className={cn('cursor-pointer', className)}
+    {...props}
+  />
+));
+AlertDialogTrigger.displayName = AlertDialogPrimitive.Trigger.displayName;
+
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
@@ -23,21 +35,53 @@ const AlertDialogOverlay = React.forwardRef<
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
+/**
+ * AlertDialog content 变体 — 与 Dialog 保持同源视觉。
+ * - 圆角 `--radius-dialog`(16px)
+ * - 无 border,纯白 + shadow 作为视觉分界
+ * - size 绑定 `--layout-dialog-{sm|md|lg|xl}` tokens(确认类默认 `sm`,更紧凑)
+ */
+const alertDialogContentVariants = cva(
+  'fixed left-1/2 top-1/2 z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border-0 bg-background p-6 shadow-lg duration-200 rounded-[var(--radius-dialog)] 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',
+  {
+    variants: {
+      size: {
+        sm: 'max-w-[var(--layout-dialog-sm)]',
+        md: 'max-w-[var(--layout-dialog-md)]',
+        lg: 'max-w-[var(--layout-dialog-lg)]',
+        xl: 'max-w-[var(--layout-dialog-xl)]',
+      },
+    },
+    defaultVariants: { size: 'sm' },
+  },
+);
+
+export type AlertDialogSize = NonNullable<
+  VariantProps<typeof alertDialogContentVariants>['size']
+>;
+
 export interface AlertDialogContentProps
-  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {}
+  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>,
+    VariantProps<typeof alertDialogContentVariants> {
+  /**
+   * 确认对话框尺寸 — 绑定 design tokens `--layout-dialog-{sm|md|lg|xl}`。
+   * OpenTrek 基准:sm=400 / md=600 / lg=800 / xl=1200。
+   * 确认场景文案短、信息少,默认 `sm`。
+   * @default "sm"
+   */
+  size?: AlertDialogSize;
+}
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
   AlertDialogContentProps
->(({ className, ...props }, ref) => (
+>(({ className, size = 'sm', ...props }, ref) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
-      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 sm:rounded-lg',
-        className,
-      )}
+      data-slot="dialog-content"
+      className={cn(alertDialogContentVariants({ size }), className)}
       {...props}
     />
   </AlertDialogPortal>
@@ -49,10 +93,7 @@ const AlertDialogHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
-      className,
-    )}
+    className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
     {...props}
   />
 );
@@ -78,6 +119,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
+    data-slot="dialog-title"
     className={cn('text-lg font-semibold', className)}
     {...props}
   />
@@ -90,7 +132,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-xs text-muted-foreground', className)}
     {...props}
   />
 ));
@@ -115,7 +157,11 @@ const AlertDialogCancel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
-    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className,
+    )}
     {...props}
   />
 ));
@@ -133,4 +179,5 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
+  alertDialogContentVariants,
 };

package/src/components/anchor/anchor.meta.md

@@ -1,13 +1,14 @@
 ---
 id: anchor
 name: Anchor
+displayName: 锚点
 type: component
-category: navigation
+category: deprecated
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Anchor
+# Anchor 锚点
 
 锚点导航 — antd 独有补足。**等价 antd `Anchor`**。长文档 / 详情页侧边的目录,点击锚点滚动到对应 `id` 节点,滚动时自动高亮当前可见的锚点(IntersectionObserver)。支持嵌套两层缩进。
 
@@ -23,6 +24,8 @@ package: "@teamix-evo/ui"
 - 主导航(顶部 / 侧栏菜单)→ `NavigationMenu` / `Sidebar`
 - 步骤导航(顺序操作)→ `Steps`
 
+## Props
+
 <!-- auto:props:begin -->
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
@@ -32,6 +35,8 @@ package: "@teamix-evo/ui"
 | `onChange` | `(key: string) => void` | – | – | 当前高亮变化回调。 |
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
 ### 同库依赖
 

package/src/components/anchor/anchor.stories.tsx

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Anchor } from './anchor';
 
 const meta: Meta<typeof Anchor> = {
-  title: '导航 · Navigation/Anchor',
+  title: '废弃 · Deprecated/Anchor',
   component: Anchor,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '锚点导航 — 长文档 / 详情页侧边目录,点击滚动到 id 节点,滚动时 IntersectionObserver 自动高亮。等价 antd `Anchor`。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n锚点导航 — 长文档 / 详情页侧边目录,点击滚动到 id 节点,滚动时 IntersectionObserver 自动高亮。等价 antd `Anchor`。',
       },
     },
   },

package/src/components/anchor/anchor.tsx

@@ -98,7 +98,7 @@ const Anchor = React.forwardRef<HTMLElement, AnchorProps>(
           href={`#${it.key}`}
           onClick={(e) => handleClick(e, it.key)}
           className={cn(
-            'block border-l-2 py-1 pr-2 text-sm transition-colors',
+            'block border-l-2 py-1 pr-2 text-xs transition-colors',
             depth === 0 ? 'pl-3' : depth === 1 ? 'pl-6' : 'pl-9',
             active === it.key
               ? 'border-primary text-primary'
@@ -117,7 +117,7 @@ const Anchor = React.forwardRef<HTMLElement, AnchorProps>(
       <nav
         ref={ref}
         aria-label="目录"
-        className={cn('text-sm', className)}
+        className={cn('text-xs', className)}
         {...props}
       >
         <ul>{items.map((it) => renderItem(it, 0))}</ul>

package/src/components/app/app.meta.md

@@ -2,12 +2,13 @@
 id: app
 name: App
 type: component
-category: shell
+category: deprecated
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 应用容器
 ---
 
-# App
+# App 应用容器
 
 应用根容器 — antd 独有补足。**对标 antd `App`** 的核心职责:挂全局 Toaster + 设置 dir / lang + 承载根级 className。**与 antd 区别**:不接管主题(本库主题靠 design tokens / CSS vars,**不引入 runtime ConfigProvider**),也不收敛 `useApp()` hook(toast / notification 直接 import 即可)。
 
@@ -23,6 +24,8 @@ package: "@teamix-evo/ui"
 - 需要 runtime 切换主题色 → 改 CSS variables(design tokens),**不要**通过 ConfigProvider
 - 单独需要 Toaster → 直接挂 `<Toaster />`
 
+## Props
+
 <!-- auto:props:begin -->
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
@@ -31,6 +34,8 @@ package: "@teamix-evo/ui"
 | `dir` | `'ltr' \| 'rtl'` | `"ltr"` | – | 文字方向 — 设到根容器的 `dir` 属性,Radix 等组件会自动适配。 |
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
 ### 同库依赖
 
@@ -39,7 +44,7 @@ package: "@teamix-evo/ui"
 | Entry | 类型 | 描述 |
 | --- | --- | --- |
 | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `sonner` | component | Toast 通知 — sonner 包装,等价 antd message + notification 并集(toast() 函数式 API + Toaster 容器) |
+| `sonner` | component | Toast 通知 — sonner 包装,等价 antd message + notification 并集(toast() 函数式 API + Toaster 容器,面性 5 状态图标 + 无边框) |
 
 ### npm 依赖
 

package/src/components/app/app.stories.tsx

@@ -1,18 +1,18 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { App } from './app';
 import { Button } from '@/components/button/button';
 import { toast } from '@/components/sonner/sonner';
 import { notification } from '@/components/notification/notification';
 
 const meta: Meta<typeof App> = {
-  title: '应用壳 · Shell/App',
+  title: '废弃 · Deprecated/App',
   component: App,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '应用根容器 — 挂全局 Toaster + 设置 dir / lang + 承载根级 className。对标 antd `App`,但不接管主题(主题靠 design tokens / CSS vars),也不收敛 useApp() hook。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n应用根容器 — 挂全局 Toaster + 设置 dir / lang + 承载根级 className。对标 antd `App`，但不接管主题（主题靠 design tokens / CSS vars），也不收敛 useApp() hook。',
       },
     },
   },
@@ -28,15 +28,17 @@ type Story = StoryObj<typeof App>;
 
 export const Playground: Story = {
   render: (args) => (
-    <App {...args} className="rounded-md border p-6">
+    <App {...args} className="rounded-md border border-border p-6">
       <div className="flex flex-col gap-3">
-        <span className="text-sm text-muted-foreground">App 内挂载了 Toaster,可直接触发:</span>
+        <span className="text-sm text-muted-foreground">
+          App 内挂载了 Toaster,可直接触发:
+        </span>
         <div className="flex gap-2">
           <Button onClick={() => toast.success('已保存')}>触发 toast</Button>
           <Button
             variant="outline"
             onClick={() =>
-              notification.info({
+              notification.primary({
                 title: 'App 容器在生效',
                 description: '右上角 Toaster 是 App 默认挂载的',
               })
@@ -53,7 +55,7 @@ export const Playground: Story = {
 export const RTL: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <App dir="rtl" className="rounded-md border p-6">
+    <App dir="rtl" className="rounded-md border border-border p-6">
       <div className="text-sm">
         当前方向: <strong>rtl</strong> — 你会看到自然的右到左流向
       </div>

package/src/components/aspect-ratio/aspect-ratio.meta.md

@@ -1,13 +1,14 @@
 ---
 id: aspect-ratio
 name: AspectRatio
+displayName: 宽高比
 type: component
-category: foundation
+category: deprecated
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# AspectRatio
+# AspectRatio 宽高比
 
 容器保持宽高比 — 基于 `@radix-ui/react-aspect-ratio`,内部用 padding-bottom 技巧实现,**无 layout shift**。
 shadcn-only,antd 无对标。

package/src/components/aspect-ratio/aspect-ratio.stories.tsx

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { AspectRatio } from './aspect-ratio';
 
 const meta: Meta<typeof AspectRatio> = {
-  title: '基础原语 · Foundation/AspectRatio',
+  title: '废弃 · Deprecated/AspectRatio',
   component: AspectRatio,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '宽高比容器 — 强制子元素按指定比例渲染，常用于图片 / 视频 / iframe 等响应式封面容器。基于 Radix AspectRatio，通过 `ratio` prop 传入任意宽高比(如 16/9、4/3、1)。shadcn 专有，填补了 antd 未提供的纯布局能力。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n宽高比容器 — 强制子元素按指定比例渲染，常用于图片 / 视频 / iframe 等响应式封面容器。基于 Radix AspectRatio，通过 `ratio` prop 传入任意宽高比。shadcn 专有，填补了 antd 未提供的纯布局能力。',
       },
     },
   },

package/src/components/auto-complete/auto-complete.meta.md

@@ -2,12 +2,13 @@
 id: auto-complete
 name: AutoComplete
 type: component
-category: form
+category: data-entry
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 自动补全
 ---
 
-# AutoComplete
+# AutoComplete 自动补全
 
 输入即建议 — antd 独有补足。**等价 antd `AutoComplete`**。键入触发候选下拉,可选可改;**最终 value 可以是任意字符串**(不强制为选项之一),与 `Combobox`(必选)互补。配 `onSearch` 实现异步建议。
 
@@ -23,6 +24,8 @@ package: "@teamix-evo/ui"
 - 多选 → `Select multiple`
 - @提及输入 → `Mentions`
 
+## Props
+
 <!-- auto:props:begin -->
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
@@ -30,13 +33,16 @@ package: "@teamix-evo/ui"
 | `value` | `string` | – | – | 受控值。 |
 | `defaultValue` | `string` | – | – | uncontrolled 初值。 |
 | `onChange` | `(value: string) => void` | – | – | 值变化回调 — 用户键入 / 选中候选时触发。 |
-| `onSearch` | `(query: string) => void` | – | – | 用户输入时回调,用于刷新 `options`(异步建议)。 |
+| `onSearch` | `(query: string) => void` | – | – | 用户输入时回调,用于刷新 `options`(异步建议)。 提供该回调后,内部不再对 `options` 做本地过滤(由外部按 query 自行刷新)。 |
 | `onSelect` | `(value: string, option: AutoCompleteOption) => void` | – | – | 选中候选时回调。 |
 | `openOnFocus` | `boolean` | `false` | – | 是否在输入框聚焦但 query 为空时显示完整 `options`(antd `defaultActiveFirstOption` 行为的近似)。 |
 | `emptyText` | `string` | `"无匹配项"` | – | 无匹配时的提示文本。 |
-| `size` | `'sm' \| 'default' \| 'lg'` | `"default"` | – | 容器尺寸 — 透传 Input.size。 |
+| `size` | `'sm' \| 'md' \| 'default' \| 'lg'` | `"md"` | – | 容器尺寸 — 透传 Input.size。 |
+| `error` | `boolean` | `false` | – | 错误态视觉(校验失败) — 透传给内部 Input,红色 border + ring,自动写 `aria-invalid="true"`。 |
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
 ### 同库依赖
 
@@ -45,7 +51,9 @@ package: "@teamix-evo/ui"
 | Entry | 类型 | 描述 |
 | --- | --- | --- |
 | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `input` | component | 文本输入 — shadcn 简洁基底 + antd prefix/suffix/clearable/showCount/addonBefore/addonAfter/size |
+| `input` | component | 单行文本输入 — clearable / showCount / size(sm 24 / md 32 / lg 36,与 Button 同档)/ error 四档内建能力。前缀/后缀/addon 等复合形态已拆出独立 InputGroup;多行已拆出独立 Textarea |
+| `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集,使用 showArrow 控制尖角(与 Tooltip / HoverCard 命名统一) |
+| `command` | component | 命令面板 / 下拉底座 — cmdk(Linear / Raycast 风格)提供过滤 / 键盘导航 / a11y;同时为 Combobox / Select / AutoComplete 提供同源下拉内核 |
 
 ### npm 依赖
 

package/src/components/auto-complete/auto-complete.stories.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { AutoComplete } from './auto-complete';
 
 const meta: Meta<typeof AutoComplete> = {
-  title: '表单与输入 · Form/AutoComplete',
+  title: '数据录入 · Data Entry/AutoComplete',
   component: AutoComplete,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '输入即建议 — 键入触发候选下拉,可选可改。最终 value 是自由文本,不强制为选项之一(与 Combobox 必选互补)。配 onSearch 实现异步建议。等价 antd `AutoComplete`。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '自动补全 — 输入即建议，键入触发候选下拉，可选可改，最终 value 是自由文本（不强制为选项之一）。**Input 为底** + antd `AutoComplete` 的人机交互并集：`options` / `onSearch` / `onSelect` / `openOnFocus` / `size` / `error`，与 Combobox（必选）互补。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/tokens`，无 mock。',
       },
     },
   },
@@ -38,6 +38,47 @@ export const Playground: Story = {
   ),
 };
 
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <AutoComplete
+        size="sm"
+        options={frameworks}
+        placeholder="sm"
+        className="w-64"
+      />
+      <AutoComplete
+        options={frameworks}
+        placeholder="default"
+        className="w-64"
+      />
+      <AutoComplete
+        size="lg"
+        options={frameworks}
+        placeholder="lg"
+        className="w-64"
+      />
+    </div>
+  ),
+};
+
+export const ErrorState: Story = {
+  name: 'Error 错误态',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-1">
+      <AutoComplete
+        options={frameworks}
+        placeholder="输入框架名(必填)"
+        error
+        className="w-64"
+      />
+      <span className="text-xs text-destructive">该字段为必填项</span>
+    </div>
+  ),
+};
+
 export const OpenOnFocus: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
@@ -81,7 +122,9 @@ export const AsyncSearch: Story = {
         options={opts}
         onSearch={(q) => {
           window.setTimeout(() => {
-            setOpts(all.filter((v) => v.includes(q)).map((v) => ({ value: v })));
+            setOpts(
+              all.filter((v) => v.includes(q)).map((v) => ({ value: v })),
+            );
           }, 80);
         }}
         placeholder="搜索城市(模拟异步)..."