@teamix-evo/ui 0.3.0 → 0.5.0

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

@@ -1,115 +0,0 @@
----
-id: input
-name: Input
-type: component
-category: data-entry
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 输入框
----
-
-# Input 输入框
-
-单行文本输入 — shadcn 简洁基底 + antd 并集中保留为内建逻辑能力的子集:`size` 三档(sm/md/lg,与 `Button` 同档)、`clearable` 一键清空、`showCount` + `maxLength` 字数计数、`error` / `aria-invalid` 错误态。
-
-> **2026-06 BREAKING**:`prefix` / `suffix` / `addonBefore` / `addonAfter` 4 个快捷 prop 已移除(ADR 0029)。"装饰类"前后缀(图标 / 文本 / 单位 / 协议头 / 内嵌按钮)统一改用同库独立组件 [`InputGroup`](../input-group/input-group.meta.md) 的复合插槽。`Textarea` 也已拆为 [独立 entry](../textarea/textarea.meta.md)。
-
-## When to use
-
-- 任何单行文本输入(text / email / password / number / search / tel / url)
-- 配合 `clearable` 给搜索框一键清空
-- 配合 `showCount + maxLength` 给社媒发文限制字数
-- 配合 `error`(或 `aria-invalid`)给表单校验失败的字段加红边
-
-## When NOT to use
-
-- 多行文本 → [`Textarea`](../textarea/textarea.meta.md)
-- 数字微调(含步进按钮) → `InputNumber`
-- 选择类输入 → `Select`
-- OTP 验证码 → `InputOTP`
-- 输入框前后需要图标 / 文本 / 协议头 / 单位 / 内嵌按钮 → [`InputGroup`](../input-group/input-group.meta.md)
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `clearable` | `boolean` | `false` | – | 显示清除按钮,有内容时点击清空(antd `allowClear` 并集)。 注:仅"快捷一键清空"逻辑保留为 Input 内建能力 — 复合的前后缀(图标 / 文本 / 按钮) 请用 `InputGroup` 系列。 |
-| `showCount` | `boolean` | `false` | – | 显示字符计数(antd `showCount` 并集);需配合 `maxLength` 一起使用。 |
-| `size` | `'sm' \| 'md' \| 'lg' \| 'default'` | `"md"` | – | 尺寸三档,与 `Button` 同档:`sm`(24px) / `md`(32px,默认) / `lg`(36px)。 `"default"` 为兼容旧调用的别名,等价于 `"md"`,新代码请用 `"md"`。 |
-| `error` | `boolean` | `false` | – | 错误态(快捷开关),会同时设置 `aria-invalid`,渲染 destructive 边框 / ring。 也可以直接传 `aria-invalid` 原生属性达到同效果。 |
-| `value` | `string` | – | – | 受控值,用于 clearable / showCount 的逻辑;未传时回退到 uncontrolled 行为。 |
-| `defaultValue` | `string` | – | – | uncontrolled 初始值。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `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) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-> 透传所有 `<input>` 原生属性(`type` / `placeholder` / `name` / `id` / `aria-*` / `onChange` / ...)。
-
-## AI 生成纪律
-
-- **禁止使用已移除的 `prefix` / `suffix` / `addonBefore` / `addonAfter`**:这 4 个 prop 在 v0.x major 中**整段移除**,改用 `InputGroup` 复合插槽(见下方迁移示例)。
-- **`showCount` 必须配 `maxLength`**:无 maxLength 时 showCount 不渲染。
-- **`error` prop 自动设置 `aria-invalid`**:推荐传 `error`,也可直接传原生 `aria-invalid`;**不要**手动拼 `border-destructive`。
-- **size 档位严格三档**:`sm`(h-6/text-xs/24px)/ `md`(h-8/text-xs,默认/32px)/ `lg`(h-9/text-sm/36px);`"default"` 仅作向后兼容别名,**新代码**统一写 `"md"`,与 `Button` 同档便于同行混排。
-- **不要硬编码颜色**:`bg-background` / `border-input` / `placeholder:text-muted-foreground` 都是 design token,**不要**改成 `bg-white`。
-- **圆角走 `rounded-md`**(Tailwind v4 namespace token):uni-manager 2px / opentrek 6px;**禁止** `rounded-lg` / 自定义半径,确保与 Button / Select / DatePicker 同行视觉一致。
-
-## 用 InputGroup 替代 prefix / suffix / addon
-
-下表是从 `Input` 旧 4 个 prop 到 `InputGroup` 复合插槽的等价改写(ADR 0029 §Decision 2):
-
-| 旧写法                                               | 新写法                                                                                                                                                              |
-| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `<Input prefix={<Search />} />`                      | `<InputGroup><InputGroupAddon position="before" variant="icon"><Search /></InputGroupAddon><InputGroupInput /></InputGroup>`                                        |
-| `<Input suffix={<Mail />} />`                        | `<InputGroup><InputGroupInput /><InputGroupAddon position="after" variant="icon"><Mail /></InputGroupAddon></InputGroup>`                                           |
-| `<Input addonBefore="https://" addonAfter=".com" />` | `<InputGroup><InputGroupAddon position="before">https://</InputGroupAddon><InputGroupInput /><InputGroupAddon position="after">.com</InputGroupAddon></InputGroup>` |
-| `<Input prefix="¥" suffix="USD" />`                  | `<InputGroup><InputGroupAddon position="before">¥</InputGroupAddon><InputGroupInput /><InputGroupAddon position="after">USD</InputGroupAddon></InputGroup>`         |
-| `<Input addonAfter={<Button>搜索</Button>} />`       | `<InputGroup><InputGroupInput /><InputGroupAddon position="after" variant="button"><Button variant="ghost">搜索</Button></InputGroupAddon></InputGroup>`            |
-
-## Examples
-
-```tsx
-import { Input } from '@/components/ui/input';
-
-// 基础
-<Input placeholder="请输入..." />
-
-// 受控
-const [v, setV] = React.useState('');
-<Input value={v} onChange={(e) => setV(e.target.value)} />
-
-// 可清除 + 字数统计
-<Input clearable showCount maxLength={140} placeholder="动态..." />
-
-// 错误态
-<Input error placeholder="必填" />
-
-// 尺寸
-<Input size="sm" placeholder="紧凑" />
-<Input size="lg" placeholder="宽松" />
-```
-
-需要图标 / 协议头 / 内嵌按钮 → 见 [`InputGroup`](../input-group/input-group.meta.md) 与 Storybook `WithInputGroup` 示例。

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

