@teamix-evo/ui 0.1.1 → 0.3.0

package/src/components/switch/switch.tsx

@@ -5,7 +5,47 @@ import { Loader2 } from 'lucide-react';
 import { cn } from '@/utils/cn';
 
 export interface SwitchProps
-  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+  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
@@ -16,10 +56,11 @@ export interface SwitchProps
   /** 未选中态显示的内文(antd `unCheckedChildren` 并集)。 */
   unCheckedChildren?: React.ReactNode;
   /**
-   * 尺寸。
-   * @default "default"
+   * 尺寸。`md` 与 `default` 完全等价,后者作为向后兼容别名保留;新代码请优先
+   * 使用 `md`,与 Button / Input / Checkbox / Radio 等表单原子组件的 size enum 一致。
+   * @default "md"
    */
-  size?: 'sm' | 'default';
+  size?: 'sm' | 'md' | 'default';
 }
 
 const Switch = React.forwardRef<
@@ -32,66 +73,93 @@ const Switch = React.forwardRef<
       loading = false,
       checkedChildren,
       unCheckedChildren,
-      size = 'default',
+      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 relative 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',
-          isSm ? 'h-5 w-9' : 'h-6 w-11',
+          '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}
       >
-        {/* Inner labels (checkedChildren / unCheckedChildren) */}
-        {checkedChildren != null || unCheckedChildren != null ? (
+        {hasInner ? (
           <>
+            {/* thumb 与文字以 flex order 互换位置 */}
+            {renderThumb('order-1 group-data-[state=checked]:order-2')}
             <span
               className={cn(
-                'pointer-events-none absolute select-none text-[10px] font-medium leading-none text-primary-foreground transition-opacity peer-data-[state=unchecked]:opacity-0',
-                isSm ? 'left-1.5' : 'left-2',
+                '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"
             >
-              {checkedChildren}
-            </span>
-            <span
-              className={cn(
-                'pointer-events-none absolute select-none text-[10px] font-medium leading-none text-muted-foreground transition-opacity peer-data-[state=checked]:opacity-0',
-                isSm ? 'right-1.5' : 'right-2',
-              )}
-              aria-hidden="true"
-            >
-              {unCheckedChildren}
+              <span className="group-data-[state=unchecked]:hidden">
+                {checkedChildren}
+              </span>
+              <span className="group-data-[state=checked]:hidden">
+                {unCheckedChildren}
+              </span>
             </span>
           </>
-        ) : null}
-
-        <SwitchPrimitive.Thumb
-          className={cn(
-            'pointer-events-none flex items-center justify-center rounded-full bg-background shadow-lg ring-0 transition-transform',
-            isSm
-              ? 'size-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
-              : 'size-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
-          )}
-        >
-          {loading ? (
-            <Loader2
-              className={cn(
-                'animate-spin text-muted-foreground motion-reduce:animate-none',
-                isSm ? 'size-3' : 'size-3.5',
-              )}
-              aria-hidden="true"
-            />
-          ) : null}
-        </SwitchPrimitive.Thumb>
+        ) : (
+          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>
     );
   },

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

@@ -1,13 +1,14 @@
 ---
 id: table
 name: Table
+displayName: 表格
 type: component
 category: data-display
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Table
+# Table 表格
 
 基础表格 — 原生 HTML 元素薄包装。**仅视觉与可访问性骨架**(列宽 / 边框 / hover / 选中态);**无排序 / 筛选 / 分页 / 数据流**(那是 `DataTable` 的范畴)。
 
@@ -63,7 +64,13 @@ _无 — 本组件不依赖任何 npm 包。_
 
 ```tsx
 import {
-  Table, TableHeader, TableBody, TableHead, TableRow, TableCell, TableCaption,
+  Table,
+  TableHeader,
+  TableBody,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
 } from '@/components/ui/table';
 import { Badge } from '@/components/ui/badge';
 
@@ -80,16 +87,20 @@ import { Badge } from '@/components/ui/badge';
   <TableBody>
     <TableRow>
       <TableCell className="font-medium">INV001</TableCell>
-      <TableCell><Badge variant="success">已支付</Badge></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>
+        <Badge>待支付</Badge>
+      </TableCell>
       <TableCell>转账</TableCell>
       <TableCell className="text-right">¥150.00</TableCell>
     </TableRow>
   </TableBody>
-</Table>
+</Table>;
 ```

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Table,
   TableHeader,
@@ -15,6 +15,14 @@ const meta: Meta<typeof Table> = {
   title: '数据展示 · Data Display/Table',
   component: Table,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '基础表格 — 原生 HTML 元素薄包装，仅提供视觉与可访问性骨架（列宽 / 边框 / hover / 选中态）。无排序 / 筛选 / 分页 / 数据流，复杂场景请用 `DataTable`。',
+      },
+    },
+  },
 };
 
 export default meta;
