@momo-kits/native-kits 0.157.5-debug → 0.158.1-beta.1-debug

package/.claude/skills/design-system-kits/references/components/loader.md

@@ -0,0 +1,41 @@
+# Loader
+
+## React Native
+
+```tsx
+import { Loader } from '@momo-kits/foundation';
+
+<Loader type="spinner" />  // 'dot'|'spinner'
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Loader
+import vn.momo.kits.components.LoaderType
+import vn.momo.kits.components.ProgressBar
+
+// Unified entry-point
+Loader(
+    type = LoaderType.DOT,       // DOT | SPINNER; default: DOT
+    tintColor = null,
+    modifier = Modifier,
+)
+
+// Progress bar (determinate)
+ProgressBar(
+    percent = 75f,               // 0–100; clamped
+    color = null,               // default: theme.primary
+    modifier = Modifier,
+)
+```
+
+`Loader` (DOT/SPINNER) = indeterminate loading. `ProgressBar` = animated determinate progress bar.
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Loading types | `type="dot"\|"spinner"` | `LoaderType` enum |
+| Determinate progress | Not available | `ProgressBar` composable |
+| Lottie | Built-in | `LottieAnimation` |

package/.claude/skills/design-system-kits/references/components/pagination.md

@@ -0,0 +1,47 @@
+# Pagination
+
+## React Native
+
+```tsx
+import { Pagination, PaginationScroll } from '@momo-kits/foundation';
+
+<Pagination
+  type="default"                            // 'default'|'black_white'|'number'|'scroll'; default: 'default'
+  activeIndex={currentPage}
+  dataLength={10}
+  style={{}}
+/>
+
+// PaginationScroll — wraps scrollable content with progress indicator
+<PaginationScroll style={{}}>
+  {items.map(item => <Card key={item.id} />)}
+</PaginationScroll>
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'default' \| 'black_white' \| 'number' \| 'scroll'` | `'default'` | Visual style variant |
+| `activeIndex` | `number` | — | Currently active page index (0-based) |
+| `dataLength` | `number` | — | Total number of pages |
+| `style` | `ViewStyle` | — | Custom wrapper style |
+
+> **Direct exports:** `PaginationDot`, `PaginationNumber`, `PaginationWhiteDot` are also exported individually for RN use.
+> **PaginationScroll** wraps scrollable content with a progress indicator bar.
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.PaginationDot
+import vn.momo.kits.components.PaginationNumber
+import vn.momo.kits.components.PaginationScroll
+import vn.momo.kits.components.PaginationWhiteDot
+
+PaginationDot(activeIndex = 1, dataLength = 5)      // 0-based index
+PaginationNumber(activeIndex = 2, dataLength = 10) // shows "3/10"
+PaginationWhiteDot(activeIndex = 0, dataLength = 3) // with dark background pill
+PaginationScroll(modifier = Modifier.fillMaxWidth()) {
+    // scrollable content here
+}
+```

package/.claude/skills/design-system-kits/references/components/popup-notify.md

@@ -0,0 +1,69 @@
+# PopupNotify (Dialog)
+
+## React Native
+
+```tsx
+import { PopupNotify } from '@momo-kits/foundation';
+
+<PopupNotify
+  title="Delete Item?"                 // dialog title (default: 'Title')
+  description="This action cannot be undone."  // description text or ReactNode
+  image={imageSource}                 // optional image/illustration URL
+  error=""                           // optional error code text
+  primary={{
+    title: 'Delete',
+    onPress: handleDelete,
+  }}
+  secondary={{
+    title: 'Cancel',
+    onPress: handleCancel,
+  }}
+  buttonDirection="row"               // 'row'|'column'|'auto' (default: 'row')
+  onIconClose={handleClose}          // X button pressed callback
+  onRequestClose={handleClose}       // back button or tap-outside callback
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.PopupNotify
+import vn.momo.kits.components.PopupNotifyProps
+import vn.momo.kits.components.PopupAction
+import vn.momo.kits.components.PopupActionDirection
+
+// Show via navigator.showModal:
+val navigator = LocalNavigator.current
+
+navigator.showModal(content = {
+    PopupNotify(
+        props = PopupNotifyProps(
+            title = "Confirm Action",              // dialog title (default: "Title")
+            description = "Are you sure you want to proceed?",  // description text
+            image = "",                           // optional image URL
+            error = "",                          // optional error code text
+            primary = PopupAction(
+                title = "Confirm",
+                onPress = { handleConfirm() },
+            ),
+            secondary = PopupAction(
+                title = "Cancel",
+                onPress = { navigator.pop() },
+            ),
+            buttonDirection = PopupActionDirection.ROW, // ROW, COLUMN, AUTO (default: ROW)
+            onIconClose = { navigator.pop() },         // X button pressed callback (required)
+            isShowCloseIcon = true,                    // show/hide X button (default: true)
+        )
+    )
+})
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Rendering | `<PopupNotify>` as JSX | `navigator.showModal { PopupNotify(...) }` |
+| Props | Direct props | Wrapped in `PopupNotifyProps` |
+| Actions | JS objects `{ title, onPress }` | `PopupAction(title, onPress?)` |
+| Dismiss | `onRequestClose` / `onIconClose` | `navigator.pop()` via `onIconClose` |
+| Close icon visibility | Always shown when `onIconClose` is set | Via `isShowCloseIcon` param |

