# Delta

> A signed change, with polarity and a redundant non-color cue.

Source: https://lopifi.com/components/delta
Part of: Lopifi — US GAAP books on autopilot, reviewed by a CPA (https://lopifi.com)

---

- **Family:** Primitives — The layer everything else composes. Build these first; nothing above them is right until they are.
- **Status:** Implemented
- **Spec:** https://lopifi.com/docs/catalog/01-primitives

## Install

```bash
npx shadcn@latest add @lopifi/theme
npx shadcn@latest add @lopifi/delta
```

## Specification

> A signed change. Never colored without a redundant cue.

```tsx
<Delta value={{ amount: 12400, currency: "USD" }} percent={5.3} polarity="standard" />
// ↑ +$12,400.00 (+5.3%)
<Delta value={{ amount: 8200, currency: "USD" }} polarity="inverted" />
// ↑ +$8,200.00   ← colored NEGATIVE, because up is bad for this metric
```

```ts
interface DeltaProps {
  value: MoneyValue | null;
  percent?: PercentChange;              // { kind: "points" | "relative"; value: number }
  polarity?: "standard" | "inverted" | "neutral";
  showArrow?: boolean;                  // default true
  showPercent?: boolean;
  basis?: string;                       // "vs. Aug" — never omit the comparison basis
}
```

**The polarity contract is the whole point.** A `-4.2%` change in burn is good. Defaulting everything to `standard` is how dashboards report cheerful green on a cost overrun.

**Structure:** `[arrow] [sign] [value] [(percent)] [basis]`. Sign glyph slot reserved so a column of deltas aligns even when some are unchanged.

**Zero delta:** `—` with `--neutral-value`, no arrow. Not `+0.0%`.

**Motion:** none. Value flash when live.

## Rules this component obeys

Money is minor units, never floats. `null` is not `0` and neither is redacted. Negatives render in accounting parentheses with the parenthesis column reserved on both sides. Debit and credit are two columns. Per-currency decimal places. Polarity is explicit — up is not always good. Every figure states its period, entity, currency, basis and as-of.