Money input + monedă

Câmp pentru sumă mare cu selector de monedă atașat. Folosit pe facturare și ecrane cu input central de sumă (one-field-per-screen). Inter 700 · 48px · tabular-nums, autoscale dacă valoarea nu încape, zecimale doar când sunt tastate, dropdown inline cu drapele (NU modal).

Markup canonic · components/money-input.json

sursa = JSON · generat de scripts/build-catalog.py
0

Când folosești

  • Ecran dedicat facturare — suma e câmpul central, restul (client, dată) e secundar.
  • Quick add / scadență / sumă target — orice flow unde valoarea în lei e decizia primară.
  • NU pe formulare cu 5+ câmpuri — acolo suma nu mai e decizia principală. Folosește .input-group la mărime normală, cu moneda ca addon inline-end: text fix sau buton cu .popover.align-end.

Default · gol

.amount-field · placeholder „0" · cur-select static
0
Suma fără TVA, în moneda aleasă.

Activ · focus cu caret

.amount-value.is-active — caret 2px neutru, animație blink (NU brand)
4.250
Suma fără TVA, în moneda aleasă.

Completat · cu zecimale

.amount-dec — span pentru zecimale, font-size 0.44em, color mist
4.250,50
Suma fără TVA, în moneda aleasă.

Disabled · read-only (ex. pe stornare)

.amount-value culoare mist + .cur-select-trigger.is-disabled (bej-1 bg, chev hidden)
18.500
Suma preluată din factura originală.

Eroare · pe sumă

.amount-field.is-error — value + dec devin var(--c-error); .field-help.error pentru mesaj
120.000
Suma depășește plafonul de 50.000 lei pe factură. Împarte în mai multe facturi.

Eroare · pe selector monedă

.cur-select-trigger.error — border + bg eroare; valoarea rămâne neutră
4.250
Nu am cursul BNR pentru GBP azi. Alege altă monedă sau încearcă mai târziu.

Reguli

  1. Inter 700 · 48px · tabular-nums — non-negociabil. Hero size pentru valoare.
  2. Zecimale doar dacă sunt tastate (sau preluate). Niciodată „0,00" în placeholder — placeholder e doar „0" gri mist.
  3. Caret neutru (ink 2px), NU pink — accent pe sumă vine din mărime, nu din culoare.
  4. Selector lângă valoare, NU sub. Poziția selector-ului nu se schimbă între monede.
  5. Dropdown inline, NU modal. Click în afară / Escape închide.
  6. Autoscale pentru valori lungi — fontul scade de la 48 la min 20px. Implementare în JS consumer.
  7. Eroare pe sumă → .amount-field.is-error (value devine error red). Eroare pe monedă → .cur-select-trigger.error (trigger devine error, valoarea rămâne neutră).