@@ -1,144 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Search } from 'lucide-react';
-import { Input } from './input';
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from '@/components/input-group/input-group';
-
-const meta: Meta<typeof Input> = {
-  title: '数据录入 · Data Entry/Input',
-  component: Input,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '输入框 — shadcn 简洁基底 + antd 并集中保留为内建逻辑能力的:`size` 三档(sm/md/lg,与 `Button` 同档)、`clearable` 一键清空、`showCount` + `maxLength` 字数统计、`error` / `aria-invalid` 错误态。**前后缀 / 单位 / 协议头 / 内嵌按钮**等"装饰类"形态请用同库 `InputGroup` 复合插槽(见下方 `WithInputGroup` 示例)— 单一职责更清晰,与 shadcn 2025-10 拆分对齐(ADR 0029)。',
-      },
-    },
-  },
-  argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
-    type: {
-      control: 'select',
-      options: ['text', 'email', 'password', 'search', 'tel', 'url'],
-    },
-    clearable: { control: 'boolean' },
-    showCount: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    error: { control: 'boolean' },
-    placeholder: { control: 'text' },
-    maxLength: { control: 'number' },
-  },
-  args: {
-    size: 'md',
-    type: 'text',
-    clearable: false,
-    showCount: false,
-    disabled: false,
-    error: false,
-    placeholder: '请输入...',
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-72">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-export const Playground: Story = {};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-3">
-      <Input size="sm" placeholder="Small (h-6 / text-xs / 24px)" />
-      <Input size="md" placeholder="Medium (h-8 / text-xs / 32px)" />
-      <Input size="lg" placeholder="Large (h-9 / text-sm / 36px)" />
-    </div>
-  ),
-};
-
-export const Clearable: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [v, setV] = React.useState('Hello');
-    return (
-      <Input
-        clearable
-        value={v}
-        onChange={(e) => setV(e.target.value)}
-        placeholder="可清除..."
-      />
-    );
-  },
-};
-
-export const ShowCount: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <Input showCount maxLength={140} placeholder="发布动态" />,
-};
-
-export const Error: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-3">
-      <Input error placeholder="必填" />
-      <Input error defaultValue="非法值" />
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-3">
-      <Input disabled placeholder="禁用态" />
-      <Input disabled defaultValue="只读内容" />
-    </div>
-  ),
-};
-
-/**
- * 想加图标 / 单位 / 协议头?用 `InputGroup` 复合插槽 — 不再用已废弃的
- * `prefix` / `suffix` / `addonBefore` / `addonAfter` 快捷 prop(ADR 0029)。
- *
- * 详细演示与 API 见 `数据录入 · Data Entry/InputGroup` 故事集。
- */
-export const WithInputGroup: Story = {
-  name: '配合 InputGroup(替代旧 prefix/suffix/addon)',
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex w-80 flex-col gap-3">
-      {/* 图标前缀(替代旧 prefix={<Search />}) */}
-      <InputGroup>
-        <InputGroupAddon position="before" variant="icon">
-          <Search className="size-4" />
-        </InputGroupAddon>
-        <InputGroupInput placeholder="搜索..." />
-      </InputGroup>
-
-      {/* URL 协议头/后缀(替代旧 addonBefore="https://" addonAfter=".com") */}
-      <InputGroup>
-        <InputGroupAddon position="before">https://</InputGroupAddon>
-        <InputGroupInput defaultValue="example" />
-        <InputGroupAddon position="after">.com</InputGroupAddon>
-      </InputGroup>
-
-      {/* 金额/单位(替代旧 prefix="¥" suffix="USD") */}
-      <InputGroup>
-        <InputGroupAddon position="before">¥</InputGroupAddon>
-        <InputGroupInput type="number" defaultValue={199} />
-        <InputGroupAddon position="after">/ 月</InputGroupAddon>
-      </InputGroup>
-    </div>
-  ),
-};

