@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/skeleton/stories.tsx

@@ -0,0 +1,197 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/components/button';
+import {
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonImage,
+  SkeletonButton,
+  SkeletonInput,
+  SkeletonTitle,
+  SkeletonParagraph,
+} from './index';
+
+const meta: Meta<typeof Skeleton> = {
+  title: '反馈 · Feedback/Skeleton 骨架屏',
+  component: Skeleton,
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 基础骨架屏，默认呼吸动画与圆角矩形形态。 */
+export const Default: Story = {
+  render: () => <Skeleton className="h-4 w-64" />,
+};
+
+/** 四种 variant 形状对照。 */
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-3">
+        <span className="w-24 text-muted-foreground">text</span>
+        <Skeleton variant="text" className="max-w-64" />
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="w-24 text-muted-foreground">rectangular</span>
+        <Skeleton variant="rectangular" className="h-4 w-64" />
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="w-24 text-muted-foreground">rounded</span>
+        <Skeleton variant="rounded" className="h-4 w-64" />
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="w-24 text-muted-foreground">circular</span>
+        <Skeleton variant="circular" className="size-10" />
+      </div>
+    </div>
+  ),
+};
+
+/** pulse / none 两种动画对照。 */
+export const Animations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-3">
+        <span className="w-16 text-muted-foreground">pulse</span>
+        <Skeleton animation="pulse" className="h-4 w-64" />
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="w-16 text-muted-foreground">none</span>
+        <Skeleton animation="none" className="h-4 w-64" />
+      </div>
+    </div>
+  ),
+};
+
+/** 通过 width / height props 直接传值（数字按 px 解析）。 */
+export const WithDimensions: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Skeleton width={240} height={16} />
+      <Skeleton width="50%" height={16} />
+      <Skeleton width={120} height={120} variant="circular" />
+    </div>
+  ),
+};
+
+/** loading + children 条件渲染：loading=false 时直接显示真实内容。 */
+export const Loading: Story = {
+  render: () => {
+    const [loading, setLoading] = React.useState(true);
+    return (
+      <div className="flex flex-col gap-3">
+        <Button onClick={() => setLoading((v) => !v)}>切换</Button>
+        <Skeleton loading={loading} className="h-4 w-64">
+          <span className="text-foreground">真实内容已加载</span>
+        </Skeleton>
+      </div>
+    );
+  },
+};
+
+/** 头像骨架：三档尺寸 + 两种形状。 */
+export const Avatar: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-3">
+        <SkeletonAvatar size="sm" />
+        <SkeletonAvatar size="default" />
+        <SkeletonAvatar size="lg" />
+        <SkeletonAvatar size={56} />
+      </div>
+      <div className="flex items-center gap-3">
+        <SkeletonAvatar shape="square" size="sm" />
+        <SkeletonAvatar shape="square" size="default" />
+        <SkeletonAvatar shape="square" size="lg" />
+      </div>
+    </div>
+  ),
+};
+
+/** 图片骨架：三档尺寸 + block 自适应。 */
+export const Image: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-end gap-3">
+        <SkeletonImage size="sm" />
+        <SkeletonImage size="default" />
+        <SkeletonImage size="lg" />
+      </div>
+      <SkeletonImage block />
+    </div>
+  ),
+};
+
+/** 按钮骨架：四档尺寸 + block。 */
+export const ButtonSkeleton: Story = {
+  name: 'Button',
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-3">
+        <SkeletonButton size="sm" />
+        <SkeletonButton size="default" />
+        <SkeletonButton size="lg" />
+        <SkeletonButton size="icon" />
+      </div>
+      <SkeletonButton block />
+    </div>
+  ),
+};
+
+/** 输入框骨架：三档尺寸 + 非 block。 */
+export const Input: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <SkeletonInput size="sm" />
+      <SkeletonInput size="default" />
+      <SkeletonInput size="lg" />
+      <SkeletonInput block={false} />
+    </div>
+  ),
+};
+
+/** 标题骨架：默认 1/3 容器宽，可自定义 width。 */
+export const Title: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <SkeletonTitle />
+      <SkeletonTitle width={200} />
+      <SkeletonTitle width="60%" />
+    </div>
+  ),
+};
+
+/** 段落骨架：rows + width 数组逐行覆盖；不传 width 时末行 60% 收窄。 */
+export const Paragraph: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <SkeletonParagraph />
+      <SkeletonParagraph rows={5} />
+      <SkeletonParagraph rows={4} width={['100%', '90%', '80%', '40%']} />
+    </div>
+  ),
+};
+
+/** 综合卡片占位：图片 + 头像 + 标题 + 段落。 */
+export const CardComposition: Story = {
+  render: () => (
+    <div className="flex w-80 flex-col gap-4 rounded-md border border-border bg-card p-4">
+      <SkeletonImage block />
+      <div className="flex items-center gap-3">
+        <SkeletonAvatar />
+        <div className="flex flex-1 flex-col gap-2">
+          <SkeletonTitle width="50%" />
+          <Skeleton className="h-3 w-24" />
+        </div>
+      </div>
+      <SkeletonParagraph rows={3} />
+      <div className="flex items-center justify-end gap-2">
+        <SkeletonButton size="sm" />
+        <SkeletonButton size="sm" />
+      </div>
+    </div>
+  ),
+};

