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

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

@@ -0,0 +1,107 @@
+# Information
+
+> Inline alert banner — contextual messages with type-based color coding. Info, warning, error, success.
+
+**Package:** `@momo-kits/information`
+**Platform:** RN ✅ | Compose ✅
+**Completeness:** need_update — thiếu Figma
+**Figma node:** [VERIFY]
+
+---
+
+## Props
+
+| Prop | Type | Values | Default | Description |
+|------|------|--------|---------|-------------|
+| `type` | string | `"info"` \| `"warning"` \| `"error"` \| `"success"` | `"info"` | Alert type — determines icon và color scheme |
+| `title` | string | — | — | Bold heading text. Optional — omit for simple messages [VERIFY] |
+| `description` | string | — | required | Body text content |
+| `dismissible` | boolean | `true` \| `false` | `false` | Show close (X) button to dismiss [VERIFY] |
+| `icon` | string | icon name | auto per type | Override default icon. Default: info=info-circle, warning=warning-triangle, error=error-circle, success=check-circle [VERIFY] |
+| `onDismiss` | function | — | — | Callback khi dismiss. `"onDismiss": "setState://hideInfo=true"` |
+
+---
+
+## Variants
+
+| Type | Background | Icon Color | Border | Default Icon |
+|------|-----------|-----------|--------|-------------|
+| **info** | `Colors.blue_01` (light blue) | `Colors.blue_03` | `Colors.blue_02` left border [VERIFY] | info-circle |
+| **warning** | `Colors.orange_01` (light orange) | `Colors.orange_03` | `Colors.orange_02` left border [VERIFY] | warning-triangle |
+| **error** | `Colors.red_01` (light red) | `Colors.red_03` | `Colors.red_02` left border [VERIFY] | error-circle |
+| **success** | `Colors.green_01` (light green) | `Colors.green_03` | `Colors.green_02` left border [VERIFY] | check-circle |
+
+Text color: `Colors.black_17` for all types.
+
+---
+
+## States
+
+| State | Appearance | Interactive |
+|-------|-----------|-------------|
+| **Visible** | Full banner with icon + text | dismissible only |
+| **Dismissed** | Hidden (removed from layout) | false |
+
+---
+
+## Variant-to-Context Map
+
+| Type | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
+|------|-------------|-----------|-------------------|
+| **info** | Neutral helpful information, tips | Urgent alerts | Thông tin khuyến mãi, hướng dẫn sử dụng |
+| **warning** | Caution — action may have consequences | Critical errors | "Số dư không đủ", cảnh báo phí |
+| **error** | Something failed or is invalid | Informational messages | Lỗi giao dịch, validation form errors |
+| **success** | Action completed successfully | Persistent status | "Thanh toán thành công", xác nhận đăng ký |
+
+---
+
+## SSR Pattern
+
+### Inline Warning
+```json
+{
+  "component": "Information",
+  "props": {
+    "type": "warning",
+    "title": "Lưu ý",
+    "description": "Giao dịch trên 10 triệu cần xác thực bổ sung"
+  }
+}
+```
+
+### Dismissible Info
+```json
+{
+  "component": "Information",
+  "props": {
+    "type": "info",
+    "description": "{{data.promotionMessage}}",
+    "dismissible": true
+  },
+  "onDismiss": "setState://hidePromoInfo=true"
+}
+```
+
+---
+
+## Accessibility
+
+- Announce type + content: "Warning: Số dư không đủ".
+- Dismiss button: accessible label "Đóng thông báo".
+- Role: `alert` for error/warning, `status` for info/success.
+
+---
+
+## Usage Guidelines
+
+### Do
+- Dùng cho contextual inline messages within page flow.
+- Match type to severity — info for tips, error for failures.
+- Keep description concise — 1-2 sentences max.
+- Place near relevant content (e.g., error near form field).
+
+### Don't
+- Không dùng cho transient notifications → dùng **Toast** / **SnackBar**.
+- Không dùng cho blocking alerts → dùng **PopupNotify**.
+- Không stack multiple Information banners — consolidate messages.
+- Không dùng success type for persistent status — it implies transience.

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

