@teamix-evo/ui 0.5.2 → 0.6.0

package/src/components/spinner/index.tsx

@@ -19,6 +19,174 @@ import { Loader2Icon } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 
+/* ────────────────────────────────────────────────────────────────────────── */
+/* SpinnerDots keyframes（singleton 注入）                                      */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+const SPINNER_DOTS_STYLE_ID = '__spinner-dots-keyframes__';
+
+/**
+ * 确保 keyframes 在 DOM 中只注入一次。
+ * 双层动画架构（对齐 cloud-design fusion-reactor）：
+ * - 外层容器：阶梯式旋转（快速转 90° → 停住），实现弧线位移
+ * - 每个点：径向脉动（边缘 → 中心 → 边缘），实现汇聚与发散
+ */
+function ensureDotsKeyframes() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(SPINNER_DOTS_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = SPINNER_DOTS_STYLE_ID;
+  style.textContent = `
+@keyframes __sdots-orbit__ {
+  0% { transform: rotate(0deg); }
+  5% { transform: rotate(90deg); }
+  25% { transform: rotate(90deg); }
+  30% { transform: rotate(180deg); }
+  50% { transform: rotate(180deg); }
+  55% { transform: rotate(270deg); }
+  75% { transform: rotate(270deg); }
+  80% { transform: rotate(360deg); }
+  100% { transform: rotate(360deg); }
+}
+@keyframes __sdot-x__ {
+  25% { left: 0; }
+  45%, 50% { left: calc(50% - 4px); }
+  90% { left: 0; }
+}
+@keyframes __sdot-y__ {
+  25% { top: 0; }
+  45%, 50% { top: calc(50% - 4px); }
+  90% { top: 0; }
+}
+@keyframes __sdot-xr__ {
+  25% { right: 0; }
+  45%, 50% { right: calc(50% - 4px); }
+  90% { right: 0; }
+}
+@keyframes __sdot-yr__ {
+  25% { bottom: 0; }
+  45%, 50% { bottom: calc(50% - 4px); }
+  90% { bottom: 0; }
+}
+`;
+  document.head.appendChild(style);
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/* SpinnerDots（四点轨道位移原子）                                               */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+/** 容器尺寸（点固定 8×8px） */
+const DOTS_SIZES = {
+  sm: { container: 'size-6' },
+  md: { container: 'size-7' },
+  lg: { container: 'size-8' },
+} as const;
+
+export interface SpinnerDotsProps
+  extends Omit<React.ComponentProps<'span'>, 'children'> {
+  /** 三档尺寸，控制点的扩散半径 */
+  size?: 'sm' | 'md' | 'lg';
+  /** sr-only 读屏文本 */
+  label?: string;
+}
+
+/**
+ * 四点轨道位移旋转指示器（对齐 cloud-design fusion-reactor 动效）。
+ * 4 个主题色（primary）圆点 8×8px，透明度 1 / 0.8 / 0.6 / 0.2，分居左上右下。
+ * 双层动画：外层容器阶梯旋转（弧线位移）+ 每个点径向脉动（汇聚/发散）。
+ */
+function SpinnerDots({
+  size = 'md',
+  label = '加载中',
+  className,
+  ...props
+}: SpinnerDotsProps) {
+  React.useEffect(() => {
+    ensureDotsKeyframes();
+  }, []);
+
+  const sizeToken = DOTS_SIZES[size ?? 'md'];
+
+  const dotBase: React.CSSProperties = {
+    position: 'absolute',
+    width: '8px',
+    height: '8px',
+    borderRadius: '50%',
+    background: 'var(--color-primary)',
+    margin: 'auto',
+    animationDuration: '1.4s',
+    animationTimingFunction: 'ease-in-out',
+    animationIterationCount: 'infinite',
+  };
+
+  return (
+    <span
+      data-slot="spinner-dots-root"
+      role="status"
+      aria-live="polite"
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center',
+        className,
+      )}
+      {...props}
+    >
+      {/* 外层容器：阶梯旋转（5.6s = 4 × 1.4s） */}
+      <span
+        data-slot="spinner-dots"
+        className={cn('relative inline-block', sizeToken.container)}
+        style={{ animation: '__sdots-orbit__ 5.6s linear infinite' }}
+      >
+        {/* 左 · opacity 1 — 径向向右脉动 (nextVectorDotsX) */}
+        <span
+          style={{
+            ...dotBase,
+            top: 0,
+            bottom: 0,
+            left: 0,
+            opacity: 1,
+            animationName: '__sdot-x__',
+          }}
+        />
+        {/* 上 · opacity 0.8 — 径向向下脉动 (nextVectorDotsY) */}
+        <span
+          style={{
+            ...dotBase,
+            left: 0,
+            right: 0,
+            top: 0,
+            opacity: 0.8,
+            animationName: '__sdot-y__',
+          }}
+        />
+        {/* 右 · opacity 0.6 — 径向向左脉动 (nextVectorDotsXR) */}
+        <span
+          style={{
+            ...dotBase,
+            top: 0,
+            bottom: 0,
+            right: 0,
+            opacity: 0.6,
+            animationName: '__sdot-xr__',
+          }}
+        />
+        {/* 下 · opacity 0.2 — 径向向上脉动 (nextVectorDotsYR) */}
+        <span
+          style={{
+            ...dotBase,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            opacity: 0.2,
+            animationName: '__sdot-yr__',
+          }}
+        />
+      </span>
+      {label ? <span className="sr-only">{label}</span> : null}
+    </span>
+  );
+}
+
 /* ────────────────────────────────────────────────────────────────────────── */
 /* Spinner（原子）                                                             */
 /* ────────────────────────────────────────────────────────────────────────── */
@@ -72,6 +240,7 @@ function Spinner({
         data-size={size}
         data-tone={tone ?? 'default'}
         aria-hidden="true"
+        strokeWidth={1.5}
         className={cn(spinnerVariants({ size, tone }), className)}
         {...props}
       />
@@ -327,6 +496,7 @@ function SpinnerFullscreen({
 
 export {
   Spinner,
+  SpinnerDots,
   SpinnerTip,
   SpinnerOverlay,
   SpinnerOverlayMask,

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>