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

package/.claude/momo-native-kits-skill/references/constants.md

@@ -0,0 +1,260 @@
+# Constants & Design Tokens
+
+## Overview
+
+Design tokens and constants ensure consistent styling across the app.
+
+**Package:** `vn.momo.kits.const`
+
+---
+
+## Colors
+
+**File:** `vn.momo/kits/const/Colors.kt`
+
+### Color Palette
+
+#### Black
+| Name | Hex | Usage |
+|------|-----|-------|
+| `Colors.black_01` | #000000 | Primary text |
+| `Colors.black_02` | #1A1A1A | Secondary text |
+| `Colors.black_03` | #333333 | Tertiary text |
+| ... | ... | ... |
+| `Colors.black_10` | #FFFFFF | Not really black |
+
+#### White
+| Name | Hex | Usage |
+|------|-----|-------|
+| `Colors.white_01` | #FFFFFF | Primary background |
+| `Colors.white_02` | #F5F5F5 | Secondary background |
+
+#### Red (Error/Danger)
+| Name | Hex | Usage |
+|------|-----|-------|
+| `Colors.red_01` | #FFEBEE | Light background |
+| `Colors.red_02` | #F44336 | Primary red |
+| `Colors.red_03` | #D32F2F | Dark red |
+| `Colors.red_04` | #C62828 | Error text |
+| `Colors.red_05` | #B71C1C | Deep red |
+
+#### Pink (Primary Brand)
+| Name | Hex | Usage |
+|------|-----|-------|
+| `Colors.pink_01` | #AD0000 | MoMo primary |
+| `Colors.pink_02` | #C62828 | Hover state |
+| `Colors.pink_03` | #7F0000 | Pressed state |
+
+#### Blue
+| Name | Hex | Usage |
+|------|-----|-------|
+| `Colors.blue_01` | #E3F2FD | Light background |
+| `Colors.blue_02` | #2196F3 | Primary blue |
+| `Colors.blue_03` | #1976D2 | Dark blue |
+| `Colors.blue_04` | #0D47A1 | Deep blue |
+| `Colors.blue_05` | #001F5C | Navy |
+
+#### Green (Success)
+| Name | Hex | Usage |
+|------|-----|-------|
+| `Colors.green_01` | #E8F5E9 | Light background |
+| `Colors.green_02` | #4CAF50 | Success |
+| `Colors.green_03` | #388E3C | Dark green |
+
+#### Yellow (Warning)
+| Name | Hex | Usage |
+|------|-----|-------|
+| `Colors.yellow_01` | #FFFDE7 | Light background |
+| `Colors.yellow_02` | #FFC107 | Warning |
+| `Colors.yellow_03` | #FFA000 | Dark yellow |
+
+#### Gray
+| Name | Hex | Usage |
+|------|-----|-------|
+| `Colors.gray_01` | #FAFAFA | Lightest gray |
+| `Colors.gray_02` | #F5F5F5 | Light gray |
+| `Colors.gray_03` | #EEEEEE | ... |
+| `Colors.gray_04` | #E0E0E0 | ... |
+| `Colors.gray_05` | #BDBDBD | ... |
+| `Colors.gray_06` | #9E9E9E | ... |
+| `Colors.gray_07` | #757575 | ... |
+| `Colors.gray_08` | #616161 | ... |
+| `Colors.gray_09` | #424242 | Dark gray |
+
+### Usage
+
+```kotlin
+import vn.momo.kits.const.Colors
+
+// Text color
+Text(
+    text = "Hello",
+    color = Colors.black_01
+)
+
+// Background
+Box(
+    modifier = Modifier.background(Colors.pink_01)
+) { /* content */ }
+
+// Conditional color
+val statusColor = if (isSuccess) Colors.green_02 else Colors.red_02
+```
+
+---
+
+## Radius
+
+**File:** `vn.momo/kits/const/Radius.kt`
+
+### Values
+
+| Name | Value | Usage |
+|------|-------|-------|
+| `Radius.S` | 4.dp | Small elements, tags |
+| `Radius.M` | 8.dp | Cards, inputs |
+| `Radius.L` | 12.dp | Large cards |
+| `Radius.XL` | 16.dp | Modals |
+| `Radius.XXL` | 24.dp | Large modals |
+
+### Usage
+
+```kotlin
+import vn.momo.kits.const.Radius
+
+// With Card
+Card(
+    cornerRadius = Radius.M
+) { /* content */ }
+
+// With shape
+Box(
+    modifier = Modifier
+        .clip(RoundedCornerShape(Radius.S))
+) { /* content */ }
+```
+
+---
+
+## Spacing
+
+**File:** `vn.momo/kits/const/Spacing.kt`
+
+### Values
+
+| Name | Value | Usage |
+|------|-------|-------|
+| `Spacing.XS` | 4.dp | Tight spacing |
+| `Spacing.S` | 8.dp | Small gaps |
+| `Spacing.M` | 12.dp | Default gaps |
+| `Spacing.L` | 16.dp | Standard padding |
+| `Spacing.XL` | 24.dp | Section spacing |
+| `Spacing.XXL` | 32.dp | Large gaps |
+
+### Usage
+
+```kotlin
+import vn.momo.kits.const.Spacing
+
+// Column spacing
+Column(
+    verticalArrangement = Arrangement.spacedBy(Spacing.M)
+) { /* items */ }
+
+// Padding
+Box(
+    modifier = Modifier.padding(Spacing.L)
+) { /* content */ }
+```
+
+---
+
+## Typography
+
+**File:** `vn.momo/kits/const/Typography.kt`
+
+### Available Styles
+
+| Style | Size | Weight | Usage |
+|-------|------|--------|-------|
+| `headlineDefault` | 24sp | Regular | Large titles |
+| `headlineDefaultBold` | 24sp | Bold | Bold headlines |
+| `titleDefault` | 20sp | Regular | Section titles |
+| `titleDefaultBold` | 20sp | Bold | Bold titles |
+| `bodyDefault` | 16sp | Regular | Body text |
+| `bodyBold` | 16sp | Bold | Bold body |
+| `bodySmall` | 14sp | Regular | Secondary text |
+| `actionDefault` | 14sp | Regular | Button text |
+| `actionDefaultBold` | 14sp | Bold | Bold buttons |
+| `captionDefault` | 12sp | Regular | Captions |
+| `captionBold` | 12sp | Bold | Bold captions |
+
+### Usage
+
+```kotlin
+import vn.momo.kits.const.Typography
+
+Text(
+    text = "Headline",
+    style = Typography.headlineDefaultBold
+)
+
+Text(
+    text = "Body text",
+    style = Typography.bodyDefault
+)
+```
+
+---
+
+## AppTheme
+
+**File:** `vn.momo.kits/const/AppTheme.kt`
+
+### Accessing Theme
+
+```kotlin
+import vn.momo.kits.const.AppTheme
+
+val theme = AppTheme.current
+
+// Theme colors
+theme.colors.primary           // Primary brand color
+theme.colors.background.surface  // Surface background
+theme.colors.text.default     // Default text color
+theme.colors.text.secondary   // Secondary text
+theme.colors.text.disable      // Disabled text
+theme.colors.border.default   // Default border
+theme.colors.error.primary    // Error color
+```
+
+### Usage in Components
+
+```kotlin
+@Composable
+fun MyComponent() {
+    val theme = AppTheme.current
+
+    Box(
+        modifier = Modifier
+            .background(theme.colors.background.surface)
+            .padding(theme.spacing?.let { Spacing.L } ?: 16.dp)
+    ) {
+        Text(
+            text = "Themed text",
+            color = theme.colors.text.default
+        )
+    }
+}
+```
+
+---
+
+## Best Practices
+
+1. **Use design tokens** - Never hardcode colors, spacing, etc.
+2. **Use Colors constants** - Consistent palette
+3. **Use Radius constants** - Consistent corner radii
+4. **Use Spacing constants** - Consistent gaps and padding
+5. **Use Typography constants** - Consistent text styles
+6. **Use AppTheme for theming** - Support light/dark mode

