チケット券面TicketStubExperimental
The scannable pass / ticket / coupon / member-card stub: a card with a barcode or QR (real value in the SR name via role=img), a human-readable code label, an optional perforation notch (the cut-out look that reads as a ticket), and a content slot above for the domain detail (flight OD-pair + seat/gate, coupon discount + 期限, member tier + points). The thing the traveller holds up at the gate / register — the consumer mirror of ScanInput/ScanGate (which capture a code; this displays one). value + format (code128 / qr). RSC-safe; the built-in code render is a deterministic (SSR-safe) visual placeholder — pass the code prop for a production-scannable barcode from a lib.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | string | - | エンコードする値（会員番号 / 予約番号 / クーポンコード）＝コードの内容（読み上げ名にも入る）。 |
| format | "code128" | "qr" | "code128" | コード形式。code128 = 1次元バーコード、qr = QR マトリクス。 |
| codeLabel | ReactNode | - | コード下の可読ラベル。既定は value。 |
| codeAlt | string | - | コード画像のアクセシブル名。既定は value から生成。 |
| children | ReactNode | - | ミシン目の上の内容（便のOD/座席・クーポン詳細・会員情報）。 |
| perforation | boolean | true | ミシン目（ノッチ＋破線）の表示。 |
| code | ReactNode | - | 組み込みの視覚コードを実スキャン可能なバーコード（ライブラリ出力）で差し替え。 |
Usage
import { TicketStub, Badge } from "@gunjo/ui"
<TicketStub value="CPN-NEWDAYS-3X-887412" codeLabel="887412">
<div className="flex items-center justify-between">
<span className="font-semibold">NewDays ポイント3倍</span>
<Badge variant="warning">期間限定</Badge>
</div>
<p className="mt-1 text-xs text-muted-foreground">対象：駅ナカ NewDays 全店・〜2026/06/30</p>
</TicketStub>
// 搭乗券（QR）:
<TicketStub value="NH106-X7K2QM-18K" format="qr" codeLabel="X7K2QM">
{/* OD-pair + 座席/搭乗口 … */}
</TicketStub>