@momo-kits/native-kits 0.158.1-beta.1-debug → 0.158.1-beta.2-debug

package/.claude/skills/design-system/references/components/input-otp.md

@@ -1,132 +0,0 @@
-# InputOTP
-
-> Code entry với individual character cells — dùng cho xác thực OTP, mã PIN hiển thị trong MoMo.
-
-**Package:** `@momo-kits/foundation`
-**Platform:** RN ✅ | Compose ✅
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `length` | number | `4` \| `5` \| `6` | `6` | Số ô nhập (cells) [VERIFY] |
-| `value` | string | — | `""` | Current OTP value |
-| `errorMessage` | string | — | — | Error text bên dưới cells |
-| `disabled` | boolean | `true` \| `false` | `false` | Non-interactive state |
-| `autoFocus` | boolean | `true` \| `false` | `true` | Auto focus cell đầu tiên khi mount [VERIFY] |
-| `onComplete` | function | — | — | Callback khi nhập đủ digits. `"onComplete": "action://verifyOTP"` [VERIFY] |
-| `onChange` | function | — | — | Callback mỗi digit thay đổi. `"onChange": "setState://otpValue"` |
-
-> **Khác biệt lớn:** InputOTP KHÔNG dùng floating label, prefix, suffix, hintText, size prop. Anatomy hoàn toàn khác các Input variants khác.
-
----
-
-## States
-
-| State | Cell Border | Cell Background | Digit Color | Error Color | Interactive |
-|-------|------------|----------------|------------|-------------|-------------|
-| **Empty** | `Colors.black_04` | `Colors.white` | — | — | true |
-| **Focused** | `Colors.blue_03` | `Colors.white` | `Colors.black_17` | — | true |
-| **Filled** | `Colors.black_04` | `Colors.white` | `Colors.black_17` | — | true |
-| **Error** | `Colors.red_03` | `Colors.white` | `Colors.black_17` | `Colors.red_03` | true |
-| **Disabled** | `Colors.black_03` | `Colors.white` | `Colors.black_08` | — | false |
-
-- Error state: TẤT CẢ cells chuyển border sang `Colors.red_03`, không chỉ cell sai.
-- Focused cell: chỉ 1 cell có `Colors.blue_03` border tại mỗi thời điểm.
-- Auto-advance: nhập 1 digit → focus tự chuyển sang cell tiếp theo.
-- Auto-paste: paste SMS OTP → fill tất cả cells cùng lúc.
-
----
-
-## Variant-to-Context Map
-
-| Context | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| **OTP verification** | Xác thực giao dịch qua SMS/email code | Code dài >6 digits — dùng Input standard | OTP xác nhận chuyển tiền, OTP đăng nhập |
-| **Confirmation code** | Nhập mã xác nhận từ email/app | Code có chữ cái — InputOTP chỉ numeric | Mã xác nhận từ email MoMo |
-| **PIN display** | Nhập PIN hiển thị (không mask) | Cần mask dots → dùng Input standard + secureTextEntry | — |
-
----
-
-## SSR Pattern
-
-### OTP Verification Screen
-```json
-{
-  "id": "otp_section",
-  "type": "section",
-  "children": [
-    {
-      "component": "Text",
-      "props": {
-        "content": "Nhập mã xác thực",
-        "typography": "heading_default_bold"
-      }
-    },
-    {
-      "component": "Text",
-      "props": {
-        "content": "Mã OTP đã gửi đến {{data.maskedPhone}}",
-        "typography": "body_default_regular"
-      }
-    },
-    {
-      "component": "InputOTP",
-      "props": {
-        "length": 6,
-        "errorMessage": "{{state.otpError}}",
-        "autoFocus": true
-      },
-      "onComplete": "action://verifyOTP",
-      "onChange": "setState://otpValue"
-    },
-    {
-      "component": "Text",
-      "props": {
-        "content": "Gửi lại sau {{state.countdown}}s",
-        "typography": "caption_default_regular"
-      }
-    },
-    {
-      "component": "Button",
-      "props": {
-        "title": "Gửi lại mã",
-        "type": "textlink",
-        "disabled": "{{state.countdown > 0}}"
-      },
-      "onPress": "action://resendOTP"
-    }
-  ]
-}
-```
-
----
-
-## Accessibility
-
-- Each cell phải có accessible label: "Digit 1 of 6", "Digit 2 of 6", etc.
-- Auto-advance phải announce: "Moving to next digit".
-- Error announcement: screen reader phải announce error message khi validation fails.
-- Keyboard: numeric only.
-- Auto-paste: support clipboard paste cho toàn bộ OTP.
-
----
-
-## Usage Guidelines
-
-### Do
-- Dùng `autoFocus` để focus cell đầu tiên ngay khi screen mount.
-- Support auto-paste từ SMS — user không cần nhập từng digit.
-- Show countdown timer cho resend OTP.
-- Clear error state khi user bắt đầu nhập lại.
-- Dùng `length=6` cho OTP standard, `length=4` cho short codes.
-
-### Don't
-- Không dùng InputOTP cho password — dùng **Input** standard + secureTextEntry.
-- Không dùng cho text codes có chữ cái — InputOTP chỉ numeric.
-- Không disable auto-paste — đây là UX critical cho OTP flow.
-- Không show timer quá 5 phút — user sẽ bỏ flow.