@@ -63,10 +71,7 @@ export const Default: Story = {
         <TableRow>
           <TableCell colSpan={3}>合计</TableCell>
           <TableCell className="text-right tabular-nums">
-            ¥
-            {invoices
-              .reduce((sum, x) => sum + x.amount, 0)
-              .toFixed(2)}
+            ¥{invoices.reduce((sum, x) => sum + x.amount, 0).toFixed(2)}
           </TableCell>
         </TableRow>
       </TableFooter>

package/src/components/table/table.tsx

@@ -9,7 +9,7 @@ const Table = React.forwardRef<
   <div className="relative w-full overflow-auto">
     <table
       ref={ref}
-      className={cn('w-full caption-bottom text-sm', className)}
+      className={cn('w-full caption-bottom text-xs', className)}
       {...props}
     />
   </div>
@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      'border-t border-t-border bg-muted/50 font-medium [&>tr]:last:border-b-0',
       className,
     )}
     {...props}
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      'border-b border-b-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
       className,
     )}
     {...props}
@@ -102,7 +102,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    className={cn('mt-4 text-xs text-muted-foreground', className)}
     {...props}
   />
 ));

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

@@ -1,22 +1,24 @@
 ---
 id: tabs
 name: Tabs
+displayName: 标签页
 type: component
-category: navigation
+category: data-display
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Tabs
+# Tabs 标签页
 
-标签页 — Radix Tabs + antd `type` (line/card) + `tabBarExtraContent`(`extra`) 并集。
-两种风格切换:`type="card"`(shadcn 默认胶囊),`type="line"`(antd 默认下划线)。
+标签页 — 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
 
@@ -26,13 +28,14 @@ package: "@teamix-evo/ui"
 
 ## Props
 
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `TabsList` 的 props;`Tabs`(Root)透传 Radix `value / defaultValue / onValueChange / orientation / activationMode`。
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `TabsList` 的 props;`Tabs`(Root)透传 Radix `value / defaultValue / onValueChange / orientation / activationMode`;`TabsTrigger` 也接受 `variant` / `size` 用于显式覆盖来自 List 的上下文(罕用)。
 
 <!-- auto:props:begin -->
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
-| `type` | `'line' \| 'card'` | `"card"` | – | 视觉风格(antd `type` 并集)。`card` 是 shadcn 默认胶囊;`line` 是 antd 默认下划线。 |
-| `extra` | `React.ReactNode` | – | – | 右侧附加内容(antd `tabBarExtraContent` 并集);仅 `type="line"` 显式支持(布局灵活)。 用法:把节点放进来即可,组件用 `flex justify-between` 自动撑开。 |
+| `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 -->
 
 ## 依赖
@@ -57,13 +60,15 @@ pnpm add @radix-ui/react-tabs@^1.1.0 class-variance-authority@^0.7.0
 ```
 <!-- auto:deps:end -->
 
-> 子组件:`Tabs` / `TabsList` / `TabsTrigger` / `TabsContent`。
+> 子组件:`Tabs` / `TabsList` / `TabsTrigger` / `TabsContent`。`variant` / `size` 在 `TabsList` 上声明一次,会通过 context 透传给所有 `TabsTrigger`。
 
 ## AI 生成纪律
 
