TypingIndicator
入力中を示すインジケーターコンポーネント。
インポート
import { TypingIndicator } from '@caroainc/ui-components'個別サブパス（バンドルサイズを抑えたい場合）:
import { TypingIndicator } from '@caroainc/ui-components/typing-indicator'基本的な使い方
入力中
<TypingIndicator />チャットUIでの使用例
Loading...
<div className="flex items-end gap-2">
<Avatar>
<AvatarFallback>AI</AvatarFallback>
</Avatar>
<div className="bg-muted rounded-lg p-3">
<TypingIndicator />
</div>
</div>メッセージリスト内での使用
Loading...
<div className="space-y-4">
{/* ユーザーメッセージ */}
<div className="flex justify-end">
<div className="bg-primary text-primary-foreground rounded-lg p-3">
こんにちは！
</div>
</div>
{/* AIが入力中 */}
<div className="flex items-end gap-2">
<Avatar>
<AvatarFallback>AI</AvatarFallback>
</Avatar>
<div className="bg-muted rounded-lg p-3">
<TypingIndicator />
</div>
</div>
</div>アクセシビリティ
role="status" と aria-label（デフォルト '入力中'）を持ち、スクリーンリーダー向けに sr-only テキストも出力します。label propで文言を上書きできます。
<TypingIndicator label="AIが回答を生成しています" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | '入力中' | アクセシビリティ用のラベル（role="status"のaria-labelとsr-onlyテキストに使用） |
className | string | - | 追加のCSSクラス |
...props | HTMLMotionProps<"div"> | - | framer-motionのmotion.divに渡す追加props（onAnimationComplete等） |