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

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

@@ -0,0 +1,27 @@
+# Badge
+
+## React Native
+
+```tsx
+import { Badge, BadgeDot, BadgeDotAnimation, BadgeRibbon } from '@momo-kits/foundation';
+
+<Badge label="99+" backgroundColor={Colors.red_03} />
+<BadgeDot size="small" />                // 'small' | 'large'
+<BadgeDotAnimation size="small" />       // 'small' | 'large'
+<BadgeRibbon label="NEW" />
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Badge
+import vn.momo.kits.components.BadgeDot
+import vn.momo.kits.components.BadgeRibbon
+import vn.momo.kits.components.DotSize
+
+Badge(label = "99+", backgroundColor = Colors.red_03)
+BadgeDot(size = DotSize.Small)      // Small(10dp), Large(16dp)
+BadgeRibbon(label = "NEW")
+```
+
+> **Note:** `BadgeDotAnimation` is RN-only (animated dot). Compose has no equivalent.

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

@@ -0,0 +1,65 @@
+# Button Reference
+
+## React Native
+
+```tsx
+import { Button } from '@momo-kits/foundation';
+
+<Button
+  title="Click me"               // button label
+  type="primary"                  // 'primary'|'secondary'|'tonal'|'outline'|'danger'|'text'|'disabled'
+  size="large"                    // 'large'|'medium'|'small'
+  full                            // full-width button (default: true)
+  iconLeft={iconSource}           // left icon
+  iconRight={iconSource}          // right icon
+  loading={false}                 // show spinner
+  disabled={false}                // disable interaction
+  onPress={() => {}}             // press handler
+  tintColor={Colors.pink_03}      // custom tint
+  gradientConfig={{               // custom gradient
+    colors: ['#ff0', '#f00'],
+    start: { x: 0, y: 0 },
+    end: { x: 1, y: 0 },
+  }}
+  accessibilityLabel="submit"     // QA automation ID
+  accessibilityState={{ disabled: true }}
+  params={{ action: 'submit' }}  // tracking params
+/>
+```
+
+---
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Button
+import vn.momo.kits.components.ButtonType
+import vn.momo.kits.components.Size
+
+Button(
+    onClick = { /* action */ },
+    type = ButtonType.PRIMARY,     // PRIMARY, SECONDARY, TONAL, OUTLINE, DANGER, TEXT, DISABLED
+    size = Size.LARGE,             // LARGE (48dp), MEDIUM (36dp), SMALL (28dp)
+    title = "Button",
+    iconLeft = "",                 // icon source string
+    iconRight = "",
+    loading = false,               // show spinner
+    useTintColor = false,         // tint icons to match text color (default: false)
+    isFull = true,                // full-width (default: true)
+    modifier = Modifier,
+)
+```
+
+Button sizes map to typography: LARGE → `actionDefaultBold`, MEDIUM → `actionSBold`, SMALL → `actionXsBold`.
+
+---
+
+## Side-by-Side Example
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Type prop | `type="primary"` (string) | `type = ButtonType.PRIMARY` (enum) |
+| Size prop | `size="large"` (string) | `size = Size.LARGE` (enum) |
+| Full width | `full` (boolean shorthand) | `isFull = true` |
+| Press handler | `onPress={fn}` | `onClick = { fn() }` |
+| Icon | `iconLeft={source}` (ImageSource) | `iconLeft = "icon_name"` (String) |

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

@@ -0,0 +1,51 @@
+# Carousel
+
+## React Native
+
+```tsx
+import { Carousel } from '@momo-kits/carousel';
+
+<Carousel
+  data={items}
+  renderItem={({ item, index }) => <Card>...</Card>}
+  autoplay={false}
+  autoplayInterval={3000}
+  loop={false}
+  enableSnap={true}
+  scrollEnabled={true}
+  inactiveSlideOpacity={1}
+  inactiveSlideScale={1}
+  onSnapToItem={(index) => {}}
+  onScrollIndexChanged={(index) => {}}
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Carousel
+
+Carousel(
+    itemCount = items.size,
+    modifier = Modifier,
+    loop = false,                         // infinite loop; default: false
+    autoplay = false,                     // auto-advance slides; default: false
+    autoplayInterval = 3000L,             // ms between slides
+    enableSnap = true,                    // default: true
+    scrollEnabled = true,                 // default: true
+    inactiveSlideOpacity = 1f,            // default: 1f
+    inactiveSlideScale = 1f,             // default: 1f
+    onSnapToItem = { index -> },
+    onScrollIndexChanged = { index -> },
+) { index ->
+    Card(items[index])
+}
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Data source | `data` + `renderItem` | `itemCount` + `content` slot |
+| Loop | `loop` | `loop` (virtual page ×1000) |
+| Pagination | `Pagination` prop | Manual via `onScrollIndexChanged` |

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

