@teamix-evo/ui 0.1.1 → 0.3.0

package/src/components/button/button.tsx

@@ -4,50 +4,184 @@ 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 items-center justify-center gap-2 whitespace-nowrap text-sm font-medium 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',
+  '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',
+          '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-accent hover:text-accent-foreground',
+          '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-accent hover:text-accent-foreground',
+          '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 hover:underline',
+        link: 'text-primary underline-offset-4',
+      },
+      // ADR 0021 语义色 — 与 `variant` 双 prop 组合,覆盖语义而非视觉骨架。
+      // 典型组合: `variant="outline" color="destructive"` ⇒ 旧库 warning + outline 形态。
+      color: {
+        default: '',
+        primary: '',
+        destructive: '',
       },
       size: {
-        sm: 'h-8 px-3 text-xs',
-        default: 'h-9 px-4 py-2',
-        lg: 'h-10 px-8',
-        icon: 'h-9 w-9',
+        // 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: 'rounded-md',
+        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> {
@@ -55,48 +189,60 @@ export interface ButtonProps
    * 视觉风格,语义按 design token 走。
    * @default "default"
    */
-  variant?:
-    | 'default'
-    | 'secondary'
-    | 'destructive'
-    | 'outline'
-    | 'dashed'
-    | 'ghost'
-    | 'link';
+  variant?: ButtonVariant;
   /**
-   * 尺寸,`icon` 为正方形纯图标按钮。
+   * 语义色(ADR 0021)。与 `variant` 双 prop 组合表达"语义 × 视觉"两个维度,
+   * 例:`variant="outline" color="destructive"` 实现旧库 warning+outline 形态;
+   * `variant="ghost" color="destructive"` 实现轻量危险删除按钮。
    * @default "default"
    */
-  size?: 'sm' | 'default' | 'lg' | 'icon';
+  color?: ButtonColor;
   /**
-   * 形状,`circle` 配 `size="icon"` 得圆形按钮。
+   * 尺寸。`md` 与 `default` 等价,`icon` 为正方形纯图标按钮。
+   * 若包在 `<ButtonGroup size="..">` 中且本地未显式传值,自动继承 group 的 size。
    * @default "default"
    */
-  shape?: 'default' | 'round' | 'circle';
+  size?: ButtonSize;
+  /**
+   * 形状。`circle` / `square` 必须配 `size="icon"`。
+   * @default "default"
+   */
+  shape?: ButtonShape;
   /**
    * `true` 时撑满父容器宽度。
    * @default false
    */
   block?: boolean;
   /**
-   * 用 Radix Slot 模式渲染为子元素;此时 `loading` / `icon` 被忽略。
+   * 用 Radix Slot 模式渲染为子元素;此时 `loading` / `icon` / `iconRight` 被忽略。
    * @default false
    */
   asChild?: boolean;
   /**
-   * 显示自旋 spinner,自动 disabled,保留视觉宽度。
+   * 显示自旋 spinner,自动 `disabled` + `aria-busy=true`,保留视觉宽度。
    * @default false
    */
   loading?: boolean;
   /**
-   * 前置 / 后置图标(来自 `lucide-react`)。loading 时被 spinner 替换。
+   * 文本左侧图标。推荐 `lucide-react`。loading 时被 spinner 替换。
    */
   icon?: React.ReactNode;
   /**
-   * 图标 / spinner 相对文本的位置。
+   * 文本右侧图标。推荐 `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;
 }
@@ -106,21 +252,47 @@ 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, size, shape, block, className }),
+      buttonVariants({
+        variant,
+        color,
+        size: resolvedSize,
+        shape,
+        block,
+        iconOnly: isIconOnly,
+        className,
+      }),
     );
 
     if (asChild) {
@@ -131,16 +303,16 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       );
     }
 
-    const leading = loading ? (
+    const leadingNode = loading ? (
       <Loader2
         className="animate-spin motion-reduce:animate-none"
         aria-hidden="true"
       />
     ) : (
-      icon
+      resolvedIcon
     );
 
-    return (
+    const buttonEl = (
       <button
         ref={ref}
         className={composedClassName}
@@ -148,13 +320,143 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         aria-busy={loading || undefined}
         {...props}
       >
-        {iconPosition === 'start' && leading}
+        {leadingNode}
         {children}
-        {iconPosition === 'end' && leading}
+        {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';
 
-export { Button, buttonVariants };
+// ─── 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

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

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

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+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>
+  );
+}