@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/pagination/pagination.tsx

@@ -1,577 +0,0 @@
-import * as React from 'react';
-import {
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
-  MoreHorizontal,
-} from 'lucide-react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/utils/cn';
-import { Button, type ButtonProps } from '@/components/button/button';
-
-// ─── 尺寸映射 — 对齐 Button/Input 的 h-7 / h-8 / h-9 三档 ──────────────────────
-
-export type PaginationSize = 'sm' | 'md' | 'lg';
-export type PaginationType = 'normal' | 'simple' | 'mini';
-
-const sizeClass: Record<PaginationSize, string> = {
-  sm: 'text-xs',
-  md: 'text-xs',
-  lg: 'text-sm',
-};
-
-const minWClass: Record<PaginationSize, string> = {
-  sm: 'min-w-7',
-  md: 'min-w-8',
-  lg: 'min-w-9',
-};
-
-const inputHeightClass: Record<PaginationSize, string> = {
-  sm: 'h-7 text-xs px-2',
-  md: 'h-8 text-xs px-2.5',
-  lg: 'h-9 text-sm px-3',
-};
-
-// ─── shadcn-style primitives ──────────────────────────────────────────────────
-
-const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
-  <nav
-    role="navigation"
-    aria-label="pagination"
-    className={cn('mx-auto flex w-full justify-center', className)}
-    {...props}
-  />
-);
-Pagination.displayName = 'Pagination';
-
-const PaginationContent = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<'ul'>
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    className={cn('flex flex-row items-center gap-1', className)}
-    {...props}
-  />
-));
-PaginationContent.displayName = 'PaginationContent';
-
-const PaginationItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<'li'>
->(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn('', className)} {...props} />
-));
-PaginationItem.displayName = 'PaginationItem';
-
-interface PaginationLinkProps
-  extends Omit<ButtonProps, 'size' | 'variant' | 'shape'> {
-  /** 当前激活状态(高亮选中页)。 */
-  isActive?: boolean;
-  /**
-   * 尺寸,对齐 Button/Input 三档。
-   * @default "md"
-   */
-  size?: PaginationSize;
-}
-
-const PaginationLink = ({
-  className,
-  isActive,
-  size = 'md',
-  ...props
-}: PaginationLinkProps) => (
-  <Button
-    aria-current={isActive ? 'page' : undefined}
-    variant={isActive ? 'outline' : 'ghost'}
-    size={size}
-    className={cn(
-      // 让数字键看起来近似方块,最小宽度 = 高度
-      minWClass[size],
-      // 数字键以 padding 收紧(等宽数字)
-      'tabular-nums',
-      isActive && 'border-primary text-primary',
-      className,
-    )}
-    {...props}
-  />
-);
-PaginationLink.displayName = 'PaginationLink';
-
-interface PaginationNavProps extends Omit<PaginationLinkProps, 'isActive'> {
-  /**
-   * 仅显示图标(不显示「上一页 / 下一页」文字),用于 mini 与图标条形态。
-   * @default false
-   */
-  iconOnly?: boolean;
-}
-
-const PaginationPrevious = ({
-  className,
-  size = 'md',
-  iconOnly = false,
-  children,
-  ...props
-}: PaginationNavProps) => (
-  <PaginationLink
-    aria-label="Go to previous page"
-    size={size}
-    className={cn(iconOnly ? 'aspect-square px-0' : 'gap-1 px-2.5', className)}
-    {...props}
-  >
-    <ChevronLeft className="size-4" />
-    {!iconOnly && (children ?? <span>上一页</span>)}
-  </PaginationLink>
-);
-PaginationPrevious.displayName = 'PaginationPrevious';
-
-const PaginationNext = ({
-  className,
-  size = 'md',
-  iconOnly = false,
-  children,
-  ...props
-}: PaginationNavProps) => (
-  <PaginationLink
-    aria-label="Go to next page"
-    size={size}
-    className={cn(iconOnly ? 'aspect-square px-0' : 'gap-1 px-2.5', className)}
-    {...props}
-  >
-    {!iconOnly && (children ?? <span>下一页</span>)}
-    <ChevronRight className="size-4" />
-  </PaginationLink>
-);
-PaginationNext.displayName = 'PaginationNext';
-
-const ellipsisVariants = cva(
-  'flex items-center justify-center text-muted-foreground',
-  {
-    variants: {
-      size: {
-        sm: 'h-7 w-7 [&_svg]:size-3.5',
-        md: 'h-8 w-8 [&_svg]:size-4',
-        lg: 'h-9 w-9 [&_svg]:size-4',
-      },
-    },
-    defaultVariants: { size: 'md' },
-  },
-);
-
-interface PaginationEllipsisProps
-  extends React.ComponentProps<'span'>,
-    VariantProps<typeof ellipsisVariants> {}
-
-const PaginationEllipsis = ({
-  className,
-  size,
-  ...props
-}: PaginationEllipsisProps) => (
-  <span
-    aria-hidden="true"
-    className={cn(ellipsisVariants({ size }), className)}
-    {...props}
-  >
-    <MoreHorizontal />
-    <span className="sr-only">More pages</span>
-  </span>
-);
-PaginationEllipsis.displayName = 'PaginationEllipsis';
-
-// ─── 高阶 SimplePagination — antd 风格 props 化 ───────────────────────────────
-
-export interface SimplePaginationProps {
-  /**
-   * 当前页(1-based,受控)。与 `defaultCurrent` 互斥。
-   */
-  current?: number;
-  /**
-   * 默认当前页(非受控)。
-   * @default 1
-   */
-  defaultCurrent?: number;
-  /**
-   * 页码 / pageSize 变化回调。第二参为变化后的 pageSize。
-   */
-  onChange?: (page: number, pageSize: number) => void;
-  /** 总条数。 */
-  total: number;
-  /**
-   * 每页大小(受控)。与 `defaultPageSize` 互斥。
-   */
-  pageSize?: number;
-  /**
-   * 默认每页大小(非受控)。
-   * @default 10
-   */
-  defaultPageSize?: number;
-  /**
-   * 每页大小可选项(用于 `pageSizeSelector`)。
-   * @default [10, 20, 50, 100]
-   */
-  pageSizeList?: number[];
-  /**
-   * 显示每页大小选择器(对齐 antd `showSizeChanger` / cloud-design `pageSizeSelector`)。
-   * @default false
-   */
-  pageSizeSelector?: boolean;
-  /** pageSize 变化回调。 */
-  onPageSizeChange?: (pageSize: number) => void;
-  /**
-   * 组件大小,对齐 Button / Input 的 sm(h-7) / md(h-8) / lg(h-9) 三档。
-   * @default "md"
-   */
-  size?: PaginationSize;
-  /**
-   * 组件类型 — `normal` 完整 / `simple` 简化(prev + 页码/总页 + next) / `mini` 极简(仅前后箭头)。
-   * @default "normal"
-   */
-  type?: PaginationType;
-  /**
-   * `normal` 类型下,显示首末页快捷按钮。
-   * @default false
-   */
-  showFirstLast?: boolean;
-  /**
-   * 显示总数文本(`mini` 类型默认不显示)。
-   * @default true
-   */
-  showTotal?: boolean;
-  /** 自定义总数渲染。 */
-  totalRender?: (total: number, range: [number, number]) => React.ReactNode;
-  /**
-   * `normal` 类型下,显示跳转输入框。
-   * @default false
-   */
-  showJump?: boolean;
-  /**
-   * 中间显示几个页号。建议奇数。
-   * @default 5
-   */
-  siblingCount?: number;
-  /** 容器 className。 */
-  className?: string;
-}
-
-/**
- * 高阶 Pagination — antd 风格 `total / pageSize / current / onChange` props 化用法,
- * 自动计算页码窗口 + 折叠 ellipsis,并支持 `size` / `type` / `pageSizeSelector` 三档语义化扩展。
- *
- * 内部组合 `Pagination / PaginationContent / PaginationItem / PaginationLink /
- * PaginationPrevious / PaginationNext / PaginationEllipsis` 这套 shadcn primitives,
- * 业务方需要更细粒度时直接使用 primitives 自行拼装。
- */
-const SimplePagination = ({
-  current,
-  defaultCurrent = 1,
-  onChange,
-  total,
-  pageSize,
-  defaultPageSize = 10,
-  pageSizeList = [10, 20, 50, 100],
-  pageSizeSelector = false,
-  onPageSizeChange,
-  size = 'md',
-  type = 'normal',
-  showFirstLast = false,
-  showTotal = true,
-  totalRender,
-  showJump = false,
-  siblingCount = 5,
-  className,
-}: SimplePaginationProps) => {
-  const [innerCurrent, setInnerCurrent] = React.useState(defaultCurrent);
-  const [innerPageSize, setInnerPageSize] = React.useState(defaultPageSize);
-
-  const finalCurrent = current ?? innerCurrent;
-  const finalPageSize = pageSize ?? innerPageSize;
-  const totalPages = Math.max(1, Math.ceil(total / finalPageSize));
-  const page = Math.min(Math.max(1, finalCurrent), totalPages);
-
-  const goto = (n: number) => {
-    if (n < 1 || n > totalPages || n === page) return;
-    if (current === undefined) setInnerCurrent(n);
-    onChange?.(n, finalPageSize);
-  };
-
-  const handlePageSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const v = Number(e.target.value);
-    if (Number.isNaN(v)) return;
-    if (pageSize === undefined) setInnerPageSize(v);
-    if (current === undefined) setInnerCurrent(1);
-    onPageSizeChange?.(v);
-    onChange?.(1, v);
-  };
-
-  const [jumperVal, setJumperVal] = React.useState('');
-  const handleJumpKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key !== 'Enter') return;
-    const v = Number(jumperVal);
-    if (Number.isFinite(v)) goto(v);
-    setJumperVal('');
-  };
-
-  const pages = React.useMemo(() => {
-    const half = Math.floor(siblingCount / 2);
-    let start = Math.max(1, page - half);
-    let end = Math.min(totalPages, start + siblingCount - 1);
-    if (end - start + 1 < siblingCount) {
-      start = Math.max(1, end - siblingCount + 1);
-    }
-    const arr: number[] = [];
-    for (let i = start; i <= end; i++) arr.push(i);
-    return arr;
-  }, [page, siblingCount, totalPages]);
-
-  const rangeStart = total === 0 ? 0 : (page - 1) * finalPageSize + 1;
-  const rangeEnd = Math.min(page * finalPageSize, total);
-
-  const showLeftEllipsis = (pages[0] ?? 1) > 2;
-  const showRightEllipsis =
-    (pages[pages.length - 1] ?? totalPages) < totalPages - 1;
-
-  // ─── 总数文本(mini 类型默认隐藏)─────────────────────────────────────────
-  const totalNode =
-    showTotal && type !== 'mini' ? (
-      <p className={cn('text-muted-foreground tabular-nums', sizeClass[size])}>
-        {totalRender
-          ? totalRender(total, [rangeStart, rangeEnd])
-          : `共 ${total} 条 · 第 ${rangeStart}-${rangeEnd} 条`}
-      </p>
-    ) : (
-      <span />
-    );
-
-  // ─── 主体内容 ────────────────────────────────────────────────────────────
-  let body: React.ReactNode;
-
-  if (type === 'mini') {
-    body = (
-      <Pagination className="mx-0 w-auto">
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious
-              size={size}
-              iconOnly
-              disabled={page === 1}
-              onClick={() => goto(page - 1)}
-            />
-          </PaginationItem>
-          <PaginationItem>
-            <span
-              className={cn(
-                'px-2 tabular-nums text-muted-foreground',
-                sizeClass[size],
-              )}
-            >
-              {page} / {totalPages}
-            </span>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationNext
-              size={size}
-              iconOnly
-              disabled={page === totalPages}
-              onClick={() => goto(page + 1)}
-            />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-    );
-  } else if (type === 'simple') {
-    body = (
-      <Pagination className="mx-0 w-auto">
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious
-              size={size}
-              iconOnly
-              disabled={page === 1}
-              onClick={() => goto(page - 1)}
-            />
-          </PaginationItem>
-          <PaginationItem>
-            <span
-              className={cn(
-                'flex items-center gap-1 px-2 tabular-nums',
-                sizeClass[size],
-              )}
-            >
-              <strong className="text-foreground">{page}</strong>
-              <span className="text-muted-foreground">/</span>
-              <span className="text-muted-foreground">{totalPages}</span>
-            </span>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationNext
-              size={size}
-              iconOnly
-              disabled={page === totalPages}
-              onClick={() => goto(page + 1)}
-            />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-    );
-  } else {
-    body = (
-      <Pagination className="mx-0 w-auto">
-        <PaginationContent>
-          {showFirstLast ? (
-            <PaginationItem>
-              <PaginationLink
-                aria-label="First"
-                size={size}
-                className="aspect-square px-0"
-                disabled={page === 1}
-                onClick={() => goto(1)}
-              >
-                <ChevronsLeft className="size-4" />
-              </PaginationLink>
-            </PaginationItem>
-          ) : null}
-          <PaginationItem>
-            <PaginationPrevious
-              size={size}
-              iconOnly
-              disabled={page === 1}
-              onClick={() => goto(page - 1)}
-            />
-          </PaginationItem>
-          {(pages[0] ?? 1) > 1 ? (
-            <PaginationItem>
-              <PaginationLink size={size} onClick={() => goto(1)}>
-                1
-              </PaginationLink>
-            </PaginationItem>
-          ) : null}
-          {showLeftEllipsis ? (
-            <PaginationItem>
-              <PaginationEllipsis size={size} />
-            </PaginationItem>
-          ) : null}
-          {pages.map((p) => (
-            <PaginationItem key={p}>
-              <PaginationLink
-                size={size}
-                isActive={p === page}
-                onClick={() => goto(p)}
-              >
-                {p}
-              </PaginationLink>
-            </PaginationItem>
-          ))}
-          {showRightEllipsis ? (
-            <PaginationItem>
-              <PaginationEllipsis size={size} />
-            </PaginationItem>
-          ) : null}
-          {(pages[pages.length - 1] ?? totalPages) < totalPages ? (
-            <PaginationItem>
-              <PaginationLink size={size} onClick={() => goto(totalPages)}>
-                {totalPages}
-              </PaginationLink>
-            </PaginationItem>
-          ) : null}
-          <PaginationItem>
-            <PaginationNext
-              size={size}
-              iconOnly
-              disabled={page === totalPages}
-              onClick={() => goto(page + 1)}
-            />
-          </PaginationItem>
-          {showFirstLast ? (
-            <PaginationItem>
-              <PaginationLink
-                aria-label="Last"
-                size={size}
-                className="aspect-square px-0"
-                disabled={page === totalPages}
-                onClick={() => goto(totalPages)}
-              >
-                <ChevronsRight className="size-4" />
-              </PaginationLink>
-            </PaginationItem>
-          ) : null}
-        </PaginationContent>
-      </Pagination>
-    );
-  }
-
-  // ─── 附加 — pageSize 选择器 / 跳转(仅 normal)─────────────────────────────
-  const showAddons = type === 'normal' && (pageSizeSelector || showJump);
-
-  const addons = showAddons ? (
-    <div className={cn('flex items-center gap-2', sizeClass[size])}>
-      {pageSizeSelector ? (
-        <select
-          aria-label="每页显示"
-          value={finalPageSize}
-          onChange={handlePageSizeChange}
-          className={cn(
-            'cursor-pointer rounded-lg border border-input bg-background shadow-sm',
-            'transition-colors hover:border-ring focus:outline-none focus:ring-1 focus:ring-ring',
-            'tabular-nums text-foreground',
-            inputHeightClass[size],
-          )}
-        >
-          {pageSizeList.map((opt) => (
-            <option key={opt} value={opt}>
-              {opt} 条/页
-            </option>
-          ))}
-        </select>
-      ) : null}
-      {showJump ? (
-        <span className="inline-flex items-center gap-1 text-muted-foreground">
-          前往
-          <input
-            type="text"
-            inputMode="numeric"
-            value={jumperVal}
-            onChange={(e) => setJumperVal(e.target.value)}
-            onKeyDown={handleJumpKey}
-            className={cn(
-              'w-12 rounded-lg border border-input bg-background text-center shadow-sm',
-              'transition-colors placeholder:text-muted-foreground',
-              'focus:outline-none focus:ring-1 focus:ring-ring',
-              'tabular-nums text-foreground',
-              inputHeightClass[size],
-            )}
-          />
-          页
-        </span>
-      ) : null}
-    </div>
-  ) : null;
-
-  return (
-    <div
-      className={cn(
-        'flex w-full flex-wrap items-center justify-between gap-3',
-        className,
-      )}
-    >
-      {totalNode}
-      <div className="flex flex-wrap items-center gap-3">
-        {body}
-        {addons}
-      </div>
-    </div>
-  );
-};
-SimplePagination.displayName = 'SimplePagination';
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-  SimplePagination,
-};

