@teamix-evo/ui 0.2.0 → 0.3.0

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`。',
+          '自动补全 — 输入即建议，键入触发候选下拉，可选可改，最终 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: () => (

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

@@ -1,7 +1,18 @@
 import * as React from 'react';
 
-import { cn } from '@/utils/cn';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from '@/components/command/command';
 import { Input } from '@/components/input/input';
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+} from '@/components/popover/popover';
 
 export interface AutoCompleteOption {
   /** 真实写入到输入框的 value(也作为建议列表 key)。 */
@@ -29,6 +40,7 @@ export interface AutoCompleteProps
   onChange?: (value: string) => void;
   /**
    * 用户输入时回调,用于刷新 `options`(异步建议)。
+   * 提供该回调后,内部不再对 `options` 做本地过滤(由外部按 query 自行刷新)。
    */
   onSearch?: (query: string) => void;
   /**
@@ -47,15 +59,23 @@ export interface AutoCompleteProps
   emptyText?: string;
   /**
    * 容器尺寸 — 透传 Input.size。
-   * @default "default"
+   * @default "md"
    */
-  size?: 'sm' | 'default' | 'lg';
+  size?: 'sm' | 'md' | 'default' | 'lg';
+  /**
+   * 错误态视觉(校验失败) — 透传给内部 Input,红色 border + ring,自动写 `aria-invalid="true"`。
+   * @default false
+   */
+  error?: boolean;
 }
 
 /**
  * 输入即建议 — antd 独有补足。**等价 antd `AutoComplete`**。
- * 与 `Combobox` 区别:Combobox 是"必选下拉",输入框只接受选项中的值;
- * AutoComplete 是"自由输入 + 选项建议",最终 value 可以是任意字符串。
+ *
+ * 与 `Combobox` 区别:Combobox 是"必选下拉",输入框只接受选项中的值(closed-list);
+ * AutoComplete 是"自由输入 + 选项建议",最终 value 可以是任意字符串(open-list)。
+ *
+ * 内核与 `Select` 同源 —— 基于 `Popover + cmdk Command`,共享下拉视觉、键盘导航与 a11y。
  */
 const AutoComplete = React.forwardRef<HTMLInputElement, AutoCompleteProps>(
   (
@@ -68,7 +88,8 @@ const AutoComplete = React.forwardRef<HTMLInputElement, AutoCompleteProps>(
       onSelect,
       openOnFocus = false,
       emptyText = '无匹配项',
-      size = 'default',
+      size = 'md',
+      error = false,
       className,
       onFocus,
       onBlur,
@@ -84,18 +105,22 @@ const AutoComplete = React.forwardRef<HTMLInputElement, AutoCompleteProps>(
     const current = isControlled ? value! : internal;
 
     const [open, setOpen] = React.useState(false);
-    const [activeIdx, setActiveIdx] = React.useState(0);
+    const [activeValue, setActiveValue] = React.useState<string>('');
 
+    // 提供 onSearch 时,默认认为外部按 query 异步刷过 options;否则内部本地过滤
     const filtered = React.useMemo(() => {
+      if (onSearch) return options;
       const q = current.toLowerCase();
       return q === ''
         ? options
         : options.filter((o) => o.value.toLowerCase().includes(q));
-    }, [current, options]);
+    }, [current, options, onSearch]);
 
+    // filtered 变化时,默认高亮第一个可用项
     React.useEffect(() => {
-      setActiveIdx(0);
-    }, [current]);
+      const first = filtered.find((o) => !o.disabled);
+      setActiveValue(first?.value ?? '');
+    }, [filtered]);
 
     const update = (next: string) => {
       if (!isControlled) setInternal(next);
@@ -109,20 +134,30 @@ const AutoComplete = React.forwardRef<HTMLInputElement, AutoCompleteProps>(
       setOpen(false);
     };
 
+    const moveActive = (dir: 1 | -1) => {
+      const enabled = filtered.filter((o) => !o.disabled);
+      if (enabled.length === 0) return;
+      const idx = enabled.findIndex((o) => o.value === activeValue);
+      const nextIdx =
+        (idx === -1 ? 0 : idx + dir + enabled.length) % enabled.length;
+      const nextOpt = enabled[nextIdx];
+      if (nextOpt) setActiveValue(nextOpt.value);
+    };
+
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (open && filtered.length > 0) {
+      if (open) {
         if (e.key === 'ArrowDown') {
           e.preventDefault();
-          setActiveIdx((i) => (i + 1) % filtered.length);
+          moveActive(1);
           return;
         }
         if (e.key === 'ArrowUp') {
           e.preventDefault();
-          setActiveIdx((i) => (i - 1 + filtered.length) % filtered.length);
+          moveActive(-1);
           return;
         }
         if (e.key === 'Enter') {
-          const opt = filtered[activeIdx];
+          const opt = filtered.find((o) => o.value === activeValue);
           if (opt && !opt.disabled) {
             e.preventDefault();
             select(opt);
@@ -134,69 +169,82 @@ const AutoComplete = React.forwardRef<HTMLInputElement, AutoCompleteProps>(
           setOpen(false);
           return;
         }
+      } else if (e.key === 'ArrowDown' && filtered.length > 0) {
+        e.preventDefault();
+        setOpen(true);
+        return;
       }
       onKeyDown?.(e);
     };
 
-    const shouldShow = open && (filtered.length > 0 || current !== '');
-
     return (
-      <div className={cn('relative', className)}>
-        <Input
-          ref={ref}
-          value={current}
-          placeholder={placeholder}
-          disabled={disabled}
-          size={size}
-          onChange={(e) => {
-            update(e.target.value);
-            onSearch?.(e.target.value);
-            setOpen(true);
-          }}
-          onFocus={(e) => {
-            if (openOnFocus) setOpen(true);
-            onFocus?.(e);
-          }}
-          onBlur={(e) => {
-            window.setTimeout(() => setOpen(false), 120);
-            onBlur?.(e);
-          }}
-          onKeyDown={handleKeyDown}
-          {...props}
-        />
-        {shouldShow ? (
-          <ul
-            role="listbox"
-            className="absolute left-0 right-0 top-full z-50 mt-1 max-h-60 overflow-auto rounded-md border bg-popover p-1 text-sm text-popover-foreground shadow-md"
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverAnchor asChild>
+          <Input
+            ref={ref}
+            value={current}
+            placeholder={placeholder}
+            disabled={disabled}
+            size={size}
+            error={error}
+            className={className}
+            role="combobox"
+            aria-autocomplete="list"
+            aria-expanded={open}
+            onChange={(e) => {
+              const next = e.target.value;
+              update(next);
+              onSearch?.(next);
+              setOpen(true);
+            }}
+            onFocus={(e) => {
+              if (openOnFocus) setOpen(true);
+              onFocus?.(e);
+            }}
+            onBlur={(e) => {
+              window.setTimeout(() => setOpen(false), 120);
+              onBlur?.(e);
+            }}
+            onKeyDown={handleKeyDown}
+            {...props}
+          />
+        </PopoverAnchor>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          // 读 Radix 暴露的 CSS 变量让弹层宽度追平 Input 宽度;主动选 style 而非 Tailwind
+          // arbitrary value(`w-[var(--...)]`),避免 `teamix-evo/no-arbitrary-tw-value` lint 告警
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+          className="p-0"
+        >
+          <Command
+            shouldFilter={false}
+            value={activeValue}
+            onValueChange={setActiveValue}
           >
-            {filtered.length === 0 ? (
-              <li className="px-2 py-1.5 text-center text-xs text-muted-foreground">
-                {emptyText}
-              </li>
-            ) : (
-              filtered.map((opt, i) => (
-                <li
-                  key={opt.value}
-                  role="option"
-                  aria-selected={i === activeIdx}
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    select(opt);
-                  }}
-                  onMouseEnter={() => setActiveIdx(i)}
-                  className={cn(
-                    'cursor-pointer rounded-sm px-2 py-1.5',
-                    i === activeIdx && !opt.disabled && 'bg-accent text-accent-foreground',
-                    opt.disabled && 'cursor-not-allowed opacity-50',
-                  )}
-                >
-                  {opt.label ?? opt.value}
-                </li>
-              ))
-            )}
-          </ul>
-        ) : null}
-      </div>
+            <CommandList>
+              <CommandEmpty>{emptyText}</CommandEmpty>
+              {filtered.length > 0 && (
+                <CommandGroup>
+                  {filtered.map((opt) => (
+                    <CommandItem
+                      key={opt.value}
+                      value={opt.value}
+                      disabled={opt.disabled}
+                      onSelect={() => select(opt)}
+                      // 阻止鼠标按下时让 Input 失焦,避免选中前 popover 已关闭
+                      onMouseDown={(e) => e.preventDefault()}
+                    >
+                      {opt.label ?? opt.value}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
     );
   },
 );

package/src/components/avatar/avatar.meta.md

@@ -3,7 +3,7 @@ id: avatar
 name: Avatar
 displayName: 头像
 type: component
-category: foundation
+category: data-display
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
@@ -28,21 +28,10 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
 
 <!-- auto:props:begin -->
-
-#### Avatar
-
-| 名称    | 类型                                | 默认值      | 必填 | 说明                                                 |
-| ------- | ----------------------------------- | ----------- | ---- | ---------------------------------------------------- |
-| `size`  | `'sm' \| 'default' \| 'lg' \| 'xl'` | `"default"` | –    | 尺寸(antd 并集:sm 32 / default 40 / lg 48 / xl 64)。 |
-| `shape` | `'circle' \| 'square'`              | `"circle"`  | –    | 形状(antd 并集)。                                    |
-
-#### AvatarGroup
-
-| 名称   | 类型                                | 默认值 | 必填 | 说明                                               |
-| ------ | ----------------------------------- | ------ | ---- | -------------------------------------------------- |
-| `max`  | `number`                            | `3`    | –    | 显示前 N 个 Avatar,其余收为 `+N` 折叠气泡。        |
-| `size` | `'sm' \| 'default' \| 'lg' \| 'xl'` | –      | –    | Group 内所有 Avatar 共享的尺寸,会覆盖单个 Avatar。 |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `size` | `'sm' \| 'md' \| 'default' \| 'lg' \| 'xl'` | `"default"` | – | 尺寸(antd 并集:sm 32 / default 40 / lg 48 / xl 64)。 |
+| `shape` | `'circle' \| 'square'` | `"circle"` | – | 形状(antd 并集)。 |
 <!-- auto:props:end -->
 
 ## 依赖
@@ -50,23 +39,21 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add avatar` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
 > 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
 
 ```bash
-pnpm add @radix-ui/react-avatar@^1.1.0 class-variance-authority@^0.7.0
+pnpm add @radix-ui/react-avatar@^1.1.0 class-variance-authority@^0.7.0 lucide-react@^0.460.0
 ```
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/avatar/avatar.stories.tsx

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Avatar, AvatarImage, AvatarFallback, AvatarGroup } from './avatar';
 
 const meta: Meta<typeof Avatar> = {
-  title: '基础原语 · Foundation/Avatar',
+  title: '数据展示 · Data Display/Avatar',
   component: Avatar,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '头像 — 表示用户或对象，支持图片 / 文字 / 图标三种回退源。基于 Radix Avatar（图片加载失败自动回退到 fallback）+ antd 增强：尺寸 sm/default/lg、形状 circle/square、`AvatarGroup` 堆叠。Image / Fallback 通过命名子组件组合。',
+          '头像 — 表示用户或对象，支持图片 / 文字 / 图标三种回退源。基于 Radix Avatar（图片加载失败自动回退到 fallback）+ antd 增强：尺寸 sm/default/lg/xl、形状 circle/square、`AvatarGroup` 堆叠。未传 children 时 fallback 默认渲染 lucide `User` 占位图标。',
       },
     },
   },
