@teamix-evo/ui 0.1.1

package/src/components/select/select.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectGroup,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+} from './select';
+
+const meta: Meta<typeof SelectTrigger> = {
+  title: '表单与输入 · Form/Select',
+  component: SelectTrigger,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '下拉选择 — 从预置选项中选中一个值，由按钮触发弹出选项列表。Radix Select 实现 + antd Select 的并集能力：支持 `SelectGroup` / `SelectLabel` / `SelectSeparator` 组合出分组下拉，`size`（sm / default / lg）可调，默认带键盘导航与文本检索。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+  argTypes: {
+    size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
+    disabled: { control: 'boolean' },
+  },
+  args: { size: 'default' },
+  decorators: [
+    (Story) => (
+      <div className="w-64">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof SelectTrigger>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Select>
+      <SelectTrigger {...args}>
+        <SelectValue placeholder="选择城市" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="bj">北京</SelectItem>
+        <SelectItem value="sh">上海</SelectItem>
+        <SelectItem value="hz">杭州</SelectItem>
+        <SelectItem value="sz">深圳</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const Grouped: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Select>
+      <SelectTrigger>
+        <SelectValue placeholder="选择时区" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>亚洲</SelectLabel>
+          <SelectItem value="cn">北京时间 (UTC+8)</SelectItem>
+          <SelectItem value="jp">东京时间 (UTC+9)</SelectItem>
+          <SelectItem value="sg">新加坡时间 (UTC+8)</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>欧洲</SelectLabel>
+          <SelectItem value="uk">伦敦时间 (UTC+0)</SelectItem>
+          <SelectItem value="de">柏林时间 (UTC+1)</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      {(['sm', 'default', 'lg'] as const).map((s) => (
+        <Select key={s}>
+          <SelectTrigger size={s}>
+            <SelectValue placeholder={`size = ${s}`} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="a">选项 A</SelectItem>
+            <SelectItem value="b">选项 B</SelectItem>
+          </SelectContent>
+        </Select>
+      ))}
+    </div>
+  ),
+};

package/src/components/select/select.tsx

@@ -0,0 +1,188 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+export interface SelectTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+  /**
+   * 触发器尺寸。
+   * @default "default"
+   */
+  size?: 'sm' | 'default' | 'lg';
+}
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(({ className, children, size = 'default', ...props }, ref) => {
+  const h =
+    size === 'sm'
+      ? 'h-8 px-2 text-xs'
+      : size === 'lg'
+      ? 'h-10 px-4'
+      : 'h-9 px-3 text-sm';
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex w-full items-center justify-between rounded-md border border-input bg-background py-2 shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+        h,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="size-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="size-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+export interface SelectContentProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
+  /**
+   * 浮层定位策略。`popper` 跟随 trigger 并自动避让边界;`item-aligned` 把当前选中项与
+   * trigger 对齐(类似原生 `<select>`)。默认 `popper` 与 antd Select 行为一致。
+   * @default "popper"
+   */
+  position?: React.ComponentPropsWithoutRef<
+    typeof SelectPrimitive.Content
+  >['position'];
+}
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  SelectContentProps
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-xs font-semibold text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="size-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

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

@@ -0,0 +1,74 @@
+---
+id: separator
+name: Separator
+type: component
+category: foundation
+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

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Separator } from './separator';
+
+const meta: Meta<typeof Separator> = {
+  title: '基础原语 · Foundation/Separator',
+  component: Separator,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '分隔线 — 在视觉上或语义上区隔内容。Radix Separator 实现 + antd Divider 的并集能力：支持水平 / 垂直两种 `orientation`，可传 `dashed` 虚线样式，中间可嵌入 `children` 为文字分隔（antd `Divider` 中部文字能力）。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+  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

@@ -0,0 +1,104 @@
+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-sm 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

@@ -0,0 +1,97 @@
+---
+id: sheet
+name: Sheet
+type: component
+category: feedback
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Sheet
+
+侧边滑出面板 — Radix Dialog 底座 + side 方向变体(left / right / top / bottom)+ antd Drawer `placement` 并集。
+**与 Dialog 的关键差异**:Sheet 从屏幕边缘滑入,模态阻断同样;`Drawer` 是底部可拖拽抽屉(iOS 风格,移动端体验)。
+
+## When to use
+
+- 设置面板 / 详情查看(从右侧滑入,主区域保留可见)
+- 移动端导航(从左侧滑入)
+- 编辑面板(主操作仍在画面内)
+
+## When NOT to use
+
+- 短交互 → `Popover`
+- 阻断式确认 → `AlertDialog`
+- 移动端可拖拽 → `Drawer`
+- 普通模态 → `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` 并集)。 |
+<!-- 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` 在此)/ `SheetHeader` / `SheetFooter` / `SheetTitle` / `SheetDescription` / `SheetClose` / `SheetOverlay` / `SheetPortal`。
+
+## AI 生成纪律
+
+- **side 默认 right**:右侧是详情类滑出的工业惯例(Email / 设置 / 通知)
+- **side="left" 仅用于全局导航**(响应式抽屉);避免在桌面端把内容也用 left side
+- **Sheet 内表单 Footer 居底**:用 `flex-1` + 滚动区让表单可滚动,Footer 固定底部
+- **`SheetTitle` 必有**(无障碍)
+- **Sheet 与 Drawer 混用**:同一应用内只挑一个,响应式断点切换由设计层决定
+
+## Examples
+
+```tsx
+import {
+  Sheet, SheetTrigger, SheetContent, SheetHeader,
+  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" className="sm:max-w-md">
+    <SheetHeader>
+      <SheetTitle>用户详情</SheetTitle>
+      <SheetDescription>查看与编辑用户基本信息</SheetDescription>
+    </SheetHeader>
+    {/* content */}
+    <SheetFooter>
+      <SheetClose asChild>
+        <Button variant="outline">关闭</Button>
+      </SheetClose>
+      <Button>保存</Button>
+    </SheetFooter>
+  </SheetContent>
+</Sheet>
+```