package/src/components/input/input.tsx

@@ -1,212 +0,0 @@
-import * as React from 'react';
-import { cva } from 'class-variance-authority';
-import { X } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-// ─── shared sizing(对齐 Button 三档:24 / 32 / 36px) ────────────────────────
-//
-// 高度 24/32/36px 与 Button / Select 同档;
-// 这里直接用对应的 Tailwind 高度刻度 `h-6 / h-8 / h-9`,字号档位与 Button 同步。
-const SIZE_TO_HEIGHT = {
-  sm: 'h-6 text-xs',
-  // medium 字号对齐 cd hybridcloud --form-element-medium-font-size: 12px (ADR 0027)
-  md: 'h-8 text-xs',
-  lg: 'h-9 text-sm',
-  /** @deprecated 兼容旧调用,等价于 `md`。 */
-  default: 'h-8 text-xs',
-} as const;
-
-/**
- * Input 主体(无 affix 时直接使用此变体)。
- * 高度 `h-6 / h-8 / h-9`(24 / 32 / 36px,与 Button / Select 同档);
- * 圆角走 Tailwind v4 标准 namespace `--radius-md`(uni-manager 2px / opentrek 6px),
- * 与 Button 同档 — 同行混排时视觉自动对齐。
- *
- * **前后缀 / addon 不再内置** — 需要前后缀图标 / 文本 / 按钮请用同库 `InputGroup`
- * + `InputGroupAddon` + `InputGroupInput` 复合 API(自由嵌套 icon / button / text)。
- * 字符计数 `showCount` + 一键清空 `clearable` 仍保留为 Input 的内建逻辑能力。
- */
-const inputVariants = cva(
-  '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 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive',
-  {
-    variants: { size: SIZE_TO_HEIGHT },
-    defaultVariants: { size: 'md' },
-  },
-);
-
-/**
- * Input 包壳容器(`clearable` 启用时承载 border + ring,把内部 input 的边框转移到外层)。
- */
-const inputWrapperVariants = cva(
-  'flex w-full 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 aria-invalid:border-destructive aria-invalid:focus-within:ring-destructive',
-  {
-    variants: { size: SIZE_TO_HEIGHT },
-    defaultVariants: { size: 'md' },
-  },
-);
-
-export interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
-  /**
-   * 显示清除按钮,有内容时点击清空(antd `allowClear` 并集)。
-   *
-   * 注:仅"快捷一键清空"逻辑保留为 Input 内建能力 — 复合的前后缀(图标 / 文本 / 按钮)
-   * 请用 `InputGroup` 系列。
-   * @default false
-   */
-  clearable?: boolean;
-  /**
-   * 显示字符计数(antd `showCount` 并集);需配合 `maxLength` 一起使用。
-   * @default false
-   */
-  showCount?: boolean;
-  /**
-   * 尺寸三档,与 `Button` 同档:`sm`(24px) / `md`(32px,默认) / `lg`(36px)。
-   * `"default"` 为兼容旧调用的别名,等价于 `"md"`,新代码请用 `"md"`。
-   * @default "md"
-   */
-  size?: 'sm' | 'md' | 'lg' | 'default';
-  /**
-   * 错误态(快捷开关),会同时设置 `aria-invalid`,渲染 destructive 边框 / ring。
-   * 也可以直接传 `aria-invalid` 原生属性达到同效果。
-   * @default false
-   */
-  error?: boolean;
-  /** 受控值,用于 clearable / showCount 的逻辑;未传时回退到 uncontrolled 行为。 */
-  value?: string;
-  /** uncontrolled 初始值。 */
-  defaultValue?: string;
-}
-
-/**
- * Input 单行文本输入 — shadcn 简洁基底 + antd `clearable` / `showCount` / `size` / `error` 并集。
- *
- * **想加图标 / 单位 / 按钮 / 协议头?用 InputGroup 复合插槽:**
- * ```tsx
- * import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/input-group/input-group';
- * // 搜索图标 + 输入
- * <InputGroup>
- *   <InputGroupAddon position="before" variant="icon"><Search /></InputGroupAddon>
- *   <InputGroupInput placeholder="搜索..." />
- * </InputGroup>
- * // URL(text 前后缀)
- * <InputGroup>
- *   <InputGroupAddon position="before">https://</InputGroupAddon>
- *   <InputGroupInput defaultValue="example" />
- *   <InputGroupAddon position="after">.com</InputGroupAddon>
- * </InputGroup>
- * ```
- */
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className,
-      type = 'text',
-      clearable = false,
-      showCount = false,
-      size = 'md',
-      error = false,
-      value,
-      defaultValue,
-      onChange,
-      maxLength,
-      disabled,
-      'aria-invalid': ariaInvalidProp,
-      ...props
-    },
-    ref,
-  ) => {
-    // 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 current = isControlled ? value : internal;
-
-    const innerRef = React.useRef<HTMLInputElement | null>(null);
-    React.useImperativeHandle(ref, () => innerRef.current as HTMLInputElement);
-
-    const ariaInvalid = ariaInvalidProp ?? (error ? true : undefined);
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (!isControlled) setInternal(e.target.value);
-      onChange?.(e);
-    };
-
-    const handleClear = () => {
-      if (!isControlled) setInternal('');
-      const target = innerRef.current;
-      if (target) {
-        const proto = Object.getPrototypeOf(target);
-        const desc = Object.getOwnPropertyDescriptor(proto, 'value');
-        desc?.set?.call(target, '');
-        target.dispatchEvent(new Event('input', { bubbles: true }));
-      }
-    };
-
-    const showClearBtn =
-      clearable && current && current.length > 0 && !disabled;
-
-    const innerInput = clearable ? (
-      <div
-        aria-invalid={ariaInvalid}
-        className={cn(
-          inputWrapperVariants({ size }),
-          disabled && 'cursor-not-allowed opacity-50',
-          className,
-        )}
-      >
-        <input
-          ref={innerRef}
-          type={type}
-          value={isControlled ? value : undefined}
-          defaultValue={!isControlled ? defaultValue : undefined}
-          maxLength={maxLength}
-          disabled={disabled}
-          aria-invalid={ariaInvalid}
-          onChange={handleChange}
-          className="grow bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
-          {...props}
-        />
-        {showClearBtn ? (
-          <button
-            type="button"
-            onClick={handleClear}
-            aria-label="Clear"
-            className="shrink-0 cursor-pointer rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          >
-            <X className="size-4" />
-          </button>
-        ) : null}
-      </div>
-    ) : (
-      <input
-        ref={innerRef}
-        type={type}
-        value={isControlled ? value : undefined}
-        defaultValue={!isControlled ? defaultValue : undefined}
-        maxLength={maxLength}
-        disabled={disabled}
-        aria-invalid={ariaInvalid}
-        onChange={handleChange}
-        className={cn(inputVariants({ size }), className)}
-        {...props}
-      />
-    );
-
-    if (showCount && maxLength) {
-      return (
-        <div className="flex flex-col gap-1">
-          {innerInput}
-          <div className="text-right text-xs text-muted-foreground tabular-nums">
-            {current?.length ?? 0} / {maxLength}
-          </div>
-        </div>
-      );
-    }
-    return innerInput;
-  },
-);
-Input.displayName = 'Input';
-
-export { Input, inputVariants };

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

