@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/statistic/statistic.stories.tsx

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ShoppingCart, Users } from 'lucide-react';
-import { Statistic } from './statistic';
-import { Card, CardContent } from '@/components/card/card';
-
-const meta: Meta<typeof Statistic> = {
-  title: '数据展示 · Data Display/Statistic',
-  component: Statistic,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '数字展示 — 仪表板核心指标。大字号 + 千分位 + 精度 + 前后缀 + 趋势（上 / 下，自动配色）。等价 antd Statistic。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Statistic>;
-
-export const Basic: Story = {
-  args: { title: '今日 GMV', value: 8493521, prefix: '¥' },
-};
-
-export const Trends: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-wrap gap-8">
-      <Statistic title="活跃用户" value={1234} trend="up" trendValue="+12.4%" />
-      <Statistic
-        title="错误率"
-        value={0.83}
-        precision={2}
-        suffix="%"
-        trend="down"
-        trendValue="-0.5%"
-      />
-      <Statistic title="待处理" value={42} />
-    </div>
-  ),
-};
-
-export const InCards: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="grid grid-cols-2 gap-4">
-      <Card>
-        <CardContent className="pt-6">
-          <Statistic
-            title="本月订单"
-            value={2847}
-            prefix={<ShoppingCart />}
-            trend="up"
-            trendValue="+18%"
-          />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardContent className="pt-6">
-          <Statistic title="活跃用户" value={12480} prefix={<Users />} />
-        </CardContent>
-      </Card>
-    </div>
-  ),
-};

package/src/components/steps/steps.meta.md

