@momo-kits/native-kits 0.157.1-debug → 0.157.1-skill.1

package/.claude/momo-native-kits/SKILL.md

@@ -0,0 +1,87 @@
+---
+name: momo-native-kits
+description: UI component library for MoMo Android Compose apps. Use when building or modifying Compose screens in MoMo app.
+---
+
+# momo-native-kits
+
+## Objective
+Build Compose UI screens using MoMo's internal component library.
+
+## Quick Start
+
+```kotlin
+ComposeAppContainer(
+    initialScreen = { MyScreen() },
+    options = null,  // optional
+    initialTheme = defaultTheme,  // optional
+    applicationContext = null  // optional
+)
+```
+
+Note: `maxApi`, `config`, `language` are auto-injected internally.
+
+## Components
+
+### Actions
+| Need | Component |
+|------|-----------|
+| Button | Button(type, title, onClick, loading) |
+| Checkbox | CheckBox(checked, onCheckedChange) |
+| Radio | Radio(value, groupValue, onChange) |
+| Switch | Switch(value, onChange) |
+
+### Inputs
+| Need | Component |
+|------|-----------|
+| Text | Input(text, floatingValue, onChangeText) |
+| Phone | InputPhoneNumber(text, onChangeText) |
+| Money | InputMoney(text, floatingValue, onChangeText) |
+| OTP | InputOTP(value, length, onChangeText) |
+| Search | InputSearch(inputSearchProps) |
+| Dropdown | InputDropDown(text, items, onItemSelected) |
+
+### Navigation
+| Need | Component |
+|------|-----------|
+| Container | NavigationContainer |
+| Navigate | navigator.push { Screen() }, navigator.pop() |
+| Bottom sheet | navigator.showBottomSheet { } |
+| Modal | navigator.showModal { } |
+
+### Display
+| Need | Component |
+|------|-----------|
+| Badge | Badge(label) |
+| Tag | Tag(label, color) |
+| Icon | Icon(source, size) |
+| Image | Image(source, modifier) |
+| Text | Text(text, style) |
+
+## Clarification Workflow
+
+When prompt is ambiguous, ask:
+
+1. **What component?** (button, input, navigation...)
+2. **What for?** (confirm, cancel, search, select...)
+3. **Any specific props?** (type, size, icons, error state...)
+
+### Keywords to Map Intent
+| Component | Keywords |
+|-----------|----------|
+| Button | confirm, submit, cancel, delete, danger |
+| Input | text, name, email, form |
+| InputPhoneNumber | phone, số điện thoại |
+| InputMoney | money, tiền, vnd |
+| InputOTP | otp, mã xác nhận |
+| CheckBox | agree, terms, tick |
+| Switch | toggle, bật tắt, on/off |
+| BottomSheet | modal, popup, slide up |
+
+### Rule: Never Guess
+- DO ask clarifying questions first
+- DO wait for confirmation before implementing
+
+## References
+
+See [references/](references/) for detailed component API.

package/.claude/momo-native-kits/references/Badge.md

@@ -0,0 +1,39 @@
+---
+name: badge
+description: Badge component for displaying count or label. Use when showing notification counts, status labels, or count indicators.
+---
+
+# Badge
+
+Badge component for displaying count or label.
+
+## Keywords
+
+badge, số đếm, notification badge, label
+
+## API
+
+```kotlin
+@Composable
+fun Badge(
+    label: String = "Label",
+    backgroundColor: Color? = null,
+)
+```
+
+## Features
+
+- Shows "99+" when label > 99
+
+## Examples
+
+```kotlin
+// Number badge
+Badge(label = "5")
+
+// Text badge
+Badge(label = "New")
+
+// Large number
+Badge(label = "100") // Shows "99+"
+```

package/.claude/momo-native-kits/references/BadgeDot.md

@@ -0,0 +1,37 @@
+---
+name: badge-dot
+description: Small dot badge for notifications. Use when showing presence indicator or unread notification dot.
+---
+
+# BadgeDot
+
+Small dot badge for notifications.
+
+## Keywords
+
+dot, small dot, notification dot, chấm tròn
+
+## API
+
+```kotlin
+@Composable
+fun BadgeDot(
+    size: BadgeDotSize = BadgeDotSize.MEDIUM,
+    color: Color = AppTheme.current.colors.error.primary
+)
+
+enum class BadgeDotSize { SMALL, MEDIUM, LARGE }
+```
+
+## Examples
+
+```kotlin
+// Default (red dot)
+BadgeDot()
+
+// Small dot
+BadgeDot(size = BadgeDotSize.SMALL)
+
+// Large dot with custom color
+BadgeDot(size = BadgeDotSize.LARGE, color = Colors.green_03)
+```

