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

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

@@ -1,130 +0,0 @@
-# Icon
-
-> Vector icon component — render icons từ design system icon set cho actions, navigation, và visual cues.
-
-**Package:** `@momo-kits/foundation`
-**Platform:** RN ✅ | Compose ✅
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `name` | string | icon name | required | Icon identifier từ icon set [VERIFY] |
-| `size` | string | `"inline"` \| `"default"` \| `"standard"` \| `"featured"` \| `"hero"` | `"default"` | Icon size [VERIFY] |
-| `color` | string | `Colors.*` token | `"Colors.black_17"` | Icon color. Có thể inherit từ parent [VERIFY] |
-
----
-
-## Variants
-
-| Size | Dimension | Usage |
-|------|-----------|-------|
-| **inline** | 16×16pt | Inline with text, small indicators |
-| **default** | 20×20pt | Default cho most UI contexts |
-| **standard** | 24×24pt | Navigation bars, action buttons, list items |
-| **featured** | 32×32pt | Emphasized icons, feature highlights |
-| **hero** | 48×48pt | Empty states, onboarding, large call-outs |
-
-### Color Context
-
-| Context | Color Token |
-|---------|-----------|
-| Primary content | `Colors.black_17` |
-| Secondary | `Colors.black_15` |
-| Hint/placeholder | `Colors.black_12` |
-| Disabled | `Colors.black_08` |
-| Accent/interactive | `Colors.pink_03` |
-| Error | `Colors.red_03` |
-| On dark background | `Colors.white` |
-
----
-
-## States
-
-| State | Color | Description |
-|-------|-------|-------------|
-| **Default** | per `color` prop | Normal display |
-| **Disabled** | `Colors.black_08` | Non-interactive context |
-
-Icon là static display. States chỉ ảnh hưởng color.
-
----
-
-## Variant-to-Context Map
-
-| Size | Color | Khi nào dùng | Ví dụ trong MoMo |
-|------|-------|-------------|-------------------|
-| `standard` | `Colors.black_17` | Navigation bar, toolbar icons | Back arrow, search icon trong TopNav |
-| `inline` | `Colors.black_12` | Inline with text | Icon trước hint text |
-| `featured` | `Colors.pink_03` | Feature highlights | Service icons trên Home |
-| `hero` | `Colors.black_12` | Empty state illustrations | Empty transaction list icon |
-
----
-
-## SSR Pattern
-
-### Icon in Navigation Action
-```json
-{
-  "component": "Icon",
-  "props": {
-    "name": "navigation_search",
-    "size": "standard",
-    "color": "Colors.black_17"
-  }
-}
-```
-
-### Icon Inline with Text
-```json
-{
-  "id": "info_row",
-  "type": "row",
-  "children": [
-    {
-      "component": "Icon",
-      "props": {
-        "name": "info_circle",
-        "size": "inline",
-        "color": "Colors.blue_03"
-      }
-    },
-    {
-      "component": "Text",
-      "props": {
-        "content": "Phí giao dịch miễn phí",
-        "typography": "caption_default_regular",
-        "color": "Colors.blue_03"
-      }
-    }
-  ]
-}
-```
-
----
-
-## Accessibility
-
-- Interactive icons: PHẢI có text accessible label. Icon-only button → provide label.
-- Decorative icons (next to text label): ẩn khỏi screen readers.
-- Không rely solely on icon color để convey state — pair với indicators.
-
----
-
-## Usage Guidelines
-
-### Do
-- Dùng predefined sizes consistently.
-- Dùng `Colors.*` tokens cho tất cả icon colors.
-- Provide accessible labels cho tất cả interactive icons.
-- `standard` (24pt) cho navigation/toolbar. `inline` (16pt) cho text.
-
-### Don't
-- Không dùng icon là sole means of communication without accessible label.
-- Không scale icons to arbitrary sizes giữa predefined steps.
-- Không dùng raw hex colors — luôn reference design tokens.
-- Không dùng overly detailed graphics làm icons.

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

@@ -1,81 +0,0 @@
-# Image
-
-## Description
-
-An image display component for rendering photos, illustrations, and banners with built-in loading state support. Image handles URL-based loading, displays a skeleton or placeholder while content is being fetched, and supports aspect ratio control to maintain proper proportions.
-
-**Package:** `@momo-kits/foundation`
-**Platform support:** RN ✅ | Compose ✅
-
----
-
-## Features
-
-| Feature            | Description                                                  |
-|--------------------|--------------------------------------------------------------|
-| **URL loading**    | Loads images from remote URLs with automatic caching         |
-| **Aspect ratio**   | Maintains image proportions via configurable aspect ratio    |
-| **Loading state**  | Displays a skeleton or placeholder while the image loads     |
-| **Error fallback** | Shows a fallback placeholder if the image fails to load      |
-
----
-
-## Loading States
-
-| State       | Visual                                                       |
-|-------------|--------------------------------------------------------------|
-| **Loading** | Skeleton placeholder (animated shimmer) matching the image dimensions |
-| **Loaded**  | Full image displayed, skeleton fades out                     |
-| **Error**   | Static fallback placeholder (generic image icon or custom)   |
-
-- The skeleton placeholder should match the expected dimensions of the final image to prevent layout shifts
-- Transition from skeleton to loaded image should use a subtle fade-in
-
----
-
-## Sizing
-
-- Image dimensions are constrained by the parent container
-- Aspect ratio can be explicitly set to maintain proportions regardless of container size
-- Common aspect ratios: 1:1 (square), 16:9 (banner), 4:3 (photo), 3:2 (landscape)
-- When only width or height is provided, the other dimension is calculated from the aspect ratio
-- If no aspect ratio is specified, the image uses its natural dimensions constrained by the parent
-
----
-
-## Layout
-
-- Images fill their container by default (resize mode: cover)
-- Other resize modes: contain (fit within bounds), stretch (fill exactly), center (no scaling)
-- Corner radius can be applied for rounded images (use `Radius.*` tokens)
-- For circular images (e.g., avatars), apply a radius equal to half the width/height
-- Images should not overflow their container — clip content at the container bounds
-
----
-
-## Accessibility
-
-- **Alt text required:** Always provide descriptive alt text that conveys the content or purpose of the image
-- **Decorative images:** If an image is purely decorative and adds no informational value, mark it as decorative so screen readers skip it
-- **Loading announcement:** Screen readers should not announce the loading state repeatedly — announce once when the image finishes loading if it is meaningful content
-- **Error state:** If the image fails to load, the fallback should convey that the content is unavailable
-
----
-
-## Do's and Don'ts
-
-### Do's
-- Always provide alt text that describes the image content or purpose
-- Set an explicit aspect ratio to prevent layout shifts during loading
-- Use the skeleton loading state for all remotely loaded images
-- Optimize image URLs for the target display size (avoid loading oversized assets)
-- Use appropriate resize mode based on context (cover for banners, contain for logos)
-- Apply `Radius.*` tokens for rounded corners
-
-### Don'ts
-- Don't use Image for vector icons — use the Icon component instead
-- Don't leave alt text empty for meaningful images
-- Don't load full-resolution images when a thumbnail would suffice
-- Don't allow images to cause layout shifts by omitting dimensions or aspect ratio
-- Don't use stretch resize mode for photos — it distorts the content
-- Don't hard-code pixel dimensions when the layout should be responsive to the container

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

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

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

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