Javaslat 01 – űrlap

Hogyan olvasd: a Javaslat jelű változatot ajánlom. A makettek állóképek (nem kattinthatók). A valódi komponens a jóváhagyás után készül el, billentyűzettel, képernyőolvasóval és tesztlappal. Mind támogatja a sötét módot: kapcsold át a rendszeredben, és a lap is átvált.

1. Keresős legördülő (Combobox) – egyes és többes

molekula

Kiváltja: react-select (19 fájl, ebből 20 helyen CreatableSelect isMulti = címkézés), PoiSelector, PartnerSelector, UserSelector, ExternalHost/LocationSelector. Épül: Radix Popover + DS bc-input, bc-badge; a címkeválasztó (4.) is ezt használja.

A – címkék a mezőben

Javaslat

Egy pillantás: mi van kiválasztva.
Sok elemnél „+3” – a mező nem nő végtelenre, kattintásra kinyílik.
Gépelve szűr, a találat kiemelve; Enter választ, Backspace töröl.

B – összesítő a mezőben, címkék alatta

A mező mindig egy sor – nyugodt űrlap.
Viszont a kijelölés a mezőn kívül él: hosszú űrlapon elválik a mezőtől.
Több helyet foglal.

Állapotok: alap · fókusz · nyitva · töltés (lista) · nincs találat · hiba (lista nem töltött be – „Újrapróbálás”) · tiltott · csak olvasható · mezőhiba.

Szélső esetek a tesztlapon:

0 / 1 / 1000+ opció (keresés, görgetés)
nagyon hosszú opciónév, ékezetes keresés („kave” → „kávé”)
a kiválasztott érték már nincs a listában
új elem létrehozása: üres, csak szóköz, már létező név

2. Dátum- és időválasztó (+ időszak)

molekula

Kiváltja: primereact/calendar (2 fájl, a globálisan szivárgó „saga-blue” témával), react-datepicker (1), nyers datetime-local mezők (BeecoInput). Épül: Radix Popover + DS rács; beírni is lehet (2026. 10. 01.), hét első napja hétfő, magyar hónapnevek. Időszak: analitika-szűrőkhöz.

A – mező + lenyíló naptár

Javaslat

Egyforma minden böngészőben és a partnerben is.
Gépelve is működik (gyors adminnak), naptárral is (telefonon).
Időszakhoz ugyanez, két kijelölt véggel.

B – a böngésző saját választója, DS-kerettel

Nincs mit megírni, telefonon kényelmes.
Böngészőnként más a kinézete és a formátuma (Chrome, Safari, Firefox), a naptár nem igazítható a márkához.
Időszakot nem tud.

Állapotok: alap · fókusz · nyitva · tiltott napok (múlt/jövő) · hiba („a vége a kezdet előtt van”) · csak olvasható · törölhető (üres érték).

Szélső esetek:

szökőnap, óraátállítás napja (okt. 25., márc. 29.)
időzóna: a szerver UTC-t kap, a mező helyi időt mutat
hibás gépelés („2026.13.40”), részleges dátum
kezdet > vég, egész napos esemény

3. Szegmentált kapcsoló (Lista / Térkép, Lista / Csempék)

molekula

Kiváltja: Rajok és Partnerek nézetváltója, a partner-felület nézetváltói. Épül: Radix ToggleGroup + DS.

A – gombsor, kijelölt méz

Javaslat

Ugyanaz a nyelv, mint a gomb és a fül (fekete keret, méz kijelölés).
Sötét módban is erős.

B – halvány sín, fehér kijelölés (a mostani admin-minta)

Csendesebb, ismerős az adminból.
A termékbőrből kilóg (puha, keret nélküli), gyengébb kontraszt a kijelölésnél.

Állapotok / esetek: 2–4 elem · hosszú felirat telefonon (tördelés helyett görgethető sor) · tiltott elem · ikon + szöveg · billentyűzet: nyilak.

4. Címkeválasztó (Tagek)

molekula

Kiváltja: a címkézés CreatableSelect isMulti-jai (20), a partner tag-picker-e, BeecoTag. Épül: 1. Combobox + bc-badge.

A – felhő rövid listánál, legördülő hosszúnál

Javaslat

≤ 20 címkéig egy koppintás (kategóriák, jellemzők).
Fölötte magától az 1. Combobox „A” változata (kereséssel).
Egy komponens, egy API – két megjelenés.

B – mindig legördülő

Egységes, kevés helyet foglal.
Rövid listánál felesleges a keresés, több kattintás.

Esetek: 0 címke · 1 · 200 címke · új címke: üres / szóköz / már létezik (kis-nagybetű, ékezet) · nagyon hosszú címke · max. darabszám.

5. Számmező (mértékegységgel)

molekula

Kiváltja: BeecoInput type="number" (a mostani „kitörli, ha kívül esik” viselkedéssel együtt – helyette szöveges hibaüzenet). Épül: bc-input + bc-affix.

A – gépelős, mértékegységgel

Javaslat

Magyar formátum: ezres szóköz, tizedesvessző (a pontot is elfogadja).
Határon kívül nem töröl, hanem szól: „Legfeljebb 100 lehet.”

B – + / − gombokkal (darabszámhoz)

Kis egész számokhoz (kupon-darab, sorrend) kényelmes, érintésen is.
Nagy számhoz, pénzhez nem jó.

Javaslat: mindkettő legyen, egy komponens két módja (stepper kapcsoló) – az A az alap.

6. A többi – változat nélkül (a meglévő bc- elemek React-változata)

atom / molekula

Elem	Szint	Mire épül (meglévő)	Kiváltja az adminban
Button, IconButton	atom	`bc-btn`, `bc-icon-btn`	BeecoButton, gombnak látszó BeecoLink, ~175 nyers gomb
TextInput, Textarea (számlálóval)	atom	`bc-input`, `bc-textarea`	BeecoInput, BeecoTextArea, CountedTextField
Select (natív, rövid listához)	atom	`bc-select`	BeecoSelect, BeecoControlledSelect
Checkbox, RadioGroup, Switch	atom	`bc-check`, `bc-switch`	nyers jelölők, kapcsolók
Field (címke + mező + segítség + hiba)	molekula	`bc-field`	a mezők címke- és hibakezelése (egységes `aria`)
SearchBox (nagyító + törlés)	molekula	`bc-input` + `bc-icon-btn`	a listák keresőmezői
FormSection, FormActions	organizmus	`bc-card`, `bc-form-grid`, `bc-form-actions`	az Add/Edit oldalak űrlapvázai

SearchBox makett – a többi a meglévő bemutatón látható: termékbőr bemutató.

Döntés

Írd meg a chatben, például: „1A, 2A, 3A, 4A, 5 mindkettő – jóváhagyva”, vagy azt, amit másképp szeretnél. Ez kerül a docs/javaslatok/01-urlap.md Döntés részébe, és utána építek.