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

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

@@ -1,117 +0,0 @@
-# Carousel
-
-> Horizontal scrollable content container — snap-to-item behavior for banners, galleries, onboarding. Pairs with Pagination.
-
-**Package:** `@momo-kits/carousel`
-**Platform:** RN ✅ | Compose ❌ (use HorizontalPager)
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `items` | array | — | required | Data array for carousel items |
-| `renderItem` | function | — | required | Render function per item [VERIFY] |
-| `autoPlay` | boolean | `true` \| `false` | `false` | Auto-advance between items |
-| `autoPlayInterval` | number | milliseconds | `3000` | Interval between auto-advances [VERIFY] |
-| `loop` | boolean | `true` \| `false` | `false` | Seamless wrap from last → first item [VERIFY] |
-| `showPagination` | boolean | `true` \| `false` | `true` | Show PaginationDot below carousel [VERIFY] |
-| `paginationType` | string | `"dot"` \| `"scroll"` | `"dot"` | Pagination variant (see Pagination component) [VERIFY] |
-| `peek` | number | dp | `0` | Amount of adjacent item visible at edges (16-24dp recommended) [VERIFY] |
-| `onChange` | function | — | — | Callback khi current item changes. `"onChange": "setState://currentBanner"` |
-
----
-
-## States
-
-| State | Appearance |
-|-------|-----------|
-| **Idle** | Current item fully visible, pagination updated |
-| **Scrolling** | Items move horizontally, pagination animates |
-| **Auto-playing** | Items advance automatically at interval |
-| **Paused** | Auto-play paused due to user touch interaction |
-
-Auto-play pauses on user interaction, resumes after release.
-
----
-
-## Variant-to-Context Map
-
-| Context | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| **Promotional banners** | Featured content at screen top | Critical content every user must see | Banner khuyến mãi trên Home |
-| **Image gallery** | Browse product/service images | Long lists → dùng FlatList | Ảnh merchant, ảnh sản phẩm |
-| **Onboarding** | Step-by-step intro slides | Navigation between sections → dùng TabView | Welcome slides, feature intro |
-
----
-
-## SSR Pattern
-
-### Banner Carousel with Pagination
-```json
-{
-  "id": "banner_section",
-  "type": "section",
-  "children": [
-    {
-      "component": "Carousel",
-      "props": {
-        "items": "{{data.banners}}",
-        "autoPlay": true,
-        "autoPlayInterval": 5000,
-        "loop": true,
-        "showPagination": true,
-        "paginationType": "dot",
-        "peek": 0
-      },
-      "onChange": "setState://currentBanner"
-    }
-  ]
-}
-```
-
-### Image Gallery with Scroll Pagination
-```json
-{
-  "component": "Carousel",
-  "props": {
-    "items": "{{data.merchantImages}}",
-    "autoPlay": false,
-    "showPagination": true,
-    "paginationType": "scroll",
-    "peek": 16
-  }
-}
-```
-
----
-
-## Accessibility
-
-- Items navigable via swipe gestures on assistive technology.
-- Auto-play MUST pause khi screen reader active.
-- Each item: descriptive accessible label.
-- Announce current position: "Mục 2 trong 5".
-- Provide way to pause auto-play without specific gesture.
-
----
-
-## Usage Guidelines
-
-### Do
-- Dùng cho promotional banners, image galleries, onboarding slides.
-- Always include pagination indicators.
-- Peek adjacent items → signal scrollability.
-- Keep 3-8 items — manageable count.
-- Auto-play interval ≥3 seconds.
-
-### Don't
-- Không dùng cho long lists → dùng FlatList / LazyColumn.
-- Không dùng cho section navigation → dùng **TabView** / **BottomTab**.
-- Không set autoPlayInterval <3000ms — user cần time to read.
-- Không hide pagination khi >1 item.
-- Không nest carousels — scroll conflict.
-- Không rely on carousel cho critical content — items may be missed.

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

