旅程ItineraryExperimental
The day-grouped, mixed-kind trip/journey timeline: a vertical sequence of items (flight / hotel / activity / transit leg …), each with a per-kind icon+tone marker, a time, a title + secondary, an optional rich content slot, and an opt-in tappable row (≥44px + chevron). Group by day (days[] with day headers + place sublabels) or pass flat items[]. The traveller-facing trip-plan / 乗換経路 / journey view — richer than Timeline (per-item kind + content + tap) and the right call over RouteStops, whose status/予実 (未配/配送中/遅れ) vocabulary is delivery-locked and wrong for a forward plan. RSC-safe except the opt-in onSelect.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| days | ItineraryDay[] | - | 日別グループ（各日 = 見出し＋タイムライン）。 |
| items | ItineraryItem[] | - | フラットな項目（日別グループ無し）。days 指定時は無視。 |
| ItineraryDay.label | ReactNode | - | 日の見出し（1日目 / 6月27日(土)）。 |
| ItineraryDay.sublabel | ReactNode | - | 副次（場所・日付）。 |
| ItineraryItem.time | ReactNode | - | 時刻ラベル（08:00 / 終日 / チェックイン15:00）。 |
| ItineraryItem.icon | ReactNode | - | 種別マーカーのアイコン（便/ホテル/アクティビティ）。 |
| ItineraryItem.tone | "default" | "primary" | "info" | "success" | "warning" | "muted" | "default" | マーカーのトーン。 |
| ItineraryItem.title | ReactNode | - | 主要行。 |
| ItineraryItem.description | ReactNode | - | 副次行。 |
| ItineraryItem.content | ReactNode | - | リッチな内容スロット（便の出発→到着ブロック等）。 |
| ItineraryItem.trailing | ReactNode | - | 右寄せ（Badge/meta）。 |
| ItineraryItem.onSelect | () => void | - | 行を ≥44px の tappable に（詳細を開く・任意）。 |
Usage
import { Itinerary, Badge, type ItineraryDay } from "@gunjo/ui"
import { IconPlane, IconBuildingPavilion } from "@tabler/icons-react"
const days: ItineraryDay[] = [
{ label: "1日目", sublabel: "6月27日(土)・東京 → ホノルル", items: [
{ time: "21:55 発 → 10:25 着（現地）", icon: <IconPlane className="size-4" />, tone: "primary",
title: "NH182 羽田(HND) → ホノルル(HNL)", description: "往路・所要 約7時間30分・座席 32K",
trailing: <Badge variant="info">往路</Badge>, onSelect: () => openFlight() },
{ time: "チェックイン 15:00", icon: <IconBuildingPavilion className="size-4" />, tone: "success",
title: "ハイアット リージェンシー ワイキキ", description: "3泊・予約番号 RZ8K4P", onSelect: () => openHotel() },
]},
]
<Itinerary days={days} />