@@ -0,0 +1,138 @@
+# InputDropDown
+
+> Non-editable input trigger picker/modal — dùng cho selection từ danh sách có sẵn.
+
+**Package:** `@momo-kits/foundation`
+**Platform:** RN ✅ | Compose ✅
+**Completeness:** need_update — thiếu Figma
+**Figma node:** [VERIFY]
+
+---
+
+## Props
+
+| Prop | Type | Values | Default | Description |
+|------|------|--------|---------|-------------|
+| `value` | string | — | `""` | Selected value display text |
+| `floatingValue` | string | — | required | Floating label text |
+| `placeholder` | string | — | — | Hint text khi chưa chọn |
+| `hintText` | string | — | — | Helper text bên dưới |
+| `errorMessage` | string | — | — | Error text. "Vui lòng chọn" |
+| `size` | string | `"large"` \| `"medium"` | `"medium"` | Input size |
+| `disabled` | boolean | `true` \| `false` | `false` | Non-interactive |
+| `required` | boolean | `true` \| `false` | `false` | Required indicator |
+| `trailingIcon` | node | icon | dropdown arrow | Dropdown arrow icon (built-in) [VERIFY] |
+| `onPress` | function | — | — | Callback khi tap — mở picker/modal. `"onPress": "action://openBankPicker"` |
+
+> **CRITICAL:** InputDropDown KHÔNG mở keyboard. Tap = trigger picker/modal/bottom-sheet. KHÔNG dùng cho free-text entry.
+
+---
+
+## States
+
+| State | Border | Text Color | Label Color | Arrow Color | Interactive |
+|-------|--------|-----------|------------|-------------|-------------|
+| **Default** | `Colors.black_04` | `Colors.black_17` | `Colors.black_17` | `Colors.black_12` | true |
+| **Pressed** | `Colors.blue_03` | `Colors.black_17` | `Colors.black_17` | `Colors.black_12` | true |
+| **Filled** | `Colors.black_04` | `Colors.black_17` | `Colors.black_17` | `Colors.black_12` | true |
+| **Error** | `Colors.red_03` | `Colors.black_17` | `Colors.black_17` | `Colors.black_12` | true |
+| **Disabled** | `Colors.black_03` | `Colors.black_08` | `Colors.black_08` | `Colors.black_08` | false |
+
+- Pressed state: chỉ flash khi tap, sau đó open picker → return to filled/default.
+- KHÔNG có Focused/Typing state (không editable).
+
+---
+
+## Variant-to-Context Map
+
+| Context | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
+|---------|-------------|-----------|-------------------|
+| **Bank selection** | Chọn ngân hàng từ danh sách | User cần search trong list dài → combine với search trong picker | Chọn ngân hàng nhận trên form chuyển tiền |
+| **Province/City** | Chọn địa điểm | Free-text address → dùng Input standard | Chọn tỉnh/thành trên form KYC |
+| **Category** | Chọn loại dịch vụ/category | Ít options (2-3) → dùng Radio group | Chọn loại giao dịch trong báo cáo |
+| **Date trigger** | Trigger date picker | — | Chọn ngày sinh (tap → mở DatePicker modal) |
+
+---
+
+## SSR Pattern
+
+### Bank Selection Form
+```json
+{
+  "id": "bank_form",
+  "type": "section",
+  "children": [
+    {
+      "component": "InputDropDown",
+      "props": {
+        "floatingValue": "Ngân hàng",
+        "placeholder": "Chọn ngân hàng",
+        "size": "medium",
+        "required": true,
+        "value": "{{state.selectedBankName}}"
+      },
+      "onPress": "action://openBankPicker"
+    },
+    {
+      "component": "Input",
+      "props": {
+        "floatingValue": "Số tài khoản",
+        "placeholder": "Nhập số tài khoản",
+        "size": "medium",
+        "required": true
+      },
+      "onChange": "setState://accountNumber"
+    },
+    {
+      "component": "Button",
+      "props": {
+        "title": "Tiếp tục",
+        "type": "primary",
+        "size": "large",
+        "full": true
+      },
+      "onPress": "action://verifyAccount"
+    }
+  ]
+}
+```
+
+### Date of Birth Picker
+```json
+{
+  "component": "InputDropDown",
+  "props": {
+    "floatingValue": "Ngày sinh",
+    "placeholder": "DD/MM/YYYY",
+    "size": "medium",
+    "required": true,
+    "value": "{{state.dateOfBirth}}"
+  },
+  "onPress": "action://openDatePicker"
+}
+```
+
+---
+
+## Accessibility
+
+- Role: "button" hoặc "combobox" — screen reader announce là selectable, không phải text input.
+- Announce: "Ngân hàng, dropdown, double tap to open".
+- Khi có selected value: announce value ("Vietcombank selected").
+- Picker/modal phải manage focus — return focus to dropdown khi dismiss.
+
+---
+
+## Usage Guidelines
+
+### Do
+- Luôn có floating label.
+- Show selected value rõ ràng sau khi chọn.
+- Dropdown arrow phải luôn visible — visual cue đây là selector.
+- Picker có search khi list dài (>10 options).
+
+### Don't
+- **KHÔNG BAO GIỜ** dùng cho free-text entry — đây là hard rule.
+- Không hide dropdown arrow icon.
+- Không dùng khi chỉ có 2-3 options — dùng **Radio** group.
+- Không dùng cho toggle on/off — dùng **Switch**.

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

