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

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

@@ -0,0 +1,43 @@
+# Switch
+
+## React Native
+
+```tsx
+import { Switch } from '@momo-kits/foundation';
+
+<Switch
+  value={enabled}                     // current toggle state (default: false)
+  onChange={(enabled) => setEnabled(enabled)}  // called with new boolean value
+  disabled={false}                    // disable the switch (default: false)
+  style={{}}                         // optional custom styles
+  accessibilityLabel="toggle_notifications"  // accessibility label
+  params={{ field: 'notifications' }}       // auto tracking params
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Switch
+
+Switch(
+    value = isEnabled,                    // current toggle state (default: false)
+    onChange = { enabled -> },          // called with new boolean value
+    disabled = false,                    // disable the switch (default: false)
+    title = "Notifications",             // optional label text
+    accessibilityId = "toggle_notifications",  // automation ID
+    modifier = Modifier,                  // optional modifier
+)
+```
+
+Same API naming on both platforms (`value`, `onChange`). Compose adds `title` and `accessibilityId`.
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Value prop | `value` | `value` |
+| Change handler | `onChange` | `onChange` |
+| Label | Not built-in (wrap in `Text`) | `title` param |
+| Automation ID | `accessibilityLabel` | `accessibilityId` |
+| Modifier/Style | `style` prop | `modifier` param |

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

