Transfer Composer

Written for the variant you picked above: Dark

Build a money-transfer flow in a dark, precise fintech style: an #121214 panel with 18px corners and a 1px rgb(255 255 255 / 0.08) inner hairline, text #ededed, muted #8d8d93, Inter with tabular numbers, a periwinkle accent #8b93ff. Across the top, three progress segments (1 Details, 2 Review, 3 Sent): 2px top rules that turn white when done and accent when current. Details: 'Send money', then a large borderless amount input (36–52px, 600, tight tracking) after a muted currency symbol on a single underline that turns accent on focus and red when the amount plus fee exceeds the balance. It groups digits as you type and allows two decimals. Under it, '$84,210.55 available in Operating' or the problem. A From select (account, last four, balance) and a To select (recipient, bank, last four) side by side from 34rem. 'How it travels': radio cards for ACH ('1–3 business days · Free') and Wire ('Arrives today · $25.00'); the chosen card gets an accent ring and faint accent fill. An optional memo. A full-width 'Review transfer' button, disabled until valid. Review: the amount at 36–48px, then a hairline-ruled list of To, From, Method, Arrives (computed by adding business days to today and skipping a configurable weekend, e.g. 'Mon, Oct 5' or 'Tue, Oct 6 – Thu, Oct 8'), Fee, Memo, and a highlighted total; then Edit and 'Send $1,200.00'. Sent: a soft green circle whose tick draws in, '$1,200.00 is on its way', when the recipient should see it, and a monospaced reference. Selected variant — Dark (dark): Dark theme: panel #121214, raised #18181b, wells #0e0e10, text #ededed, muted #8d8d93, faint #5b5b61, hairlines rgb(255 255 255 / 0.08) and 0.16, accent #8b93ff with #0b0b0c text, success #6ad8a0, error #ff8a80. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Enter submits the details step when valid. Send awaits onSend({ from, to, method, amount, fee, memo, arrives }) in minor units; it's disabled while pending, a rejection stays on review with the reason in an alert, and success shows the returned reference. Edit returns to details with everything kept; Make another transfer clears the form. Focus moves to each step's heading. Motion: Each step rises 6px into place; progress rules change colour; the receipt tick draws over 420ms. Reduced motion shows every step and the tick immediately. Accessibility: Progress is an ordered list with aria-current on the current step. The amount input is labelled with the currency and described by the balance or problem line, and marked aria-invalid. Methods are a fieldset of radios with the exact arrival dates in hidden text. Errors use role=alert; headings take focus as the step changes. Responsive behavior: Selects sit side by side from 34rem; method cards wrap; the amount scales with the container. Touch: Decimal keyboard for the amount; every control is a large tap target. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Enter submits the details step when valid. Send awaits onSend({ from, to, method, amount, fee, memo, arrives }) in minor units; it's disabled while pending, a rejection stays on review with the reason in an alert, and success shows the returned reference. Edit returns to details with everything kept; Make another transfer clears the form. Focus moves to each step's heading.

Motion

Each step rises 6px into place; progress rules change colour; the receipt tick draws over 420ms. Reduced motion shows every step and the tick immediately.

Accessibility

Progress is an ordered list with aria-current on the current step. The amount input is labelled with the currency and described by the balance or problem line, and marked aria-invalid. Methods are a fieldset of radios with the exact arrival dates in hidden text. Errors use role=alert; headings take focus as the step changes.

Responsive

Selects sit side by side from 34rem; method cards wrap; the amount scales with the container.

On touch

Decimal keyboard for the amount; every control is a large tap target.