@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/alert/alert.tsx

@@ -1,179 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { CircleCheck, CircleX, Info, TriangleAlert, X } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-/**
- * Alert 卡片 —— 无边框、纯色块底分界。
- *
- * 视觉决策:
- *   - **去边框**(`border-0`):依靠 `*-subtle` 浅色背景与卡片底色对比,减少线条切割
- *   - **`p-4`** 内间距:对齐 OpenTrek 间距档(4px 倍数),比旧版 `px-4 py-3` 上下更对称
- *   - **面性 icon**:`fill-* + text-*-foreground`,实心圆/三角,与 Sonner 同源
- */
-const alertVariants = cva(
-  'relative w-full rounded-md border-0 p-4 text-xs [&>svg]:size-5 [&>svg+div]:translate-y-[-2px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8',
-  {
-    variants: {
-      color: {
-        primary: 'bg-primary/10 text-primary',
-        info: 'bg-info-subtle text-info',
-        success: 'bg-success-subtle text-success',
-        warning: 'bg-warning-subtle text-warning',
-        destructive: 'bg-destructive/10 text-destructive',
-        neutral: 'bg-muted text-foreground',
-      },
-      banner: {
-        true: 'rounded-none',
-        false: '',
-      },
-    },
-    defaultVariants: { color: 'primary', banner: false },
-  },
-);
-
-type AlertColor =
-  | 'primary'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'destructive'
-  | 'neutral';
-
-/**
- * 面性图标映射 —— 通过 `fill-*` 填充语义色, `text-*-foreground` 设置 currentColor 作为
- * 描边对比色, 形成 "色块底 + 高对比记号" 的实心视觉。`neutral` / `primary` 用线性
- * Info(中性提示不需要强烈的色块感)。
- */
-const colorIcon: Record<AlertColor, { Icon: typeof Info; className: string }> =
-  {
-    primary: { Icon: Info, className: 'text-primary' },
-    info: { Icon: Info, className: 'fill-info text-info-foreground' },
-    success: {
-      Icon: CircleCheck,
-      className: 'fill-success text-success-foreground',
-    },
-    warning: {
-      Icon: TriangleAlert,
-      className: 'fill-warning text-warning-foreground',
-    },
-    destructive: {
-      Icon: CircleX,
-      className: 'fill-destructive text-destructive-foreground',
-    },
-    neutral: { Icon: Info, className: 'text-muted-foreground' },
-  };
-
-export interface AlertProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'color'>,
-    VariantProps<typeof alertVariants> {
-  /**
-   * 语义色 — 控制配色与默认图标。
-   *
-   * - `primary` 主色(默认,中性提示)
-   * - `info` 信息蓝(强调"知会"语义)
-   * - `success` 成功
-   * - `warning` 警告
-   * - `destructive` 错误(对齐 ADR 0021,禁用 `error` / `danger` 别名)
-   * - `neutral` 中性灰(纯文本提示,不带语义压力)
-   * @default "primary"
-   */
-  color?:
-    | 'primary'
-    | 'info'
-    | 'success'
-    | 'warning'
-    | 'destructive'
-    | 'neutral';
-  /**
-   * 是否显示图标(antd `showIcon` 并集)。
-   * @default true
-   */
-  showIcon?: boolean;
-  /**
-   * 是否可关闭,显示右侧 X 按钮(antd `closable` 并集)。
-   * @default false
-   */
-  closable?: boolean;
-  /**
-   * 关闭按钮点击回调。
-   */
-  onClose?: () => void;
-  /**
-   * Banner 模式 — 去除横向圆角,沿屏幕宽度铺满,常用于全局公告条。
-   * @default false
-   */
-  banner?: boolean;
-  /** 标题(粗体行)。 */
-  title?: React.ReactNode;
-  /** 描述(标题下方主体内容)。 */
-  description?: React.ReactNode;
-}
-
-const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-  (
-    {
-      className,
-      color = 'primary',
-      showIcon = true,
-      closable = false,
-      onClose,
-      banner = false,
-      title,
-      description,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [open, setOpen] = React.useState(true);
-    if (!open) return null;
-    const { Icon, className: iconClassName } = colorIcon[color];
-    return (
-      <div
-        ref={ref}
-        role="alert"
-        className={cn(
-          alertVariants({ color, banner }),
-          closable ? 'pr-10' : '',
-          className,
-        )}
-        {...props}
-      >
-        {showIcon ? (
-          <Icon aria-hidden="true" className={iconClassName} />
-        ) : null}
-        <div className={cn(showIcon ? '' : 'pl-0')}>
-          {title ? (
-            <h5 className="mb-1 font-medium leading-none tracking-tight">
-              {title}
-            </h5>
-          ) : null}
-          {description ? (
-            <div className="text-xs opacity-90 [&_p]:leading-relaxed">
-              {description}
-            </div>
-          ) : null}
-          {children}
-        </div>
-        {closable ? (
-          <button
-            type="button"
-            onClick={() => {
-              setOpen(false);
-              onClose?.();
-            }}
-            aria-label="Close"
-            className="absolute right-3 top-3 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          >
-            <X className="size-4" />
-          </button>
-        ) : null}
-      </div>
-    );
-  },
-);
-Alert.displayName = 'Alert';
-
-export { Alert, alertVariants };

