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

package/.claude/skills/design-system/references/navigation/navigator.md

@@ -1,111 +0,0 @@
-# Screen Transitions — Design Guideline
-
-## Overview
-
-Screen transitions define how users move between screens. MoMo KitX supports multiple transition types for different navigation contexts.
-
----
-
-## Transition Types
-
-### Push (Horizontal Slide)
-- **Direction**: New screen slides in from right, current slides left
-- **Use for**: Forward navigation, drilling into detail
-- **Back**: Reverse animation (right to left), swipe-back gesture
-- **Duration**: ~300ms
-- **Easing**: Ease-in-out
-
-### Pop (Reverse Slide)
-- **Direction**: Current screen slides right, previous appears from left
-- **Use for**: Going back, closing detail views
-- **Gesture**: Swipe from left edge (iOS), back button (Android)
-- **Can pop multiple**: Pop 2+ screens at once for deep navigation
-
-### Present (Vertical Slide — Full-screen Modal)
-- **Direction**: New screen slides up from bottom
-- **Use for**: Full-screen modals, compose/create flows, media viewers
-- **Back**: Slide down, swipe down gesture
-- **Overlay**: No background dimming (full screen replacement)
-
-### Replace (No Animation)
-- **Behavior**: Replaces current screen without animation
-- **Use for**: Authentication flows, state changes (logged out → logged in)
-- **Back**: No back navigation to replaced screen
-
-### Reset (Stack Clear)
-- **Behavior**: Clears entire navigation stack, sets new root
-- **Use for**: Logout, deep link landing, flow completion
-- **Back**: No back navigation
-
----
-
-## Transition Decision Guide
-
-| User Action | Transition | Example |
-|-------------|-----------|---------|
-| Tap list item | Push | Product list → Product detail |
-| Tap "Back" | Pop | Detail → List |
-| Tap "Create" / "Compose" | Present | Home → New post |
-| Complete a flow | Pop (multiple) or Reset | Payment success → Home |
-| Tab switch | None (instant) | Tab 1 → Tab 2 |
-| Logout | Reset | Any → Login screen |
-
----
-
-## Navigation Stack Visualization
-
-```
-Push flow:
-[Home] → [List] → [Detail] → [Edit]
-                                 ↑ current
-Pop: removes current, reveals previous
-
-Present flow:
-[Home] ─── presents ──→ [Create]
-  ↑ stays in stack           ↑ modal layer
-
-Reset flow:
-[Screen A] → [Screen B] → [Screen C]
-              ↓ reset
-[New Home]  (stack cleared)
-```
-
----
-
-## Modal vs Present vs Push
-
-| Aspect | Push | Present | Modal Overlay |
-|--------|------|---------|---------------|
-| Animation | Horizontal slide | Vertical slide | Fade + scale |
-| Screen coverage | Full screen | Full screen | Partial (centered) |
-| Background | Replaces | Replaces | Dimmed backdrop |
-| Back gesture | Swipe from left | Swipe down | Tap outside / X |
-| Use for | Navigation flow | Create/compose | Confirmation/alert |
-
----
-
-## Gesture Navigation
-
-### iOS
-- **Swipe from left edge**: Pop (go back)
-- **Swipe down**: Dismiss presented screen
-
-### Android
-- **System back button/gesture**: Pop
-- **Swipe from left/right edge**: Pop (gesture navigation)
-
----
-
-## Do's & Don'ts
-
-### Do's
-- Use Push for all forward navigation within a flow
-- Use Present for creation/compose flows that feel like a new context
-- Use Modal overlay (PopupNotify) for decisions that require immediate response
-- Support swipe-back gestures on all pushed screens
-
-### Don'ts
-- Don't use Push for modals or dialogs
-- Don't use Reset unless you truly need to clear the entire stack
-- Don't disable swipe-back gesture unless absolutely necessary
-- Don't mix Present and Push for the same type of navigation

package/.claude/skills/design-system/references/navigation/setup.md

