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

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

@@ -1,87 +0,0 @@
-# Loader
-
-> Loading spinner/dot animation — full-screen loading states và initial data fetches.
-
-**Package:** `@momo-kits/foundation`
-**Platform:** RN ✅ | Compose ❌ (dùng `CircularProgressIndicator` hoặc Skeleton)
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `type` | string | `"spinner"` \| `"dot"` | `"spinner"` | Loader variant [VERIFY] |
-| `color` | string | `Colors.*` token | `"Colors.pink_03"` | Loader color [VERIFY] |
-
----
-
-## Variants
-
-| Variant | Animation | Usage |
-|---------|----------|-------|
-| **spinner** | Continuous circular rotation | General-purpose loading |
-| **dot** | Sequential pulsing/scaling dots | Lighter, playful contexts |
-
----
-
-## States
-
-| State | Color | Animation | Description |
-|-------|-------|----------|-------------|
-| **Loading** | `Colors.pink_03` | Active | Continuous animation |
-
----
-
-## Variant-to-Context Map
-
-| Variant | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| **spinner** | Full-screen loading, screen transitions | Inline content loading → dùng Skeleton | App initialization, screen data fetch |
-| **dot** | Lighter loading contexts | Formal/serious screens | Chat typing indicator, playful loading |
-
----
-
-## SSR Pattern
-
-### Full-screen Loading
-```json
-{
-  "id": "loading_screen",
-  "type": "center",
-  "children": [
-    {
-      "component": "Loader",
-      "props": {
-        "type": "spinner"
-      }
-    }
-  ]
-}
-```
-
----
-
-## Accessibility
-
-- Loader announce "Đang tải" cho screen readers.
-- Khi loading complete → loaded content nhận focus.
-- Loader không focusable hoặc interactive.
-
----
-
-## Usage Guidelines
-
-### Do
-- Dùng cho full-screen loading states.
-- Dùng cho initial data fetches khi no layout structure known.
-- Center loader trong available space.
-- Spinner cho general-purpose, dot cho lighter contexts.
-
-### Don't
-- Không dùng cho inline content loading → dùng **Skeleton**.
-- Không dùng trong button → dùng **Button** loading prop.
-- Không show Loader cho near-instant operations.
-- Không dùng trên Compose → dùng native `CircularProgressIndicator`.

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

@@ -1,105 +0,0 @@
-# Pagination
-
-> Page/position indicators — dots, numbers, hoặc scroll bar cho carousels và paged content.
-
-**Package:** `@momo-kits/carousel` (PaginationDot, PaginationScroll) / `@momo-kits/foundation`
-**Platform:** RN ✅ | Compose ✅
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `type` | string | `"dot"` \| `"whiteDot"` \| `"number"` \| `"scroll"` | `"dot"` | Pagination variant [VERIFY] |
-| `total` | number | — | required | Total number of pages |
-| `current` | number | 0-based index | `0` | Current active page |
-| `onChange` | function | — | — | Callback khi page change (for number variant) [VERIFY] |
-
----
-
-## Variants
-
-| Variant | Active Color | Inactive Color | Content | Usage |
-|---------|-------------|---------------|---------|-------|
-| **dot** | `Colors.pink_03` | `Colors.black_08` | Circles | Standard carousels, image galleries |
-| **whiteDot** | `Colors.white` | `Colors.white` (50% opacity) | Circles | Dark/image backgrounds |
-| **number** | `Colors.pink_03` | `Colors.black_12` | Page numbers | When exact page count matters |
-| **scroll** | `Colors.pink_03` (indicator) | `Colors.black_08` (track) | Scroll bar | Large page counts |
-
----
-
-## States
-
-| State | Appearance |
-|-------|-----------|
-| **Active page** | Highlighted indicator (pink/white, larger dot) |
-| **Inactive pages** | Subdued indicator (grey/translucent, smaller) |
-| **Transitioning** | Animated interpolation between two page states |
-
----
-
-## Variant-to-Context Map
-
-| Variant | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| **dot** | Standard carousel, ≤7 pages | >7 pages → dùng scroll | Banner carousel trên Home |
-| **whiteDot** | Pagination trên dark/image background | Light background → dùng dot | Image gallery, hero banners |
-| **number** | Exact page count matters to user | Decorative paging | Onboarding steps |
-| **scroll** | Many pages, continuous scroll | ≤5 discrete pages → dùng dot | Feed với lazy loading |
-
----
-
-## SSR Pattern
-
-### Carousel with Dot Pagination
-```json
-{
-  "id": "banner_carousel",
-  "type": "section",
-  "children": [
-    {
-      "component": "Carousel",
-      "props": {
-        "items": "{{data.banners}}",
-        "autoPlay": true
-      }
-    },
-    {
-      "component": "Pagination",
-      "props": {
-        "type": "dot",
-        "total": "{{data.banners.length}}",
-        "current": "{{state.currentBanner}}"
-      }
-    }
-  ]
-}
-```
-
----
-
-## Accessibility
-
-- Announce current page position: "Trang 2 trong 5".
-- Dot indicators là decorative khi paired with swipe navigation.
-- Number pagination nếu tappable → meet 44dp touch target.
-
----
-
-## Usage Guidelines
-
-### Do
-- PaginationDot cho carousels / image galleries.
-- PaginationWhiteDot cho dark backgrounds.
-- PaginationNumber khi exact page count matters.
-- PaginationScroll cho many pages.
-- Center-align below associated content.
-
-### Don't
-- Không dùng cho step-by-step progress → dùng **Steps**.
-- Không dùng dot cho >7-8 pages → switch to scroll/number.
-- Không đặt pagination xa content.
-- Không mix variants trong cùng carousel.