package/.claude/skills/design-system-kits/references/components/popup-promotion.md

@@ -0,0 +1,35 @@
+# PopupPromotion
+
+## React Native
+
+```tsx
+import { PopupPromotion } from '@momo-kits/foundation';
+
+<PopupPromotion
+  image="https://example.com/promotion.jpg"
+  onIconClose={handleClose}
+  onRequestClose={handleClose}
+  onActionClick={handleAction}
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.PopupPromotion
+
+PopupPromotion(
+    source = "https://example.com/promotion.jpg",
+    onClose = { handleClose() },
+    onPress = { handleAction() },
+)
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Image source | `image` | `source` |
+| Close handler | `onIconClose` | `onClose` |
+| Action click | `onActionClick` | `onPress` |
+| Back button / touch-outside dismiss | `onRequestClose` | Not available |

package/.claude/skills/design-system-kits/references/components/progress-info.md

@@ -0,0 +1,55 @@
+# ProgressInfo
+
+## React Native
+
+```tsx
+import { ProgressInfo } from '@momo-kits/progress-info';
+
+<ProgressInfo
+  steps={[
+    { title: 'Step 1', description: 'Desc 1' },
+    { title: 'Step 2', description: 'Desc 2' },
+  ]}
+  horizontal={false}
+  size="large"              // 'small' | 'large'
+  useNumber={false}
+  showTitle={true}
+  showDescription={true}
+  align="center"
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.ProgressInfo
+import vn.momo.kits.components.ProgressInfoItem
+import vn.momo.kits.components.ProgressInfoSize
+import vn.momo.kits.components.ProgressInfoAlign
+
+ProgressInfo(
+    steps = listOf(
+        ProgressInfoItem(title = "Step 1", description = "Desc 1"),
+        ProgressInfoItem(title = "Step 2", description = "Desc 2"),
+    ),
+    horizontal = false,
+    size = ProgressInfoSize.Large,     // Small | Large
+    useNumber = false,
+    showTitle = true,
+    showDescription = true,
+    align = ProgressInfoAlign.Center,  // Left | Right | Center | Stretch
+    customIcon = null,
+    modifier = Modifier,
+)
+```
+
+> **Note:** Display-only indicator (no active state, no onPress). Use `Steps` for interactive variant.
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Step data | `steps` array | `List<ProgressInfoItem>` |
+| Size | `string` | `ProgressInfoSize` enum |
+| Align | `string` | `ProgressInfoAlign` enum |
+| Active / onPress | Not available | Display-only |

package/.claude/skills/design-system-kits/references/components/radio.md

@@ -0,0 +1,42 @@
+# Radio
+
+## React Native
+
+```tsx
+import { Radio } from '@momo-kits/foundation';
+
+<Radio
+  value="option1"
+  groupValue={selectedValue}
+  onChange={() => setSelectedValue("option1")}   // caller sets the value
+  label="Option 1"
+  disabled={false}
+  style={{}}
+  params={{ field: 'option' }}
+  accessibilityState={{ disabled: false }}
+  accessibilityLabel="option_1"
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Radio
+
+var selectedValue by remember { mutableStateOf("option1") }
+
+Radio(
+    value = "option1",
+    groupValue = selectedValue,
+    onChange = { selectedValue = "option1" },    // caller sets the value
+    label = "Option A",
+    disabled = false,
+    modifier = Modifier,
+)
+```
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Selection model | `value` + `groupValue` | `value` + `groupValue` |
+| Change handler | `onChange()` caller sets value | `onChange()` caller sets value |
+| Label prop | `label` | `label` |

package/.claude/skills/design-system-kits/references/components/rating.md

@@ -0,0 +1,36 @@
+# Rating
+
+## React Native
+
+```tsx
+import { Rating } from '@momo-kits/rating';
+
+<Rating
+  numOfStars={5}
+  rating={4.5}
+  onRatingChange={(rating) => setRating(rating)}
+  size="large"              // 'small'|'medium'|'large'
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Rating
+import vn.momo.kits.components.RatingSize
+
+Rating(
+    numOfStars = 5,
+    rating = 4.5f,               // supports half stars
+    onRatingChange = { newRating -> },  // omit for read-only
+    size = RatingSize.LARGE,    // SMALL | MEDIUM | LARGE
+)
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Half stars | Yes | Yes |
+| Size | `string` | `RatingSize` enum |
+| Interactive | `onRatingChange` required | Optional |

