@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/switch/switch.tsx

@@ -1,169 +0,0 @@
-import * as React from 'react';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { Loader2 } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-export interface SwitchProps
-  extends Omit<
-    React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,
-    | 'checked'
-    | 'defaultChecked'
-    | 'onCheckedChange'
-    | 'disabled'
-    | 'required'
-    | 'name'
-    | 'value'
-    | 'id'
-  > {
-  /**
-   * 受控选中状态(等价 antd `checked`)。
-   * 与 `defaultChecked` 二选一,不同时传。
-   */
-  checked?: boolean;
-  /**
-   * 非受控初始选中态(等价 antd `defaultChecked`)。
-   * @default false
-   */
-  defaultChecked?: boolean;
-  /**
-   * 选中状态变化回调 — Radix 命名,等价 antd `onChange(checked)`。
-   */
-  onCheckedChange?: (checked: boolean) => void;
-  /**
-   * 禁用整个 Switch(灰化 + 不响应交互)。`loading` 也会自动禁用。
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * 表单必填 — 设置 HTML 原生 `required`,表单层校验依赖此值。
-   * @default false
-   */
-  required?: boolean;
-  /** 表单字段名(原生 `<input name>`,提交表单时使用)。 */
-  name?: string;
-  /** 表单字段值(选中时随表单提交)。 */
-  value?: string;
-  /** id 属性,配合 `<label htmlFor>` 关联标签。 */
-  id?: string;
-  /**
-   * 加载态 — 自动 `disabled`,thumb 上叠加自旋 spinner(antd 并集)。
-   * @default false
-   */
-  loading?: boolean;
-  /** 选中态显示的内文(antd `checkedChildren` 并集)。 */
-  checkedChildren?: React.ReactNode;
-  /** 未选中态显示的内文(antd `unCheckedChildren` 并集)。 */
-  unCheckedChildren?: React.ReactNode;
-  /**
-   * 尺寸。`md` 与 `default` 完全等价,后者作为向后兼容别名保留;新代码请优先
-   * 使用 `md`,与 Button / Input / Checkbox / Radio 等表单原子组件的 size enum 一致。
-   * @default "md"
-   */
-  size?: 'sm' | 'md' | 'default';
-}
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitive.Root>,
-  SwitchProps
->(
-  (
-    {
-      className,
-      loading = false,
-      checkedChildren,
-      unCheckedChildren,
-      size = 'md',
-      disabled,
-      ...props
-    },
-    ref,
-  ) => {
-    const isSm = size === 'sm';
-    const hasInner = checkedChildren != null || unCheckedChildren != null;
-    // sm:外框 16x28(h-4 w-7)、thumb 12x12(size-3)、偏移 12px
-    // default:外框 20x36(h-5 w-9)、thumb 16x16(size-4)、偏移 16px
-    const thumbSize = isSm ? 'size-3' : 'size-4';
-    const spinnerSize = isSm ? 'size-2.5' : 'size-3';
-    const renderThumb = (extra?: string) => (
-      <SwitchPrimitive.Thumb
-        className={cn(
-          'pointer-events-none flex shrink-0 items-center justify-center rounded-full bg-background shadow-lg ring-0',
-          thumbSize,
-          extra,
-        )}
-      >
-        {loading ? (
-          <Loader2
-            className={cn(
-              'animate-spin text-muted-foreground motion-reduce:animate-none',
-              spinnerSize,
-            )}
-            aria-hidden="true"
-          />
-        ) : null}
-      </SwitchPrimitive.Thumb>
-    );
-
-    return (
-      <SwitchPrimitive.Root
-        ref={ref}
-        disabled={disabled || loading}
-        className={cn(
-          'peer group inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-          hasInner
-            ? cn(
-                // 内文模式：高度固定，宽度按 thumb + 文字 + gap + padding 自适应
-                isSm ? 'h-4 min-w-7 gap-1' : 'h-5 min-w-9 gap-1',
-              )
-            : cn(isSm ? 'h-4 w-7' : 'h-5 w-9'),
-          className,
-        )}
-        {...props}
-      >
-        {hasInner ? (
-          <>
-            {/* thumb 与文字以 flex order 互换位置 */}
-            {renderThumb('order-1 group-data-[state=checked]:order-2')}
-            <span
-              className={cn(
-                'pointer-events-none select-none font-medium leading-none',
-                isSm ? '' : 'text-xs',
-                'order-2 group-data-[state=checked]:order-1',
-                'group-data-[state=checked]:text-primary-foreground',
-                'group-data-[state=unchecked]:text-muted-foreground',
-                // 文字外侧 padding（远离 thumb 的一侧）—— thumb 侧不加 padding，与其他 switch 一致紧贴边缘
-                isSm
-                  ? 'group-data-[state=unchecked]:pr-1 group-data-[state=checked]:pl-1'
-                  : 'group-data-[state=unchecked]:pr-1 group-data-[state=checked]:pl-1',
-              )}
-              // sm 内文使用 10px 字号 — Tailwind 默认刻度最小 text-xs(12px)在 h-4(16-4=12 内高)容器中会超出。
-              // 主动选 inline style 而非 Tailwind arbitrary value(`text-[10px]`),避免 `no-arbitrary-tw-value` lint 告警。
-              style={isSm ? { fontSize: '10px' } : undefined}
-              aria-hidden="true"
-            >
-              <span className="group-data-[state=unchecked]:hidden">
-                {checkedChildren}
-              </span>
-              <span className="group-data-[state=checked]:hidden">
-                {unCheckedChildren}
-              </span>
-            </span>
-          </>
-        ) : (
-          renderThumb(
-            cn(
-              'transition-transform',
-              isSm
-                ? 'data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0'
-                : 'data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
-            ),
-          )
-        )}
-      </SwitchPrimitive.Root>
-    );
-  },
-);
-Switch.displayName = 'Switch';
-
-export { Switch };

