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

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

@@ -0,0 +1,32 @@
+---
+name: icon
+description: Icon component for displaying icons. Use when adding visual icons to UI elements.
+---
+
+# Icon
+
+Icon component for displaying icons.
+
+## Keywords
+
+icon, biểu tượng
+
+## API
+
+```kotlin
+@Composable
+fun Icon(
+    source: String,  // Icon name or URL
+    size: Dp = 24.dp,
+    color: Color? = AppTheme.current.colors.text.default,
+    modifier: Modifier = Modifier,
+)
+```
+
+## Examples
+
+```kotlin
+Icon(source = "home", size = 24.dp)
+
+Icon(source = "settings", color = AppTheme.current.colors.primary)
+```

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

@@ -0,0 +1,38 @@
+---
+name: image
+description: Image component for displaying images. Use when adding image content to screens.
+---
+
+# Image
+
+Image component for displaying images.
+
+## Keywords
+
+image, hình ảnh, picture
+
+## API
+
+```kotlin
+@Composable
+fun Image(
+    source: Any,  // URL or resource
+    modifier: Modifier = Modifier,
+    options: Options? = null,
+    loading: Boolean = true,
+)
+
+data class Options(
+    val alignment: Alignment = Alignment.TopStart,
+    val contentScale: ContentScale = ContentScale.Crop,
+)
+```
+
+## Examples
+
+```kotlin
+Image(
+    source = "https://example.com/image.jpg",
+    modifier = Modifier.fillMaxWidth().height(200.dp)
+)
+```

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

@@ -0,0 +1,36 @@
+---
+name: information
+description: Info banner component. Use when displaying informational messages, warnings, or success notifications.
+---
+
+# Information
+
+Info banner component.
+
+## Keywords
+
+info, information, thông báo, banner
+
+## API
+
+```kotlin
+@Composable
+fun Information(
+    title: String,
+    content: String? = null,
+    icon: String? = null,
+    type: InformationType = InformationType.INFO
+)
+
+enum class InformationType { INFO, WARNING, ERROR, SUCCESS }
+```
+
+## Examples
+
+```kotlin
+Information(
+    title = "Info",
+    content = "Information here",
+    type = InformationType.INFO
+)
+```

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

