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

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

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

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

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

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

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

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

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