@@ -1,98 +0,0 @@
-# CheckBox
-
-> Multi-selection control — chọn nhiều options hoặc indicate agreement. Supports indeterminate state.
-
-**Package:** `@momo-kits/foundation`
-**Platform:** RN ✅ | Compose ✅
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `checked` | boolean | `true` \| `false` | `false` | Checked state |
-| `indeterminate` | boolean | `true` \| `false` | `false` | Partial selection state (select-all parent) [VERIFY] |
-| `label` | string | — | — | Text label bên phải checkbox |
-| `disabled` | boolean | `true` \| `false` | `false` | Non-interactive state |
-| `onChange` | function | — | — | Callback khi toggle. `"onChange": "setState://option"` |
-
----
-
-## States
-
-| State | Box Appearance | Icon | Label Color | Interactive |
-|-------|---------------|------|------------|-------------|
-| **Unchecked** | `Colors.black_04` border, no fill | none | `Colors.black_17` | true |
-| **Checked** | `Colors.pink_03` fill | white checkmark | `Colors.black_17` | true |
-| **Indeterminate** | `Colors.pink_03` fill | white minus | `Colors.black_17` | true |
-| **Disabled Unchecked** | `Colors.black_08` border, no fill | none | `Colors.black_08` | false |
-| **Disabled Checked** | `Colors.black_08` fill | white checkmark | `Colors.black_08` | false |
-
----
-
-## Variant-to-Context Map
-
-| Context | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| **Multi-select** | Chọn nhiều options từ list | Chọn 1 exclusive → dùng Radio | Chọn nhiều dịch vụ, filter multi-category |
-| **Agreement** | Consent/terms checkbox | — | "Tôi đồng ý điều khoản" trên form |
-| **Select all** | Parent checkbox cho group (indeterminate khi partial) | — | "Chọn tất cả" trên danh sách |
-
----
-
-## SSR Pattern
-
-### Agreement Checkbox
-```json
-{
-  "component": "CheckBox",
-  "props": {
-    "checked": "{{state.agreedToTerms}}",
-    "label": "Tôi đồng ý với Điều khoản sử dụng"
-  },
-  "onChange": "setState://agreedToTerms"
-}
-```
-
-### Multi-select List
-```json
-{
-  "id": "service_options",
-  "type": "section",
-  "forEach": "{{data.services}}",
-  "render": {
-    "component": "CheckBox",
-    "props": {
-      "checked": "{{item.selected}}",
-      "label": "{{item.name}}"
-    },
-    "onChange": "setState://toggleService={{item.id}}"
-  }
-}
-```
-
----
-
-## Accessibility
-
-- Screen readers announce: label, state (checked/unchecked/indeterminate), role (checkbox).
-- Entire row (box + label) tappable.
-- State changes announce immediately.
-
----
-
-## Usage Guidelines
-
-### Do
-- Dùng cho selecting multiple options từ list.
-- Dùng cho agreement/consent checkboxes.
-- Dùng indeterminate cho "select all" parent.
-- Luôn provide visible label.
-
-### Don't
-- Không dùng cho single on/off toggle → dùng **Switch**.
-- Không dùng cho mutually exclusive choices → dùng **Radio**.
-- Không dùng cho filter controls trong toolbar → dùng **Chip**.

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