package/.claude/skills/design-system-kits/references/components/skeleton.md

@@ -0,0 +1,25 @@
+# Skeleton
+
+## React Native
+
+```tsx
+import { Skeleton } from '@momo-kits/foundation';
+
+<Skeleton style={{ width: 200, height: 20, borderRadius: 4 }} />
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Skeleton
+
+Skeleton()   // no params — fills maxWidth/maxHeight via BoxWithConstraints
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Size | Via `style` prop | Fills parent via `BoxWithConstraints` |
+| Dimensions | `width`, `height`, `borderRadius` in `style` | No params |
+

package/.claude/skills/design-system-kits/references/components/slider.md

@@ -0,0 +1,53 @@
+# Slider
+
+## React Native
+
+```tsx
+import { Slider } from '@momo-kits/slider';
+
+<Slider
+  min={0}
+  max={100}
+  step={1}
+  low={25}
+  high={75}
+  minRange={0}
+  disableRange={false}
+  floatingLabel={false}
+  disabledHigh={false}
+  disabledLow={false}
+  onValueChanged={(low, high, byUser) => {}}
+  onSliderTouchStart={(low, high) => {}}
+  onSliderTouchEnd={(low, high) => {}}
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Slider
+
+Slider(
+    min = 0f,
+    max = 100f,
+    step = 1f,
+    low = 25f,
+    high = 75f,
+    minRange = 0f,
+    disableRange = false,          // single-thumb mode
+    floatingLabel = false,        // show value label above thumb
+    disabled = false,            // all interaction disabled
+    onValueChanged = { low, high, byUser -> },
+    onSliderTouchStart = { low, high -> },
+    onSliderTouchEnd = { low, high -> },
+)
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Per-thumb disable | `disabledHigh` / `disabledLow` | `disabled` (global) |
+| Gesture library | Built-in | `pointerInput` + `BoxWithConstraints` |
+| Animation | Native driver | `animateFloatAsState` + spring |
+| Thumb size | Fixed | Fixed (20dp thumb, 4dp track) |

package/.claude/skills/design-system-kits/references/components/snackbar.md

@@ -0,0 +1,52 @@
+# SnackBar
+
+## Compose
+
+```kotlin
+import vn.momo.kits.navigation.component.SnackBar
+import vn.momo.kits.navigation.LocalNavigator
+
+val navigator = LocalNavigator.current
+
+navigator.showSnackBar(
+    SnackBar.Custom(
+        duration = 3000L,
+        content = {
+            Row(Modifier.fillMaxWidth().padding(Spacing.M)) {
+                Text("Operation completed!")
+            }
+        }
+    ),
+    onDismiss = { }                  // called when snackbar is dismissed
+)
+
+navigator.hideSnackBar()             // programmatically dismiss
+```
+
+### SnackBar variants
+
+```kotlin
+// Custom content snackbar
+SnackBar.Custom(
+    content = { Text("Done!") },
+    duration = 3000L,
+)
+
+// Toast-only snackbar (no custom content — uses built-in styling)
+SnackBar.Toast(duration = 3000L)
+```
+
+### Screen-level via ScreenHelper
+
+```kotlin
+import vn.momo.kits.navigation.LocalScreenHelper
+
+val screenHelper = LocalScreenHelper.current
+screenHelper.showSnackBar(snackBar, onDismiss)
+screenHelper.hideSnackBar()
+```
+
+## React Native
+
+SnackBar is not available in React Native. Use **Toast** instead.
+

package/.claude/skills/design-system-kits/references/components/stepper.md

