@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/button/button.tsx

@@ -1,462 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Loader2 } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-import { Tooltip } from '@/components/tooltip/tooltip';
-
-// ─── Button cva ──────────────────────────────────────────────────────────────
-
-/**
- * Button cva 配置 — 视觉与交互的全部档位均落在 OpenTrek tokens 上:
- * - 圆角 `rounded-md` 直接消费 Tailwind v4 标准 namespace token `--radius-md`,
- *   uni-manager 主题下 = 2px(对齐 cd corner.1 锐利风格);
- *   opentrek 主题下 = Tailwind v4 默认 0.375rem = 6px。
- *   注:不使用自定义 `--radius-button` 组件级别名,因 Tailwind v4 在多包 @import
- *   场景下不会为非标准 namespace token 自动派生 utility(实测 .rounded-button
- *   不生成);用标准档对齐主题语义即可,避免无谓的 @utility 注册。
- * - 高度 `h-6 / h-8 / h-9` 对应 24/32/36px(与 Input / Select 同档)
- * - 字重 `font-normal`(400)— cd hybridcloud Button 字重
- * - 颜色 `bg-primary / bg-destructive / ...` 全部走 design semantic tokens
- * - ghost / link 仅收紧左右 padding(ghost px-1 / link px-0),高度跟随主 size 档(h-6/h-8/h-9)
- *   与 cd hybridcloud text 按钮实际表现一致(高度不追加独立紧凑档,只去背景/边框)
- */
-const buttonVariants = cva(
-  'inline-flex cursor-pointer items-center justify-center gap-1 whitespace-nowrap font-normal rounded-md transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90 hover:shadow-md',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline:
-          'border border-input bg-background shadow-sm hover:bg-muted hover:text-foreground hover:shadow-md',
-        dashed:
-          'border border-dashed border-input bg-background shadow-sm hover:bg-muted hover:text-foreground hover:shadow-md',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4',
-      },
-      // ADR 0021 语义色 — 与 `variant` 双 prop 组合,覆盖语义而非视觉骨架。
-      // 典型组合: `variant="outline" color="destructive"` ⇒ 旧库 warning + outline 形态。
-      color: {
-        default: '',
-        primary: '',
-        destructive: '',
-      },
-      size: {
-        // 24px — 紧凑场景(表格行内、密集工具条),对齐 cd small
-        sm: 'h-6 px-3 text-xs',
-        // 32px — 默认 / 表单基线;`md` 与 `default` 等价(向后兼容旧 API)
-        // 字号对齐 cd hybridcloud --form-element-medium-font-size: 12px (ADR 0027)
-        md: 'h-8 px-3 text-xs',
-        default: 'h-8 px-3 text-xs',
-        // 36px — 强调主操作 / 落地页
-        lg: 'h-9 px-3 text-sm',
-        // 32px 正方形 — 纯图标按钮(配合 shape="circle" / "square")
-        icon: 'h-8 w-8',
-      },
-      shape: {
-        default: '',
-        // antd 兼容:`round` = 全圆角矩形
-        round: 'rounded-full',
-        // 等宽等高圆形 — 独立使用时常配 size="icon";SplitButton trigger 可省略 size 继承 group
-        circle: 'rounded-full aspect-square p-0',
-        // 等宽等高方形 — 独立使用时常配 size="icon";SplitButton trigger 可省略 size 继承 group
-        square: 'aspect-square p-0',
-      },
-      block: {
-        true: 'w-full',
-        false: '',
-      },
-      // 仅 icon、无 children 时收紧水平 padding,避免视觉过宽
-      iconOnly: {
-        true: 'px-0',
-        false: '',
-      },
-    },
-    compoundVariants: [
-      // size=icon 时强制方形,无需手动 px
-      { size: 'icon', className: 'p-0' },
-
-      // ─── color × variant 语义覆盖(ADR 0021) ────────────────────────────
-      // outline + destructive ⇒ 旧库 warning+outline:边线 / 文字红,背景透明
-      {
-        variant: 'outline',
-        color: 'destructive',
-        className:
-          'border-destructive text-destructive hover:bg-destructive/10 hover:text-destructive',
-      },
-      // ghost + destructive ⇒ 删除类危险操作的轻量按钮(hover 背景走中性灰,对齐 cd hybridcloud)
-      {
-        variant: 'ghost',
-        color: 'destructive',
-        className: 'text-destructive hover:bg-muted',
-      },
-      // link + destructive ⇒ 链接式危险操作
-      {
-        variant: 'link',
-        color: 'destructive',
-        className: 'text-destructive',
-      },
-
-      // text 形态(ghost / link) 水平 padding 收紧;高度跟随主 size 档(h-6/h-8/h-9),
-      // 与 cd hybridcloud text 按钮实际表现一致(早期版本曾加独立 18/20px 紧凑档,D1 决策删除)
-      {
-        variant: 'ghost',
-        size: 'sm',
-        className: 'px-1',
-      },
-      {
-        variant: 'ghost',
-        size: 'md',
-        className: 'px-1',
-      },
-      {
-        variant: 'ghost',
-        size: 'default',
-        className: 'px-1',
-      },
-      {
-        variant: 'ghost',
-        size: 'lg',
-        className: 'px-1',
-      },
-      {
-        variant: 'link',
-        size: 'sm',
-        className: 'px-0',
-      },
-      {
-        variant: 'link',
-        size: 'md',
-        className: 'px-0',
-      },
-      {
-        variant: 'link',
-        size: 'default',
-        className: 'px-0',
-      },
-      {
-        variant: 'link',
-        size: 'lg',
-        className: 'px-0',
-      },
-    ],
-    defaultVariants: {
-      variant: 'default',
-      color: 'default',
-      size: 'default',
-      shape: 'default',
-      block: false,
-      iconOnly: false,
-    },
-  },
-);
-
-export type ButtonVariant =
-  | 'default'
-  | 'secondary'
-  | 'destructive'
-  | 'outline'
-  | 'dashed'
-  | 'ghost'
-  | 'link';
-export type ButtonColor = 'default' | 'primary' | 'destructive';
-export type ButtonSize = 'sm' | 'md' | 'default' | 'lg' | 'icon';
-export type ButtonShape = 'default' | 'round' | 'circle' | 'square';
-
-// ─── ButtonGroup Context — 把 size 自顶向下注入子 Button ─────────────────────
-
-interface ButtonGroupContextValue {
-  /** 由 `<ButtonGroup size>` 注入,子 Button 未显式传 size 时回退到此值。 */
-  size?: ButtonSize;
-}
-
-const ButtonGroupContext = React.createContext<ButtonGroupContextValue | null>(
-  null,
-);
-
-// ─── Button ──────────────────────────────────────────────────────────────────
-
-export interface ButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,
-    VariantProps<typeof buttonVariants> {
-  /**
-   * 视觉风格,语义按 design token 走。
-   * @default "default"
-   */
-  variant?: ButtonVariant;
-  /**
-   * 语义色(ADR 0021)。与 `variant` 双 prop 组合表达"语义 × 视觉"两个维度,
-   * 例:`variant="outline" color="destructive"` 实现旧库 warning+outline 形态;
-   * `variant="ghost" color="destructive"` 实现轻量危险删除按钮。
-   * @default "default"
-   */
-  color?: ButtonColor;
-  /**
-   * 尺寸。`md` 与 `default` 等价,`icon` 为正方形纯图标按钮。
-   * 若包在 `<ButtonGroup size="..">` 中且本地未显式传值,自动继承 group 的 size。
-   * @default "default"
-   */
-  size?: ButtonSize;
-  /**
-   * 形状。`circle` / `square` 必须配 `size="icon"`。
-   * @default "default"
-   */
-  shape?: ButtonShape;
-  /**
-   * `true` 时撑满父容器宽度。
-   * @default false
-   */
-  block?: boolean;
-  /**
-   * 用 Radix Slot 模式渲染为子元素;此时 `loading` / `icon` / `iconRight` 被忽略。
-   * @default false
-   */
-  asChild?: boolean;
-  /**
-   * 显示自旋 spinner,自动 `disabled` + `aria-busy=true`,保留视觉宽度。
-   * @default false
-   */
-  loading?: boolean;
-  /**
-   * 文本左侧图标。推荐 `lucide-react`。loading 时被 spinner 替换。
-   */
-  icon?: React.ReactNode;
-  /**
-   * 文本右侧图标。推荐 `lucide-react`。
-   */
-  iconRight?: React.ReactNode;
-  /**
-   * 兼容旧 API:`icon` 相对文本的位置;新代码请直接使用 `icon` / `iconRight` 双 slot。
-   * @default "start"
-   * @deprecated 使用 `icon` 与 `iconRight` 双 slot。
-   */
-  iconPosition?: 'start' | 'end';
-  /**
-   * `disabled=true` 时的禁用解释文本。仅在 `disabled` 同时存在时生效:
-   * 内部包一层 `cursor-not-allowed` wrapper + Tooltip,把 button pointer-events 关闭后由 wrapper 拾取 hover。
-   * 不传则保持原生 disabled 行为。
-   */
-  disabledTooltip?: React.ReactNode;
-  /** 按钮文本 / 内容。 */
-  children?: React.ReactNode;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      color,
-      size,
-      shape,
-      block,
-      asChild = false,
-      loading = false,
-      icon,
-      iconRight,
-      iconPosition = 'start',
-      disabled,
-      disabledTooltip,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    // ButtonGroup 注入的 size 在本地未显式传值时生效
-    const groupCtx = React.useContext(ButtonGroupContext);
-    const resolvedSize = size ?? groupCtx?.size;
-
-    // 兼容旧 API:iconPosition="end" 时把 icon 视作 iconRight(若 iconRight 未显式传)
-    const resolvedIcon =
-      iconPosition === 'end' && !iconRight ? undefined : icon;
-    const resolvedIconRight =
-      iconPosition === 'end' && !iconRight ? icon : iconRight;
-
-    // icon-only 检测:无 children + 至少一个 icon slot,适合收紧 padding
-    const isIconOnly =
-      (children == null || children === false || children === '') &&
-      (resolvedIcon != null || resolvedIconRight != null || loading);
-
-    const composedClassName = cn(
-      buttonVariants({
-        variant,
-        color,
-        size: resolvedSize,
-        shape,
-        block,
-        iconOnly: isIconOnly,
-        className,
-      }),
-    );
-
-    if (asChild) {
-      return (
-        <Slot ref={ref} className={composedClassName} {...props}>
-          {children}
-        </Slot>
-      );
-    }
-
-    const leadingNode = loading ? (
-      <Loader2
-        className="animate-spin motion-reduce:animate-none"
-        aria-hidden="true"
-      />
-    ) : (
-      resolvedIcon
-    );
-
-    const buttonEl = (
-      <button
-        ref={ref}
-        className={composedClassName}
-        disabled={disabled || loading}
-        aria-busy={loading || undefined}
-        {...props}
-      >
-        {leadingNode}
-        {children}
-        {resolvedIconRight}
-      </button>
-    );
-
-    // 禁用 + 提示文案 ⇒ 用 cursor-not-allowed wrapper 拾取 hover,关闭 button pointer-events
-    if (disabled && disabledTooltip != null) {
-      return (
-        <Tooltip title={disabledTooltip} withProvider>
-          <span className="inline-block cursor-not-allowed">
-            {React.cloneElement(buttonEl, {
-              className: cn(composedClassName, 'pointer-events-none'),
-            })}
-          </span>
-        </Tooltip>
-      );
-    }
-
-    return buttonEl;
-  },
-);
-Button.displayName = 'Button';
-
-// ─── ButtonGroup ─────────────────────────────────────────────────────────────
-
-const buttonGroupVariants = cva('inline-flex isolate', {
-  variants: {
-    orientation: {
-      horizontal:
-        'flex-row [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:-ml-px hover:[&>*]:z-10 focus-visible:[&>*]:z-10',
-      vertical:
-        'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:first-child)]:-mt-px hover:[&>*]:z-10 focus-visible:[&>*]:z-10',
-    },
-    attached: {
-      true: '',
-      false: 'gap-2',
-    },
-  },
-  defaultVariants: { orientation: 'horizontal', attached: true },
-});
-
-export interface ButtonGroupProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof buttonGroupVariants> {
-  /**
-   * 排列方向。
-   * @default "horizontal"
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * 是否把按钮"粘"在一起去除边距(antd `Space.Compact` 等价行为)— `false` 时按钮间留 8px gap。
-   * @default true
-   */
-  attached?: boolean;
-  /**
-   * 统一下发给子 Button 的尺寸;子 Button 若显式传了 `size` 则以子值优先。
-   * 通过 React.Context 注入,跨 Slot 透传无效(asChild 自定义渲染不会拿到)。
-   */
-  size?: ButtonSize;
-}
-
-/**
- * 按钮组容器 — 语义类似 antd `Space.Compact`(v6 替代旧 `Button.Group`):
- * 把多个 `Button` / `Input` 包在一起共享边线,典型场景:
- *   - Split button(左主操作 + 右下拉箭头)
- *   - Toolbar(同语义按钮集合)
- *   - Input + 按钮拼装(`<Input/><Button>搜索</Button>`)
- *
- * 通过 `size` prop + React.Context 把尺寸自顶向下注入未显式传 size 的子 Button。
- */
-const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
-  ({ orientation, attached, size, className, children, ...props }, ref) => {
-    const ctxValue = React.useMemo<ButtonGroupContextValue>(
-      () => ({ size }),
-      [size],
-    );
-
-    return (
-      <ButtonGroupContext.Provider value={ctxValue}>
-        <div
-          ref={ref}
-          role="group"
-          className={cn(
-            buttonGroupVariants({ orientation, attached }),
-            className,
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </ButtonGroupContext.Provider>
-    );
-  },
-);
-ButtonGroup.displayName = 'ButtonGroup';
-
-// ─── ButtonGroupText(antd-style addon text)─────────────────────────────────
-
-/**
- * ButtonGroupText 的高度走与 Button 一致的 size 档,通过 ButtonGroupContext 读取;
- * 不在 Group 内时回退到 default(32px),不再写死 `h-9`(36px),修复跟 Button 默认尺寸不齐的 bug。
- */
-const buttonGroupTextSizeClassMap: Record<ButtonSize, string> = {
-  sm: 'h-6 text-xs',
-  md: 'h-8 text-xs',
-  default: 'h-8 text-xs',
-  lg: 'h-9 text-sm',
-  // icon 在 addon 文本场景无意义,回退到 default
-  icon: 'h-8 text-xs',
-};
-
-const ButtonGroupText = React.forwardRef<
-  HTMLSpanElement,
-  React.HTMLAttributes<HTMLSpanElement>
->(({ className, ...props }, ref) => {
-  const groupCtx = React.useContext(ButtonGroupContext);
-  const sizeCls = buttonGroupTextSizeClassMap[groupCtx?.size ?? 'default'];
-  return (
-    <span
-      ref={ref}
-      className={cn(
-        'inline-flex select-none items-center border border-input bg-muted px-3 text-muted-foreground',
-        sizeCls,
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-ButtonGroupText.displayName = 'ButtonGroupText';
-
-export {
-  Button,
-  ButtonGroup,
-  ButtonGroupText,
-  ButtonGroupContext,
-  buttonVariants,
-  buttonGroupVariants,
-};

package/src/components/button/demo/as-child.tsx

@@ -1,24 +0,0 @@
-import { Button } from '@/components/ui/button';
-
-/**
- * asChild：用 Radix Slot 渲染为子元素（如 `<a>` / 路由 Link）。
- * 此时 `loading` / `icon` prop 会被忽略，因为底层不再是 `<button>`。
- */
-export default function Demo() {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button asChild variant="link">
-        <a href="/ui/components/button">查看文档</a>
-      </Button>
-      <Button asChild>
-        <a
-          href="https://github.com/teamix-evo/teamix-evo"
-          target="_blank"
-          rel="noreferrer"
-        >
-          GitHub 仓库
-        </a>
-      </Button>
-    </div>
-  );
-}

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

@@ -1,8 +0,0 @@
-import { Button } from '@/components/ui/button';
-
-/**
- * 最简用法：默认 variant + 默认 size。
- */
-export default function Demo() {
-  return <Button>提交</Button>;
-}

package/src/components/button/demo/block.tsx

@@ -1,16 +0,0 @@
-import { Button } from '@/components/ui/button';
-
-/**
- * 块级按钮：撑满父容器宽度。
- * 不要再额外加 `className="w-full"` 重复声明。
- */
-export default function Demo() {
-  return (
-    <div className="flex w-80 flex-col gap-3">
-      <Button block>登录</Button>
-      <Button block variant="outline">
-        注册
-      </Button>
-    </div>
-  );
-}

package/src/components/button/demo/loading.tsx

@@ -1,19 +0,0 @@
-import { Button } from '@/components/ui/button';
-
-/**
- * Loading 状态：自动 disabled，spinner 替换 icon 占位，按钮宽度保持。
- * 写 `loading` 即可，不要额外加 `disabled`。
- */
-export default function Demo() {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button loading>提交中</Button>
-      <Button variant="secondary" loading>
-        加载
-      </Button>
-      <Button variant="destructive" loading>
-        删除中
-      </Button>
-    </div>
-  );
-}

package/src/components/button/demo/shapes.tsx

@@ -1,18 +0,0 @@
-import { X } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-
-/**
- * 三种形状：default / round / circle。
- * circle 必须配 `size="icon"`，否则视觉会扁圆变形。
- */
-export default function Demo() {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button>Default</Button>
-      <Button shape="round">Round</Button>
-      <Button shape="circle" size="icon" variant="ghost" aria-label="关闭">
-        <X />
-      </Button>
-    </div>
-  );
-}

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

@@ -1,19 +0,0 @@
-import { Plus } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-
-/**
- * 四种尺寸：sm / default / lg / icon。
- * icon 为正方形纯图标按钮，配合 `size="icon"` 使用。
- */
-export default function Demo() {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button size="sm">Small</Button>
-      <Button size="default">Default</Button>
-      <Button size="lg">Large</Button>
-      <Button size="icon" aria-label="Add">
-        <Plus />
-      </Button>
-    </div>
-  );
-}

package/src/components/button/demo/variants.tsx

@@ -1,19 +0,0 @@
-import { Button } from '@/components/ui/button';
-
-/**
- * 七种 variant：default / secondary / destructive / outline / dashed / ghost / link。
- * 视觉差异由 OpenTrek semantic tokens 决定，无任何 mock 值。
- */
-export default function Demo() {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button>Default</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="destructive">Destructive</Button>
-      <Button variant="outline">Outline</Button>
-      <Button variant="dashed">Dashed</Button>
-      <Button variant="ghost">Ghost</Button>
-      <Button variant="link">Link</Button>
-    </div>
-  );
-}

package/src/components/button/demo/with-icon.tsx

@@ -1,20 +0,0 @@
-import { ChevronRight, Download } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-
-/**
- * 带图标按钮：通过 `icon` prop 传入 lucide-react 节点；
- * 用 `iconPosition` 切换图标位置（默认 start）。
- */
-export default function Demo() {
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button icon={<Download />}>下载</Button>
-      <Button icon={<ChevronRight />} iconPosition="end">
-        下一步
-      </Button>
-      <Button variant="outline" icon={<Download />}>
-        Outline + Icon
-      </Button>
-    </div>
-  );
-}