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

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

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

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

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

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

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

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

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

@@ -1,21 +0,0 @@
-# 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()
-```