@@ -0,0 +1,56 @@
+# TabView
+
+## React Native
+
+```tsx
+import { TabView } from '@momo-kits/tab-view';
+
+<TabView
+  tabs={[
+    { title: 'Tab 1', component: <Tab1 /> },
+    { title: 'Tab 2', icon: '24_info', badgeValue: 3 },
+  ]}
+  scrollable={false}
+  type="default"
+  initialPage={0}
+  onPressTabItem={(index) => {}}
+  direction="row"
+  fitContent={false}
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.TabView
+import vn.momo.kits.components.TabViewItem
+import vn.momo.kits.components.TabViewType
+import vn.momo.kits.components.TabViewDirection
+
+TabView(
+    tabs = listOf(
+        TabViewItem(title = "Tab 1", content = { Text("Content 1") }),
+        TabViewItem(title = "Tab 2", icon = "24_info", badgeValue = "3", content = { Text("Content 2") }),
+    ),
+    initialPage = 0,
+    type = TabViewType.DEFAULT,       // DEFAULT | CARD
+    scrollable = false,
+    fitContent = false,
+    selectedColor = null,
+    unselectedColor = null,
+    direction = TabViewDirection.ROW, // ROW | COLUMN
+    userScrollEnabled = true,
+    onPressTabItem = { index -> },
+    onPageSelected = { index -> },
+)
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Content | `component` prop | `content` slot |
+| Lazy rendering | Built-in | `mutableStateListOf` tracks visited pages |
+| Indicator animation | Native | `animateDpAsState` (200ms) |
+| Direction | `string` | `TabViewDirection` enum |
+| Type | `string` | `TabViewType` enum |

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

@@ -0,0 +1,50 @@
+# Tag
+
+## React Native
+
+```tsx
+import { Tag } from '@momo-kits/foundation';
+
+<Tag
+  label="Active"
+  size="large"                         // 'medium'|'large' (default: 'large')
+  color="green"                         // 'default'|'orange'|'green'|'red'|'blue'|'grey'
+  icon="icon_name"                      // optional left icon
+  customColor={Colors.pink_03}         // overrides color (use _03 tint recommended)
+  accessibilityLabel="tag_active"
+  style={{ marginRight: Spacing.S }}   // optional custom style
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Tag
+import vn.momo.kits.components.TagSize
+import vn.momo.kits.components.TagColor
+
+Tag(
+    label = "Active",
+    size = TagSize.Medium,         // Large(24f), Medium(18f)
+    color = TagColor.Green,        // Default, Orange, Green, Red, Blue, Grey
+    customColor = Colors.pink_03, // overrides color when provided
+)
+```
+
+### TagSize (Compose)
+
+| Value | Height |
+|-------|--------|
+| `Large` | 24f |
+| `Medium` | 18f |
+
+### TagColor (Compose)
+
+| Value | Background | Text |
+|-------|-----------|------|
+| `Default` | black_04 | black_17 |
+| `Orange` | orange_08 | orange_03 |
+| `Green` | green_08 | green_03 |
+| `Red` | red_08 | red_03 |
+| `Blue` | blue_08 | blue_03 |
+| `Grey` | black_04 | black_12 |

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

@@ -0,0 +1,56 @@
+# Text
+
+## React Native
+
+```tsx
+import { Text } from '@momo-kits/foundation';
+
+<Text typography="body_default_regular" color={Colors.black_17} fontFamily="MomoTrustDisplay" maxScaleRate={1.5} style={{}}>Label</Text>
+```
+
+### Props
+
+Extends `TextProps` (React Native `Text`). Plus:
+
+| Prop           | Type                   | Default                  | Description            |
+| -------------- | ---------------------- | ------------------------ | ---------------------- |
+| `typography`   | `Typography`           | `'body_default_regular'` | Typography token       |
+| `color`        | `string`               | theme text color         | Text color             |
+| `fontFamily`   | `string`               | theme font               | Custom font family     |
+| `maxScaleRate` | `number`               | —                        | Max font scale rate    |
+| `style`        | `StyleProp<TextStyle>` | —                        | Additional text styles |
+| `children`     | `ReactNode`            | —                        | Text content           |
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Typography
+
+Text(text = "Label", style = Typography.bodyDefaultRegular)
+Text(text = "Title", style = Typography.headlineDefaultBold)
+```
+
+Signature:
+
+```kotlin
+@Composable
+fun Text(
+    text: String,
+    color: Color? = null,
+    style: TextStyle = Typography.bodyDefaultRegular,
+    modifier: Modifier = Modifier,
+    textAlign: TextAlign? = TextAlign.Start,
+    maxLines: Int = Int.MAX_VALUE,
+    overflow: TextOverflow = TextOverflow.Clip,
+    textDecoration: TextDecoration? = null,
+    onTextLayout: ((TextLayoutResult) -> Unit)? = null,
+    fontFamily: String? = null,
+    minLines: Int = 1,
+    letterSpacing: TextUnit = TextUnit.Unspecified,
+    softWrap: Boolean = true,
+    accessibilityId: String? = null,
+)
+```
+
+> **Note:** NO `token` parameter. Use `style = Typography.xxx` instead.

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

@@ -0,0 +1,51 @@
+# Toast
+
+## React Native
+
+```tsx
+import { ApplicationContext } from '@momo-kits/foundation';
+
+navigator?.maxApi?.showToast({
+    title: 'Saved successfully',
+    type: 'success',           // 'success'|'warning'|'network'|'default'
+    undoTitle: "Back",
+    onUndoPress: () => { },
+});
+```
+
+## Compose
+
+Toast uses the **MaxApi bridge** — no standalone Composable:
+
+```kotlin
+import vn.momo.kits.navigation.LocalMaxApi
+
+@Composable
+fun ToastExample() {
+    val maxApi = LocalMaxApi.current
+
+    Button(
+        title = "Show toast",
+        onClick = {
+            maxApi?.showToast(
+                params = mapOf(
+                    "title" to "Saved successfully",
+                    "type" to "success",
+                    "undoTitle" to "Undo",
+                ),
+                callback = { result -> },
+            )
+        }
+    )
+}
+```
+
+> `LocalMaxApi` is `null` outside a properly set up navigation tree. For inline banner notifications use **SnackBar** (`snackbar.md`).
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| API | `navigator.maxApi` | `LocalMaxApi.current` |
+| Inline composable | Not available | Not available |
+| Navigation dependency | Required | Required |

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