@@ -0,0 +1,39 @@
+# CheckBox
+
+## React Native
+
+```tsx
+import { CheckBox } from '@momo-kits/foundation';
+
+<CheckBox
+  value={checked}
+  onChange={setChecked}
+  label="Accept terms"
+  disabled={false}
+  indeterminate={false}           // partial selection state
+  accessibilityState={{ checked: true, disabled: false }}
+  params={{ field: 'terms' }}     // tracking
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.CheckBox
+
+CheckBox(
+    checked = isChecked,
+    onCheckedChange = { isChecked = it },
+    title = "Accept terms",                 // optional label
+    disabled = false,
+    indeterminate = false,                  // partial state (minus icon)
+)
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Value prop | `value` | `checked` |
+| Change handler | `onChange` | `onCheckedChange` |
+| Label prop | `label` | `title` |

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

@@ -0,0 +1,54 @@
+# Chip
+
+## React Native
+
+```tsx
+import { Chip } from '@momo-kits/chip';
+
+<Chip
+  label="Filter"
+  selected={isSelected}
+  onPress={toggle}
+  size="large"                    // 'small'|'large'
+  iconLeft="icon_name"            // left icon name
+  iconRight={null}               // right icon name (optional)
+  iconLeftColor={Colors.pink_03} // left icon tint color
+  iconRightColor={Colors.black_12}
+  backgroundColor={Colors.black_03}
+  accessibilityLabel="filter_chip"
+  accessibilityState={{ selected: isSelected }}
+/>
+```
+
+Note: Chip is a separate package `@momo-kits/chip` in RN.
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Chip
+import vn.momo.kits.components.ChipSize
+
+Chip(
+    label = "Filter",
+    selected = isSelected,
+    onClick = { toggle() },
+    size = ChipSize.LARGE,         // SMALL (24dp height), LARGE (32dp height)
+    iconLeft = "icon_name",        // left icon name (null = hidden)
+    iconRight = null,              // right icon name (null = hidden)
+    iconLeftTint = Colors.pink_03, // left icon tint color
+    iconRightTint = Colors.black_12,
+    backgroundColor = null,        // custom bg when not selected (null = default)
+    accessibilityLabel = "filter_chip",
+)
+```
+
+> **Note:** RN uses `iconLeft`/`iconRight` and `iconLeftColor`/`iconRightColor`. Compose uses `iconLeft`/`iconRight` and `iconLeftTint`/`iconRightTint`.
+
+Chip is built-in (`vn.momo.kits.components`) in Compose.
+
+### ChipSize (Compose)
+
+| Value | Height |
+|-------|--------|
+| `SMALL` | 24dp |
+| `LARGE` | 32dp |

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

@@ -0,0 +1,63 @@
+# Collapse
+
+## React Native
+
+```tsx
+import { Collapse } from '@momo-kits/collapse';
+
+<Collapse
+  title="More details"
+  expandDefault={false}
+  onPress={(isExpanded) => {}}
+  description="Optional subtitle"
+  image="https://..."
+  imageSize={24}
+  subTitle="Right label"
+  tagProps={{ label: 'Tag', type: 'info' }}
+  titleSize="medium"              // 'small'|'medium'|'large'
+  showBorder={false}
+  useBackgroundCollapseButton={false}
+  backgroundColor="#FFFFFF"
+  titleColor="#000000"
+>
+  <Text>Hidden content</Text>
+</Collapse>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Collapse
+import vn.momo.kits.components.CollapseTitleSize
+import vn.momo.kits.components.TagColor
+
+Collapse(
+    title = "More details",
+    modifier = Modifier,
+    description = "Optional subtitle",
+    image = "https://...",
+    imageSize = 24,
+    subTitle = "Right label",
+    tagLabel = "Tag",
+    tagColor = TagColor.Default,
+    showBorder = false,
+    expandDefault = false,
+    titleSize = CollapseTitleSize.Medium,  // Small | Medium | Large
+    useBackgroundCollapseButton = false,
+    backgroundColor = null,
+    titleColor = null,
+    onPress = { isExpanded -> },
+    accessibilityId = "Collapse/section",
+) {
+    Text("Hidden content")
+}
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Expand state | Via `ref` | Internal state (no ref) |
+| Content | Children | `content` slot |
+| Title size | `string` | `CollapseTitleSize` enum |
+| Programmatic control | `ref?.setExpanded()` | Not available |

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

@@ -0,0 +1,36 @@
+# DateTimePicker / Calendar
+
+## React Native
+
+```tsx
+import { DateTimePicker } from '@momo-kits/date-picker';
+
+<DateTimePicker
+  format="DD-MM-YYYY"               // DD-MM-YYYY, HH:mm, DD-MM-YYYY HH:mm
+  minuteInterval={1}               // minute interval (1, 5, 10, 15, 30, etc.)
+  onChange={(date: Date) => {}}    // called when date/time changes
+  selectedValue={new Date()}       // initially selected date/time
+  minDate={new Date()}             // minimum selectable date
+  maxDate={new Date()}             // maximum selectable date
+  arrayLabelTime={[]}              // optional labels for time columns, e.g. ["Ngày", "Tháng", "Năm"]
+  style={{}}                       // optional custom styles
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.datetimepicker.DateTimePicker
+import kotlinx.datetime.LocalDateTime
+
+DateTimePicker(
+    modifier = Modifier,                              // optional modifier
+    format = "DD-MM-YYYY",                             // DD-MM-YYYY, HH:mm, DD-MM-YYYY HH:mm
+    onChange = { date: LocalDateTime -> },             // called when date/time changes
+    selectedValue = null,                              // initially selected date/time (LocalDateTime), defaults to now
+    minDate = null,                                    // minimum selectable date (LocalDateTime), defaults to -10 years
+    maxDate = null,                                    // maximum selectable date (LocalDateTime), defaults to +10 years
+    minuteInterval = 1,                                // minute interval (1, 5, 10, 15, 30, etc.)
+    arrayLabelTime = emptyList(),                      // optional labels for time columns, e.g. listOf("Ngày", "Tháng", "Năm")
+)
+```

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

@@ -0,0 +1,21 @@
+# Divider
+
+## React Native
+
+```tsx
+import { Divider } from '@momo-kits/foundation';
+
+<Divider />                                          // default: solid, with vertical margin
+<Divider useMargin={false} />                        // no vertical margin
+<Divider type="dash" />                            // dashed line (uses DashDivider internally)
+<Divider type="default" />                         // solid line; default
+<Divider style={{ marginVertical: 8 }} />         // custom style
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Divider
+
+Divider()
+```