package/.claude/momo-native-kits/references/BottomSheet.md

@@ -0,0 +1,51 @@
+---
+name: bottom-sheet
+description: Bottom sheet component for sliding up content. Use when showing modal content that slides up from bottom.
+---
+
+# BottomSheet
+
+Bottom sheet component for sliding up content.
+
+## Keywords
+
+bottom sheet, slide up, modal, popup
+
+## Usage
+
+```kotlin
+navigator.showBottomSheet(
+    content = { /* Content */ },
+    isSurface: Boolean = false,
+    barrierDismissible: Boolean = true,
+    onDismiss: (() -> Unit)? = null,
+    bottomSheetHeader: BottomHeader? = null
+)
+```
+
+## BottomHeader
+
+```kotlin
+// Title header
+BottomHeader.Title(data = "Title")
+
+// Custom header
+BottomHeader.Custom { /* Composable */ }
+```
+
+## Examples
+
+```kotlin
+// Simple bottom sheet
+navigator.showBottomSheet {
+    Column(modifier = Modifier.padding(16.dp)) {
+        Text("Content")
+    }
+}
+
+// With header
+navigator.showBottomSheet(
+    bottomSheetHeader = BottomHeader.Title("Select"),
+    content = { SelectionList() }
+)
+```

package/.claude/momo-native-kits/references/BottomTab.md

@@ -0,0 +1,65 @@
+---
+name: bottom-tab
+description: Bottom tab navigation with optional floating button. Use when implementing bottom tab navigation.
+---
+
+# BottomTab
+
+Bottom tab navigation with optional floating button.
+
+## Keywords
+
+tab, tabs, bottom nav, tab bar
+
+## API
+
+```kotlin
+@Composable
+fun BottomTab(
+    items: List<BottomTabItem>,
+    floatingButton: BottomTabFloatingButton? = null
+)
+
+data class BottomTabItem(
+    val name: String,
+    val label: String,
+    val icon: String,
+    val showDot: Boolean = false,
+    val badgeLabel: String? = null,
+    val screen: @Composable () -> Unit,
+    val options: NavigationOptions? = null
+)
+
+data class BottomTabFloatingButton(
+    val icon: String,
+    val label: String,
+    val onPress: () -> Unit,
+)
+```
+
+## Examples
+
+```kotlin
+BottomTab(
+    items = listOf(
+        BottomTabItem(
+            name = "home",
+            label = "Home",
+            icon = "home",
+            screen = { HomeScreen() }
+        ),
+        BottomTabItem(
+            name = "wallet",
+            label = "Wallet",
+            icon = "wallet",
+            badgeLabel = "3",
+            screen = { WalletScreen() }
+        )
+    ),
+    floatingButton = BottomTabFloatingButton(
+        icon = "qr_code",
+        label = "Scan",
+        onClick = { /* Scan QR */ }
+    )
+)
+```

package/.claude/momo-native-kits/references/Button.md