package/src/components/table/table.meta.md

@@ -1,106 +0,0 @@
----
-id: table
-name: Table
-displayName: 表格
-type: component
-category: data-display
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Table 表格
-
-基础表格 — 原生 HTML 元素薄包装。**仅视觉与可访问性骨架**(列宽 / 边框 / hover / 选中态);**无排序 / 筛选 / 分页 / 数据流**(那是 `DataTable` 的范畴)。
-
-## When to use
-
-- 简单数据展示(< 50 行,无交互)
-- 静态信息表(键值对 / 配置项)
-- 自定义"业务表"的视觉骨架(自己写排序/筛选/选择)
-
-## When NOT to use
-
-- 大量数据 / 排序 / 筛选 / 分页 → `DataTable`(基于 TanStack Table)
-- 键值对详情 → `Descriptions`(antd 风格,v0.x)
-- 树结构 → `Tree`(v0.x)
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-_(组件无 `<Name>Props` interface — props 详见 [`table.tsx`](./table.tsx))_
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add table` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-_无 — 本组件不依赖任何 npm 包。_
-<!-- auto:deps:end -->
-
-> 子组件:`Table` / `TableHeader`(thead)/ `TableBody`(tbody)/ `TableFooter`(tfoot)/ `TableHead`(th)/ `TableRow`(tr)/ `TableCell`(td)/ `TableCaption`(caption)。
-
-## AI 生成纪律
-
-- **行选中态**:配 `data-state="selected"` 在 `<TableRow>`,自动套高亮样式
-- **列宽自适应**:不要硬编码 `width: 100px`,用 `<col>` 或 className 控制
-- **数字列右对齐**:数字 / 金额 / 时长用 `className="text-right tabular-nums"`
-- **不嵌套 Table**:嵌套表格语义破碎;改用展开行(`expandable`,DataTable 提供)
-- **大数据集 → DataTable**:Table 不做虚拟滚动;> 200 行用 DataTable + virtualizer
-
-## Examples
-
-```tsx
-import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-} from '@/components/ui/table';
-import { Badge } from '@/components/ui/badge';
-
-<Table>
-  <TableCaption>近期发票</TableCaption>
-  <TableHeader>
-    <TableRow>
-      <TableHead className="w-32">编号</TableHead>
-      <TableHead>状态</TableHead>
-      <TableHead>方式</TableHead>
-      <TableHead className="text-right">金额</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell className="font-medium">INV001</TableCell>
-      <TableCell>
-        <Badge variant="success">已支付</Badge>
-      </TableCell>
-      <TableCell>信用卡</TableCell>
-      <TableCell className="text-right">¥250.00</TableCell>
-    </TableRow>
-    <TableRow data-state="selected">
-      <TableCell className="font-medium">INV002</TableCell>
-      <TableCell>
-        <Badge>待支付</Badge>
-      </TableCell>
-      <TableCell>转账</TableCell>
-      <TableCell className="text-right">¥150.00</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>;
-```

package/src/components/table/table.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-  TableFooter,
-} from './table';
-import { Badge } from '@/components/badge/badge';
-
-const meta: Meta<typeof Table> = {
-  title: '数据展示 · Data Display/Table',
-  component: Table,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '基础表格 — 原生 HTML 元素薄包装，仅提供视觉与可访问性骨架（列宽 / 边框 / hover / 选中态）。无排序 / 筛选 / 分页 / 数据流，复杂场景请用 `DataTable`。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Table>;
-
-const invoices = [
-  { id: 'INV001', status: 'paid', method: '信用卡', amount: 250 },
-  { id: 'INV002', status: 'pending', method: '转账', amount: 150 },
-  { id: 'INV003', status: 'paid', method: '支付宝', amount: 350 },
-  { id: 'INV004', status: 'failed', method: '信用卡', amount: 450 },
-];
-
-export const Default: Story = {
-  render: () => (
-    <Table>
-      <TableCaption>近期发票</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead className="w-32">编号</TableHead>
-          <TableHead>状态</TableHead>
-          <TableHead>方式</TableHead>
-          <TableHead className="text-right">金额</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map((inv) => (
-          <TableRow key={inv.id}>
-            <TableCell className="font-medium">{inv.id}</TableCell>
-            <TableCell>
-              {inv.status === 'paid' ? (
-                <Badge variant="success">已支付</Badge>
-              ) : inv.status === 'failed' ? (
-                <Badge variant="destructive">失败</Badge>
-              ) : (
-                <Badge>待支付</Badge>
-              )}
-            </TableCell>
-            <TableCell>{inv.method}</TableCell>
-            <TableCell className="text-right tabular-nums">
-              ¥{inv.amount.toFixed(2)}
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={3}>合计</TableCell>
-          <TableCell className="text-right tabular-nums">
-            ¥{invoices.reduce((sum, x) => sum + x.amount, 0).toFixed(2)}
-          </TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  ),
-};

package/src/components/table/table.tsx

@@ -1,122 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/utils/cn';
-
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn('w-full caption-bottom text-xs', className)}
-      {...props}
-    />
-  </div>
-));
-Table.displayName = 'Table';
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
-));
-TableHeader.displayName = 'TableHeader';
-
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn('[&_tr:last-child]:border-0', className)}
-    {...props}
-  />
-));
-TableBody.displayName = 'TableBody';
-
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      'border-t border-t-border bg-muted/50 font-medium [&>tr]:last:border-b-0',
-      className,
-    )}
-    {...props}
-  />
-));
-TableFooter.displayName = 'TableFooter';
-
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      'border-b border-b-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-      className,
-    )}
-    {...props}
-  />
-));
-TableRow.displayName = 'TableRow';
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      'h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
-      className,
-    )}
-    {...props}
-  />
-));
-TableHead.displayName = 'TableHead';
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn(
-      'p-3 align-middle [&:has([role=checkbox])]:pr-0',
-      className,
-    )}
-    {...props}
-  />
-));
-TableCell.displayName = 'TableCell';
-
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn('mt-4 text-xs text-muted-foreground', className)}
-    {...props}
-  />
-));
-TableCaption.displayName = 'TableCaption';
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-};
-
-export type TableProps = React.HTMLAttributes<HTMLTableElement>;

package/src/components/tabs/tabs.meta.md

@@ -1,111 +0,0 @@
----
-id: tabs
-name: Tabs
-displayName: 标签页
-type: component
-category: data-display
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Tabs 标签页
-
-标签页 — Radix Tabs + antd `type`/`size`/`tabBarExtraContent` 并集,并吸收 `Segmented` 的胶囊视觉。
-两种风格切换:`variant="line"`(默认,antd 下划线),`variant="capsule"`(muted 底容器 + 选中白底 shadow,可替代 Segmented 的视图切换语义)。
-
-## When to use
-
-- 平级内容切换(详情页的 Overview / Logs / Settings 多视图)
-- 表单分组(基本信息 / 高级配置)
-- 工具栏顶部多视图
-- **`variant="capsule"`**:紧凑互斥单选(视图切换 / 时间区间 / 主题档),取代旧 Segmented 用法
-
-## When NOT to use
-
-- 多步流程 → `Steps`(v0.x)
-- 内容互斥但需对照 → `RadioGroup` + 切换内容区
-- 折叠展开 → `Accordion` / `Collapsible`
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `TabsList` 的 props;`Tabs`(Root)透传 Radix `value / defaultValue / onValueChange / orientation / activationMode`;`TabsTrigger` 也接受 `variant` / `size` 用于显式覆盖来自 List 的上下文(罕用)。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `variant` | `TabsVariant` | `"line"` | – | 视觉风格(shadcn ∪ antd 并集 + 吸收 Segmented)。 - `line`:下划线风格(antd 默认),适合页面级主导航 / 大区块切换。 - `capsule`:胶囊风格(取代旧 `card`,吸收 Segmented),muted 底色 + 选中项白底 shadow,适合紧凑互斥单选(视图切换、时间区间)。 |
-| `size` | `TabsSize` | `"md"` | – | 尺寸(antd `size` 并集)。三档统一驱动 trigger 的字号与 padding。 |
-| `extra` | `React.ReactNode` | – | – | 右侧附加内容(antd `tabBarExtraContent` 并集);仅 `variant="line"` 显式支持(布局灵活)。 用法:把节点放进来即可,组件用 `flex justify-between` 自动撑开。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add tabs` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-tabs@^1.1.0 class-variance-authority@^0.7.0
-```
-<!-- auto:deps:end -->
-
-> 子组件:`Tabs` / `TabsList` / `TabsTrigger` / `TabsContent`。`variant` / `size` 在 `TabsList` 上声明一次,会通过 context 透传给所有 `TabsTrigger`。
-
-## AI 生成纪律
-
-- **`variant="line"` 是默认**:页面级主导航 / 大区块切换的首选(antd 视觉)
-- **`variant="capsule"` 取代 Segmented**:紧凑互斥单选场景(视图切换 / 时间区间 / 主题档)直接用 capsule Tabs,**不要再新增 Segmented**(详见同名组件 meta)
-- **选中态颜色固定**:line 选中文字走 `text-foreground`,capsule 选中项 `bg-background + shadow-sm + text-foreground` —— **禁止用 `bg-primary` 之类填充**(那是按钮态,不是选项态)
-- **size 三档**:`sm`(text-xs / 紧凑 padding)/ `md`(text-sm,默认)/ `lg`(text-base);列表页头部建议 `md`,详情页内嵌可用 `sm`
-- **`extra` 仅 `variant="line"` 视觉对齐**:右侧附加按钮(刷新 / 新建);capsule 没有右侧条带空间
-- **value 必稳定**:切换 tab 间不改变 value 字符串
-- **orientation="vertical"** 罕用,改用 Sidebar 模式
-
-## Examples
-
-```tsx
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
-import { Button } from '@/components/ui/button';
-import { LayoutGrid, List, RefreshCw } from 'lucide-react';
-
-// 默认 line 下划线风格
-<Tabs defaultValue="all" className="w-96">
-  <TabsList>
-    <TabsTrigger value="all">全部</TabsTrigger>
-    <TabsTrigger value="active">活跃</TabsTrigger>
-    <TabsTrigger value="archived">已归档</TabsTrigger>
-  </TabsList>
-  <TabsContent value="all">全部内容</TabsContent>
-</Tabs>
-
-// 胶囊风格(吸收 Segmented):视图切换
-<Tabs defaultValue="grid" className="w-fit">
-  <TabsList variant="capsule" size="sm">
-    <TabsTrigger value="grid">
-      <LayoutGrid className="size-4" /> 网格
-    </TabsTrigger>
-    <TabsTrigger value="list">
-      <List className="size-4" /> 列表
-    </TabsTrigger>
-  </TabsList>
-</Tabs>
-
-// 下划线 + 右侧 extra
-<Tabs defaultValue="all">
-  <TabsList variant="line" extra={<Button size="sm" variant="outline" icon={<RefreshCw />}>刷新</Button>}>
-    <TabsTrigger value="all">全部</TabsTrigger>
-    <TabsTrigger value="active">活跃</TabsTrigger>
-  </TabsList>
-</Tabs>
-```