F1 component kit/Forms and editing/Money input · wallet before → afterDesktop

Money input · wallet before → after

F1 variant13 · money-input

Signed money with its currency: Debit (the default, as on the ticket wallet box) or Credit, the settlement currency, and the wallet balance before → after. A debit can never take a wallet below zero.

Covers: money-input primitive, money-input designer. Exports: MoneyInput.

Whole page:Phone is fixed at comfortable (POWERUPS #15).Laravel · navyDTC · midnight green

Anatomy

The component as it sits in the product: English, compact, real data shapes.

USD28.00
Atelier North · walletUSD 1,240.00
This debit− USD 28.00
Resulting balanceUSD 1,212.00
Money writes stay desktop-first with the confirmation ladder; the phone shows the same preview read-only.

States

7 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

debit · before → after
USD28.00
Atelier North · walletUSD 1,240.00
This debit− USD 28.00
Resulting balanceUSD 1,212.00
Money writes stay desktop-first with the confirmation ladder; the phone shows the same preview read-only.
credit
USD28.00
Atelier North · walletUSD 1,240.00
This credit+ USD 28.00
Resulting balanceUSD 1,268.00
Money writes stay desktop-first with the confirmation ladder; the phone shows the same preview read-only.
focus
USD28.00
Atelier North · walletUSD 1,240.00
This debit− USD 28.00
Resulting balanceUSD 1,212.00
Money writes stay desktop-first with the confirmation ladder; the phone shows the same preview read-only.
empty
USD0.00
Settles in USD (Atelier North’s settlement currency).
Money writes stay desktop-first with the confirmation ladder; the phone shows the same preview read-only.
over the balance
USD2,000.00
More than the wallet holds (USD 1,240.00). Debits cannot take a wallet below zero.
Money writes stay desktop-first with the confirmation ladder; the phone shows the same preview read-only.
balance loading
USD28.00
Money writes stay desktop-first with the confirmation ladder; the phone shows the same preview read-only.
disabled
USD28.00
Atelier North · walletUSD 1,240.00
This debit− USD 28.00
Resulting balanceUSD 1,212.00
Money writes stay desktop-first with the confirmation ladder; the phone shows the same preview read-only.

Density

The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.

comfortable · phone default
USD28.00
Atelier North · walletUSD 1,240.00
This debit− USD 28.00
Resulting balanceUSD 1,212.00
Money writes stay desktop-first with the confirmation ladder; the phone shows the same preview read-only.

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

en
USD28.00
Atelier North · walletUSD 1,240.00
This debit− USD 28.00
Resulting balanceUSD 1,212.00
Money writes stay desktop-first with the confirmation ladder; the phone shows the same preview read-only.
中文 · lang=zh-Hans
USD28.00
Atelier North · 钱包USD 1,240.00
本次扣款− USD 28.00
结果余额USD 1,212.00
资金写操作以桌面为主并走确认阶梯；手机只读显示相同预览。

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string
USD98,765.43
Atelier North · walletUSD 1,234,567.89
This debit− USD 98,765.43
Resulting balanceUSD 1,135,802.46
Money writes stay desktop-first with the confirmation ladder; the phone shows the same preview read-only.
permission denied
Not available to your roleWallet changes need wallet. Ask a full admin to grant it.
Atelier North · walletUSD 1,240.00
Money writes stay desktop-first with the confirmation ladder; the phone shows the same preview read-only.

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export
MoneyInput · @rj/admin-kit
Props
amount (minor units) · currency · direction debit|credit · balance · min/max
States
empty · focus · valid · over-balance · loading · disabled · read-only
shadcn / Radix
Input + Select (currency) + ToggleGroup
Package underneath
react-hook-form · zod · Intl.NumberFormat
Accessibility
label states the currency; the resulting balance is a polite live region
API operations
admin.billing.wallets.show · admin.billing.wallets.transactions.store · admin.tickets.wallet-transactions.store · admin.billing.surcharges.update
Phone variant
read-only preview; writes stay desktop
Permission
wallet