@@ -1,124 +0,0 @@
----
-id: input-group
-name: InputGroup
-type: component
-category: data-entry
-since: 0.2.0
-package: '@teamix-evo/ui'
-displayName: 输入框组
----
-
-# InputGroup 输入框组
-
-输入框 + addon 统一容器 — **shadcn 2025-10 新增**。等价 antd `Input` 的 `prefix` / `suffix` / `addonBefore` / `addonAfter` 集合,**单独一个 entry**,与 [`Input`](../input/input.meta.md) 拆开管理(对齐 shadcn 2025-10 拆分粒度)。
-
-复合插槽:`<InputGroupAddon position variant>` + `<InputGroupInput>` / `<InputGroupTextarea>`,自由嵌套图标 / 按钮 / 文本(URL / 金额 / 搜索 / Send 等形态)。容器外壳承担 border + ring + focus-within,内部全部去边框 — 与 Input / Button / Select 同档高度(32px)。
-
-## When to use
-
-- 输入框需要**前 / 后缀**(`https://` `.com`、`¥`、`/ 月`)
-- 输入框 + 操作按钮(搜索、清空、复制、Send)
-- 输入框 + 图标(搜索、loading spinner、状态指示)
-- Textarea + 上传 / 录音 / 发送类辅助按钮
-
-## When NOT to use
-
-- 仅"一键清空" → `Input` 自带 `clearable`,无需 InputGroup 包裹
-- 字符计数 → `Input` 自带 `showCount` + `maxLength`
-- @提及输入 → `Mentions`
-- 多个**独立**输入框横排(姓 / 名 / 中间名)→ 用 `Flex` 直接 gap 排列,不要套 InputGroup(InputGroup 的"统一外壳"语义不适用)
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `disabled` | `boolean` | – | – | 整组禁用样式(子项请单独传 `disabled`,这里仅影响视觉上的 opacity)。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add input-group` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-_无 — 本组件不依赖任何 npm 包。_
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **顺序按 JSX 写**:`<InputGroup>` 内的子节点顺序就是渲染顺序 —— `<InputGroupAddon position="before" />` 必须在主体前
-- **不要在 `InputGroupAddon` 里再放 Input** —— addon 是辅助槽,主输入必须用 `InputGroupInput` / `InputGroupTextarea`
-- **`variant="icon"`** 给图标用(无背景、紧凑);**`variant="text"`** 给纯文本前后缀(muted 背景);**`variant="button"`** 给嵌入 Button(去内边距 + 去圆角,避免双重边线)
-- **嵌入 `Button`**:用 `<InputGroupAddon variant="button">` 包,Button 自身 `variant="ghost"` 或 `size="icon"` 效果最自然
-- **不要套两层** —— `<InputGroup>` 内不要再嵌 `<Input>`(主输入用 `<InputGroupInput>`,因为 Input 自带 border 会与外壳冲突 1px 几何)
-- **error 态走子项 `aria-invalid`** —— InputGroup 不直接支持 `error` prop,把 `aria-invalid` 写在 `InputGroupInput` 上即可触发外壳的 destructive 边框
-- **不要硬编码颜色** —— `bg-background` / `border-input` / `bg-muted` 都是 design token
-
-## Examples
-
-```tsx
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-  InputGroupTextarea,
-} from '@/components/ui/input-group';
-import { Button } from '@/components/ui/button';
-import { Search, Send } from 'lucide-react';
-
-// 搜索图标 + 输入(替代旧 <Input prefix={<Search />} />)
-<InputGroup>
-  <InputGroupAddon position="before" variant="icon">
-    <Search className="size-4" />
-  </InputGroupAddon>
-  <InputGroupInput placeholder="搜索文档..." />
-</InputGroup>
-
-// URL 输入(替代旧 <Input addonBefore="https://" addonAfter=".com" />)
-<InputGroup>
-  <InputGroupAddon position="before">https://</InputGroupAddon>
-  <InputGroupInput defaultValue="example" />
-  <InputGroupAddon position="after">.com</InputGroupAddon>
-</InputGroup>
-
-// 金额输入
-<InputGroup>
-  <InputGroupAddon position="before">¥</InputGroupAddon>
-  <InputGroupInput type="number" defaultValue={199} />
-  <InputGroupAddon position="after">/ 月</InputGroupAddon>
-</InputGroup>
-
-// Textarea + 发送按钮
-<InputGroup className="items-end">
-  <InputGroupTextarea rows={3} placeholder="发表评论..." />
-  <InputGroupAddon position="after" variant="button">
-    <Button size="icon" icon={<Send />} aria-label="发送" />
-  </InputGroupAddon>
-</InputGroup>
-```
-
-## Migration · 从旧 `Input` 快捷 prop 迁移
-
-> v0.2 起 `<Input>` 的 `prefix` / `suffix` / `addonBefore` / `addonAfter` 已**移除**。请改用 InputGroup 复合 API(更灵活、可嵌任意子节点)。
-
-| 旧用法(已移除)                      | 新用法                                                                                                                                                      |
-| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `<Input prefix={<Search />} />`     | `<InputGroup><InputGroupAddon position="before" variant="icon"><Search /></InputGroupAddon><InputGroupInput /></InputGroup>`                                |
-| `<Input suffix={<Mail />} />`       | `<InputGroup><InputGroupInput /><InputGroupAddon position="after" variant="icon"><Mail /></InputGroupAddon></InputGroup>`                                   |
-| `<Input addonBefore="https://" />`  | `<InputGroup><InputGroupAddon position="before">https://</InputGroupAddon><InputGroupInput /></InputGroup>`                                                 |
-| `<Input addonAfter=".com" />`       | `<InputGroup><InputGroupInput /><InputGroupAddon position="after">.com</InputGroupAddon></InputGroup>`                                                      |
-| `<Input prefix="¥" suffix="USD" />` | `<InputGroup><InputGroupAddon position="before">¥</InputGroupAddon><InputGroupInput /><InputGroupAddon position="after">USD</InputGroupAddon></InputGroup>` |
-
-> 保留在 Input 的快捷能力:`clearable`(逻辑) / `showCount`(下方计数)/ `size` / `error` —— 这些与"前后缀"语义无关,继续作为 Input 的内建逻辑能力。