@teamix-evo/ui 0.3.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/demo/basic.tsx

@@ -1,12 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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