@teamix-evo/ui 0.5.0 → 0.6.0

package/src/components/tag/index.tsx

@@ -263,6 +263,12 @@ export interface TagClosableConfig {
   closeArea?: 'tag' | 'tail';
   /** 关闭按钮 aria-label(默认 `'Close'`)。 */
   'aria-label'?: string;
+  /**
+   * hover 时才显示关闭按钮，默认隐藏。
+   * 效果：hover 后关闭按钮淡入，文字向左微移让出空间。
+   * @default false
+   */
+  hoverReveal?: boolean;
 }
 
 export interface TagProps
@@ -352,6 +358,7 @@ function Tag({
   const closableConfig = asChild ? null : normalizeClosable(closable);
   const closeArea = closableConfig?.closeArea ?? 'tail';
   const closeAriaLabel = closableConfig?.['aria-label'] ?? 'Close';
+  const hoverReveal = closableConfig?.hoverReveal ?? false;
 
   const triggerClose = (
     e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
@@ -380,6 +387,7 @@ function Tag({
   const closeButton = closableConfig ? (
     <button
       type="button"
+      data-slot="tag-close"
       aria-label={closeAriaLabel}
       disabled={disabled}
       onClick={(e) => {
@@ -397,6 +405,8 @@ function Tag({
         '-mr-0.5 inline-flex shrink-0 cursor-pointer rounded-sm opacity-60 transition-opacity hover:opacity-100',
         'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
         disabled && 'cursor-not-allowed opacity-30 hover:opacity-30',
+        hoverReveal &&
+          'mr-0 overflow-hidden w-0 opacity-0 transition-[width,opacity] duration-150 group-hover/tag:w-3 group-hover/tag:opacity-60',
       )}
     >
       {renderCloseIcon(closableConfig.closeIcon)}
@@ -427,6 +437,8 @@ function Tag({
             closeArea === 'tag' &&
             !disabled &&
             'cursor-pointer',
+          hoverReveal &&
+            'group/tag transition-[padding-inline] duration-150 hover:!px-1.5',
           className,
         )}
         style={{ color: tone, ...style }}
@@ -530,6 +542,8 @@ function Tag({
           'bg-[var(--tag-bg)] hover:bg-[var(--tag-bg-hover)]',
         disabled && 'cursor-not-allowed opacity-50',
         closableConfig && closeArea === 'tag' && !disabled && 'cursor-pointer',
+        hoverReveal &&
+          'group/tag transition-[padding-inline] duration-150 hover:!px-1.5',
         className,
       )}
       style={{ ...composedStyle, ...style }}

package/src/components/tag/meta.md

@@ -38,6 +38,7 @@ closeArea / aria-label),`onClose(e)` 调用 `e.preventDefault()` 即可
 | `visible` | `boolean` | – | – | 受控可见性。 |
 | `defaultVisible` | `boolean` | – | – | 非受控初始可见性,默认 `true`。 |
 | `disabled` | `boolean` | – | – | 禁用态:灰显 + cursor-not-allowed,点击 / 关闭均无效。 |
+| `borderless` | `boolean` | – | – | 去除边框显示。在 OP 主题下，带 icon 的分类 Tag 使用此样式： 仅保留浅色背景 + 彩色文字 + 前缀图标，无边框线。 |
 | `asChild` | `boolean` | – | – | Slot 模式渲染为子元素(如 `<a>`);此模式下不内置渲染 icon 与关闭按钮。 |
 | `gap` | `'sm' \| 'md' \| 'lg'` | – | – | 间距档位:`sm` 6px / `md` 8px(默认) / `lg` 12px。 |
 | `checked` | `boolean` | – | ✓ | 是否选中(受控)。 |

package/src/components/tag/stories.tsx

@@ -192,6 +192,19 @@ export const Closable: Story = {
             </CheckableTag>
           </TagGroup>
         </div>
+        <div>
+          <h4 className="mb-2 text-xs text-muted-foreground">
+            hoverReveal（hover 时才显示 ×）
+          </h4>
+          <TagGroup>
+            <Tag closable={{ hoverReveal: true }} color="primary">
+              hover me
+            </Tag>
+            <Tag closable={{ hoverReveal: true }} color="success">
+              hover me too
+            </Tag>
+          </TagGroup>
+        </div>
       </div>
     );
   },

package/src/components/textarea/index.tsx

@@ -17,7 +17,7 @@ import { cn } from '@/lib/utils';
 // ─── Textarea cva ────────────────────────────────────────────────────────────
 
 const textareaVariants = cva(
-  'flex w-full cursor-text rounded-md border border-input bg-transparent font-normal field-sizing-content transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20',
+  'flex w-full cursor-text rounded-md border border-input bg-transparent font-normal field-sizing-content transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/20 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/textarea/stories.tsx

@@ -27,7 +27,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: { placeholder: '请输入备注信息...' },
+  args: { placeholder: '请输入备注信息...', className: 'w-80 resize-none' },
 };
 
 /** 可以通过设置 `size` 属性控制多行输入框的尺寸。 */

package/src/components/time-picker/index.tsx

@@ -71,7 +71,7 @@ export function inspectFormat(format: string) {
 const triggerVariants = cva(
   [
     'flex cursor-pointer items-center gap-2 rounded-md border border-input bg-transparent transition-colors',
-    'hover:border-ring focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+    'hover:border-ring focus-within:border-ring focus-within:ring-ring/20',
     '[&:has(input:disabled)]:pointer-events-none [&:has(input:disabled)]:cursor-not-allowed [&:has(input:disabled)]:bg-input/50 [&:has(input:disabled)]:opacity-50',
     'aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20',
   ].join(' '),
@@ -509,6 +509,7 @@ function TimePicker({
             <Clock
               data-slot="time-picker-icon"
               aria-hidden
+              strokeWidth={1.5}
               className="size-4 shrink-0 text-muted-foreground"
             />
           )}
@@ -825,6 +826,7 @@ function TimeRangePicker({
             <Clock
               data-slot="time-range-picker-icon"
               aria-hidden
+              strokeWidth={1.5}
               className="size-4 shrink-0 text-muted-foreground"
             />
           )}

package/src/components/toggle/index.tsx

@@ -15,7 +15,7 @@ import { Toggle as TogglePrimitive } from 'radix-ui';
 import { cn } from '@/lib/utils';
 
 const toggleVariants = cva(
-  'group/toggle inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+  'group/toggle inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
   {
     variants: {
       variant: {

package/src/components/tooltip/index.tsx

@@ -8,7 +8,7 @@
  * - 截断文本悬停展示完整内容
  * - 为操作提供额外上下文信息
  *
- * 组合结构：TooltipProvider > Tooltip > TooltipTrigger + TooltipContent (> TooltipArrow?)
+ * 组合结构：TooltipProvider > Tooltip > TooltipTrigger + TooltipContent (默认带 Arrow，showArrow={false} 可隐藏)
  */
 
 'use client';
@@ -86,6 +86,8 @@ export interface TooltipContentProps
   variant?: 'default' | 'inverse';
   /** 浮层渲染容器，透传给 Portal。 @default document.body */
   container?: HTMLElement | null;
+  /** 是否显示箭头。 @default true */
+  showArrow?: boolean;
 }
 
 function TooltipContent({
@@ -93,6 +95,7 @@ function TooltipContent({
   sideOffset = 4,
   variant = 'default',
   container,
+  showArrow = true,
   children,
   ...props
 }: TooltipContentProps) {
@@ -106,6 +109,7 @@ function TooltipContent({
         {...props}
       >
         {children}
+        {showArrow && <TooltipArrow />}
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );

package/src/components/tooltip/meta.md

@@ -12,7 +12,7 @@
 - 图标按钮需要文字解释
 - 截断文本悬停展示完整内容
 - 为操作提供额外上下文信息
-- 组合结构：TooltipProvider > Tooltip > TooltipTrigger + TooltipContent (> TooltipArrow?)
+- 组合结构：TooltipProvider > Tooltip > TooltipTrigger + TooltipContent (默认带 Arrow，showArrow={false} 可隐藏)
 
 ## Props
 
@@ -25,6 +25,7 @@
 | `disableHoverableContent` | `boolean` | `false` | – | 是否禁用鼠标进入 Tooltip 内保持显示。 |
 | `variant` | `'default' \| 'inverse'` | `'default'` | – | 视觉变体：default = 亮底；inverse = 反色（深底白字）。 |
 | `container` | `HTMLElement \| null` | `document.body` | – | 浮层渲染容器，透传给 Portal。 |
+| `showArrow` | `boolean` | `true` | – | 是否显示箭头。 |
 
 ## 示例
 
@@ -86,29 +87,25 @@
 </TooltipProvider>
 ```
 
-### WithArrow
+### WithoutArrow
 
-显示尖角箭头。
+隐藏箭头：showArrow={false}。
 
 ```tsx
 <TooltipProvider>
   <div className="flex items-center gap-4">
     <Tooltip>
       <TooltipTrigger asChild>
-        <Button>带箭头</Button>
+        <Button>无箭头</Button>
       </TooltipTrigger>
-      <TooltipContent>
-        提示内容
-        <TooltipArrow />
-      </TooltipContent>
+      <TooltipContent showArrow={false}>提示内容</TooltipContent>
     </Tooltip>
     <Tooltip>
       <TooltipTrigger asChild>
-        <Button>反色 + 箭头</Button>
+        <Button>反色无箭头</Button>
       </TooltipTrigger>
-      <TooltipContent variant="inverse">
+      <TooltipContent variant="inverse" showArrow={false}>
         深色提示
-        <TooltipArrow />
       </TooltipContent>
     </Tooltip>
   </div>
@@ -117,7 +114,7 @@
 
 ### ArrowSides
 
-四个方向的箭头 — 箭头随 side 自动朝向 trigger。
+四个方向的箭头 — 箭头随 side 自动朝向 trigger（默认即带箭头）。
 
 ```tsx
 <TooltipProvider delayDuration={0}>
@@ -126,37 +123,25 @@
       <TooltipTrigger asChild>
         <Button>side=top</Button>
       </TooltipTrigger>
-      <TooltipContent side="top">
-        top
-        <TooltipArrow />
-      </TooltipContent>
+      <TooltipContent side="top">top</TooltipContent>
     </Tooltip>
     <Tooltip open>
       <TooltipTrigger asChild>
         <Button>side=bottom</Button>
       </TooltipTrigger>
-      <TooltipContent side="bottom">
-        bottom
-        <TooltipArrow />
-      </TooltipContent>
+      <TooltipContent side="bottom">bottom</TooltipContent>
     </Tooltip>
     <Tooltip open>
       <TooltipTrigger asChild>
         <Button>side=left</Button>
       </TooltipTrigger>
-      <TooltipContent side="left">
-        left
-        <TooltipArrow />
-      </TooltipContent>
+      <TooltipContent side="left">left</TooltipContent>
     </Tooltip>
     <Tooltip open>
       <TooltipTrigger asChild>
         <Button>side=right</Button>
       </TooltipTrigger>
-      <TooltipContent side="right">
-        right
-        <TooltipArrow />
-      </TooltipContent>
+      <TooltipContent side="right">right</TooltipContent>
     </Tooltip>
   </div>
 </TooltipProvider>

package/src/components/tooltip/stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import {
   Tooltip,
-  TooltipArrow,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
@@ -115,27 +114,23 @@ export const AllPositions: Story = {
   },
 };
 
-/** 显示尖角箭头。 */
-export const WithArrow: Story = {
+/** 隐藏箭头：showArrow={false}。 */
+export const WithoutArrow: Story = {
   render: () => (
     <TooltipProvider>
       <div className="flex items-center gap-4">
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button>带箭头</Button>
+            <Button>无箭头</Button>
           </TooltipTrigger>
-          <TooltipContent>
-            提示内容
-            <TooltipArrow />
-          </TooltipContent>
+          <TooltipContent showArrow={false}>提示内容</TooltipContent>
         </Tooltip>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button>反色 + 箭头</Button>
+            <Button>反色无箭头</Button>
           </TooltipTrigger>
-          <TooltipContent variant="inverse">
+          <TooltipContent variant="inverse" showArrow={false}>
             深色提示
-            <TooltipArrow />
           </TooltipContent>
         </Tooltip>
       </div>
@@ -143,7 +138,7 @@ export const WithArrow: Story = {
   ),
 };
 
-/** 四个方向的箭头 — 箭头随 side 自动朝向 trigger。 */
+/** 四个方向的箭头 — 箭头随 side 自动朝向 trigger（默认即带箭头）。 */
 export const ArrowSides: Story = {
   render: () => (
     <TooltipProvider delayDuration={0}>
@@ -152,37 +147,25 @@ export const ArrowSides: Story = {
           <TooltipTrigger asChild>
             <Button>side=top</Button>
           </TooltipTrigger>
-          <TooltipContent side="top">
-            top
-            <TooltipArrow />
-          </TooltipContent>
+          <TooltipContent side="top">top</TooltipContent>
         </Tooltip>
         <Tooltip open>
           <TooltipTrigger asChild>
             <Button>side=bottom</Button>
           </TooltipTrigger>
-          <TooltipContent side="bottom">
-            bottom
-            <TooltipArrow />
-          </TooltipContent>
+          <TooltipContent side="bottom">bottom</TooltipContent>
         </Tooltip>
         <Tooltip open>
           <TooltipTrigger asChild>
             <Button>side=left</Button>
           </TooltipTrigger>
-          <TooltipContent side="left">
-            left
-            <TooltipArrow />
-          </TooltipContent>
+          <TooltipContent side="left">left</TooltipContent>
         </Tooltip>
         <Tooltip open>
           <TooltipTrigger asChild>
             <Button>side=right</Button>
           </TooltipTrigger>
-          <TooltipContent side="right">
-            right
-            <TooltipArrow />
-          </TooltipContent>
+          <TooltipContent side="right">right</TooltipContent>
         </Tooltip>
       </div>
     </TooltipProvider>

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

package/src/components/tree-select/index.tsx

@@ -26,7 +26,7 @@ import { findNode } from '@/components/tree/utils';
 // ─── Variants ────────────────────────────────────────────────────────────────
 
 const treeSelectTriggerVariants = cva(
-  'flex w-fit min-w-36 cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent px-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20',
+  'flex w-fit min-w-36 cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent px-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20',
   {
     variants: {
       size: {

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Teamix Evo Contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.