# Payout Split

> Card payments converging on a splitter that divides every payment as it settles, then fanning out to a card with the total settled, one bar split between the seller, the platform, processing, and tax, and each part's payout counting up as pulses arrive.

Source: https://ui.cortexcn.dev/docs/cortex/payout-split

## Installation

```bash
npx shadcn@latest add @cortexcn/payout-split
```

## Usage

```tsx
import { PayoutSplit } from "@/components/payout-split";
```

```tsx
<PayoutSplit
  settled={12480}
  parts={[
    { name: "Kiln & Co.", role: "Seller", share: 0.86 },
    { name: "Platform", role: "Marketplace fee", share: 0.08 },
    { name: "Processing", role: "Card network", share: 0.03 },
    { name: "Sales tax", role: "Held for filing", share: 0.03 },
  ]}
/>
```

`settled` is split between the parts by their `share`, and the shares are scaled to add up to one. Use it on the page for a marketplace, a payments platform, or a creator store, to show where each payment goes.

## Examples

### Course sales

Revenue from a course, split between two authors, the platform, and processing.

### Static

With `animated={false}`, nothing moves and the amounts stay as given.

## Behavior

- While the flow is on screen, pulses run from the left into the splitter, then on to each part. The amounts count up from zero, then each part adds its share of `perPayment` every time a pulse reaches it, and the total follows.
- The split bar gives each part a width by its share and a deeper tint the larger it is; each row's marker carries the same tint.
- The payment count under the source label goes up as pulses reach the splitter.
- With reduced motion enabled, or off screen, nothing moves and every amount shows its given value.
- The whole flow is one SVG that scales to its container. It lays out at `minWidth` or wider (560px by default); in a narrower container it scrolls sideways and takes keyboard focus.
- Amounts are written with `Intl.NumberFormat` in `locale` and `currency`. Screen readers hear the total, then each part's payout and share.

## Props

### PayoutSplit

| Prop              | Type                | Default                                  | Description                                          |
| ----------------- | ------------------- | ---------------------------------------- | ---------------------------------------------------- |
| `parts`           | `PayoutSplitPart[]` | Four sample parts                        | Who each payment is split between                    |
| `settled`         | `number`            | `12480`                                  | The amount settled so far, split by `parts`          |
| `perPayment`      | `number`            | `64`                                     | Added to a part, before the split, per pulse          |
| `payments`        | `number`            | `1312`                                   | Payments counted so far, under the source label      |
| `paymentsLabel`   | `string`            | `"payments today"`                       | The words after the payment count                    |
| `title`           | `string`            | `"Today's payouts"`                      | The card's title                                     |
| `totalLabel`      | `string`            | `"Settled today"`                        | The label over the total                             |
| `splitterName`    | `string`            | `"Splitter"`                             | The name in the middle node                          |
| `splitterCaption` | `string`            | `"Splits every payment as it settles"`   | A line under the middle node                         |
| `sourceLabel`     | `string`            | `"Card payments"`                        | The label over the incoming lines                    |
| `apiLabel`        | `string`            | `"Ledger"`                               | The label on the lines into the card                 |
| `note`            | `string`            | `"Every payment splits the same way."`   | A note at the foot of the card                       |
| `caption`         | `string`            | `"Illustrative numbers"`                 | A small label in the bottom-left corner              |
| `currency`        | `string`            | `"USD"`                                  | An ISO 4217 code for the amounts                     |
| `locale`          | `string`            | `"en-US"`                                | The locale numbers are written in                    |
| `lines`           | `number`            | `22`                                     | How many lines of traffic come in from the left      |
| `accent`          | `string`            | `"var(--foreground)"`                    | Color of the pulses, markers, and split bar          |
| `animated`        | `boolean`           | `true`                                   | Run the pulses and count up while on screen          |
| `minWidth`        | `number`            | `560`                                    | Narrowest layout width in pixels; below it, scroll   |
| `ariaLabel`       | `string`            | `"Payout split"`                         | Names the flow for screen readers                    |
| `className`       | `string`            | -                                        | Extra classes on the frame                           |

### PayoutSplitPart

| Prop    | Type     | Default | Description                                         |
| ------- | -------- | ------- | --------------------------------------------------- |
| `name`  | `string` | -       | Who gets this part                                  |
| `role`  | `string` | -       | What the part is, such as `"Sales tax"`             |
| `share` | `number` | -       | Its share of every payment, from 0 to 1             |