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

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

@@ -0,0 +1,241 @@
+---
+name: input-money
+description: Money input with automatic formatting. Use when collecting monetary amounts with VND currency formatting.
+---
+
+# InputMoney
+
+Money input field with automatic VND currency formatting and bold font weight.
+
+## API
+
+```kotlin
+@Composable
+fun InputMoney(
+    text: MutableState<String> = remember { mutableStateOf("0") },
+    floatingValue: String = "",
+    floatingValueColor: Color = AppTheme.current.colors.text.hint,
+    floatingIcon: String = "",
+    floatingIconColor: Color = AppTheme.current.colors.text.default,
+    placeholder: String = "0đ",
+    size: InputSize = InputSize.SMALL,
+    onChangeText: (String) -> Unit = {},
+    error: String = "",
+    errorSpacing: Boolean = false,
+    disabled: Boolean = false,
+    icon: String = "",
+    iconColor: Color = AppTheme.current.colors.text.default,
+    onPressIcon: () -> Unit = {},
+    leadingIcon: String = "",
+    leadingIconColor: Color = AppTheme.current.colors.text.hint,
+    onFocus: () -> Unit = {},
+    onBlur: () -> Unit = {},
+    loading: Boolean = false,
+    required: Boolean = false,
+    fontWeight: InputFontWeight = InputFontWeight.BOLD,
+    keyboardType: KeyboardType = KeyboardType.Number,
+)
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `MutableState<String>` | `"0"` | Current text value (required) |
+| `floatingValue` | `String` | `""` | Floating label text |
+| `floatingValueColor` | `Color` | hint color | Floating label color |
+| `floatingIcon` | `String` | `""` | Icon next to floating label |
+| `floatingIconColor` | `Color` | default color | Floating icon color |
+| `placeholder` | `String` | `"0đ"` | Placeholder text |
+| `size` | `InputSize` | `SMALL` | Input height |
+| `onChangeText` | `(String) -> Unit` | `{}` | Text change callback |
+| `error` | `String` | `""` | Error message |
+| `errorSpacing` | `Boolean` | `false` | Show spacing for error |
+| `disabled` | `Boolean` | `false` | Disabled state |
+| `icon` | `String` | `""` | Right icon name |
+| `iconColor` | `Color` | default color | Right icon color |
+| `onPressIcon` | `() -> Unit` | `{}` | Right icon click |
+| `leadingIcon` | `String` | `""` | Left icon name |
+| `leadingIconColor` | `Color` | hint color | Left icon color |
+| `onFocus` | `() -> Unit` | `{}` | Focus callback |
+| `onBlur` | `() -> Unit` | `{}` | Blur callback |
+| `loading` | `Boolean` | `false` | Loading spinner |
+| `required` | `Boolean` | `false` | Show required asterisk |
+| `fontWeight` | `InputFontWeight` | `BOLD` | Text font weight |
+| `keyboardType` | `KeyboardType` | `Number` | Keyboard type |
+
+## InputSize
+
+| Size | Height | Border Radius |
+|------|--------|---------------|
+| `SMALL` | 48dp | Radius.S |
+| `LARGE` | 56dp | Radius.S |
+
+## InputFontWeight
+
+| Value | Description |
+|-------|-------------|
+| `REGULAR` | FontWeight 400 |
+| `BOLD` | FontWeight 700 (default) |
+
+## Features
+
+- **Auto-formatting**: Automatically formats to "1.000.000đ" (VND format)
+- **Number-only**: Filters non-digit characters
+- **Bold font**: Default bold font weight (20sp)
+- **Auto-clear**: Shows clear button when focused with text
+
+## Examples
+
+### Basic Usage
+
+```kotlin
+val amount = remember { mutableStateOf("0") }
+
+InputMoney(
+    text = amount,
+    onChangeText = { amount.value = it }
+)
+
+// With floating label
+InputMoney(
+    text = amount,
+    floatingValue = "Amount",
+    onChangeText = { amount.value = it }
+)
+```
+
+### With Error
+
+```kotlin
+val amount = remember { mutableStateOf("0") }
+
+InputMoney(
+    text = amount,
+    floatingValue = "Amount",
+    error = "Minimum amount is 1,000đ",
+    errorSpacing = true,
+    onChangeText = { amount.value = it }
+)
+```
+
+### Disabled State
+
+```kotlin
+InputMoney(
+    text = amount,
+    floatingValue = "Amount",
+    disabled = true,
+    onChangeText = { }
+)
+```
+
+### With Icons
+
+```kotlin
+// Leading icon
+InputMoney(
+    text = amount,
+    floatingValue = "Transfer Amount",
+    leadingIcon = "wallet",
+    leadingIconColor = AppTheme.current.colors.primary,
+    onChangeText = { amount.value = it }
+)
+
+// Trailing icon
+InputMoney(
+    text = amount,
+    floatingValue = "Amount",
+    icon = "close",
+    onPressIcon = { amount.value = "0" },
+    onChangeText = { amount.value = it }
+)
+```
+
+### With Floating Label Icon
+
+```kotlin
+InputMoney(
+    text = amount,
+    floatingValue = "Price",
+    floatingIcon = "tag",
+    floatingIconColor = AppTheme.current.colors.primary,
+    onChangeText = { amount.value = it }
+)
+```
+
+### Required Field
+
+```kotlin
+InputMoney(
+    text = amount,
+    floatingValue = "Amount",
+    required = true,
+    onChangeText = { amount.value = it }
+)
+```
+
+### Sizes
+
+```kotlin
+// Small (default - 48dp)
+InputMoney(
+    text = amount,
+    size = InputSize.SMALL,
+    onChangeText = { amount.value = it }
+)
+
+// Large (56dp)
+InputMoney(
+    text = amount,
+    size = InputSize.LARGE,
+    onChangeText = { amount.value = it }
+)
+```
+
+### Focus Callbacks
+
+```kotlin
+InputMoney(
+    text = amount,
+    floatingValue = "Amount",
+    onFocus = { /* show keyboard */ },
+    onBlur = { /* validate amount */ },
+    onChangeText = { amount.value = it }
+)
+```
+
+### Loading State
+
+```kotlin
+InputMoney(
+    text = amount,
+    floatingValue = "Amount",
+    loading = true,
+    onChangeText = { amount.value = it }
+)
+```
+
+### Regular Font Weight
+
+```kotlin
+InputMoney(
+    text = amount,
+    floatingValue = "Amount",
+    fontWeight = InputFontWeight.REGULAR,
+    onChangeText = { amount.value = it }
+)
+```
+
+## How It Works
+
+1. User types digits (e.g., "1000000")
+2. Component automatically formats with thousand separators and "đ" suffix
+3. Display shows: "1.000.000đ"
+4. `onChangeText` returns raw numeric string (e.g., "1000000")
+
+## Auto-Clear Behavior
+
+When focused with text:
+- Clear icon appears on the right
+- Clicking clears the text to "0" and triggers `onChangeText("")`

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

@@ -0,0 +1,52 @@
+---
+name: input-otp
+description: OTP (One-Time Password) input field. Use when user needs to enter verification code.
+---
+
+# InputOTP
+
+OTP (One-Time Password) input field.
+
+## Keywords
+
+OTP, mã xác nhận, verification code, mã otp
+
+## API
+
+```kotlin
+@Composable
+fun InputOTP(
+    value: String,
+    length: Int? = null,
+    floatingValue: String = "Label",
+    onChangeText: (String) -> Unit,
+    errorMessage: String = "",
+)
+```
+
+## Features
+
+- Fixed length: specify `length` (e.g., 6)
+- Flexible length: leave `length` as null
+- Auto caret animation
+
+## Examples
+
+```kotlin
+val otp = remember { mutableStateOf("") }
+
+// Fixed 6-digit OTP
+InputOTP(
+    value = otp.value,
+    length = 6,
+    floatingValue = "OTP Code",
+    onChangeText = { otp.value = it }
+)
+
+// Flexible length
+InputOTP(
+    value = otp.value,
+    floatingValue = "Confirmation Code",
+    onChangeText = { otp.value = it }
+)
+```

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

@@ -0,0 +1,175 @@
+---
+name: input-phone-number
+description: Phone number input with automatic +84 prefix. Use when collecting Vietnamese phone numbers.
+---
+
+# InputPhoneNumber
+
+Phone number input field with automatic +84 country code prefix and Vietnam flag icon.
+
+## API
+
+```kotlin
+@Composable
+fun InputPhoneNumber(
+    text: MutableState<String> = remember { mutableStateOf("") },
+    placeholder: String = "0123456789",
+    size: InputPhoneNumberSize = InputPhoneNumberSize.SMALL,
+    onChangeText: (String) -> Unit = {},
+    hintText: String = "",
+    error: String = "",
+    errorSpacing: Boolean = false,
+    icon: String = "",
+    iconColor: Color = AppTheme.current.colors.text.default,
+    onRightIconPressed: () -> Unit = {},
+    onFocus: () -> Unit = {},
+    onBlur: () -> Unit = {},
+    loading: Boolean = false,
+    modifier: Modifier = Modifier,
+    inputModifier: Modifier = Modifier,
+)
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `MutableState<String>` | `""` | Current text value (required) |
+| `placeholder` | `String` | `"0123456789"` | Placeholder text |
+| `size` | `InputPhoneNumberSize` | `SMALL` | Input height |
+| `onChangeText` | `(String) -> Unit` | `{}` | Text change callback |
+| `hintText` | `String` | `""` | Hint text below input |
+| `error` | `String` | `""` | Error message |
+| `errorSpacing` | `Boolean` | `false` | Show spacing for error |
+| `icon` | `String` | `""` | Right icon name |
+| `iconColor` | `Color` | default color | Right icon color |
+| `onRightIconPressed` | `() -> Unit` | `{}` | Right icon click |
+| `onFocus` | `() -> Unit` | `{}` | Focus callback |
+| `onBlur` | `() -> Unit` | `{}` | Blur callback |
+| `loading` | `Boolean` | `false` | Loading spinner |
+| `modifier` | `Modifier` | `Modifier` | Outer modifier |
+| `inputModifier` | `Modifier` | `Modifier` | Input field modifier |
+
+## InputPhoneNumberSize
+
+| Size | Height | Text Style | Divider Height |
+|------|--------|------------|----------------|
+| `SMALL` | 48dp | headerSSemibold | 24dp |
+| `LARGE` | 56dp | headerMBold | 32dp |
+
+## Features
+
+- **Auto +84 prefix**: Automatically adds "+84" country code prefix
+- **Vietnam flag**: Shows Vietnam flag icon next to country code
+- **Number-only keyboard**: Automatically uses numeric keyboard
+- **Auto-clear**: Shows clear button when focused with text
+
+## Examples
+
+### Basic Usage
+
+```kotlin
+val phone = remember { mutableStateOf("") }
+
+InputPhoneNumber(
+    text = phone,
+    onChangeText = { phone.value = it }
+)
+```
+
+### With Placeholder
+
+```kotlin
+val phone = remember { mutableStateOf("") }
+
+InputPhoneNumber(
+    text = phone,
+    placeholder = "Enter phone number",
+    onChangeText = { phone.value = it }
+)
+```
+
+### With Error
+
+```kotlin
+val phone = remember { mutableStateOf("") }
+
+InputPhoneNumber(
+    text = phone,
+    error = "Invalid phone number",
+    errorSpacing = true,
+    onChangeText = { phone.value = it }
+)
+```
+
+### Sizes
+
+```kotlin
+// Small (default - 48dp)
+InputPhoneNumber(
+    text = phone,
+    size = InputPhoneNumberSize.SMALL,
+    onChangeText = { phone.value = it }
+)
+
+// Large (56dp)
+InputPhoneNumber(
+    text = phone,
+    size = InputPhoneNumberSize.LARGE,
+    onChangeText = { phone.value = it }
+)
+```
+
+### With Right Icon
+
+```kotlin
+InputPhoneNumber(
+    text = phone,
+    icon = "close",
+    onRightIconPressed = { phone.value = "" },
+    onChangeText = { phone.value = it }
+)
+```
+
+### Focus Callbacks
+
+```kotlin
+InputPhoneNumber(
+    text = phone,
+    onFocus = { /* show keyboard */ },
+    onBlur = { /* validate phone */ },
+    onChangeText = { phone.value = it }
+)
+```
+
+### Loading State
+
+```kotlin
+InputPhoneNumber(
+    text = phone,
+    loading = true,
+    onChangeText = { phone.value = it }
+)
+```
+
+### Hint Text
+
+```kotlin
+InputPhoneNumber(
+    text = phone,
+    hintText = "Enter 10-digit phone number",
+    onChangeText = { phone.value = it }
+)
+```
+
+## How It Works
+
+1. User types 9 digits (e.g., "912345678")
+2. Component automatically prepends "+84" (e.g., "+84912345678")
+3. Display shows: "+84 912 345 678" (formatted)
+
+## Auto-Clear Behavior
+
+When focused with text:
+- Clear icon appears on the right
+- Clicking clears the text and triggers `onChangeText("")`

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