@@ -0,0 +1,95 @@
+# Tooltip
+
+## React Native
+
+```tsx
+import { Tooltip } from '@momo-kits/animated-tooltip';
+import type { TooltipRef, TooltipButton } from '@momo-kits/tooltip';
+
+const tooltipRef = useRef<TooltipRef>(null);
+
+<Tooltip
+  ref={tooltipRef}
+  placement="top"                      // 'top' | 'bottom' | 'left' | 'right' (default: 'top')
+  align="center"                      // 'start' | 'center' | 'end' (default: 'center')
+  title="Title"
+  description="Helpful hint"
+  buttons={[
+    { title: 'Action', onPress: () => {} },
+  ]}
+  onVisibleChange={(visible) => {}}
+  onPressClose={() => {}}
+  accessibilityLabel="info_tooltip"
+  containerStyle={{}}
+>
+  <Button title="Info" type="text" />
+</Tooltip>
+
+// Ref methods
+tooltipRef.current?.show();
+tooltipRef.current?.hide();
+```
+
+Package: `@momo-kits/animated-tooltip`
+
+### Types
+
+```tsx
+type TooltipButton = {
+  title?: string;
+  icon?: string;
+  onPress?: () => void;
+};
+
+type TooltipRef = {
+  show: () => void;
+  hide: () => void;
+};
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Tooltip
+import vn.momo.kits.components.TooltipButton
+import vn.momo.kits.components.rememberTooltipState
+
+val state = rememberTooltipState()
+
+Tooltip(
+    state = state,
+    title = "Title",                    // optional tooltip title
+    description = "Helpful hint",       // tooltip description text
+    buttons = listOf(                  // optional action buttons
+        TooltipButton(title = "Action", onPress = { })
+    ),
+    placement = TooltipPlacement.TOP, // TOP | BOTTOM | LEFT | RIGHT (default: TOP)
+    align = TooltipAlign.CENTER,       // START | CENTER | END (default: CENTER)
+    onVisibleChange = { visible -> }, // visibility change callback
+    onPressClose = {},                // close button pressed callback
+    modifier = Modifier,
+) {
+    Button(
+        title = "Show tooltip",
+        onClick = { state.show() },
+        size = Size.SMALL,
+    )
+}
+
+// State methods
+state.show()
+state.hide()
+state.toggle()
+```
+
+### Types
+
+```kotlin
+enum class TooltipPlacement { TOP, BOTTOM, LEFT, RIGHT }
+enum class TooltipAlign { START, CENTER, END }
+data class TooltipButton(
+    val title: String? = null,
+    val icon: String? = null,
+    val onPress: (() -> Unit)? = null,
+)
+```

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

@@ -0,0 +1,48 @@
+# Uploader
+
+## React Native
+
+```tsx
+import { Uploader } from '@momo-kits/uploader';
+
+<Uploader
+  images={files}
+  numberOfImages={5}
+  disabled={false}
+  width={64}
+  height={64}
+  onAdd={() => launchImagePicker()}
+  onCancel={(image, index) => removeFile(index)}
+  onPressImage={(image, index) => previewImage(image)}
+/>
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Uploader
+import vn.momo.kits.components.UploadImage
+
+Uploader(
+    images = listOf(
+        UploadImage(uri = "https://...", loading = false),
+    ),
+    numberOfImages = 5,
+    disabled = false,
+    width = 64.dp,
+    height = 64.dp,
+    onAdd = { launchPicker() },
+    onCancel = { image, index -> },        // null = hide cancel button
+    onPressImage = { image, index -> },
+)
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Image data | `{ uri, loading }[]` | `List<UploadImage>` |
+| Cancel button | Always shown | `onCancel = null` hides it |
+| Layout | Fixed grid | Horizontal scroll row |
+| Dashed border | Built-in | `Modifier.dashedBorder` |
+| Loading overlay | Built-in | White 40% + `Skeleton` |