@@ -1,116 +0,0 @@
----
-id: steps
-name: Steps
-displayName: 步骤条
-type: component
-category: navigation
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Steps 步骤条
-
-步骤条 — antd 独有补足。引导用户完成多步流程(注册 / 下单 / 部署),清晰展示当前 / 已完成 / 待完成 / 错误状态。
-
-## When to use
-
-- 多步表单(注册 / 入驻 / 配置)
-- 流程进度可视化(订单状态 / CI/CD)
-- 长任务的阶段反馈
-
-## When NOT to use
-
-- 平级 tab → `Tabs`
-- 简单进度 → `Progress` / `ProgressCircle`
-- 历史时间线 → 自定义 timeline(暂无组件)
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `items` | `StepItem[]` | – | ✓ | 步骤列表。 |
-| `current` | `number` | `0` | – | 当前步骤(0-based)。`current` 之前的为 finish,`current` 为 process,之后为 wait。 |
-| `status` | `'process' \| 'error'` | `"process"` | – | 当前步骤的状态(只影响 `current` 那一步;`process` 默认,`error` 标红)。 |
-| `direction` | `'horizontal' \| 'vertical'` | `"horizontal"` | – | 排列方向。 |
-| `size` | `'sm' \| 'md' \| 'default'` | `"default"` | – | 尺寸。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add steps` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-> `StepItem` 类型:`{ title; description?; status?: 'wait' | 'process' | 'finish' | 'error' | 'disabled'; icon? }`。5 状态视觉区分:
->
-> | 状态 | 圆点 | 连线 | 标题 | 交互 |
-> | --- | --- | --- | --- | --- |
-> | `wait` | 描边 + muted | border | muted | 可点击 |
-> | `process` | primary 填充 + shadow | border | foreground + medium | 可点击 |
-> | `finish` | primary 填充 + Check | primary | foreground | 可点击 |
-> | `error` | destructive 填充 + X | border | destructive + medium | 可点击 |
-> | `disabled` | muted + opacity-60 | border + opacity-60 | muted + opacity-60 | `pointer-events: none` + `aria-disabled` |
-
-## AI 生成纪律
-
-- **`current` 0-based**:第一步是 0,与数组索引一致
-- **`status="error"` 仅当前步**:把整体状态置错;**不要**对历史已完成步标 error
-- **单项 `disabled`**:用 `StepItem.status: 'disabled'` 表示该步不可点击(需升级 / 该路径不适用),视觉 muted 变深 + 60% 透明度 + 提示 `aria-disabled`
-- **`description` 简短**:不超过 1 行,长说明放主区
-- **vertical 用于侧栏**:横向用于宽屏 / 顶部
-- **不要堆叠超过 6 步**:认知超载;> 6 步改用 Wizard 模式 + 折叠
-
-## Examples
-
-```tsx
-import { Steps } from '@/components/ui/steps';
-
-// 横向
-<Steps
-  current={1}
-  items={[
-    { title: '账户信息', description: '填写基本信息' },
-    { title: '验证邮箱', description: '收取验证码' },
-    { title: '完成', description: '注册成功' },
-  ]}
-/>
-
-// 当前步出错
-<Steps
-  current={1}
-  status="error"
-  items={[
-    { title: '上传文件' },
-    { title: '解析数据' },
-    { title: '导入完成' },
-  ]}
-/>
-
-// 纵向
-<Steps direction="vertical" current={2} items={[...]} />
-
-// 自定义 icon
-<Steps
-  current={0}
-  items={[
-    { title: '提交', icon: <UploadIcon /> },
-    { title: '审核', icon: <ShieldCheck /> },
-    { title: '通过', icon: <Check /> },
-  ]}
-/>
-```

package/src/components/steps/steps.stories.tsx

@@ -1,115 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Steps } from './steps';
-
-const meta: Meta<typeof Steps> = {
-  title: '导航 · Navigation/Steps',
-  component: Steps,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Steps 步骤条 — 在多步流程(注册 / 下单 / 部署)中明示当前阶段与整体进度。**antd 独有补足**，shadcn 未提供对应原子；API 能力取 antd `Steps` 起点并保留准则需要的子集：`current` / `status` / `direction` / `size` / `StepItem.status`(`wait` / `process` / `finish` / `error` / `disabled` 5 状态) / `StepItem.icon`。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/tokens`，无 mock。',
-      },
-    },
-  },
-  argTypes: {
-    current: { control: 'number' },
-    status: { control: 'inline-radio', options: ['process', 'error'] },
-    direction: { control: 'inline-radio', options: ['horizontal', 'vertical'] },
-    size: { control: 'inline-radio', options: ['sm', 'default'] },
-  },
-  args: {
-    current: 1,
-    status: 'process',
-    direction: 'horizontal',
-    size: 'default',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Steps>;
-
-const items = [
-  { title: '账户信息', description: '填写基本信息' },
-  { title: '验证邮箱', description: '收取验证码' },
-  { title: '完成', description: '注册成功' },
-];
-
-export const Horizontal: Story = {
-  render: (args) => (
-    <div className="w-[600px]">
-      <Steps {...args} items={items} />
-    </div>
-  ),
-};
-
-export const Vertical: Story = {
-  args: { direction: 'vertical', current: 1 },
-  render: (args) => (
-    <div className="w-72">
-      <Steps {...args} items={items} />
-    </div>
-  ),
-};
-
-export const ErrorState: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-[600px]">
-      <Steps
-        current={1}
-        status="error"
-        items={[
-          { title: '上传文件' },
-          { title: '解析数据', description: '解析失败,请重试' },
-          { title: '导入完成' },
-        ]}
-      />
-    </div>
-  ),
-};
-
-export const Small: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-96">
-      <Steps size="sm" current={1} items={items} />
-    </div>
-  ),
-};
-
-export const AllStatuses: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-[720px]">
-      <Steps
-        current={1}
-        items={[
-          { title: 'Finish', description: '已完成', status: 'finish' },
-          { title: 'Process', description: '进行中', status: 'process' },
-          { title: 'Wait', description: '等待中', status: 'wait' },
-          { title: 'Error', description: '处理失败', status: 'error' },
-          { title: 'Disabled', description: '不可点击', status: 'disabled' },
-        ]}
-      />
-    </div>
-  ),
-};
-
-export const DisabledStep: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-[600px]">
-      <Steps
-        current={0}
-        items={[
-          { title: '账户信息' },
-          { title: '验证邮箱' },
-          { title: '高级设置', status: 'disabled', description: '需升级后可用' },
-          { title: '完成' },
-        ]}
-      />
-    </div>
-  ),
-};

package/src/components/steps/steps.tsx

