@teamix-evo/ui 0.1.1 → 0.2.0

package/src/components/hover-card/hover-card.meta.md

@@ -4,14 +4,16 @@ name: HoverCard
 type: component
 category: feedback
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 悬浮卡片
 ---
 
-# HoverCard
+# HoverCard 悬浮卡片
 
 悬浮信息卡 — Radix HoverCard 包装。**shadcn-only**(antd 无对标 — antd Tooltip 仅文字,Popover 是 click 触发,HoverCard 是 hover 触发的富内容)。
 
 `Tooltip` 与 `HoverCard` 的边界:
+
 - 1 行简短文字 → `Tooltip`
 - 多行 / 含图片 / 含弱交互(链接 / Avatar)→ `HoverCard`
 
@@ -32,7 +34,9 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表为 `HoverCardContent` 的 props;`HoverCard` Root 透传 `openDelay / closeDelay / open / defaultOpen / onOpenChange`。
 
 <!-- auto:props:begin -->
+
 _(no props)_
+
 <!-- auto:props:end -->
 
 ## 依赖
@@ -40,13 +44,14 @@ _(no props)_
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add hover-card` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述                                               |
+| ----- | ---- | -------------------------------------------------- |
+| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -55,6 +60,7 @@ _(no props)_
 ```bash
 pnpm add @radix-ui/react-hover-card@^1.1.0
 ```
+
 <!-- auto:deps:end -->
 
 ## AI 生成纪律
@@ -68,13 +74,17 @@ pnpm add @radix-ui/react-hover-card@^1.1.0
 
 ```tsx
 import {
-  HoverCard, HoverCardTrigger, HoverCardContent,
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
 } from '@/components/ui/hover-card';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 
 <HoverCard>
   <HoverCardTrigger asChild>
-    <a href="/u/lyca" className="font-medium text-primary hover:underline">@lyca</a>
+    <a href="/u/lyca" className="font-medium text-primary hover:underline">
+      @lyca
+    </a>
   </HoverCardTrigger>
   <HoverCardContent>
     <div className="flex gap-3">
@@ -84,9 +94,11 @@ import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
       </Avatar>
       <div className="space-y-1">
         <h4 className="text-sm font-semibold">@lyca</h4>
-        <p className="text-xs text-muted-foreground">Frontend engineer · Joined 2020</p>
+        <p className="text-xs text-muted-foreground">
+          Frontend engineer · Joined 2020
+        </p>
       </div>
     </div>
   </HoverCardContent>
