# Amount

> One way to show money across an app, so every screen formats alike and columns line up: mono, tabular figures, the real minus sign. The currency symbol takes the muted ink, so the number reads first. With a tone the sign always shows, since color only reinforces it. Set the locale and currency once on a FormatProvider.

Section: Data. Docs: https://entrepta.vercel.app/docs/components/amount

## Install

```bash
npx @entrepta/cli@latest add amount
```

Files: `data/amount.tsx`, `lib/format.ts`, `hooks/use-format.ts`, `hooks/use-redact.ts`, `data/redact.tsx`.
npm packages: `class-variance-authority`.
Comes with: `format-lib`, `use-format`, `use-redact`, `redact`.

## Usage

```tsx
import { Amount } from "@/components/entrepta/amount"
import { FormatProvider } from "@/hooks/use-format"

// once, near the root
<FormatProvider locale="pt-BR" currency="BRL" timeZone="America/Sao_Paulo">
  …
</FormatProvider>

<Amount value={123456} />                       // R$ 1.234,56
<Amount value={-4500} tone="auto" />            // −R$ 45,00, in the error ink
<Amount value={250000} muteCents />             // R$ 2.500,00, cents muted
<Amount value={110000} compact />               // R$ 1,1 mil, the full value on hover
<Amount value={9900} currency="USD" locale="en-US" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | - | Integer minor units: 123456 is 1,234.56 in a currency with cents |
| `currency / locale` | `string` | - | Fall back to the FormatProvider's. A currency is required somewhere |
| `tone` | `"auto" \| "neutral" \| "positive" \| "negative"` | "neutral" | auto colors by the sign. Any tone but neutral also shows the sign |
| `signDisplay` | `"auto" \| "always" \| "never"` | - | always with a tone, auto without one |
| `compact` | `boolean` | false | 1.2K, for axes and small widgets. Screen readers and hover get the full value |
| `muteCents` | `boolean` | false | Cents in the muted ink, for a large value |