@teamix-evo/ui 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamix-evo/ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Source-injected UI components for Teamix Evo (shadcn-based, antd capabilities)",
   "type": "module",
   "files": [
@@ -51,9 +51,9 @@
     "vite": "^5.4.0",
     "vite-tsconfig-paths": "^6.1.1",
     "zod": "^3",
+    "@teamix-evo/registry": "0.9.0",
     "@teamix-evo/eslint-config": "0.2.3",
-    "@teamix-evo/tokens": "^0.7.0",
-    "@teamix-evo/registry": "0.7.0"
+    "@teamix-evo/tokens": "^0.7.1"
   },
   "publishConfig": {
     "access": "public",
@@ -76,6 +76,8 @@
     "build": "echo 'pure resource package, no build needed'",
     "gen:theme-overrides": "tsx .storybook/gen-theme-overrides.ts",
     "storybook": "pnpm gen:theme-overrides && storybook dev -p 6006",
-    "build-storybook": "pnpm gen:theme-overrides && storybook build"
+    "build-storybook": "pnpm gen:theme-overrides && storybook build",
+    "compare": "tsx compare/start.ts",
+    "compare:matrix": "tsx compare/scripts/extract-styles-matrix.ts && tsx compare/scripts/generate-style-mapping.ts"
   }
 }

package/src/components/button/index.tsx

@@ -19,7 +19,7 @@ import { Spinner } from '@/components/spinner';
 // ─── Button cva ─────────────────────────────────────────────────────────────
 //
 // 视觉由 token 驱动，组件只用语义 utility：
-// - 圆角 `rounded-md`：opentrek=8px / uni-manager=2px
+// - 圆角 `rounded-md`：走 --radius-md（opentrek=8px / uni-manager=2px），各变体 theme.css 驱动
 // - focus ring `ring-ring`：opentrek=品牌色 halo / uni-manager=transparent
 // - shadow：组件不写，uni-manager 通过 theme.css scoped CSS [data-slot='button'] 注入
 
@@ -39,7 +39,7 @@ const buttonVariants = cva(
         dashed:
           'border border-dashed border-input bg-card hover:bg-muted hover:text-foreground aria-expanded:bg-muted',
         ghost:
-          'hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground',
+          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground',
         link: 'text-primary hover:text-primary-hover',
       },
       // 语义色 — 与 variant 双 prop 组合

package/src/components/button/stories.tsx

@@ -84,6 +84,9 @@ export const IconOnly: Story = {
       <Button size="icon-lg" aria-label="bell">
         <BellIcon />
       </Button>
+      <Button size="icon" variant="link" aria-label="mail">
+        <MailIcon />
+      </Button>
     </div>
   ),
 };

package/src/components/data-table/index.tsx