package/.claude/skills/design-system/references/components/popup-notify.md

@@ -1,128 +0,0 @@
-# PopupNotify
-
-> Modal dialog — confirmation, alert, decision point. Requires user interaction before proceeding.
-
-**Package:** `@momo-kits/foundation`
-**Platform:** RN ✅ | Compose ✅ (via `navigator.showModal`)
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `title` | string | — | required | Primary message or question |
-| `description` | string | — | — | Supporting detail text |
-| `image` | object | `{ uri: string }` | — | Optional illustration/image above title [VERIFY] |
-| `primaryButton` | object | `{ label, onPress }` | required | Main action button (filled style) |
-| `secondaryButton` | object | `{ label, onPress }` | — | Alternative/cancel button (outlined/text style) |
-| `showClose` | boolean | `true` \| `false` | `false` | Show close (X) icon at top-right [VERIFY] |
-| `barrierDismissible` | boolean | `true` \| `false` | `false` | Tap overlay to dismiss. Default false — prevents accidental dismissal [VERIFY] |
-| `onDismiss` | function | — | — | Callback khi dismissed. `"onDismiss": "action://closePopup"` |
-
-### Button Object
-
-| Field | Type | Required | Description |
-|-------|------|----------|-------------|
-| `label` | string | yes | Button text — use strong verbs ("Xóa", "Xác nhận"), not generic "Yes"/"No" |
-| `onPress` | function | yes | Callback. `"onPress": "action://confirm"` |
-
----
-
-## Variants
-
-| Layout | Khi nào | Description |
-|--------|---------|-------------|
-| **Row (side-by-side)** | Both labels short, fit in single row | Secondary left, Primary right |
-| **Column (stacked)** | Labels long, would truncate in row | Primary top, Secondary below |
-
-Layout auto-detected based on combined button text length. Column is safer default.
-
----
-
-## States
-
-| State | Appearance |
-|-------|-----------|
-| **Appearing** | Fade in overlay + scale up container from center |
-| **Visible** | Static — user must interact to proceed |
-| **Dismissing** | Fade out overlay + container |
-
----
-
-## Variant-to-Context Map
-
-| Context | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| **Destructive confirmation** | Confirm delete/cancel actions | Non-destructive feedback → dùng Toast | "Xóa giao dịch này?" |
-| **Important alert** | Alert requiring acknowledgment | Non-critical info → dùng Information | "Phiên đăng nhập hết hạn" |
-| **Binary decision** | Two-choice decision point | >2 choices → dùng BottomSheet | "Lưu thay đổi?" Lưu / Hủy |
-
----
-
-## SSR Pattern
-
-### Destructive Confirmation
-```json
-{
-  "component": "PopupNotify",
-  "props": {
-    "title": "Xóa giao dịch?",
-    "description": "Hành động này không thể hoàn tác",
-    "primaryButton": {
-      "label": "Xóa",
-      "onPress": "action://deleteTransaction"
-    },
-    "secondaryButton": {
-      "label": "Hủy",
-      "onPress": "action://closePopup"
-    }
-  }
-}
-```
-
-### Alert with Image
-```json
-{
-  "component": "PopupNotify",
-  "props": {
-    "title": "Cập nhật thành công!",
-    "description": "Thông tin của bạn đã được cập nhật",
-    "image": { "uri": "{{assets.successIllustration}}" },
-    "primaryButton": {
-      "label": "Đóng",
-      "onPress": "action://closePopup"
-    }
-  }
-}
-```
-
----
-
-## Accessibility
-
-- Focus trap: keyboard/screen reader focus trapped within dialog khi open.
-- Title announced by screen reader on open.
-- ESC / hardware back dismisses dialog.
-- Button labels must be clear, descriptive.
-- Role: `alertdialog`.
-
----
-
-## Usage Guidelines
-
-### Do
-- Dùng cho destructive action confirmations ("Xóa mục này?").
-- Dùng cho important alerts requiring acknowledgment.
-- Dùng cho binary decision points ("Lưu / Hủy").
-- Strong verb labels on buttons — "Xóa", "Xác nhận", not "Yes"/"No".
-- Keep title clear, description concise.
-
-### Don't
-- Không dùng cho simple feedback → dùng **Toast** / **SnackBar**.
-- Không dùng cho form input → navigate to dedicated screen.
-- Không stack multiple PopupNotify dialogs.
-- Không >2 action buttons.
-- Không dùng cho informational messages without decision → dùng **Information**.