@@ -0,0 +1,334 @@
+---
+name: input
+description: Text input field with floating label support. Use when collecting text input from users.
+---
+
+# Input
+
+Text input field with floating label, validation, icons, and various states.
+
+## API
+
+```kotlin
+@Composable
+fun Input(
+    text: MutableState<String> = remember { mutableStateOf("") },
+    floatingValue: String = "",
+    floatingValueColor: Color = AppTheme.current.colors.text.hint,
+    floatingIcon: String = "",
+    floatingIconColor: Color = AppTheme.current.colors.text.default,
+    placeholder: String = "",
+    size: InputSize = InputSize.SMALL,
+    onChangeText: (String) -> Unit = {},
+    hintText: String = "",
+    error: String = "",
+    errorSpacing: Boolean = false,
+    disabled: Boolean = false,
+    readOnly: Boolean = false,
+    secureTextEntry: Boolean = false,
+    icon: String = "",
+    iconColor: Color = AppTheme.current.colors.text.default,
+    onRightIconPressed: () -> Unit = {},
+    leadingIcon: String = "",
+    leadingIconColor: Color = AppTheme.current.colors.text.hint,
+    onFocus: () -> Unit = {},
+    onBlur: () -> Unit = {},
+    loading: Boolean = false,
+    required: Boolean = false,
+    fontWeight: InputFontWeight = InputFontWeight.REGULAR,
+    keyboardType: KeyboardType = KeyboardType.Text,
+    modifier: Modifier = Modifier,
+    inputModifier: Modifier = Modifier,
+)
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `MutableState<String>` | `""` | 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` | `""` | Placeholder text |
+| `size` | `InputSize` | `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 |
+| `disabled` | `Boolean` | `false` | Disabled state |
+| `readOnly` | `Boolean` | `false` | Read-only state |
+| `secureTextEntry` | `Boolean` | `false` | Password field |
+| `icon` | `String` | `""` | Right icon name |
+| `iconColor` | `Color` | default color | Right icon color |
+| `onRightIconPressed` | `() -> 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` | `REGULAR` | Text font weight |
+| `keyboardType` | `KeyboardType` | `Text` | Keyboard type |
+| `modifier` | `Modifier` | `Modifier` | Outer modifier |
+| `inputModifier` | `Modifier` | `Modifier` | Input field modifier |
+
+## InputSize
+
+| Size | Height | Border Radius |
+|------|--------|---------------|
+| `SMALL` | 48dp | Radius.S |
+| `LARGE` | 56dp | Radius.S |
+
+## InputFontWeight
+
+| Value | Description |
+|-------|-------------|
+| `REGULAR` | FontWeight 400 |
+| `BOLD` | FontWeight 700 |
+
+## States
+
+- **Default**: Normal border color
+- **Focused**: Primary border color (1.5dp)
+- **Error**: Error border color + error message
+- **Disabled**: Disable border color, reduced opacity
+- **ReadOnly**: No border highlight
+
+## Examples
+
+### Basic Usage
+
+```kotlin
+val text = remember { mutableStateOf("") }
+
+Input(
+    text = text,
+    onChangeText = { text.value = it }
+)
+
+// With floating label
+Input(
+    text = text,
+    floatingValue = "Name",
+    onChangeText = { text.value = it }
+)
+
+// With placeholder
+Input(
+    text = text,
+    placeholder = "Enter your name",
+    onChangeText = { text.value = it }
+)
+```
+
+### With Error
+
+```kotlin
+val email = remember { mutableStateOf("") }
+val emailError = remember { mutableStateOf("") }
+
+// Show error message
+Input(
+    text = email,
+    floatingValue = "Email",
+    error = "Invalid email address",
+    errorSpacing = true,
+    onChangeText = { email.value = it }
+)
+```
+
+### Password Field
+
+```kotlin
+val password = remember { mutableStateOf("") }
+
+Input(
+    text = password,
+    floatingValue = "Password",
+    secureTextEntry = true,
+    onChangeText = { password.value = it }
+)
+```
+
+### With Icons
+
+```kotlin
+val text = remember { mutableStateOf("") }
+
+// Leading icon (left)
+Input(
+    text = text,
+    floatingValue = "Username",
+    leadingIcon = "person",
+    leadingIconColor = AppTheme.current.colors.text.hint,
+    onChangeText = { text.value = it }
+)
+
+// Trailing icon (right)
+Input(
+    text = text,
+    floatingValue = "Email",
+    icon = "close",
+    onRightIconPressed = { text.value = "" },
+    onChangeText = { text.value = it }
+)
+
+// Both icons
+Input(
+    text = text,
+    floatingValue = "Search",
+    leadingIcon = "search",
+    icon = "clear",
+    onChangeText = { text.value = it }
+)
+```
+
+### With Floating Label Icon
+
+```kotlin
+Input(
+    text = text,
+    floatingValue = "Phone",
+    floatingIcon = "phone",
+    floatingIconColor = AppTheme.current.colors.primary,
+    onChangeText = { text.value = it }
+)
+```
+
+### Required Field
+
+```kotlin
+Input(
+    text = text,
+    floatingValue = "Full Name",
+    required = true,
+    onChangeText = { text.value = it }
+)
+```
+
+### Disabled / ReadOnly
+
+```kotlin
+// Disabled
+Input(
+    text = text,
+    floatingValue = "Disabled",
+    disabled = true,
+    onChangeText = { }
+)
+
+// Read only
+Input(
+    text = text,
+    floatingValue = "Read Only",
+    readOnly = true,
+    onChangeText = { }
+)
+```
+
+### Keyboard Types
+
+```kotlin
+// Text keyboard (default)
+Input(
+    text = text,
+    floatingValue = "Name",
+    keyboardType = KeyboardType.Text,
+    onChangeText = { }
+)
+
+// Number keyboard
+Input(
+    text = text,
+    floatingValue = "Age",
+    keyboardType = KeyboardType.Number,
+    onChangeText = { }
+)
+
+// Email keyboard
+Input(
+    text = text,
+    floatingValue = "Email",
+    keyboardType = KeyboardType.Email,
+    onChangeText = { }
+)
+
+// Phone keyboard
+Input(
+    text = text,
+    floatingValue = "Phone",
+    keyboardType = KeyboardType.Phone,
+    onChangeText = { }
+)
+```
+
+### Focus Callbacks
+
+```kotlin
+Input(
+    text = text,
+    floatingValue = "Name",
+    onFocus = { /* show keyboard */ },
+    onBlur = { /* hide keyboard, validate */ },
+    onChangeText = { text.value = it }
+)
+```
+
+### Loading State
+
+```kotlin
+Input(
+    text = text,
+    floatingValue = "Loading",
+    loading = true,
+    onChangeText = { text.value = it }
+)
+```
+
+### Hint Text
+
+```kotlin
+Input(
+    text = text,
+    floatingValue = "Email",
+    hintText = "We will never share your email",
+    onChangeText = { text.value = it }
+)
+```
+
+### Large Size
+
+```kotlin
+Input(
+    text = text,
+    floatingValue = "Large Input",
+    size = InputSize.LARGE,
+    onChangeText = { text.value = it }
+)
+```
+
+### Bold Font Weight
+
+```kotlin
+Input(
+    text = text,
+    floatingValue = "Bold Text",
+    fontWeight = InputFontWeight.BOLD,
+    onChangeText = { text.value = it }
+)
+```
+
+## Auto-Clear Behavior
+
+When focused with text:
+- Clear icon appears on the right
+- Clicking clears the text and triggers `onChangeText("")`
+
+## Password Toggle
+
+When `secureTextEntry = true`:
+- Eye icon appears on the right
+- Clicking toggles between show/hide password
+- Default icon: `24_security_eye_open` (show) / `24_security_eye_off` (hide)

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

@@ -0,0 +1,47 @@
+---
+name: input-dropdown
+description: Dropdown selection input. Use when user needs to select one option from a list.
+---
+
+# InputDropDown
+
+Dropdown selection input.
+
+## Keywords
+
+dropdown, select, chọn, danh mục, picker
+
+## API
+
+```kotlin
+@Composable
+fun InputDropDown(
+    text: MutableState<String>,
+    items: List<String> = emptyList(),
+    onItemSelected: (String, Int) -> Unit = { _, _ -> },
+    floatingValue: String = "",
+    placeholder: String = "",
+    error: String = "",
+)
+```
+
+## Features
+
+- List of string items
+- Returns selected item and index
+
+## Examples
+
+```kotlin
+val selected = remember { mutableStateOf("") }
+val items = listOf("Option 1", "Option 2", "Option 3")
+
+InputDropDown(
+    text = selected,
+    items = items,
+    floatingValue = "Select",
+    onItemSelected = { item, index ->
+        selected.value = item
+    }
+)
+```