package/src/components/slider/index.tsx

@@ -0,0 +1,222 @@
+/**
+ * 滑动输入条 Slider
+ *
+ * 拖拽滑块选择数值或范围，基于 Radix Slider 原语。支持 marks 刻度、tooltip 值提示与 reverse 反向选中。
+ *
+ * @when
+ * - 音量 / 亮度调节
+ * - 价格范围筛选
+ * - 图片编辑参数调整
+ */
+'use client';
+
+import * as React from 'react';
+import { Slider as SliderPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/tooltip';
+
+/** marks 入参形态：number 等分 / number[] 枚举 / Record<number, ReactNode> 值-标签映射 */
+export type SliderMarks = number | number[] | Record<number, React.ReactNode>;
+
+export interface SliderProps
+  extends React.ComponentProps<typeof SliderPrimitive.Root> {
+  /** 刻度配置：number=等分数，number[]=枚举值，对象={value: label} */
+  marks?: SliderMarks;
+  /** 刻度标签位置；horizontal 下=上/下，vertical 下=右/左 */
+  marksPosition?: 'above' | 'below';
+  /** tooltip 显示策略：auto(hover/active) / always(常驻) / never(隐藏) */
+  showTooltip?: 'auto' | 'always' | 'never';
+  /** 自定义 tooltip 内容；不传则显示当前数值 */
+  tooltipFormatter?: (value: number) => React.ReactNode;
+  /** 选中态反转（轨道与已选段颜色翻转） */
+  reverse?: boolean;
+}
+
+interface ParsedMark {
+  value: number;
+  label: React.ReactNode;
+}
+
+function parseMarks(
+  marks: SliderMarks | undefined,
+  min: number,
+  max: number,
+): ParsedMark[] {
+  if (marks == null) return [];
+  if (typeof marks === 'number') {
+    if (marks <= 0) return [];
+    const step = (max - min) / marks;
+    return Array.from({ length: marks + 1 }, (_, i) => {
+      const v = min + step * i;
+      return { value: v, label: v };
+    });
+  }
+  if (Array.isArray(marks)) {
+    return marks.map((v) => ({ value: v, label: v }));
+  }
+  return Object.entries(marks).map(([k, label]) => ({
+    value: Number(k),
+    label,
+  }));
+}
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  orientation = 'horizontal',
+  marks,
+  marksPosition = 'below',
+  showTooltip = 'auto',
+  tooltipFormatter,
+  reverse = false,
+  ...props
+}: SliderProps) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+        ? defaultValue
+        : [min, max],
+    [value, defaultValue, min, max],
+  );
+
+  const parsedMarks = React.useMemo(
+    () => parseMarks(marks, min, max),
+    [marks, min, max],
+  );
+
+  const hasLabels = parsedMarks.some(
+    (m) => m.label !== null && m.label !== undefined && m.label !== false,
+  );
+
+  const isHorizontal = orientation === 'horizontal';
+
+  const pctOf = (v: number) => {
+    if (max === min) return 0;
+    return ((v - min) / (max - min)) * 100;
+  };
+
+  const markDotStyle = (v: number): React.CSSProperties => {
+    const pct = pctOf(v);
+    return isHorizontal
+      ? { left: `${pct}%`, top: '50%', transform: 'translate(-50%, -50%)' }
+      : { bottom: `${pct}%`, left: '50%', transform: 'translate(-50%, 50%)' };
+  };
+
+  const labelStyle = (v: number): React.CSSProperties => {
+    const pct = pctOf(v);
+    if (isHorizontal) {
+      return marksPosition === 'below'
+        ? {
+            left: `${pct}%`,
+            top: '100%',
+            marginTop: 8,
+            transform: 'translateX(-50%)',
+          }
+        : {
+            left: `${pct}%`,
+            bottom: '100%',
+            marginBottom: 8,
+            transform: 'translateX(-50%)',
+          };
+    }
+    return marksPosition === 'above'
+      ? {
+          bottom: `${pct}%`,
+          left: '100%',
+          marginLeft: 8,
+          transform: 'translateY(50%)',
+        }
+      : {
+          bottom: `${pct}%`,
+          right: '100%',
+          marginRight: 8,
+          transform: 'translateY(50%)',
+        };
+  };
+
+  const renderThumb = (val: number, idx: number) => {
+    const thumb = (
+      <SliderPrimitive.Thumb
+        data-slot="slider-thumb"
+        className="relative block size-3 shrink-0 cursor-pointer rounded-full border-2 border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow,transform] duration-200 ease-out select-none after:absolute after:-inset-2 hover:scale-125 hover:ring-3 focus-visible:scale-125 focus-visible:ring-3 focus-visible:outline-hidden active:scale-125 active:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+      />
+    );
+    if (showTooltip === 'never') {
+      return <React.Fragment key={idx}>{thumb}</React.Fragment>;
+    }
+    return (
+      <Tooltip key={idx} open={showTooltip === 'always' ? true : undefined}>
+        <TooltipTrigger asChild>{thumb}</TooltipTrigger>
+        <TooltipContent
+          data-slot="slider-tooltip"
+          side={isHorizontal ? 'top' : 'right'}
+        >
+          {tooltipFormatter ? tooltipFormatter(val) : val}
+        </TooltipContent>
+      </Tooltip>
+    );
+  };
+
+  return (
+    <TooltipProvider delayDuration={0}>
+      <SliderPrimitive.Root
+        data-slot="slider"
+        data-reverse={reverse || undefined}
+        defaultValue={defaultValue}
+        value={value}
+        min={min}
+        max={max}
+        orientation={orientation}
+        className={cn(
+          'group/slider relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+          className,
+        )}
+        {...props}
+      >
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative grow overflow-hidden rounded-full bg-muted group-data-[reverse=true]/slider:bg-primary data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1"
+        >
+          <SliderPrimitive.Range
+            data-slot="slider-range"
+            className="absolute bg-primary group-data-[reverse=true]/slider:bg-muted select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          />
+          {parsedMarks.map((m) => (
+            <span
+              key={`mark-${m.value}`}
+              data-slot="slider-mark"
+              aria-hidden="true"
+              style={markDotStyle(m.value)}
+              className="pointer-events-none absolute size-1 rounded-full bg-border"
+            />
+          ))}
+        </SliderPrimitive.Track>
+        {_values.map((v, idx) => renderThumb(v, idx))}
+        {hasLabels &&
+          parsedMarks.map((m) => (
+            <span
+              key={`label-${m.value}`}
+              data-slot="slider-mark-label"
+              style={labelStyle(m.value)}
+              className="pointer-events-none absolute whitespace-nowrap text-xs text-muted-foreground"
+            >
+              {m.label}
+            </span>
+          ))}
+      </SliderPrimitive.Root>
+    </TooltipProvider>
+  );
+}
+
+export { Slider };

