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

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

@@ -0,0 +1,128 @@
+# InputMoney Reference
+
+Currency-formatted numeric input with automatic number formatting and currency symbol.
+
+## React Native
+
+```tsx
+import { InputMoney } from '@momo-kits/foundation';
+
+const moneyRef = useRef<InputRef>(null);
+
+<InputMoney
+  ref={moneyRef}
+  value={amount}                  // current value (numeric string without separators)
+  onChangeText={setAmount}        // called with raw numeric value on change
+  floatingValue="Amount"          // floating label text
+  floatingIcon=""                 // optional icon name next to floating label
+  floatingIconColor={}           // floating icon color
+  size="small"                    // 'small' | 'large' (default: 'small')
+  placeholder="0đ"                // placeholder text (default: '0đ')
+  currency="đ"                    // currency symbol appended after number (default: 'đ')
+  errorMessage=""                 // error message text
+  errorSpacing={false}            // reserve space for error even when no error
+  hintText=""                     // hint text below input
+  trailing=""                     // trailing icon name
+  trailingColor={}                // trailing icon color
+  onPressTrailing={() => {}}     // trailing icon pressed callback
+  required={false}               // show required indicator on floating label
+  disabled={false}                // disable input
+  loading={false}                 // show loading indicator on trailing icon
+  showClearIcon={true}            // show clear icon when focused and has value
+  onFocus={() => {}}             // focus callback
+  onBlur={() => {}}              // blur callback
+  onPressFloatingIcon={() => {}}  // floating icon pressed callback
+  style={{}}                      // optional custom styles
+  params={{}}                     // auto tracking params
+  maxLength={15}                  // max digit length
+/>
+
+// Ref methods
+moneyRef.current?.clear();               // clear input
+moneyRef.current?.focus();               // focus input
+moneyRef.current?.blur();                // blur input
+moneyRef.current?.setText('100000');     // set input value programmatically
+```
+
+Input automatically formats numbers with thousand separators (e.g., `1,000,000đ`). Only accepts numeric input.
+
+### Props
+
+Extends `InputProps` with money-specific additions.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | — | Current value (raw numeric string without separators) |
+| `onChangeText` | `(value: string) => void` | — | Callback with raw numeric value on change |
+| `currency` | `string` | `'đ'` | Currency symbol |
+| `size` | `'small' \| 'large'` | `'small'` | Input size variant |
+| `floatingValue` | `string` | — | Floating label text |
+| `floatingIcon` | `string` | — | Icon name next to floating label |
+| `floatingIconColor` | `string` | — | Floating icon color |
+| `placeholder` | `string` | `'0đ'` | Placeholder text |
+| `maxLength` | `number` | — | Max digit length |
+| `trailing` | `string` | — | Trailing icon name |
+| `trailingColor` | `string` | — | Trailing icon color |
+| `onPressTrailing` | `() => void` | — | Trailing icon press handler |
+| `errorMessage` | `string` | — | Error message |
+| `errorSpacing` | `boolean` | `false` | Reserve space for error |
+| `hintText` | `string` | — | Hint text |
+| `required` | `boolean` | `false` | Show required indicator |
+| `disabled` | `boolean` | `false` | Disable input |
+| `loading` | `boolean` | `false` | Show loading indicator |
+| `showClearIcon` | `boolean` | `true` | Show clear icon |
+| `onFocus` | `() => void` | — | Focus callback |
+| `onBlur` | `() => void` | — | Blur callback |
+| `onPressFloatingIcon` | `() => void` | — | Floating icon press handler |
+| `style` | `StyleProp<ViewStyle>` | — | Custom styles |
+| `params` | `any` | — | Auto tracking params |
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.InputMoney
+import vn.momo.kits.components.InputSize
+import vn.momo.kits.components.InputFontWeight
+import androidx.compose.runtime.MutableState
+
+val amount = remember { mutableStateOf("0") }
+
+InputMoney(
+    text = amount,                         // MutableState<String> holding raw numeric value
+    floatingValue = "Amount",             // floating label text (default: "")
+    floatingValueColor = Color.Unspecified, // floating label color (default: theme hint)
+    floatingIcon = "",                    // optional icon name next to floating label
+    floatingIconColor = Color.Unspecified,  // floating icon color (default: theme default)
+    placeholder = "0đ",                  // placeholder text (default: "0đ")
+    size = InputSize.SMALL,               // SMALL | LARGE (default: SMALL)
+    onChangeText = { value -> },          // called with raw numeric value on change
+    error = "",                           // error message text
+    errorSpacing = false,                 // reserve space for error even when no error
+    disabled = false,                     // disable input
+    icon = "",                            // trailing icon name
+    iconColor = Color.Unspecified,        // trailing icon color
+    onPressIcon = {},                     // trailing icon pressed callback
+    leadingIcon = "",                     // leading icon name (left side)
+    leadingIconColor = Color.Unspecified, // leading icon color
+    onFocus = {},                         // focus callback
+    onBlur = {},                          // blur callback
+    loading = false,                      // show loading indicator on trailing icon
+    required = false,                    // show required indicator on floating label
+    fontWeight = InputFontWeight.BOLD,    // REGULAR | BOLD (default: BOLD)
+    keyboardType = KeyboardType.Number,   // Compose KeyboardType
+)
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Value binding | `value` + `onChangeText` | `MutableState<String>` via `text` param |
+| Error prop | `errorMessage` | `error` |
+| Size type | String (`'small' \| 'large'`) | Enum (`InputSize.SMALL \| LARGE`) |
+| Font weight | `fontWeight` (string) | `InputFontWeight` enum |
+| Imperative ref | `clear`, `focus`, `blur`, `setText` | Not available |
+| Leading icon | Via `leadingIcon` prop | Via `leadingIcon` param |
+| Max length | `maxLength` prop | Not available |
+| Currency customization | `currency` prop | Not available (hardcoded `đ` via visual transformation) |
+

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

