@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/slider/slider.tsx

@@ -1,227 +0,0 @@
-import * as React from 'react';
-import * as SliderPrimitive from '@radix-ui/react-slider';
-
-import { cn } from '@/utils/cn';
-
-export interface SliderProps
-  extends Omit<
-    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
-    | 'value'
-    | 'defaultValue'
-    | 'onValueChange'
-    | 'onValueCommit'
-    | 'min'
-    | 'max'
-    | 'step'
-    | 'disabled'
-    | 'orientation'
-    | 'inverted'
-    | 'name'
-  > {
-  /**
-   * 受控 value — **必为数组**,单滑块 `[v]`,范围滑块 `[lo, hi]`(单/双由数组长度决定)。
-   * 与 `defaultValue` 二选一。
-   */
-  value?: number[];
-  /** 非受控初始值。同样数组形态(单/双由长度决定)。 */
-  defaultValue?: number[];
-  /**
-   * 滑块拖动 / 步进时触发(实时,频率高)。
-   * 业务表单层用 `onValueCommit` 拿到最终值更省心。
-   */
-  onValueChange?: (value: number[]) => void;
-  /**
-   * 拖动结束(mouse up / key up)时触发一次,适合"提交"语义。
-   */
-  onValueCommit?: (value: number[]) => void;
-  /**
-   * 最小值。
-   * @default 0
-   */
-  min?: number;
-  /**
-   * 最大值。
-   * @default 100
-   */
-  max?: number;
-  /**
-   * 步进单位(键盘 ←→ / 拖动吸附)。
-   * @default 1
-   */
-  step?: number;
-  /**
-   * 禁用整个 Slider(灰化 + 不响应交互)。
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * 排列方向(键盘导航方向跟随)。
-   * @default "horizontal"
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * 反向滚动(从右往左 / 从下往上)。
-   * @default false
-   */
-  inverted?: boolean;
-  /** 表单字段名(原生 `<input name>`)。 */
-  name?: string;
-  /**
-   * 刻度标记(antd `marks` 并集)。键为 0~max 的数值,值为标签文本。
-   * 渲染时小标记点 + 文字标签出现在轨道下方(默认)或上方(`marksPosition="above"`)。
-   */
-  marks?: Record<number, React.ReactNode>;
-  /**
-   * 刻度文字位置(cloud-design `marksPosition` 并集) — `"below"` 在轨道下方,`"above"` 在轨道上方。
-   * @default "below"
-   */
-  marksPosition?: 'above' | 'below';
-  /**
-   * 是否常驻显示当前值的 tooltip(cloud-design `tooltipVisible` 并集) —
-   * `true` 时所有 thumb 都会持续显示数值气泡;`false` 时仅在 hover / drag 时显示(默认)。
-   * @default false
-   */
-  tooltipVisible?: boolean;
-  /**
-   * 自定义 tooltip 渲染函数(cloud-design `tipRender` 并集)。
-   * 不传时直接渲染数值。
-   */
-  tipRender?: (value: number) => React.ReactNode;
-}
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  SliderProps
->(
-  (
-    {
-      className,
-      marks,
-      marksPosition = 'below',
-      tooltipVisible = false,
-      tipRender,
-      value,
-      defaultValue,
-      min = 0,
-      max = 100,
-      onValueChange,
-      ...props
-    },
-    ref,
-  ) => {
-    // 单 / 双滑块由 value/defaultValue 数组长度决定
-    const initial = (value ?? defaultValue ?? [0]) as number[];
-    const [internal, setInternal] = React.useState<number[]>(initial);
-    const isControlled = value !== undefined;
-    const current = isControlled ? (value as number[]) : internal;
-
-    const handleValueChange = (next: number[]) => {
-      if (!isControlled) setInternal(next);
-      onValueChange?.(next);
-    };
-
-    const thumbCount = current.length;
-    const showAboveMarks = marks && marksPosition === 'above';
-    const showBelowMarks = marks && marksPosition === 'below';
-
-    return (
-      <div
-        className={cn(
-          'relative w-full',
-          showBelowMarks && 'pb-6',
-          showAboveMarks && 'pt-6',
-        )}
-      >
-        <SliderPrimitive.Root
-          ref={ref}
-          value={value}
-          defaultValue={defaultValue}
-          min={min}
-          max={max}
-          onValueChange={handleValueChange}
-          className={cn(
-            'relative flex w-full touch-none select-none items-center',
-            className,
-          )}
-          {...props}
-        >
-          <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-secondary">
-            <SliderPrimitive.Range className="absolute h-full bg-primary" />
-          </SliderPrimitive.Track>
-          {marks
-            ? Object.entries(marks).map(([k]) => {
-                const num = Number(k);
-                const pct = ((num - min) / (max - min)) * 100;
-                return (
-                  <span
-                    key={`dot-${k}`}
-                    aria-hidden
-                    className="pointer-events-none absolute top-1/2 size-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-muted-foreground"
-                    style={{ left: `${pct}%` }}
-                  />
-                );
-              })
-            : null}
-          {Array.from({ length: thumbCount }).map((_, i) => {
-            const v = current[i] ?? 0;
-            const display = tipRender ? tipRender(v) : v;
-            return (
-              <SliderPrimitive.Thumb
-                key={i}
-                className="group relative z-10 block size-4 rounded-full border-2 border-primary bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                {tooltipVisible ? (
-                  <span
-                    className={cn(
-                      // 常驻气泡:thumb 上方 ~8px,带轻微小三角效果(用 box-shadow 做箭头有点冗余,简化为圆角矩形)
-                      'pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-2 py-0.5 text-xs font-medium text-background shadow-md',
-                    )}
-                    aria-hidden
-                  >
-                    {display}
-                  </span>
-                ) : (
-                  <span
-                    className={cn(
-                      // 仅 hover / focus / active 时显示
-                      'pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-2 py-0.5 text-xs font-medium text-background opacity-0 shadow-md transition-opacity',
-                      'group-hover:opacity-100 group-focus-visible:opacity-100 group-data-[state=active]:opacity-100',
-                    )}
-                    aria-hidden
-                  >
-                    {display}
-                  </span>
-                )}
-              </SliderPrimitive.Thumb>
-            );
-          })}
-        </SliderPrimitive.Root>
-        {marks ? (
-          <div
-            className={cn(
-              'pointer-events-none absolute inset-x-0 h-4',
-              marksPosition === 'above' ? 'top-0' : 'bottom-0',
-            )}
-          >
-            {Object.entries(marks).map(([k, label]) => {
-              const num = Number(k);
-              const pct = ((num - min) / (max - min)) * 100;
-              return (
-                <span
-                  key={k}
-                  className="absolute -translate-x-1/2 whitespace-nowrap text-xs text-muted-foreground"
-                  style={{ left: `${pct}%` }}
-                >
-                  {label}
-                </span>
-              );
-            })}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-);
-Slider.displayName = 'Slider';
-
-export { Slider };

package/src/components/sonner/sonner.meta.md

@@ -1,147 +0,0 @@
----
-id: sonner
-name: Sonner
-type: component
-category: feedback
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 轻提示
----
-
-# Sonner 轻提示
-
-Toast 通知 — 基于 [`sonner`](https://sonner.emilkowal.ski/),已**同时覆盖** antd `message`(行内简短)+ `notification`(标题 + 描述 + 行动)的并集。
-
-**应用根挂 `<Toaster />` 一次**,在任意地方 `import { toast } from '@/components/ui/sonner'` 触发。视觉走 OpenTrek tokens —— **无边框、纯 shadow 分界、面性(filled)状态图标**;`success` / `error` / `warning` / `info` / `loading` 五种状态各有对应配色与实心图标。
-
-## When to use
-
-- 异步操作结果反馈(保存成功 / 网络错误)
-- 系统通知(新消息 / 协作动作)
-- Promise 状态自动切换(`toast.promise(saving, { loading, success, error })`)
-- 带行动按钮的提示(`toast(... { action: { label: '撤销', onClick } })`)
-
-## When NOT to use
-
-- 阻断式确认 → `AlertDialog`
-- 静态常驻提示 → `Alert`
-- 表单字段错误 → 字段下方文本
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `<Toaster />` 的 props。`toast()` 函数式 API 见下方 Examples。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `position` | `SonnerProps['position']` | `"top-right"` | – | Toast 弹出位置(对齐 antd `message.config.placement`)。 |
-| `duration` | `number` | `4000` | – | 自动消失时长(ms)— 0 表示常驻不自动关闭。 |
-| `visibleToasts` | `number` | `3` | – | 同屏最大可见 toast 数(超出旧的自动收起)。 |
-| `expand` | `boolean` | `false` | – | 鼠标 hover 时是否展开堆叠的 toast(否则保持折叠堆叠状)。 |
-| `richColors` | `boolean` | `false` | – | 启用 sonner 自带的"丰富配色"(更高对比度的状态色背景); 关闭则走我们的视觉(对齐 OpenTrek tokens)。 |
-| `closeButton` | `boolean` | `false` | – | 每张 toast 是否显示关闭按钮(右上角 ×)。 |
-| `theme` | `SonnerProps['theme']` | – | – | 主题 — `'light'` / `'dark'` / `'system'`(跟随 OS 偏好)。 通常无需手传,组件会跟随 `<html>` 上的 `.dark` class 自动切换。 |
-| `dir` | `SonnerProps['dir']` | `"auto"` | – | 文字方向 — `'ltr'` / `'rtl'` / `'auto'`。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add sonner` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add sonner@^1.5.0 lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-> 透传所有 sonner `<Toaster>` 原生属性(`position` / `richColors` / `expand` / `closeButton` 等)。
-
-## AI 生成纪律
-
-- **应用根只挂一次**:不要在多处 `<Toaster />`,触发会重复
-- **不要替代必读信息**:Toast 会自动消失,**不要**用它呈现"用户必须知道"的关键信息(用 `Alert` / `AlertDialog`)
-- **错误用 `toast.error()`**:语义化方法比 `toast({ type: 'error' })` 优先
-- **长任务用 `toast.promise()`**:自动显示 loading → success / error,避免手写状态切换
-- **Action 按钮用一个就够**:不要塞多个,过载
-- **不要覆盖 `icons` / `richColors`**:本组件已用面性 lucide 图标 + OpenTrek tokens 处理 5 种状态配色,自行传 `richColors` 会与既有样式冲突;如需自定义图标,通过传入的 `toastOptions.classNames.icon` / `icons` 在外层精细覆盖
-- **禁用边框样式**:卡片默认 `border-0 + shadow-lg`,不要再加 `border` —— 与轻提示克制美学冲突
-
-## Examples
-
-```tsx
-import { Toaster, toast } from '@/components/ui/sonner';
-
-// 应用根
-<Toaster position="top-right" richColors />;
-
-// 简单消息(等价 antd message)
-toast('已复制到剪贴板');
-
-// 带标题 + 描述(等价 antd notification)
-toast.success('保存成功', {
-  description: '所有更改已生效。',
-});
-
-toast.error('提交失败', {
-  description: '请检查网络后重试。',
-});
-
-// 异步任务(自动 loading → success / error)
-toast.promise(saveProject(), {
-  loading: '保存中...',
-  success: '保存成功',
-  error: (err) => `保存失败: ${err.message}`,
-});
-
-// 带行动按钮
-toast('文件已删除', {
-  action: { label: '撤销', onClick: () => undo() },
-});
-```
-
----
-
-## Message 形态 — 旧库 API → 新映射
-
-> 旧库 `Message`(hybridcloud,含 show/success/error/confirm 等命令式) → 新库 `toast()`(命令式) + `Alert`(内联常驻)。
-> 新库用 [sonner](https://sonner.emilkowal.ski/) 三方库,已自定义视觉(OpenTrek tokens + 面性图标)。
-
-### 命名 & 结构映射
-
-| 旧库                           | 新库                                            | 说明                            |
-| ------------------------------ | ----------------------------------------------- | ------------------------------- |
-| `Message shape='toast'`        | `toast()`                                       | 命令式轻提示                    |
-| `Message shape='inline'`       | `Alert` 组件                                    | 内联常驻提示(独立 entry)        |
-| `Message.success(msg)`         | `toast.success(msg)`                            | 直接映射                        |
-| `Message.error(msg)`           | `toast.error(msg)`                              | 直接映射                        |
-| `Message.warning(msg)`         | `toast.warning(msg)`                            | 直接映射                        |
-| `Message.notice(msg)`          | `toast.info(msg)`                               | notice → info                   |
-| `Message.loading(msg)`         | `toast.loading(msg)`                            | 直接映射                        |
-| `Message.hide()`               | `toast.dismiss()`                               | 全局关闭                        |
-| `Message.config({ duration })` | `<Toaster duration={...} />`                    | 声明式配置                      |
-| `closeable`                    | `closeButton`(Toaster prop)                     | 拼写变更                        |
-| `type='help'`                  | `toast.info()`                                  | 映射到 info                     |
-| Promise 自动切换               | `toast.promise(p, { loading, success, error })` | 新增能力(P0)                    |
-| `title + content`              | `toast.success(title, { description })`         | title 第一参,description 第二参 |
-| `action`                       | `toast(msg, { action: { label, onClick } })`    | 行动按钮                        |
-
-### 迁移 FAQ
-
-| 问题                       | 回答                                               |
-| -------------------------- | -------------------------------------------------- |
-| 内联提示怎么做?            | 用 `Alert` 组件(非 toast),常驻在页面上             |
-| Toaster 放哪?              | 应用根组件放一次即可,如 `layout.tsx`               |
-| 怎么控制位置?              | `<Toaster position="top-right" />`                 |
-| Message.hide(id) 关闭指定? | `const id = toast.loading(...); toast.dismiss(id)` |

package/src/components/sonner/sonner.stories.tsx

@@ -1,164 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Toaster, toast } from './sonner';
-import { Button } from '@/components/button/button';
-
-const meta: Meta<typeof Toaster> = {
-  title: '反馈 · Feedback/Sonner',
-  component: Toaster,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Toast 轻提示 —— 函数式触发的悬浮反馈,基于 [`sonner`](https://sonner.emilkowal.ski/) 包装。能力是 antd `message`(简短行内) + `notification`(标题 + 描述 + 行动)的并集:覆盖 `success` / `error` / `warning` / `info` / `loading` 五种状态,支持 `toast()` / `toast.promise()` / `action`。视觉走 OpenTrek semantic tokens —— **无边框、纯 shadow 分界、面性(filled)状态图标**,所有样式来自 `@teamix-evo/tokens`,无 mock。',
-      },
-    },
-  },
-  argTypes: {
-    position: {
-      control: 'select',
-      options: [
-        'top-left',
-        'top-center',
-        'top-right',
-        'bottom-left',
-        'bottom-center',
-        'bottom-right',
-      ],
-    },
-    expand: { control: 'boolean' },
-    closeButton: { control: 'boolean' },
-    visibleToasts: { control: { type: 'number', min: 1, max: 9 } },
-  },
-  args: {
-    position: 'top-right',
-    closeButton: true,
-    expand: false,
-    visibleToasts: 5,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Toaster>;
-
-/**
- * Playground —— 触发不同状态的 toast,观察无边框 + 实心图标的整体节奏。
- */
-export const Playground: Story = {
-  render: (args) => (
-    <div className="flex flex-col items-start gap-2">
-      <Toaster {...args} />
-      <Button onClick={() => toast('已复制到剪贴板')}>普通</Button>
-      <Button
-        variant="outline"
-        onClick={() =>
-          toast.success('保存成功', { description: '所有更改已生效。' })
-        }
-      >
-        Success
-      </Button>
-      <Button
-        variant="outline"
-        onClick={() =>
-          toast.error('提交失败', { description: '请检查网络后重试。' })
-        }
-      >
-        Error
-      </Button>
-      <Button
-        variant="outline"
-        onClick={() =>
-          toast.warning('注意', { description: '账号 7 天后过期。' })
-        }
-      >
-        Warning
-      </Button>
-      <Button
-        variant="outline"
-        onClick={() =>
-          toast.info('新功能上线', { description: '试试新版本的智能搜索。' })
-        }
-      >
-        Info
-      </Button>
-      <Button
-        variant="outline"
-        onClick={() => toast.loading('保存中...', { duration: 2000 })}
-      >
-        Loading
-      </Button>
-      <Button
-        variant="outline"
-        onClick={() =>
-          toast.promise(
-            new Promise((res) => setTimeout(res, 1500)),
-            {
-              loading: '保存中...',
-              success: '保存成功',
-              error: '保存失败',
-            },
-          )
-        }
-      >
-        Promise
-      </Button>
-      <Button
-        variant="outline"
-        onClick={() =>
-          toast('文件已删除', {
-            action: { label: '撤销', onClick: () => toast('已撤销') },
-          })
-        }
-      >
-        With Action
-      </Button>
-    </div>
-  ),
-};
-
-/**
- * 五种语义状态 —— 一次性弹出全部状态,直观对比无边框 + 浅底 + 实心图标的视觉节奏。
- */
-export const AllStates: Story = {
-  parameters: { controls: { disable: true } },
-  render: (args) => (
-    <div className="flex flex-col items-start gap-2">
-      <Toaster {...args} expand visibleToasts={9} />
-      <Button
-        onClick={() => {
-          toast.success('保存成功', { description: '所有更改已生效。' });
-          toast.error('提交失败', { description: '请检查网络后重试。' });
-          toast.warning('账号即将过期', { description: '请在 7 天内续费。' });
-          toast.info('新版本可用', { description: '建议升级到最新版本。' });
-          toast.loading('正在同步...', { duration: 6000 });
-        }}
-      >
-        弹出全部 5 种状态
-      </Button>
-    </div>
-  ),
-};
-
-/**
- * 与 Action 行动按钮组合 —— 撤销 / 重试等可执行操作。
- */
-export const WithAction: Story = {
-  parameters: { controls: { disable: true } },
-  render: (args) => (
-    <div className="flex flex-col items-start gap-2">
-      <Toaster {...args} />
-      <Button
-        onClick={() =>
-          toast('草稿已删除', {
-            action: {
-              label: '撤销',
-              onClick: () => toast.success('已恢复草稿'),
-            },
-          })
-        }
-      >
-        删除草稿(可撤销)
-      </Button>
-    </div>
-  ),
-};