@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/icon/icon.tsx

@@ -1,248 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/utils/cn';
-
-// ─── cva: 内层 svg 样式(承担 size + color + spin)─────────────────────────────
-//
-// `[&>svg]:size-full` 让 size class 应用到 span 后,svg 自动撑满容器。
-// 这样 ref / aria 类型都统一为 HTMLSpanElement,与 spinner 范本一致。
-
-export const iconInnerVariants = cva(
-  'inline-block shrink-0 align-[-0.125em] [&>svg]:size-full',
-  {
-    variants: {
-      size: {
-        xs: 'size-3', // 12px
-        sm: 'size-4', // 16px
-        md: 'size-5', // 20px(默认)
-        lg: 'size-6', // 24px
-        xl: 'size-7', // 28px
-        '2xl': 'size-9', // 36px
-        '3xl': 'size-12', // 48px
-        // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- `inherit` 档语义为跟随父级字号(em 单位),无法用 Tailwind token 刻度表达。
-        inherit: 'size-[1em]',
-      },
-      color: {
-        default: 'text-current',
-        muted: 'text-muted-foreground',
-        primary: 'text-primary',
-        success: 'text-success',
-        warning: 'text-warning',
-        destructive: 'text-destructive',
-      },
-      spin: { true: 'animate-spin' },
-    },
-    defaultVariants: { size: 'md', color: 'default' },
-  },
-);
-
-// ─── cva: 外层带背景容器(variant=circle/square 启用)──────────────────────
-//
-// 容器 size = inner size + 内边距,预留视觉舒适空间;inner svg 进入容器后什么都不变(1:1 联动),
-// 容器外边距由 size class 差(容器 size N → inner size N-2 → 单侧 padding 约 6–18px)推导。
-
-export const iconContainerVariants = cva(
-  'inline-flex items-center justify-center shrink-0',
-  {
-    variants: {
-      variant: {
-        plain: '',
-        circle: 'rounded-full',
-        square: 'rounded-md',
-      },
-      color: {
-        default: 'bg-muted text-foreground',
-        muted: 'bg-muted text-muted-foreground',
-        primary: 'bg-accent text-accent-foreground',
-        success: 'bg-success-subtle text-success',
-        warning: 'bg-warning-subtle text-warning',
-        destructive: 'bg-destructive/10 text-destructive',
-      },
-      size: {
-        xs: 'size-5', // 20px → inner xs(12px)
-        sm: 'size-6', // 24px → inner sm(16px)
-        md: 'size-8', // 32px → inner md(20px)
-        lg: 'size-10', // 40px → inner lg(24px)
-        xl: 'size-12', // 48px → inner xl(28px)
-        '2xl': 'size-14', // 56px → inner 2xl(36px)
-        '3xl': 'size-16', // 64px → inner 3xl(48px)
-        // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- `inherit` 档容器尺寸跟随父级字号(em 单位),无法用 Tailwind token 刻度表达。
-        inherit: 'size-[1.75em]',
-      },
-    },
-    defaultVariants: { variant: 'plain', color: 'default', size: 'md' },
-  },
-);
-
-export type IconInnerVariants = VariantProps<typeof iconInnerVariants>;
-export type IconContainerVariants = VariantProps<typeof iconContainerVariants>;
-
-// ─── Props ──────────────────────────────────────────────────────────────────
-
-type IconSize = NonNullable<IconInnerVariants['size']>;
-type IconColor = NonNullable<IconInnerVariants['color']>;
-type IconVariant = 'plain' | 'circle' | 'square';
-
-export interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /**
-   * 渲染目标 — 必填。lucide-react / 自定义 svg / iconfont 工厂返回的组件均可。
-   * 单一 children 通道,不再提供 `icon` prop(避免 `<Icon icon=...>` 组件名 + 同名 prop 的语义冗余)。
-   */
-  children: React.ReactNode;
-  /**
-   * 形态 — 决定是否带背景容器。
-   * - `plain`:无背景,size 直接控前景 svg(默认)
-   * - `circle` / `square`:带 `color` 配色的背景容器,inner svg 自动小一档
-   * @default "plain"
-   */
-  variant?: IconVariant;
-  /**
-   * 语义色 — 6 档枚举,字面与 OpenTrek tokens 对齐(见 [ADR 0021](../../../../../docs/adr/0021-semantic-color-api-unification.md))。
-   * - `variant=plain` 时控前景色
-   * - `variant=circle/square` 时同时控容器背景 + 前景(浅底深字)
-   * @default "default"
-   */
-  color?: IconColor;
-  /**
-   * 尺寸 — 7 档枚举 + inherit。`inherit` 走 `1em`,跟随父级字号(用于 Title / Button 内联场景)。
-   * 当 `variant!=plain` 时,该 size 指容器尺寸,inner svg 自动用对应小一档。
-   * @default "md"
-   */
-  size?: IconSize;
-  /**
-   * 旋转动效 — 与 antd Icon `spin` 对齐,Tailwind `animate-spin` 实现。
-   * @default false
-   */
-  spin?: boolean;
-  /**
-   * 静态旋转角度(度数)— 与 antd Icon `rotate` 对齐,通过 inline transform 实现。
-   * 与 `spin` 同时使用语义模糊,不建议同用。
-   */
-  rotate?: number;
-  /**
-   * Slot 模式 — 把渲染目标交给消费方提供的子元素。开启时 `variant` 强制走 plain。
-   * @default false
-   */
-  asChild?: boolean;
-  /**
-   * 装饰性图标(默认 true,自动 `aria-hidden="true"`)。
-   * 当图标承载语义信息时设为 false,**必须**同时提供 `aria-label` 或被 `<button aria-label>` 包裹。
-   * @default true
-   */
-  decorative?: boolean;
-}
-
-// inner svg size class— 在带背景容器内使用(外层容器已提供 padding、flex 居中、color 前景色继承)。
-
-const innerSizeClass: Record<IconSize, string> = {
-  xs: 'size-3',
-  sm: 'size-4',
-  md: 'size-5',
-  lg: 'size-6',
-  xl: 'size-7',
-  '2xl': 'size-9',
-  '3xl': 'size-12',
-  // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- `inherit` 档跟随父级字号(em 单位),无法用 Tailwind token 表达。
-  inherit: 'size-[1em]',
-};
-
-/**
- * Icon 图标容器 — 纯样式包裹层。
- *
- * 单一 children 通道(对齐 Mantine ThemeIcon),不再有 `icon` prop;
- * `variant + color` 双轴(对齐 ADR 0021),不再有 `withBackground/shape/bgTone` 三轨。
- * 7 档 size + spin/rotate + Slot + 装饰/非装饰无障碍。
- *
- * className / style 在所有分支均合并到外层根节点,完整透传。
- */
-const Icon = React.forwardRef<HTMLSpanElement, IconProps>(
-  (
-    {
-      children,
-      variant = 'plain',
-      color = 'default',
-      size = 'md',
-      spin,
-      rotate,
-      asChild = false,
-      decorative = true,
-      className,
-      style,
-      ...rest
-    },
-    ref,
-  ) => {
-    const ariaProps: React.AriaAttributes & { role?: string } = decorative
-      ? { 'aria-hidden': true }
-      : { role: rest.role ?? 'img' };
-
-    const rotateStyle: React.CSSProperties | undefined = rotate
-      ? { transform: `rotate(${rotate}deg)` }
-      : undefined;
-    const mergedStyle: React.CSSProperties | undefined =
-      rotateStyle || style ? { ...rotateStyle, ...style } : undefined;
-
-    // 分支 C:Slot 模式 — 强制走 plain 形态,把所有 className / style / aria 合并到子元素根节点。
-    if (asChild) {
-      return (
-        <Slot
-          ref={ref}
-          className={cn(iconInnerVariants({ size, color, spin }), className)}
-          style={mergedStyle}
-          {...ariaProps}
-          {...rest}
-        >
-          {children}
-        </Slot>
-      );
-    }
-
-    // 分支 B:带背景容器(variant=circle/square)— 双 span 嵌套。
-    // 外层接 className / style / aria / ...rest 并提供背景 + color 前景色;
-    // inner span 只承担 svg size,color 从外层 `text-*` 继承(currentColor)。
-    if (variant !== 'plain') {
-      return (
-        <span
-          ref={ref}
-          className={cn(
-            iconContainerVariants({ variant, color, size }),
-            className,
-          )}
-          style={mergedStyle}
-          {...ariaProps}
-          {...rest}
-        >
-          <span
-            className={cn(
-              'inline-flex shrink-0 [&>svg]:size-full',
-              innerSizeClass[size],
-              spin && 'animate-spin',
-            )}
-          >
-            {children}
-          </span>
-        </span>
-      );
-    }
-
-    // 分支 A:plain — 单 span 包裹,size class 与 [&>svg]:size-full 直接生效。
-    if (children == null) return null;
-
-    return (
-      <span
-        ref={ref}
-        className={cn(iconInnerVariants({ size, color, spin }), className)}
-        style={mergedStyle}
-        {...ariaProps}
-        {...rest}
-      >
-        {children}
-      </span>
-    );
-  },
-);
-Icon.displayName = 'Icon';
-
-export { Icon };

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