@@ -442,17 +442,22 @@ function ColumnFilterPopover({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <button
-          type="button"
+        <span
+          role="button"
           aria-label="过滤"
+          tabIndex={-1}
           className={cn(
-            'inline-flex size-5 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground',
+            'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground',
             active && 'text-primary',
           )}
+          onPointerDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
           onClick={(e) => e.stopPropagation()}
         >
           <FilterIcon className="size-3.5" />
-        </button>
+        </span>
       </PopoverTrigger>
       <PopoverContent align="start" className="w-44 gap-2 p-2">
         {mode === 'multiple' ? (
@@ -498,7 +503,7 @@ function ColumnFilterPopover({
           </RadioGroup>
         )}
         <div className="mt-1 flex justify-end gap-2 border-t border-border pt-2">
-          <Button variant="ghost" size="sm" onClick={handleReset}>
+          <Button variant="outline" size="sm" onClick={handleReset}>
             重置
           </Button>
           <Button size="sm" onClick={handleConfirm}>

package/src/components/input/index.tsx

@@ -17,7 +17,7 @@ import { cn } from '@/lib/utils';
 // ─── Input cva ──────────────────────────────────────────────────────────────
 
 const inputVariants = cva(
-  'w-full min-w-0 cursor-text rounded-md border border-input bg-transparent font-normal transition-colors outline-none file:inline-flex file:cursor-pointer file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20',
+  'w-full min-w-0 cursor-text rounded-md border border-input bg-transparent font-normal transition-colors outline-none file:inline-flex file:cursor-pointer file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20',
   {
     variants: {
       size: {

package/src/components/input-group/index.tsx

@@ -163,10 +163,7 @@ function InputGroupTextarea({
 // ─── InputGroupClear ──────────────────────────────────────────────────────────────
 
 export interface InputGroupClearProps
-  extends Omit<
-    React.ComponentProps<typeof InputGroupButton>,
-    'children' | 'aria-label'
-  > {
+  extends Omit<React.ComponentProps<'span'>, 'children'> {
   /** 是否显示。受控用法下一般绑定 `value.length > 0`。 @default true */
   visible?: boolean;
   /** 无障碍 label。 @default '清除' */
@@ -181,32 +178,36 @@ function InputGroupClear({
   visible = true,
   className,
   'aria-label': ariaLabel = '清除',
+  onClick,
   ...props
 }: InputGroupClearProps) {
   if (!visible) return null;
   return (
-    <InputGroupButton
-      data-slot="input-group-clear"
-      size="icon-xs"
+    <span
+      role="button"
       aria-label={ariaLabel}
+      tabIndex={-1}
+      data-slot="input-group-clear"
+      onPointerDown={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      onClick={onClick}
       className={cn(
-        'text-muted-foreground hover:bg-transparent hover:text-foreground',
+        'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground',
         className,
       )}
       {...props}
     >
-      <XIcon />
-    </InputGroupButton>
+      <XIcon className="size-3.5" />
+    </span>
   );
 }
 
 // ─── InputGroupPasswordToggle ───────────────────────────────────────────────────────
 
 export interface InputGroupPasswordToggleProps
-  extends Omit<
-    React.ComponentProps<typeof InputGroupButton>,
-    'children' | 'onClick'
-  > {
+  extends Omit<React.ComponentProps<'span'>, 'children' | 'onClick'> {
   /** 当前密码是否可见。 */
   visible: boolean;
   /** 切换可见性，由父级同步修改 `<InputGroupInput type>` 。 */
@@ -224,20 +225,29 @@ function InputGroupPasswordToggle({
   ...props
 }: InputGroupPasswordToggleProps) {
   return (
-    <InputGroupButton
-      data-slot="input-group-password-toggle"
-      size="icon-xs"
+    <span
+      role="button"
       aria-label={visible ? '隐藏密码' : '显示密码'}
       aria-pressed={visible}
+      tabIndex={-1}
+      data-slot="input-group-password-toggle"
+      onPointerDown={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
       onClick={() => onVisibleChange(!visible)}
       className={cn(
-        'text-muted-foreground hover:bg-transparent hover:text-foreground',
+        'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground',
         className,
       )}
       {...props}
     >
-      {visible ? <EyeOffIcon /> : <EyeIcon />}
-    </InputGroupButton>
+      {visible ? (
+        <EyeOffIcon className="size-3.5" />
+      ) : (
+        <EyeIcon className="size-3.5" />
+      )}
+    </span>
   );
 }
 

package/src/components/item/meta.md

@@ -16,20 +16,20 @@
 - 图文卡片（horizontal 布局）
 - 通知/消息列表
 - 带操作的资源列表
-- 组合结构：ItemGroup [bordered] [divider] > ItemGroupHeader + Item* > ItemMedia + ItemContent (> ItemTitle + ItemDescription) + ItemExtra + ItemActions [separated] > ItemGroupFooter
+- 组合结构：ItemGroup [bordered] [divider] > ItemGroupHeader + Item\* > ItemMedia + ItemContent (> ItemTitle + ItemDescription) + ItemExtra + ItemActions [separated] > ItemGroupFooter
 
 ## Props
 
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `bordered` | `"true" \| "false"` | – | – | – |
-| `divider` | `"true" \| "false"` | – | – | – |
-| `variant` | `"default" \| "outline" \| "muted"` | `"default"` | – | – |
-| `size` | `"default" \| "sm" \| "xs"` | `"default"` | – | – |
-| `layout` | `"vertical" \| "horizontal"` | `"vertical"` | – | – |
-| `asChild` | `boolean` | – | – | 使用 Slot 模式渲染子元素 |
-| `variant` | `"default" \| "icon" \| "image" \| "cover"` | `"default"` | – | – |
-| `separated` | `boolean` | – | – | 子元素之间自动插入竖向分隔线 |
+| 名称        | 类型                                        | 默认值       | 必填 | 说明                         |
+| ----------- | ------------------------------------------- | ------------ | ---- | ---------------------------- |
+| `bordered`  | `"true" \| "false"`                         | –            | –    | –                            |
+| `divider`   | `"true" \| "false"`                         | –            | –    | –                            |
+| `variant`   | `"default" \| "outline" \| "muted"`         | `"default"`  | –    | –                            |
+| `size`      | `"default" \| "sm" \| "xs"`                 | `"default"`  | –    | –                            |
+| `layout`    | `"vertical" \| "horizontal"`                | `"vertical"` | –    | –                            |
+| `asChild`   | `boolean`                                   | –            | –    | 使用 Slot 模式渲染子元素     |
+| `variant`   | `"default" \| "icon" \| "image" \| "cover"` | `"default"`  | –    | –                            |
+| `separated` | `boolean`                                   | –            | –    | 子元素之间自动插入竖向分隔线 |
 
 ## 示例
 
@@ -127,18 +127,10 @@
       <span className="text-xs text-muted-foreground">3 小时前更新</span>
     </ItemContent>
     <ItemActions>
-      <Button
-        size="sm"
-        variant="ghost"
-        className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-      >
+      <Button size="sm" variant="link" className="text-muted-foreground">
         编辑
       </Button>
-      <Button
-        size="sm"
-        variant="ghost"
-        className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-      >
+      <Button size="sm" variant="link" className="text-muted-foreground">
         删除
       </Button>
     </ItemActions>
@@ -159,18 +151,10 @@
       <span className="text-xs text-muted-foreground">1 天前更新</span>
     </ItemContent>
     <ItemActions>
-      <Button
-        size="sm"
-        variant="ghost"
-        className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-      >
+      <Button size="sm" variant="link" className="text-muted-foreground">
         编辑
       </Button>
-      <Button
-        size="sm"
-        variant="ghost"
-        className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-      >
+      <Button size="sm" variant="link" className="text-muted-foreground">
         删除
       </Button>
     </ItemActions>
@@ -221,26 +205,18 @@ Actions 自动分隔
     <ItemDescription>点击操作按钮管理</ItemDescription>
   </ItemContent>
   <ItemActions separated>
-    <Button
-      size="sm"
-      variant="ghost"
-      className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-    >
+    <Button size="sm" variant="link" className="text-muted-foreground">
       <PencilIcon />
       编辑
     </Button>
-    <Button
-      size="sm"
-      variant="ghost"
-      className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-    >
+    <Button size="sm" variant="link" className="text-muted-foreground">
       <BookmarkIcon />
       收藏
     </Button>
     <Button
       size="sm"
-      variant="ghost"
-      className="text-destructive hover:bg-transparent hover:text-destructive/80"
+      variant="link"
+      className="text-destructive hover:text-destructive/80"
     >
       <TrashIcon />
       删除
@@ -314,11 +290,7 @@ Actions 自动分隔
   </Item>
   <ItemGroupFooter>
     <span>共 2 条通知</span>
-    <Button
-      size="sm"
-      variant="ghost"
-      className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-    >
+    <Button size="sm" variant="link" className="text-muted-foreground">
       查看全部
     </Button>
   </ItemGroupFooter>
@@ -344,11 +316,7 @@ Actions 自动分隔
   </ItemContent>
   <ItemFooter>
     <span>截止：2025-01-15</span>
-    <Button
-      size="sm"
-      variant="ghost"
-      className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-    >
+    <Button size="sm" variant="link" className="text-muted-foreground">
       查看
     </Button>
   </ItemFooter>

package/src/components/item/stories.tsx

@@ -51,7 +51,7 @@ export const Default: Story = {
           <Button
             size="icon-sm"
             variant="ghost"
-            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+            className="text-muted-foreground"
           >
             <MoreHorizontalIcon />
           </Button>
@@ -69,7 +69,7 @@ export const Default: Story = {
           <Button
             size="icon-sm"
             variant="ghost"
-            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+            className="text-muted-foreground"
           >
             <MoreHorizontalIcon />
           </Button>
@@ -169,18 +169,10 @@ export const Horizontal: Story = {
           <span className="text-xs text-muted-foreground">3 小时前更新</span>
         </ItemContent>
         <ItemActions>
-          <Button
-            size="sm"
-            variant="ghost"
-            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-          >
+          <Button size="sm" variant="link" className="text-muted-foreground">
             编辑
           </Button>
-          <Button
-            size="sm"
-            variant="ghost"
-            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-          >
+          <Button size="sm" variant="link" className="text-muted-foreground">
             删除
           </Button>
         </ItemActions>
@@ -201,18 +193,10 @@ export const Horizontal: Story = {
           <span className="text-xs text-muted-foreground">1 天前更新</span>
         </ItemContent>
         <ItemActions>
-          <Button
-            size="sm"
-            variant="ghost"
-            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-          >
+          <Button size="sm" variant="link" className="text-muted-foreground">
             编辑
           </Button>
-          <Button
-            size="sm"
-            variant="ghost"
-            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-          >
+          <Button size="sm" variant="link" className="text-muted-foreground">
             删除
           </Button>
         </ItemActions>
@@ -261,26 +245,18 @@ export const ActionsSeparated: Story = {
         <ItemDescription>点击操作按钮管理</ItemDescription>
       </ItemContent>
       <ItemActions separated>
-        <Button
-          size="sm"
-          variant="ghost"
-          className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-        >
+        <Button size="sm" variant="link" className="text-muted-foreground">
           <PencilIcon />
           编辑
         </Button>
-        <Button
-          size="sm"
-          variant="ghost"
-          className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-        >
+        <Button size="sm" variant="link" className="text-muted-foreground">
           <BookmarkIcon />
           收藏
         </Button>
         <Button
           size="sm"
-          variant="ghost"
-          className="text-destructive hover:bg-transparent hover:text-destructive/80"
+          variant="link"
+          className="text-destructive hover:text-destructive/80"
         >
           <TrashIcon />
           删除
@@ -352,11 +328,7 @@ export const GroupWithHeaderFooter: Story = {
       </Item>
       <ItemGroupFooter>
         <span>共 2 条通知</span>
-        <Button
-          size="sm"
-          variant="ghost"
-          className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-        >
+        <Button size="sm" variant="link" className="text-muted-foreground">
           查看全部
         </Button>
       </ItemGroupFooter>
@@ -381,11 +353,7 @@ export const WithHeaderFooter: Story = {
       </ItemContent>
       <ItemFooter>
         <span>截止：2025-01-15</span>
-        <Button
-          size="sm"
-          variant="ghost"
-          className="text-muted-foreground hover:bg-transparent hover:text-foreground"
-        >
+        <Button size="sm" variant="link" className="text-muted-foreground">
           查看
         </Button>
       </ItemFooter>

package/src/components/table/index.tsx

@@ -176,11 +176,15 @@ function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
 // ─── TableBody ──────────────────────────────────────────────────────────────
 
 function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
-  const { striped } = useTableContext();
+  const { striped, bordered } = useTableContext();
   return (
     <tbody
       data-slot="table-body"
-      className={cn(striped && '[&_tr:nth-child(even)]:bg-muted/30', className)}
+      className={cn(
+        striped && '[&_tr:nth-child(even)]:bg-muted/30',
+        bordered && '[&>tr:last-child]:border-b-0',
+        className,
+      )}
       {...props}
     />
   );

package/src/components/transfer/index.tsx

@@ -328,10 +328,7 @@ function TransferPanel({
 
       {/* Search */}
       {showSearch ? (
-        <div
-          data-slot="transfer-search"
-          className="px-2 pt-1.5 pb-2"
-        >
+        <div data-slot="transfer-search" className="px-2 pt-1.5 pb-2">
           <Input
             value={search}
             disabled={disabled}
@@ -404,17 +401,22 @@ function TransferPanel({
                 ) : null}
                 <div className="min-w-0 flex-1">{renderItemContent(item)}</div>
                 {showRemove ? (
-                  <Button
-                    size="icon-sm"
-                    variant="ghost"
-                    className="opacity-0 group-hover/transfer-item:opacity-100"
+                  <span
+                    role="button"
+                    aria-label="移除"
+                    tabIndex={-1}
+                    onPointerDown={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
                     onClick={(e) => {
                       e.stopPropagation();
                       onItemRemove?.(item.key);
                     }}
+                    className="inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground opacity-0 transition-colors hover:text-foreground group-hover/transfer-item:opacity-100"
                   >
-                    <X />
-                  </Button>
+                    <X className="size-3.5" />
+                  </span>
                 ) : null}
               </div>
             );