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

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

@@ -0,0 +1,287 @@
+---
+name: navigator
+description: Class for managing navigation between screens. Use when navigating between screens, showing modals, bottom sheets, or snackbars.
+---
+
+# Navigator
+
+Class for managing navigation between screens, modals, bottom sheets, and snackbars.
+
+## API
+
+```kotlin
+class Navigator(
+    private val navController: NavController,
+    private val maxApi: IMaxApi?
+)
+```
+
+## Methods
+
+### Screen Navigation
+
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| `push` | `content: @Composable () -> Unit, options: NavigationOptions? = null` | Push new screen to stack |
+| `replace` | `content: @Composable () -> Unit, options: NavigationOptions? = null` | Replace current screen |
+| `pop` | `count: Int = 1, callBack: (() -> Unit)? = null` | Pop N screens from stack |
+| `present` | `content: @Composable () -> Unit, options: NavigationOptions? = null` | Present as dialog |
+| `reset` | `content: @Composable () -> Unit, options: NavigationOptions? = null` | Reset to new screen (clear stack) |
+| `onBackSafe` | `callBack: (() -> Unit)? = null` | Handle back with optional callback |
+
+### Overlay Components
+
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| `showModal` | `content, barrierDismissible = true, onDismiss = null` | Show modal overlay |
+| `showBottomSheet` | `content, isSurface, barrierDismissible, onDismiss, bottomSheetHeader` | Show bottom sheet |
+| `showSnackBar` | `snackBar: SnackBar, onDismiss = null` | Show snackbar notification |
+| `hideSnackBar` | - | Hide current snackbar |
+
+## NavigationOptions
+
+```kotlin
+data class NavigationOptions(
+    val headerBackProps: HeaderBackProps? = null,
+    val onBackHandler: (() -> Unit)? = null,
+    // ... other options
+)
+```
+
+## Usage
+
+### Get Navigator Instance
+
+```kotlin
+// From NavigationContainer
+NavigationContainer(
+    initialScreen = { MyScreen() },
+    setNavigator = { navigator = it }
+)
+
+// Or use composition local
+val navigator = Navigator.current
+```
+
+### Push Screen
+
+```kotlin
+// Simple push
+navigator.push { MyScreen() }
+
+// With options
+navigator.push(
+    content = { DetailScreen(productId) },
+    options = NavigationOptions(
+        headerBackProps = HeaderBackProps(
+            title = "Product Details",
+            preventBack = PreventBackConfirm(
+                primary = PopupAction(title = "Leave", onPress = { })
+            )
+        )
+    )
+)
+```
+
+### Replace Screen
+
+```kotlin
+// Replace current screen (pops then pushes)
+navigator.replace { NewScreen() }
+```
+
+### Pop Screen
+
+```kotlin
+// Pop 1 screen
+navigator.pop()
+
+// Pop 2 screens
+navigator.pop(2)
+
+// Pop with callback
+navigator.pop(1) {
+    // Called after pop completes
+}
+```
+
+### Present Dialog
+
+```kotlin
+navigator.present {
+    DialogContent()
+}
+```
+
+### Reset Stack
+
+```kotlin
+// Clear all screens and navigate to new screen
+navigator.reset { HomeScreen() }
+```
+
+### Safe Back Handler
+
+```kotlin
+// Handle back with confirmation if needed
+navigator.onBackSafe {
+    // Callback after back completes
+}
+```
+
+## BottomSheet
+
+```kotlin
+// Simple bottom sheet
+navigator.showBottomSheet(
+    content = { MyContent() }
+)
+
+// With header
+navigator.showBottomSheet(
+    content = { MyContent() },
+    bottomSheetHeader = BottomHeader.Title("Select Option")
+)
+
+// Surface style (different background)
+navigator.showBottomSheet(
+    content = { MyContent() },
+    isSurface = true
+)
+
+// Not dismissible
+navigator.showBottomSheet(
+    content = { MyContent() },
+    barrierDismissible = false,
+    onDismiss = { /* handle dismiss */ }
+)
+```
+
+## BottomHeader
+
+```kotlin
+// Title header
+BottomHeader.Title("Title")
+
+// Custom header
+BottomHeader.Custom {
+    MyHeaderContent()
+}
+```
+
+## Modal
+
+```kotlin
+// Simple modal
+navigator.showModal(
+    content = { MyModalContent() }
+)
+
+// Not dismissible
+navigator.showModal(
+    content = { MyModalContent() },
+    barrierDismissible = false,
+    onDismiss = { /* handle dismiss */ }
+)
+```
+
+## SnackBar
+
+```kotlin
+// Success snackbar
+navigator.showSnackBar(
+    snackBar = SnackBar(
+        message = "Saved successfully",
+        type = SnackBar.Type.SUCCESS
+    )
+)
+
+// Error snackbar
+navigator.showSnackBar(
+    snackBar = SnackBar(
+        message = "Something went wrong",
+        type = SnackBar.Type.ERROR
+    )
+)
+
+// Info snackbar
+navigator.showSnackBar(
+    snackBar = SnackBar(
+        message = "Processing...",
+        type = SnackBar.Type.INFO
+    )
+)
+
+// With action button
+navigator.showSnackBar(
+    snackBar = SnackBar(
+        message = "Item deleted",
+        action = SnackBar.Action(
+            title = "UNDO",
+            onPress = { /* undo */ }
+        )
+    )
+)
+
+// Hide snackbar
+navigator.hideSnackBar()
+```
+
+## SnackBar Type
+
+| Type | Description |
+|------|-------------|
+| `SUCCESS` | Green color, success messages |
+| `ERROR` | Red color, error messages |
+| `INFO` | Default color, informational |
+| `WARNING` | Warning messages |
+
+## Common Patterns
+
+### Navigate with Result
+
+```kotlin
+// Push screen and handle result
+navigator.push {
+    SelectScreen(
+        onResult = { selected ->
+            // Handle result
+            navigator.pop()
+        }
+    )
+}
+```
+
+### Confirm Before Back
+
+```kotlin
+navigator.push(
+    content = { EditScreen() },
+    options = NavigationOptions(
+        onBackHandler = {
+            showUnsavedChangesDialog()
+        },
+        headerBackProps = HeaderBackProps(
+            preventBack = PreventBackConfirm(
+                primary = PopupAction(
+                    title = "Discard",
+                    onPress = { navigator.pop() }
+                )
+            )
+        )
+    )
+)
+```
+
+### Nested Navigation
+
+```kotlin
+// Present login as modal
+navigator.present {
+    LoginScreen(
+        onSuccess = {
+            navigator.pop()
+        }
+    )
+}
+```

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