package/src/components/slider/meta.md

@@ -0,0 +1,125 @@
+# Slider
+
+> 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
+
+## 描述
+
+滑动输入条 Slider
+拖拽滑块选择数值或范围，基于 Radix Slider 原语。支持 marks 刻度、tooltip 值提示与 reverse 反向选中。
+
+## 使用场景
+
+- 音量 / 亮度调节
+- 价格范围筛选
+- 图片编辑参数调整
+
+## Props
+
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `marks` | `SliderMarks` | – | – | 刻度配置：number=等分数，number[]=枚举值，对象={value: label} |
+| `marksPosition` | `'above' \| 'below'` | – | – | 刻度标签位置；horizontal 下=上/下，vertical 下=右/左 |
+| `showTooltip` | `'auto' \| 'always' \| 'never'` | – | – | tooltip 显示策略：auto(hover/active) / always(常驻) / never(隐藏) |
+| `tooltipFormatter` | `(value: number) => React.ReactNode` | – | – | 自定义 tooltip 内容；不传则显示当前数值 |
+| `reverse` | `boolean` | – | – | 选中态反转（轨道与已选段颜色翻转） |
+
+## 示例
+
+### Range
+
+双滑块范围选择。
+
+```tsx
+<Slider defaultValue={[25, 75]} max={100} step={1} className="w-64" />
+```
+
+### CustomStep
+
+自定义步长为 10。
+
+```tsx
+<Slider defaultValue={[30]} max={100} step={10} className="w-64" />
+```
+
+### Disabled
+
+禁用状态。
+
+```tsx
+<Slider defaultValue={[40]} max={100} disabled className="w-64" />
+```
+
+### Marks
+
+三种 marks 形态：number 等分、number[] 枚举、Record 值-标签映射。
+
+```tsx
+<div className="flex flex-col gap-10">
+  <Slider defaultValue={[30]} marks={5} className="w-64" />
+  <Slider defaultValue={[30]} marks={[0, 100]} className="w-64" />
+  <Slider
+    defaultValue={[30]}
+    marks={{ 0: '0°C', 26: '26°C', 37: '37°C', 100: '100°C' }}
+    className="w-64"
+  />
+</div>
+```
+
+### MarksPosition
+
+marks 标签可放在轨道下方（默认）或上方。
+
+```tsx
+<div className="flex flex-col gap-16">
+  <Slider
+    defaultValue={[30]}
+    marks={[0, 100]}
+    marksPosition="below"
+    className="w-64"
+  />
+  <Slider
+    defaultValue={[30]}
+    marks={[0, 100]}
+    marksPosition="above"
+    className="w-64"
+  />
+</div>
+```
+
+### Tooltip
+
+Tooltip 默认 hover/active 显示，可通过 tooltipFormatter 自定义内容。
+
+```tsx
+<Slider
+  defaultValue={[40]}
+  tooltipFormatter={(v) => `${v}%`}
+  className="w-64"
+/>
+```
+
+### Reverse
+
+选中态反转：未选段变蓝、已选段变灰。
+
+```tsx
+<div className="flex flex-col gap-6">
+  <Slider defaultValue={[30]} reverse className="w-64" />
+  <Slider defaultValue={[20, 70]} reverse className="w-64" />
+</div>
+```
+
+### Vertical
+
+垂直方向，配合 marks 使用。
+
+```tsx
+<div className="flex h-40 gap-10">
+  <Slider defaultValue={[40]} orientation="vertical" />
+  <Slider
+    defaultValue={[20, 80]}
+    orientation="vertical"
+    marks={[0, 50, 100]}
+  />
+</div>
+```