@@ -0,0 +1,46 @@
+# Stepper
+
+## React Native
+
+```tsx
+import { Stepper } from '@momo-kits/stepper';
+
+<Stepper
+  value={quantity}
+  defaultValue={1}
+  min={1}
+  max={99}
+  step={1}
+  size="large"
+  disabled={false}
+  editable={false}
+  onValueChange={setQuantity}
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Stepper
+import vn.momo.kits.components.StepperSize
+
+Stepper(
+    defaultValue = 0,            // clamped to min..max
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,            // Boolean | BooleanArray
+    size = StepperSize.LARGE,    // LARGE | SMALL
+    editable = false,            // allow direct keyboard input
+    onValueChange = { newValue -> },
+)
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Per-button disable | Not available | `BooleanArray([minus, plus])` |
+| Auto-disable at bounds | Yes | Yes |
+| Editable number input | `editable` prop | `editable` param |
+| Size | `string` | `StepperSize` enum |

package/.claude/skills/design-system-kits/references/components/steps.md

@@ -0,0 +1,57 @@
+# Steps
+
+## React Native
+
+```tsx
+import { Steps } from '@momo-kits/step';
+
+<Steps
+  steps={[
+    { title: 'Info' },
+    { title: 'Payment', description: 'Add payment method' },
+    { title: 'Done', error: false, time: '10:30' },
+  ]}
+  activeIndex={1}
+  horizontal={false}
+  size="large"
+  useNumber={false}
+  align="center"
+  customIcon="notifications_check"
+  onPress={(item, index) => {}}
+  disabled={false}
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Steps
+import vn.momo.kits.components.StepItem
+import vn.momo.kits.components.StepsSize
+import vn.momo.kits.components.StepsAlign
+
+Steps(
+    steps = listOf(
+        StepItem(title = "Info"),
+        StepItem(title = "Payment", description = "Add payment method"),
+        StepItem(title = "Done", error = false, time = "10:30"),
+    ),
+    activeIndex = 1,
+    horizontal = false,
+    size = StepsSize.LARGE,          // SMALL | LARGE
+    useNumber = false,
+    align = StepsAlign.CENTER,       // LEFT | RIGHT | CENTER | STRETCH
+    customIcon = null,
+    disabled = false,
+    onPress = { stepItem, index -> },
+)
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Step data | `{ title, description?, error?, time? }` | `StepItem` data class |
+| Size | `string` | `StepsSize` enum |
+| Align | `string` | `StepsAlign` enum |
+| onPress | All steps | Completed steps only |

package/.claude/skills/design-system-kits/references/components/suggest-action.md

@@ -0,0 +1,44 @@
+# SuggestAction
+
+## React Native
+
+```tsx
+import { SuggestAction } from '@momo-kits/suggest-action';
+
+<SuggestAction
+  message="Don't forget to complete your profile!"
+  buttonTitle="Complete"
+  boldMessage="complete your profile"
+  image="https://..."
+  onPressButton={() => {}}
+  onClose={() => {}}
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.SuggestAction
+
+SuggestAction(
+    message = "Don't forget to complete your profile!",
+    buttonTitle = "Complete",
+    boldMessage = "complete your profile",   // case-insensitive bold substring
+    image = "https://...",
+    visible = true,
+    onClose = { },
+    onPressButton = { },
+    modifier = Modifier,
+)
+```
+
+> Wrap in a state: `visible` controls show/hide with `AnimatedVisibility`.
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Visibility | `ref?.show()` | `visible` state param |
+| Animation | Built-in | `AnimatedVisibility` |
+| Close button | Always shown | Always shown |
+| Image size | Fixed | 32dp |

package/.claude/skills/design-system-kits/references/components/swipe.md

@@ -0,0 +1,44 @@
+# Swipe
+
+## React Native
+
+```tsx
+import { Swipe } from '@momo-kits/swipe';
+
+<Swipe
+  rightActions={[
+    { label: 'Delete', icon: '24_navigation_close', backgroundColor: Colors.red_03, onPress: onDelete },
+  ]}
+>
+  <ListItem />
+</Swipe>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Swipe
+import vn.momo.kits.components.SwipeAction
+
+Swipe(
+    height = 56.dp,
+    itemRadius = 0.dp,
+    leftActions = listOf(SwipeAction(label = "Delete", icon = "24_navigation_close", onPress = { })),
+    rightActions = listOf(SwipeAction(label = "Archive", icon = "24_navigation_close", onPress = { })),
+    onSwipeableOpen = { },
+    onSwipeableClose = { },
+    onSwipeableLeftOpen = { },
+    onSwipeableRightOpen = { },
+) {
+    ListItem()
+}
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Row height | `style.height` | `height` param (default 56dp) |
+| Action limit | — | Max 3 per side |
+| Animation | Native driver | `Animatable` + `tween(200)` |
+| Gesture | Built-in swipeable | `detectHorizontalDragGestures` |