@@ -0,0 +1,197 @@
+---
+name: button
+description: Button component for user actions. Use when user needs to trigger an action (confirm, cancel, submit, delete).
+---
+
+# Button
+
+Button component for user actions with various styles and states.
+
+## API
+
+```kotlin
+@Composable
+fun Button(
+    onClick: () -> Unit,
+    type: ButtonType = ButtonType.PRIMARY,
+    size: Size = Size.LARGE,
+    iconRight: String = "",
+    iconLeft: String = "",
+    title: String = "Button",
+    loading: Boolean = false,
+    useTintColor: Boolean = true,
+    isFull: Boolean = true,
+    modifier: Modifier = Modifier,
+)
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onClick` | `() -> Unit` | **Required** | Callback when button is clicked |
+| `type` | `ButtonType` | `PRIMARY` | Button style variant |
+| `size` | `Size` | `LARGE` | Button size (height) |
+| `iconRight` | `String` | `""` | Icon name to show on right side |
+| `iconLeft` | `String` | `""` | Icon name to show on left side |
+| `title` | `String` | `"Button"` | Button text |
+| `loading` | `Boolean` | `false` | Show loading spinner |
+| `useTintColor` | `Boolean` | `true` | Apply tint color to icon |
+| `isFull` | `Boolean` | `true` | Full width button |
+| `modifier` | `Modifier` | `Modifier` | Compose modifier |
+
+## ButtonType
+
+| Type | Description | Background | Border |
+|------|-------------|------------|--------|
+| `PRIMARY` | Main action button | Primary color | None |
+| `SECONDARY` | Secondary action | Surface color | 1dp border |
+| `TONAL` | Tonal background | Tonal color | None |
+| `OUTLINE` | Border only | Surface color | 1dp primary |
+| `DANGER` | Warning/Delete | Error color | None |
+| `TEXT` | Text only | Transparent | None |
+| `DISABLED` | Disabled state | Disable color | None |
+
+## Size
+
+| Size | Height | Text Style | Icon Size |
+|------|--------|------------|-----------|
+| `LARGE` | 48dp | actionDefaultBold | 24dp |
+| `MEDIUM` | 36dp | actionSBold | 16dp |
+| `SMALL` | 28dp | actionXsBold | 16dp |
+
+## States
+
+- **Default**: Normal button state
+- **Pressed**: 2dp padding shrink + 0.5f alpha animation
+- **Loading**: 0.75f alpha, spinner replaces icon or title
+- **Disabled**: `type = ButtonType.DISABLED` or `type = ButtonType.TEXT`
+
+## Examples
+
+### Basic Usage
+
+```kotlin
+// Primary button (default)
+Button(onClick = { /* action */ }, title = "Confirm")
+
+// Secondary button
+Button(onClick = { /* action */ }, title = "Cancel", type = ButtonType.SECONDARY)
+
+// Danger button
+Button(onClick = { /* action */ }, title = "Delete", type = ButtonType.DANGER)
+```
+
+### With Icons
+
+```kotlin
+// Icon on left
+Button(
+    onClick = { },
+    title = "Confirm",
+    iconLeft = "check"
+)
+
+// Icon on right
+Button(
+    onClick = { },
+    title = "Next",
+    iconRight = "arrow_forward"
+)
+
+// Both icons
+Button(
+    onClick = { },
+    title = "Send",
+    iconLeft = "send",
+    iconRight = "chevron_right"
+)
+```
+
+### Loading State
+
+```kotlin
+// Loading with spinner
+Button(
+    onClick = { },
+    title = "Loading",
+    loading = true
+)
+
+// Loading with icon (spinner replaces icon)
+Button(
+    onClick = { },
+    title = "Submit",
+    iconLeft = "save",
+    loading = true
+)
+```
+
+### Sizes
+
+```kotlin
+// Large button (default - 48dp)
+Button(onClick = { }, title = "Large", size = Size.LARGE)
+
+// Medium button (36dp)
+Button(onClick = { }, title = "Medium", size = Size.MEDIUM)
+
+// Small button (28dp)
+Button(onClick = { }, title = "Small", size = Size.SMALL)
+```
+
+### Full Width vs Auto Width
+
+```kotlin
+// Full width (default)
+Button(onClick = { }, title = "Full Width", isFull = true)
+
+// Auto width
+Button(onClick = { }, title = "Auto", isFull = false)
+```
+
+### Outline Button
+
+```kotlin
+Button(
+    onClick = { },
+    title = "Outline",
+    type = ButtonType.OUTLINE
+)
+```
+
+### Text Button
+
+```kotlin
+Button(
+    onClick = { },
+    title = "Text Only",
+    type = ButtonType.TEXT
+)
+```
+
+### Disabled Button
+
+```kotlin
+// Using DISABLED type
+Button(
+    onClick = { },
+    title = "Disabled",
+    type = ButtonType.DISABLED
+)
+
+// Or just don't provide onClick handler
+Button(
+    onClick = { },  // Empty or no action
+    title = "No Action"
+)
+```
+
+## Icon Names
+
+Common icons available:
+- `check`, `close`, `arrow_back`, `arrow_forward`, `chevron_right`, `chevron_left`
+- `add`, `remove`, `delete`, `edit`, `save`, `send`
+- `home`, `settings`, `search`, `menu`, `more_vert`
+
+Use icon names from MoMo's icon library.

package/.claude/momo-native-kits/references/CheckBox.md