@@ -1,173 +0,0 @@
-import * as React from 'react';
-import { Check, X } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-export type StepStatus = 'wait' | 'process' | 'finish' | 'error' | 'disabled';
-
-export interface StepItem {
-  /** 步骤标题(必填)。 */
-  title: React.ReactNode;
-  /** 描述(可选)。 */
-  description?: React.ReactNode;
-  /** 自定义状态(覆盖父级根据 current 推导出的状态)。`disabled` 状态不响应点击。 */
-  status?: StepStatus;
-  /** 自定义图标(覆盖默认数字 / 勾选 / 错误)。 */
-  icon?: React.ReactNode;
-}
-
-export interface StepsProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** 步骤列表。 */
-  items: StepItem[];
-  /**
-   * 当前步骤(0-based)。`current` 之前的为 finish,`current` 为 process,之后为 wait。
-   * @default 0
-   */
-  current?: number;
-  /**
-   * 当前步骤的状态(只影响 `current` 那一步;`process` 默认,`error` 标红)。
-   * @default "process"
-   */
-  status?: 'process' | 'error';
-  /**
-   * 排列方向。
-   * @default "horizontal"
-   */
-  direction?: 'horizontal' | 'vertical';
-  /**
-   * 尺寸。
-   * @default "default"
-   */
-  size?: 'sm' | 'md' | 'default';
-}
-
-function statusFor(
-  i: number,
-  current: number,
-  topStatus: 'process' | 'error',
-  itemStatus?: StepStatus,
-): StepStatus {
-  if (itemStatus) return itemStatus;
-  if (i < current) return 'finish';
-  if (i === current) return topStatus;
-  return 'wait';
-}
-
-const dotColor: Record<StepStatus, string> = {
-  wait: 'border-border bg-background text-muted-foreground',
-  process: 'border-primary bg-primary text-primary-foreground shadow-sm',
-  finish: 'border-primary bg-primary text-primary-foreground',
-  error: 'border-destructive bg-destructive text-destructive-foreground',
-  disabled: 'border-border bg-muted text-muted-foreground opacity-60',
-};
-
-const lineColor: Record<StepStatus, string> = {
-  wait: 'bg-border',
-  process: 'bg-border',
-  finish: 'bg-primary',
-  error: 'bg-border',
-  disabled: 'bg-border opacity-60',
-};
-
-const titleColor: Record<StepStatus, string> = {
-  wait: 'text-muted-foreground',
-  process: 'text-foreground font-medium',
-  finish: 'text-foreground',
-  error: 'text-destructive font-medium',
-  disabled: 'text-muted-foreground opacity-60',
-};
-
-const Steps = React.forwardRef<HTMLDivElement, StepsProps>(
-  (
-    {
-      items,
-      current = 0,
-      status = 'process',
-      direction = 'horizontal',
-      size = 'md',
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const isVertical = direction === 'vertical';
-    const dotSize = size === 'sm' ? 'size-6 text-xs' : 'size-8 text-xs';
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex',
-          isVertical ? 'flex-col gap-0' : 'flex-row items-start gap-0',
-          className,
-        )}
-        {...props}
-      >
-        {items.map((it, i) => {
-          const s = statusFor(i, current, status, it.status);
-          const isLast = i === items.length - 1;
-          const isDisabled = s === 'disabled';
-          const icon =
-            it.icon ??
-            (s === 'finish' ? (
-              <Check className="size-4" />
-            ) : s === 'error' ? (
-              <X className="size-4" />
-            ) : (
-              i + 1
-            ));
-          return (
-            <div
-              key={i}
-              aria-disabled={isDisabled || undefined}
-              className={cn(
-                'flex flex-1',
-                isVertical ? 'flex-row gap-3' : 'flex-col gap-2',
-                isDisabled && 'pointer-events-none',
-              )}
-            >
-              <div
-                className={cn(
-                  'flex',
-                  isVertical
-                    ? 'flex-col items-center gap-2'
-                    : 'flex-row items-center gap-2',
-                )}
-              >
-                <div
-                  className={cn(
-                    'flex shrink-0 items-center justify-center rounded-full border-2 font-medium tabular-nums',
-                    dotSize,
-                    dotColor[s],
-                  )}
-                >
-                  {icon}
-                </div>
-                {!isLast ? (
-                  <div
-                    className={cn(
-                      lineColor[s],
-                      isVertical ? 'min-h-8 w-px flex-1' : 'h-px flex-1',
-                    )}
-                  />
-                ) : null}
-              </div>
-              <div
-                className={cn('flex flex-col gap-0.5', !isVertical && 'pr-3')}
-              >
-                <div className={cn('text-xs', titleColor[s])}>{it.title}</div>
-                {it.description ? (
-                  <div className="text-xs text-muted-foreground">
-                    {it.description}
-                  </div>
-                ) : null}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    );
-  },
-);
-Steps.displayName = 'Steps';
-
-export { Steps };

package/src/components/switch/switch.meta.md

@@ -1,138 +0,0 @@
----
-id: switch
-name: Switch
-displayName: 开关
-type: component
-category: data-entry
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Switch 开关
-
-开关 — Radix Switch + antd 的 `loading / checkedChildren / unCheckedChildren / size`。
-
-## When to use
-
-- 立即生效的二元状态切换(订阅 / 通知 / 主题)
-- 对比 Checkbox:Switch 表示**立即应用**,Checkbox 表示**待提交**
-
-## When NOT to use
-
-- 表单内需提交后生效 → 用 `Checkbox`
-- 多个互斥选项 → 用 `Radio Group` 或 `Toggle Group`
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `checked` | `boolean` | – | – | 受控选中状态(等价 antd `checked`)。 与 `defaultChecked` 二选一,不同时传。 |
-| `defaultChecked` | `boolean` | `false` | – | 非受控初始选中态(等价 antd `defaultChecked`)。 |
-| `onCheckedChange` | `(checked: boolean) => void` | – | – | 选中状态变化回调 — Radix 命名,等价 antd `onChange(checked)`。 |
-| `disabled` | `boolean` | `false` | – | 禁用整个 Switch(灰化 + 不响应交互)。`loading` 也会自动禁用。 |
-| `required` | `boolean` | `false` | – | 表单必填 — 设置 HTML 原生 `required`,表单层校验依赖此值。 |
-| `name` | `string` | – | – | 表单字段名(原生 `<input name>`,提交表单时使用)。 |
-| `value` | `string` | – | – | 表单字段值(选中时随表单提交)。 |
-| `id` | `string` | – | – | id 属性,配合 `<label htmlFor>` 关联标签。 |
-| `loading` | `boolean` | `false` | – | 加载态 — 自动 `disabled`,thumb 上叠加自旋 spinner(antd 并集)。 |
-| `checkedChildren` | `React.ReactNode` | – | – | 选中态显示的内文(antd `checkedChildren` 并集)。 |
-| `unCheckedChildren` | `React.ReactNode` | – | – | 未选中态显示的内文(antd `unCheckedChildren` 并集)。 |
-| `size` | `'sm' \| 'md' \| 'default'` | `"md"` | – | 尺寸。`md` 与 `default` 完全等价,后者作为向后兼容别名保留;新代码请优先 使用 `md`,与 Button / Input / Checkbox / Radio 等表单原子组件的 size enum 一致。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add switch` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-switch@^1.1.0 lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-> 透传所有 Radix Switch.Root props(`checked` / `defaultChecked` / `onCheckedChange` / `name` / `value` 等)。
-
-## AI 生成纪律
-
-- **`loading` 期间禁止操作**:已自动 `disabled`,**不要**手动叠加 disabled 影响 UX 一致
-- **`checkedChildren` 文字 ≤ 2 个汉字**:仅"开/关"或"On/Off",过长会溢出胶囊
-- **配 Label 无障碍**:Switch 不带可见文字时,必须用 `aria-label` 或外部 `<Label>` + `id` 关联
-- **size 命名**:首选 `'sm' | 'md'`,与 Button / Input / Checkbox / Radio 等表单原子保持一致;`'default'` 作为向后兼容别名保留(等价 `'md'`)
-- **size 对齐 cloud-design**:`sm` 外框 16x28(h-4 w-7) 对齐旧库 `small`,`md`/`default` 外框 24x44(h-6 w-11) 对齐旧库 `medium`,**不要随意改尺寸**(会与表单/表格里的密集布局打架)
-- **内文模式 sm 限制**:`sm` 下内文使用 10px 字号(inline style,绕开 `no-arbitrary-tw-value`),实际可视宽度仅够容纳 1 个汉字(如"开/关");如需多字请用 `md` size
-- **thumb 紧贴边缘规范**:开/关两态下 thumb 始终紧贴 track 一侧;有 `checkedChildren / unCheckedChildren` 时,文字 span 仅在 thumb 反向加 padding,thumb 与轨道边缘距离对称(checked: thumb 贴右,文字偏左 padding;unchecked: thumb 贴左,文字偏右 padding)
-- **inner text 自适应宽度**:文字态下 track `min-w` 弹性,文字 span 通过 `flex-1` + 单侧 padding 撑开容器,**不要给 track 写死 w-\* 数值**
-
-## Examples
-
-```tsx
-import { Switch } from '@/components/ui/switch';
-import { Label } from '@/components/ui/label';
-
-// 基础(可控)
-const [on, setOn] = React.useState(false);
-<Switch checked={on} onCheckedChange={setOn} aria-label="启用通知" />
-
-// 配 Label
-<div className="flex items-center gap-2">
-  <Switch id="notify" />
-  <Label htmlFor="notify">订阅邮件提醒</Label>
-</div>
-
-// 加载态
-<Switch loading defaultChecked />
-
-// 内文(开/关 / On/Off)
-<Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
-
-// 小尺寸
-<Switch size="sm" />
-
-// md(推荐写法,与 Button/Input/Checkbox 一致)
-<Switch size="md" />
-```
-
-## Switch 形态 — 旧库 API → 新映射
-
-> 决策:**不新增独立组件**,直接在 `@teamix-evo/ui Switch` 上承接 cloud-design `Switch` 的所有有效用法。本章节是从旧库平滑迁移的查表索引,与 [上面的 Props 表](#props) 互补。
-
-### Props 映射
-
-| cloud-design `Switch`                   | `@teamix-evo/ui Switch`         | 说明                                              |
-| --------------------------------------- | ------------------------------- | ------------------------------------------------- |
-| `checked` / `defaultChecked`            | 同名                            | 透传 Radix `Switch.Root`                          |
-| `onChange(checked, e)`                  | `onCheckedChange(checked)`      | Radix 命名,签名仅返回 `boolean`(无 event 形参)    |
-| `disabled`                              | 同名                            | 透传                                              |
-| `size="small"`                          | `size="sm"`                     | 命名对齐(与 Button/Input/Checkbox 同 enum)        |
-| `size="medium"`                         | `size="md"` 或 `size="default"` | `md` 为新写法,`default` 作为兼容别名保留          |
-| `loading`                               | 同名                            | 自动 `disabled` + thumb 上叠 spinner(antd 并集)   |
-| `checkedChildren` / `unCheckedChildren` | 同名                            | 透传,thumb 紧贴边缘 + 文字 span 单侧 padding 渲染 |
-| `autoWidth`(默认 true)                  | 内置行为                        | track `min-w` + 文字 span `flex-1`,无需 prop      |
-
-### 不修复 / 后续工序清单
-
-- **视觉尺寸 / 颜色微调**(40→36 / 22→20 / 18→16 / `#D9D9D9` → `#E5E5E5`):涉及 `@teamix-evo/tokens` 包,本次不动,留作 tokens 包 MVP 工序
-- **报告 §1/§3 的 "checkedChildren / unCheckedChildren 缺失" 描述过时**:实际本仓库自 0.1.0 起已完整实现(thumb 紧贴边缘 + 文字 span 单侧 padding + min-w 弹性宽度),无需补齐
-- **报告 §6 的 size 命名 `'medium'` → `'md'` 描述部分过时**:本仓库实际命名是 `'sm' | 'default'`,本次新增 `'md'` 别名后与其他原子组件对齐
-
-### Switch 专项 AI 生成纪律
-
-- 写新代码请优先用 `size="md"`,与 Button / Input / Checkbox / Radio 一致;遗留 `size="default"` 仍兼容,**不要主动批量改动**(避免无意义 diff)
-- `onCheckedChange` 签名只有 `(checked: boolean) => void`,**不要按旧库习惯**期待 `(checked, event)` 双参数
-- 受控模式 `checked` + `onCheckedChange` 必须配对;只写 `checked` 不写回调会冻结状态
-- 内文模式下 thumb / 文字的 padding 与 flex order 已在组件内固化,**不要在外层覆盖** `[&>span]:` 等 Tailwind 选择器

package/src/components/switch/switch.stories.tsx

@@ -1,75 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Switch } from './switch';
-
-const meta: Meta<typeof Switch> = {
-  title: '数据录入 · Data Entry/Switch',
-  component: Switch,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '开关 — 在开 / 关两种状态间切换，适用于需要即时生效的二值设置。Radix Switch 实现 + antd Switch 的并集能力：支持 `size` (sm / default)、`loading` 异步状态、以及 `checkedChildren` / `unCheckedChildren` 在轨道内渲染状态文本（对齐 antd）。',
-      },
-    },
-  },
-  argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md'] },
-    loading: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    checkedChildren: { control: 'text' },
-    unCheckedChildren: { control: 'text' },
-  },
-  args: { size: 'md', loading: false, disabled: false },
-};
-
-export default meta;
-type Story = StoryObj<typeof Switch>;
-
-export const Playground: Story = {};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Switch size="sm" defaultChecked />
-      <Switch size="md" defaultChecked />
-    </div>
-  ),
-};
-
-export const States: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Switch />
-      <Switch defaultChecked />
-      <Switch disabled />
-      <Switch disabled defaultChecked />
-      <Switch loading />
-      <Switch loading defaultChecked />
-    </div>
-  ),
-};
-
-export const WithLabel: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-2">
-      <Switch id="notify-stories" />
-      <label htmlFor="notify-stories" className="text-sm font-medium">
-        订阅邮件提醒
-      </label>
-    </div>
-  ),
-};
-
-export const InnerText: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
-      <Switch checkedChildren="On" unCheckedChildren="Off" />
-    </div>
-  ),
-};