差分DeltaExperimental
Inline signed-change atom: a value with a directional arrow, a sign-driven tone, and a screen-reader (or visible) label — for gain/loss, variance (差異), and cash over/short (過不足). Fits inside a table cell, unlike the card-shaped Statistic.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | number | - | The signed change. Its sign drives the arrow, tone and label. |
| format | (value: number) => React.ReactNode | - | Format the numeric value. Default: signed, grouped ja-JP (+1,000 / −930). Pass formatCurrency for ¥. |
| tones | Partial<Record<DeltaSign, DeltaTone>> | - | Tone per sign. Default { positive: "success", negative: "destructive", zero: "muted" }. Override where positive isn't "good" (cash over/short). |
| labels | Partial<Record<DeltaSign, React.ReactNode>> | - | Accessible (and optionally visible) label per sign, e.g. { positive: "過剰", negative: "不足", zero: "一致" }. Always announced — meaning never rides on colour alone. |
| showLabel | boolean | - | Render the sign label visibly after the value. Default false (screen-reader-only). |
| hideArrow | boolean | - | Hide the directional arrow. Default false. |
| className | string | - | Additional CSS class names. |
Usage
import { Delta, formatCurrency } from "@gunjo/ui"
const yen = (v: number) => formatCurrency(v, { signed: true })
export function Example() {
return (
<>
{/* Gain/loss — default tones (positive = success, negative = destructive) */}
<Delta value={12500} format={yen} labels={{ positive: "増加", negative: "減少" }} />
{/* Cash over/short — positive isn't "good", so remap the tones */}
<Delta
value={-930}
format={yen}
tones={{ positive: "warning", negative: "destructive", zero: "success" }}
labels={{ positive: "過剰", negative: "不足", zero: "一致" }}
showLabel
/>
</>
)
}