@@ -1,134 +0,0 @@
-# Screen Layout — Design Guideline
-
-## Overview
-
-MoMo KitX uses a hierarchical layout system for structuring screen content. The layout defines how content is organized, spaced, and contained.
-
----
-
-## Screen Hierarchy
-
-```
-Screen (outermost container)
-└── Section (responsive container with margins)
-    └── Card (elevated content container)
-        └── Item (grid-based content block)
-```
-
-### Screen
-- **Role**: Outermost container for an entire page/screen
-- **Features**: Header, scroll behavior, keyboard avoidance, safe area insets
-- **Background**: `theme.colors.background.default` (#F2F2F6 light / #121212 dark)
-
-### Section
-- **Role**: Responsive container that groups related cards
-- **Margin**: 12px horizontal margin on each side (built-in)
-- **Options**: `expanded` (full bleed), `backgroundImage` support
-
-### Card
-- **Role**: Elevated content container within a section
-- **Background**: `theme.colors.background.surface` (white / #1E1E1E)
-- **Radius**: `Radius.S` (8)
-- **Shadow**: Optional elevation shadow
-- **Padding**: Content uses internal `Item` grid
-
-### Item
-- **Role**: Grid-based content block within a card
-- **Grid**: 12-column system
-- **Span options**: `widthSpan` 1–12 (12 = full width, 6 = half, 4 = third, 3 = quarter)
-
----
-
-## 12-Column Grid System
-
-```
-|--12px--|------- 12 columns (full width - 24px margin) -------|--12px--|
-
-|  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  | 10 | 11 | 12 |
-
-widthSpan=12  ──────────────────────────────────────────────────────────
-widthSpan=6   ─────────────────────────  ─────────────────────────
-widthSpan=4   ────────────────  ────────────────  ────────────────
-widthSpan=3   ───────────  ───────────  ───────────  ───────────
-```
-
-### Grid Spacing
-- **Column gutter**: Built into grid context
-- **Section margin**: 12px each side
-- **Card internal padding**: `Spacing.L` (16)
-
----
-
-## Compose Layout System
-
-Compose uses a container-based approach instead of the grid:
-
-### Container Hierarchy
-```
-ComposeAppContainer / NavigationContainer (app root)
-└── Screen content (via navigator.push)
-    └── LazyColumn / Column (scrollable content)
-        └── Composable components
-```
-
-### ComposeAppContainer
-- **Role**: App root with theme, navigation, and dependency injection
-- **Provides**: Theme, Navigator, Navigation, StatusBar, NavigationBar
-- **Background**: `theme.colors.background.default`
-
-### NavigationContainer
-- **Role**: Lightweight fallback when ComposeAppContainer unavailable
-- **Provides**: Theme, Navigator, Navigation
-
----
-
-## Screen Structure Specs
-
-### Safe Areas
-- **Top**: Status bar height (dynamic, via `AppStatusBar.current`)
-- **Bottom**: Navigation bar height (dynamic, via `AppNavigationBar.current`)
-- **Horizontal**: 0 (Section provides margin)
-
-### Content Areas
-| Area | Description | Spacing |
-|------|-------------|---------|
-| Header | Title bar with navigation | Height: 44–56 |
-| Content | Scrollable body | Padding: Section margin 12 |
-| Footer | Fixed bottom actions | Padding: `Spacing.L` horizontal |
-| FAB | Floating action button | Position: bottom-right, margin `Spacing.L` |
-
----
-
-## Usage Guidelines
-
-### When to Use Each Container
-
-| Scenario | Container |
-|----------|-----------|
-| Full page with header | Screen + Section + Card |
-| Content grouping | Section (groups related cards) |
-| Distinct content block | Card (with optional shadow) |
-| Grid layout | Card + Item with widthSpan |
-| Simple list | Section with no Card (flat content) |
-
-### Spacing Between Sections
-- Between sections: `Spacing.XL` (24) or built-in section gap
-- Between cards within a section: `Spacing.M` (12)
-- Card internal content: `Spacing.L` (16) padding
-
----
-
-## Do's & Don'ts
-
-### Do's
-- Use `Screen > Section > Card > Item` hierarchy consistently (RN)
-- Use `ComposeAppContainer` as the app root (Compose)
-- Keep one container per Fragment/Activity (Compose)
-- Use the 12-column grid for responsive layouts
-
-### Don'ts
-- Don't nest Screen inside Screen
-- Don't nest NavigationContainer inside NavigationContainer
-- Don't skip Section and put Card directly in Screen
-- Don't hardcode screen margins — use Section's built-in 12px margin
-- Don't use arbitrary column counts — stick to 12-column grid

package/.claude/skills/design-system/references/navigation/stack.md

@@ -1,128 +0,0 @@
-# Screen Header & Scroll — Design Guideline
-
-## Overview
-
-Screen headers provide navigation context, titles, and actions. The header system supports multiple types with configurable behavior.
-
----
-
-## Header Types
-
-### Default Header
-- **Height**: 44–56
-- **Background**: `theme.colors.background.surface`
-- **Elements**: Back button (left), title (center), action items (right)
-- **Title**: `headline_s_bold`, `theme.colors.text.default`
-- **Back button**: Chevron left icon, 24px
-- **Bottom border**: 1px `theme.colors.border.default`
-
-### Extended Header
-- **Height**: 88–120 (larger area)
-- **Features**: Larger title area, optional search input
-- **Search**: Animated input that expands on focus
-- **Use for**: Home screens, browse screens with search
-
-### Animated Header
-- **Behavior**: Collapses on scroll down, expands on scroll up
-- **Collapsed height**: 44 (standard)
-- **Expanded height**: 88–120
-- **Transition**: Smooth fade + height animation
-- **Requires**: Connected scroll state (ScrollData + LazyColumn state)
-
-### No Header
-- **Use for**: Full-screen content, modals, custom headers
-- **Safe area**: Content must handle top safe area manually
-
----
-
-## Header Anatomy
-
-```
-┌──────────────────────────────────────────────┐
-│ Status Bar                                    │
-├──────────────────────────────────────────────┤
-│                                              │
-│  [←]     Screen Title          [🔍] [⋯]     │
-│                                              │
-├──────────────────────────────────────────────┤
-│ Border (1px, border.default)                  │
-└──────────────────────────────────────────────┘
-
-Left area:     Back button or custom
-Center area:   Title text (headline_s_bold)
-Right area:    Action icons/buttons (HeaderRight)
-```
-
-### Header Right Actions
-- **Toolkit**: Standard icon buttons (search, more, etc.)
-- **Max items**: 2–3 action icons
-- **Icon size**: 24px
-- **Spacing between icons**: `Spacing.M` (12)
-- **Touch target**: 44x44pt per icon
-
----
-
-## Scroll Behavior
-
-### Standard Scroll
-- Header stays fixed
-- Content scrolls underneath
-- Use for: Short content, forms
-
-### Collapsing Header (Animated)
-- Header collapses from extended to default height on scroll
-- Title may animate (scale down, reposition)
-- Triggers via connected scroll state
-
-### Scroll-to-Top
-- Tap status bar or header title to scroll to top
-- Standard iOS/Android behavior
-
----
-
-## Footer Area
-
-- **Position**: Fixed at bottom of screen, above safe area
-- **Background**: `theme.colors.background.surface`
-- **Padding**: `Spacing.L` horizontal, `Spacing.M` vertical (container provides)
-- **Shadow**: Subtle top shadow for elevation
-- **Use for**: Primary action buttons, bottom CTAs
-
-### Floating Action Button (FAB)
-
-- **Position**: Bottom-right corner
-- **Margin**: `Spacing.L` from edges
-- **Size**: 56x56
-- **Shape**: Circle (50% radius)
-- **Color**: `theme.colors.primary`
-- **Icon**: White, 24px
-- **Shadow**: Elevation shadow
-- **Animation**: Scale in on mount
-
----
-
-## Usage Guidelines
-
-| Screen Type | Header Type | Scroll | Footer |
-|-------------|------------|--------|--------|
-| Detail page | Default | Standard | Action button |
-| Home/browse | Extended | Animated collapse | None |
-| Form/input | Default | Standard | Submit button |
-| Full-screen media | None | None | Overlay controls |
-| Modal dialog | Default (no back) | Standard | Action buttons |
-
----
-
-## Do's & Don'ts
-
-### Do's
-- Use `Default` header for most screens
-- Connect scroll state to `Animated` header for smooth collapse
-- Use footer for primary screen actions (not inline buttons)
-- Keep header title concise (max ~20 characters)
-
-### Don'ts
-- Don't put more than 3 action icons in header right
-- Don't use `Animated` header for short, non-scrollable content
-- Don't add padding to footer content — container handles it
-- Don't use custom header heights — stick to standard types

package/.claude/skills/design-system/references/spec-convention.md

@@ -1,80 +0,0 @@
----
-tags: design, convention, spec, guideline, designer
-related: design-system-kits/references/code-convention.md
----
-
-# Spec Convention
-
-Apply this convention to every AI-generated design specification.
-
-## Scope and Consistency
-
-1. Use this document as the single source of truth for design spec formatting.
-2. Any copied spec-convention reference in other skills must be identical to this file.
-3. Every design spec maps 1:1 to a code reference in design-system-kits.
-
-## 0) Spec Structure
-
-Every component design spec MUST follow this structure in order:
-
-1. **Title** — Component name as H1
-2. **Description** — What the component does, package name, platform support
-3. **Anatomy** — ASCII diagram showing structural parts + parts table
-4. **Variants** — Visual style variations (if applicable)
-5. **Sizes** — Dimension options with token references
-6. **States** — All interactive states with color tokens
-7. **Spacing and Dimensions** — Layout tokens used
-8. **Layout** — Positioning and alignment rules
-9. **Accessibility** — WCAG, touch targets, screen reader notes
-10. **Do's and Don'ts** — Usage guidance
-
-## 1) Token References
-
-1. Always reference design tokens — never raw hex or px values.
-2. Color format: `Colors.{name}` (e.g., `Colors.pink_03`)
-3. Spacing format: `Spacing.{size}` with pixel value (e.g., `Spacing.M` (12))
-4. Radius format: `Radius.{size}` with pixel value (e.g., `Radius.S` (8))
-5. Typography format: `{category}_{size}_{weight}` (e.g., `action_default_bold`)
-6. Theme color format: `theme.colors.{path}` (e.g., `theme.colors.primary`)
-
-## 2) Platform Parity
-
-1. Indicate platform support: `RN ✅ | Compose ✅` or `RN ✅ | Compose ❌`
-2. Note behavioral differences between platforms when they exist.
-3. Use the same token names across platforms.
-
-## 3) State Coverage
-
-Every interactive component MUST define these states:
-
-1. **Default** — Resting state
-2. **Pressed** — Active touch state
-3. **Focused** — Input focus state (for form controls)
-4. **Disabled** — Non-interactive state
-5. **Error** — Validation failure (for form controls)
-6. **Loading** — Async operation in progress (where applicable)
-
-## 4) Accessibility Requirements
-
-1. Minimum touch target: 44pt
-2. Color contrast: WCAG AA (4.5:1 minimum for text)
-3. Screen reader labels for all interactive elements
-4. Focus management for form flows
-
-## 5) Bilingual Labels
-
-1. Use English for all spec content
-2. Add Vietnamese (tiếng Việt) labels where relevant for MoMo team context
-3. Format: `English label` / `Vietnamese label`
-
-## 6) Enforcement Checklist
-
-Before finalizing a design spec, verify:
-
-1. All color values use token references, not raw hex.
-2. All spacing/dimension values use token references, not raw pixels.
-3. All interactive states are documented.
-4. Accessibility section is included.
-5. Platform support is indicated.
-6. Anatomy diagram is present.
-7. Do's and Don'ts section is included.

package/.claude/skills/design-system/references/tokens/colors.md

@@ -1,131 +0,0 @@
-# Colors — Design Guideline
-
-## Color System Overview
-
-MoMo KitX uses a token-based color system shared across React Native and Compose. All colors are referenced by token name (e.g. `Colors.pink_03`), never by raw hex values.
-
----
-
-## Grayscale Palette (black_01 – black_20)
-
-| Token | Hex | Design Role |
-|-------|-----|-------------|
-| `black_01` | #FFFFFF | White, surface backgrounds |
-| `black_02` | #F9F9F9 | Subtle background |
-| `black_03` | #F0F0F0 | Border disabled state |
-| `black_04` | #E8E8E8 | Border default, dividers |
-| `black_05` | #E5E5E5 | Light separator |
-| `black_06` | #D8D8D8 | Muted border |
-| `black_07` | #CCCCCC | Placeholder icon |
-| `black_08` | #C6C6C6 | Text disabled |
-| `black_09` | #B9B9B9 | Inactive icon |
-| `black_10` | #A0A0A0 | Subtle text |
-| `black_11` | #878787 | Muted text |
-| `black_12` | #727272 | Text hint / placeholder |
-| `black_13` | #646464 | Secondary icon |
-| `black_14` | #565656 | Medium emphasis text |
-| `black_15` | #484848 | Text secondary |
-| `black_16` | #404040 | Strong secondary text |
-| `black_17` | #303233 | Text default (primary) |
-| `black_18` | #242424 | High emphasis text |
-| `black_19` | #18191A | Near-black text |
-| `black_20` | #000000 | Pure black |
-
-### Text Color Hierarchy
-- **Primary text**: `black_17` (#303233) — body content, headings
-- **Secondary text**: `black_15` (#484848) — supporting info, subtitles
-- **Hint/placeholder text**: `black_12` (#727272) — input hints, captions
-- **Disabled text**: `black_08` (#C6C6C6) — non-interactive text
-
-### Border Color Usage
-- **Default border**: `black_04` (#E8E8E8) — input borders, card outlines
-- **Disabled border**: `black_03` (#F0F0F0) — disabled input borders
-
----
-
-## Brand Color Families
-
-Each family has 11 tint levels: **01** (darkest) → **11** (lightest).
-- Levels **01–03**: Primary use (text, icons, interactive elements)
-- Levels **04–06**: Secondary use (hover states, accents)
-- Levels **07–11**: Background/container tints
-
-### Primary Colors
-
-| Family | 01 | 02 | 03 | Design Role |
-|--------|----|----|-----|-------------|
-| **pink** | #BC2678 | #D42A87 | #EB2F96 | Brand primary, CTA buttons |
-| **blue** | #0062CC | #006EE6 | #007AFF | Interactive, links, info |
-| **red** | #C41B24 | #DD1F29 | #F5222D | Error, danger, destructive |
-| **green** | #2A9F47 | #2FB350 | #34C759 | Success, positive, confirmation |
-| **orange** | #C84316 | #E14C19 | #FA541C | Warning, caution |
-| **gold** | #C87012 | #E17E14 | #FA8C16 | Rewards, highlights |
-| **mint** | — | — | — | Highlight, promotional |
-| **violet** | — | — | — | Accents, special features |
-| **indigo** | — | — | — | Accents |
-| **lime** | — | — | — | Accents |
-| **yellow** | — | — | — | Accents |
-
-Special: `pink_MoMo_Branding` = #A50064 (official MoMo brand color — use only for logo/branding, not UI)
-
----
-
-## Color Usage Rules
-
-### Semantic Color Mapping
-
-| Intent | Token | Use for |
-|--------|-------|---------|
-| Brand / Primary CTA | `Colors.pink_03` | Primary buttons, active tabs, selected states |
-| Interactive / Links | `Colors.blue_03` | Links, secondary actions, info states |
-| Error / Danger | `Colors.red_03` | Error messages, destructive buttons, validation |
-| Success | `Colors.green_03` | Success states, confirmation, positive indicators |
-| Warning | `Colors.orange_03` | Warning banners, caution messages |
-| Highlight | `Colors.mint_03` | Promotional highlights, feature callouts |
-
-### Background Tint Usage
-
-Use tint levels 07–11 for backgrounds to maintain readability:
-
-| Context | Background Token | Text Token | Contrast |
-|---------|-----------------|------------|----------|
-| Error container | `Colors.red_08` | `Colors.red_03` | ✅ AA |
-| Success container | `Colors.green_08` | `Colors.green_03` | ✅ AA |
-| Warning container | `Colors.orange_08` | `Colors.orange_03` | ✅ AA |
-| Info container | `Colors.blue_08` | `Colors.blue_03` | ✅ AA |
-| Brand container | `Colors.pink_09` | `Colors.pink_03` | ✅ AA |
-
----
-
-## Accessibility
-
-### Contrast Requirements (WCAG AA)
-- **Normal text** (< 18sp): minimum 4.5:1 contrast ratio
-- **Large text** (≥ 18sp bold or ≥ 24sp): minimum 3:1 contrast ratio
-- **Interactive elements**: minimum 3:1 against background
-
-### Pre-validated Combinations
-| Text | Background | Ratio | Pass |
-|------|-----------|-------|------|
-| `black_17` on `black_01` | Dark on white | 12.6:1 | ✅ AAA |
-| `black_15` on `black_01` | Secondary on white | 8.2:1 | ✅ AAA |
-| `black_12` on `black_01` | Hint on white | 4.6:1 | ✅ AA |
-| `black_01` on `pink_03` | White on brand | 4.5:1 | ✅ AA |
-| `black_08` on `black_01` | Disabled on white | 2.2:1 | ❌ Decorative only |
-
----
-
-## Do's & Don'ts
-
-### Do's
-- Use `Colors.pink_03` for primary CTA — it's the brand color
-- Use semantic tokens (`theme.colors.error.primary`) so colors adapt in dark mode
-- Use tint levels 07–11 for container backgrounds
-- Pair `black_17` with `black_01` for maximum readability
-
-### Don'ts
-- Don't hardcode hex values — always map to a token name
-- Don't use `pink_MoMo_Branding` (#A50064) for UI elements — it's for logo/branding only
-- Don't use tint levels 01–03 as backgrounds for large areas — too saturated
-- Don't place `black_12` (hint) on colored backgrounds — may fail contrast
-- Don't mix brand colors in the same visual group (e.g. pink button next to blue button)