@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/hover-card/hover-card.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { HoverCard, HoverCardTrigger, HoverCardContent } from './hover-card';
-import {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-} from '@/components/avatar/avatar';
-
-const meta: Meta<typeof HoverCardContent> = {
-  title: '数据展示 · Data Display/HoverCard',
-  component: HoverCardContent,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '悬浮卡片 —— 鼠标悬停时延迟展示富内容(用户名片、链接预览、缩略卡)。基于 Radix HoverCard 实现:**仅鼠标悬停触发**,键盘聚焦不触发,与 Tooltip(纯文本)/ Popover(click 富内容)互补;支持 `side` / `align` 定位、`openDelay` / `closeDelay` 延迟、`showArrow` 尖角(命名与 Tooltip / Popover 统一)。shadcn 专有,antd 可由 `Popover trigger="hover"` 近似实现。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
-      },
-    },
-  },
-  argTypes: {
-    side: {
-      control: 'inline-radio',
-      options: ['top', 'right', 'bottom', 'left'],
-    },
-    align: {
-      control: 'inline-radio',
-      options: ['start', 'center', 'end'],
-    },
-    showArrow: { control: 'boolean' },
-  },
-  args: { side: 'bottom', align: 'center', showArrow: false },
-  decorators: [
-    (Story) => (
-      <div className="flex h-48 items-center justify-center">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof HoverCardContent>;
-
-export const Playground: Story = {
-  render: (args) => (
-    <HoverCard openDelay={150}>
-      <HoverCardTrigger asChild>
-        <a
-          href="#"
-          onClick={(e) => e.preventDefault()}
-          className="font-medium text-primary hover:underline"
-        >
-          @lyca
-        </a>
-      </HoverCardTrigger>
-      <HoverCardContent {...args}>
-        <div className="flex gap-3">
-          <Avatar>
-            <AvatarImage src="https://github.com/shadcn.png" />
-            <AvatarFallback>LY</AvatarFallback>
-          </Avatar>
-          <div className="space-y-1">
-            <h4 className="text-sm font-semibold">@lyca</h4>
-            <p className="text-xs text-muted-foreground">
-              Frontend engineer · Joined Dec 2020
-            </p>
-          </div>
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  ),
-};
-
-export const WithArrow: Story = {
-  name: 'showArrow · 有尖角',
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <HoverCard openDelay={150}>
-      <HoverCardTrigger asChild>
-        <a
-          href="#"
-          onClick={(e) => e.preventDefault()}
-          className="font-medium text-primary hover:underline"
-        >
-          带箭头悬浮
-        </a>
-      </HoverCardTrigger>
-      <HoverCardContent showArrow>
-        <h4 className="text-sm font-semibold">资源 · ECS i-xxx</h4>
-        <p className="mt-1 text-xs text-muted-foreground">
-          ap-southeast-1 · 4 vCPU · 8 GiB · 状态正常
-        </p>
-      </HoverCardContent>
-    </HoverCard>
-  ),
-};

package/src/components/hover-card/hover-card.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-
-import { cn } from '@/utils/cn';
-
-const HoverCard = HoverCardPrimitive.Root;
-const HoverCardTrigger = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <HoverCardPrimitive.Trigger
-    ref={ref}
-    className={cn('cursor-pointer', className)}
-    {...props}
-  />
-));
-HoverCardTrigger.displayName = HoverCardPrimitive.Trigger.displayName;
-
-export interface HoverCardContentProps
-  extends React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> {
-  /**
-   * 是否显示三角形箭头(antd `arrow` 并集)。
-   * 与 Tooltip / Popover 统一用 `showArrow`。
-   * @default false
-   */
-  showArrow?: boolean;
-}
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  HoverCardContentProps
->(
-  (
-    {
-      className,
-      align = 'center',
-      sideOffset = 4,
-      showArrow = false,
-      children,
-      ...props
-    },
-    ref,
-  ) => (
-    <HoverCardPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 w-64 rounded-md border border-border bg-popover p-4 text-xs text-popover-foreground shadow-md outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      {showArrow ? (
-        <HoverCardPrimitive.Arrow
-          className="fill-popover"
-          width={10}
-          height={5}
-        />
-      ) : null}
-    </HoverCardPrimitive.Content>
-  ),
-);
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-
-export { HoverCard, HoverCardTrigger, HoverCardContent };