package/.claude/skills/design-system/references/components/input-phone-number.md

@@ -1,140 +0,0 @@
-# InputPhoneNumber
-
-> Phone number input với country code prefix — dùng cho nhập số điện thoại trong MoMo.
-
-**Package:** `@momo-kits/foundation`
-**Platform:** RN ✅ | Compose ✅
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `value` | string | — | `""` | Phone number value (without country code) |
-| `floatingValue` | string | — | required | Floating label text |
-| `placeholder` | string | — | — | Hint text ("0912 345 678") |
-| `hintText` | string | — | — | Helper text bên dưới |
-| `errorMessage` | string | — | — | Error text. "Số điện thoại không hợp lệ" |
-| `size` | string | `"large"` \| `"medium"` | `"medium"` | Input size |
-| `disabled` | boolean | `true` \| `false` | `false` | Non-interactive |
-| `required` | boolean | `true` \| `false` | `false` | Required indicator |
-| `countryCode` | string | `"+84"` \| `"+1"` \| ... | `"+84"` | Country code prefix [VERIFY] |
-| `showClearButton` | boolean | `true` \| `false` | `true` | Clear button [VERIFY] |
-| `onChange` | function | — | — | Callback khi value thay đổi |
-| `onFocus` | function | — | — | Callback khi focus |
-| `onBlur` | function | — | — | Callback khi blur |
-| `onClear` | function | — | — | Callback khi clear [VERIFY] |
-
-> **Keyboard:** phone-pad. Country code prefix hiển thị built-in, user chỉ nhập số phone.
-
----
-
-## States
-
-| State | Border | Text Color | Label Color | Error Color | Cursor | Clear Btn | Interactive |
-|-------|--------|-----------|------------|-------------|--------|-----------|-------------|
-| **Default** | `Colors.black_04` | `Colors.black_17` | `Colors.black_17` | — | hidden | hidden | true |
-| **Focused** | `Colors.blue_03` | `Colors.black_17` | `Colors.black_17` | — | visible | hidden | true |
-| **Typing** | `Colors.blue_03` | `Colors.black_17` | `Colors.black_17` | — | visible | visible | true |
-| **Filled** | `Colors.black_04` | `Colors.black_17` | `Colors.black_17` | — | hidden | visible | true |
-| **Error** | `Colors.red_03` | `Colors.black_17` | `Colors.black_17` | `Colors.red_03` | hidden | visible | true |
-| **Disabled** | `Colors.black_03` | `Colors.black_08` | `Colors.black_08` | — | hidden | hidden | false |
-
----
-
-## Variant-to-Context Map
-
-| Context | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| **Receiver phone** | Nhập SĐT người nhận | Nhập từ contacts → auto-fill, không cần manual input | Form chuyển tiền — SĐT người nhận |
-| **Registration** | Nhập SĐT đăng ký | Đã có SĐT từ SIM → auto-detect [VERIFY] | Đăng ký tài khoản MoMo |
-| **Verification** | Nhập SĐT để verify | — | Xác thực số điện thoại, KYC |
-
----
-
-## SSR Pattern
-
-### Transfer to Phone
-```json
-{
-  "id": "transfer_form",
-  "type": "section",
-  "children": [
-    {
-      "component": "InputPhoneNumber",
-      "props": {
-        "floatingValue": "Số điện thoại người nhận",
-        "placeholder": "0912 345 678",
-        "countryCode": "+84",
-        "size": "medium",
-        "required": true,
-        "errorMessage": "{{state.phoneError}}"
-      },
-      "onChange": "setState://receiverPhone"
-    },
-    {
-      "component": "InputMoney",
-      "props": {
-        "floatingValue": "Số tiền",
-        "size": "large",
-        "required": true
-      },
-      "onChange": "setState://amount"
-    },
-    {
-      "component": "Button",
-      "props": {
-        "title": "Chuyển tiền",
-        "type": "primary",
-        "size": "large",
-        "full": true
-      },
-      "onPress": "action://transfer"
-    }
-  ]
-}
-```
-
-### Registration Form
-```json
-{
-  "component": "InputPhoneNumber",
-  "props": {
-    "floatingValue": "Số điện thoại",
-    "placeholder": "Nhập số điện thoại",
-    "countryCode": "+84",
-    "size": "large",
-    "required": true,
-    "errorMessage": "{{state.phoneError}}"
-  },
-  "onChange": "setState://phoneNumber"
-}
-```
-
----
-
-## Accessibility
-
-- Floating label required.
-- Country code announce: "+84, Vietnam".
-- Phone number format announce digits, không announce spaces.
-- Error linked.
-- Keyboard: phone-pad.
-
----
-
-## Usage Guidelines
-
-### Do
-- Default country code `+84` cho Vietnam market.
-- Cho phép chọn country code khác nếu app support international.
-- Validate phone format trên blur.
-- Auto-format phone number với spaces (0912 345 678).
-
-### Don't
-- Không dùng cho nhập số tài khoản ngân hàng — dùng **Input** standard.
-- Không dùng cho nhập OTP — dùng **InputOTP**.
-- Không require user nhập country code manually — phải có picker.