-</HoverCard>
+</HoverCard>;
 ```

package/src/components/hover-card/hover-card.stories.tsx

@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { HoverCard, HoverCardTrigger, HoverCardContent } from './hover-card';
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/avatar/avatar';
+import {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+} from '@/components/avatar/avatar';
 
 const meta: Meta<typeof HoverCardContent> = {
   title: '反馈与浮层 · Feedback/HoverCard',
@@ -10,7 +14,7 @@ const meta: Meta<typeof HoverCardContent> = {
     docs: {
       description: {
         component:
-          '悬浮卡片 — 鼠标悬停时延迟展示更多信息(常用于用户名片、链接预览)。基于 Radix HoverCard，**仅鼠标悬停触发**(键盘聚焦不触发，交互场景与 Tooltip / Popover 互补)；支持 `side` / `align` 定位与 `openDelay` / `closeDelay`。shadcn 专有，antd 可由 `Popover` 的 trigger="hover" 近似实现。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+          '悬浮卡片 — 鼠标悬停时延迟展示更多信息（常用于用户名片、链接预览）。基于 Radix HoverCard，**仅鼠标悬停触发**（键盘聚焦不触发，交互场景与 Tooltip / Popover 互补）；支持 `side` / `align` 定位与 `openDelay` / `closeDelay`。shadcn 专有，antd 可由 `Popover` 的 trigger="hover" 近似实现。',
       },
     },
   },

package/src/components/image/image.meta.md

@@ -1,13 +1,14 @@
 ---
 id: image
 name: Image
+displayName: 图片
 type: component
 category: foundation
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Image
+# Image 图片
 
 图片 — antd 独有补足。**自动处理加载态(Skeleton 占位)+ 失败态(图标)+ 点击预览**(Dialog 模态展示原图)。
 
@@ -23,27 +24,34 @@ package: "@teamix-evo/ui"
 - 强需求 lazy-load + 优化 → 用框架自带(Next.js `<Image>`)
 - 仅显示固定尺寸图标 → `<img>` 直接用
 
+## Props
+
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `src` | `string` | – | ✓ | – |
-| `alt` | `string` | – | ✓ | – |
-| `preview` | `boolean` | `true` | – | 是否启用点击预览(antd `preview` 并集) — 点击后弹模态展示原图。 |
-| `fallback` | `React.ReactNode` | – | – | 加载失败时显示的占位元素;不传则用默认 `ImageOff` 图标。 |
-| `placeholder` | `React.ReactNode` | – | – | 加载中显示的占位 — 默认 Skeleton 占位与图片同尺寸。 |
-| `className` | `string` | – | – | 容器 className(图片本身用 `imgClassName`)。 |
-| `imgClassName` | `string` | – | – | 真实 `<img>` 的 className(尺寸 / 圆角 / object-fit)。 |
+
+| 名称           | 类型              | 默认值 | 必填 | 说明                                                           |
+| -------------- | ----------------- | ------ | ---- | -------------------------------------------------------------- |
+| `src`          | `string`          | –      | ✓    | –                                                              |
+| `alt`          | `string`          | –      | ✓    | –                                                              |
+| `preview`      | `boolean`         | `true` | –    | 是否启用点击预览(antd `preview` 并集) — 点击后弹模态展示原图。 |
+| `fallback`     | `React.ReactNode` | –      | –    | 加载失败时显示的占位元素;不传则用默认 `ImageOff` 图标。        |
+| `placeholder`  | `React.ReactNode` | –      | –    | 加载中显示的占位 — 默认 Skeleton 占位与图片同尺寸。            |
+| `className`    | `string`          | –      | –    | 容器 className(图片本身用 `imgClassName`)。                    |
+| `imgClassName` | `string`          | –      | –    | 真实 `<img>` 的 className(尺寸 / 圆角 / object-fit)。          |
+
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add image` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `dialog` | component | 模态对话框 — Radix Dialog + antd Modal 并集(组合式 Header/Footer/Title/Description) |
+| Entry      | 类型      | 描述                                                                                              |
+| ---------- | --------- | ------------------------------------------------------------------------------------------------- |
+| `cn`       | util      | Tailwind className 合并工具(clsx + tailwind-merge)                                                |
+| `dialog`   | component | 模态对话框 — Radix Dialog + antd Modal 并集(组合式 Header/Footer/Title/Description)               |
 | `skeleton` | component | 骨架屏 — shadcn pulse 单元素 + antd Avatar/Image/Button/Input/Paragraph 子家族,自动 motion-reduce |
 
 ### npm 依赖
@@ -53,6 +61,7 @@ package: "@teamix-evo/ui"
 ```bash
 pnpm add lucide-react@^0.460.0
 ```
+
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/image/image.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<typeof Image> = {
     docs: {
       description: {
         component:
-          '图片 — 自动处理加载(Skeleton 占位)+ 失败(图标占位)+ 点击预览(Dialog 模态原图)。alt 必填(无障碍)。OpenTrek tokens 适配,等价 antd Image。',
+          '图片 — 自动处理加载（Skeleton 占位）+ 失败（图标占位）+ 点击预览（Dialog 模态原图）。alt 必填（无障碍）。等价 antd Image。',
       },
     },
   },

package/src/components/image/image.tsx