@@ -0,0 +1,57 @@
+---
+name: input-search
+description: Search input with built-in search icon and clear button. Use when implementing search functionality.
+---
+
+# InputSearch
+
+Search input with built-in search icon and clear button.
+
+## Keywords
+
+search, tìm kiếm, ô tìm kiếm
+
+## API
+
+```kotlin
+@Composable
+fun InputSearch(
+    inputSearchProps: InputSearchProps = InputSearchProps(
+        text = remember { mutableStateOf("") }
+    ),
+)
+
+data class InputSearchProps(
+    val text: MutableState<String>,
+    val placeholder: String = "",
+    val onChangeText: (String) -> Unit = {},
+    val onClearPress: () -> Unit = {},
+    val loading: Boolean = false,
+    val disabled: Boolean = false,
+    val buttonText: String = "",
+    val showButtonText: Boolean = false,
+    // ... more options
+)
+```
+
+## Features
+
+- Built-in search icon
+- Auto clear button when focused with text
+- Loading state support
+- Custom right icon support
+
+## Examples
+
+```kotlin
+val searchText = remember { mutableStateOf("") }
+
+InputSearch(
+    inputSearchProps = InputSearchProps(
+        text = searchText,
+        placeholder = "Search...",
+        onChangeText = { searchText.value = it },
+        onClearPress = { searchText.value = "" }
+    )
+)
+```

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

