@teamix-evo/ui 0.5.0 → 0.6.0

package/src/components/sonner/stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import * as React from 'react';
-import { CircleHelpIcon } from 'lucide-react';
+import { HelpFilledIcon } from '@/components/icon';
 import { Button } from '@/components/button';
 import { HelpToastIcon, Toaster, toast } from './index';
 
@@ -13,9 +13,8 @@ const meta: Meta<typeof Toaster> = {
   },
   decorators: [
     (Story) => (
-      <div>
+      <div style={{ minHeight: 280 }}>
         <Story />
-        <Toaster />
       </div>
     ),
   ],
@@ -26,6 +25,25 @@ type Story = StoryObj<typeof Toaster>;
 
 /** 五档语义状态 — 等价 cloud-design `Message.success / .error / .warning / .notice / .help / .loading`。 */
 export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { Toaster, toast } from '@/components/sonner';
+
+// 全局挂载一次 Toaster 容器
+<Toaster />
+
+// 通过 toast() 函数式触发
+toast('默认通知');
+toast.success('保存成功');
+toast.info('已收到 3 条新消息');
+toast.warning('请检查网络连接');
+toast.error('操作失败，请重试');
+toast.loading('正在加载...');
+toast('需要帮助？', { icon: HelpToastIcon });`,
+      },
+    },
+  },
   render: () => (
     <div className="flex flex-wrap gap-2">
       <Button onClick={() => toast('默认通知')}>默认</Button>
@@ -44,6 +62,7 @@ export const Default: Story = {
         help
       </Button>
       <Button onClick={() => toast.loading('正在加载...')}>loading</Button>
+      <Toaster />
     </div>
   ),
 };
@@ -51,70 +70,82 @@ export const Default: Story = {
 /** 标题 + 描述 — 对应 cloud-design `Notification.open({ title, content })`。 */
 export const WithTitleAndDescription: Story = {
   render: () => (
-    <Button
-      onClick={() =>
-        toast('文件已保存', {
-          description: '你的修改已自动同步到云端，可在历史版本中找回。',
-        })
-      }
-    >
-      触发
-    </Button>
+    <>
+      <Button
+        onClick={() =>
+          toast('文件已保存', {
+            description: '你的修改已自动同步到云端，可在历史版本中找回。',
+          })
+        }
+      >
+        触发
+      </Button>
+      <Toaster />
+    </>
   ),
 };
 
 /** 操作按钮 — 业内主流 `action` props，单击执行下一步行动并关闭。 */
 export const WithAction: Story = {
   render: () => (
-    <Button
-      onClick={() =>
-        toast('已删除项目「示例」', {
-          description: '删除后 7 天内可在回收站恢复。',
-          action: {
-            label: '撤销',
-            onClick: () => toast.success('已撤销删除'),
-          },
-        })
-      }
-    >
-      触发
-    </Button>
+    <>
+      <Button
+        onClick={() =>
+          toast('已删除项目「示例」', {
+            description: '删除后 7 天内可在回收站恢复。',
+            action: {
+              label: '撤销',
+              onClick: () => toast.success('已撤销删除'),
+            },
+          })
+        }
+      >
+        触发
+      </Button>
+      <Toaster />
+    </>
   ),
 };
 
 /** 取消按钮 — 与 action 并存的次级行动点，可阻断默认行为。 */
 export const WithCancel: Story = {
   render: () => (
-    <Button
-      onClick={() =>
-        toast('确认离开当前页面？', {
-          description: '未保存的修改将丢失。',
-          action: { label: '继续', onClick: () => toast.info('已继续') },
-          cancel: { label: '取消', onClick: () => toast('已取消') },
-        })
-      }
-    >
-      触发
-    </Button>
+    <>
+      <Button
+        onClick={() =>
+          toast('确认离开当前页面？', {
+            description: '未保存的修改将丢失。',
+            action: { label: '继续', onClick: () => toast.info('已继续') },
+            cancel: { label: '取消', onClick: () => toast('已取消') },
+          })
+        }
+      >
+        触发
+      </Button>
+      <Toaster />
+    </>
   ),
 };
 
 /** 按 id 链式更新 — 等价 cloud-design `Message.loading + Message.success({ key })`。 */
 export const LoadingThenResolve: Story = {
   render: () => (
-    <Button
-      onClick={() => {
-        const id = toast.loading('正在上传...');
-        setTimeout(() => {
-          toast.success('上传完成', {
-            id,
-            description: '文件已发布到生产环境。',
-          });
-        }, 1500);
-      }}
-    >
-      触发
-    </Button>
+    <>
+      <Button
+        onClick={() => {
+          const id = toast.loading('正在上传...');
+          setTimeout(() => {
+            toast.success('上传完成', {
+              id,
+              description: '文件已发布到生产环境。',
+            });
+          }, 1500);
+        }}
+      >
+        触发
+      </Button>
+      <Toaster />
+    </>
   ),
 };
 
@@ -130,17 +161,20 @@ export const PromiseToast: Story = {
       });
 
     return (
-      <Button
-        onClick={() =>
-          toast.promise(mockRequest(), {
-            loading: '正在提交订单...',
-            success: (data) => `${data.name} 已提交`,
-            error: (err: Error) => `提交失败：${err.message}`,
-          })
-        }
-      >
-        触发
-      </Button>
+      <>
+        <Button
+          onClick={() =>
+            toast.promise(mockRequest(), {
+              loading: '正在提交订单...',
+              success: (data) => `${data.name} 已提交`,
+              error: (err: Error) => `提交失败：${err.message}`,
+            })
+          }
+        >
+          触发
+        </Button>
+        <Toaster />
+      </>
     );
   },
 };
@@ -165,6 +199,7 @@ export const Duration: Story = {
       >
         持久 (Infinity)
       </Button>
+      <Toaster />
     </div>
   ),
 };
@@ -215,30 +250,33 @@ export const Placement: Story = {
 /** 自定义渲染 — `toast.custom` 完全接管节点，用于嵌入富内容卡片。 */
 export const Custom: Story = {
   render: () => (
-    <Button
-      onClick={() =>
-        toast.custom((id) => (
-          <div className="flex w-80 items-start gap-3 rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-lg">
-            <CircleHelpIcon className="mt-0.5 size-4 shrink-0 text-help" />
-            <div className="flex-1">
-              <div className="text-sm font-medium">自定义卡片</div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                你可以在此渲染任意 JSX：表单、富文本、进度条等。
+    <>
+      <Button
+        onClick={() =>
+          toast.custom((id) => (
+            <div className="flex w-80 items-start gap-3 rounded-md border border-border bg-popover p-3 text-popover-foreground">
+              <HelpFilledIcon className="mt-0.5 size-4 shrink-0 text-help" />
+              <div className="flex-1">
+                <div className="text-sm font-medium">自定义卡片</div>
+                <div className="mt-1 text-xs text-muted-foreground">
+                  你可以在此渲染任意 JSX：表单、富文本、进度条等。
+                </div>
               </div>
+              <button
+                type="button"
+                className="cursor-pointer text-xs text-muted-foreground hover:text-foreground"
+                onClick={() => toast.dismiss(id)}
+              >
+                关闭
+              </button>
             </div>
-            <button
-              type="button"
-              className="cursor-pointer text-xs text-muted-foreground hover:text-foreground"
-              onClick={() => toast.dismiss(id)}
-            >
-              关闭
-            </button>
-          </div>
-        ))
-      }
-    >
-      触发
-    </Button>
+          ))
+        }
+      >
+        触发
+      </Button>
+      <Toaster />
+    </>
   ),
 };
 
@@ -251,7 +289,7 @@ export const DismissProgrammatic: Story = {
         <Button
           onClick={() => {
             idRef.current = toast('一条可被定向关闭的通知', {
-              description: '保留这条 id，再点"关闭它"按钮。',
+              description: '保留这条 id，再点“关闭它”按钮。',
               duration: Infinity,
             });
           }}
@@ -279,6 +317,7 @@ export const DismissProgrammatic: Story = {
         <Button variant="destructive" onClick={() => toast.dismiss()}>
           全部关闭
         </Button>
+        <Toaster />
       </div>
     );
   },

package/src/components/spinner/index.tsx

@@ -19,6 +19,174 @@ import { Loader2Icon } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 
+/* ────────────────────────────────────────────────────────────────────────── */
+/* SpinnerDots keyframes（singleton 注入）                                      */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+const SPINNER_DOTS_STYLE_ID = '__spinner-dots-keyframes__';
+
+/**
+ * 确保 keyframes 在 DOM 中只注入一次。
+ * 双层动画架构（对齐 cloud-design fusion-reactor）：
+ * - 外层容器：阶梯式旋转（快速转 90° → 停住），实现弧线位移
+ * - 每个点：径向脉动（边缘 → 中心 → 边缘），实现汇聚与发散
+ */
+function ensureDotsKeyframes() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(SPINNER_DOTS_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = SPINNER_DOTS_STYLE_ID;
+  style.textContent = `
+@keyframes __sdots-orbit__ {
+  0% { transform: rotate(0deg); }
+  5% { transform: rotate(90deg); }
+  25% { transform: rotate(90deg); }
+  30% { transform: rotate(180deg); }
+  50% { transform: rotate(180deg); }
+  55% { transform: rotate(270deg); }
+  75% { transform: rotate(270deg); }
+  80% { transform: rotate(360deg); }
+  100% { transform: rotate(360deg); }
+}
+@keyframes __sdot-x__ {
+  25% { left: 0; }
+  45%, 50% { left: calc(50% - 4px); }
+  90% { left: 0; }
+}
+@keyframes __sdot-y__ {
+  25% { top: 0; }
+  45%, 50% { top: calc(50% - 4px); }
+  90% { top: 0; }
+}
+@keyframes __sdot-xr__ {
+  25% { right: 0; }
+  45%, 50% { right: calc(50% - 4px); }
+  90% { right: 0; }
+}
+@keyframes __sdot-yr__ {
+  25% { bottom: 0; }
+  45%, 50% { bottom: calc(50% - 4px); }
+  90% { bottom: 0; }
+}
+`;
+  document.head.appendChild(style);
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/* SpinnerDots（四点轨道位移原子）                                               */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+/** 容器尺寸（点固定 8×8px） */
+const DOTS_SIZES = {
+  sm: { container: 'size-6' },
+  md: { container: 'size-7' },
+  lg: { container: 'size-8' },
+} as const;
+
+export interface SpinnerDotsProps
+  extends Omit<React.ComponentProps<'span'>, 'children'> {
+  /** 三档尺寸，控制点的扩散半径 */
+  size?: 'sm' | 'md' | 'lg';
+  /** sr-only 读屏文本 */
+  label?: string;
+}
+
+/**
+ * 四点轨道位移旋转指示器（对齐 cloud-design fusion-reactor 动效）。
+ * 4 个主题色（primary）圆点 8×8px，透明度 1 / 0.8 / 0.6 / 0.2，分居左上右下。
+ * 双层动画：外层容器阶梯旋转（弧线位移）+ 每个点径向脉动（汇聚/发散）。
+ */
+function SpinnerDots({
+  size = 'md',
+  label = '加载中',
+  className,
+  ...props
+}: SpinnerDotsProps) {
+  React.useEffect(() => {
+    ensureDotsKeyframes();
+  }, []);
+
+  const sizeToken = DOTS_SIZES[size ?? 'md'];
+
+  const dotBase: React.CSSProperties = {
+    position: 'absolute',
+    width: '8px',
+    height: '8px',
+    borderRadius: '50%',
+    background: 'var(--color-primary)',
+    margin: 'auto',
+    animationDuration: '1.4s',
+    animationTimingFunction: 'ease-in-out',
+    animationIterationCount: 'infinite',
+  };
+
+  return (
+    <span
+      data-slot="spinner-dots-root"
+      role="status"
+      aria-live="polite"
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center',
+        className,
+      )}
+      {...props}
+    >
+      {/* 外层容器：阶梯旋转（5.6s = 4 × 1.4s） */}
+      <span
+        data-slot="spinner-dots"
+        className={cn('relative inline-block', sizeToken.container)}
+        style={{ animation: '__sdots-orbit__ 5.6s linear infinite' }}
+      >
+        {/* 左 · opacity 1 — 径向向右脉动 (nextVectorDotsX) */}
+        <span
+          style={{
+            ...dotBase,
+            top: 0,
+            bottom: 0,
+            left: 0,
+            opacity: 1,
+            animationName: '__sdot-x__',
+          }}
+        />
+        {/* 上 · opacity 0.8 — 径向向下脉动 (nextVectorDotsY) */}
+        <span
+          style={{
+            ...dotBase,
+            left: 0,
+            right: 0,
+            top: 0,
+            opacity: 0.8,
+            animationName: '__sdot-y__',
+          }}
+        />
+        {/* 右 · opacity 0.6 — 径向向左脉动 (nextVectorDotsXR) */}
+        <span
+          style={{
+            ...dotBase,
+            top: 0,
+            bottom: 0,
+            right: 0,
+            opacity: 0.6,
+            animationName: '__sdot-xr__',
+          }}
+        />
+        {/* 下 · opacity 0.2 — 径向向上脉动 (nextVectorDotsYR) */}
+        <span
+          style={{
+            ...dotBase,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            opacity: 0.2,
+            animationName: '__sdot-yr__',
+          }}
+        />
+      </span>
+      {label ? <span className="sr-only">{label}</span> : null}
+    </span>
+  );
+}
+
 /* ────────────────────────────────────────────────────────────────────────── */
 /* Spinner（原子）                                                             */
 /* ────────────────────────────────────────────────────────────────────────── */
@@ -72,6 +240,7 @@ function Spinner({
         data-size={size}
         data-tone={tone ?? 'default'}
         aria-hidden="true"
+        strokeWidth={1.5}
         className={cn(spinnerVariants({ size, tone }), className)}
         {...props}
       />
@@ -327,6 +496,7 @@ function SpinnerFullscreen({
 
 export {
   Spinner,
+  SpinnerDots,
   SpinnerTip,
   SpinnerOverlay,
   SpinnerOverlayMask,

package/src/components/spinner/meta.md

@@ -1,4 +1,4 @@
-# Spinner
+# SpinnerDots
 
 > 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
 
@@ -19,6 +19,8 @@ shadcn v4 composable 套件：原子 Spinner + SpinnerTip 文案 + SpinnerOverla
 
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
+| `size` | `'sm' \| 'md' \| 'lg'` | – | – | 三档尺寸，控制点的扩散半径 |
+| `label` | `string` | – | – | sr-only 读屏文本 |
 | `size` | `"xs" \| "sm" \| "md" \| "lg"` | – | – | – |
 | `tone` | `"default" \| "primary" \| "inverse" \| "muted"` | `"default"` | – | – |
 | `label` | `string` | – | – | sr-only 读屏文本，默认 `加载中`；如父级已有可见 tip 可置空 |
@@ -146,6 +148,30 @@ tip 位置：right(行内) 与 bottom(堆叠)。
 </SpinnerOverlay>
 ```
 