@@ -1,146 +0,0 @@
-# Chip
-
-> Interactive filter/selection pill — toggle giữa selected/unselected khi tap.
-
-**Package:** `@momo-kits/chip`
-**Platform:** RN ✅ | Compose ✅
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `label` | string | — | required | Display text. 1-3 words |
-| `size` | string | `"small"` \| `"large"` | `"small"` | Chip size |
-| `selected` | boolean | `true` \| `false` | `false` | Selection state |
-| `disabled` | boolean | `true` \| `false` | `false` | Non-interactive state |
-| `leftIcon` | string | icon name | — | Optional icon trước label |
-| `rightIcon` | string | icon name \| `"close"` | — | Optional icon sau label. `"close"` cho removable chip |
-| `onPress` | function | — | — | Tap handler — toggle selected state |
-| `onPressRightIcon` | function | — | — | Right icon tap — remove/deselect [VERIFY] |
-
-> **Lưu ý cho ui-composer:** Chip dùng package riêng `@momo-kits/chip`, không nằm trong `@momo-kits/foundation`.
-
----
-
-## Variants
-
-| Variant | Background | Text Color | Icon Color | Usage |
-|---------|-----------|-----------|-----------|-------|
-| **Unselected** | `Colors.black_04` | `Colors.black_17` | `Colors.black_12` | Default resting state |
-| **Selected** | `Colors.pink_09` | `Colors.pink_03` | `Colors.pink_03` | Active / chosen state |
-
----
-
-## States
-
-| State | Background | Text Color | Icon Color | Opacity | Interactive |
-|-------|-----------|-----------|-----------|---------|-------------|
-| **Unselected** | `Colors.black_04` | `Colors.black_17` | `Colors.black_12` | 1 | true |
-| **Selected** | `Colors.pink_09` | `Colors.pink_03` | `Colors.pink_03` | 1 | true |
-| **Pressed** | same as current | same as current | same as current | 0.8 | true |
-| **Disabled** | `Colors.black_04` | `Colors.black_08` | `Colors.black_08` | 0.5 | false |
-
-Transition giữa unselected ↔ selected là immediate (no animation).
-
----
-
-## Variant-to-Context Map
-
-| Variant | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| Unselected (default) | Chip chưa được chọn trong filter group | Chỉ có 1 chip đơn lẻ — không có group | Filter dịch vụ trên màn hình tìm kiếm (Tất cả / Chuyển tiền / Thanh toán) |
-| Selected | User đã chọn — active filter đang apply | Không có toggle behavior — dùng Tag | Filter "Chuyển tiền" đang active trong lịch sử GD |
-| Removable (rightIcon=close) | User remove selection bằng tap X | Label dài >3 từ — chip bị stretch | Địa chỉ đã chọn trong form giao hàng, tags đã pick |
-
----
-
-## SSR Pattern
-
-### Horizontal Filter Bar
-```json
-{
-  "id": "filter_chips",
-  "type": "row",
-  "scrollable": true,
-  "spacing": "Spacing.XS",
-  "forEach": "{{data.filterOptions}}",
-  "render": {
-    "component": "Chip",
-    "props": {
-      "label": "{{item.label}}",
-      "size": "small",
-      "selected": "{{state.selectedFilter == $index}}"
-    },
-    "onPress": "setState://selectedFilter=$index"
-  }
-}
-```
-
-### Multi-select Wrap Group
-```json
-{
-  "id": "category_chips",
-  "type": "wrap",
-  "forEach": "{{data.categories}}",
-  "render": {
-    "component": "Chip",
-    "props": {
-      "label": "{{item.name}}",
-      "size": "large",
-      "selected": "{{item.selected}}",
-      "leftIcon": "{{item.icon}}"
-    },
-    "onPress": "setState://toggleCategory={{item.id}}"
-  }
-}
-```
-
-### Removable Tags
-```json
-{
-  "id": "selected_tags",
-  "type": "wrap",
-  "forEach": "{{state.selectedItems}}",
-  "render": {
-    "component": "Chip",
-    "props": {
-      "label": "{{item.name}}",
-      "size": "small",
-      "selected": true,
-      "rightIcon": "close"
-    },
-    "onPressRightIcon": "setState://removeItem={{item.id}}"
-  }
-}
-```
-
----
-
-## Accessibility
-
-- Mỗi chip cần accessible label gồm: text + current state (selected/not).
-- Role: `"button"` hoặc `"toggle"` — screen readers phải announce interactive nature.
-- Khi selected state thay đổi: announce "Selected" hoặc "Deselected".
-- Trong chip group: navigable as a group với clear boundaries.
-
----
-
-## Usage Guidelines
-
-### Do
-- Dùng Chip để filter content theo category, type, attribute.
-- Dùng cho multi-select — user pick từ set of options.
-- Dùng cho removable selections (dismiss bằng X icon).
-- Giữ label ngắn — 1-3 words.
-- Group related chips trong horizontal scrollable row hoặc wrapping layout.
-
-### Don't
-- Không dùng cho static status display — dùng **Tag**.
-- Không dùng cho navigation actions — dùng **Button**.
-- Không dùng cho notification counts — dùng **Badge**.
-- Không nest interactive elements bên trong Chip.
-- Không dùng text label dài gây stretch chip.

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

