リストカードListCardExperimental

The tappable list entry: one item in a scannable, mobile-dense list — a leading accessory (icon / avatar / colour dot / rank / line chip), a title + secondary, optional tag chips, a right-aligned status pill and meta (price / time / count / timestamp), and a trailing chevron. The result-card / status-row primitive every consumer 'list of things' screen opens with — search results, route / product / listing comparisons, status lists (運行状況・在庫・端末), order/incident queues. Tappable rows (onSelect) are a real ≥44px button with hover/focus/selected states; status never rides on colour alone (Badge with icon + an optional severity accent rail). For the KPI strip use StatGroup; for a severity-triaged alert worklist use ActionQueue; for a money breakdown use AmountBreakdown. RSC-safe by default — onSelect is the only function prop and is opt-in.

プレビュー

Props

表は横にスクロールできます
プロパティ型初期値説明
titleReactNode-主要行（必須）。
leadingReactNode-先頭のアクセサリ（アイコン / アバター / 路線色ドット / 順位 / 路線チップ）。
descriptionReactNode-タイトル下の副次行。
tagsReactNode-タイトル下に折り返すチップ列（最速 / 最安 / おすすめ など）。
statusReactNode-右寄せのステータス枠（アイコン付き Badge＝色のみに依存しない）。
metaReactNode-右寄せの副次テキスト（価格 / 時刻 / 件数 / 更新時刻）。
trailingReactNode-末尾のアクセサリ。onSelect 時は既定で chevron。null で抑制。
severity"critical" | "warning" | "info" | "success" | "neutral"-左のアクセントレール（任意）。
selectedboolean-選択中の見た目（ring＋アクセント背景）。
onSelect() => void-カード全体を ≥44px の tappable ボタンに（任意・省略で表示専用）。

Usage

import { ListCard, Badge } from "@gunjo/ui"

<ListCard
  leading={<span className="size-3 rounded-full bg-destructive" />}
  title="中央線快速"
  description="人身事故の影響"
  status={<Badge variant="destructive">運転見合わせ</Badge>}
  meta="7:42 更新"
  severity="critical"
  onSelect={() => openLine("chuo")}
/>

// 検索結果カードとしても:
<ListCard
  title="10:42 → 11:14"
  description="32分・乗換0回・34.1km"
  tags={<><Badge variant="info">最速</Badge><Badge variant="success">最安</Badge></>}
  meta="¥580"
  selected={selectedId === "r1"}
  onSelect={() => setSelectedId("r1")}
/>

使用コンポーネント

BadgeActionQueueStatGroup