@@ -0,0 +1,85 @@
+# InputOTP Reference
+
+One-Time Password input with individual character boxes and animated caret.
+
+## React Native
+
+```tsx
+import { InputOTP } from '@momo-kits/foundation';
+
+const otpRef = useRef<InputRef>(null);
+
+<InputOTP
+  ref={otpRef}
+  length={6}
+  floatingValue="Enter OTP"
+  value={otp}
+  onChangeText={value => {
+    setOtp(value);
+    if (value.length === 6) {
+      verifyOTP(value);
+    }
+  }}
+  dataType="number"
+  placeholder=""
+  errorMessage=""
+  hintText="Check your SMS for the code"
+/>
+
+// Ref methods
+otpRef.current?.focus();
+otpRef.current?.blur();
+otpRef.current?.setText('123456');
+```
+
+### Props
+
+Extends `InputProps` without `size`, `icon`, `iconColor`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `length` | `2 \| 4 \| 6 \| 8 \| 10` | `6` | Number of OTP digits |
+| `floatingValue` | `string` | **required** | Floating label text |
+| `dataType` | `'string' \| 'number'` | `'number'` | Input data type |
+| `value` | `string` | — | Controlled value |
+| `onChangeText` | `(text: string) => void` | — | Text change handler |
+| `placeholder` | `string` | — | Placeholder character |
+| `errorMessage` | `string` | — | Error message below input |
+| `errorSpacing` | `boolean` | `false` | Reserve space for error |
+| `hintText` | `string` | — | Hint text below input |
+| `params` | `any` | — | Auto tracking params |
+| `onFocus` | `(e: TextInputFocusEvent) => void` | — | Focus handler |
+| `onBlur` | `(e: TextInputFocusEvent) => void` | — | Blur handler |
+| `style` | `ViewStyle` | — | Container style |
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.InputOTP
+
+InputOTP(
+    value = otpValue,
+    length = 6,
+    floatingValue = "Enter OTP",
+    placeholder = "",
+    errorMessage = "",
+    errorSpacing = false,
+    hintText = "Check your SMS for the code",
+    dataType = "number",
+    onChangeText = { value ->
+        otpValue = value
+        if (value.length == 6) {
+            // handle verification
+        }
+    },
+    onFocus = { /* focus handler */ },
+    onBlur = { /* blur handler */ },
+    modifier = Modifier,
+)
+```
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| `ref` for imperative methods (`focus`, `blur`, `setText`) | Supported | Not available |

package/.claude/skills/design-system-kits/references/components/input-phone-number.md

@@ -0,0 +1,96 @@
+# InputPhoneNumber Reference
+
+Phone number input with +84 country code prefix and number formatting.
+
+## React Native
+
+```tsx
+import { InputPhoneNumber } from '@momo-kits/foundation';
+
+const phoneRef = useRef<InputRef>(null);
+
+<InputPhoneNumber
+  ref={phoneRef}
+  size="small"
+  value={phone}
+  onChangeText={setPhone}
+  placeholder="0123456789"
+  trailing="24_check_circle"
+  trailingColor={theme.colors.success.primary}
+  onPressTrailing={() => {}}
+  errorMessage=""
+  hintText=""
+  disabled={false}
+  loading={false}
+  showClearIcon={true}
+  editable={true}
+  secureTextEntry={false}
+  keyboardType="number-pad"
+  params={{}}
+  accessibilityLabel="phone_input"
+/>
+
+// Ref methods
+phoneRef.current?.clear();
+phoneRef.current?.focus();
+phoneRef.current?.blur();
+phoneRef.current?.setText('0901234567');
+```
+
+### Props
+
+Extends `InputProps` with phone-specific defaults.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `'small' \| 'large'` | `'small'` | Input size variant |
+| `placeholder` | `string` | `'0123456789'` | Placeholder text |
+| `keyboardType` | `string` | `'number-pad'` | Keyboard type |
+| `trailing` | `string` | — | Trailing icon name |
+| `trailingColor` | `string` | — | Trailing icon color |
+| `onPressTrailing` | `() => void` | — | Trailing icon press handler |
+| `errorMessage` | `string` | — | Error message |
+| `errorSpacing` | `boolean` | `false` | Reserve space for error |
+| `hintText` | `string` | — | Hint text |
+| `disabled` | `boolean` | `false` | Disable input |
+| `loading` | `boolean` | `false` | Show loading indicator on trailing |
+| `showClearIcon` | `boolean` | `true` | Show clear icon when focused |
+| `editable` | `boolean` | `true` | Allow text editing |
+| `secureTextEntry` | `boolean` | `false` | Mask input text |
+| `params` | `any` | — | Auto tracking params |
+| `accessibilityLabel` | `string` | — | Accessibility label |
+| `defaultValue` | `string` | — | Initial value (uncontrolled) |
+
+### Utility
+
+```tsx
+import { checkValidPhoneNumber } from '@momo-kits/foundation';
+
+const isValid = checkValidPhoneNumber('0901234567'); // true
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.InputPhoneNumber
+import vn.momo.kits.components.InputPhoneNumberSize
+
+val phone = remember { mutableStateOf("") }
+
+InputPhoneNumber(
+    text = phone,
+    onChangeText = { phone.value = it },
+    placeholder = "0123456789",
+    size = InputPhoneNumberSize.SMALL,     // InputPhoneNumberSize.SMALL | LARGE; default: SMALL
+    hintText = "",
+    error = "",                           // error message; default: ""
+    errorSpacing = false,
+    icon = "",                            // trailing icon name
+    iconColor = AppTheme.current.colors.text.default,
+    onRightIconPressed = { },
+    onFocus = { },
+    onBlur = { },
+    loading = false,
+    inputModifier = Modifier,
+)
+```

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

@@ -0,0 +1,127 @@
+# InputSearch Reference
+
+Search bar input with cancel button, clear icon, and typing animation support.
+
+## React Native
+
+```tsx
+import { InputSearch } from '@momo-kits/foundation';
+
+const searchRef = useRef<InputRef>(null);
+
+<InputSearch
+  ref={searchRef}
+  placeholder="Search..."
+  value={query}
+  onChangeText={setQuery}
+  defaultValue="initial query"      // uncontrolled default value
+  buttonText="Cancel"
+  showButtonText={true}
+  onPressButtonText={() => navigation.goBack()}
+  trailing="24_qr_code"
+  trailingColor={theme.colors.primary}
+  onPressTrailing={() => openScanner()}
+  backgroundColor={theme.colors.background.surface}
+  onFocus={() => {}}
+  onBlur={() => {}}
+  style={{}}
+  params={{ action: 'search' }}
+/>
+```
+
+### With Typing Animation
+
+When `typingData` is provided, the input becomes non-editable and shows an animated typing effect. Tap triggers `onPress`.
+
+```tsx
+<InputSearch
+  typingData={['Search for food...', 'Search for drinks...', 'Search for deals...']}
+  onPress={() => navigateToFullSearch()}
+/>
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `placeholder` | `string` | — | Placeholder text |
+| `value` | `string` | — | Controlled value |
+| `onChangeText` | `(text: string) => void` | — | Text change handler |
+| `defaultValue` | `string` | — | Uncontrolled default value |
+| `buttonText` | `string` | `'Hủy'` | Cancel button text |
+| `showButtonText` | `boolean` | `true` | Show/hide cancel button |
+| `onPressButtonText` | `() => void` | — | Cancel button press handler |
+| `trailing` | `string` | — | Trailing icon name |
+| `trailingColor` | `string` | — | Trailing icon color |
+| `onPressTrailing` | `() => void` | — | Trailing icon press handler |
+| `backgroundColor` | `string` | `theme.colors.background.surface` | Background color |
+| `typingData` | `string[]` | — | Array of strings for typing animation |
+| `onPress` | `(e) => void` | — | Press handler (used with typingData) |
+| `onFocus` | `(e) => void` | — | Focus handler |
+| `onBlur` | `(e) => void` | — | Blur handler |
+| `style` | `StyleProp<ViewStyle>` | — | Custom styles |
+| `params` | `any` | — | Auto tracking params |
+
+### Ref Methods
+
+```tsx
+searchRef.current?.clear();
+searchRef.current?.focus();
+searchRef.current?.blur();
+searchRef.current?.setText('new text');
+```
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.InputSearch
+import vn.momo.kits.components.InputSearchProps
+import vn.momo.kits.components.InputFontWeight
+import androidx.compose.runtime.MutableState
+
+val text = remember { mutableStateOf("") }
+
+InputSearch(
+    inputSearchProps = InputSearchProps(
+        text = text,                          // MutableState<String> holding the text value
+        placeholder = "Search...",            // placeholder text (default: "")
+        onChangeText = { value -> },         // called when text changes
+        buttonText = "Cancel",               // cancel button text (default: "")
+        showButtonText = false,              // show/hide cancel button (default: false)
+        onPressButtonText = {},              // cancel button pressed callback
+        disabled = false,                     // disable input (default: false)
+        icon = "",                           // trailing icon name (right side)
+        iconColor = Color.Unspecified,        // trailing icon color (default: Color.Unspecified)
+        onRightIconPressed = {},             // trailing icon pressed callback
+        onFocus = {},                        // focus callback
+        onBlur = {},                         // blur callback
+        loading = false,                     // show loading indicator on trailing icon
+        fontWeight = InputFontWeight.REGULAR, // REGULAR | BOLD (default: REGULAR)
+        keyboardType = KeyboardType.Text,    // Compose KeyboardType (default: Text)
+        backgroundColor = Color.Black,       // background color (default: Colors.black_01)
+        clearCondition = { true },           // custom condition to show clear icon
+        onClearPress = {},                   // called when clear icon is pressed
+        keyboardOptions = KeyboardOptions.Default,  // Compose KeyboardOptions
+        keyboardActions = KeyboardActions.Default,  // Compose KeyboardActions
+        modifier = Modifier,                  // optional modifier
+        iconModifier = Modifier,              // modifier for trailing icon
+        leftPosition = null,                  // custom left position (Dp?)
+    ),
+)
+```
+
+> **Note:** Compose `InputSearch` does **not** support `typingData` (animated typing) or `defaultValue` — these are RN-only.
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Value binding | `value` + `onChangeText` | `MutableState<String>` via `InputSearchProps.text` |
+| Trailing icon | `trailing` + `trailingColor` + `onPressTrailing` | `icon` + `iconColor` + `onRightIconPressed` |
+| Button visibility | `showButtonText` default `true` | `showButtonText` default `false` |
+| Imperative ref | `clear`, `focus`, `blur`, `setText` | Not available |
+| Font weight | Via `style` | `InputFontWeight` enum |
+| Clear icon | Auto-shown when focused and has value | Via `clearCondition` callback |
+| Modifier | `style` prop | `modifier` + `iconModifier` |
+| Typing animation | Supported via `typingData` | Not available |
+| Default value | `defaultValue` prop (uncontrolled) | Not available |

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

@@ -0,0 +1,100 @@
+# InputTextArea Reference
+
+Multi-line text input with character counting and max length.
+
+## React Native
+
+```tsx
+import { InputTextArea } from '@momo-kits/foundation';
+
+const textAreaRef = useRef<InputRef>(null);
+
+<InputTextArea
+  ref={textAreaRef}
+  floatingValue="Description"
+  floatingIcon="info_small"
+  floatingIconColor={theme.colors.text.hint}
+  value={text}
+  onChangeText={setText}
+  placeholder="Enter description..."
+  height={120}
+  maxLength={500}
+  errorMessage=""
+  hintText="Max 500 characters"
+  required={false}
+  disabled={false}
+  onFocus={(e) => {}}
+  onBlur={(e) => {}}
+  defaultValue=""
+  style={{}}
+  accessibilityLabel="description_input"
+  params={{ field: 'description' }}
+/>
+
+// Ref methods
+textAreaRef.current?.clear();
+textAreaRef.current?.focus();
+textAreaRef.current?.blur();
+textAreaRef.current?.setText('new text');
+```
+
+### Props
+
+Extends `InputProps` (same as Input) but **without `size`**.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `height` | `number` | — | Custom height for the text area |
+| `maxLength` | `number` | `300` | Character limit (shows counter) |
+| `floatingValue` | `string` | — | Floating label text |
+| `floatingIcon` | `string` | — | Icon shown beside floating label |
+| `floatingIconColor` | `string` | — | Color of floating icon |
+| `errorMessage` | `string` | — | Error message below input |
+| `errorSpacing` | `boolean` | `false` | Reserve space for error |
+| `hintText` | `string` | — | Hint text below input |
+| `required` | `boolean` | `false` | Show required indicator |
+| `disabled` | `boolean` | `false` | Disable input |
+| `onFocus` | `(e) => void` | — | Focus event handler |
+| `onBlur` | `(e) => void` | — | Blur event handler |
+| `placeholder` | `string` | — | Placeholder text |
+| `defaultValue` | `string` | — | Initial value (uncontrolled) |
+| `style` | `ViewStyle` | — | Custom wrapper style |
+| `params` | `any` | — | Auto tracking params |
+| `accessibilityLabel` | `string` | — | Accessibility label |
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.InputTextArea
+import vn.momo.kits.components.InputSize
+import vn.momo.kits.components.InputFontWeight
+
+val text = remember { mutableStateOf("") }
+
+InputTextArea(
+    text = text,
+    floatingValue = "Description",
+    floatingIcon = "",
+    floatingIconColor = AppTheme.current.colors.text.default,
+    placeholder = "Enter description...",
+    height = 104.dp,
+    maxLength = 300,
+    size = InputSize.SMALL,
+    onChangeText = { },
+    error = "",
+    errorSpacing = false,
+    required = false,
+    disabled = false,
+    loading = false,
+    icon = "",
+    iconColor = AppTheme.current.colors.text.default,
+    onRightIconPressed = { },
+    onFocus = { },
+    onBlur = { },
+    fontWeight = InputFontWeight.REGULAR,
+    keyboardType = KeyboardType.Text,
+    modifier = Modifier,
+)
+```
+
+> **Note:** Compose uses `MutableState<String>` for `text` and `error` (String, not `errorMessage`). Height defaults to `104.dp`. Max character count and clear icon are shown automatically when focused.

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

