@teamix-evo/ui 0.1.1

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

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Alert } from './alert';
+
+const meta: Meta<typeof Alert> = {
+  title: '反馈与浮层 · Feedback/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '警告提示 — 在不打断用户操作的前提下展示重要信息。四种语义状态(`info` / `success` / `warning` / `error`)对齐 design 语义色；支持 `showIcon` 状态图标、`closable` 一键关闭、`banner` 顶部业务通告梨式。能力对齐 antd Alert，视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['info', 'success', 'warning', 'error'],
+    },
+    showIcon: { control: 'boolean' },
+    closable: { control: 'boolean' },
+    banner: { control: 'boolean' },
+    title: { control: 'text' },
+    description: { control: 'text' },
+  },
+  args: {
+    type: 'info',
+    showIcon: true,
+    closable: false,
+    banner: false,
+    title: '提示',
+    description: '数据将在 10 分钟后刷新。',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-96">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Alert>;
+
+export const Playground: Story = {};
+
+export const Types: Story = {
+  parameters: { controls: { disable: true } },
+  decorators: [(Story) => <div className="w-96">{Story()}</div>],
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Alert type="info" title="信息" description="一般性提示。" />
+      <Alert type="success" title="成功" description="操作已完成。" />
+      <Alert type="warning" title="警告" description="请注意可能的影响。" />
+      <Alert type="error" title="错误" description="操作失败,请重试。" />
+    </div>
+  ),
+};
+
+export const Closable: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Alert
+      type="warning"
+      title="账号即将过期"
+      description="请在 7 天内续费。"
+      closable
+    />
+  ),
+};
+
+export const Banner: Story = {
+  parameters: { controls: { disable: true } },
+  decorators: [(Story) => <div className="w-[600px]">{Story()}</div>],
+  render: () => (
+    <Alert
+      type="warning"
+      banner
+      title="系统维护"
+      description="本站将于 02:00 起暂停服务 30 分钟。"
+      closable
+    />
+  ),
+};
+
+export const NoIcon: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Alert type="info" showIcon={false} description="纯文本提示,无图标。" />
+  ),
+};