package/.claude/skills/design-system/references/components/input-search.md

@@ -1,124 +0,0 @@
-# InputSearch
-
-> Search bar với search icon prefix và cancel action — dùng cho mọi search flow trong MoMo.
-
-**Package:** `@momo-kits/foundation`
-**Platform:** RN ✅ | Compose ✅
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `value` | string | — | `""` | Current search query |
-| `placeholder` | string | — | `"Tìm kiếm"` | Hint text. Không dùng floating label [VERIFY] |
-| `hintText` | string | — | — | Helper text bên dưới (hiếm dùng cho search) |
-| `errorMessage` | string | — | — | Error text (hiếm dùng cho search) |
-| `size` | string | `"large"` \| `"medium"` | `"medium"` | Search bar size |
-| `disabled` | boolean | `true` \| `false` | `false` | Non-interactive |
-| `showClearButton` | boolean | `true` \| `false` | `true` | Clear button khi có value [VERIFY] |
-| `onChange` | function | — | — | Callback mỗi keystroke. `"onChange": "setState://searchQuery"` |
-| `onFocus` | function | — | — | Callback khi focus — thường trigger search UI |
-| `onBlur` | function | — | — | Callback khi blur |
-| `onClear` | function | — | — | Callback khi clear [VERIFY] |
-| `onCancel` | function | — | — | Callback khi tap Cancel button. Clear value + dismiss focus [VERIFY] |
-
-> **Khác biệt:** InputSearch có search icon prefix built-in và Cancel button appears on focus. Có thể KHÔNG dùng `floatingValue` mà dùng `placeholder` trực tiếp [VERIFY].
-
----
-
-## States
-
-| State | Border | Text Color | Icon Color | Cancel Btn | Clear Btn | Interactive |
-|-------|--------|-----------|-----------|------------|-----------|-------------|
-| **Default** | `Colors.black_04` | `Colors.black_17` | `Colors.black_12` | hidden | hidden | true |
-| **Focused** | `Colors.blue_03` | `Colors.black_17` | `Colors.black_12` | visible | hidden | true |
-| **Typing** | `Colors.blue_03` | `Colors.black_17` | `Colors.black_12` | visible | visible | true |
-| **Filled** | `Colors.black_04` | `Colors.black_17` | `Colors.black_12` | hidden | visible | true |
-| **Disabled** | `Colors.black_03` | `Colors.black_08` | `Colors.black_08` | hidden | hidden | false |
-
----
-
-## Variant-to-Context Map
-
-| Context | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| **List search** | Tìm kiếm trong danh sách dài | Chỉ filter đơn giản 3-5 options — dùng Chip group | Search giao dịch lịch sử, search contacts |
-| **Service search** | Tìm dịch vụ/merchant | Danh mục cố định — dùng tabs/chips | Search dịch vụ trên Home, search merchant |
-| **Global search** | Search bar chính của app | — | Search bar trên Home screen MoMo |
-
----
-
-## SSR Pattern
-
-### Search with Results List
-```json
-{
-  "id": "search_section",
-  "type": "section",
-  "children": [
-    {
-      "component": "InputSearch",
-      "props": {
-        "placeholder": "Tìm kiếm giao dịch",
-        "size": "medium"
-      },
-      "onChange": "setState://searchQuery"
-    },
-    {
-      "id": "search_results",
-      "type": "section",
-      "forEach": "{{data.searchResults}}",
-      "render": {
-        "component": "ListItem",
-        "props": {
-          "title": "{{item.title}}",
-          "subtitle": "{{item.date}}",
-          "rightText": "{{item.amount}}"
-        },
-        "onPress": "navigate://TransactionDetail?id={{item.id}}"
-      }
-    }
-  ]
-}
-```
-
-### Global Search Bar
-```json
-{
-  "component": "InputSearch",
-  "props": {
-    "placeholder": "Tìm dịch vụ, bạn bè...",
-    "size": "large"
-  },
-  "onFocus": "navigate://SearchScreen",
-  "onChange": "setState://globalSearch"
-}
-```
-
----
-
-## Accessibility
-
-- Search icon phải accessible — role "search".
-- Placeholder announce: "Tìm kiếm giao dịch, search field".
-- Cancel button: announce "Cancel search".
-- Results count announce khi results change: "5 results found".
-
----
-
-## Usage Guidelines
-
-### Do
-- Dùng full width cho search bar.
-- Show Cancel button khi focused — cho phép user dismiss nhanh.
-- Implement live search (debounced) hoặc search on submit.
-- Clear results khi query cleared.
-
-### Don't
-- Không dùng cho simple filter — dùng **Chip** group.
-- Không hide search icon — user cần visual cue đây là search.
-- Không disable Cancel khi focused — luôn cho phép dismiss.