package/.claude/skills/design-system/references/components/progress-info.md

@@ -1,114 +0,0 @@
-# Progress Info
-
-> Linear progress bar with optional label, used to display completion status, upload progress, or goal tracking.
-
-**Package:** `@momo-kits/progress-info`
-**Platform support:** RN ✅ | Compose ❌ (use LinearProgressIndicator)
-
----
-
-## Anatomy
-
-```
-    Title Label (optional)
-    ┌──────────────────────────────────────┐
-    │████████████░░░░░░░░░░░░░░░░░░░░░░░░░│  ← Track with fill
-    └──────────────────────────────────────┘
-```
-
-| Part        | Description                                        | Required |
-|-------------|-----------------------------------------------------|----------|
-| Track       | Full-width background bar                           | Yes      |
-| Fill        | Colored portion representing progress               | Yes      |
-| Title       | Text label above the bar describing what is tracked | No       |
-
----
-
-## Visual Specs
-
-### Track
-
-| Property      | Token / Value                |
-|---------------|------------------------------|
-| Background    | `Colors.black_04`            |
-| Height        | 4-8 dp                       |
-| Corner radius | `Radius.XS`                 |
-| Width         | Full width of parent         |
-
-### Fill
-
-| Property      | Token / Value                              |
-|---------------|--------------------------------------------|
-| Color         | `Colors.pink_03` (default, themeable)      |
-| Height        | Same as track height                        |
-| Corner radius | `Radius.XS`                               |
-| Min width     | 0 dp (at 0% progress)                     |
-| Max width     | Full track width (at 100% progress)        |
-
-### Title
-
-| Property      | Token / Value                |
-|---------------|------------------------------|
-| Typography    | `body_default_regular`       |
-| Color         | Default text color           |
-| Position      | Above the progress bar       |
-| Spacing below | `Spacing.XS` (4) to track   |
-
----
-
-## Progress Value
-
-| Property     | Value                                    |
-|--------------|------------------------------------------|
-| Range        | 0.0 (empty) to 1.0 (full)               |
-| Direction    | Left-to-right fill                        |
-
----
-
-## Animation
-
-| Property       | Value                                         |
-|----------------|-----------------------------------------------|
-| Fill animation | Smooth animated transition when value changes |
-| Direction      | Left-to-right                                 |
-
-- When the progress value updates, the fill bar should animate smoothly to its new width.
-- The animation should feel responsive but not jarring.
-
----
-
-## States
-
-| State            | Appearance                                       |
-|------------------|--------------------------------------------------|
-| **Empty (0.0)**  | Track only, no fill visible                      |
-| **In progress**  | Partial fill proportional to value               |
-| **Complete (1.0)**| Fill covers entire track                        |
-
----
-
-## Accessibility
-
-- Announce the progress value as a percentage to screen readers (e.g., "Progress: 65%").
-- If a title label is present, associate it with the progress bar for context (e.g., "Upload progress: 65%").
-- Progress updates should be announced when they change significantly (not on every frame).
-
----
-
-## Usage Guidelines
-
-### Do's
-
-- Use for upload or download progress indicators.
-- Use for goal completion tracking (e.g., savings goals, profile completeness).
-- Use for step completion within a process.
-- Provide a title label for context when the progress meaning is not obvious from surrounding content.
-- Use animated transitions when the progress value changes.
-
-### Don'ts
-
-- Don't use for indeterminate loading states — use a Loader or Skeleton component instead.
-- Don't use values outside the 0.0-1.0 range.
-- Don't use a progress bar for tiny increments that won't be visually perceptible — consider a numeric display instead.
-- Don't use multiple fill colors within a single progress bar — keep it simple.
-- Don't place progress bars where they might be confused with dividers — include a title or surrounding context.

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

