@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/separator/separator.meta.md

@@ -1,75 +0,0 @@
----
-id: separator
-name: Separator
-displayName: 分隔线
-type: component
-category: layout
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Separator 分隔线
-
-分隔线 — Radix Separator(语义层)+ antd Divider 的 `dashed` 与中间装饰文本(`children`)。
-
-## When to use
-
-- 横向 / 纵向分隔语义不同的内容块
-- 列表项之间、Card 内的子区域分隔
-- 需要文字装饰的"区段标题分隔"(用 `children`)
-
-## When NOT to use
-
-- 仅作视觉留白 → 用 `margin / padding`
-- 强调分组语义且需要交互 → 用 `Accordion` / `Tabs`
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `orientation` | `'horizontal' \| 'vertical'` | `"horizontal"` | – | 分隔方向。 |
-| `decorative` | `boolean` | `true` | – | `true` 时不参与无障碍树(语义上仅装饰性)。 |
-| `dashed` | `boolean` | `false` | – | 虚线样式(antd Divider 并集)。 |
-| `children` | `React.ReactNode` | – | – | 中间装饰文本(antd Divider 并集)。提供时改用"两端线段 + 中间文本"布局, Radix Separator 不再使用,但通过 `role="separator"` 保留无障碍语义。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add separator` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-separator@^1.1.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **`orientation="vertical"` 父容器要有高度**:Radix Vertical Separator 不撑开父容器,需父级 `h-*` 显式高度
-- **`children` 模式仅 horizontal**:vertical 配合 `children` 会被忽略(语义不通)
-- **`decorative={false}` 时必须配合语义边界**:用于真正的内容分隔(如目录标题之间),不要在装饰场景滥用
-
-## Examples
-
-```tsx
-<Separator />
-<Separator orientation="vertical" className="h-4" />
-<Separator dashed />
-<Separator>OR</Separator>
-<Separator dashed>更多内容</Separator>
-```

package/src/components/separator/separator.stories.tsx

@@ -1,71 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Separator } from './separator';
-
-const meta: Meta<typeof Separator> = {
-  title: '布局 · Layout/Separator',
-  component: Separator,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '分隔线 — 在视觉上或语义上区隔内容。Radix Separator 实现 + antd Divider 的并集能力：支持水平 / 垂直两种 `orientation`，可传 `dashed` 虚线样式，中间可嵌入 `children` 为文字分隔。',
-      },
-    },
-  },
-  argTypes: {
-    orientation: {
-      control: 'inline-radio',
-      options: ['horizontal', 'vertical'],
-    },
-    decorative: { control: 'boolean' },
-    dashed: { control: 'boolean' },
-    children: { control: 'text' },
-  },
-  args: { orientation: 'horizontal', decorative: true, dashed: false },
-};
-
-export default meta;
-type Story = StoryObj<typeof Separator>;
-
-export const Playground: Story = {
-  render: (args) => (
-    <div className="w-72">
-      <p className="text-sm">区域 A</p>
-      <Separator {...args} className="my-3" />
-      <p className="text-sm">区域 B</p>
-    </div>
-  ),
-};
-
-export const Vertical: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex h-6 items-center gap-3 text-sm">
-      <span>Docs</span>
-      <Separator orientation="vertical" />
-      <span>Source</span>
-      <Separator orientation="vertical" />
-      <span>API</span>
-    </div>
-  ),
-};
-
-export const Dashed: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-72">
-      <Separator dashed />
-    </div>
-  ),
-};
-
-export const WithText: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex w-72 flex-col gap-3">
-      <Separator>OR</Separator>
-      <Separator dashed>更多设置</Separator>
-    </div>
-  ),
-};

package/src/components/separator/separator.tsx

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-
-import { cn } from '@/utils/cn';
-
-export interface SeparatorProps
-  extends Omit<
-    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>,
-    'children'
-  > {
-  /**
-   * 分隔方向。
-   * @default "horizontal"
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * `true` 时不参与无障碍树(语义上仅装饰性)。
-   * @default true
-   */
-  decorative?: boolean;
-  /**
-   * 虚线样式(antd Divider 并集)。
-   * @default false
-   */
-  dashed?: boolean;
-  /**
-   * 中间装饰文本(antd Divider 并集)。提供时改用"两端线段 + 中间文本"布局,
-   * Radix Separator 不再使用,但通过 `role="separator"` 保留无障碍语义。
-   */
-  children?: React.ReactNode;
-}
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  SeparatorProps
->(
-  (
-    {
-      className,
-      orientation = 'horizontal',
-      decorative = true,
-      dashed = false,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    // Children mode (antd Divider with text): only meaningful for horizontal.
-    if (children && orientation === 'horizontal') {
-      return (
-        <div
-          ref={ref as React.Ref<HTMLDivElement>}
-          role={decorative ? 'none' : 'separator'}
-          aria-orientation={decorative ? undefined : 'horizontal'}
-          className={cn(
-            'flex w-full items-center gap-3 text-xs text-muted-foreground',
-            className,
-          )}
-          {...(props as React.HTMLAttributes<HTMLDivElement>)}
-        >
-          <span
-            className={cn(
-              'h-px flex-1',
-              dashed ? 'border-t border-dashed border-border' : 'bg-border',
-            )}
-          />
-          <span className="shrink-0">{children}</span>
-          <span
-            className={cn(
-              'h-px flex-1',
-              dashed ? 'border-t border-dashed border-border' : 'bg-border',
-            )}
-          />
-        </div>
-      );
-    }
-
-    // Plain mode: delegate to Radix.
-    return (
-      <SeparatorPrimitive.Root
-        ref={ref}
-        decorative={decorative}
-        orientation={orientation}
-        className={cn(
-          dashed
-            ? orientation === 'horizontal'
-              ? 'border-t border-dashed border-border bg-transparent'
-              : 'border-l border-dashed border-border bg-transparent'
-            : 'shrink-0 bg-border',
-          orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-Separator.displayName = 'Separator';
-
-export { Separator };

package/src/components/sheet/sheet.meta.md

@@ -1,113 +0,0 @@
----
-id: sheet
-name: Sheet
-displayName: 侧边面板
-type: component
-category: feedback
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Sheet 侧边面板
-
-侧边滑出面板 — Radix Dialog 底座 + side 方向变体(left / right / top / bottom)+ size 尺寸变体 + `--radius-dialog` 圆角,对齐 antd Drawer 全能力集。
-`Drawer` 现为 Sheet 的别名 re-export,向后兼容。
-
-## When to use
-
-- 设置面板 / 详情查看(从右侧滑入,主区域保留可见)
-- 移动端导航(从左侧滑入)
-- 编辑面板(主操作仍在画面内)
-- 任何需要从屏幕边缘抽出面板、承载次要流程的场景
-
-## When NOT to use
-
-- 短交互 → `Popover`
-- 阻断式确认 → `AlertDialog`
-- 普通模态(居中) → `Dialog`
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `SheetContent` 的 props;`Sheet`(Root)透传 Radix `open / defaultOpen / onOpenChange / modal`。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `"right"` | – | 弹出方向(antd Drawer `placement` 并集)。 |
-| `size` | `SheetSize` | `"md"` | – | 面板尺寸 — 绑定 design tokens `--layout-dialog-{sm\|md\|lg\|xl}`。 仅在 side=left/right 时生效(控制宽度)。 |
-| `showClose` | `boolean` | `true` | – | 是否在标题区右侧显示默认关闭按钮。 若使用 SheetHeader 的内置 close 布局,可设为 false 自行控制。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add sheet` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-dialog@^1.1.0 class-variance-authority@^0.7.0 lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-> 子组件:`Sheet` / `SheetTrigger` / `SheetContent`(`side` + `size` 在此)/ `SheetHeader` / `SheetBody` / `SheetFooter` / `SheetTitle` / `SheetDescription` / `SheetClose` / `SheetOverlay` / `SheetPortal`。
-
-## AI 生成纪律
-
-- **side 默认 right**:右侧是详情类滑出的工业惯例(Email / 设置 / 通知)
-- **side="left" 仅用于全局导航**(响应式抽屉);避免在桌面端把内容也用 left side
-- **size 默认 md(600px)**:sm(400) 适合简单设置;lg(800) 适合有表格/表单的编辑;xl(1200) 仅全屏级编辑器
-- **SheetBody 必须包裹内容区**:确保 flex-1 + overflow-auto 滚动正确
-- **SheetHeader 已含 border-b,SheetFooter 已含 border-t**:不要再额外加分隔线
-- **Sheet 内表单 Footer 居底**:SheetBody + SheetFooter 自然形成 header | body(scrollable) | footer 三段式
-- **`SheetTitle` 必有**(无障碍,Radix Dialog 要求)
-- **圆角由 `--radius-dialog` token 控制**:不要手动覆盖 rounded 值
-- **Drawer 现在是 Sheet 的 alias**:新代码一律使用 Sheet,Drawer 仅为向后兼容保留
-
-## Examples
-
-```tsx
-import {
-  Sheet,
-  SheetTrigger,
-  SheetContent,
-  SheetHeader,
-  SheetBody,
-  SheetTitle,
-  SheetDescription,
-  SheetFooter,
-  SheetClose,
-} from '@/components/ui/sheet';
-import { Button } from '@/components/ui/button';
-
-<Sheet>
-  <SheetTrigger asChild>
-    <Button variant="outline">查看详情</Button>
-  </SheetTrigger>
-  <SheetContent side="right" size="md">
-    <SheetHeader>
-      <SheetTitle>用户详情</SheetTitle>
-    </SheetHeader>
-    <SheetBody>
-      <SheetDescription>查看与编辑用户基本信息</SheetDescription>
-      {/* content */}
-    </SheetBody>
-    <SheetFooter>
-      <SheetClose asChild>
-        <Button variant="outline">关闭</Button>
-      </SheetClose>
-      <Button>保存</Button>
-    </SheetFooter>
-  </SheetContent>
-</Sheet>;
-```