@@ -0,0 +1,126 @@
+# Input Reference
+
+Base text input with floating label, leading/trailing icons, and validation.
+
+## React Native
+
+```tsx
+import { Input } from '@momo-kits/foundation';
+
+const inputRef = useRef<InputRef>(null);
+
+<Input
+  ref={inputRef}
+  size="large"
+  floatingValue="Email"
+  value={text}
+  onChangeText={setText}
+  placeholder="Enter email"
+  leadingIcon="24_mail"
+  leadingIconColor={theme.colors.text.hint}
+  onPressLeadingIcon={() => {}}
+  trailing="24_check_circle"
+  trailingColor={theme.colors.success.primary}
+  onPressTrailing={() => {}}
+  errorMessage="Invalid email"
+  errorSpacing={true}
+  hintText="We'll never share your email"
+  required={true}
+  disabled={false}
+  loading={false}
+  showClearIcon={true}
+  secureTextEntry={false}
+  keyboardType="email-address"
+  accessibilityLabel="email_input"
+  params={{ field: 'email' }}
+/>
+
+// Ref methods
+inputRef.current?.clear();
+inputRef.current?.focus();
+inputRef.current?.blur();
+inputRef.current?.setText('new text');
+```
+
+### Props
+
+Extends `TextInputProps` — supports `value`, `onChangeText`, `placeholder`, `defaultValue`, `editable`, `secureTextEntry`, `keyboardType`, etc.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `'small' \| 'large'` | `'small'` | Input size variant |
+| `floatingValue` | `string` | — | Floating label text |
+| `floatingIcon` | `string` | — | Icon next to floating label |
+| `floatingIconColor` | `string` | — | Color of floating icon |
+| `onPressFloatingIcon` | `() => void` | — | Floating icon press handler |
+| `leadingIcon` | `string` | — | Leading icon name |
+| `leadingIconColor` | `string` | — | Leading icon color |
+| `onPressLeadingIcon` | `() => void` | — | Leading icon press handler |
+| `trailing` | `string` | — | Trailing icon name |
+| `trailingColor` | `string` | — | Trailing icon color |
+| `onPressTrailing` | `() => void` | — | Trailing icon press handler |
+| `errorMessage` | `string` | — | Error message below input |
+| `errorSpacing` | `boolean` | `false` | Reserve space for error when empty |
+| `hintText` | `string` | — | Hint text below input |
+| `required` | `boolean` | `false` | Show required indicator |
+| `disabled` | `boolean` | `false` | Disable input |
+| `loading` | `boolean` | `false` | Show loading indicator |
+| `showClearIcon` | `boolean` | `true` | Show clear text icon |
+| `params` | `any` | — | Auto tracking params |
+
+## Compose
+
+```kotlin
+import vn.momo.kits.components.Input
+import vn.momo.kits.components.InputSize
+import vn.momo.kits.components.InputFontWeight
+import androidx.compose.runtime.MutableState
+
+val text = remember { mutableStateOf("") }
+
+Input(
+    text = text,                              // MutableState<String> holding the text value
+    floatingValue = "Email",                 // floating label text (default: "")
+    floatingValueColor = Color.Unspecified,   // floating label color (default: theme hint)
+    floatingIcon = "",                       // icon next to floating label
+    floatingIconColor = Color.Unspecified,    // floating icon color (default: theme default)
+    placeholder = "",                        // placeholder text (default: "")
+    size = InputSize.SMALL,                 // SMALL | LARGE (default: SMALL)
+    onChangeText = { value -> },            // called when text changes
+    hintText = "",                          // hint text below input
+    error = "",                             // error message text (note: not errorMessage)
+    errorSpacing = false,                   // reserve space for error when empty
+    disabled = false,                        // disable input
+    readOnly = false,                       // make input read-only
+    secureTextEntry = false,                // hide text (password mode)
+    icon = "",                              // trailing icon name
+    iconColor = Color.Unspecified,           // trailing icon color
+    onRightIconPressed = {},                // trailing icon pressed callback
+    leadingIcon = "",                      // leading icon name (left side)
+    leadingIconColor = Color.Unspecified,    // leading icon color
+    onFocus = {},                           // focus callback
+    onBlur = {},                           // blur callback
+    loading = false,                       // show loading indicator on trailing icon
+    required = false,                      // show required indicator on floating label
+    fontWeight = InputFontWeight.REGULAR,  // REGULAR | BOLD (default: REGULAR)
+    keyboardType = KeyboardType.Text,      // Compose KeyboardType (default: Text)
+    modifier = Modifier,                    // optional modifier
+    inputModifier = Modifier,               // modifier for the input field itself
+)
+```
+
+> **Note:** Compose `Input` uses `MutableState<String>` for `text` (controlled). The `error` param is `String` (not `errorMessage`). The trailing icon doubles as a password visibility toggle when `secureTextEntry` is enabled.
+
+## Key Differences
+
+| Feature | React Native | Compose |
+|---------|-------------|---------|
+| Value binding | `value` + `onChangeText` | `MutableState<String>` via `text` param |
+| Error prop | `errorMessage` | `error` |
+| Size type | String (`'small' \| 'large'`) | Enum (`InputSize.SMALL \| LARGE`) |
+| Font weight | `fontWeight` (string) | `InputFontWeight` enum |
+| Floating label color | Via `floatingIconColor` only | Via `floatingValueColor` + `floatingIconColor` |
+| Trailing icon | `trailing` + `trailingColor` + `onPressTrailing` | `icon` + `iconColor` + `onRightIconPressed` |
+| Password toggle | Native `secureTextEntry` | Auto-handled (icon doubles as visibility toggle) |
+| Imperative ref | `clear`, `focus`, `blur`, `setText` | Not available |
+| Modifier | `style` prop | `modifier` + `inputModifier` |