@teamix-evo/ui 0.2.0 → 0.3.0

package/src/components/space/space.meta.md

@@ -1,103 +0,0 @@
----
-id: space
-name: Space
-displayName: 间距
-type: component
-category: layout
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Space 间距
-
-间距容器 — antd 独有补足。**等价 antd `Space`**:把同语义并排子项统一间距、对齐与可选换行,可选 `split` 节点(常用 Separator)。与 `Flex` 区别:Space 偏向**小集合 inline 间距**(按钮组、tag 组、表单 label-value 对),Flex 偏向**完整布局容器**。
-
-## When to use
-
-- 多个按钮 / 标签 / 链接并排(避免直接写 `flex gap-2`)
-- 表单某一行的"标签 + 值"对
-- 列表行末的多个操作链接(配 `split=<Separator orientation="vertical" />`)
-
-## When NOT to use
-
-- 完整页面布局 → `Flex` / `Grid`
-- 按钮粘连共享边线 → `ButtonGroup`
-- 大段排版分段 → `Typography Prose`
-
-## Props
-
-<!-- auto:props:begin -->
-
-| 名称        | 类型                                                      | 默认值         | 必填 | 说明                                                                     |
-| ----------- | --------------------------------------------------------- | -------------- | ---- | ------------------------------------------------------------------------ |
-| `direction` | `'horizontal' \| 'vertical'`                              | `"horizontal"` | –    | 排列方向(antd `direction` 并集)。                                        |
-| `size`      | `'sm' \| 'default' \| 'lg'`                               | `"default"`    | –    | 间距档位(antd `size` 并集) — 走 design 间距刻度,不接受 number。          |
-| `wrap`      | `boolean`                                                 | `false`        | –    | 是否自动换行(antd `wrap` 并集) — horizontal 模式生效。                   |
-| `align`     | `'start' \| 'center' \| 'end' \| 'baseline' \| 'stretch'` | `"center"`     | –    | 主轴对齐方式(antd `align` 并集)。                                        |
-| `justify`   | `'start' \| 'center' \| 'end' \| 'between' \| 'around'`   | –              | –    | 副轴对齐(antd `Space` 无,Space.Compact 也无 — 但中后台需求高,补)。       |
-| `split`     | `React.ReactNode`                                         | –              | –    | 分隔节点(antd `split` 并集) — 在每两个子项之间插入(常用 `<Separator>`)。 |
-
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-
-### 同库依赖
-
-> `teamix-evo ui add space` 时,以下 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 生成纪律
-
-- **`size` 是档位枚举**(sm/default/lg),**不接受 number** — 与 antd 偏离,因为我们走 design 间距刻度
-- **`wrap` 仅 horizontal 生效** — vertical 自动换行无意义
-- **`split` 应是无状态轻节点**(Separator / `|` / dot),不要传 Button 等复杂组件,语义混乱
-- **`justify`** 是 antd 缺失但中后台高频补的能力 — 列表行末右对齐操作就用 `justify="end"`
-- **不要嵌套 Space**:嵌套用 Flex 表达父子结构
-
-## Examples
-
-```tsx
-import { Space } from '@/components/ui/space';
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
-
-// 按钮组
-<Space>
-  <Button variant="outline">取消</Button>
-  <Button>确定</Button>
-</Space>
-
-// 链接组 + split
-<Space split={<Separator orientation="vertical" className="h-4" />} size="sm">
-  <a href="#">查看</a>
-  <a href="#">编辑</a>
-  <a href="#">删除</a>
-</Space>
-
-// 表单行
-<Space justify="between">
-  <span className="text-sm text-muted-foreground">总计</span>
-  <span className="text-lg font-semibold">¥ 1,299</span>
-</Space>
-
-// 纵向
-<Space direction="vertical" align="start">
-  <Title>标题</Title>
-  <Paragraph>描述</Paragraph>
-</Space>
-```

package/src/components/space/space.stories.tsx