package/src/components/sheet/sheet.stories.tsx

@@ -1,188 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Sheet,
-  SheetTrigger,
-  SheetContent,
-  SheetHeader,
-  SheetBody,
-  SheetTitle,
-  SheetDescription,
-  SheetFooter,
-  SheetClose,
-} from './sheet';
-import { Button } from '@/components/button/button';
-
-const meta: Meta<typeof SheetContent> = {
-  title: '反馈 · Feedback/Sheet',
-  component: SheetContent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '侧边面板 —— 从屏幕边缘滑入的模态面板,承载次要流程(设置/详情/编辑)且不中断主区域。Radix Dialog 内核 + cva side/size 双变体 + `--radius-dialog` 圆角,对齐 antd `Drawer` 全能力(`placement` / `size` / header+close / footer 操作栏)并兼容 shadcn `Sheet` 的 `side` 模型:`side`、`size`、`showClose`。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
-      },
-    },
-  },
-  argTypes: {
-    side: {
-      control: 'inline-radio',
-      options: ['top', 'right', 'bottom', 'left'],
-    },
-    size: {
-      control: 'inline-radio',
-      options: ['sm', 'md', 'lg', 'xl'],
-    },
-    showClose: {
-      control: 'boolean',
-    },
-  },
-  args: { side: 'right', size: 'md', showClose: true },
-};
-
-export default meta;
-type Story = StoryObj<typeof SheetContent>;
-
-export const Playground: Story = {
-  render: (args) => (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">打开 Sheet</Button>
-      </SheetTrigger>
-      <SheetContent {...args}>
-        <SheetHeader>
-          <SheetTitle>编辑资料</SheetTitle>
-        </SheetHeader>
-        <SheetBody>
-          <SheetDescription>保存后立即生效。</SheetDescription>
-          <div className="py-4 text-sm text-muted-foreground">
-            表单字段放在这里...
-          </div>
-        </SheetBody>
-        <SheetFooter>
-          <SheetClose asChild>
-            <Button variant="outline">取消</Button>
-          </SheetClose>
-          <Button>保存</Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  ),
-};
-
-export const FourSides: Story = {
-  name: '四个方向',
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-wrap gap-3">
-      {(['top', 'right', 'bottom', 'left'] as const).map((s) => (
-        <Sheet key={s}>
-          <SheetTrigger asChild>
-            <Button variant="outline">{s}</Button>
-          </SheetTrigger>
-          <SheetContent side={s} size="md">
-            <SheetHeader>
-              <SheetTitle>side = {s}</SheetTitle>
-            </SheetHeader>
-            <SheetBody>
-              <SheetDescription>从 {s} 方向滑入。</SheetDescription>
-            </SheetBody>
-          </SheetContent>
-        </Sheet>
-      ))}
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  name: '尺寸变体',
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-wrap gap-3">
-      {(['sm', 'md', 'lg', 'xl'] as const).map((sz) => (
-        <Sheet key={sz}>
-          <SheetTrigger asChild>
-            <Button variant="outline">{sz}</Button>
-          </SheetTrigger>
-          <SheetContent side="right" size={sz}>
-            <SheetHeader>
-              <SheetTitle>size = {sz}</SheetTitle>
-            </SheetHeader>
-            <SheetBody>
-              <SheetDescription>
-                宽度由 --layout-dialog-{sz} token 控制。
-              </SheetDescription>
-            </SheetBody>
-          </SheetContent>
-        </Sheet>
-      ))}
-    </div>
-  ),
-};
-
-export const WithHeaderFooter: Story = {
-  name: 'Header + Body + Footer 三段式',
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">打开完整面板</Button>
-      </SheetTrigger>
-      <SheetContent side="right" size="lg">
-        <SheetHeader>
-          <SheetTitle>订单详情</SheetTitle>
-        </SheetHeader>
-        <SheetBody>
-          <div className="space-y-4">
-            <p className="text-sm text-muted-foreground">
-              订单号:ORD-2026-001234
-            </p>
-            <p className="text-sm text-muted-foreground">
-              创建时间:2026-05-29 10:30
-            </p>
-            <div className="h-64 rounded-lg bg-muted/50 p-4 text-sm text-muted-foreground">
-              模拟长内容区域(可滚动)...
-            </div>
-            <div className="h-64 rounded-lg bg-muted/50 p-4 text-sm text-muted-foreground">
-              更多内容...
-            </div>
-          </div>
-        </SheetBody>
-        <SheetFooter>
-          <SheetClose asChild>
-            <Button variant="outline">取消</Button>
-          </SheetClose>
-          <Button>确认操作</Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  ),
-};
-
-export const NoCloseButton: Story = {
-  name: '隐藏关闭按钮',
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">无关闭按钮</Button>
-      </SheetTrigger>
-      <SheetContent side="right" size="sm" showClose={false}>
-        <SheetHeader>
-          <SheetTitle>必选操作</SheetTitle>
-        </SheetHeader>
-        <SheetBody>
-          <SheetDescription>
-            隐藏右上角关闭按钮,用户必须通过底部按钮完成操作。
-          </SheetDescription>
-        </SheetBody>
-        <SheetFooter>
-          <SheetClose asChild>
-            <Button variant="outline">放弃</Button>
-          </SheetClose>
-          <Button>完成</Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  ),
-};