@@ -0,0 +1,157 @@
+# InputMoney
+
+> Currency input với auto-formatting và currency symbol — dùng cho mọi field nhập số tiền 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 (raw number string) |
+| `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"` | Input size |
+| `disabled` | boolean | `true` \| `false` | `false` | Non-interactive state |
+| `required` | boolean | `true` \| `false` | `false` | Required indicator |
+| `currencySymbol` | string | `"đ"` \| `"VND"` \| custom | `"đ"` | Currency symbol hiển thị [VERIFY] |
+| `maxAmount` | number | — | — | Maximum allowed value. Show error khi vượt [VERIFY] |
+| `showClearButton` | boolean | `true` \| `false` | `true` | Clear button ở typing/filled/error [VERIFY] |
+| `onChange` | function | — | — | Callback khi value thay đổi. `"onChange": "setState://amount"` |
+| `onFocus` | function | — | — | Callback khi focus |
+| `onBlur` | function | — | — | Callback khi blur |
+| `onClear` | function | — | — | Callback khi clear [VERIFY] |
+
+> **Keyboard:** numeric. Auto-format với dấu phân cách hàng nghìn (1.000.000).
+
+---
+
+## 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 |
+|---------|-------------|-----------|-------------------|
+| **Transfer amount** | Nhập số tiền chuyển khoản | Nhập số lượng item — dùng Input standard | Màn hình chuyển tiền — field "Số tiền" |
+| **Top-up** | Nhập số tiền nạp | Amount cố định từ list — dùng Chip group | Nạp tiền điện thoại, nạp ví |
+| **Bill payment** | Nhập số tiền thanh toán | Amount auto-fill từ hóa đơn — show read-only | Thanh toán điện, nước, internet |
+| **Large prominent** | Amount là focus chính của screen | Trong form nhiều fields — dùng medium | Màn hình nhập tiền chuyển khoản (size large) |
+
+---
+
+## SSR Pattern
+
+### Transfer Amount Screen
+```json
+{
+  "id": "amount_section",
+  "type": "section",
+  "children": [
+    {
+      "component": "InputMoney",
+      "props": {
+        "floatingValue": "Số tiền",
+        "placeholder": "Nhập số tiền",
+        "size": "large",
+        "required": true,
+        "errorMessage": "{{state.amountError}}"
+      },
+      "onChange": "setState://amount"
+    },
+    {
+      "component": "Information",
+      "props": {
+        "type": "info",
+        "content": "Số dư khả dụng: {{data.balance}}"
+      }
+    },
+    {
+      "component": "Button",
+      "props": {
+        "title": "Chuyển tiền",
+        "type": "primary",
+        "size": "large",
+        "full": true
+      },
+      "onPress": "action://transfer"
+    }
+  ]
+}
+```
+
+### Quick Amount Chips + Input
+```json
+{
+  "id": "topup_section",
+  "type": "section",
+  "children": [
+    {
+      "id": "preset_amounts",
+      "type": "row",
+      "scrollable": true,
+      "forEach": "{{data.presetAmounts}}",
+      "render": {
+        "component": "Chip",
+        "props": {
+          "label": "{{item.label}}",
+          "size": "small",
+          "selected": "{{state.amount == item.value}}"
+        },
+        "onPress": "setState://amount={{item.value}}"
+      }
+    },
+    {
+      "component": "InputMoney",
+      "props": {
+        "floatingValue": "Hoặc nhập số tiền khác",
+        "size": "medium",
+        "value": "{{state.amount}}"
+      },
+      "onChange": "setState://amount"
+    }
+  ]
+}
+```
+
+---
+
+## Accessibility
+
+- Floating label required — screen reader phải announce "Số tiền" label.
+- Formatted value phải announce numeric value, không announce separators.
+- Error message linked — "Số tiền vượt hạn mức" phải announce khi validation fails.
+- Keyboard: numeric only.
+
+---
+
+## Usage Guidelines
+
+### Do
+- Dùng `size="large"` khi amount là focus chính của screen.
+- Show balance/limit hint via `hintText` hoặc `Information` component bên dưới.
+- Auto-format thousands separator khi typing.
+- Show currency symbol rõ ràng.
+
+### Don't
+- Không dùng cho nhập số lượng đơn vị — dùng **Input** standard.
+- Không dùng cho nhập mã code — dùng **InputOTP**.
+- Không remove formatting khi typing — user cần visual feedback.
+- Không hide currency symbol.

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

@@ -0,0 +1,132 @@
+# 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

@@ -0,0 +1,140 @@
+# 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.