@@ -0,0 +1,28 @@
+---
+name: pagination-dot
+description: Pagination component showing dots. Use when implementing carousel-style pagination.
+---
+
+# PaginationDot
+
+Pagination component showing dots.
+
+## Keywords
+
+pagination dots, dot pagination
+
+## API
+
+```kotlin
+@Composable
+fun PaginationDot(
+    activeIndex: Int = 0,
+    dataLength: Int = 3
+)
+```
+
+## Examples
+
+```kotlin
+PaginationDot(activeIndex = currentPage, dataLength = totalPages)
+```

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

@@ -0,0 +1,28 @@
+---
+name: pagination-number
+description: Pagination component showing page numbers. Use when displaying current page position (e.g., "1/5").
+---
+
+# PaginationNumber
+
+Pagination component showing page numbers.
+
+## Keywords
+
+pagination, page, trang
+
+## API
+
+```kotlin
+@Composable
+fun PaginationNumber(
+    activeIndex: Int = 0,
+    dataLength: Int = 2
+)
+```
+
+## Examples
+
+```kotlin
+PaginationNumber(activeIndex = 0, dataLength = 5) // Shows "1/5"
+```

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

@@ -0,0 +1,47 @@
+---
+name: popup-notify
+description: Confirm popup component. Use when showing confirmation dialogs, warnings, or alert popups.
+---
+
+# PopupNotify
+
+Confirm popup component.
+
+## Keywords
+
+popup, confirm, xác nhận, thông báo
+
+## API
+
+```kotlin
+@Composable
+fun PopupNotify(
+    title: String = "",
+    content: String = "",
+    primary: PopupAction? = null,
+    secondary: PopupAction? = null,
+    type: PopupNotifyType = PopupNotifyType.DEFAULT
+)
+
+data class PopupAction(
+    val title: String,
+    val onPress: (() -> Unit)? = null,
+    val type: PopupActionType = PopupActionType.PRIMARY
+)
+
+enum class PopupNotifyType { DEFAULT, WARNING, ERROR }
+enum class PopupActionType { PRIMARY, SECONDARY }
+```
+
+## Examples
+
+```kotlin
+navigator.showModal {
+    PopupNotify(
+        title = "Confirm",
+        content = "Are you sure?",
+        primary = PopupAction(title = "Confirm", onClick = { }),
+        secondary = PopupAction(title = "Cancel", type = PopupActionType.SECONDARY)
+    )
+}
+```

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

@@ -0,0 +1,44 @@
+---
+name: radio
+description: Radio button for single selection from multiple options. Use when user needs to select exactly one option from a list.
+---
+
+# Radio
+
+Radio button for single selection from multiple options.
+
+## Keywords
+
+radio, radio button, chọn một
+
+## API
+
+```kotlin
+@Composable
+fun Radio(
+    value: Any,
+    groupValue: Any,
+    onChange: () -> Unit = {},
+    label: String = "",
+    disabled: Boolean = false,
+)
+```
+
+## Examples
+
+```kotlin
+var selected by remember { mutableStateOf("option1") }
+
+Radio(
+    value = "option1",
+    groupValue = selected,
+    onChange = { selected = "option1" },
+    label = "Option 1"
+)
+Radio(
+    value = "option2",
+    groupValue = selected,
+    onChange = { selected = "option2" },
+    label = "Option 2"
+)
+```

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