@@ -1,120 +0,0 @@
-# Collapse
-
-> Expandable/collapsible content section — header + chevron toggle to show/hide content. Progressive disclosure.
-
-**Package:** `@momo-kits/collapse`
-**Platform:** RN ✅ | Compose ❌ (build with AnimatedVisibility)
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `title` | string | — | required | Header text label |
-| `expanded` | boolean | `true` \| `false` | `false` | Controlled expand/collapse state |
-| `defaultExpanded` | boolean | `true` \| `false` | `false` | Initial state khi uncontrolled [VERIFY] |
-| `disabled` | boolean | `true` \| `false` | `false` | Non-interactive — header not tappable |
-| `showDivider` | boolean | `true` \| `false` | `false` | Show Divider between header and content [VERIFY] |
-| `children` | element | — | required | Content to show/hide — any components |
-| `onChange` | function | — | — | Callback khi toggle. `"onChange": "setState://expanded"` |
-
----
-
-## States
-
-| State | Header | Chevron | Content | Interactive |
-|-------|--------|---------|---------|-------------|
-| **Collapsed** | `Colors.black_17` text | Down (0°) | Hidden | true |
-| **Expanded** | `Colors.black_17` text | Up (180°) | Visible | true |
-| **Pressed** | Opacity 0.8 | — | — | true |
-| **Disabled** | `Colors.black_08` text | `Colors.black_08` | Per current state | false |
-
-Chevron rotates smoothly (180°) on toggle. Content animates with height transition.
-
----
-
-## Variant-to-Context Map
-
-| Context | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| **FAQ / Help** | Q&A sections, supplementary info | Primary content → show directly | FAQ trong Help center |
-| **Advanced settings** | Secondary options user rarely needs | Critical settings → show always | Cài đặt nâng cao, tùy chọn bổ sung |
-| **Accordion** | Multiple collapse sections, one open at a time | Independent sections | Chi tiết giao dịch, điều khoản |
-
----
-
-## SSR Pattern
-
-### FAQ Section
-```json
-{
-  "id": "faq_section",
-  "type": "section",
-  "forEach": "{{data.faqs}}",
-  "render": {
-    "component": "Collapse",
-    "props": {
-      "title": "{{item.question}}",
-      "expanded": false
-    },
-    "children": [
-      {
-        "component": "Text",
-        "props": {
-          "content": "{{item.answer}}",
-          "typography": "body_default_regular"
-        }
-      }
-    ]
-  }
-}
-```
-
-### Transaction Details Accordion
-```json
-{
-  "component": "Collapse",
-  "props": {
-    "title": "Chi tiết giao dịch",
-    "showDivider": true
-  },
-  "children": [
-    {
-      "component": "Text",
-      "props": {
-        "content": "{{data.transactionDetails}}",
-        "typography": "body_s_regular"
-      }
-    }
-  ]
-}
-```
-
----
-
-## Accessibility
-
-- Header role: button. Announce title + state ("Chi tiết giao dịch, collapsed").
-- Content hidden from accessibility tree khi collapsed.
-- Full header row is tap target, not just chevron.
-- State change announced on toggle.
-
----
-
-## Usage Guidelines
-
-### Do
-- Dùng cho secondary/supplementary content — FAQ, advanced settings, details.
-- Clear descriptive title — user knows what content is hidden.
-- Start collapsed by default unless content is expected to be read immediately.
-- Divider khi content is visually dense.
-
-### Don't
-- Không hide primary/critical content trong collapse.
-- Không dùng cho navigation → dùng proper nav patterns.
-- Không nest collapse deeply (collapse trong collapse) — confusing UX.
-- Không dùng khi content chỉ 1-2 lines — show directly instead.
-- Không remove chevron icon — user cần visual indicator.

