@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/timeline/stories.tsx

@@ -0,0 +1,369 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CheckCircle2, Clock, Package, Truck } from 'lucide-react';
+
+import {
+  Timeline,
+  TimelineConnector,
+  TimelineContent,
+  TimelineDescription,
+  TimelineDot,
+  TimelineHeader,
+  TimelineItem,
+  TimelineOppositeContent,
+  TimelineSeparator,
+  TimelineTime,
+  TimelineTitle,
+} from '.';
+
+const meta: Meta<typeof Timeline> = {
+  title: '数据展示 · Data Display/Timeline 时间轴',
+  component: Timeline,
+  tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** 基础用法 — 最简形态，仅圆点 + 文本。 */
+export const Default: Story = {
+  render: () => (
+    <Timeline>
+      <TimelineItem state="process">
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>Receipt</TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>Ship</TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot />
+        </TimelineSeparator>
+        <TimelineContent>Order</TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  ),
+};
+
+/** 节点状态 — done / process / error / success 四种语义色。 */
+export const States: Story = {
+  render: () => (
+    <Timeline>
+      <TimelineItem state="process">
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineHeader>
+            <TimelineTitle>Cloudy</TimelineTitle>
+            <TimelineTime>2024-06-10 10:30</TimelineTime>
+          </TimelineHeader>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem state="success">
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineHeader>
+            <TimelineTitle>Sunny</TimelineTitle>
+            <TimelineTime>2024-06-11</TimelineTime>
+          </TimelineHeader>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem state="error">
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineHeader>
+            <TimelineTitle>Rainy</TimelineTitle>
+            <TimelineTime>2024-06-09</TimelineTime>
+          </TimelineHeader>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem state="done">
+        <TimelineSeparator>
+          <TimelineDot />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineHeader>
+            <TimelineTitle>Snowy</TimelineTitle>
+            <TimelineTime>2024-06-08</TimelineTime>
+          </TimelineHeader>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  ),
+};
+
+/** 富内容 — title + time + description（物流轨迹场景）。 */
+export const WithContent: Story = {
+  render: () => (
+    <Timeline>
+      <TimelineItem state="process">
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineHeader>
+            <TimelineTitle>Sign</TimelineTitle>
+            <TimelineTime>2024-06-10 10:30</TimelineTime>
+          </TimelineHeader>
+          <TimelineDescription>
+            [Hangzhou] 签收完成，签收人 Alibaba Post Office
+          </TimelineDescription>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineHeader>
+            <TimelineTitle>Delivery</TimelineTitle>
+            <TimelineTime>2024-06-10 09:30</TimelineTime>
+          </TimelineHeader>
+          <TimelineDescription>
+            [Hangzhou] 快件已到达 Hangzhou Binjiang 公司
+          </TimelineDescription>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineHeader>
+            <TimelineTitle>Transport</TimelineTitle>
+            <TimelineTime>2024-06-10 06:10</TimelineTime>
+          </TimelineHeader>
+          <TimelineDescription>
+            [Hangzhou] 浙江杭州转运中心已发出
+          </TimelineDescription>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineHeader>
+            <TimelineTitle>Processing</TimelineTitle>
+            <TimelineTime>2024-06-09 10:01</TimelineTime>
+          </TimelineHeader>
+          <TimelineDescription>[Dongguan] 您的订单开始处理</TimelineDescription>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  ),
+};
+
+/** 对侧时间 — `mode="right"` 时 TimelineOppositeContent 渲染在分隔列对侧。 */
+export const OppositeContent: Story = {
+  render: () => (
+    <Timeline mode="right">
+      <TimelineItem state="process">
+        <TimelineOppositeContent>2024-10-03</TimelineOppositeContent>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineTitle>Sign</TimelineTitle>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineOppositeContent>2024-10-02</TimelineOppositeContent>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineTitle>Ship</TimelineTitle>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineOppositeContent>2024-10-01</TimelineOppositeContent>
+        <TimelineSeparator>
+          <TimelineDot />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineTitle>Order</TimelineTitle>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  ),
+};
+
+/** 自定义圆点 — 用 `<TimelineDot asChild>` 套 lucide 图标。 */
+export const CustomDot: Story = {
+  render: () => (
+    <Timeline>
+      <TimelineItem state="process">
+        <TimelineSeparator>
+          <TimelineDot asChild>
+            <Clock />
+          </TimelineDot>
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineTitle>Receipt</TimelineTitle>
+          <TimelineTime>2024-10-21</TimelineTime>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem state="success">
+        <TimelineSeparator>
+          <TimelineDot asChild className="text-success">
+            <CheckCircle2 />
+          </TimelineDot>
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineTitle>Ship</TimelineTitle>
+          <TimelineTime>2024-10-22</TimelineTime>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineDot asChild>
+            <Package />
+          </TimelineDot>
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineTitle>Order</TimelineTitle>
+          <TimelineDescription>下单成功</TimelineDescription>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  ),
+};
+
+/** 交替布局 — `mode="alternate"`，对侧内容自动左右轮换。 */
+export const Alternate: Story = {
+  render: () => (
+    <Timeline mode="alternate">
+      <TimelineItem state="success">
+        <TimelineOppositeContent>第一阶段</TimelineOppositeContent>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineTitle>需求确认</TimelineTitle>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem state="success">
+        <TimelineOppositeContent>第二阶段</TimelineOppositeContent>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineTitle>设计评审</TimelineTitle>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem state="process">
+        <TimelineOppositeContent>第三阶段</TimelineOppositeContent>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineTitle>开发实现</TimelineTitle>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineOppositeContent>第四阶段</TimelineOppositeContent>
+        <TimelineSeparator>
+          <TimelineDot />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineTitle>测试验收</TimelineTitle>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  ),
+};
+
+/** 加载中占位 — 末尾追加 `state="process"` 节点表达"未结束"，无需专属 prop。 */
+export const Pending: Story = {
+  render: () => (
+    <Timeline>
+      <TimelineItem state="success">
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>事件 A</TimelineContent>
+      </TimelineItem>
+      <TimelineItem state="success">
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>事件 B</TimelineContent>
+      </TimelineItem>
+      <TimelineItem state="process">
+        <TimelineSeparator>
+          <TimelineDot asChild>
+            <Truck />
+          </TimelineDot>
+        </TimelineSeparator>
+        <TimelineContent className="text-muted-foreground">
+          加载更多…
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  ),
+};
+
+/** 反向排列 — `reverse` 让最新条目排在最上。 */
+export const Reverse: Story = {
+  render: () => (
+    <Timeline reverse>
+      <TimelineItem state="success">
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineTitle>创建项目</TimelineTitle>
+          <TimelineTime>2024-01-01</TimelineTime>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem state="success">
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineTitle>提交代码审查</TimelineTitle>
+          <TimelineTime>2024-01-05</TimelineTime>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem state="process">
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>
+          <TimelineTitle>正式上线</TimelineTitle>
+          <TimelineTime>2024-01-10</TimelineTime>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  ),
+};

package/src/components/toggle/index.tsx

@@ -0,0 +1,74 @@
+/**
+ * 切换按钮 Toggle
+ *
+ * 可切换开关状态的按钮，支持多种变体和尺寸，基于 Radix Toggle 原语。
+ *
+ * @when
+ * - 工具栏的加粗 / 斜体 / 下划线切换
+ * - 视图模式切换（网格 / 列表）
+ * - 功能开关（收藏 / 置顶）
+ */
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Toggle as TogglePrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+const toggleVariants = cva(
+  'group/toggle inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent hover:bg-muted',
+      },
+      size: {
+        // 尺寸规格与 Button 严格对齐（h / gap / px / text / svg）
+        sm: 'h-6 min-w-6 gap-1 rounded-md px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=size-])]:size-3',
+        default:
+          'h-8 min-w-8 gap-1.5 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        lg: 'h-9 min-w-9 gap-1.5 px-3 text-sm has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ToggleProps
+  extends Omit<
+      React.ComponentProps<typeof TogglePrimitive.Root>,
+      'pressed' | 'defaultPressed' | 'onPressedChange' | 'disabled'
+    >,
+    VariantProps<typeof toggleVariants> {
+  /** 受控按下状态。 */
+  pressed?: boolean;
+  /** 非受控初始按下状态。 @default false */
+  defaultPressed?: boolean;
+  /**
+   * 按下状态变化回调。
+   * @param pressed 当前是否按下
+   */
+  onPressedChange?: (pressed: boolean) => void;
+  /** 是否禁用。 @default false */
+  disabled?: boolean;
+}
+
+function Toggle({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: ToggleProps) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/src/components/toggle/meta.md

@@ -0,0 +1,76 @@
+# Toggle
+
+> 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
+
+## 描述
+
+切换按钮 Toggle
+可切换开关状态的按钮，支持多种变体和尺寸，基于 Radix Toggle 原语。
+
+## 使用场景
+
+- 工具栏的加粗 / 斜体 / 下划线切换
+- 视图模式切换（网格 / 列表）
+- 功能开关（收藏 / 置顶）
+
+## Props
+
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `variant` | `"default" \| "outline"` | `"default"` | – | – |
+| `size` | `"sm" \| "default" \| "lg"` | `"default"` | – | – |
+| `pressed` | `boolean` | – | – | 受控按下状态。 |
+| `defaultPressed` | `boolean` | `false` | – | 非受控初始按下状态。 |
+| `onPressedChange` | `(pressed: boolean) => void` | – | – | 按下状态变化回调。 |
+| `disabled` | `boolean` | `false` | – | 是否禁用。 |
+
+## 示例
+
+### Outline
+
+通过 `variant="outline"` 显示带边框的切换按钮。
+
+```tsx
+<Toggle variant="outline" aria-label="Toggle italic">
+  <ItalicIcon />
+</Toggle>
+```
+
+### Sizes
+
+支持 `sm`、`default`、`lg` 三种尺寸。
+
+```tsx
+<div className="flex items-center gap-2">
+  <Toggle size="sm" aria-label="Bold sm">
+    <BoldIcon />
+  </Toggle>
+  <Toggle aria-label="Bold default">
+    <BoldIcon />
+  </Toggle>
+  <Toggle size="lg" aria-label="Bold lg">
+    <BoldIcon />
+  </Toggle>
+</div>
+```
+
+### WithText
+
+带文字标签的切换按钮。
+
+```tsx
+<Toggle aria-label="Toggle underline">
+  <UnderlineIcon />
+  下划线
+</Toggle>
+```
+
+### Disabled
+
+禁用状态。
+
+```tsx
+<Toggle disabled aria-label="Disabled">
+  <BoldIcon />
+</Toggle>
+```

package/src/components/toggle/stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';
+import { Toggle } from './index';
+
+const meta: Meta<typeof Toggle> = {
+  title: '数据录入 · Data Entry/Toggle 切换按钮',
+  component: Toggle,
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 默认切换按钮，点击后切换按下/弹起状态。 */
+export const Default: Story = {
+  render: () => (
+    <Toggle aria-label="Toggle bold">
+      <BoldIcon />
+    </Toggle>
+  ),
+};
+
+/** 通过 `variant="outline"` 显示带边框的切换按钮。 */
+export const Outline: Story = {
+  render: () => (
+    <Toggle variant="outline" aria-label="Toggle italic">
+      <ItalicIcon />
+    </Toggle>
+  ),
+};
+
+/** 支持 `sm`、`default`、`lg` 三种尺寸。 */
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Toggle size="sm" aria-label="Bold sm">
+        <BoldIcon />
+      </Toggle>
+      <Toggle aria-label="Bold default">
+        <BoldIcon />
+      </Toggle>
+      <Toggle size="lg" aria-label="Bold lg">
+        <BoldIcon />
+      </Toggle>
+    </div>
+  ),
+};
+
+/** 带文字标签的切换按钮。 */
+export const WithText: Story = {
+  render: () => (
+    <Toggle aria-label="Toggle underline">
+      <UnderlineIcon />
+      下划线
+    </Toggle>
+  ),
+};
+
+/** 禁用状态。 */
+export const Disabled: Story = {
+  render: () => (
+    <Toggle disabled aria-label="Disabled">
+      <BoldIcon />
+    </Toggle>
+  ),
+};