@teamix-evo/ui 0.1.1 → 0.3.0

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

@@ -1,94 +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 偏完整布局。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
-      },
-    },
-  },
-  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 };