package/.claude/skills/design-system/references/components/date-picker.md

@@ -1,119 +0,0 @@
-# DatePicker
-
-> Calendar-based date selection — single date, date range, or multiple dates. Month grid (RN) or format-driven (Compose).
-
-**Package:** `@momo-kits/date-picker` (RN) / built-in (Compose)
-**Platform:** RN ✅ | Compose ✅
-**Completeness:** need_update — thiếu Figma
-**Figma node:** [VERIFY]
-
----
-
-## Variant Axes
-
-| Axis | Options | Default |
-|------|---------|---------|
-| **Mode** | `single` · `range` · `multiple` | `single` |
-| **Platform** | RN (calendar grid) · Compose (format-driven DD-MM-YYYY) | per platform |
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `mode` | string | `"single"` \| `"range"` \| `"multiple"` | `"single"` | Selection mode |
-| `value` | varies | Date (single), `{ start, end }` (range), `[Date]` (multiple) | — | Current selected value |
-| `minDate` | date | — | — | Earliest selectable date. Dates before → disabled |
-| `maxDate` | date | — | — | Latest selectable date. Dates after → disabled |
-| `format` | string | date format pattern | `"DD-MM-YYYY"` | Display format (Compose) [VERIFY] |
-| `showTimePicker` | boolean | `true` \| `false` | `false` | Include time selection (Compose: HH:mm) [VERIFY] |
-| `onChange` | function | — | — | Callback khi date selected. `"onChange": "setState://selectedDate"` |
-
----
-
-## Day Cell States
-
-| State | Background | Text Color | Description |
-|-------|-----------|-----------|-------------|
-| **Default** | Transparent | `Colors.black_17` | Normal selectable date |
-| **Today** | Transparent | `Colors.pink_03` | Current date highlight |
-| **Selected** | `Colors.pink_03` circle | `Colors.white` | User-chosen date |
-| **Disabled** | Transparent | `Colors.black_08` | Outside min/max range |
-| **Range start** | `Colors.pink_03` (left-rounded) | `Colors.white` | First date in range |
-| **Range end** | `Colors.pink_03` (right-rounded) | `Colors.white` | Last date in range |
-| **In range** | `Colors.pink_09` (light pink) | `Colors.pink_03` | Dates between start/end |
-| **Other month** | Transparent | `Colors.black_08` | Adjacent month dates |
-
----
-
-## Variant-to-Context Map
-
-| Mode | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|------|-------------|-----------|-------------------|
-| **single** | Pick one specific date | Date range needed | Chọn ngày sinh, ngày hẹn |
-| **range** | Select start + end date | Single date needed | Lọc lịch sử giao dịch, đặt phòng |
-| **multiple** | Select multiple individual dates | Continuous range → dùng range mode | Chọn nhiều ngày nghỉ |
-
----
-
-## SSR Pattern
-
-### Single Date Selection
-```json
-{
-  "component": "DatePicker",
-  "props": {
-    "mode": "single",
-    "value": "{{state.selectedDate}}",
-    "minDate": "{{data.today}}",
-    "maxDate": "{{data.maxBookingDate}}"
-  },
-  "onChange": "setState://selectedDate"
-}
-```
-
-### Date Range Filter
-```json
-{
-  "component": "DatePicker",
-  "props": {
-    "mode": "range",
-    "value": {
-      "start": "{{state.startDate}}",
-      "end": "{{state.endDate}}"
-    },
-    "minDate": "{{data.earliestTransaction}}"
-  },
-  "onChange": "setState://dateRange"
-}
-```
-
----
-
-## Accessibility
-
-- Each day cell announces full date: "26 tháng 3 năm 2026".
-- Selected dates announce selected state.
-- Disabled dates: announced as disabled, not focusable/tappable.
-- Navigation arrows: "Tháng trước", "Tháng sau".
-- Range mode: announce context "Ngày bắt đầu: 20 tháng 3. Ngày kết thúc: 26 tháng 3."
-- Today distinguishable: "Hôm nay, 20 tháng 3 năm 2026".
-
----
-
-## Usage Guidelines
-
-### Do
-- Dùng cho date selection trong forms, booking, scheduling.
-- Highlight today cho reference point.
-- Disable dates outside valid range.
-- Show selected date in text field bên ngoài calendar cho confirmation.
-- Range mode cho check-in/check-out, date filters.
-
-### Don't
-- Không dùng cho time-only selection → dùng dedicated time picker.
-- Không allow selection of disabled dates.
-- Không show quá nhiều months — month-by-month navigation.
-- Không hide current month/year — user cần context.
-- Không dùng cho relative dates ("7 ngày gần nhất") → dùng **Chip** preset options.

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