+### DotsDefault
+
+SpinnerDots 三档尺寸：四点沿弧线轨道位移动画。
+
+```tsx
+<div className="flex items-center gap-6">
+  <SpinnerDots size="sm" />
+  <SpinnerDots size="md" />
+  <SpinnerDots size="lg" />
+</div>
+```
+
+### OverlayWithDots
+
+SpinnerDots 作为 SpinnerOverlay 的自定义 indicator。
+
+```tsx
+<SpinnerOverlay indicator={<SpinnerDots size="md" />} tip="加载中...">
+  <div className="h-20 w-48 rounded border border-border p-4 text-xs">
+    四点轨道动画
+  </div>
+</SpinnerOverlay>
+```
+
 ### InlineVsBlock
 
 inline(默认)与 block 通栏模式对比。

package/src/components/spinner/stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import * as React from 'react';
 import {
   Spinner,
+  SpinnerDots,
   SpinnerTip,
   SpinnerOverlay,
   SpinnerFullscreen,
@@ -172,6 +173,28 @@ export const Fullscreen: Story = {
   },
 };
 
+/** SpinnerDots 三档尺寸：四点沿弧线轨道位移动画。 */
+export const DotsDefault: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <SpinnerDots size="sm" />
+      <SpinnerDots size="md" />
+      <SpinnerDots size="lg" />
+    </div>
+  ),
+};
+
+/** SpinnerDots 作为 SpinnerOverlay 的自定义 indicator。 */
+export const OverlayWithDots: Story = {
+  render: () => (
+    <SpinnerOverlay indicator={<SpinnerDots size="md" />} tip="加载中...">
+      <div className="h-20 w-48 rounded border border-border p-4 text-xs">
+        四点轨道动画
+      </div>
+    </SpinnerOverlay>
+  ),
+};
+
 /** inline(默认)与 block 通栏模式对比。 */
 export const InlineVsBlock: Story = {
   render: () => (

package/src/components/steps/index.tsx

@@ -135,6 +135,7 @@ const ArrowSteps = React.forwardRef<
     <div
       ref={ref}
       data-slot="steps"
+      data-shape="arrow"
       className={cn('flex flex-row', className)}
       {...props}
     >
@@ -150,6 +151,7 @@ const ArrowSteps = React.forwardRef<
           <button
             key={i}
             type="button"
+            data-status={s}
             tabIndex={clickable ? 0 : -1}
             onClick={clickable ? () => onChange!(i) : undefined}
             aria-disabled={isDisabled || undefined}
@@ -259,6 +261,7 @@ function CircleDotSteps({
     <div
       ref={forwardedRef}
       data-slot="steps"
+      data-shape={shape}
       className={cn(
         'flex',
         isVertical ? 'flex-col gap-0' : 'flex-row items-start gap-0',
@@ -286,7 +289,7 @@ function CircleDotSteps({
           ? null
           : item.icon ??
             (s === 'finish' ? (
-              <Check className={iconSize} />
+              <Check className={iconSize} strokeWidth={3} />
             ) : s === 'error' ? (
               <X className={iconSize} />
             ) : (
@@ -296,6 +299,7 @@ function CircleDotSteps({
         const indicatorBtn = (
           <button
             type="button"
+            data-status={s}
             tabIndex={clickable ? 0 : -1}
             onClick={clickable ? () => onChange!(i) : undefined}
             className={cn(

package/src/components/switch/index.tsx

@@ -23,7 +23,7 @@ import { cn } from '@/lib/utils';
 // ─── cva ────────────────────────────────────────────────────────────────────
 
 const switchVariants = cva(
-  'peer group/switch relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[loading=true]:pointer-events-none data-[loading=true]:opacity-70',
+  'peer group/switch relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-ring/20 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[loading=true]:pointer-events-none data-[loading=true]:opacity-70',
   {
     variants: {
       size: {

package/src/components/table/index.tsx

@@ -176,11 +176,15 @@ function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
 // ─── TableBody ──────────────────────────────────────────────────────────────
 
 function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
-  const { striped } = useTableContext();
+  const { striped, bordered } = useTableContext();
   return (
     <tbody
       data-slot="table-body"
-      className={cn(striped && '[&_tr:nth-child(even)]:bg-muted/30', className)}
+      className={cn(
+        striped && '[&_tr:nth-child(even)]:bg-muted/30',
+        bordered && '[&>tr:last-child]:border-b-0',
+        className,
+      )}
       {...props}
     />
   );