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

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

@@ -1,41 +0,0 @@
-# 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

@@ -1,47 +0,0 @@
-# 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

@@ -1,69 +0,0 @@
-# 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

@@ -1,35 +0,0 @@
-# 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

@@ -1,55 +0,0 @@
-# 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

@@ -1,42 +0,0 @@
-# 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

@@ -1,36 +0,0 @@
-# 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

@@ -1,25 +0,0 @@
-# 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

@@ -1,53 +0,0 @@
-# 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

@@ -1,52 +0,0 @@
-# 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

@@ -1,46 +0,0 @@
-# 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

@@ -1,57 +0,0 @@
-# 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

@@ -1,44 +0,0 @@
-# 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

@@ -1,44 +0,0 @@
-# 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` |