@@ -78,11 +78,11 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
       <>
         {status === 'loading' ? (
           <div className="absolute inset-0">
-            {placeholder ?? <Skeleton className="size-full rounded-[inherit]" />}
+            {placeholder ?? <Skeleton className="size-full rounded-inherit" />}
           </div>
         ) : null}
         {status === 'error' ? (
-          <div className="absolute inset-0 flex flex-col items-center justify-center gap-1 rounded-[inherit] bg-muted text-muted-foreground">
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-1 rounded-inherit bg-muted text-muted-foreground">
             {fallback ?? (
               <>
                 <ImageOff className="size-6" />
@@ -115,14 +115,14 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
       <Dialog>
         <DialogTrigger asChild>{inner}</DialogTrigger>
         <DialogContent
-          className="max-w-[90vw] border-0 bg-transparent p-0 shadow-none"
+          className="max-w-image-preview border-0 bg-transparent p-0 shadow-none"
           showClose={false}
         >
           <div className="relative">
             <img
               src={src}
               alt={alt}
-              className="max-h-[85vh] w-auto rounded-md object-contain"
+              className="max-h-image-preview w-auto rounded-md object-contain"
             />
             <div className="pointer-events-none absolute -top-3 -right-3 flex size-8 items-center justify-center rounded-full bg-background text-foreground shadow">
               <X className="size-4" />

package/src/components/input/demo/addon.tsx

@@ -0,0 +1,15 @@
+import { Input } from '@/components/ui/input';
+
+/**
+ * 前后置标签：通过 `addonBefore` / `addonAfter` 形成 input-group。
+ * 常用于域名拼接、协议前缀、单位后缀。
+ */
+export default function Demo() {
+  return (
+    <div className="flex w-96 flex-col gap-3">
+      <Input addonBefore="https://" placeholder="example.com" />
+      <Input addonAfter=".teamix.com" placeholder="alice" />
+      <Input addonBefore="https://" addonAfter=".com" placeholder="my-site" />
+    </div>
+  );
+}

package/src/components/input/demo/basic.tsx

@@ -0,0 +1,12 @@
+import { Input } from '@/components/ui/input';
+
+/**
+ * 最简用法：原生 input 的并集语义，直接当受控/非受控输入框使用。
+ */
+export default function Demo() {
+  return (
+    <div className="w-80">
+      <Input placeholder="请输入用户名" />
+    </div>
+  );
+}

package/src/components/input/demo/clearable.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import { Input } from '@/components/ui/input';
+
+/**
+ * 一键清空：受控时点 X 会触发 onChange("")，非受控时直接清掉 DOM 值并派发 input 事件。
+ * 适合搜索框、过滤器场景。
+ */
+export default function Demo() {
+  const [value, setValue] = useState('Teamix Evo');
+  return (
+    <div className="flex w-80 flex-col gap-3">
+      <Input
+        clearable
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder="受控 + clearable"
+      />
+      <Input clearable defaultValue="非受控示例" />
+    </div>
+  );
+}

package/src/components/input/demo/show-count.tsx

@@ -0,0 +1,18 @@
+import { Input } from '@/components/ui/input';
+
+/**
+ * 字符计数：必须配合 `maxLength` 一起使用。
+ * 适合给社交平台发文、签名等限长场景。
+ */
+export default function Demo() {
+  return (
+    <div className="w-80">
+      <Input
+        showCount
+        maxLength={20}
+        defaultValue="hello teamix"
+        placeholder="最多 20 字"
+      />
+    </div>
+  );
+}

package/src/components/input/demo/sizes.tsx

@@ -0,0 +1,15 @@
+import { Input } from '@/components/ui/input';
+
+/**
+ * 三种尺寸：sm / default / lg。
+ * 高度通过 internal class 控制，不要再外部覆盖 `h-*`。
+ */
+export default function Demo() {
+  return (
+    <div className="flex w-80 flex-col gap-3">
+      <Input size="sm" placeholder="Small" />
+      <Input size="default" placeholder="Default" />
+      <Input size="lg" placeholder="Large" />
+    </div>
+  );
+}

package/src/components/input/demo/with-prefix-suffix.tsx

@@ -0,0 +1,19 @@
+import { Search, Mail } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+
+/**
+ * 前置 / 后置图标：通过 `prefix` / `suffix` 传任意 ReactNode（图标或文本）。
+ * 视觉对齐由组件内部处理，不要再额外用 padding 兼容图标。
+ */
+export default function Demo() {
+  return (
+    <div className="flex w-80 flex-col gap-3">
+      <Input prefix={<Search />} placeholder="搜索..." />
+      <Input
+        prefix={<Mail />}
+        suffix={<span className="text-xs">@teamix.com</span>}
+        placeholder="alice"
+      />
+    </div>
+  );
+}

package/src/components/input/input.meta.md

@@ -4,10 +4,11 @@ name: Input
 type: component
 category: form
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 输入框
 ---
 
-# Input
+# Input 输入框
 
 文本输入框 — shadcn 简洁版基底 + antd 的 `prefix / suffix / clearable / showCount / addonBefore / addonAfter / size`。
 单组件覆盖大部分表单输入场景,保持 forwardRef + 原生 `<input>` 透传。
@@ -32,17 +33,19 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
 
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `prefix` | `React.ReactNode` | – | – | 输入框前置图标 / 文本(antd `prefix` 并集)。 |
-| `suffix` | `React.ReactNode` | – | – | 输入框后置图标 / 文本(antd `suffix` 并集)。 |
-| `clearable` | `boolean` | `false` | – | 显示清除按钮,有内容时点击清空(antd `allowClear` 并集)。 |
-| `showCount` | `boolean` | `false` | – | 显示字符计数(antd `showCount` 并集);需配合 `maxLength` 一起使用。 |
-| `addonBefore` | `React.ReactNode` | – | – | 输入框前置标签(antd `addonBefore` 并集),与外层组合形成 input-group。 |
-| `addonAfter` | `React.ReactNode` | – | – | 输入框后置标签(antd `addonAfter` 并集)。 |
-| `size` | `'sm' \| 'default' \| 'lg'` | `"default"` | – | 尺寸。 |
-| `value` | `string` | – | – | 受控值,用于 clearable / showCount 的逻辑;未传时回退到 uncontrolled 行为。 |
-| `defaultValue` | `string` | – | – | uncontrolled 初始值。 |
+
+| 名称           | 类型                        | 默认值      | 必填 | 说明                                                                      |
+| -------------- | --------------------------- | ----------- | ---- | ------------------------------------------------------------------------- |
+| `prefix`       | `React.ReactNode`           | –           | –    | 输入框前置图标 / 文本(antd `prefix` 并集)。                               |
+| `suffix`       | `React.ReactNode`           | –           | –    | 输入框后置图标 / 文本(antd `suffix` 并集)。                               |
+| `clearable`    | `boolean`                   | `false`     | –    | 显示清除按钮,有内容时点击清空(antd `allowClear` 并集)。                   |
+| `showCount`    | `boolean`                   | `false`     | –    | 显示字符计数(antd `showCount` 并集);需配合 `maxLength` 一起使用。         |
+| `addonBefore`  | `React.ReactNode`           | –           | –    | 输入框前置标签(antd `addonBefore` 并集),与外层组合形成 input-group。      |
+| `addonAfter`   | `React.ReactNode`           | –           | –    | 输入框后置标签(antd `addonAfter` 并集)。                                  |
+| `size`         | `'sm' \| 'default' \| 'lg'` | `"default"` | –    | 尺寸。                                                                    |
+| `value`        | `string`                    | –           | –    | 受控值,用于 clearable / showCount 的逻辑;未传时回退到 uncontrolled 行为。 |
+| `defaultValue` | `string`                    | –           | –    | uncontrolled 初始值。                                                     |
+
 <!-- auto:props:end -->
 
 ## 依赖
@@ -50,13 +53,14 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add input` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述                                               |
+| ----- | ---- | -------------------------------------------------- |
+| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -65,6 +69,7 @@ package: "@teamix-evo/ui"
 ```bash
 pnpm add lucide-react@^0.460.0
 ```
+
 <!-- auto:deps:end -->
 
 > 透传所有 `<input>` 原生属性(`type` / `placeholder` / `name` / `id` / `aria-*` / `onChange` / ...)。

package/src/components/input/input.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof Input> = {
     docs: {
       description: {
         component:
-          '输入框 — 文本 / 邮箱 / 密码 / 搜索等单行输入。shadcn 原生 `<input>` 风格 + antd 扩展:`size` 三档、`prefix` / `suffix` 前后缀、`addonBefore` / `addonAfter` 外联组、`clearable` 一键清空、`showCount` + `maxLength` 字数统计。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+          '输入框 — 文本 / 邮箱 / 密码 / 搜索等单行输入。shadcn 原生 `<input>` 风格 + antd 扩展：`size` 三档、`prefix` / `suffix` 前后缀、`addonBefore` / `addonAfter` 外联组、`clearable` 一键清空、`showCount` + `maxLength` 字数统计。',
       },
     },
   },

package/src/components/input/input.tsx

@@ -61,25 +61,21 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     // Track the current value for clearable / showCount; mirror uncontrolled
     // input via internal state when `value` prop isn't provided.
     const isControlled = value !== undefined;
-    const [internal, setInternal] = React.useState<string>(
-      defaultValue ?? '',
-    );
+    const [internal, setInternal] = React.useState<string>(defaultValue ?? '');
     const current = isControlled ? value : internal;
 
     const innerRef = React.useRef<HTMLInputElement | null>(null);
-    React.useImperativeHandle(
-      ref,
-      () => innerRef.current as HTMLInputElement,
-    );
+    React.useImperativeHandle(ref, () => innerRef.current as HTMLInputElement);
 
     const h =
       size === 'sm'
         ? 'h-8 text-xs'
         : size === 'lg'
-          ? 'h-10 text-base'
-          : 'h-9 text-sm';
+        ? 'h-10 text-base'
+        : 'h-9 text-sm';
 
     const hasAffix = prefix != null || suffix != null || clearable;
+    const hasAddon = addonBefore != null || addonAfter != null;
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       if (!isControlled) setInternal(e.target.value);
@@ -99,17 +95,18 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     };
 
     // Inner input + (optional) prefix/suffix wrapper
+    // 当存在 addon 时，外层 addonWrapper 持有 border + rounded + focus-within ring，
+    // 内层 wrapper / input 完全去掉自身的 border / shadow / ring，避免出现
+    // "内部输入框单独一圈黑框" 的视觉。
     const innerInput = hasAffix ? (
       <div
         className={cn(
           'flex items-center gap-2 rounded-md border border-input bg-background px-3 shadow-sm transition-colors focus-within:ring-1 focus-within:ring-ring',
           h,
           disabled && 'cursor-not-allowed opacity-50',
-          (addonBefore || addonAfter) && 'rounded-none border-x-0',
-          addonBefore && !addonAfter && 'rounded-l-none border-l-0',
-          addonAfter && !addonBefore && 'rounded-r-none border-r-0',
-          !addonBefore && !addonAfter && '',
-          className,
+          hasAddon &&
+            'min-w-0 flex-1 rounded-none border-0 shadow-none transition-none focus-within:ring-0',
+          !hasAddon && className,
         )}
       >
         {prefix ? (
@@ -156,44 +153,51 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         className={cn(
           'flex w-full rounded-md border border-input bg-background px-3 py-1 shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
           h,
-          (addonBefore || addonAfter) && 'rounded-none',
-          addonBefore && !addonAfter && 'rounded-l-none',
-          addonAfter && !addonBefore && 'rounded-r-none',
-          className,
+          hasAddon &&
+            'min-w-0 flex-1 rounded-none border-0 shadow-none transition-none focus-visible:ring-0',
+          !hasAddon && className,
         )}
         {...props}
       />
     );
 
-    // Wrap with addons if any
-    const addonWrapper =
-      addonBefore || addonAfter ? (
-        <div className="flex">
-          {addonBefore ? (
-            <span
-              className={cn(
-                'inline-flex shrink-0 items-center rounded-l-md border border-r-0 border-input bg-muted px-3 text-muted-foreground',
-                h,
-              )}
-            >
-              {addonBefore}
-            </span>
-          ) : null}
-          {innerInput}
-          {addonAfter ? (
-            <span
-              className={cn(
-                'inline-flex shrink-0 items-center rounded-r-md border border-l-0 border-input bg-muted px-3 text-muted-foreground',
-                h,
-              )}
-            >
-              {addonAfter}
-            </span>
-          ) : null}
-        </div>
-      ) : (
-        innerInput
-      );
+    // Wrap with addons if any.
+    // addonWrapper 是带 addon 时的统一外壳：持有 border + rounded + shadow +
+    // focus-within ring；addon 自身只用浅灰分隔边 (border-input)，input 主体
+    // 不再持有任何边框 / ring，避免内部 "双重黑框" 视觉。
+    const addonWrapper = hasAddon ? (
+      <div
+        className={cn(
+          'flex w-full overflow-hidden rounded-md border border-input bg-background shadow-sm transition-colors focus-within:ring-1 focus-within:ring-ring',
+          disabled && 'cursor-not-allowed opacity-50',
+          className,
+        )}
+      >
+        {addonBefore ? (
+          <span
+            className={cn(
+              'inline-flex shrink-0 items-center border-r border-input bg-muted px-3 text-muted-foreground',
+              h,
+            )}
+          >
+            {addonBefore}
+          </span>
+        ) : null}
+        {innerInput}
+        {addonAfter ? (
+          <span
+            className={cn(
+              'inline-flex shrink-0 items-center border-l border-input bg-muted px-3 text-muted-foreground',
+              h,
+            )}
+          >
+            {addonAfter}
+          </span>
+        ) : null}
+      </div>
+    ) : (
+      innerInput
+    );
 
     if (showCount && maxLength) {
       return (

package/src/components/input-group/input-group.meta.md

@@ -4,10 +4,11 @@ name: InputGroup
 type: component
 category: form
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 输入框组
 ---
 
-# InputGroup
+# InputGroup 输入框组
 
 输入框 + addon 统一容器 — shadcn 2025-10 新增。**等价 antd `Input` 的 `prefix` / `suffix` / `addonBefore` / `addonAfter` 集合**,但拆为更通用的复合插槽:`InputGroupAddon`(图标 / 文本 / 按钮)+ `InputGroupInput` / `InputGroupTextarea`(主体)。
 
@@ -24,24 +25,41 @@ package: "@teamix-evo/ui"
 - 仅需 textarea → `Textarea`
 - 多个按钮拼接 → `ButtonGroup`
 
+## Props
+
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `disabled` | `boolean` | – | – | 整组禁用样式(子项请单独传 `disabled`,这里仅影响视觉上的 opacity)。 |
+
+#### InputGroup
+
+| 名称       | 类型      | 默认值 | 必填 | 说明                                                                  |
+| ---------- | --------- | ------ | ---- | --------------------------------------------------------------------- |
+| `disabled` | `boolean` | –      | –    | 整组禁用样式（子项请单独传 `disabled`，这里仅影响视觉上的 opacity）。 |
+
+#### InputGroupAddon
+
+| 名称       | 类型                           | 默认值     | 必填 | 说明                                                                                                             |
+| ---------- | ------------------------------ | ---------- | ---- | ---------------------------------------------------------------------------------------------------------------- |
+| `position` | `'before' \| 'after'`          | `"before"` | –    | 位于输入框的哪一侧。                                                                                             |
+| `variant`  | `'text' \| 'icon' \| 'button'` | `"text"`   | –    | `text` = 默认 muted 文本背景 / `icon` = 紧凑、透明背景（图标专用）/ `button` = 用于嵌入 `<Button>`（去内边距）。 |
+
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add input-group` 时,以下 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/input-group/input-group.stories.tsx

@@ -16,7 +16,7 @@ const meta: Meta<typeof InputGroup> = {
     docs: {
       description: {
         component:
-          '输入框 + addon 统一容器 — 拆为通用复合插槽:InputGroupAddon(图标 / 文本 / 按钮)+ InputGroupInput / InputGroupTextarea(主体)。shadcn 2025-10 新增,等价 antd Input 的 prefix / suffix / addonBefore / addonAfter 集合。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '输入框 + addon 统一容器 — 拆为通用复合插槽：InputGroupAddon（图标 / 文本 / 按钮）+ InputGroupInput / InputGroupTextarea（主体）。shadcn 2025-10 新增，等价 antd Input 的 prefix / suffix / addonBefore / addonAfter 集合。',
       },
     },
   },