KQ-731 · REFUND/FLOW

Refund Flow

A refund card for one charge. The amount slider cannot pass the original — the track ends where the charge does — and pressing Refund sends the figure back along a route: the line fills and a pill carrying the amount travels to the customer's card on glide, then a REFUNDED stamp lands on it on recoil as onRefund fires. The slider takes arrows, Page keys, Home and End; the button is a real button.

KQ-731 · REFUND/FLOW

Fieldline SupplyCharged $48.00

Refund amountFull refund

Refund $48.00 of $48.00 · full

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/refund-flow

Props

original: number; default —; The original charge; the slider's cap.
value / defaultValue: number; default the original; Controlled or initial refund amount.
onValueChange: (amount: number) => void; default —; Fires from the drag, click or key that moved the amount.
onRefund: (amount: number) => void; default —; Fires when the refund lands on the card.
step: number; default 1; Keyboard step and drag snap; Page keys move ten.
merchant: string; default "Merchant"; The payee the money leaves.
cardLabel: string; default "•• 4182"; The customer's card, as it should print.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Formats every amount the card prints.

Prop	Type	Default	Description
original	number	—	The original charge; the slider's cap.
value / defaultValue	number	the original	Controlled or initial refund amount.
onValueChange	(amount: number) => void	—	Fires from the drag, click or key that moved the amount.
onRefund	(amount: number) => void	—	Fires when the refund lands on the card.
step	number	1	Keyboard step and drag snap; Page keys move ten.
merchant	string	"Merchant"	The payee the money leaves.
cardLabel	string	"•• 4182"	The customer's card, as it should print.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Formats every amount the card prints.