@@ -0,0 +1,32 @@
+---
+name: skeleton
+description: Loading placeholder with shimmer animation. Use when showing loading state for content.
+---
+
+# Skeleton
+
+Loading placeholder with shimmer animation.
+
+## Keywords
+
+skeleton, loading, placeholder, shimmer
+
+## API
+
+```kotlin
+@Composable
+fun Skeleton()
+```
+
+## Features
+
+- Shimmer animation effect
+- Used as loading placeholder
+
+## Examples
+
+```kotlin
+Box(modifier = Modifier.fillMaxWidth().height(100.dp)) {
+    Skeleton()
+}
+```

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

@@ -0,0 +1,36 @@
+---
+name: switch
+description: Toggle switch for on/off states. Use when user needs to toggle a boolean setting or feature.
+---
+
+# Switch
+
+Toggle switch for on/off states.
+
+## Keywords
+
+switch, toggle, bật tắt, on/off
+
+## API
+
+```kotlin
+@Composable
+fun Switch(
+    value: Boolean = false,
+    onChange: (Boolean) -> Unit = {},
+    title: String? = "",
+    disabled: Boolean = false,
+)
+```
+
+## Examples
+
+```kotlin
+var isEnabled by remember { mutableStateOf(false) }
+
+Switch(
+    value = isEnabled,
+    onChange = { isEnabled = it },
+    title = "Enable notifications"
+)
+```

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

@@ -0,0 +1,40 @@
+---
+name: tag
+description: Colored label component. Use when displaying status labels, categories, or colored tags.
+---
+
+# Tag
+
+Colored label component.
+
+## Keywords
+
+tag, label, nhãn, colored label
+
+## API
+
+```kotlin
+@Composable
+fun Tag(
+    label: String = "Label",
+    icon: String? = null,
+    color: TagColor = TagColor.Default,
+    size: TagSize = TagSize.Large,
+)
+
+enum class TagColor { Default, Orange, Green, Red, Blue, Grey }
+enum class TagSize { Large, Medium }
+```
+
+## Examples
+
+```kotlin
+// Default tag
+Tag(label = "Tag")
+
+// Colored tag
+Tag(label = "Hot", color = TagColor.Red)
+
+// Tag with icon
+Tag(label = "New", icon = "star", color = TagColor.Blue)
+```

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

@@ -0,0 +1,37 @@
+---
+name: text
+description: Text component for displaying text content. Use when adding text to UI.
+---
+
+# Text
+
+Text component for displaying text content.
+
+## Keywords
+
+text, văn bản, text content
+
+## API
+
+```kotlin
+@Composable
+fun Text(
+    text: String,
+    color: Color? = null,
+    style: TextStyle = Typography.bodyDefaultRegular,
+    maxLines: Int = Int.MAX_VALUE,
+    overflow: TextOverflow = TextOverflow.Clip,
+    modifier: Modifier = Modifier,
+)
+```
+
+## Examples
+
+```kotlin
+Text(text = "Hello World")
+
+Text(
+    text = "Title",
+    style = Typography.titleDefaultBold
+)
+```

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

@@ -0,0 +1,43 @@
+---
+name: title
+description: Title component for section/card headers. Use when displaying section titles or card headers.
+---
+
+# Title
+
+Title component for section/card headers.
+
+## Keywords
+
+title, heading, tiêu đề
+
+## API
+
+```kotlin
+@Composable
+fun Title(
+    title: String,
+    type: TitleType = TitleType.Section,
+    size: TitleSize = TitleSize.Medium,
+    icon: String? = null,
+    badgeLabel: String? = null,
+    description: String? = null,
+    showRightAction: Boolean = false,
+    onPressRightAction: () -> Unit = {},
+)
+
+enum class TitleType { Section, Card }
+enum class TitleSize { Small, Medium, Large }
+```
+
+## Examples
+
+```kotlin
+Title(title = "Section Title")
+
+Title(
+    title = "Title",
+    description = "Description",
+    badgeLabel = "3"
+)
+```

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

@@ -0,0 +1,30 @@
+---
+name: tooltip
+description: Tooltip component for showing info on hover/click. Use when providing additional information on user interaction.
+---
+
+# Tooltip
+
+Tooltip component for showing info on hover/click.
+
+## Keywords
+
+tooltip, hover, info, thông tin
+
+## API
+
+```kotlin
+@Composable
+fun Tooltip(
+    content: String,
+    modifier: Modifier = Modifier,
+)
+```
+
+## Examples
+
+```kotlin
+Tooltip(content = "Information here") {
+    Icon(source = "info", size = 24.dp)
+}
+```

package/.claude/settings.local.json

@@ -0,0 +1,13 @@
+{
+  "permissions": {
+    "allow": [
+      "WebFetch(domain:resources.anthropic.com)",
+      "Bash(brew list:*)",
+      "Bash(python3 -c \"import pypdf; print\\(''pypdf available''\\)\")",
+      "Bash(python3 -c \"import PyPDF2; print\\(''PyPDF2 available''\\)\")",
+      "Bash(pip3 install:*)",
+      "Bash(python3 -c \"import pypdf; print\\(''pypdf installed''\\)\")",
+      "Bash(python3:*)"
+    ]
+  }
+}