@@ -1,99 +0,0 @@
----
-id: image
-name: Image
-displayName: 图片
-type: component
-category: deprecated
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Image 图片
-
-图片 — antd 独有补足。**自动处理加载态(Skeleton 占位)+ 失败态(图标)+ 点击预览**(Dialog 模态展示原图)。
-
-## When to use
-
-- 用户上传 / 远程图片(尺寸不可控,需要占位避免布局抖动)
-- 详情页大图 + 点击放大查看
-- 图片画廊 / 缩略图列表
-
-## When NOT to use
-
-- 装饰图标 → `lucide-react`
-- 强需求 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)。 |
-<!-- 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,size sm/md/lg/xl 绑定 layout-dialog tokens,圆角 radius-dialog 16px,无 border) |
-| `skeleton` | component | 骨架屏 — shadcn pulse 单元素 + antd Avatar/Image/Button/Input/Paragraph 子家族,自动 motion-reduce |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **`alt` 必填**:无障碍要求(屏幕阅读器朗读)
-- **`width / height` 或容器 `className` 必有一个**:否则加载前占位高度为 0,导致布局抖动
-- **`preview={false}` 用于头像 / 小缩略图**:不需要点击放大的场景
-- **`fallback` 自定义占位**:品牌侧统一图(LOGO 灰)用 `<img src="/fallback.svg" />` 传入
-- **不要嵌套 Image**:嵌套预览模态行为混乱
-
-## Examples
-
-```tsx
-import { Image } from '@/components/ui/image';
-
-// 基础(自带预览)
-<Image
-  src="/cover.jpg"
-  alt="项目封面"
-  className="rounded-md"
-  imgClassName="size-64 object-cover"
-/>
-
-// 关闭预览
-<Image
-  src="/avatar.jpg"
-  alt="头像"
-  preview={false}
-  imgClassName="size-10 rounded-full object-cover"
-/>
-
-// 自定义失败占位
-<Image
-  src="/might-fail.jpg"
-  alt="..."
-  fallback={<img src="/brand-fallback.svg" alt="" />}
-  imgClassName="size-32 object-cover"
-/>
-```

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