@@ -0,0 +1,51 @@
+---
+name: checkbox
+description: Checkbox component for boolean selection. Use when user needs to select one or more options, agree to terms, or toggle boolean values.
+---
+
+# CheckBox
+
+Checkbox component for boolean selection.
+
+## Keywords
+
+checkbox, tick, tích chọn, check
+
+## API
+
+```kotlin
+@Composable
+fun CheckBox(
+    checked: Boolean = false,
+    onCheckedChange: (Boolean) -> Unit,
+    title: String = "",
+    indeterminate: Boolean = false,
+    disabled: Boolean = false,
+)
+```
+
+## States
+
+- Unchecked
+- Checked
+- Indeterminate
+- Disabled
+
+## Examples
+
+```kotlin
+var isChecked by remember { mutableStateOf(false) }
+
+CheckBox(
+    checked = isChecked,
+    onCheckedChange = { isChecked = it },
+    title = "I agree"
+)
+
+// Indeterminate
+CheckBox(
+    checked = isChecked,
+    indeterminate = true,
+    onCheckedChange = { isChecked = it }
+)
+```

package/.claude/momo-native-kits/references/Chip.md

@@ -0,0 +1,47 @@
+---
+name: chip
+description: Selectable chip component. Use when displaying filter options, tags, or selectable categories.
+---
+
+# Chip
+
+Selectable chip component.
+
+## Keywords
+
+chip, filter, selectable, tag chọn
+
+## API
+
+```kotlin
+@Composable
+fun Chip(
+    label: String? = "Label",
+    iconLeft: String? = null,
+    iconRight: String? = null,
+    selected: Boolean = false,
+    onClick: () -> Unit = {},
+    size: ChipSize = ChipSize.LARGE,
+)
+
+enum class ChipSize { SMALL, LARGE }
+```
+
+## Features
+
+- Selected state with border
+- Icon support (left/right)
+- Two sizes
+
+## Examples
+
+```kotlin
+// Unselected chip
+Chip(label = "Tag", onClick = { })
+
+// Selected chip
+Chip(label = "Selected", selected = true, onClick = { })
+
+// Chip with icon
+Chip(label = "Filter", iconLeft = "filter", selected = true, onClick = { })
+```

package/.claude/momo-native-kits/references/Divider.md

@@ -0,0 +1,29 @@
+---
+name: divider
+description: Divider component for separating content. Use when needing to visually separate sections in a layout.
+---
+
+# Divider
+
+Divider component for separating content.
+
+## Keywords
+
+divider, line, đường kẻ, separator
+
+## API
+
+```kotlin
+@Composable
+fun Divider()
+```
+
+## Examples
+
+```kotlin
+Column {
+    Text("Content 1")
+    Divider()
+    Text("Content 2")
+}
+```

package/.claude/momo-native-kits/references/HeaderTitle.md

@@ -0,0 +1,45 @@
+---
+name: header-title
+description: Header title component for navigation header. Use when setting screen title in navigation bar.
+---
+
+# HeaderTitle
+
+Header title component for navigation header.
+
+## Keywords
+
+header title, tiêu đề header
+
+## Types
+
+```kotlin
+// Simple title
+HeaderTitle.Default("Title")
+
+// With subtitle
+HeaderTitle.SubTitle(title = "Title", subTitle = "Subtitle")
+
+// User header
+HeaderTitle.User(
+    title: String,
+    subTitle: String? = null,
+    image: List<String>? = null,
+    onPress: (() -> Unit)? = null
+)
+```
+
+## Examples
+
+```kotlin
+navigation.setOptions(
+    headerTitle = HeaderTitle.Default("Home")
+)
+
+navigation.setOptions(
+    headerTitle = HeaderTitle.SubTitle(
+        title = "Profile",
+        subTitle = "Personal"
+    )
+)
+```

package/.claude/momo-native-kits/references/HeaderType.md

@@ -0,0 +1,47 @@
+---
+name: header-type
+description: Header type configuration for navigation. Use when customizing header appearance (transparent, default, none, or extended with search/buttons).
+---
+
+# HeaderType
+
+Header type configuration for navigation.
+
+## Keywords
+
+header, transparent, header type
+
+## Types
+
+```kotlin
+// Default header
+HeaderType.Default()
+
+// Extended header
+HeaderType.Extended(
+    floatingButton: FloatingButtonProps? = null,
+    inputSearchProps: InputSearchProps? = null
+)
+
+// Transparent header
+HeaderType.Transparent()
+
+// No header
+HeaderType.None()
+```
+
+## Examples
+
+```kotlin
+navigation.setOptions(
+    headerType = HeaderType.Default()
+)
+
+navigation.setOptions(
+    headerType = HeaderType.Transparent()
+)
+
+navigation.setOptions(
+    headerType = HeaderType.None()
+)
+```