package/src/components/alert/alert.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle2,
+  Info,
+  X,
+} from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:size-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7',
+  {
+    variants: {
+      type: {
+        info: 'border-blue-200 bg-blue-50 text-blue-900 [&>svg]:text-blue-500 dark:border-blue-900/30 dark:bg-blue-950/40 dark:text-blue-100',
+        success:
+          'border-emerald-200 bg-emerald-50 text-emerald-900 [&>svg]:text-emerald-500 dark:border-emerald-900/30 dark:bg-emerald-950/40 dark:text-emerald-100',
+        warning:
+          'border-amber-200 bg-amber-50 text-amber-900 [&>svg]:text-amber-500 dark:border-amber-900/30 dark:bg-amber-950/40 dark:text-amber-100',
+        error:
+          'border-destructive/30 bg-destructive/10 text-destructive [&>svg]:text-destructive',
+      },
+      banner: {
+        true: 'rounded-none border-x-0',
+        false: '',
+      },
+    },
+    defaultVariants: { type: 'info', banner: false },
+  },
+);
+
+const typeIcon = {
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  error: AlertCircle,
+} as const;
+
+export interface AlertProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
+    VariantProps<typeof alertVariants> {
+  /**
+   * 类型(antd `type` 并集)— 控制语义色与默认图标。
+   * @default "info"
+   */
+  type?: 'info' | 'success' | 'warning' | 'error';
+  /**
+   * 是否显示图标(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,
+      type = 'info',
+      showIcon = true,
+      closable = false,
+      onClose,
+      banner = false,
+      title,
+      description,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = React.useState(true);
+    if (!open) return null;
+    const Icon = typeIcon[type];
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ type, banner }), className)}
+        {...props}
+      >
+        {showIcon ? <Icon aria-hidden="true" /> : 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-sm [&_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 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

@@ -0,0 +1,107 @@
+---
+id: alert-dialog
+name: AlertDialog
+type: component
+category: feedback
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# AlertDialog
+
+阻断式确认对话框 — Radix AlertDialog + antd `Modal.confirm` 并集。
+**与 Dialog 关键差异**:
+- 不可点击外部 / ESC 关闭(强制选择 Action / Cancel)
+- 自带 Action / Cancel 子组件,默认走 Button 视觉
+- 无右上角关闭按钮(避免误关)
+
+设计依据:design `principles.md` P4 Safety + `ai-rules/checklist.md` §8 安全 — 危险操作必须二次确认。
+
+## When to use
+
+- 删除 / 释放 / 强制重启等**不可逆**操作
+- 离开未保存表单的拦截
+- 高危 SaaS 操作(关闭账号、清空数据)
+
+## When NOT to use
+
+- 普通编辑确认 → `Dialog`(可关闭、可取消)
+- 一次性提示 → `Sonner`
+- 非阻断的状态提示 → `Alert`
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `AlertDialogContent` 的 props;`AlertDialog`(Root)透传 Radix `open / defaultOpen / onOpenChange`。
+
+<!-- auto:props:begin -->
+_(no props)_
+<!-- 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 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add @radix-ui/react-alert-dialog@^1.1.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 才放细节
+
+## Examples
+
+```tsx
+import {
+  AlertDialog, AlertDialogTrigger, AlertDialogContent,
+  AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
+  AlertDialogFooter, AlertDialogAction, AlertDialogCancel,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { buttonVariants } from '@/components/ui/button';
+
+<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>
+```

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

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+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，语义角色为 `alertdialog`，自动陷阱焦点 + ESC 关闭；Cancel + Action 双按钮范式对齐 antd `Modal.confirm`。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AlertDialogContent>;
+
+export const Destructive: Story = {
+  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 = {
+  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>
+  ),
+};

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

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@/utils/cn';
+import { buttonVariants } from '@/components/button/button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+export interface AlertDialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {}
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  AlertDialogContentProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/components/anchor/anchor.meta.md

@@ -0,0 +1,87 @@
+---
+id: anchor
+name: Anchor
+type: component
+category: navigation
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Anchor
+
+锚点导航 — antd 独有补足。**等价 antd `Anchor`**。长文档 / 详情页侧边的目录,点击锚点滚动到对应 `id` 节点,滚动时自动高亮当前可见的锚点(IntersectionObserver)。支持嵌套两层缩进。
+
+## When to use
+
+- 文档 / 帮助页 / 设置页的侧边目录
+- 长详情页(订单 / 用户 / 商品)的快捷跳转
+- 协议 / 隐私政策的章节导航
+
+## When NOT to use
+
+- 单页应用路由跳转 → `Link` / 路由库
+- 主导航(顶部 / 侧栏菜单)→ `NavigationMenu` / `Sidebar`
+- 步骤导航(顺序操作)→ `Steps`
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `items` | `AnchorItem[]` | – | ✓ | 锚点项树(antd `items` 并集)。 |
+| `offsetTop` | `number` | `0` | – | 当目标元素距视口顶部小于此值时高亮(IntersectionObserver `rootMargin`)。 |
+| `scrollBehavior` | `'smooth' \| 'auto'` | `"smooth"` | – | 点击锚点平滑滚动行为。 |
+| `onChange` | `(key: string) => void` | – | – | 当前高亮变化回调。 |
+<!-- auto:props:end -->
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add anchor` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+_无 — 本组件不依赖任何 npm 包。_
+<!-- auto:deps:end -->
+
+## AI 生成纪律
+
+- **必须给目标节点设 `id`** — Anchor 用 `document.getElementById(key)` 找元素;**不要**用 `data-*` 或 React ref
+- **`offsetTop` 与你的 Header 高度对齐** — 否则点击锚点后内容会被 header 遮挡
+- **`scrollBehavior="smooth"` 默认开** — 受用户系统 `prefers-reduced-motion` 影响,无需手动判断
+- **嵌套 ≤ 2 层** — 3 层以上侧栏拥挤;深结构改用 Tree 或折叠
+- **不要给 Anchor 包 Affix** — 直接 Tailwind `sticky top-N` 更轻
+- **`onChange`** 是只读回调(同步状态到 URL hash 等),**不要**在里面再调 scrollTo,会无限循环
+
+## Examples
+
+```tsx
+import { Anchor } from '@/components/ui/anchor';
+
+const items = [
+  { key: 'intro', title: '介绍' },
+  {
+    key: 'install',
+    title: '安装',
+    children: [
+      { key: 'npm', title: 'npm' },
+      { key: 'pnpm', title: 'pnpm' },
+    ],
+  },
+  { key: 'usage', title: '使用' },
+];
+
+<aside className="sticky top-16 w-56">
+  <Anchor items={items} offsetTop={64} />
+</aside>
+
+// 同步到 URL
+<Anchor
+  items={items}
+  onChange={(key) => {
+    window.history.replaceState(null, '', `#${key}`);
+  }}
+/>
+```