package/.claude/momo-native-kits-skill/references/divider.md

@@ -0,0 +1,26 @@
+# Divider
+
+**File:** `vn.momo/kits/components/Divider.kt`
+
+## Parameters
+
+```kotlin
+@Composable
+fun Divider(
+    modifier: Modifier = Modifier,
+    color: Color = AppTheme.current.colors.border.default,
+    thickness: Dp = 1.dp
+)
+```
+
+## Usage
+
+```kotlin
+Column {
+    Text(text = "Item 1")
+    Divider()
+    Text(text = "Item 2")
+    Divider()
+    Text(text = "Item 3")
+}
+```

package/.claude/momo-native-kits-skill/references/input.md

@@ -0,0 +1,408 @@
+# Input Components
+
+## Overview
+
+MoMo Native Kits provides a comprehensive set of input components for various use cases.
+
+**Package:** `vn.momo.kits.components`
+
+## Input Types
+
+| Component | Description | Use Case |
+|-----------|-------------|----------|
+| `Input` | Basic text input | Text fields, forms |
+| `InputSearch` | Search input with clear button | Search functionality |
+| `InputTextArea` | Multi-line text input | Comments, descriptions |
+| `InputOTP` | OTP code input | Verification codes |
+| `InputMoney` | Money/currency input | Payment amounts |
+| `InputDropDown` | Dropdown selection | Selection lists |
+| `InputPhoneNumber` | Phone number input | Phone fields |
+
+---
+
+## Input Component
+
+**File:** `vn/momo/kits/components/Input.kt`
+
+### Parameters
+
+```kotlin
+@Composable
+fun Input(
+    text: MutableState<String>,           // Required: Text value (MutableState)
+    onChangeText: (String) -> Unit,       // Required: Text change callback
+    modifier: Modifier = Modifier,
+    size: InputSize = InputSize.LARGE,   // SMALL or LARGE
+    floatingValue: String = "",           // Floating label text
+    placeholder: String = "",             // Placeholder text
+    error: String = "",                  // Error message
+    helper: String = "",                 // Helper text
+    icon: String = "",                   // Icon (URL or icon name)
+    leadingIcon: String = "",            // Leading icon
+    disabled: Boolean = false,           // Disabled state
+    errorSpacing: Boolean = false,       // Extra spacing for error
+    keyboardType: KeyboardType = KeyboardType.Text,
+    password: Boolean = false,           // Password field
+    maxLine: Int = 1,
+    maxLength: Int = Int.MAX_VALUE,
+    onRightIconClick: (() -> Unit)? = null,
+    onTap: (() -> Unit)? = null,
+    floatingIcon: String = "",           // Floating icon (left)
+    floatingIconColor: Color? = null      // Floating icon color
+)
+```
+
+### InputSize Values
+
+| Size | Height | Border Width | Border Radius |
+|------|--------|--------------|---------------|
+| `SMALL` | 48.dp | 1.dp | 4.dp |
+| `LARGE` | 56.dp | 1.dp | 4.dp |
+
+### Usage Examples
+
+#### Basic Input
+
+```kotlin
+val text = remember { mutableStateOf("") }
+
+Input(
+    text = text,
+    onChangeText = { text.value = it },
+    floatingValue = "Họ và tên",
+    placeholder = "Nhập họ và tên"
+)
+```
+
+#### Input with Error
+
+```kotlin
+val email = remember { mutableStateOf("") }
+val emailError = remember { mutableStateOf("Email không hợp lệ") }
+
+Input(
+    text = email,
+    onChangeText = { email.value = it },
+    floatingValue = "Email",
+    error = emailError.value  // Shows error state
+)
+```
+
+#### Input with Leading Icon
+
+```kotlin
+val phone = remember { mutableStateOf("") }
+
+Input(
+    text = phone,
+    onChangeText = { phone.value = it },
+    floatingValue = "Số điện thoại",
+    leadingIcon = "https://example.com/phone-icon.png"
+)
+```
+
+#### Password Input
+
+```kotlin
+val password = remember { mutableStateOf("") }
+
+Input(
+    text = password,
+    onChangeText = { password.value = it },
+    floatingValue = "Mật khẩu",
+    password = true,
+    keyboardType = KeyboardType.Password
+)
+```
+
+#### Disabled Input
+
+```kotlin
+Input(
+    text = remember { mutableStateOf("Giá trị cố định") },
+    onChangeText = { },
+    floatingValue = "Trường chỉ đọc",
+    disabled = true
+)
+```
+
+---
+
+## InputSearch Component
+
+**File:** `vn/momo/kits/components/InputSearch.kt`
+
+### Parameters
+
+```kotlin
+@Composable
+fun InputSearch(
+    text: MutableState<String>,
+    onChangeText: (String) -> Unit,
+    modifier: Modifier = Modifier,
+    placeholder: String = "Tìm kiếm...",
+    onClear: () -> Unit = {},
+    enabled: Boolean = true,
+    leftIcon: String = "search",         // Search icon
+    rightIcon: String = "close"          // Clear icon
+)
+```
+
+### Usage Example
+
+```kotlin
+val searchQuery = remember { mutableStateOf("") }
+
+InputSearch(
+    text = searchQuery,
+    onChangeText = { searchQuery.value = it },
+    placeholder = "Tìm kiếm sản phẩm...",
+    onClear = { searchQuery.value = "" }
+)
+```
+
+---
+
+## InputTextArea Component
+
+**File:** `vn/momo/kits/components/InputTextArea.kt`
+
+### Parameters
+
+```kotlin
+@Composable
+fun InputTextArea(
+    text: MutableState<String>,
+    onChangeText: (String) -> Unit,
+    modifier: Modifier = Modifier,
+    floatingValue: String = "",         // Floating label
+    placeholder: String = "",            // Placeholder
+    error: String = "",                 // Error message
+    minLine: Int = 3,                   // Minimum lines
+    maxLine: Int = 5,                   // Maximum lines
+    maxLength: Int = Int.MAX_VALUE,
+    wordCount: Boolean = false,          // Show word count
+    disabled: Boolean = false
+)
+```
+
+### Usage Example
+
+```kotlin
+val comment = remember { mutableStateOf("") }
+
+InputTextArea(
+    text = comment,
+    onChangeText = { comment.value = it },
+    floatingValue = "Bình luận",
+    placeholder = "Nhập bình luận của bạn...",
+    minLine = 3,
+    maxLine = 5,
+    wordCount = true
+)
+```
+
+---
+
+## InputOTP Component
+
+**File:** `vn/momo/kits/components/InputOTP.kt`
+
+### Parameters
+
+```kotlin
+@Composable
+fun InputOTP(
+    length: Int = 6,                    // Number of OTP digits
+    onComplete: (String) -> Unit,       // Called when all digits entered
+    modifier: Modifier = Modifier
+)
+```
+
+### Usage Example
+
+```kotlin
+val otp = remember { mutableStateOf("") }
+
+InputOTP(
+    length = 6,
+    onComplete = { otpCode ->
+        // Verify OTP
+        verifyOTP(otpCode)
+    }
+)
+```
+
+---
+
+## InputMoney Component
+
+**File:** `vn/momo/kits/components/InputMoney.kt`
+
+### Parameters
+
+```kotlin
+@Composable
+fun InputMoney(
+    text: MutableState<String>,
+    onChangeText: (String) -> Unit,
+    modifier: Modifier = Modifier,
+    currency: String = "VND",           // Currency code
+    placeholder: String = "0"
+)
+```
+
+### Usage Example
+
+```kotlin
+val amount = remember { mutableStateOf("") }
+
+InputMoney(
+    text = amount,
+    onChangeText = { amount.value = it },
+    currency = "VND",
+    placeholder = "0"
+)
+```
+
+---
+
+## InputDropDown Component
+
+**File:** `vn/momo/kits/components/InputDropDown.kt`
+
+### Parameters
+
+```kotlin
+@Composable
+fun InputDropDown(
+    text: MutableState<String>,
+    onChangeText: (String) -> Unit,
+    options: List<DropDownOption>,       // List of options
+    modifier: Modifier = Modifier,
+    floatingValue: String = "",           // Label
+    placeholder: String = "Chọn...",
+    error: String = "",
+    enabled: Boolean = true
+)
+
+data class DropDownOption(
+    val label: String,                   // Display text
+    val value: String                    // Selected value
+)
+```
+
+### Usage Example
+
+```kotlin
+val selectedOption = remember { mutableStateOf("") }
+
+val cities = listOf(
+    DropDownOption("Hà Nội", "hanoi"),
+    DropDownOption("TP. Hồ Chí Minh", "hcm"),
+    DropDownOption("Đà Nẵng", "danang")
+)
+
+InputDropDown(
+    text = selectedOption,
+    onChangeText = { selectedOption.value = it },
+    options = cities,
+    floatingValue = "Thành phố",
+    placeholder = "Chọn thành phố"
+)
+```
+
+---
+
+## InputPhoneNumber Component
+
+**File:** `vn/momo/kits/components/InputPhoneNumber.kt`
+
+### Parameters
+
+```kotlin
+@Composable
+fun InputPhoneNumber(
+    text: MutableState<String>,
+    onChangeText: (String) -> Unit,
+    modifier: Modifier = Modifier,
+    floatingValue: String = "",
+    placeholder: String = "",
+    error: String = "",
+    enabled: Boolean = true,
+    countryCode: String = "+84"          // Default country code
+)
+```
+
+### Usage Example
+
+```kotlin
+val phone = remember { mutableStateOf("") }
+
+InputPhoneNumber(
+    text = phone,
+    onChangeText = { phone.value = it },
+    floatingValue = "Số điện thoại",
+    placeholder = "Nhập số điện thoại",
+    countryCode = "+84"
+)
+```
+
+---
+
+## Common Patterns
+
+### Form with Multiple Inputs
+
+```kotlin
+@Composable
+fun LoginForm() {
+    val phone = remember { mutableStateOf("") }
+    val password = remember { mutableStateOf("") }
+
+    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
+        InputPhoneNumber(
+            text = phone,
+            onChangeText = { phone.value = it },
+            floatingValue = "Số điện thoại"
+        )
+
+        Input(
+            text = password,
+            onChangeText = { password.value = it },
+            floatingValue = "Mật khẩu",
+            password = true
+        )
+    }
+}
+```
+
+### Search with Debounce
+
+```kotlin
+@Composable
+fun SearchScreen() {
+    val searchQuery = remember { mutableStateOf("") }
+
+    LaunchedEffect(searchQuery.value) {
+        delay(300)  // Debounce
+        // Perform search
+    }
+
+    InputSearch(
+        text = searchQuery,
+        onChangeText = { searchQuery.value = it },
+        placeholder = "Tìm kiếm..."
+    )
+}
+```
+
+## Best Practices
+
+1. **Use floating labels** - Better for mobile UX
+2. **Show error states** - Help users correct input
+3. **Set appropriate keyboard types** - Phone, email, password
+4. **Use InputSearch for search** - Includes clear button
+5. **Use InputMoney for amounts** - Handles currency formatting
+6. **Use InputOTP for verification** - Optimized for code entry
+7. **Limit maxLength** - Prevent overflow issues