@@ -1,108 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Space } from './space';
-import { Button } from '@/components/button/button';
-import { Separator } from '@/components/separator/separator';
-
-const meta: Meta<typeof Space> = {
-  title: '布局与容器 · Layout/Space',
-  component: Space,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '间距容器 — 把同语义并排子项统一间距、对齐与可选换行(按钮组、tag 组、表单 label-value 对)。等价 antd `Space`,与 Flex 互补:Space 偏 inline 小集合,Flex 偏完整布局。',
-      },
-    },
-  },
-  argTypes: {
-    direction: { control: 'inline-radio', options: ['horizontal', 'vertical'] },
-    size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
-    wrap: { control: 'boolean' },
-    align: {
-      control: 'inline-radio',
-      options: ['start', 'center', 'end', 'baseline', 'stretch'],
-    },
-    justify: {
-      control: 'inline-radio',
-      options: ['start', 'center', 'end', 'between', 'around'],
-    },
-  },
-  args: {
-    direction: 'horizontal',
-    size: 'default',
-    wrap: false,
-    align: 'center',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Space>;
-
-export const Playground: Story = {
-  render: (args) => (
-    <Space {...args}>
-      <Button variant="outline">取消</Button>
-      <Button>确定</Button>
-      <Button variant="ghost">更多</Button>
-    </Space>
-  ),
-};
-
-export const Vertical: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Space direction="vertical" align="start">
-      <span className="text-base font-semibold">标题</span>
-      <span className="text-sm text-muted-foreground">这是描述文字</span>
-      <Button size="sm">操作</Button>
-    </Space>
-  ),
-};
-
-export const WithSplit: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Space
-      split={<Separator orientation="vertical" className="h-4" />}
-      size="sm"
-    >
-      <a href="#" className="text-sm text-primary hover:underline">
-        查看
-      </a>
-      <a href="#" className="text-sm text-primary hover:underline">
-        编辑
-      </a>
-      <a href="#" className="text-sm text-destructive hover:underline">
-        删除
-      </a>
-    </Space>
-  ),
-};
-
-export const Between: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-80 rounded-md border p-3">
-      <Space justify="between">
-        <span className="text-sm text-muted-foreground">总计</span>
-        <span className="text-lg font-semibold">¥ 1,299</span>
-      </Space>
-    </div>
-  ),
-};
-
-export const Wrap: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-80 rounded-md border p-3">
-      <Space wrap>
-        {Array.from({ length: 12 }).map((_, i) => (
-          <Button key={i} variant="outline" size="sm">
-            标签 {i + 1}
-          </Button>
-        ))}
-      </Space>
-    </div>
-  ),
-};

package/src/components/space/space.tsx

@@ -1,106 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/utils/cn';
-
-const spaceVariants = cva('flex', {
-  variants: {
-    direction: {
-      horizontal: 'flex-row',
-      vertical: 'flex-col',
-    },
-    size: {
-      sm: 'gap-2',
-      default: 'gap-3',
-      lg: 'gap-4',
-    },
-    wrap: {
-      true: 'flex-wrap',
-      false: 'flex-nowrap',
-    },
-    align: {
-      start: 'items-start',
-      center: 'items-center',
-      end: 'items-end',
-      baseline: 'items-baseline',
-      stretch: 'items-stretch',
-    },
-    justify: {
-      start: 'justify-start',
-      center: 'justify-center',
-      end: 'justify-end',
-      between: 'justify-between',
-      around: 'justify-around',
-    },
-  },
-  defaultVariants: { direction: 'horizontal', size: 'default', wrap: false, align: 'center' },
-});
-
-export interface SpaceProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof spaceVariants> {
-  /**
-   * 排列方向(antd `direction` 并集)。
-   * @default "horizontal"
-   */
-  direction?: 'horizontal' | 'vertical';
-  /**
-   * 间距档位(antd `size` 并集) — 走 design 间距刻度,不接受 number。
-   * @default "default"
-   */
-  size?: 'sm' | 'default' | 'lg';
-  /**
-   * 是否自动换行(antd `wrap` 并集) — horizontal 模式生效。
-   * @default false
-   */
-  wrap?: boolean;
-  /**
-   * 主轴对齐方式(antd `align` 并集)。
-   * @default "center"
-   */
-  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
-  /**
-   * 副轴对齐(antd `Space` 无,Space.Compact 也无 — 但中后台需求高,补)。
-   */
-  justify?: 'start' | 'center' | 'end' | 'between' | 'around';
-  /**
-   * 分隔节点(antd `split` 并集) — 在每两个子项之间插入(常用 `<Separator>`)。
-   */
-  split?: React.ReactNode;
-}
-
-/**
- * 间距容器 — antd 独有补足。**等价 antd `Space`**:把同语义并排子项统一间距、对齐与可选换行。
- * 与 `Flex` 区别:Space 偏向"小集合 inline 间距"(按钮组、tag 组、表单 label-value 对),
- * Flex 偏向"完整布局容器"。
- */
-const Space = React.forwardRef<HTMLDivElement, SpaceProps>(
-  (
-    { direction, size, wrap, align, justify, split, className, children, ...props },
-    ref,
-  ) => {
-    const items = React.Children.toArray(children).filter(Boolean);
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          spaceVariants({ direction, size, wrap, align, justify }),
-          className,
-        )}
-        {...props}
-      >
-        {split
-          ? items.map((child, i) => (
-              <React.Fragment key={i}>
-                {i > 0 ? split : null}
-                {child}
-              </React.Fragment>
-            ))
-          : children}
-      </div>
-    );
-  },
-);
-Space.displayName = 'Space';
-
-export { Space, spaceVariants };