@@ -1,55 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Image } from './image';
-
-const meta: Meta<typeof Image> = {
-  title: '废弃 · Deprecated/Image',
-  component: Image,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n图片 — 自动处理加载（Skeleton 占位）+ 失败（图标占位）+ 点击预览（Dialog 模态原图）。alt 必填（无障碍）。等价 antd Image。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Image>;
-
-export const Default: Story = {
-  render: () => (
-    <Image
-      src="https://placehold.co/640x360/e5e7eb/6b7280?text=Cover"
-      alt="封面"
-      className="rounded-md"
-      imgClassName="w-64 object-cover"
-    />
-  ),
-};
-
-export const Avatar: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Image
-      src="https://github.com/shadcn.png"
-      alt="头像"
-      preview={false}
-      className="rounded-full"
-      imgClassName="size-12 object-cover rounded-full"
-    />
-  ),
-};
-
-export const ErrorState: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Image
-      src="https://this-domain-does-not-exist-xyz.example/x.jpg"
-      alt="加载失败示例"
-      className="rounded-md"
-      imgClassName="size-48 object-cover"
-    />
-  ),
-};

package/src/components/image/image.tsx

@@ -1,140 +0,0 @@
-import * as React from 'react';
-import { ImageOff, X } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/dialog/dialog';
-import { Skeleton } from '@/components/skeleton/skeleton';
-
-export interface ImageProps
-  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'placeholder'> {
-  src: string;
-  alt: string;
-  /**
-   * 是否启用点击预览(antd `preview` 并集) — 点击后弹模态展示原图。
-   * @default true
-   */
-  preview?: boolean;
-  /**
-   * 加载失败时显示的占位元素;不传则用默认 `ImageOff` 图标。
-   */
-  fallback?: React.ReactNode;
-  /**
-   * 加载中显示的占位 — 默认 Skeleton 占位与图片同尺寸。
-   */
-  placeholder?: React.ReactNode;
-  /** 容器 className(图片本身用 `imgClassName`)。 */
-  className?: string;
-  /** 真实 `<img>` 的 className(尺寸 / 圆角 / object-fit)。 */
-  imgClassName?: string;
-}
-
-const Image = React.forwardRef<HTMLImageElement, ImageProps>(
-  (
-    {
-      src,
-      alt,
-      preview = true,
-      fallback,
-      placeholder,
-      className,
-      imgClassName,
-      onLoad,
-      onError,
-      ...props
-    },
-    ref,
-  ) => {
-    const [status, setStatus] = React.useState<
-      'loading' | 'loaded' | 'error'
-    >('loading');
-
-    const img = (
-      <img
-        ref={ref}
-        src={src}
-        alt={alt}
-        onLoad={(e) => {
-          setStatus('loaded');
-          onLoad?.(e);
-        }}
-        onError={(e) => {
-          setStatus('error');
-          onError?.(e);
-        }}
-        className={cn(
-          'block transition-opacity',
-          status !== 'loaded' && 'opacity-0',
-          imgClassName,
-        )}
-        {...props}
-      />
-    );
-
-    const overlay = (
-      <>
-        {status === 'loading' ? (
-          <div className="absolute inset-0">
-            {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">
-            {fallback ?? (
-              <>
-                <ImageOff className="size-6" />
-                <span className="text-xs">加载失败</span>
-              </>
-            )}
-          </div>
-        ) : null}
-      </>
-    );
-
-    const inner = (
-      <span
-        className={cn(
-          'relative inline-block overflow-hidden',
-          preview &&
-            status === 'loaded' &&
-            'cursor-zoom-in transition-opacity hover:opacity-90',
-          className,
-        )}
-      >
-        {img}
-        {overlay}
-      </span>
-    );
-
-    if (!preview || status !== 'loaded') return inner;
-
-    return (
-      <Dialog>
-        <DialogTrigger asChild>{inner}</DialogTrigger>
-        <DialogContent
-          className="max-w-image-preview border-0 bg-transparent p-0 shadow-none"
-          showClose={false}
-        >
-          <DialogTitle className="sr-only">{alt}</DialogTitle>
-          <div className="relative">
-            <img
-              src={src}
-              alt={alt}
-              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" />
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  },
-);
-Image.displayName = 'Image';
-
-export { Image };

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` 示例。