package/.claude/skills/design-system/references/components/input-text-area.md

@@ -1,133 +0,0 @@
-# InputTextArea
-
-> Multiline text input — container grows vertically theo content cho đến max height.
-
-**Package:** `@momo-kits/foundation`
-**Platform:** RN ✅ | Compose ✅
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `value` | string | — | `""` | Current input value (multiline) |
-| `floatingValue` | string | — | required | Floating label text |
-| `placeholder` | string | — | — | Hint text khi chưa có value |
-| `hintText` | string | — | — | Helper text bên dưới container |
-| `errorMessage` | string | — | — | Error text. Replaces hintText |
-| `size` | string | `"large"` \| `"medium"` | `"medium"` | Initial input size |
-| `disabled` | boolean | `true` \| `false` | `false` | Non-interactive state |
-| `editable` | boolean | `true` \| `false` | `true` | `false` = read-only [VERIFY] |
-| `required` | boolean | `true` \| `false` | `false` | Required indicator |
-| `maxLines` | number | — | — | Max dòng trước khi scroll [VERIFY] |
-| `maxHeight` | number | — | — | Max chiều cao container [VERIFY] |
-| `showClearButton` | boolean | `true` \| `false` | `true` | Clear button [VERIFY] |
-| `onChange` | function | — | — | Callback khi value thay đổi |
-| `onFocus` | function | — | — | Callback khi focus |
-| `onBlur` | function | — | — | Callback khi blur |
-| `onClear` | function | — | — | Callback khi clear [VERIFY] |
-
-> **Khác biệt so với Input:** Container height KHÔNG cố định — grows vertically theo content. Keyboard default (multiline enter).
-
----
-
-## States
-
-| State | Border | Text Color | Label Color | Error Color | Cursor | Clear Btn | Interactive |
-|-------|--------|-----------|------------|-------------|--------|-----------|-------------|
-| **Default** | `Colors.black_04` | `Colors.black_17` | `Colors.black_17` | — | hidden | hidden | true |
-| **Focused** | `Colors.blue_03` | `Colors.black_17` | `Colors.black_17` | — | visible | hidden | true |
-| **Typing** | `Colors.blue_03` | `Colors.black_17` | `Colors.black_17` | — | visible | visible | true |
-| **Filled** | `Colors.black_04` | `Colors.black_17` | `Colors.black_17` | — | hidden | visible | true |
-| **Error** | `Colors.red_03` | `Colors.black_17` | `Colors.black_17` | `Colors.red_03` | hidden | visible | true |
-| **Disabled** | `Colors.black_03` | `Colors.black_08` | `Colors.black_08` | — | hidden | hidden | false |
-
----
-
-## Variant-to-Context Map
-
-| Context | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| **Long note** | Nhập text dài nhiều dòng | Text ngắn 1 dòng — dùng Input standard | Ghi chú chuyển tiền dài, lý do hoàn tiền |
-| **Description** | Mô tả chi tiết | Chỉ cần 1 field ngắn | Mô tả yêu cầu hỗ trợ, feedback |
-| **Message** | Tin nhắn dạng freeform | Structured input — dùng form fields riêng | Nhắn tin cho merchant, comment |
-
----
-
-## SSR Pattern
-
-### Feedback Form
-```json
-{
-  "id": "feedback_section",
-  "type": "section",
-  "children": [
-    {
-      "component": "Rating",
-      "props": {
-        "value": "{{state.rating}}"
-      },
-      "onChange": "setState://rating"
-    },
-    {
-      "component": "InputTextArea",
-      "props": {
-        "floatingValue": "Nhận xét của bạn",
-        "placeholder": "Chia sẻ trải nghiệm...",
-        "size": "medium",
-        "maxLines": 5
-      },
-      "onChange": "setState://feedback"
-    },
-    {
-      "component": "Button",
-      "props": {
-        "title": "Gửi đánh giá",
-        "type": "primary",
-        "size": "large",
-        "full": true
-      },
-      "onPress": "action://submitFeedback"
-    }
-  ]
-}
-```
-
-### Transfer Note
-```json
-{
-  "component": "InputTextArea",
-  "props": {
-    "floatingValue": "Lời nhắn",
-    "placeholder": "Nhập ghi chú cho người nhận",
-    "size": "medium",
-    "maxLines": 3
-  },
-  "onChange": "setState://transferNote"
-}
-```
-
----
-
-## Accessibility
-
-- Floating label required cho screen readers.
-- Announce multiline capability — "text area, 3 of 5 lines".
-- Error message linked.
-- Touch target: full container tappable.
-
----
-
-## Usage Guidelines
-
-### Do
-- Set `maxLines` hoặc `maxHeight` để tránh content chiếm toàn bộ screen.
-- Dùng `placeholder` để guide content ("Chia sẻ trải nghiệm...").
-- Show character count nếu có limit [VERIFY — cần check prop].
-
-### Don't
-- Không dùng cho text ngắn 1 dòng — dùng **Input** standard.
-- Không set maxLines quá nhỏ (1-2) — vô nghĩa, dùng Input standard.