@@ -1,86 +0,0 @@
-# Radio
-
-> Selection control — chọn exactly 1 option từ mutually exclusive set. Value + groupValue pattern.
-
-**Package:** `@momo-kits/foundation`
-**Platform:** RN ✅ | Compose ✅
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `value` | string | — | required | Unique identifier cho radio option này |
-| `groupValue` | string | — | — | Currently selected value trong group. Radio selected khi `value == groupValue` |
-| `label` | string | — | — | Text label bên phải radio circle |
-| `disabled` | boolean | `true` \| `false` | `false` | Non-interactive state |
-| `onChange` | function | — | — | Callback khi selected. `"onChange": "setState://selectedOption"` |
-
----
-
-## States
-
-| State | Circle Border | Inner Dot | Label Color | Interactive |
-|-------|-------------|----------|------------|-------------|
-| **Unselected** | `Colors.black_04` | none | `Colors.black_17` | true |
-| **Selected** | `Colors.pink_03` | `Colors.pink_03` fill | `Colors.black_17` | true |
-| **Disabled Unselected** | `Colors.black_08` | none | `Colors.black_08` | false |
-| **Disabled Selected** | `Colors.black_08` | `Colors.black_08` fill | `Colors.black_08` | false |
-
----
-
-## Variant-to-Context Map
-
-| Context | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| **Single selection** | Chọn 1 từ 2-5 mutually exclusive options | >5 options → dùng InputDropDown | Chọn phương thức thanh toán, chọn lý do hủy |
-| **Default pre-selected** | Recommend 1 option | Không muốn bias user | Chọn gói cước với recommended option |
-
----
-
-## SSR Pattern
-
-### Radio Group
-```json
-{
-  "id": "payment_method",
-  "type": "section",
-  "forEach": "{{data.paymentMethods}}",
-  "render": {
-    "component": "Radio",
-    "props": {
-      "value": "{{item.id}}",
-      "groupValue": "{{state.selectedMethod}}",
-      "label": "{{item.name}}"
-    },
-    "onChange": "setState://selectedMethod={{item.id}}"
-  }
-}
-```
-
----
-
-## Accessibility
-
-- Screen readers announce: label, state (selected/unselected), role (radio button), position ("1 of 3").
-- Entire row (circle + label) tappable.
-- Radio groups PHẢI có group label.
-
----
-
-## Usage Guidelines
-
-### Do
-- Dùng cho single selection từ 2-5 mutually exclusive options.
-- Luôn display trong group — single radio alone vô nghĩa.
-- Pre-select default option khi có recommendation.
-- Vertical list layout cho clarity.
-
-### Don't
-- Không dùng cho multiple selection → dùng **CheckBox**.
-- Không dùng cho >5 options → dùng **InputDropDown**.
-- Không dùng cho on/off toggle → dùng **Switch**.
-- Radio selections không toggle off — once selected, phải chọn option khác.

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