@@ -1,84 +0,0 @@
-# Divider
-
-> Horizontal line separator — phân chia content sections hoặc list items.
-
-**Package:** `@momo-kits/foundation`
-**Platform:** RN ✅ | Compose ✅
-**Completeness:** done
-**Figma node:** [VERIFY]
-
----
-
-## Props
-
-| Prop | Type | Values | Default | Description |
-|------|------|--------|---------|-------------|
-| `color` | string | `Colors.*` token | `"Colors.black_04"` | Line color [VERIFY] |
-
-> Divider là component đơn giản nhất — chỉ 1 prop optional. Full width of parent container by default.
-
----
-
-## States
-
-| State | Color | Description |
-|-------|-------|-------------|
-| **Default** | `Colors.black_04` | Static, non-interactive |
-
-Divider chỉ có 1 state. Không interactive.
-
----
-
-## Variant-to-Context Map
-
-| Context | Khi nào dùng | Tránh khi | Ví dụ trong MoMo |
-|---------|-------------|-----------|-------------------|
-| **List separator** | Phân cách items trong vertical list | Spacing đủ clear → không cần divider | Danh sách giao dịch, contacts list |
-| **Section boundary** | Phân chia content sections | Chỉ có 1 section → không cần | Phân chia "Thông tin" và "Số tiền" trong confirm screen |
-
----
-
-## SSR Pattern
-
-### List with Dividers
-```json
-{
-  "id": "transaction_list",
-  "type": "section",
-  "forEach": "{{data.transactions}}",
-  "render": [
-    {
-      "component": "ListItem",
-      "props": {
-        "title": "{{item.title}}",
-        "rightText": "{{item.amount}}"
-      }
-    },
-    {
-      "component": "Divider",
-      "props": {}
-    }
-  ]
-}
-```
-
----
-
-## Accessibility
-
-- Divider là decorative — ẩn khỏi screen readers.
-- Không dùng divider để convey meaning — chỉ visual separator.
-
----
-
-## Usage Guidelines
-
-### Do
-- Dùng để separate list items trong vertical list.
-- Dùng sparingly — rely on spacing trước.
-- Parent layout control spacing above/below divider.
-
-### Don't
-- Không dùng cho purely decorative khi spacing đủ.
-- Không stack multiple dividers.
-- Không đặt divider ở top/bottom container khi không cần separation.