@@ -0,0 +1,46 @@
+---
+name: input-text-area
+description: Multi-line text area input. Use when user needs to enter longer text descriptions.
+---
+
+# InputTextArea
+
+Multi-line text area input.
+
+## Keywords
+
+textarea, text area, mô tả, description, nhập mô tả
+
+## API
+
+```kotlin
+@Composable
+fun InputTextArea(
+    text: MutableState<String>,
+    floatingValue: String = "",
+    placeholder: String = "",
+    maxLength: Int = 300,
+    onChangeText: (String) -> Unit = {},
+    error: String = "",
+)
+```
+
+## Features
+
+- Multi-line input
+- Character count display (e.g., "50/300")
+- Max length enforcement
+
+## Examples
+
+```kotlin
+val description = remember { mutableStateOf("") }
+
+InputTextArea(
+    text = description,
+    floatingValue = "Description",
+    placeholder = "Enter description...",
+    maxLength = 300,
+    onChangeText = { description.value = it }
+)
+```

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

@@ -0,0 +1,51 @@
+---
+name: navigation-container
+description: Entry point for Compose screens. Use when setting up the main container for a Compose-based screen.
+---
+
+# NavigationContainer
+
+Entry point for Compose screens.
+
+## Keywords
+
+navigation, container, screen, màn hình
+
+## API
+
+```kotlin
+@Composable
+fun NavigationContainer(
+    initialScreen: @Composable () -> Unit,
+    options: NavigationOptions? = null,
+    initialTheme: Theme = defaultTheme,
+    applicationContext: MiniAppContext? = null,
+    maxApi: IMaxApi? = null,
+    setNavigator: ((Navigator) -> Unit)? = null,
+    statusBarHeight: Dp? = null,
+    config: KitConfig? = null,
+    language: String? = null
+)
+```
+
+## Parameters
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `initialScreen` | `@Composable () -> Unit` | Initial screen |
+| `options` | `NavigationOptions?` | Navigation options |
+| `maxApi` | `IMaxApi?` | Required for native features |
+| `config` | `KitConfig?` | UI configuration |
+| `language` | `String?` | Current language |
+
+## Examples
+
+```kotlin
+NavigationContainer(
+    initialScreen = { HomeScreen() },
+    maxApi = maxApi,
+    config = config,
+    language = language,
+    setNavigator = { navigator = it }
+)
+```