package/.claude/skills/design-system/references/components/input.md

@@ -1,152 +0,0 @@
-# Input
-
-> Single-line text input với floating label — form control cơ bản cho mọi dạng nhập text trong MoMo.
-
-**Package:** `@momo-kits/foundation`
-**Platform:** RN ✅ | Compose ✅
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `value` | string | — | `""` | Current input value |
-| `floatingValue` | string | — | required | Floating label text. Animates từ placeholder position lên trên khi focus/filled |
-| `placeholder` | string | — | — | Hint text khi chưa có value |
-| `hintText` | string | — | — | Helper text hiển thị bên dưới container |
-| `errorMessage` | string | — | — | Error text bên dưới container. Khi có, replaces hintText |
-| `size` | string | `"large"` \| `"medium"` | `"medium"` | Input size. Maps to `InputSize.Large` / `InputSize.Medium` |
-| `disabled` | boolean | `true` \| `false` | `false` | Non-interactive state |
-| `editable` | boolean | `true` \| `false` | `true` | `false` = read-only state [VERIFY] |
-| `required` | boolean | `true` \| `false` | `false` | Hiển thị required indicator bên cạnh label |
-| `prefix` | node | icon \| text | — | Element ở đầu input |
-| `trailingIcon` | node | icon | — | Icon ở cuối input |
-| `showClearButton` | boolean | `true` \| `false` | `true` | Clear button xuất hiện ở typing/filled/error states [VERIFY] |
-| `showInformationIcon` | boolean | `true` \| `false` | `false` | Optional info icon [VERIFY] |
-| `image` | node | — | — | Optional image inside input [VERIFY] |
-| `onChange` | function | — | — | Callback khi value thay đổi. `"onChange": "setState://fieldName"` |
-| `onFocus` | function | — | — | Callback khi input nhận focus |
-| `onBlur` | function | — | — | Callback khi input mất focus |
-| `onClear` | function | — | — | Callback khi tap clear button [VERIFY] |
-
----
-
-## States
-
-| State | Border | Text Color | Label Color | Error Color | Cursor | Clear Btn | Interactive |
-|-------|--------|-----------|------------|-------------|--------|-----------|-------------|
-| **Default** | `Colors.black_04` | `Colors.black_17` | `Colors.black_17` | — | hidden | hidden | true |
-| **Focused** | `Colors.blue_03` | `Colors.black_17` | `Colors.black_17` | — | visible | hidden | true |
-| **Typing** | `Colors.blue_03` | `Colors.black_17` | `Colors.black_17` | — | visible | visible | true |
-| **Filled** | `Colors.black_04` | `Colors.black_17` | `Colors.black_17` | — | hidden | visible | true |
-| **Error** | `Colors.red_03` | `Colors.black_17` | `Colors.black_17` | `Colors.red_03` | hidden | visible | true |
-| **Disabled** | `Colors.black_03` | `Colors.black_08` | `Colors.black_08` | — | hidden | hidden | false |
-| **Read-only** | `Colors.black_04` | `Colors.black_17` | `Colors.black_17` | — | hidden | hidden | false |
-
-**Floating label behavior:**
-- Default (no value): label inside at placeholder position
-- Focus hoặc có value: label animates upward, reduces in size
-
-**Support text priority:** Error > Read-only ("Không thể chỉnh sửa") > Hint
-
----
-
-## Variant-to-Context Map
-
-| Context | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| **Text entry** | Nhập text ngắn 1 dòng trong form | Cần nhập số tiền → `InputMoney`, SĐT → `InputPhoneNumber` | Họ tên form KYC, địa chỉ giao hàng |
-| **With prefix** | Field có icon/label prefix | Icon không mang ý nghĩa → bỏ prefix | Email field với @ icon |
-| **Read-only display** | Show value không cho edit | Cần interactive display → dùng Text component | Thông tin tài khoản đã xác thực |
-
----
-
-## SSR Pattern
-
-### Standard Form
-```json
-{
-  "id": "form_section",
-  "type": "section",
-  "children": [
-    {
-      "component": "Input",
-      "props": {
-        "floatingValue": "Họ và tên",
-        "placeholder": "Nhập họ và tên",
-        "size": "medium",
-        "required": true
-      },
-      "onChange": "setState://fullName"
-    },
-    {
-      "component": "Input",
-      "props": {
-        "floatingValue": "Email",
-        "placeholder": "example@email.com",
-        "size": "medium"
-      },
-      "onChange": "setState://email"
-    },
-    {
-      "component": "Button",
-      "props": {
-        "title": "Tiếp tục",
-        "type": "primary",
-        "size": "large",
-        "full": true,
-        "disabled": "{{state.fullName == ''}}"
-      },
-      "onPress": "action://submitForm"
-    }
-  ]
-}
-```
-
-### Input with Validation Error
-```json
-{
-  "component": "Input",
-  "props": {
-    "floatingValue": "Email",
-    "placeholder": "example@email.com",
-    "size": "medium",
-    "required": true,
-    "errorMessage": "{{state.emailError}}",
-    "value": "{{state.email}}"
-  },
-  "onChange": "setState://email"
-}
-```
-
----
-
-## Accessibility
-
-- Every input phải có floating label cho screen readers. Không dùng placeholder thay label.
-- Error message phải programmatically associated với input.
-- Tap label hoặc container area = focus input.
-- Read-only: screen reader phải announce non-editable status.
-
----
-
-## Usage Guidelines
-
-### Do
-- Luôn cung cấp floating label — không dùng placeholder thay label.
-- Error message inline bên dưới input, không dùng alert/toast.
-- Dùng hint text để clarify format ("DD/MM/YYYY").
-- Clear error state ngay khi user sửa input.
-- Read-only PHẢI có support text.
-
-### Don't
-- Không dùng disabled input để hiển thị read-only info — dùng **Text**.
-- Không stack nhiều error messages cho 1 input.
-- Không ẩn floating label khi input có value.
-- Hint text không quá 2 dòng.
-- Cần nhập tiền → dùng **InputMoney**, không dùng Input standard.
-- Cần nhập SĐT → dùng **InputPhoneNumber**.
-- Cần nhập OTP → dùng **InputOTP**.