Bileşenler

AmountInput

Provider dilinde yazılan ve kuruş cinsinden kesin değer bildiren tutar alanı; kayan nokta kullanmaz.

Storybook: Storybook
Kaynak kod: Kaynak kod

Durumlar

Durum	Görünüm	Token’lar
Varsayılan	Giriş sınırı, soluk para birimi	`color-border-input`, `color-text-subtle`
Odak	Odak sınırı ve halkası, koyu para birimi	`color-border-focus`, `color-text-default`
Hata	Tehlike sınırı ve mesaj	`color-border-danger`
Devre dışı	Devre dışı yüzey	`color-surface-disabled`

Ölçüler

Özellik	Değer	Token
Yükseklik	32 / 36 / 40 px	`input-height-sm`, `input-height-md`, `input-height-lg`
Yatay iç boşluk	12 px	`input-padding-inline`

Token’lar

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Örnek	Açık mod	Koyu mod
`--bigbang-input-height-md`		`36px36px36px`	`36px36px36px`
`--bigbang-input-height-lg`		`40px40px40px`	`40px40px40px`
`--bigbang-input-padding-inline`		`12px12px12px`	`12px12px12px`
`--bigbang-color-border-input`		`#8c8c8c#8c8c8c#8c8c8c`	`#737373#737373#737373`
`--bigbang-color-border-focus`		`#146d83#171717#171717`	`#77bacf#e5e5e5#e5e5e5`
`--bigbang-color-border-danger`		`#c14347#c14347#c14347`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-color-text-subtle`		`#404040#404040#404040`	`#d4d4d4#d4d4d4#d4d4d4`
`--bigbang-motion-hover-duration`		`0.11s0.11s0.11s`	`0.11s0.11s0.11s`

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Odak ve hata	Sınır ve dolgu rengi geçişi (`motion.field`)	`motion-focus-duration`	`motion-focus-easing`	Aynı; yalnızca renk.
Para birimi	Odakta koyulaşır	`motion-hover-duration`	`motion-hover-easing`	Aynı; yalnızca renk.
Hata mesajı	Kayarak belirir (`motion.fieldMessage`)	`motion-collapsible-duration`	`motion-collapsible-easing`	Yalnızca solar.