@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/progress/progress.meta.md

@@ -1,118 +0,0 @@
----
-id: progress
-name: Progress
-type: component
-category: feedback
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 进度条
----
-
-# Progress 进度条
-
-进度条 — Radix Progress + antd 的 `status / showInfo / Progress.Circle` 并集。
-
-`Progress`(线性)和 `ProgressCircle`(环形)是两个独立组件,共享 `value / status / showInfo` 三 prop 心智。
-
-## When to use
-
-- **线性 Progress**:文件上传、表单提交、长任务进度;占据一行宽度
-- **环形 ProgressCircle**:数据完成度、空间占用、健康度等需要紧凑展示的场景;不撑宽
-
-## When NOT to use
-
-- 进度不可知 → 用 `Spinner`(loading 视觉)或 `Skeleton`
-- 仅做"是否完成"二元状态 → 用 `Badge` 或 `Switch`
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `value` | `number` | `0` | – | 当前百分比(0~100)。 |
-| `status` | `ProgressStatus` | `"normal"` | – | 状态色,自动优先级:`exception > warning > success > normal`。 |
-| `showInfo` | `boolean` | `false` | – | 是否在右侧显示百分比文字(antd showInfo 并集)。 |
-| `size` | `'sm' \| 'md' \| 'default' \| 'lg'` | `"md"` | – | 进度条尺寸。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add progress` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-progress@^1.1.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **`status` 反映业务语义**:正常进行 `normal`、完成 `success`、警告 `warning`、失败/异常 `exception`,**不要**用颜色 prop 绕过 status 直接调色
-- **`value` 范围 0~100**:超出会被 clamp,但写代码时不要传超出值
-- **showInfo 默认行为不同**:线性默认 `false`(节省横向空间),环形默认 `true`(圆心天然有空位)
-- **不要替代 Spinner**:已知"正在加载但不知比例"应该用 `Spinner` 或 `Skeleton`,**不要**用 `<Progress value={undefined} />` 做不确定态
-- **超过一屏的长任务**:Progress 配 ETA 文字 + 取消按钮,提供退路
-
-## Examples
-
-```tsx
-import { Progress, ProgressCircle } from '@/components/ui/progress';
-
-// 线性
-<Progress value={42} showInfo />
-<Progress value={100} status="success" showInfo />
-<Progress value={66} status="warning" showInfo />
-<Progress value={20} status="exception" showInfo />
-
-// 环形
-<ProgressCircle value={75} />
-<ProgressCircle value={100} status="success" size={120} />
-<ProgressCircle value={42} showInfo={false} size={48} />
-```
-
----
-
-## Progress 形态 — 旧库 API → 新映射
-
-> 旧库 `Progress`(hybridcloud,shape='line'|'circle') → 新库 `Progress`(线形) + `ProgressCircle`(环形)。
-> 新库基于 Radix Progress Primitive + SVG circle,语义色对齐 ADR 0021。
-
-### 命名 & 结构映射
-
-| 旧库                       | 新库                                      | 说明                           |
-| -------------------------- | ----------------------------------------- | ------------------------------ |
-| `Progress shape='line'`    | `Progress`                                | 线形进度条                     |
-| `Progress shape='circle'`  | `ProgressCircle`                          | 环形(独立组件)                 |
-| `percent`                  | `value`                                   | 属性重命名(0~100)              |
-| `state='normal'`           | `status='normal'`                         | state → status                 |
-| `state='error'`            | `status='exception'`                      | error → exception              |
-| `state='success'`          | `status='success'`                        | 直接映射                       |
-| —                          | `status='warning'`                        | 新增警告状态                   |
-| `size: small/medium/large` | `size: 'sm' \| 'md' \| 'default' \| 'lg'` | md = medium = default          |
-| `textRender`               | `showInfo`(布尔)                          | 自定义 → 开关;复杂文本外部组合 |
-| `progressive` (渐变色)     | 不复刻                                    | 用 status 语义色替代           |
-| `color` (任意 CSS)         | 不复刻                                    | 仅走 status 语义色             |
-| `hasBorder`                | 不复刻                                    | 新库无此选项                   |
-
-### 迁移 FAQ
-
-| 问题              | 回答                                                           |
-| ----------------- | -------------------------------------------------------------- |
-| percent → value?  | 直接改名,语义相同(0~100)                                       |
-| 环形怎么写?       | `<ProgressCircle value={75} size={80} />`;带文字 `showInfo`    |
-| 怎么做自定义文字? | 外部组合: `<div><Progress value={x} /><span>{x}%</span></div>` |
-| 失败状态怎么显示? | `status="exception"` — 自动变红色(destructive)                 |

package/src/components/progress/progress.stories.tsx

@@ -1,75 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Progress, ProgressCircle } from './progress';
-
-const meta: Meta<typeof Progress> = {
-  title: '反馈 · Feedback/Progress',
-  component: Progress,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '进度条 — 展示一个任务的完成进度，访问友好的状态反馈。Radix Progress 实现 + antd Progress 的能力并集：除默认线形（`Progress`）外还提供环形 `ProgressCircle`，支持 `status`（normal / success / warning / exception）、`size`、`showInfo` 以及任意 `format` 提示。',
-      },
-    },
-  },
-  argTypes: {
-    value: { control: { type: 'range', min: 0, max: 100 } },
-    status: {
-      control: 'select',
-      options: ['normal', 'success', 'warning', 'exception'],
-    },
-    showInfo: { control: 'boolean' },
-    size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
-  },
-  args: { value: 42, status: 'normal', showInfo: true, size: 'default' },
-  decorators: [
-    (Story) => (
-      <div className="w-80">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof Progress>;
-
-export const Playground: Story = {};
-
-export const Statuses: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-3">
-      <Progress value={20} showInfo />
-      <Progress value={66} status="warning" showInfo />
-      <Progress value={100} status="success" showInfo />
-      <Progress value={45} status="exception" showInfo />
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-3">
-      <Progress value={42} size="sm" showInfo />
-      <Progress value={42} size="default" showInfo />
-      <Progress value={42} size="lg" showInfo />
-    </div>
-  ),
-};
-
-export const Circle: StoryObj<typeof ProgressCircle> = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-6">
-      <ProgressCircle value={20} />
-      <ProgressCircle value={66} status="warning" />
-      <ProgressCircle value={100} status="success" />
-      <ProgressCircle value={42} status="exception" />
-      <ProgressCircle value={75} size={120} />
-      <ProgressCircle value={75} size={40} showInfo={false} />
-    </div>
-  ),
-};

package/src/components/progress/progress.tsx

@@ -1,203 +0,0 @@
-import * as React from 'react';
-import * as ProgressPrimitive from '@radix-ui/react-progress';
-
-import { cn } from '@/utils/cn';
-
-export type ProgressStatus = 'normal' | 'success' | 'warning' | 'exception';
-
-const statusBarColor: Record<ProgressStatus, string> = {
-  normal: 'bg-primary',
-  success: 'bg-success',
-  warning: 'bg-warning',
-  exception: 'bg-destructive',
-};
-
-const statusTextColor: Record<ProgressStatus, string> = {
-  normal: 'text-foreground',
-  success: 'text-success',
-  warning: 'text-warning',
-  exception: 'text-destructive',
-};
-
-export interface ProgressProps
-  extends Omit<
-    React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,
-    'value'
-  > {
-  /**
-   * 当前百分比(0~100)。
-   * @default 0
-   */
-  value?: number;
-  /**
-   * 状态色,自动优先级:`exception > warning > success > normal`。
-   * @default "normal"
-   */
-  status?: ProgressStatus;
-  /**
-   * 是否在右侧显示百分比文字(antd showInfo 并集)。
-   * @default false
-   */
-  showInfo?: boolean;
-  /**
-   * 进度条尺寸。
-   * @default "md"
-   */
-  size?: 'sm' | 'md' | 'default' | 'lg';
-}
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  ProgressProps
->(
-  (
-    {
-      className,
-      value = 0,
-      status = 'normal',
-      showInfo = false,
-      size = 'md',
-      ...props
-    },
-    ref,
-  ) => {
-    const h = size === 'sm' ? 'h-1.5' : size === 'lg' ? 'h-3' : 'h-2';
-    return (
-      <div className={cn('flex items-center gap-3', className)}>
-        <ProgressPrimitive.Root
-          ref={ref}
-          value={value}
-          className={cn(
-            'relative w-full overflow-hidden rounded-full bg-secondary',
-            h,
-          )}
-          {...props}
-        >
-          <ProgressPrimitive.Indicator
-            className={cn(
-              'size-full flex-1 transition-all',
-              statusBarColor[status],
-            )}
-            style={{
-              transform: `translateX(-${
-                100 - Math.min(100, Math.max(0, value))
-              }%)`,
-            }}
-          />
-        </ProgressPrimitive.Root>
-        {showInfo ? (
-          <span
-            className={cn(
-              'shrink-0 text-xs font-medium tabular-nums',
-              statusTextColor[status],
-            )}
-          >
-            {Math.round(value)}%
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
-Progress.displayName = 'Progress';
-
-// ─── ProgressCircle(antd 并集)────────────────────────────────────────────
-
-export interface ProgressCircleProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
-  /** 当前百分比(0~100)。 @default 0 */
-  value?: number;
-  /** 状态色。 @default "normal" */
-  status?: ProgressStatus;
-  /** 圆环直径(px)。 @default 80 */
-  size?: number;
-  /** 圆环描边宽度(px)。 @default 6 */
-  strokeWidth?: number;
-  /**
-   * 是否在圆心显示百分比文字。
-   * @default true
-   */
-  showInfo?: boolean;
-}
-
-const ProgressCircle = React.forwardRef<HTMLDivElement, ProgressCircleProps>(
-  (
-    {
-      className,
-      value = 0,
-      status = 'normal',
-      size = 80,
-      strokeWidth = 6,
-      showInfo = true,
-      ...props
-    },
-    ref,
-  ) => {
-    const radius = (size - strokeWidth) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const offset =
-      circumference * (1 - Math.min(100, Math.max(0, value)) / 100);
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'relative inline-flex items-center justify-center',
-          className,
-        )}
-        style={{ width: size, height: size }}
-        role="progressbar"
-        aria-valuenow={value}
-        aria-valuemin={0}
-        aria-valuemax={100}
-        {...props}
-      >
-        <svg
-          width={size}
-          height={size}
-          className="-rotate-90"
-          aria-hidden="true"
-        >
-          <circle
-            cx={size / 2}
-            cy={size / 2}
-            r={radius}
-            strokeWidth={strokeWidth}
-            className="fill-none stroke-secondary"
-          />
-          <circle
-            cx={size / 2}
-            cy={size / 2}
-            r={radius}
-            strokeWidth={strokeWidth}
-            strokeLinecap="round"
-            strokeDasharray={circumference}
-            strokeDashoffset={offset}
-            className={cn(
-              'fill-none transition-all',
-              status === 'success'
-                ? 'stroke-success'
-                : status === 'warning'
-                ? 'stroke-warning'
-                : status === 'exception'
-                ? 'stroke-destructive'
-                : 'stroke-primary',
-            )}
-          />
-        </svg>
-        {showInfo ? (
-          <span
-            className={cn(
-              'absolute text-xs font-semibold tabular-nums',
-              statusTextColor[status],
-            )}
-          >
-            {Math.round(value)}%
-          </span>
-        ) : null}
-      </div>
-    );
-  },
-);
-ProgressCircle.displayName = 'ProgressCircle';
-
-export { Progress, ProgressCircle };

package/src/components/radio-group/radio-group.meta.md

@@ -1,175 +0,0 @@
----
-id: radio-group
-name: RadioGroup
-displayName: 单选组
-type: component
-category: data-entry
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# RadioGroup 单选组
-
-单选组 — Radix RadioGroup,**两种渲染**:
-
-| variant   | 形态                           | 适用                                 |
-| --------- | ------------------------------ | ------------------------------------ |
-| `default` | 圆点 + 文字(shadcn 风格)       | 表单 / 设置面板                      |
-| `button`  | 按钮组(antd Radio.Button 并集) | 视图切换 / 时间区间切换 / 紧凑工具栏 |
-
-## When to use
-
-- 互斥单选(必选其一)
-- 视图切换(列表 / 卡片 / 网格)
-- 时间区间切换(今日 / 本周 / 本月)
-
-## When NOT to use
-
-- 多选 → `Checkbox` / `CheckboxGroup`
-- 选项数 > 5 → `Select`
-- 可搜索 → `Combobox`(v0.x)
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `value` | `string` | – | – | 受控选中值(等价 antd `value`,Radix 命名一致)。 与 `defaultValue` 二选一,不同时传。 |
-| `defaultValue` | `string` | – | – | 非受控初始选中值。 |
-| `onValueChange` | `(value: string) => void` | – | – | 选中变化回调 — Radix 命名,等价 antd `onChange(value)`。 |
-| `disabled` | `boolean` | `false` | – | 整组禁用(灰化所有 Item / Button + 不响应交互)。 |
-| `required` | `boolean` | `false` | – | 表单必填 — 设置 HTML 原生 `required`,表单层校验依赖此值。 |
-| `name` | `string` | – | – | 表单字段名(原生 `<input name>`,提交表单时使用;同组所有 Item 共用)。 |
-| `orientation` | `'horizontal' \| 'vertical'` | `"vertical"` | – | 排列方向(键盘导航方向也跟随此值)。 |
-| `variant` | `'default' \| 'button'` | `"default"` | – | 渲染样式 — `default` 经典圆点;`button` 渲染为按钮组(antd `Radio.Button` 并集)。 |
-| `options` | `RadioGroupOption[]` | – | – | 选项数据源(数据驱动模式,与 CheckboxGroup `options` 对齐)。 传入后内部自动渲染 `RadioGroupItem` / `RadioGroupButton`,无需 `children`. 当同时存在 `children` 与 `options` 时,`children` 优先。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add radio-group` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-radio-group@^1.2.0 lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-> 子组件 `RadioGroupItem`(默认形态)/ `RadioGroupButton`(按钮形态)各自的 props 见 [`radio-group.tsx`](./radio-group.tsx)。
-
-## AI 生成纪律
-
-- **形态由父级 variant 决定**:`default` 用 `RadioGroupItem`,`button` 用 `RadioGroupButton`,**不要混用**(默认形态用 Button 子项视觉怪异)
-- **必须有 default 选中项**:用户进入页面看到全部未选会困惑;用 `defaultValue` 给一个合理初值
-- **每项必关联 Label**:`<RadioGroupItem id="r1" value="a" /> + <Label htmlFor="r1">A</Label>` 或包裹模式
-- **value 唯一稳定**:不要用 index,变化时 controlled diff 失败
-- **横向排列固定 16px(组件内置 `gap-4`)**:对齐《Teamix UI 表单设计规范》§3.1 规则 3 "checkbox/radio 横向 16px";不要手动加 `gap-3` / `space-x-2` 等覆盖。纵向自动用 `gap-2`(8px,紧凑列表)。
-
-## Examples
-
-```tsx
-import {
-  RadioGroup, RadioGroupItem, RadioGroupButton,
-} from '@/components/ui/radio-group';
-import { Label } from '@/components/ui/label';
-
-// 默认形态
-<RadioGroup defaultValue="comfortable" className="grid gap-2">
-  <div className="flex items-center gap-2">
-    <RadioGroupItem value="default" id="r1" />
-    <Label htmlFor="r1">Default</Label>
-  </div>
-  <div className="flex items-center gap-2">
-    <RadioGroupItem value="comfortable" id="r2" />
-    <Label htmlFor="r2">Comfortable</Label>
-  </div>
-  <div className="flex items-center gap-2">
-    <RadioGroupItem value="compact" id="r3" />
-    <Label htmlFor="r3">Compact</Label>
-  </div>
-</RadioGroup>
-
-// 按钮形态(antd Radio.Button)
-<RadioGroup variant="button" defaultValue="month">
-  <RadioGroupButton value="day">日</RadioGroupButton>
-  <RadioGroupButton value="week">周</RadioGroupButton>
-  <RadioGroupButton value="month">月</RadioGroupButton>
-  <RadioGroupButton value="year">年</RadioGroupButton>
-</RadioGroup>
-
-// 数据驱动模式(对齐 CheckboxGroup)
-<RadioGroup
-  options={[
-    { label: '苹果', value: 'apple' },
-    { label: '香蕉', value: 'banana' },
-    { label: '橘子', value: 'orange', disabled: true },
-  ]}
-  defaultValue="apple"
-/>
-
-// 数据驱动 + 按钮模式
-<RadioGroup
-  variant="button"
-  options={[
-    { label: '日', value: 'day' },
-    { label: '周', value: 'week' },
-    { label: '月', value: 'month' },
-  ]}
-  defaultValue="month"
-/>
-```
-
-## Radio 形态 — 旧库 API → 新映射
-
-> 决策:**不新增独立组件**,直接用 `RadioGroup` + `RadioGroupItem` / `RadioGroupButton` 承接 cloud-design `Radio` / `Radio.Group` 全部用法。本章节是从旧库平滑迁移的查表索引,与 [上面的 Props 表](#props) 互补。
-
-### 命名映射
-
-| cloud-design 旧库                         | `@teamix-evo/ui`                                       | 说明                                                                |
-| ----------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------- |
-| `Radio` + `Radio.Group`                   | `RadioGroup` + `RadioGroupItem` / `RadioGroupButton`   | 父子拆分导出,shadcn 风格                                            |
-| `Radio.Group shape="button"`              | `<RadioGroup variant="button">` + `<RadioGroupButton>` | `shape` → `variant`(Radix 语义)                                     |
-| `Radio.Group direction="hor\|ver"`        | `<RadioGroup orientation="horizontal\|vertical">`      | 完整单词,Radix 原生 prop                                            |
-| `Radio.Group dataSource=[{label,value}]`  | `<RadioGroup options={[{label,value}]}>`               | `dataSource` → `options`(对齐 antd / CheckboxGroup)                 |
-| `Radio.Group value / onChange`            | `<RadioGroup value onValueChange>`                     | Radix 命名:`onValueChange(val: string)`                             |
-| `Radio.Group defaultValue`                | `<RadioGroup defaultValue>`                            | 同名                                                                |
-| `Radio.Group disabled`                    | `<RadioGroup disabled>`                                | 整组禁用                                                            |
-| `Radio.Group size="small\|medium\|large"` | Radix 无内置 size;可通过 className 调整                | 新库不内置 size — 按钮模式固定 h-9,圆点模式固定 size-4,满足多数场景 |
-
-### Breaking Changes(从旧库迁移时需改写)
-
-1. `Radio` → `RadioGroupItem`(import + 命名)
-2. `Radio.Group` → `RadioGroup`(独立 named export)
-3. `shape="button"` → `variant="button"`(子项同步换成 `RadioGroupButton`)
-4. `direction` → `orientation`(取值从 `hor/ver` 改为 `horizontal/vertical`)
-5. `dataSource` → `options`(签名一致)
-6. `onChange(value)` → `onValueChange(value)` (Radix 命名)
-
-### 不修复 / 后续工序清单
-
-- **按钮模式圆角**(2px → 4px):报告 §2.2,归 `@teamix-evo/tokens` 后续工序
-- **按钮模式选中视觉**(old: 品牌色边框+浅蓝底 vs new: 品牌色填充+白字):报告 §5 已标注 "新库更现代,设计确认后保留",**不修复**
-- **disabled opacity vs 灰色**:全局策略,**不修复**
-- **size prop**:新库不内置 size(Radix 无此 prop),圆点 `size-4` / 按钮 `h-9` 已覆盖多数场景;如业务确有 size 需求,属于二级 slot 后续添加
-
-### Radio 专项 AI 生成纪律
-
-- **形态由父级 `variant` + 子项组件共同决定**:default → `RadioGroupItem`,button → `RadioGroupButton`,**不要混用**
-- **数据驱动 `options` 模式与 children 互斥**:同时传时 children 优先;统一用一种写法
-- **必须有初始选中**:用 `defaultValue` 给一个合理初值(用户进入页面看到全未选会困惑)
-- **`value` 稳定唯一**:options[].value 不要用 index / 动态 ID;类同 CheckboxGroup 约束
-- **Radix `onValueChange(val: string)`**:单参数字符串,**不要按旧库习惯**期待事件对象

package/src/components/radio-group/radio-group.stories.tsx

@@ -1,113 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { RadioGroup, RadioGroupItem, RadioGroupButton } from './radio-group';
-import type { RadioGroupOption } from './radio-group';
-
-const meta: Meta<typeof RadioGroup> = {
-  title: '数据录入 · Data Entry/RadioGroup',
-  component: RadioGroup,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '单选组 — 在一组互斥选项中选中唯一一个。Radix RadioGroup 实现 + antd Radio 的并集能力：同时提供默认的点选型 `RadioGroupItem` 与按钮型 `RadioGroupButton`（对齐 antd `Radio.Button`），通过 `variant` prop 切换。',
-      },
-    },
-  },
-  argTypes: {
-    variant: { control: 'inline-radio', options: ['default', 'button'] },
-    disabled: { control: 'boolean' },
-  },
-  args: { variant: 'default', defaultValue: 'comfortable' },
-};
-
-export default meta;
-type Story = StoryObj<typeof RadioGroup>;
-
-export const Playground: Story = {
-  render: (args) => (
-    <RadioGroup {...args}>
-      <div className="flex items-center gap-2 text-sm">
-        <RadioGroupItem value="default" id="rg-a" />
-        <label htmlFor="rg-a">Default</label>
-      </div>
-      <div className="flex items-center gap-2 text-sm">
-        <RadioGroupItem value="comfortable" id="rg-b" />
-        <label htmlFor="rg-b">Comfortable</label>
-      </div>
-      <div className="flex items-center gap-2 text-sm">
-        <RadioGroupItem value="compact" id="rg-c" />
-        <label htmlFor="rg-c">Compact</label>
-      </div>
-    </RadioGroup>
-  ),
-};
-
-export const ButtonStyle: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <RadioGroup variant="button" defaultValue="month">
-      <RadioGroupButton value="day">日</RadioGroupButton>
-      <RadioGroupButton value="week">周</RadioGroupButton>
-      <RadioGroupButton value="month">月</RadioGroupButton>
-      <RadioGroupButton value="year">年</RadioGroupButton>
-    </RadioGroup>
-  ),
-};
-
-export const Disabled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-6">
-      <RadioGroup defaultValue="a" disabled>
-        <div className="flex items-center gap-2 text-sm">
-          <RadioGroupItem value="a" id="rd-1" />
-          <label htmlFor="rd-1">禁用 - 选项 A</label>
-        </div>
-        <div className="flex items-center gap-2 text-sm">
-          <RadioGroupItem value="b" id="rd-2" />
-          <label htmlFor="rd-2">禁用 - 选项 B</label>
-        </div>
-      </RadioGroup>
-      <RadioGroup variant="button" defaultValue="b" disabled>
-        <RadioGroupButton value="a">A</RadioGroupButton>
-        <RadioGroupButton value="b">B</RadioGroupButton>
-      </RadioGroup>
-    </div>
-  ),
-};
-
-// ─── 数据驱动 options 模式(与 CheckboxGroup 对齐)──────────────────
-
-const fruitOptions: RadioGroupOption[] = [
-  { label: '苹果', value: 'apple' },
-  { label: '香蕉', value: 'banana' },
-  { label: '橘子', value: 'orange', disabled: true },
-];
-
-/**
- * 数据驱动 — 对齐 cloud-design `Radio.Group dataSource` / antd `Radio.Group options`。
- * 传入 `options` prop 即可,内部自动渲染 `RadioGroupItem` + Label。
- */
-export const OptionsGroup: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <RadioGroup options={fruitOptions} defaultValue="apple" />,
-};
-
-/**
- * 数据驱动 + 按钮模式 — `variant="button"` + `options`。
- */
-export const OptionsButtonGroup: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <RadioGroup
-      variant="button"
-      options={[
-        { label: '日', value: 'day' },
-        { label: '周', value: 'week' },
-        { label: '月', value: 'month' },
-      ]}
-      defaultValue="month"
-    />
-  ),
-};