package/src/components/alert-dialog/alert-dialog.meta.md

@@ -1,152 +0,0 @@
----
-id: alert-dialog
-name: AlertDialog
-displayName: 确认对话框
-type: component
-category: feedback
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# AlertDialog 确认对话框
-
-阻断式确认对话框 — Radix AlertDialog + antd `Modal.confirm` 并集。视觉上与 [Dialog](../dialog/dialog.meta.md) **同源**(圆角 `--radius-dialog`、无 border、纯白 + shadow 分界),`size` 四档同样绑定 `--layout-dialog-{sm|md|lg|xl}`,仅默认尺寸为 `sm`(确认场景文案短、信息少)。
-
-**与 Dialog 关键差异**:
-
-- 不可点击外部 / ESC 关闭(强制选择 Action / Cancel)
-- 自带 Action / Cancel 子组件,默认走 Button 视觉
-- 无右上角 X 关闭按钮(避免误关 → P4 Safety)
-- 默认 `size="sm"`(Dialog 默认 `md`)
-
-设计依据:`teamix-evo-design-opentrek` skill `philosophy.md` P4 Safety + `checklist.md` §8 安全 — 危险操作必须二次确认。
-
-## When to use
-
-- 删除 / 释放 / 强制重启等**不可逆**操作
-- 离开未保存表单的拦截
-- 高危 SaaS 操作(关闭账号、清空数据)
-- 替代 antd `Modal.confirm` / `Modal.alert` 等命令式 API 的声明式确认场景
-
-## When NOT to use
-
-- 普通编辑确认 → `Dialog`(可关闭、可取消、size 默认更大)
-- 一次性提示 → `Sonner`
-- 非阻断的状态提示 → `Alert`
-
-## Size 档位(token 绑定)
-
-| size | token              | OpenTrek 基准 | 典型场景                             |
-| ---- | ------------------ | ------------- | ------------------------------------ |
-| `sm` | `--layout-dialog-sm` | 400px         | **默认**,确认 / 警告 / 简短提示      |
-| `md` | `--layout-dialog-md` | 600px         | 含影响范围列表 / 多段描述的确认      |
-| `lg` | `--layout-dialog-lg` | 800px         | 需展示资源清单 / 影响图谱的高危确认  |
-| `xl` | `--layout-dialog-xl` | 1200px        | 罕见;大表预览 + 批量确认            |
-
-> 确认对话框定位是"短、快、清",不要无脑放大 — 高危场景反而需要用户聚焦关键信息。
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `AlertDialogContent` 的 props;`AlertDialog`(Root)透传 Radix `open / defaultOpen / onOpenChange`。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `size` | `AlertDialogSize` | `"sm"` | – | 确认对话框尺寸 — 绑定 design tokens `--layout-dialog-{sm\|md\|lg\|xl}`。 OpenTrek 基准:sm=400 / md=600 / lg=800 / xl=1200。 确认场景文案短、信息少,默认 `sm`。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add alert-dialog` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-alert-dialog@^1.1.0 class-variance-authority@^0.7.0
-```
-<!-- auto:deps:end -->
-
-> 子组件:`AlertDialog`(Root)/ `AlertDialogTrigger` / `AlertDialogContent` / `AlertDialogHeader` / `AlertDialogFooter` / `AlertDialogTitle` / `AlertDialogDescription` / `AlertDialogAction` / `AlertDialogCancel`。
-
-## AI 生成纪律
-
-- **危险动作 Action 必用 destructive variant**:`<AlertDialogAction className={buttonVariants({ variant: 'destructive' })}>...`
-- **Description 列出影响范围**:遵循 design checklist §8 — 删除时列出资源标识 + 影响范围
-- **高危操作要求输入名称校验**(超出 AlertDialog 单次使用范围,但提醒在 Description 引导用户)
-- **Cancel 永远在左,Action 永远在右**:遵循 design P3 Predictability;**不要**为了"突出取消"反置
-- **Title ≤ 1 行**:简短指令式("确认删除?"),Description 才放细节
-- **`size` 沿用默认 `sm` 优先**:确认场景信息少、需聚焦,不要为了"显得正式"放大到 `md`/`lg`;只有需要列出资源清单或影响图谱时再升档
-- **不要硬编码圆角 / 宽度**:与 Dialog 同源,`--radius-dialog` 与 `--layout-dialog-*` 已绑定,禁止在 `className` 覆盖
-- **不要补 X 关闭按钮**:`AlertDialog` 故意不给 X(P4 Safety,避免误关),如果你觉得"应该能直接关",请改用 [Dialog](../dialog/dialog.meta.md)
-
-## Examples
-
-```tsx
-import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from '@/components/ui/alert-dialog';
-import { Button, buttonVariants } from '@/components/ui/button';
-
-// 高危删除(destructive action)
-<AlertDialog>
-  <AlertDialogTrigger asChild>
-    <Button variant="destructive">删除项目</Button>
-  </AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>确认删除项目?</AlertDialogTitle>
-      <AlertDialogDescription>
-        将永久删除 <b>"运营后台"</b> 项目及其下 142 个资源。
-        <br />
-        此操作不可撤销。
-      </AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>取消</AlertDialogCancel>
-      <AlertDialogAction
-        className={buttonVariants({ variant: 'destructive' })}
-        onClick={() => doDelete()}
-      >
-        删除
-      </AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>;
-
-// 含影响清单的大尺寸确认
-<AlertDialogContent size="md">
-  {/* ... 列出资源标识 / 关联依赖 / 备份提醒 ... */}
-</AlertDialogContent>;
-
-// 普通业务确认(Action 用默认 primary)
-<AlertDialogContent>
-  <AlertDialogHeader>
-    <AlertDialogTitle>确认提交?</AlertDialogTitle>
-    <AlertDialogDescription>提交后 5 分钟内可取消。</AlertDialogDescription>
-  </AlertDialogHeader>
-  <AlertDialogFooter>
-    <AlertDialogCancel>取消</AlertDialogCancel>
-    <AlertDialogAction>确认</AlertDialogAction>
-  </AlertDialogFooter>
-</AlertDialogContent>;
-```