@@ -66,6 +66,24 @@ export const FallbackOnly: Story = {
   ),
 };
 
+export const DefaultIconFallback: Story = {
+  name: '默认图标回退',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-end gap-3">
+      {(['sm', 'default', 'lg', 'xl'] as const).map((s) => (
+        <Avatar key={s} size={s}>
+          {/* 未传图片与文字 children, fallback 自动渲染 lucide User 占位 */}
+          <AvatarFallback />
+        </Avatar>
+      ))}
+      <Avatar shape="square">
+        <AvatarFallback />
+      </Avatar>
+    </div>
+  ),
+};
+
 export const Group: Story = {
   parameters: { controls: { disable: true } },
   render: () => (

package/src/components/avatar/avatar.tsx

@@ -1,27 +1,26 @@
 import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { User } from 'lucide-react';
 
 import { cn } from '@/utils/cn';
 
-const avatarVariants = cva(
-  'relative flex shrink-0 overflow-hidden bg-muted',
-  {
-    variants: {
-      size: {
-        sm: 'size-8 text-xs',
-        default: 'size-10 text-sm',
-        lg: 'size-12 text-base',
-        xl: 'size-16 text-lg',
-      },
-      shape: {
-        circle: 'rounded-full',
-        square: 'rounded-md',
-      },
+const avatarVariants = cva('relative flex shrink-0 overflow-hidden bg-muted', {
+  variants: {
+    size: {
+      sm: 'size-8 text-xs',
+      md: 'size-10 text-xs',
+      default: 'size-10 text-xs',
+      lg: 'size-12 text-sm',
+      xl: 'size-16 text-base',
+    },
+    shape: {
+      circle: 'rounded-full',
+      square: 'rounded-md',
     },
-    defaultVariants: { size: 'default', shape: 'circle' },
   },
-);
+  defaultVariants: { size: 'md', shape: 'circle' },
+});
 
 export interface AvatarProps
   extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
@@ -30,7 +29,7 @@ export interface AvatarProps
    * 尺寸(antd 并集:sm 32 / default 40 / lg 48 / xl 64)。
    * @default "default"
    */
-  size?: 'sm' | 'default' | 'lg' | 'xl';
+  size?: 'sm' | 'md' | 'default' | 'lg' | 'xl';
   /**
    * 形状(antd 并集)。
    * @default "circle"
@@ -65,7 +64,7 @@ AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
@@ -73,7 +72,9 @@ const AvatarFallback = React.forwardRef<
       className,
     )}
     {...props}
-  />
+  >
+    {children ?? <User className="h-3/5 w-3/5" aria-hidden="true" />}
+  </AvatarPrimitive.Fallback>
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
@@ -106,10 +107,10 @@ const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
       >
         {visible.map((child, i) =>
           React.isValidElement(child) && size
-            ? React.cloneElement(
-                child as React.ReactElement<AvatarProps>,
-                { size, key: i },
-              )
+            ? React.cloneElement(child as React.ReactElement<AvatarProps>, {
+                size,
+                key: i,
+              })
             : child,
         )}
         {overflow > 0 ? (

package/src/components/badge/badge.meta.md

@@ -3,7 +3,7 @@ id: badge
 name: Badge
 displayName: 徽标
 type: component
-category: foundation
+category: data-display
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
@@ -38,18 +38,16 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`badge.tsx`](./badge.tsx) 的 `BadgeProps` interface JSDoc。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:props:begin -->
-
-| 名称            | 类型                                                                               | 默认值      | 必填 | 说明                                                                                                                                                 |
-| --------------- | ---------------------------------------------------------------------------------- | ----------- | ---- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `variant`       | `'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'success' \| 'warning'` | `"default"` | –    | 视觉风格;`default / secondary / destructive / outline` 来自 shadcn, `success / warning` 来自 antd 状态色补足。                                       |
-| `count`         | `number`                                                                           | –           | –    | 数字徽标内容。配合 `children` 时,数字气泡浮在右上角(包裹模式); 无 `children` 时,渲染为独立小气泡(standalone 模式)。 `0` 默认不显示,需配 `showZero`。 |
-| `overflowCount` | `number`                                                                           | `99`        | –    | 数字超过此值时显示 `${overflowCount}+`。仅在有 `count` 时生效。                                                                                      |
-| `showZero`      | `boolean`                                                                          | `false`     | –    | `true` 时即使 `count === 0` 也显示气泡。                                                                                                             |
-| `dot`           | `boolean`                                                                          | `false`     | –    | `true` 时渲染为纯红点(无文字)。配合 `children` 时浮在右上角。 `dot` 与 `count` 同时存在,`dot` 优先。                                                 |
-| `status`        | `BadgeStatus`                                                                      | –           | –    | 状态点 + 文字(`<dot> <text>` 行内组合),用于"运行中 / 已停止"等状态描述。 必须与 `children` 互斥使用 — 这是 standalone 状态条形态。                   |
-| `text`          | `React.ReactNode`                                                                  | –           | –    | 配合 `status` 使用,渲染在状态点右侧。无 `status` 时忽略。                                                                                            |
-| `children`      | `React.ReactNode`                                                                  | –           | –    | 被包裹的元素(包裹模式)或徽标文本内容(standalone 文本模式)。                                                                                          |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'success' \| 'warning'` | `"default"` | – | 视觉风格;`default / secondary / destructive / outline` 来自 shadcn, `success / warning` 来自 antd 状态色补足。 |
+| `count` | `number` | – | – | 数字徽标内容。配合 `children` 时,数字气泡浮在右上角(包裹模式); 无 `children` 时,渲染为独立小气泡(standalone 模式)。 `0` 默认不显示,需配 `showZero`。 |
+| `overflowCount` | `number` | `99` | – | 数字超过此值时显示 `${overflowCount}+`。仅在有 `count` 时生效。 |
+| `showZero` | `boolean` | `false` | – | `true` 时即使 `count === 0` 也显示气泡。 |
+| `dot` | `boolean` | `false` | – | `true` 时渲染为纯红点(无文字)。配合 `children` 时浮在右上角。 `dot` 与 `count` 同时存在,`dot` 优先。 |
+| `status` | `BadgeStatus` | – | – | 状态点 + 文字(`<dot> <text>` 行内组合),用于"运行中 / 已停止"等状态描述。 必须与 `children` 互斥使用 — 这是 standalone 状态条形态。 |
+| `text` | `React.ReactNode` | – | – | 配合 `status` 使用,渲染在状态点右侧。无 `status` 时忽略。 |
+| `children` | `React.ReactNode` | – | – | 被包裹的元素(包裹模式)或徽标文本内容(standalone 文本模式)。 |
 <!-- auto:props:end -->
 
 ## 依赖
@@ -57,14 +55,13 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add badge` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -73,7 +70,6 @@ package: '@teamix-evo/ui'
 ```bash
 pnpm add class-variance-authority@^0.7.0
 ```
-
 <!-- auto:deps:end -->
 
 > 除上述 props 外,Badge 透传所有 `<span>` 原生属性(`onClick` / `aria-*` / `id` / ...)。

package/src/components/badge/badge.stories.tsx

@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Bell, MessageSquare, ShoppingCart } from 'lucide-react';
 import { Badge } from './badge';
 
 const meta: Meta<typeof Badge> = {
-  title: '基础原语 · Foundation/Badge',
+  title: '数据展示 · Data Display/Badge',
   component: Badge,
   tags: ['autodocs'],
   parameters: {

package/src/components/badge/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/utils/cn';
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-md border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
@@ -113,7 +113,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
       return (
         <span
           ref={ref}
-          className={cn('inline-flex items-center gap-2 text-sm', className)}
+          className={cn('inline-flex items-center gap-2 text-xs', className)}
           {...props}
         >
           <span