-- **`type="card"` 默认**:用于嵌入卡片内 / 紧凑场景(shadcn 胶囊视觉)
-- **`type="line"` 用于页面级**:大区块切换、主导航(antd 风格)
-- **`extra` 仅 `type="line"` 视觉对齐**:右侧附加按钮(刷新 / 新建)
+- **`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 模式
 
@@ -72,27 +77,35 @@ pnpm add @radix-ui/react-tabs@^1.1.0 class-variance-authority@^0.7.0
 ```tsx
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
-import { RefreshCw } from 'lucide-react';
+import { LayoutGrid, List, RefreshCw } from 'lucide-react';
 
-// shadcn 胶囊风格
-<Tabs defaultValue="overview" className="w-96">
+// 默认 line 下划线风格
+<Tabs defaultValue="all" className="w-96">
   <TabsList>
-    <TabsTrigger value="overview">概览</TabsTrigger>
-    <TabsTrigger value="logs">日志</TabsTrigger>
-    <TabsTrigger value="settings">设置</TabsTrigger>
+    <TabsTrigger value="all">全部</TabsTrigger>
+    <TabsTrigger value="active">活跃</TabsTrigger>
+    <TabsTrigger value="archived">已归档</TabsTrigger>
   </TabsList>
-  <TabsContent value="overview">...</TabsContent>
-  <TabsContent value="logs">...</TabsContent>
-  <TabsContent value="settings">...</TabsContent>
+  <TabsContent value="all">全部内容</TabsContent>
 </Tabs>
 
-// antd 下划线风格 + extra
+// 胶囊风格(吸收 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 type="line" extra={<Button size="sm" icon={<RefreshCw />}>刷新</Button>}>
+  <TabsList variant="line" extra={<Button size="sm" variant="outline" icon={<RefreshCw />}>刷新</Button>}>
     <TabsTrigger value="all">全部</TabsTrigger>
     <TabsTrigger value="active">活跃</TabsTrigger>
-    <TabsTrigger value="archived">已归档</TabsTrigger>
   </TabsList>
