@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/skeleton/skeleton.meta.md

@@ -1,94 +0,0 @@
----
-id: skeleton
-name: Skeleton
-displayName: 骨架屏
-type: component
-category: feedback
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Skeleton 骨架屏
-
-骨架屏占位 — shadcn 单元素 pulse + antd 子组件家族(`SkeletonAvatar / SkeletonImage / SkeletonButton / SkeletonInput / SkeletonParagraph`)。
-
-`motion-reduce:animate-none` 自动尊重用户的"减少动画"系统设置。
-
-## When to use
-
-- 首屏 / 路由切换数据加载中
-- 列表 / 卡片网格的预占位(避免布局抖动)
-- 替代 Spinner 用于"内容形状已知"的等待场景
-
-## When NOT to use
-
-- 加载时间已知 < 300ms → 直接渲染最终态
-- 真正失败 / 空数据 → 用 `Empty` 或 `Alert`(v0.x)
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `shape` | `'rect' \| 'circle' \| 'line'` | `"rect"` | – | 形状变体。`rect` 默认矩形;`circle` 圆形(用于 Avatar 占位);`line` 单行文本占位。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add skeleton` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add class-variance-authority@^0.7.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **形状要与最终内容匹配**:文本用 `shape="line"`,头像用 `<SkeletonAvatar />`,图片用 `<SkeletonImage />`,**不要**全用矩形糊弄
-- **段落用 SkeletonParagraph**:不要手写多个 `<Skeleton shape="line" />`,失去尾行收窄的自然观感
-- **不要嵌套到 disabled state**:loading 状态优先用 Skeleton 替代整块,而非 Skeleton 叠加在 disabled 内容上
-- **`aria-hidden` 已自动**:不要给 Skeleton 加文字 children 或 aria-label,屏幕阅读器应跳过
-
-## Examples
-
-```tsx
-import {
-  Skeleton,
-  SkeletonAvatar,
-  SkeletonImage,
-  SkeletonParagraph,
-} from '@/components/ui/skeleton';
-
-// 基础
-<Skeleton className="h-8 w-32" />
-
-// 头像 + 双行
-<div className="flex items-center gap-3">
-  <SkeletonAvatar />
-  <div className="flex flex-col gap-2">
-    <Skeleton shape="line" className="w-32" />
-    <Skeleton shape="line" className="w-24" />
-  </div>
-</div>
-
-// 卡片占位
-<div className="rounded-lg border p-4">
-  <SkeletonImage />
-  <SkeletonParagraph rows={3} className="mt-3" />
-</div>
-```

package/src/components/skeleton/skeleton.stories.tsx

@@ -1,79 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Skeleton,
-  SkeletonAvatar,
-  SkeletonImage,
-  SkeletonButton,
-  SkeletonInput,
-  SkeletonParagraph,
-} from './skeleton';
-
-const meta: Meta<typeof Skeleton> = {
-  title: '反馈 · Feedback/Skeleton',
-  component: Skeleton,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '骨架屏 — 在内容加载过程中呈现占位图形，减少加载期间的视觉跳动。shadcn `Skeleton` 原子 + antd 能力并集：支持 `shape: rect | circle | line`，同时提供预设组合 `SkeletonAvatar` / `SkeletonImage` / `SkeletonButton` / `SkeletonInput` / `SkeletonParagraph`。',
-      },
-    },
-  },
-  argTypes: {
-    shape: { control: 'inline-radio', options: ['rect', 'circle', 'line'] },
-  },
-  args: { shape: 'rect', className: 'h-8 w-32' },
-};
-
-export default meta;
-type Story = StoryObj<typeof Skeleton>;
-
-export const Playground: Story = {};
-
-export const Family: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-6">
-      <div className="flex items-center gap-3">
-        <SkeletonAvatar size="sm" />
-        <SkeletonAvatar />
-        <SkeletonAvatar size="lg" />
-      </div>
-      <div className="flex items-center gap-3">
-        <SkeletonButton size="sm" />
-        <SkeletonButton />
-        <SkeletonButton size="lg" />
-      </div>
-      <div className="w-72">
-        <SkeletonInput />
-      </div>
-      <div className="w-72">
-        <SkeletonImage />
-      </div>
-    </div>
-  ),
-};
-
-export const Card: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-80 rounded-lg border border-border p-4">
-      <SkeletonImage />
-      <SkeletonParagraph rows={3} className="mt-3" />
-    </div>
-  ),
-};
-
-export const ListItem: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex w-72 items-center gap-3">
-      <SkeletonAvatar />
-      <div className="flex flex-1 flex-col gap-2">
-        <Skeleton shape="line" className="w-32" />
-        <Skeleton shape="line" className="w-24" />
-      </div>
-    </div>
-  ),
-};

package/src/components/skeleton/skeleton.tsx

@@ -1,144 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/utils/cn';
-
-const skeletonVariants = cva(
-  'animate-pulse rounded-md bg-muted motion-reduce:animate-none',
-  {
-    variants: {
-      shape: {
-        rect: '',
-        circle: 'rounded-full',
-        line: 'h-3',
-      },
-    },
-    defaultVariants: { shape: 'rect' },
-  },
-);
-
-export interface SkeletonProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,
-    VariantProps<typeof skeletonVariants> {
-  /**
-   * 形状变体。`rect` 默认矩形;`circle` 圆形(用于 Avatar 占位);`line` 单行文本占位。
-   * @default "rect"
-   */
-  shape?: 'rect' | 'circle' | 'line';
-}
-
-const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
-  ({ className, shape, ...props }, ref) => (
-    <div
-      ref={ref}
-      aria-hidden="true"
-      className={cn(skeletonVariants({ shape }), className)}
-      {...props}
-    />
-  ),
-);
-Skeleton.displayName = 'Skeleton';
-
-// ─── antd-style sub-components(Avatar / Image / Button / Input / Paragraph)─
-
-export interface SkeletonAvatarProps extends Omit<SkeletonProps, 'shape'> {
-  /** 尺寸:小 32 / 默认 40 / 大 64。 @default "default" */
-  size?: 'sm' | 'md' | 'default' | 'lg';
-}
-const SkeletonAvatar = React.forwardRef<HTMLDivElement, SkeletonAvatarProps>(
-  ({ size = 'md', className, ...props }, ref) => {
-    const dim =
-      size === 'sm' ? 'size-8' : size === 'lg' ? 'size-16' : 'size-10';
-    return (
-      <Skeleton
-        ref={ref}
-        shape="circle"
-        className={cn(dim, className)}
-        {...props}
-      />
-    );
-  },
-);
-SkeletonAvatar.displayName = 'SkeletonAvatar';
-
-export interface SkeletonImageProps extends Omit<SkeletonProps, 'shape'> {}
-const SkeletonImage = React.forwardRef<HTMLDivElement, SkeletonImageProps>(
-  ({ className, ...props }, ref) => (
-    <Skeleton
-      ref={ref}
-      shape="rect"
-      className={cn('aspect-video w-full', className)}
-      {...props}
-    />
-  ),
-);
-SkeletonImage.displayName = 'SkeletonImage';
-
-export interface SkeletonButtonProps extends Omit<SkeletonProps, 'shape'> {
-  size?: 'sm' | 'md' | 'default' | 'lg';
-}
-const SkeletonButton = React.forwardRef<HTMLDivElement, SkeletonButtonProps>(
-  ({ size = 'md', className, ...props }, ref) => {
-    const h = size === 'sm' ? 'h-8' : size === 'lg' ? 'h-10' : 'h-9';
-    return (
-      <Skeleton
-        ref={ref}
-        shape="rect"
-        className={cn(h, 'w-24', className)}
-        {...props}
-      />
-    );
-  },
-);
-SkeletonButton.displayName = 'SkeletonButton';
-
-export interface SkeletonInputProps extends Omit<SkeletonProps, 'shape'> {}
-const SkeletonInput = React.forwardRef<HTMLDivElement, SkeletonInputProps>(
-  ({ className, ...props }, ref) => (
-    <Skeleton
-      ref={ref}
-      shape="rect"
-      className={cn('h-9 w-full', className)}
-      {...props}
-    />
-  ),
-);
-SkeletonInput.displayName = 'SkeletonInput';
-
-export interface SkeletonParagraphProps extends Omit<SkeletonProps, 'shape'> {
-  /**
-   * 段落行数。最后一行宽度自动收窄至 60%,模拟自然段尾。
-   * @default 3
-   */
-  rows?: number;
-}
-const SkeletonParagraph = React.forwardRef<
-  HTMLDivElement,
-  SkeletonParagraphProps
->(({ rows = 3, className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex flex-col gap-2', className)}
-    aria-hidden="true"
-    {...props}
-  >
-    {Array.from({ length: rows }).map((_, i) => (
-      <Skeleton
-        key={i}
-        shape="line"
-        className={i === rows - 1 ? 'w-3/5' : 'w-full'}
-      />
-    ))}
-  </div>
-));
-SkeletonParagraph.displayName = 'SkeletonParagraph';
-
-export {
-  Skeleton,
-  SkeletonAvatar,
-  SkeletonImage,
-  SkeletonButton,
-  SkeletonInput,
-  SkeletonParagraph,
-  skeletonVariants,
-};

package/src/components/slider/slider.meta.md

@@ -1,146 +0,0 @@
----
-id: slider
-name: Slider
-displayName: 滑块
-type: component
-category: data-entry
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Slider 滑块
-
-滑块 — Radix Slider + antd 的 `marks` 刻度标签。**单 / 双滑块由 `value`/`defaultValue` 数组长度决定**(传 `[lo, hi]` 自动变范围滑块)。
-
-## When to use
-
-- 数值范围调节(音量 / 缩放 / 亮度)
-- 区间筛选(价格区间、日期区间)
-- 配合实时预览的微调控件
-
-## When NOT to use
-
-- 离散选项 → 用 `Radio Group` 或 `Select`
-- 精确数值输入 → 用 `Input type="number"`
-- 多于 2 个滑块 → 改用专门的多段滑块组件(暂未提供)
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `value` | `number[]` | – | – | 受控 value — **必为数组**,单滑块 `[v]`,范围滑块 `[lo, hi]`(单/双由数组长度决定)。 与 `defaultValue` 二选一。 |
-| `defaultValue` | `number[]` | – | – | 非受控初始值。同样数组形态(单/双由长度决定)。 |
-| `onValueChange` | `(value: number[]) => void` | – | – | 滑块拖动 / 步进时触发(实时,频率高)。 业务表单层用 `onValueCommit` 拿到最终值更省心。 |
-| `onValueCommit` | `(value: number[]) => void` | – | – | 拖动结束(mouse up / key up)时触发一次,适合"提交"语义。 |
-| `min` | `number` | `0` | – | 最小值。 |
-| `max` | `number` | `100` | – | 最大值。 |
-| `step` | `number` | `1` | – | 步进单位(键盘 ←→ / 拖动吸附)。 |
-| `disabled` | `boolean` | `false` | – | 禁用整个 Slider(灰化 + 不响应交互)。 |
-| `orientation` | `'horizontal' \| 'vertical'` | `"horizontal"` | – | 排列方向(键盘导航方向跟随)。 |
-| `inverted` | `boolean` | `false` | – | 反向滚动(从右往左 / 从下往上)。 |
-| `name` | `string` | – | – | 表单字段名(原生 `<input name>`)。 |
-| `marks` | `Record<number, React.ReactNode>` | – | – | 刻度标记(antd `marks` 并集)。键为 0~max 的数值,值为标签文本。 渲染时小标记点 + 文字标签出现在轨道下方(默认)或上方(`marksPosition="above"`)。 |
-| `marksPosition` | `'above' \| 'below'` | `"below"` | – | 刻度文字位置(cloud-design `marksPosition` 并集) — `"below"` 在轨道下方,`"above"` 在轨道上方。 |
-| `tooltipVisible` | `boolean` | `false` | – | 是否常驻显示当前值的 tooltip(cloud-design `tooltipVisible` 并集) — `true` 时所有 thumb 都会持续显示数值气泡;`false` 时仅在 hover / drag 时显示(默认)。 |
-| `tipRender` | `(value: number) => React.ReactNode` | – | – | 自定义 tooltip 渲染函数(cloud-design `tipRender` 并集)。 不传时直接渲染数值。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add slider` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-slider@^1.2.0
-```
-<!-- auto:deps:end -->
-
-> 透传所有 Radix Slider.Root props(`min` / `max` / `step` / `disabled` / `onValueChange` / `name` / `inverted` 等)。
-
-## AI 生成纪律
-
-- **`value` 永远是数组**:即使单滑块,Radix 期望 `[42]` 而非 `42`,初学者最易踩坑
-- **`marks` 键必须在 `[min, max]` 内**:超出范围的标记仍会渲染但位置错乱
-- **范围滑块由数据决定形态**:不要用单独的 `range` prop,**直接** `defaultValue={[20, 80]}` 即可
-- **配 Label**:Slider 不带可见数值时,必须 `aria-label` 或外部 Label 关联
-- **`step` 跨度的可访问性**:键盘 Page Up/Down 步进 = step × 10,设计 step 时考虑这一点
-- **marks 的"圆点"和"文字"必须分两层渲染,不要打包成一个 box**:
-  - **圆点**:`absolute top-1/2 -translate-x-1/2 -translate-y-1/2` 居中压在 track 中线上,渲染在 `<SliderPrimitive.Root>` 内、`<Track>` 之外(放进 Track 内会被 `overflow-hidden` 裁掉或被 `Range` 高亮覆盖)
-  - **文字**:独立放在父容器 `bottom-0`(默认)或 `top-0`(`marksPosition="above"`)处,通过父容器 `pb-6` / `pt-6` 留出 ~14px 间距;不要用 `mt-1` 把文字直接挂在圆点下方,会出现"点和文字粘在一起"的视觉 bug
-- **`<Thumb>` 必须加 `relative z-10`**:让滑块视觉层级高于 marks 圆点,避免拖动时圆点突兀露在 thumb 之上
-- **`tooltipVisible` 为展示能力**:常驻气泡不要氪加在表单表中使用(气泡会遮住上方行);需要 `tipRender` 定制显示内容时请传函数而非 ReactNode
-- **`marksPosition="above"` 与拖拽 tooltip 会重叠**:同时开启 `marksPosition="above"` 和 `tooltipVisible=true` 时,拖拽气泡会与上方 marks 文字压在一起 — 建议二者选一
-
-## Examples
-
-```tsx
-import { Slider } from '@/components/ui/slider';
-
-// 单滑块
-<Slider defaultValue={[42]} max={100} step={1} />
-
-// 范围滑块
-<Slider defaultValue={[20, 80]} max={100} step={1} />
-
-// 带刻度标签(下方)
-<Slider
-  defaultValue={[40]}
-  max={100}
-  step={20}
-  marks={{ 0: '0°C', 20: '20', 40: '40', 60: '60', 80: '80', 100: '100°C' }}
-/>
-
-// 刻度上方
-<Slider defaultValue={[40]} marksPosition="above" marks={{ 0: '0', 50: '50', 100: '100' }} />
-
-// 常驻数值气泡
-<Slider defaultValue={[42]} tooltipVisible />
-
-// 自定义 tooltip
-<Slider defaultValue={[1500]} max={5000} tooltipVisible tipRender={(v) => `¥${v}`} />
-
-// 受控
-const [v, setV] = React.useState([50]);
-<Slider value={v} onValueChange={setV} max={100} />
-```
-
-## Range 形态 — 旧库 API → 新库映射
-
-> 旧库(Teamix 1.0 / `@alifd/next.Range`)→ 新库 `Slider`(Radix `@radix-ui/react-slider` 底层 + antd `marks` 并集)。新库**单/双滑块由数据形态决定** — 不再有独立的 `slider="single|double"` prop。
-
-| 旧库 API | 新库 API | 备注 |
-| --- | --- | --- |
-| 组件名 `Range` | `Slider` | 对齐 shadcn / Radix 命名 |
-| `slider="single"` | `defaultValue={[v]}` | 数据决定 — 数组长度 = 1 即单滑块 |
-| `slider="double"` | `defaultValue={[lo, hi]}` | 数组长度 = 2 即范围滑块 |
-| `onChange(number \| [n,n])` | `onValueChange(number[])` | 始终数组,Radix 命名 |
-| `onProcess` 实时触发 | `onValueChange` | 同一回调,实时触发(Radix 内部) |
-| `reverse` | `inverted`(透传 Radix Root) | Radix 命名 |
-| `marks={5}` 数字密度 | 不修复 — 仅支持 `Record<number, ReactNode>` | 业务自构造 marks 对象 |
-| `marks=true` boolean | 不修复 — 同上 | 业务自构造 |
-| `marks=[5, 50, 100]` array | 不修复 — 同上 | 业务自构造 |
-| `tooltipVisible` | `tooltipVisible` | 同名 |
-| `tipRender` | `tipRender` | 同名 |
-| `fixedWidth` 固定宽度拖动 | 不修复 | 极少使用,P3 |
-| `pure` 纯渲染 | 不修复 | `React.memo` 由消费方按需包裹 |
-
-### 不修复 / 后续工序清单
-
-- **`slider` prop**:不修复 — 数组形态本身已是更直观的 API
-- **`marks` 多类型签名**:仅保留 Object 形式,boolean / number / Array 由业务侧自行构造 marks 对象
-- **`fixedWidth`** / **`pure`**:报告 §5 已列入"保留新库优势",**不修复**

package/src/components/slider/slider.stories.tsx

@@ -1,121 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Slider } from './slider';
-
-const meta: Meta<typeof Slider> = {
-  title: '数据录入 · Data Entry/Slider',
-  component: Slider,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '滑块 — 在给定范围内选取一个数值或一段区间。Radix Slider 实现 + antd `marks` 刻度 ∪ cloud-design `marksPosition` / `tooltipVisible` / `tipRender` 并集能力:`value` / `defaultValue` 为数组,长度为 1 时为单滑块、为 2 时自动切换为区间滑块;可配 `marks` 渲染轨道下方(默认)或上方(`marksPosition="above"`)的刻度点与标签,`tooltipVisible` 控制数值气泡是否常驻。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
-      },
-    },
-  },
-  argTypes: {
-    min: { control: 'number' },
-    max: { control: 'number' },
-    step: { control: 'number' },
-    disabled: { control: 'boolean' },
-    tooltipVisible: { control: 'boolean' },
-    marksPosition: { control: 'inline-radio', options: ['below', 'above'] },
-  },
-  args: {
-    defaultValue: [42],
-    min: 0,
-    max: 100,
-    step: 1,
-    tooltipVisible: false,
-    marksPosition: 'below',
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-80 px-2">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof Slider>;
-
-export const Playground: Story = {};
-
-export const Range: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <Slider defaultValue={[20, 80]} max={100} />,
-};
-
-export const WithMarksBelow: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Slider
-      defaultValue={[40]}
-      max={100}
-      step={20}
-      marks={{
-        0: '0°C',
-        20: '20',
-        40: '40',
-        60: '60',
-        80: '80',
-        100: '100°C',
-      }}
-    />
-  ),
-};
-
-export const WithMarksAbove: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Slider
-      defaultValue={[40]}
-      max={100}
-      step={20}
-      marksPosition="above"
-      marks={{
-        0: '0',
-        20: '20',
-        40: '40',
-        60: '60',
-        80: '80',
-        100: '100',
-      }}
-    />
-  ),
-};
-
-export const TooltipAlwaysVisible: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-10">
-      <Slider defaultValue={[42]} tooltipVisible />
-      <Slider defaultValue={[20, 80]} tooltipVisible />
-    </div>
-  ),
-};
-
-export const TooltipWithRender: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Slider
-      defaultValue={[1500]}
-      max={5000}
-      step={100}
-      tooltipVisible
-      tipRender={(v) => `¥${v.toLocaleString()}`}
-    />
-  ),
-};
-
-export const Disabled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-4">
-      <Slider defaultValue={[42]} disabled />
-      <Slider defaultValue={[20, 80]} disabled />
-    </div>
-  ),
-};