package/src/components/alert-dialog/alert-dialog.stories.tsx

@@ -1,223 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from './alert-dialog';
-import { Button, buttonVariants } from '@/components/button/button';
-
-const meta: Meta<typeof AlertDialogContent> = {
-  title: '反馈 · Feedback/AlertDialog',
-  component: AlertDialogContent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '确认对话框 —— 对高风险、不可逆的操作做二次拦截,强制用户在「确认 / 取消」之间做出选择。基于 Radix AlertDialog 内核(焦点陷阱 + ESC 行为受控 + `role="alertdialog"`)+ 对齐 antd `Modal.confirm` / `Modal.alert` 的双按钮范式(`AlertDialogAction` / `AlertDialogCancel`);视觉上与 `Dialog` 同源(`--radius-dialog` 16px、无 border、纯白 + shadow 分界),`size` 四档绑定 `--layout-dialog-{sm|md|lg|xl}`,默认 `sm`(确认场景信息密度低)。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'inline-radio',
-      options: ['sm', 'md', 'lg', 'xl'],
-      description:
-        '宽度档位,绑定 `--layout-dialog-{sm|md|lg|xl}`(OpenTrek 400/600/800/1200px)',
-    },
-  },
-  args: { size: 'sm' },
-};
-
-export default meta;
-type Story = StoryObj<typeof AlertDialogContent>;
-
-export const Playground: Story = {
-  render: (args) => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="destructive">删除项目</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent {...args}>
-        <AlertDialogHeader>
-          <AlertDialogTitle>确认删除项目?</AlertDialogTitle>
-          <AlertDialogDescription>
-            将永久删除 <b>"运营后台"</b> 项目及其下 142 个资源。此操作不可撤销。
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>取消</AlertDialogCancel>
-          <AlertDialogAction
-            className={buttonVariants({ variant: 'destructive' })}
-          >
-            删除
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-};
-
-export const Destructive: Story = {
-  name: '高危删除(destructive)',
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="destructive">删除项目</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>确认删除项目?</AlertDialogTitle>
-          <AlertDialogDescription>
-            将永久删除 <b>"运营后台"</b> 项目及其下 142 个资源。
-            <br />
-            此操作不可撤销。
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>取消</AlertDialogCancel>
-          <AlertDialogAction
-            className={buttonVariants({ variant: 'destructive' })}
-          >
-            删除
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-};
-
-export const NormalConfirm: Story = {
-  name: '业务确认(primary action)',
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button>提交订单</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>确认提交?</AlertDialogTitle>
-          <AlertDialogDescription>
-            订单提交后 5 分钟内可取消,超时不可撤销。
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>取消</AlertDialogCancel>
-          <AlertDialogAction>确认</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-};
-
-export const AlertOnly: Story = {
-  name: 'Alert(单一确认,模拟 Modal.alert)',
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '只展示单个 Action 按钮 — 模拟 antd `Modal.alert` 的单确认形态。适用于"已完成"、"权限不足"等仅需告知的场景。',
-      },
-    },
-  },
-  render: () => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="outline">查看通知</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>升级完成</AlertDialogTitle>
-          <AlertDialogDescription>
-            已切换到企业版,新功能将在下次刷新页面后生效。
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogAction>知道了</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-};
-
-export const SizeMatrix: Story = {
-  name: 'Size 档位 · sm / md / lg / xl',
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '依次触发四档尺寸 — 确认对话框默认 `sm` 即可,只有当需要列出资源清单 / 影响图谱时才升档。',
-      },
-    },
-  },
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      {(['sm', 'md', 'lg', 'xl'] as const).map((size) => (
-        <AlertDialog key={size}>
-          <AlertDialogTrigger asChild>
-            <Button variant="outline">size = {size}</Button>
-          </AlertDialogTrigger>
-          <AlertDialogContent size={size}>
-            <AlertDialogHeader>
-              <AlertDialogTitle>确认操作?({size})</AlertDialogTitle>
-              <AlertDialogDescription>
-                宽度绑定 `--layout-dialog-{size}`,实际像素由当前主题变体的
-                tokens 决定。
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>取消</AlertDialogCancel>
-              <AlertDialogAction>确认</AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      ))}
-    </div>
-  ),
-};
-
-export const BorderlessShowcase: Story = {
-  name: '无 border border-border · 16px 圆角',
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '与 `Dialog` 同源 — `AlertDialogContent` 已 `border-0`,16px 圆角(`--radius-dialog`)由 tokens 提供。请不要在 `className` 里加 `border *` 或覆盖 `rounded-*`。',
-      },
-    },
-  },
-  render: () => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="destructive">释放实例</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>确认释放实例?</AlertDialogTitle>
-          <AlertDialogDescription>
-            释放后实例及挂载数据将无法恢复。请确认已完成数据备份。
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>取消</AlertDialogCancel>
-          <AlertDialogAction
-            className={buttonVariants({ variant: 'destructive' })}
-          >
-            确认释放
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-};