@teamix-evo/ui 0.1.1

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Progress, ProgressCircle } from './progress';
+
+const meta: Meta<typeof Progress> = {
+  title: '基础原语 · Foundation/Progress',
+  component: Progress,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '进度条 — 展示一个任务的完成进度，访问友好的状态反馈。Radix Progress 实现 + antd Progress 的能力并集：除默认线形（`Progress`）外还提供环形 `ProgressCircle`，支持 `status`（normal / success / warning / exception）、`size`、`showInfo` 以及任意 `format` 提示。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+  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

@@ -0,0 +1,195 @@
+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-emerald-500',
+  warning: 'bg-amber-500',
+  exception: 'bg-destructive',
+};
+
+const statusTextColor: Record<ProgressStatus, string> = {
+  normal: 'text-foreground',
+  success: 'text-emerald-600',
+  warning: 'text-amber-600',
+  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 "default"
+   */
+  size?: 'sm' | 'default' | 'lg';
+}
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(
+  (
+    {
+      className,
+      value = 0,
+      status = 'normal',
+      showInfo = false,
+      size = 'default',
+      ...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-emerald-500'
+                : status === 'warning'
+                  ? 'stroke-amber-500'
+                  : status === 'exception'
+                    ? 'stroke-destructive'
+                    : 'stroke-primary',
+            )}
+          />
+        </svg>
+        {showInfo ? (
+          <span
+            className={cn(
+              'absolute text-sm 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

@@ -0,0 +1,103 @@
+---
+id: radio-group
+name: RadioGroup
+type: component
+category: form
+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 -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `variant` | `'default' \| 'button'` | `"default"` | – | 渲染样式 — `default` 经典圆点;`button` 渲染为按钮组(antd `Radio.Button` 并集)。 |
+<!-- 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 失败
+
+## 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>
+```

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

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RadioGroup, RadioGroupItem, RadioGroupButton } from './radio-group';
+
+const meta: Meta<typeof RadioGroup> = {
+  title: '表单与输入 · Form/RadioGroup',
+  component: RadioGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '单选组 — 在一组互斥选项中选中唯一一个。Radix RadioGroup 实现 + antd Radio 的并集能力：同时提供默认的点选型 `RadioGroupItem` 与按钮型 `RadioGroupButton`（对齐 antd `Radio.Button`），通过 `variant` prop 切换。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+  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>
+  ),
+};

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

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+
+export interface RadioGroupProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+  /**
+   * 渲染样式 — `default` 经典圆点;`button` 渲染为按钮组(antd `Radio.Button` 并集)。
+   * @default "default"
+   */
+  variant?: 'default' | 'button';
+}
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  RadioGroupProps
+>(({ className, variant = 'default', ...props }, ref) => (
+  <RadioGroupPrimitive.Root
+    ref={ref}
+    data-variant={variant}
+    className={cn(
+      variant === 'button'
+        ? 'inline-flex divide-x divide-input overflow-hidden rounded-md border border-input shadow-sm'
+        : 'grid gap-2',
+      className,
+    )}
+    {...props}
+  />
+));
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+export interface RadioGroupItemProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {}
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupItemProps
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      'aspect-square size-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+      <Circle className="size-2.5 fill-primary" />
+    </RadioGroupPrimitive.Indicator>
+  </RadioGroupPrimitive.Item>
+));
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+// ─── RadioGroupButton(Button-style item, antd `Radio.Button` 并集)───────
+
+export interface RadioGroupButtonProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {}
+
+const RadioGroupButton = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupButtonProps
+>(({ className, children, ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      'inline-flex h-9 cursor-pointer items-center justify-center px-4 text-sm font-medium transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:hover:bg-primary/90',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </RadioGroupPrimitive.Item>
+));
+RadioGroupButton.displayName = 'RadioGroupButton';
+
+export { RadioGroup, RadioGroupItem, RadioGroupButton };

package/src/components/rate/rate.meta.md

@@ -0,0 +1,87 @@
+---
+id: rate
+name: Rate
+type: component
+category: form
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Rate
+
+星级评分 — antd 独有补足。**等价 antd `Rate`**。支持半星(`allowHalf`)、再次点击清零(`allowClear`)、自定义图标(`character`)、只读展示(`disabled`)。
+
+## When to use
+
+- 评论 / 评分场景(电商商品、酒店、餐厅)
+- 用户偏好评分(满意度调查)
+- 只读展示评分均值(`disabled` + `value`)
+
+## When NOT to use
+
+- 二元选择(喜欢 / 不喜欢)→ `Toggle` / `Button` 配 icon
+- 多档定量评分(0~100)→ `Slider`
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `count` | `number` | `5` | – | 总星数(antd `count` 并集)。 |
+| `value` | `number` | – | – | 受控值。 |
+| `defaultValue` | `number` | – | – | uncontrolled 初值。 |
+| `allowHalf` | `boolean` | `false` | – | 允许半星(antd `allowHalf` 并集) — 启用后单星可点击左半 / 右半。 |
+| `allowClear` | `boolean` | `true` | – | 允许再次点击同值清零(antd `allowClear` 并集)。 |
+| `disabled` | `boolean` | – | – | 禁用(只展示)。 |
+| `size` | `'sm' \| 'default' \| 'lg'` | `"default"` | – | 尺寸(影响星图大小)。 |
+| `character` | `React.ReactNode` | – | – | 自定义图标(antd `character` 并集) — 默认 `lucide-react` 的 `Star`。 |
+| `onChange` | `(value: number) => void` | – | – | value 变化回调。 |
+<!-- auto:props:end -->
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add rate` 时,以下 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 -->
+
+## AI 生成纪律
+
+- **`disabled` 即只读** — 配 `value` 显示评分均值;**不要**模拟"半禁用"或"局部可改"
+- **`allowHalf` 仅前端显示用** — 业务层数据建议存为 number(允许 0.5 步长)
+- **`allowClear` 默认 true** — 与 antd 一致;关闭后用户无法清空评分,只能改值
+- **`character` 自定义图标**:必须是 `React.isValidElement` 节点,组件会在选中态注入 `fill="currentColor"`;**不要**传字符串
+- **大评分场景**(`count > 7`)视觉拥挤,建议改用 `Slider` + 数字展示
+
+## Examples
+
+```tsx
+import { Rate } from '@/components/ui/rate';
+import { Heart } from 'lucide-react';
+import * as React from 'react';
+
+// 基础
+<Rate defaultValue={3} />
+
+// 半星
+<Rate allowHalf defaultValue={3.5} />
+
+// 受控
+const [v, setV] = React.useState(0);
+<Rate value={v} onChange={setV} allowHalf />
+
+// 自定义图标
+<Rate character={<Heart className="size-5" />} count={5} defaultValue={3} />
+
+// 只读
+<Rate disabled value={4.5} allowHalf />
+```

package/src/components/rate/rate.stories.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Heart } from 'lucide-react';
+import { Rate } from './rate';
+
+const meta: Meta<typeof Rate> = {
+  title: '表单与输入 · Form/Rate',
+  component: Rate,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '星级评分 — 评论 / 商品评分 / 偏好满意度。支持半星 + 再次点击清零 + 自定义图标 + 只读展示。等价 antd `Rate`。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+      },
+    },
+  },
+  argTypes: {
+    count: { control: { type: 'number', min: 3, max: 10 } },
+    allowHalf: { control: 'boolean' },
+    allowClear: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
+  },
+  args: { count: 5, allowHalf: false, allowClear: true, disabled: false, size: 'default' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Rate>;
+
+export const Playground: Story = {
+  render: (args) => <Rate {...args} defaultValue={3} />,
+};
+
+export const HalfStar: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <Rate allowHalf defaultValue={3.5} />,
+};
+
+export const Controlled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [v, setV] = React.useState<number>(0);
+    return (
+      <div className="flex items-center gap-3">
+        <Rate value={v} onChange={setV} allowHalf />
+        <span className="text-sm text-muted-foreground tabular-nums">
+          {v.toFixed(1)} / 5
+        </span>
+      </div>
+    );
+  },
+};
+
+export const CustomIcon: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Rate character={<Heart className="size-5" />} count={5} defaultValue={3} />
+  ),
+};
+
+export const ReadOnly: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Rate disabled value={4.5} allowHalf size="sm" />
+      <span className="text-sm text-muted-foreground">4.5 / 5 (1,287 评价)</span>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-6">
+      <Rate size="sm" defaultValue={3} />
+      <Rate size="default" defaultValue={3} />
+      <Rate size="lg" defaultValue={3} />
+    </div>
+  ),
+};