@teamix-evo/ui 0.1.1

package/src/components/popconfirm/popconfirm.meta.md

@@ -0,0 +1,109 @@
+---
+id: popconfirm
+name: Popconfirm
+type: component
+category: feedback
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Popconfirm
+
+轻量级确认弹层 — antd 独有补足。**等价 antd `Popconfirm`**。用于"小风险"操作的二次确认(删除一行、忽略某条通知),视觉比 `AlertDialog` 更轻、不阻塞页面;`onConfirm` 支持返回 Promise(等待时按钮自动 loading)。
+
+## When to use
+
+- 删除某一行 / 移除单个标签 / 取消订阅(影响小,可撤销)
+- 列表行末"忽略"、"已读"等次级操作的确认
+- 业务流程中"不希望误点"的轻量动作
+
+## When NOT to use
+
+- **高风险 / 不可逆操作**(注销账号、删除整库)→ `AlertDialog`(全屏阻塞)
+- 无后果的纯展示 → `Tooltip` / `Popover`
+- 长决策路径(需要填写理由)→ `Dialog` / `Drawer`
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `children` | `React.ReactElement` | – | ✓ | 触发节点(通常是 Button / a)。 |
+| `title` | `React.ReactNode` | – | ✓ | 主标题(antd `title` 并集)。 |
+| `description` | `React.ReactNode` | – | – | 副描述(antd `description` 并集) — 解释操作后果。 |
+| `icon` | `React.ReactNode` | – | – | 触发图标(antd `icon` 并集) — 默认警示图标。 |
+| `okText` | `string` | `"确定"` | – | 确认按钮文本(antd `okText` 并集)。 |
+| `cancelText` | `string` | `"取消"` | – | 取消按钮文本(antd `cancelText` 并集)。 |
+| `okType` | `'default' \| 'destructive'` | `"default"` | – | 确认按钮 variant(antd `okType` 并集) — 危险操作请用 `destructive`。 |
+| `onConfirm` | `() => void \| Promise<void>` | – | – | 确认回调。 |
+| `onCancel` | `() => void` | – | – | 取消回调。 |
+| `open` | `boolean` | – | – | 受控 open(antd `open` 并集) — 不传时本组件自管 open 状态。 |
+| `onOpenChange` | `(next: boolean) => void` | – | – | open 变化回调。 |
+| `disabled` | `boolean` | – | – | 禁用(子节点点击不弹出)。 |
+<!-- auto:props:end -->
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add popconfirm` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| `button` | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
+| `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集 |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add lucide-react@^0.460.0
+```
+<!-- auto:deps:end -->
+
+## AI 生成纪律
+
+- **`title` 短句直白**(动词开头)— "删除此评论?"/"取消订阅?";**不要**用模糊措辞
+- **`description` 写后果**:"删除后无法恢复"/"取消后将停止收到通知";**不要**写废话
+- **危险动作**:`okType="destructive"` 必须配合 destructive variant 视觉,与 `AlertDialog` 一致的语义
+- **`onConfirm` 返回 Promise**:组件会自动给确认按钮加 loading,**不要**自己在 onConfirm 外再做 spinner
+- **`disabled`** 直接返回 children,不挂监听 — 用于"按钮已经做了别的事"的场景
+- **不要嵌套 Popconfirm**:两层确认极少合理,改用 AlertDialog
+
+## Examples
+
+```tsx
+import { Popconfirm } from '@/components/ui/popconfirm';
+import { Button } from '@/components/ui/button';
+
+// 危险删除
+<Popconfirm
+  title="删除此评论?"
+  description="删除后无法恢复"
+  okType="destructive"
+  okText="删除"
+  onConfirm={async () => {
+    await api.deleteComment(id);
+    toast.success('已删除');
+  }}
+>
+  <Button variant="ghost" size="sm">删除</Button>
+</Popconfirm>
+
+// 普通确认
+<Popconfirm
+  title="确认取消订阅?"
+  description="你将停止收到每日摘要邮件"
+  onConfirm={() => unsubscribe()}
+>
+  <Button variant="outline">取消订阅</Button>
+</Popconfirm>
+
+// 自定义图标
+<Popconfirm
+  title="重置筛选条件?"
+  icon={<RefreshCcw className="size-4 text-primary" />}
+  onConfirm={resetFilters}
+>
+  <Button variant="ghost">重置</Button>
+</Popconfirm>
+```

package/src/components/popconfirm/popconfirm.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RefreshCcw } from 'lucide-react';
+import { Popconfirm } from './popconfirm';
+import { Button } from '@/components/button/button';
+
+const meta: Meta<typeof Popconfirm> = {
+  title: '反馈与浮层 · Feedback/Popconfirm',
+  component: Popconfirm,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '轻量级确认弹层 — 小风险操作的二次确认(删除一行 / 忽略一条通知)。视觉比 AlertDialog 更轻、不阻塞页面;onConfirm 支持 Promise(等待时按钮自动 loading)。等价 antd `Popconfirm`。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Popconfirm>;
+
+export const Playground: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Popconfirm
+      title="确认取消订阅?"
+      description="你将停止收到每日摘要邮件"
+      onConfirm={() => new Promise<void>((r) => setTimeout(r, 400))}
+    >
+      <Button variant="outline">取消订阅</Button>
+    </Popconfirm>
+  ),
+};
+
+export const Destructive: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Popconfirm
+      title="删除此评论?"
+      description="删除后无法恢复"
+      okType="destructive"
+      okText="删除"
+      onConfirm={() => new Promise<void>((r) => setTimeout(r, 600))}
+    >
+      <Button variant="ghost" size="sm">
+        删除
+      </Button>
+    </Popconfirm>
+  ),
+};
+
+export const CustomIcon: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Popconfirm
+      title="重置所有筛选条件?"
+      icon={<RefreshCcw className="size-4 text-primary" />}
+      onConfirm={() => {
+        // eslint-disable-next-line no-alert
+        alert('已重置');
+      }}
+    >
+      <Button variant="ghost">重置筛选</Button>
+    </Popconfirm>
+  ),
+};
+
+export const Disabled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Popconfirm disabled title="不会弹出">
+      <Button variant="outline">禁用态(直接点击不弹出)</Button>
+    </Popconfirm>
+  ),
+};

package/src/components/popconfirm/popconfirm.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { AlertCircle } from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+import { Button } from '@/components/button/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/popover/popover';
+
+export interface PopconfirmProps {
+  /** 触发节点(通常是 Button / a)。 */
+  children: React.ReactElement;
+  /** 主标题(antd `title` 并集)。 */
+  title: React.ReactNode;
+  /** 副描述(antd `description` 并集) — 解释操作后果。 */
+  description?: React.ReactNode;
+  /**
+   * 触发图标(antd `icon` 并集) — 默认警示图标。
+   */
+  icon?: React.ReactNode;
+  /** 确认按钮文本(antd `okText` 并集)。 @default "确定" */
+  okText?: string;
+  /** 取消按钮文本(antd `cancelText` 并集)。 @default "取消" */
+  cancelText?: string;
+  /**
+   * 确认按钮 variant(antd `okType` 并集) — 危险操作请用 `destructive`。
+   * @default "default"
+   */
+  okType?: 'default' | 'destructive';
+  /** 确认回调。 */
+  onConfirm?: () => void | Promise<void>;
+  /** 取消回调。 */
+  onCancel?: () => void;
+  /** 受控 open(antd `open` 并集) — 不传时本组件自管 open 状态。 */
+  open?: boolean;
+  /** open 变化回调。 */
+  onOpenChange?: (next: boolean) => void;
+  /** 禁用(子节点点击不弹出)。 */
+  disabled?: boolean;
+}
+
+/**
+ * 轻量级确认弹层 — antd 独有补足。**等价 antd `Popconfirm`**。
+ * 用于"小风险"操作的二次确认(删除某一行、忽略某条通知),
+ * 视觉比 `AlertDialog` 更轻、不阻塞页面。
+ *
+ * **风险更高的操作请用 `AlertDialog`**(全屏阻塞模态)。
+ */
+const Popconfirm: React.FC<PopconfirmProps> = ({
+  children,
+  title,
+  description,
+  icon,
+  okText = '确定',
+  cancelText = '取消',
+  okType = 'default',
+  onConfirm,
+  onCancel,
+  open,
+  onOpenChange,
+  disabled = false,
+}) => {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const isControlled = open !== undefined;
+  const currentOpen = isControlled ? open! : internalOpen;
+  const [loading, setLoading] = React.useState(false);
+
+  const setOpen = (next: boolean) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const handleConfirm = async () => {
+    try {
+      setLoading(true);
+      await onConfirm?.();
+      setOpen(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    onCancel?.();
+    setOpen(false);
+  };
+
+  if (disabled) return children;
+
+  return (
+    <Popover open={currentOpen} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent className="w-72 p-3" align="start">
+        <div className="flex items-start gap-2">
+          <span className="mt-0.5 text-amber-500">
+            {icon ?? <AlertCircle className="size-4" />}
+          </span>
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-medium">{title}</div>
+            {description ? (
+              <div className={cn('mt-1 text-xs text-muted-foreground')}>
+                {description}
+              </div>
+            ) : null}
+          </div>
+        </div>
+        <div className="mt-3 flex justify-end gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleCancel}
+          >
+            {cancelText}
+          </Button>
+          <Button
+            type="button"
+            variant={okType === 'destructive' ? 'destructive' : 'default'}
+            size="sm"
+            loading={loading}
+            onClick={handleConfirm}
+          >
+            {okText}
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+Popconfirm.displayName = 'Popconfirm';
+
+export { Popconfirm };

package/src/components/popover/popover.meta.md

@@ -0,0 +1,97 @@
+---
+id: popover
+name: Popover
+type: component
+category: feedback
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Popover
+
+可交互浮层 — Radix Popover + antd `arrow` 并集。
+**与 Tooltip 区别**:Popover 内可放任意交互元素(button / form / link),触发方式为 click(默认),不是 hover。
+
+## When to use
+
+- 行内编辑(点字段名跳出编辑面板)
+- 高级筛选 / 设置面板
+- 动作菜单(超过 3 项时考虑 DropdownMenu)
+- 信息卡片(用户头像 + 简介)
+
+## When NOT to use
+
+- 仅文字提示 → `Tooltip`
+- 必须用户响应(阻断式)→ `Dialog` / `AlertDialog`
+- 选择类下拉 → `Select` / `Combobox`
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `PopoverContent` 的 props;`Popover`(Root)透传 Radix 的 `open / defaultOpen / onOpenChange / modal`。
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `arrow` | `boolean` | `false` | – | 是否显示三角形箭头(antd `arrow` 并集)。 |
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add popover` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add @radix-ui/react-popover@^1.1.0
+```
+<!-- auto:deps:end -->
+
+> 子组件:`Popover`(Root)/ `PopoverTrigger`(触发器,通常 asChild)/ `PopoverContent`(浮层内容)/ `PopoverClose`(关闭按钮)/ `PopoverAnchor`(独立锚点)。
+
+## AI 生成纪律
+
+- **Trigger 用 `asChild`**:把已有按钮 wrap 进去而非另套层 `<button>`
+- **Content 必有焦点目标**:键盘可达性 — Popover 打开后第一个可聚焦元素自动获焦
+- **不嵌套 Popover**:嵌套会导致焦点陷阱混乱;改用 `Sheet` 或 `Dialog`
+- **`modal={true}` 仅用于阻断场景**:默认 modal=false,允许用户点外部关闭
+
+## Examples
+
+```tsx
+import {
+  Popover, PopoverTrigger, PopoverContent,
+} from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+
+// 基础
+<Popover>
+  <PopoverTrigger asChild>
+    <Button variant="outline">打开</Button>
+  </PopoverTrigger>
+  <PopoverContent>
+    <h4 className="font-medium">标题</h4>
+    <p className="text-sm text-muted-foreground">描述文字...</p>
+  </PopoverContent>
+</Popover>
+
+// 带箭头
+<Popover>
+  <PopoverTrigger asChild>
+    <Button>更多</Button>
+  </PopoverTrigger>
+  <PopoverContent arrow>
+    <p>简短说明</p>
+  </PopoverContent>
+</Popover>
+```

package/src/components/popover/popover.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Popover, PopoverTrigger, PopoverContent } from './popover';
+import { Button } from '@/components/button/button';
+import { Input } from '@/components/input/input';
+import { Label } from '@/components/label/label';
+
+const meta: Meta<typeof PopoverContent> = {
+  title: '反馈与浮层 · Feedback/Popover',
+  component: PopoverContent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '气泡卡片 — 由 trigger 触发，在 portal 中展示富内容（表单、菜单、说明等）。Radix Popover 实现 + antd Popover 的语义并集：相比 Tooltip 仅承载纯文本提示，Popover 可承载任意交互内容；通过 `side` / `align` 控制方位，`arrow` 控制是否带尖角。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+  argTypes: {
+    side: {
+      control: 'inline-radio',
+      options: ['top', 'right', 'bottom', 'left'],
+    },
+    align: {
+      control: 'inline-radio',
+      options: ['start', 'center', 'end'],
+    },
+    arrow: { control: 'boolean' },
+  },
+  args: { side: 'bottom', align: 'center', arrow: false },
+};
+
+export default meta;
+type Story = StoryObj<typeof PopoverContent>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">打开 Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent {...args}>
+        <h4 className="mb-1 font-medium">尺寸调整</h4>
+        <p className="text-sm text-muted-foreground">
+          设置组件宽高,关闭后自动应用。
+        </p>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+
+export const InteractiveForm: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button>边距设置</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="grid gap-3">
+          <h4 className="font-medium">边距</h4>
+          <div className="grid grid-cols-3 items-center gap-3">
+            <Label htmlFor="m-top">上</Label>
+            <Input id="m-top" defaultValue="16" className="col-span-2 h-8" />
+          </div>
+          <div className="grid grid-cols-3 items-center gap-3">
+            <Label htmlFor="m-right">右</Label>
+            <Input id="m-right" defaultValue="16" className="col-span-2 h-8" />
+          </div>
+          <div className="grid grid-cols-3 items-center gap-3">
+            <Label htmlFor="m-bottom">下</Label>
+            <Input id="m-bottom" defaultValue="16" className="col-span-2 h-8" />
+          </div>
+          <div className="grid grid-cols-3 items-center gap-3">
+            <Label htmlFor="m-left">左</Label>
+            <Input id="m-left" defaultValue="16" className="col-span-2 h-8" />
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+};

package/src/components/popover/popover.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/utils/cn';
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverClose = PopoverPrimitive.Close;
+
+export interface PopoverContentProps
+  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+  /**
+   * 是否显示三角形箭头(antd `arrow` 并集)。
+   * @default false
+   */
+  arrow?: boolean;
+}
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(
+  (
+    { className, align = 'center', sideOffset = 4, arrow = false, children, ...props },
+    ref,
+  ) => (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {arrow ? (
+          <PopoverPrimitive.Arrow className="fill-popover" width={10} height={5} />
+        ) : null}
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  ),
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverClose,
+};

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

@@ -0,0 +1,86 @@
+---
+id: progress
+name: Progress
+type: component
+category: foundation
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# 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' \| 'default' \| 'lg'` | `"default"` | – | 进度条尺寸。 |
+<!-- 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 -->
+
+> `ProgressCircle` 的 props 详见 [`progress.tsx`](./progress.tsx) 的 `ProgressCircleProps` interface。
+
+## 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} />
+```