@teamix-evo/ui 0.2.0 → 0.4.0

package/src/components/combobox/combobox.tsx

@@ -1,130 +0,0 @@
-import * as React from 'react';
-import { Check, ChevronsUpDown } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-import { Button } from '@/components/button/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/command/command';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/popover/popover';
-
-export interface ComboboxOption {
-  /** 选项值(受控 value 比对的依据,稳定 ID)。 */
-  value: string;
-  /** 显示文本。 */
-  label: React.ReactNode;
-  /** 禁用此选项。 */
-  disabled?: boolean;
-}
-
-export interface ComboboxProps {
-  /** 选项列表(antd `AutoComplete.options` 并集)。 */
-  options: ComboboxOption[];
-  /** 受控 value(单选)。 */
-  value?: string;
-  /** value 变化回调。 */
-  onChange?: (value: string) => void;
-  /** 触发器占位文本(未选)。 @default "请选择..." */
-  placeholder?: string;
-  /** 搜索框占位文本。 @default "搜索..." */
-  searchPlaceholder?: string;
-  /** 无匹配时的提示文本。 @default "无匹配项" */
-  emptyText?: string;
-  /** 触发器宽度。 @default "w-panel-sm" */
-  className?: string;
-  /** 是否禁用。 */
-  disabled?: boolean;
-  /** 触发器尺寸。 @default "default" */
-  size?: 'sm' | 'default' | 'lg';
-}
-
-/**
- * 可搜索单选下拉 — Command + Popover 复合,等价 antd `AutoComplete` /
- * `Select showSearch` 的核心场景。
- *
- * 多选场景请直接用 Command + 自管 selected 数组(本组件刻意不做多选,保持
- * 单选语义清晰)。
- */
-const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
-  (
-    {
-      options,
-      value,
-      onChange,
-      placeholder = '请选择...',
-      searchPlaceholder = '搜索...',
-      emptyText = '无匹配项',
-      className,
-      disabled,
-      size = 'default',
-    },
-    ref,
-  ) => {
-    const [open, setOpen] = React.useState(false);
-    const selected = options.find((o) => o.value === value);
-
-    return (
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            ref={ref}
-            variant="outline"
-            size={size}
-            disabled={disabled}
-            role="combobox"
-            aria-expanded={open}
-            className={cn(
-              'w-panel-sm justify-between font-normal',
-              !value && 'text-muted-foreground',
-              className,
-            )}
-          >
-            {selected ? selected.label : placeholder}
-            <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-panel-sm p-0">
-          <Command>
-            <CommandInput placeholder={searchPlaceholder} />
-            <CommandList>
-              <CommandEmpty>{emptyText}</CommandEmpty>
-              <CommandGroup>
-                {options.map((opt) => (
-                  <CommandItem
-                    key={opt.value}
-                    value={opt.value}
-                    disabled={opt.disabled}
-                    onSelect={(v) => {
-                      onChange?.(v === value ? '' : v);
-                      setOpen(false);
-                    }}
-                  >
-                    <Check
-                      className={cn(
-                        'mr-2 size-4',
-                        opt.value === value ? 'opacity-100' : 'opacity-0',
-                      )}
-                    />
-                    {opt.label}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    );
-  },
-);
-Combobox.displayName = 'Combobox';
-
-export { Combobox };

package/src/components/input/demo/addon.tsx

@@ -1,15 +0,0 @@
-import { Input } from '@/components/ui/input';
-
-/**
- * 前后置标签：通过 `addonBefore` / `addonAfter` 形成 input-group。
- * 常用于域名拼接、协议前缀、单位后缀。
- */
-export default function Demo() {
-  return (
-    <div className="flex w-96 flex-col gap-3">
-      <Input addonBefore="https://" placeholder="example.com" />
-      <Input addonAfter=".teamix.com" placeholder="alice" />
-      <Input addonBefore="https://" addonAfter=".com" placeholder="my-site" />
-    </div>
-  );
-}

package/src/components/input/demo/basic.tsx

@@ -1,12 +0,0 @@
-import { Input } from '@/components/ui/input';
-
-/**
- * 最简用法：原生 input 的并集语义，直接当受控/非受控输入框使用。
- */
-export default function Demo() {
-  return (
-    <div className="w-80">
-      <Input placeholder="请输入用户名" />
-    </div>
-  );
-}

package/src/components/input/demo/clearable.tsx

@@ -1,21 +0,0 @@
-import { useState } from 'react';
-import { Input } from '@/components/ui/input';
-
-/**
- * 一键清空：受控时点 X 会触发 onChange("")，非受控时直接清掉 DOM 值并派发 input 事件。
- * 适合搜索框、过滤器场景。
- */
-export default function Demo() {
-  const [value, setValue] = useState('Teamix Evo');
-  return (
-    <div className="flex w-80 flex-col gap-3">
-      <Input
-        clearable
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        placeholder="受控 + clearable"
-      />
-      <Input clearable defaultValue="非受控示例" />
-    </div>
-  );
-}

package/src/components/input/demo/show-count.tsx

@@ -1,18 +0,0 @@
-import { Input } from '@/components/ui/input';
-
-/**
- * 字符计数：必须配合 `maxLength` 一起使用。
- * 适合给社交平台发文、签名等限长场景。
- */
-export default function Demo() {
-  return (
-    <div className="w-80">
-      <Input
-        showCount
-        maxLength={20}
-        defaultValue="hello teamix"
-        placeholder="最多 20 字"
-      />
-    </div>
-  );
-}

package/src/components/input/demo/sizes.tsx

@@ -1,15 +0,0 @@
-import { Input } from '@/components/ui/input';
-
-/**
- * 三种尺寸：sm / default / lg。
- * 高度通过 internal class 控制，不要再外部覆盖 `h-*`。
- */
-export default function Demo() {
-  return (
-    <div className="flex w-80 flex-col gap-3">
-      <Input size="sm" placeholder="Small" />
-      <Input size="default" placeholder="Default" />
-      <Input size="lg" placeholder="Large" />
-    </div>
-  );
-}

package/src/components/input/demo/with-prefix-suffix.tsx

@@ -1,19 +0,0 @@
-import { Search, Mail } from 'lucide-react';
-import { Input } from '@/components/ui/input';
-
-/**
- * 前置 / 后置图标：通过 `prefix` / `suffix` 传任意 ReactNode（图标或文本）。
- * 视觉对齐由组件内部处理，不要再额外用 padding 兼容图标。
- */
-export default function Demo() {
-  return (
-    <div className="flex w-80 flex-col gap-3">
-      <Input prefix={<Search />} placeholder="搜索..." />
-      <Input
-        prefix={<Mail />}
-        suffix={<span className="text-xs">@teamix.com</span>}
-        placeholder="alice"
-      />
-    </div>
-  );
-}

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 };