package/src/components/slider/stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Slider } from './index';
+
+const meta: Meta<typeof Slider> = {
+  title: '数据录入 · Data Entry/Slider 滑块',
+  component: Slider,
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 基础滑块，单值选取。 */
+export const Default: Story = {
+  render: () => (
+    <Slider defaultValue={[50]} max={100} step={1} className="w-64" />
+  ),
+};
+
+/** 双滑块范围选择。 */
+export const Range: Story = {
+  render: () => (
+    <Slider defaultValue={[25, 75]} max={100} step={1} className="w-64" />
+  ),
+};
+
+/** 自定义步长为 10。 */
+export const CustomStep: Story = {
+  render: () => (
+    <Slider defaultValue={[30]} max={100} step={10} className="w-64" />
+  ),
+};
+
+/** 禁用状态。 */
+export const Disabled: Story = {
+  render: () => (
+    <Slider defaultValue={[40]} max={100} disabled className="w-64" />
+  ),
+};
+
+/** 三种 marks 形态：number 等分、number[] 枚举、Record 值-标签映射。 */
+export const Marks: Story = {
+  render: () => (
+    <div className="flex flex-col gap-10">
+      <Slider defaultValue={[30]} marks={5} className="w-64" />
+      <Slider defaultValue={[30]} marks={[0, 100]} className="w-64" />
+      <Slider
+        defaultValue={[30]}
+        marks={{ 0: '0°C', 26: '26°C', 37: '37°C', 100: '100°C' }}
+        className="w-64"
+      />
+    </div>
+  ),
+};
+
+/** marks 标签可放在轨道下方（默认）或上方。 */
+export const MarksPosition: Story = {
+  render: () => (
+    <div className="flex flex-col gap-16">
+      <Slider
+        defaultValue={[30]}
+        marks={[0, 100]}
+        marksPosition="below"
+        className="w-64"
+      />
+      <Slider
+        defaultValue={[30]}
+        marks={[0, 100]}
+        marksPosition="above"
+        className="w-64"
+      />
+    </div>
+  ),
+};
+
+/** Tooltip 默认 hover/active 显示，可通过 tooltipFormatter 自定义内容。 */
+export const Tooltip: Story = {
+  render: () => (
+    <Slider
+      defaultValue={[40]}
+      tooltipFormatter={(v) => `${v}%`}
+      className="w-64"
+    />
+  ),
+};
+
+/** 选中态反转：未选段变蓝、已选段变灰。 */
+export const Reverse: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <Slider defaultValue={[30]} reverse className="w-64" />
+      <Slider defaultValue={[20, 70]} reverse className="w-64" />
+    </div>
+  ),
+};
+
+/** 垂直方向，配合 marks 使用。 */
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-40 gap-10">
+      <Slider defaultValue={[40]} orientation="vertical" />
+      <Slider
+        defaultValue={[20, 80]}
+        orientation="vertical"
+        marks={[0, 50, 100]}
+      />
+    </div>
+  ),
+};