-  <TabsContent value="all">...</TabsContent>
 </Tabs>
 ```

package/src/components/tabs/tabs.stories.tsx

@@ -1,59 +1,143 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { RefreshCw } from 'lucide-react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Calendar, LayoutGrid, List, RefreshCw } from 'lucide-react';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
 import { Button } from '@/components/button/button';
 
 const meta: Meta<typeof TabsList> = {
-  title: '导航 · Navigation/Tabs',
+  title: '数据展示 · Data Display/Tabs',
   component: TabsList,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Tabs 标签页 —— 在多个平级视图之间切换。基于 Radix Tabs 实现 + shadcn ∪ antd 能力并集,并吸收 `Segmented` 的胶囊视觉:`variant`(`line` 下划线 / `capsule` 胶囊,后者取代旧 `card`)、`size`(对齐 antd `size`)、`extra`(对齐 antd `tabBarExtraContent`)、`asChild` 由 Radix 提供。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
+      },
+    },
+  },
   argTypes: {
-    type: { control: 'inline-radio', options: ['card', 'line'] },
+    variant: { control: 'inline-radio', options: ['line', 'capsule'] },
+    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
   },
-  args: { type: 'card' },
+  args: { variant: 'line', size: 'md' },
 };
 
 export default meta;
 type Story = StoryObj<typeof TabsList>;
 
-export const Card: Story = {
-  args: { type: 'card' },
+/**
+ * 默认 line(下划线)风格 —— antd 主导航的标准形态。
+ */
+export const Line: Story = {
+  args: { variant: 'line' },
   render: (args) => (
-    <Tabs defaultValue="overview" className="w-96">
+    <Tabs defaultValue="all" className="w-[480px]">
       <TabsList {...args}>
-        <TabsTrigger value="overview">概览</TabsTrigger>
-        <TabsTrigger value="logs">日志</TabsTrigger>
-        <TabsTrigger value="settings">设置</TabsTrigger>
+        <TabsTrigger value="all">全部</TabsTrigger>
+        <TabsTrigger value="active">活跃</TabsTrigger>
+        <TabsTrigger value="archived">已归档</TabsTrigger>
       </TabsList>
-      <TabsContent value="overview">概览内容</TabsContent>
-      <TabsContent value="logs">日志内容</TabsContent>
-      <TabsContent value="settings">设置内容</TabsContent>
+      <TabsContent value="all" className="text-sm text-muted-foreground">
+        全部内容...
+      </TabsContent>
+      <TabsContent value="active" className="text-sm text-muted-foreground">
+        活跃内容...
+      </TabsContent>
+      <TabsContent value="archived" className="text-sm text-muted-foreground">
+        已归档内容...
+      </TabsContent>
     </Tabs>
   ),
 };
 
-export const Line: Story = {
-  args: { type: 'line' },
+/**
+ * 胶囊风格(吸收 Segmented)—— muted 底色容器 + 选中项白底 shadow,
+ * 适合视图切换、时间区间这类紧凑互斥单选场景。
+ */
+export const Capsule: Story = {
+  args: { variant: 'capsule' },
   render: (args) => (
-    <Tabs defaultValue="all" className="w-96">
+    <Tabs defaultValue="week" className="w-fit">
       <TabsList {...args}>
-        <TabsTrigger value="all">全部</TabsTrigger>
-        <TabsTrigger value="active">活跃</TabsTrigger>
-        <TabsTrigger value="archived">已归档</TabsTrigger>
+        <TabsTrigger value="day">日</TabsTrigger>
+        <TabsTrigger value="week">周</TabsTrigger>
+        <TabsTrigger value="month">月</TabsTrigger>
+      </TabsList>
+    </Tabs>
+  ),
+};
+
+/**
+ * Capsule 配 icon —— 视图切换的最常见用法,完全替代 Segmented + icon。
+ */
+export const CapsuleWithIcons: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Tabs defaultValue="grid" className="w-fit">
+      <TabsList variant="capsule">
+        <TabsTrigger value="grid">
+          <LayoutGrid className="size-4" />
+          网格
+        </TabsTrigger>
+        <TabsTrigger value="list">
+          <List className="size-4" />
+          列表
+        </TabsTrigger>
+        <TabsTrigger value="cal">
+          <Calendar className="size-4" />
+          日历
+        </TabsTrigger>
       </TabsList>
-      <TabsContent value="all">全部内容</TabsContent>
-      <TabsContent value="active">活跃内容</TabsContent>
-      <TabsContent value="archived">已归档</TabsContent>
     </Tabs>
   ),
 };
 
+/**
+ * 三档尺寸 × 两种风格 —— 用于尺寸调试。
+ */
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-muted-foreground">line · sm / md / lg</span>
+        {(['sm', 'md', 'lg'] as const).map((s) => (
+          <Tabs key={s} defaultValue="a" className="w-[360px]">
+            <TabsList variant="line" size={s}>
+              <TabsTrigger value="a">概览</TabsTrigger>
+              <TabsTrigger value="b">日志</TabsTrigger>
+              <TabsTrigger value="c">设置</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        ))}
+      </div>
+      <div className="flex flex-col items-start gap-2">
+        <span className="text-xs text-muted-foreground">
+          capsule · sm / md / lg
+        </span>
+        {(['sm', 'md', 'lg'] as const).map((s) => (
+          <Tabs key={s} defaultValue="a" className="w-fit">
+            <TabsList variant="capsule" size={s}>
+              <TabsTrigger value="a">日</TabsTrigger>
+              <TabsTrigger value="b">周</TabsTrigger>
+              <TabsTrigger value="c">月</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * line 风格右侧 extra —— antd `tabBarExtraContent` 并集。
+ */
 export const WithExtra: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <Tabs defaultValue="all" className="w-[480px]">
       <TabsList
-        type="line"
+        variant="line"
         extra={
           <Button size="sm" variant="outline" icon={<RefreshCw />}>
             刷新
@@ -64,7 +148,9 @@ export const WithExtra: Story = {
         <TabsTrigger value="active">活跃</TabsTrigger>
         <TabsTrigger value="archived">已归档</TabsTrigger>
       </TabsList>
-      <TabsContent value="all">全部内容...</TabsContent>
+      <TabsContent value="all" className="text-sm text-muted-foreground">
+        全部内容...
+      </TabsContent>
     </Tabs>
   ),
 };