@@ -1,126 +0,0 @@
-# Rating
-
-> Star-based rating display và input — product reviews, service feedback, quality indicators.
-
-**Package:** `@momo-kits/rating`
-**Platform:** RN ✅ | Compose ❌ (build with Row of Icons)
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `value` | number | `0` - `5` | `0` | Current rating value. Supports 0.5 increments for display mode |
-| `size` | string | `"small"` \| `"medium"` \| `"large"` | `"medium"` | Star size [VERIFY] |
-| `interactive` | boolean | `true` \| `false` | `true` | Interactive (input) vs display-only (read-only) [VERIFY] |
-| `disabled` | boolean | `true` \| `false` | `false` | Non-interactive, reduced opacity |
-| `onChange` | function | — | — | Callback khi tap star. `"onChange": "setState://rating"` |
-
----
-
-## Variants
-
-| Mode | Granularity | Half-star | Tappable |
-|------|-----------|----------|---------|
-| **Interactive** | Whole stars only (1-5) | No | Yes |
-| **Display-only** | 0.5 increments (0.0-5.0) | Yes | No |
-
-### Star Colors
-
-| Part | Color |
-|------|-------|
-| Active (filled) | `Colors.gold_03` |
-| Inactive (outline) | `Colors.black_08` |
-| Half-star left | `Colors.gold_03` filled |
-| Half-star right | `Colors.black_08` outline |
-
----
-
-## States
-
-| State | Appearance | Interactive |
-|-------|-----------|-------------|
-| **Empty (0)** | All 5 stars outlined | per mode |
-| **Partial (1-4)** | N filled + remaining outlined | per mode |
-| **Full (5)** | All 5 stars filled | per mode |
-| **Disabled** | All stars reduced opacity (0.4) | false |
-
----
-
-## Variant-to-Context Map
-
-| Mode | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|------|-------------|-----------|-------------------|
-| **Interactive** | User submit feedback/review | Read-only display | Đánh giá merchant sau giao dịch, feedback dịch vụ |
-| **Display-only** | Show aggregate/existing rating | User cần input | Rating trung bình merchant, review score |
-
----
-
-## SSR Pattern
-
-### Interactive Rating in Feedback Form
-```json
-{
-  "component": "Rating",
-  "props": {
-    "value": "{{state.rating}}",
-    "size": "large",
-    "interactive": true
-  },
-  "onChange": "setState://rating"
-}
-```
-
-### Display Rating with Number
-```json
-{
-  "id": "rating_display",
-  "type": "row",
-  "children": [
-    {
-      "component": "Rating",
-      "props": {
-        "value": "{{data.averageRating}}",
-        "size": "small",
-        "interactive": false
-      }
-    },
-    {
-      "component": "Text",
-      "props": {
-        "content": "{{data.averageRating}} / 5",
-        "typography": "body_s_regular",
-        "color": "Colors.black_12"
-      }
-    }
-  ]
-}
-```
-
----
-
-## Accessibility
-
-- Announce current rating: "Rating: 4 out of 5 stars".
-- Interactive mode: each star individually selectable.
-- Display-only: announce as informational text.
-
----
-
-## Usage Guidelines
-
-### Do
-- Dùng cho product/service reviews.
-- Display-only cho aggregate ratings. Pair với numeric label khi precision matters.
-- Half-star display cho averaged ratings (4.3 → 4.5 stars).
-- Consistent sizing within same context.
-
-### Don't
-- Không dùng cho binary like/dislike → dùng **Button** / **Switch**.
-- Không dùng cho non-quality metrics — stars imply quality.
-- Không allow half-star input — interactive chỉ whole stars.
-- Không dùng >5 hoặc <5 stars.
-- Không change star color from gold.