package/src/components/popconfirm/popconfirm.meta.md

@@ -1,114 +0,0 @@
----
-id: popconfirm
-name: Popconfirm
-type: component
-category: feedback
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 气泡确认
----
-
-# Popconfirm 气泡确认
-
-轻量级确认弹层 — antd 独有补足。**等价 antd `Popconfirm`**。用于"小风险"操作的二次确认(删除一行、忽略某条通知),视觉比 `AlertDialog` 更轻、不阻塞页面;`onConfirm` 支持返回 Promise(等待时按钮自动 loading)。
-
-## When to use
-
-- 删除某一行 / 移除单个标签 / 取消订阅(影响小,可撤销)
-- 列表行末"忽略"、"已读"等次级操作的确认
-- 业务流程中"不希望误点"的轻量动作
-
-## When NOT to use
-
-- **高风险 / 不可逆操作**(注销账号、删除整库)→ `AlertDialog`(全屏阻塞)
-- 无后果的纯展示 → `Tooltip` / `Popover`
-- 长决策路径(需要填写理由)→ `Dialog` / `Drawer`
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `children` | `React.ReactElement` | – | ✓ | 触发节点(通常是 Button / a)。 |
-| `title` | `React.ReactNode` | – | ✓ | 主标题(antd `title` 并集)。 |
-| `description` | `React.ReactNode` | – | – | 副描述(antd `description` 并集) — 解释操作后果。 |
-| `icon` | `React.ReactNode` | – | – | 触发图标(antd `icon` 并集) — 默认警示图标。 |
-| `okText` | `string` | `"确定"` | – | 确认按钮文本(antd `okText` 并集)。 |
-| `cancelText` | `string` | `"取消"` | – | 取消按钮文本(antd `cancelText` 并集)。 |
-| `okType` | `'default' \| 'destructive'` | `"default"` | – | 确认按钮 variant(antd `okType` 并集) — 危险操作请用 `destructive`。 |
-| `onConfirm` | `() => void \| Promise<void>` | – | – | 确认回调。 |
-| `onCancel` | `() => void` | – | – | 取消回调。 |
-| `open` | `boolean` | – | – | 受控 open(antd `open` 并集) — 不传时本组件自管 open 状态。 |
-| `onOpenChange` | `(next: boolean) => void` | – | – | open 变化回调。 |
-| `disabled` | `boolean` | – | – | 禁用(子节点点击不弹出)。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add popconfirm` 时,以下 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)。 |
-| `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集,使用 showArrow 控制尖角(与 Tooltip / HoverCard 命名统一) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **`title` 短句直白**(动词开头)— "删除此评论?"/"取消订阅?";**不要**用模糊措辞
-- **`description` 写后果**:"删除后无法恢复"/"取消后将停止收到通知";**不要**写废话
-- **危险动作**:`okType="destructive"` 必须配合 destructive variant 视觉,与 `AlertDialog` 一致的语义
-- **`onConfirm` 返回 Promise**:组件会自动给确认按钮加 loading,**不要**自己在 onConfirm 外再做 spinner
-- **`disabled`** 直接返回 children,不挂监听 — 用于"按钮已经做了别的事"的场景
-- **不要嵌套 Popconfirm**:两层确认极少合理,改用 AlertDialog
-
-## Examples
-
-```tsx
-import { Popconfirm } from '@/components/ui/popconfirm';
-import { Button } from '@/components/ui/button';
-
-// 危险删除
-<Popconfirm
-  title="删除此评论?"
-  description="删除后无法恢复"
-  okType="destructive"
-  okText="删除"
-  onConfirm={async () => {
-    await api.deleteComment(id);
-    toast.success('已删除');
-  }}
->
-  <Button variant="ghost" size="sm">删除</Button>
-</Popconfirm>
-
-// 普通确认
-<Popconfirm
-  title="确认取消订阅?"
-  description="你将停止收到每日摘要邮件"
-  onConfirm={() => unsubscribe()}
->
-  <Button variant="outline">取消订阅</Button>
-</Popconfirm>
-
-// 自定义图标
-<Popconfirm
-  title="重置筛选条件?"
-  icon={<RefreshCcw className="size-4 text-primary" />}
-  onConfirm={resetFilters}
->
-  <Button variant="ghost">重置</Button>
-</Popconfirm>
-```