HoverCard

インポート

import { HoverCard, HoverCardTrigger, HoverCardContent } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { HoverCard, HoverCardTrigger, HoverCardContent } from '@caroainc/ui-components/hover-card'

基本的な使い方

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="#">@username</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="flex space-x-4">
      <Avatar>
        <AvatarImage src="/avatar.png" />
        <AvatarFallback>UN</AvatarFallback>
      </Avatar>
      <div>
        <h4 className="font-semibold">ユーザー名</h4>
        <p className="text-sm text-muted-foreground">
          プロフィールの説明文
        </p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

リンクプレビュー

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">
      <Icon name="Link" />
      詳細を見る
    </Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="space-y-2">
      <h4 className="font-semibold">リンク先のタイトル</h4>
      <p className="text-sm text-muted-foreground">
        リンク先の説明文やプレビュー内容
      </p>
    </div>
  </HoverCardContent>
</HoverCard>

表示・非表示までの遅延

HoverCard（Root）はRadix UIのopenDelay / closeDelayをそのまま受け取れます。ホバーしてからカードが開くまでの遅延、カーソルが離れてから閉じるまでの遅延をそれぞれミリ秒で調整できます。

<HoverCard openDelay={0} closeDelay={0}>
  <HoverCardTrigger asChild>
    <a href="#">即座に表示</a>
  </HoverCardTrigger>
  <HoverCardContent>...</HoverCardContent>
</HoverCard>

Radix UIのHoverCardPrimitive.Rootのpropsをそのまま受け取ります（主なもののみ抜粋）。

Prop	Type	Default	Description
`open`	`boolean`	`-`	開閉状態（制御コンポーネント）
`onOpenChange`	`(open: boolean) => void`	`-`	開閉変更時のコールバック
`openDelay`	`number`	`700`	トリガーにカーソルが乗ってからカードが開くまでの遅延（ミリ秒）
`closeDelay`	`number`	`300`	カーソルが離れてからカードが閉じるまでの遅延（ミリ秒）

Props (HoverCardContent)

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	表示位置
`align`	`'start' \| 'center' \| 'end'`	`'center'`	配置
`sideOffset`	`number`	`4`	トリガーからのオフセット（px）