@teamix-evo/ui 0.5.2 → 0.6.1

package/src/components/spinner/meta.md

@@ -1,4 +1,4 @@
-# Spinner
+# SpinnerDots
 
 > 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
 
@@ -19,6 +19,8 @@ shadcn v4 composable 套件：原子 Spinner + SpinnerTip 文案 + SpinnerOverla
 
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
+| `size` | `'sm' \| 'md' \| 'lg'` | – | – | 三档尺寸，控制点的扩散半径 |
+| `label` | `string` | – | – | sr-only 读屏文本 |
 | `size` | `"xs" \| "sm" \| "md" \| "lg"` | – | – | – |
 | `tone` | `"default" \| "primary" \| "inverse" \| "muted"` | `"default"` | – | – |
 | `label` | `string` | – | – | sr-only 读屏文本，默认 `加载中`；如父级已有可见 tip 可置空 |
@@ -146,6 +148,30 @@ tip 位置：right(行内) 与 bottom(堆叠)。
 </SpinnerOverlay>
 ```
 
+### DotsDefault
+
+SpinnerDots 三档尺寸：四点沿弧线轨道位移动画。
+
+```tsx
+<div className="flex items-center gap-6">
+  <SpinnerDots size="sm" />
+  <SpinnerDots size="md" />
+  <SpinnerDots size="lg" />
+</div>
+```
+
+### OverlayWithDots
+
+SpinnerDots 作为 SpinnerOverlay 的自定义 indicator。
+
+```tsx
+<SpinnerOverlay indicator={<SpinnerDots size="md" />} tip="加载中...">
+  <div className="h-20 w-48 rounded border border-border p-4 text-xs">
+    四点轨道动画
+  </div>
+</SpinnerOverlay>
+```
+
 ### InlineVsBlock
 
 inline(默认)与 block 通栏模式对比。

package/src/components/spinner/stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import * as React from 'react';
 import {
   Spinner,
+  SpinnerDots,
   SpinnerTip,
   SpinnerOverlay,
   SpinnerFullscreen,
@@ -172,6 +173,28 @@ export const Fullscreen: Story = {
   },
 };
 
+/** SpinnerDots 三档尺寸：四点沿弧线轨道位移动画。 */
+export const DotsDefault: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <SpinnerDots size="sm" />
+      <SpinnerDots size="md" />
+      <SpinnerDots size="lg" />
+    </div>
+  ),
+};
+
+/** SpinnerDots 作为 SpinnerOverlay 的自定义 indicator。 */
+export const OverlayWithDots: Story = {
+  render: () => (
+    <SpinnerOverlay indicator={<SpinnerDots size="md" />} tip="加载中...">
+      <div className="h-20 w-48 rounded border border-border p-4 text-xs">
+        四点轨道动画
+      </div>
+    </SpinnerOverlay>
+  ),
+};
+
 /** inline(默认)与 block 通栏模式对比。 */
 export const InlineVsBlock: Story = {
   render: () => (

package/src/components/steps/index.tsx

@@ -135,6 +135,7 @@ const ArrowSteps = React.forwardRef<
     <div
       ref={ref}
       data-slot="steps"
+      data-shape="arrow"
       className={cn('flex flex-row', className)}
       {...props}
     >
@@ -150,6 +151,7 @@ const ArrowSteps = React.forwardRef<
           <button
             key={i}
             type="button"
+            data-status={s}
             tabIndex={clickable ? 0 : -1}
             onClick={clickable ? () => onChange!(i) : undefined}
             aria-disabled={isDisabled || undefined}
@@ -259,6 +261,7 @@ function CircleDotSteps({
     <div
       ref={forwardedRef}
       data-slot="steps"
+      data-shape={shape}
       className={cn(
         'flex',
         isVertical ? 'flex-col gap-0' : 'flex-row items-start gap-0',
@@ -286,7 +289,7 @@ function CircleDotSteps({
           ? null
           : item.icon ??
             (s === 'finish' ? (
-              <Check className={iconSize} />
+              <Check className={iconSize} strokeWidth={3} />
             ) : s === 'error' ? (
               <X className={iconSize} />
             ) : (
@@ -296,6 +299,7 @@ function CircleDotSteps({
         const indicatorBtn = (
           <button
             type="button"
+            data-status={s}
             tabIndex={clickable ? 0 : -1}
             onClick={clickable ? () => onChange!(i) : undefined}
             className={cn(

package/src/components/switch/index.tsx

@@ -23,7 +23,7 @@ import { cn } from '@/lib/utils';
 // ─── cva ────────────────────────────────────────────────────────────────────
 
 const switchVariants = cva(
-  'peer group/switch relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[loading=true]:pointer-events-none data-[loading=true]:opacity-70',
+  'peer group/switch relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-ring/20 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[loading=true]:pointer-events-none data-[loading=true]:opacity-70',
   {
     variants: {
       size: {

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/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: {