เฟส 3 ประกอบ token จากเฟส 2 เป็นของใช้งานจริง — Button · Input · Table · Modal · Nav ครบทุก state/variant ผ่าน AA รองรับ Web + Mobile. แก้ปัญหา audit โดยตรง: ปุ่ม 7 แบบ → 1 ระบบ · ตารางแตก → Table มาตรฐานเดียว
ทุกตัวประกอบจาก token เฟส 2 — เรียก semantic ไม่แตะค่าดิบ → สลับ theme อัตโนมัติ
4 variant × 3 size
6 statestext·select·check·toggle
+ error5 สถานะ
statusเนื้อหา + action
light/darksort·select·pagination
ลูกค้าเน้นheader·body·footer
overlaytop·side·tabs
3 แบบ4 ระดับ
feedbackช่องกรอก ครบ state รวม error · select · checkbox/radio · toggle — แก้ “input 3 แบบ”
ป้ายสถานะสีสื่อความหมาย + การ์ดเนื้อหามาตรฐาน
คอมโพเนนต์ที่สำคัญที่สุด — sort, เลือกแถว, สถานะ, pagination, density · แก้ “ตารางแตกทุกโมดูล” ให้เป็นมาตรฐานเดียว
| นักเรียน | ระดับชั้น | การชำระเงิน ▾ | คะแนนเฉลี่ย | |
|---|---|---|---|---|
| ด.ช. ภูมิ ใจดี | ม.4/1 | ชำระแล้ว | 3.85 | ดู |
| ด.ญ. แพร วงศ์ดี | ม.4/2 | ค้างชำระ | 3.62 | ทวงถาม |
| ด.ช. กฤต มั่นคง | ม.5/1 | รอตรวจสลิป | 3.91 | ดู |
| ด.ญ. มีนา สุขใจ | ม.5/2 | ชำระแล้ว | 3.74 | ดู |
| ด.ช. ธีร์ พัฒนา | ม.6/1 | ชำระแล้ว | 3.98 | ดู |
โครงสร้างหน้า + การโต้ตอบ — modal, เนวิเกชัน 3 แบบ, alert/toast
ทุก component รองรับ Dark จาก token เดียว · ปรับขนาดได้ Web → Mobile (parity React / React Native)
โค้ดเดียวกับ light — สลับด้วย data-theme="dark" · component ไม่รู้จักสีตรงๆ รู้จักแค่ semantic token
กติกาการใช้ — ส่วนหนึ่งที่กัน UI กลับไป “แตก” อีก (ต่อยอดใน governance เฟส 5)
เฟส 3 ให้ “ตัวต่อ” ครบ — Button · Input · Table · Modal · Nav · Alert ผ่าน AA รองรับ light/dark + web/mobile. นี่คือ จุดแก้ครั้งที่ 3. พออนุมัติ เราลงเฟส 4 ประกอบ component เป็น 20+ จอจริง (Dashboard · ตารางเรียน · การชำระเงิน · โปรไฟล์ · Admin) ข้าม 3 แพลตฟอร์ม
รอ R3 จากคุณวิชญ์ (และ ICE) — ติตรงไหนปรับได้ แล้วลุยเฟส 4 ครับ