@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/dist/src/lib/Components/AddressInput/AddressInput.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Banner } from '../Banner';
+import { useState } from 'react';
+import { View } from 'react-native';
 import { AddressInput } from './AddressInput';
 const meta = {
     component: AddressInput,
@@ -13,15 +14,115 @@ const meta = {
             },
         },
     },
+    argTypes: {
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text when input is empty',
+        },
+        prefix: {
+            control: 'text',
+            description: 'Custom prefix text (default: "To:")',
+        },
+        errorMessage: {
+            control: 'text',
+            description: 'Error message to display below input',
+        },
+        editable: {
+            control: 'boolean',
+            description: 'Whether the input is editable',
+        },
+        hideClearButton: {
+            control: 'boolean',
+            description: 'Hide the clear button',
+        },
+    },
 };
 export default meta;
-export const WebPreviewWarning = {
-    render: () => (_jsx(Banner, { appearance: 'warning', title: 'Unsupported previews on web', description: 'For this component, previewing stories is currently only supported on mobile. Reanimated causes compatibility issues with the web preview, so for now, please test on-device. We plan to add screenshots or embed Expo Snack in the future.' })),
-    parameters: {
-        docs: {
-            description: {
-                story: '⚠️ This component requires testing on a physical device or emulator due to Reanimated compatibility issues with web previews.',
-            },
-        },
+const AddressInputStory = (args) => {
+    const [address, setAddress] = useState(args.value?.toString() ?? '');
+    return (_jsx(View, { style: {
+            flex: 1,
+            minHeight: 96,
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+        }, children: _jsx(View, { style: { width: '100%', maxWidth: 400 }, children: _jsx(AddressInput, { ...args, value: address, onChangeText: setAddress, onQrCodeClick: args.onQrCodeClick ?? (() => alert('QR code scanner opened')) }) }) }));
+};
+export const Base = {
+    render: (args) => _jsx(AddressInputStory, { ...args }),
+    args: {
+        placeholder: 'Enter address or ENS',
+        prefix: 'To:',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const WithContent = {
+    render: (args) => _jsx(AddressInputStory, { ...args }),
+    args: {
+        placeholder: 'Enter address or ENS',
+        value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
+        prefix: 'To:',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const WithCustomPrefix = {
+    render: (args) => _jsx(AddressInputStory, { ...args }),
+    args: {
+        placeholder: 'Enter sender address',
+        prefix: 'From:',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+const AddressInputWithoutQrStory = (args) => {
+    const [address, setAddress] = useState(args.value?.toString() ?? '');
+    return (_jsx(View, { style: {
+            flex: 1,
+            minHeight: 96,
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+        }, children: _jsx(View, { style: { width: '100%', maxWidth: 400 }, children: _jsx(AddressInput, { ...args, value: address, onChangeText: setAddress, onQrCodeClick: undefined }) }) }));
+};
+export const WithoutQrCode = {
+    render: (args) => _jsx(AddressInputWithoutQrStory, { ...args }),
+    args: {
+        placeholder: 'Enter address or ENS',
+        prefix: 'To:',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const WithError = {
+    render: (args) => _jsx(AddressInputStory, { ...args }),
+    args: {
+        placeholder: 'Enter address or ENS',
+        value: 'invalid-address',
+        errorMessage: 'Invalid address format',
+        prefix: 'To:',
+        editable: true,
+        hideClearButton: false,
+    },
+};
+export const DisabledAddressInput = {
+    render: (args) => _jsx(AddressInputStory, { ...args }),
+    args: {
+        placeholder: 'Enter address or ENS',
+        value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
+        prefix: 'To:',
+        editable: false,
+        hideClearButton: false,
+    },
+};
+export const WithHiddenClearButton = {
+    render: (args) => _jsx(AddressInputStory, { ...args }),
+    args: {
+        placeholder: 'Enter address or ENS',
+        value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
+        prefix: 'To:',
+        editable: true,
+        hideClearButton: true,
     },
 };

package/dist/src/lib/Components/AddressInput/index.d.ts

@@ -1,2 +1,3 @@
 export * from './AddressInput';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/lib/Components/AddressInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AddressInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AddressInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC"}

package/dist/src/lib/Components/AddressInput/index.js

@@ -1 +1,2 @@
 export * from './AddressInput';
+export * from './types';

package/dist/src/lib/Components/AddressInput/types.d.ts

@@ -0,0 +1,24 @@
+import { BaseInputProps } from '../BaseInput';
+import { BoxProps } from '../Utility';
+export type AddressInputProps = Omit<BaseInputProps, 'prefix' | 'label'> & {
+    /**
+     * Custom suffix element to show instead of the QR code icon.
+     * Default suffix is a QR code scanner when empty (if onQrCodeClick provided), clear button when content.
+     * — both can be overridden with a custom suffix.
+     *
+     * @default QrCodeIcon
+     */
+    suffix?: React.ReactNode;
+    /**
+     * Custom prefix text to show instead of the "To:" prefix.
+     * @default "To:"
+     */
+    prefix?: string;
+    /**
+     * Callback fired when the QR code scanner icon is clicked.
+     * When provided, the QR code scanner icon will be displayed when input is empty.
+     * When not provided, no QR code scanner icon will be shown.
+     */
+    onQrCodeClick?: () => void;
+} & BoxProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/AddressInput/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AddressInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG;IACzE;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,GAAG,QAAQ,CAAC"}

package/dist/src/lib/Components/AmountInput/AmountInput.d.ts

@@ -1,108 +1,22 @@
 import React from 'react';
-import { TextInput, type TextInputProps } from 'react-native';
-export type AmountInputProps = Omit<TextInputProps, 'value' | 'onChangeText'> & {
-    /**
-     * The controlled value of the input
-     * @required
-     */
-    value: string | number;
-    /**
-     * Change handler
-     * @required
-     */
-    onChangeText: (text: string) => void;
-    /**
-     * The currency text (e.g. USD, EUR)
-     */
-    currencyText?: string;
-    /**
-     * Position of the currency text.
-     * @default 'left'
-     */
-    currencyPosition?: 'left' | 'right';
-    /**
-     * Maximum length for integer part (before decimal)
-     * @default 9
-     */
-    maxIntegerLength?: number;
-    /**
-     * Maximum length for decimal part (after decimal)
-     * @default 9
-     */
-    maxDecimalLength?: number;
-    /**
-     * Allow decimal values
-     * @default true
-     */
-    allowDecimals?: boolean;
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * Whether to use thousands separator (e.g. 1 000 for 1000)
-     * @default true
-     */
-    thousandsSeparator?: boolean;
-    /**
-     * Mark input as invalid (e.g. for error display)
-     * @default false
-     */
-    isInvalid?: boolean;
-};
+import { TextInput } from 'react-native';
 /**
  * AmountInput component for handling numeric input with currency display.
  * This is a controlled component - both `value` and `onChange` props are required.
  * The currency text can be positioned either on the left or right side of the input.
  */
-export declare const AmountInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "value" | "onChangeText"> & {
-    /**
-     * The controlled value of the input
-     * @required
-     */
+export declare const AmountInput: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "value" | "onChangeText"> & {
     value: string | number;
-    /**
-     * Change handler
-     * @required
-     */
     onChangeText: (text: string) => void;
-    /**
-     * The currency text (e.g. USD, EUR)
-     */
     currencyText?: string;
-    /**
-     * Position of the currency text.
-     * @default 'left'
-     */
     currencyPosition?: "left" | "right";
-    /**
-     * Maximum length for integer part (before decimal)
-     * @default 9
-     */
     maxIntegerLength?: number;
-    /**
-     * Maximum length for decimal part (after decimal)
-     * @default 9
-     */
     maxDecimalLength?: number;
-    /**
-     * Allow decimal values
-     * @default true
-     */
     allowDecimals?: boolean;
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * Whether to use thousands separator (e.g. 1 000 for 1000)
-     * @default true
-     */
+    style?: import("react-native").ViewStyle;
     thousandsSeparator?: boolean;
-    /**
-     * Mark input as invalid (e.g. for error display)
-     * @default false
-     */
     isInvalid?: boolean;
-} & React.RefAttributes<TextInput>>;
+} & {
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<TextInput>>;
 //# sourceMappingURL=AmountInput.d.ts.map

package/dist/src/lib/Components/AmountInput/AmountInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAa,SAAS,EAAQ,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAU/E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACd,OAAO,GAAG,cAAc,CACzB,GAAG;IACF;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAOF;;;;GAIG;AACH,eAAO,MAAM,WAAW;IA5DtB;;;OAGG;WACI,MAAM,GAAG,MAAM;IACtB;;;OAGG;kBACW,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IACpC;;OAEG;mBACY,MAAM;IACrB;;;OAGG;uBACgB,MAAM,GAAG,OAAO;IACnC;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;oBACa,OAAO;IACvB;;OAEG;gBACS,MAAM;IAClB;;;OAGG;yBACkB,OAAO;IAC5B;;;OAGG;gBACS,OAAO;mCAuLpB,CAAC"}
+{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/AmountInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAyB,SAAS,EAAE,MAAM,cAAc,CAAC;AAahE;;;;GAIG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;sEA+JvB,CAAC"}

package/dist/src/lib/Components/AmountInput/AmountInput.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, getFontSize, textFormatter } from '@ledgerhq/lumen-utils-shared';
+import { getFontSize, textFormatter } from '@ledgerhq/lumen-utils-shared';
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Pressable, TextInput, View } from 'react-native';
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withSequence, withTiming, withRepeat, } from 'react-native-reanimated';
-const inputStyles = cn('heading-0 h-56 bg-transparent text-base outline-none items-start');
-const currencyStyles = cn('heading-0 text-base');
+import { Pressable, StyleSheet, TextInput } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withSequence, withTiming, } from 'react-native-reanimated';
+import { useStyleSheet } from '../../../styles';
+import { Box } from '../Utility';
 /**
  * AmountInput component for handling numeric input with currency display.
  * This is a controlled component - both `value` and `onChange` props are required.
  * The currency text can be positioned either on the left or right side of the input.
  */
-export const AmountInput = React.forwardRef(({ className, currencyText, currencyPosition = 'left', editable = true, maxIntegerLength = 9, maxDecimalLength = 9, allowDecimals = true, thousandsSeparator = true, value, onChangeText, isInvalid = false, ...props }, ref) => {
+export const AmountInput = React.forwardRef(({ lx = {}, style, currencyText, currencyPosition = 'left', editable = true, maxIntegerLength = 9, maxDecimalLength = 9, allowDecimals = true, thousandsSeparator = true, value, onChangeText, isInvalid = false, ...props }, ref) => {
     const inputRef = useRef(null);
     const inputValue = String(value);
     const [isFocused, setIsFocused] = useState(false);
@@ -18,19 +18,24 @@ export const AmountInput = React.forwardRef(({ className, currencyText, currency
     const animatedFontSize = useSharedValue(getFontSize(inputValue));
     const caretOpacity = useSharedValue(0);
     useImperativeHandle(ref, () => inputRef.current, []);
+    const styles = useStyles({
+        hasValue: !!inputValue,
+        isEditable: editable,
+        isInvalid,
+    });
     const animatedInputStyle = useAnimatedStyle(() => ({
         transform: [{ translateX: translateX.value }],
         fontSize: animatedFontSize.value,
         letterSpacing: 0,
-    }));
+    }), [translateX, animatedFontSize]);
     const animatedCurrencyStyle = useAnimatedStyle(() => ({
         fontSize: animatedFontSize.value,
         letterSpacing: 0,
-    }));
+    }), [animatedFontSize]);
     const animatedCaretStyle = useAnimatedStyle(() => ({
         opacity: caretOpacity.value,
         height: animatedFontSize.value,
-    }));
+    }), [caretOpacity, animatedFontSize]);
     useEffect(() => {
         const newSize = getFontSize(inputValue);
         translateX.value = withSequence(withTiming(4, { duration: 0 }), withTiming(0, {
@@ -44,7 +49,6 @@ export const AmountInput = React.forwardRef(({ className, currencyText, currency
     }, [inputValue, animatedFontSize, translateX]);
     useEffect(() => {
         if (isFocused && editable) {
-            // custom caret animation
             caretOpacity.value = withRepeat(withSequence(withTiming(1, { duration: 150, easing: Easing.ease }), withTiming(1, { duration: 500 }), withTiming(0, { duration: 150, easing: Easing.ease }), withTiming(0, { duration: 500 })), -1, false);
         }
         else {
@@ -60,27 +64,74 @@ export const AmountInput = React.forwardRef(({ className, currencyText, currency
         });
         onChangeText(formatted);
     };
-    const CurrencyText = currencyText ? (_jsx(Animated.Text, { className: cn(currencyStyles, !inputValue && 'text-muted-subtle', !editable && 'text-disabled', isInvalid && 'text-error'), style: animatedCurrencyStyle, children: currencyText })) : null;
+    const CurrencyText = currencyText ? (_jsx(Animated.Text, { style: [styles.currency, animatedCurrencyStyle], children: currencyText })) : null;
     const handlePress = () => {
         if (editable) {
             inputRef.current?.focus();
         }
     };
-    return (_jsxs(View, { className: 'relative', children: [_jsx(TextInput, { ref: inputRef, keyboardType: 'decimal-pad', editable: editable, value: inputValue, onChangeText: handleChangeText, onFocus: (e) => {
+    return (_jsxs(Box, { lx: lx, style: styles.container, children: [_jsx(TextInput, { ref: inputRef, keyboardType: 'decimal-pad', editable: editable, value: inputValue, onChangeText: handleChangeText, onFocus: (e) => {
                     setIsFocused(true);
                     props.onFocus?.(e);
                 }, onBlur: (e) => {
                     setIsFocused(false);
                     props.onBlur?.(e);
-                }, className: 'absolute size-full opacity-0', ...props }), _jsxs(Pressable, { onPress: handlePress, className: 'flex-row items-center justify-center', accessibilityLabel: props.accessibilityLabel || 'Amount input', children: [currencyPosition === 'left' && CurrencyText, _jsx(Animated.Text, { className: cn(inputStyles, isInvalid && 'text-error', !editable && 'text-disabled', !inputValue && 'text-muted-subtle', className), style: animatedInputStyle, children: inputValue || '0' }), _jsx(Animated.View, { className: 'mx-2', 
-                        // TODO: use theme object here
-                        style: [
-                            animatedCaretStyle,
-                            {
-                                width: 3,
-                                borderRadius: 1.5,
-                                backgroundColor: '#007AFF',
-                            },
-                        ] }), currencyPosition === 'right' && CurrencyText] })] }));
+                }, style: styles.hiddenInput, ...props }), _jsxs(Pressable, { onPress: handlePress, style: styles.pressable, accessibilityLabel: props.accessibilityLabel || 'Amount input', children: [currencyPosition === 'left' && CurrencyText, _jsx(Animated.Text, { style: [styles.displayText, animatedInputStyle, style], children: inputValue || '0' }), _jsx(Animated.View, { style: [styles.caret, animatedCaretStyle] }), currencyPosition === 'right' && CurrencyText] })] }));
 });
+const useStyles = ({ hasValue, isEditable, isInvalid, }) => {
+    return useStyleSheet((t) => ({
+        container: {
+            position: 'relative',
+        },
+        hiddenInput: {
+            position: 'absolute',
+            width: t.sizes.full,
+            height: t.sizes.full,
+            opacity: 0,
+        },
+        pressable: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        displayText: StyleSheet.flatten([
+            {
+                height: t.sizes.s56,
+                backgroundColor: 'transparent',
+                color: t.colors.text.base,
+                alignItems: 'flex-start',
+                ...t.typographies.heading0SemiBold,
+            },
+            !hasValue && {
+                color: t.colors.text.mutedSubtle,
+            },
+            !isEditable && {
+                color: t.colors.text.disabled,
+            },
+            isInvalid && {
+                color: t.colors.text.error,
+            },
+        ]),
+        currency: StyleSheet.flatten([
+            {
+                color: t.colors.text.base,
+                ...t.typographies.heading0SemiBold,
+            },
+            !hasValue && {
+                color: t.colors.text.mutedSubtle,
+            },
+            !isEditable && {
+                color: t.colors.text.disabled,
+            },
+            isInvalid && {
+                color: t.colors.text.error,
+            },
+        ]),
+        caret: {
+            marginHorizontal: t.spacings.s2,
+            width: t.sizes.s2,
+            backgroundColor: t.colors.text.active,
+        },
+    }), [hasValue, isEditable, isInvalid]);
+};
 AmountInput.displayName = 'AmountInput';

package/dist/src/lib/Components/AmountInput/AmountInput.stories.d.ts

@@ -3,5 +3,14 @@ import { AmountInput } from './AmountInput';
 declare const meta: Meta<typeof AmountInput>;
 export default meta;
 type Story = StoryObj<typeof AmountInput>;
-export declare const WebPreviewWarning: Story;
+export declare const Base: Story;
+export declare const WithValue: Story;
+export declare const CurrencyPositionLeft: Story;
+export declare const CurrencyPositionRight: Story;
+export declare const IntegerOnly: Story;
+export declare const WithThousandsSeparator: Story;
+export declare const WithoutThousandsSeparator: Story;
+export declare const ErrorState: Story;
+export declare const DisabledAmountInput: Story;
+export declare const CustomLengthLimits: Story;
 //# sourceMappingURL=AmountInput.stories.d.ts.map

package/dist/src/lib/Components/AmountInput/AmountInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/AmountInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAYlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,iBAAiB,EAAE,KAgB/B,CAAC"}
+{"version":3,"file":"AmountInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/AmountInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA+ClC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAsB1C,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAWpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAWvC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAWjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC"}

package/dist/src/lib/Components/AmountInput/AmountInput.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Banner } from '../Banner';
+import { useState } from 'react';
+import { View } from 'react-native';
 import { AmountInput } from './AmountInput';
 const meta = {
     component: AmountInput,
@@ -13,15 +14,173 @@ const meta = {
             },
         },
     },
+    argTypes: {
+        currencyText: {
+            control: 'text',
+            description: 'Currency text to display (e.g. USD, EUR, $)',
+        },
+        currencyPosition: {
+            control: 'radio',
+            options: ['left', 'right'],
+            description: 'Position of the currency text',
+        },
+        allowDecimals: {
+            control: 'boolean',
+            description: 'Whether to allow decimal values',
+        },
+        thousandsSeparator: {
+            control: 'boolean',
+            description: 'Whether to display thousands separator',
+        },
+        maxIntegerLength: {
+            control: 'number',
+            description: 'Maximum digits for integer part',
+        },
+        maxDecimalLength: {
+            control: 'number',
+            description: 'Maximum digits for decimal part',
+        },
+        isInvalid: {
+            control: 'boolean',
+            description: 'Whether the input is in error state',
+        },
+        editable: {
+            control: 'boolean',
+            description: 'Whether the input is editable',
+        },
+    },
 };
 export default meta;
-export const WebPreviewWarning = {
-    render: () => (_jsx(Banner, { appearance: 'warning', title: 'Unsupported previews on web', description: 'For this component, previewing stories is currently only supported on mobile. Reanimated causes compatibility issues with the web preview, so for now, please test on-device. We plan to add screenshots or embed Expo Snack in the future.' })),
-    parameters: {
-        docs: {
-            description: {
-                story: '⚠️ This component requires testing on a physical device or emulator due to Reanimated compatibility issues with web previews.',
-            },
-        },
+const AmountInputStory = (args) => {
+    const [value, setValue] = useState(args.value?.toString() ?? '');
+    return (_jsx(View, { style: {
+            flex: 1,
+            minHeight: 96,
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+        }, children: _jsx(View, { style: { width: '100%', maxWidth: 320 }, children: _jsx(AmountInput, { ...args, value: value, onChangeText: setValue }) }) }));
+};
+export const Base = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        currencyText: 'USD',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        maxIntegerLength: 9,
+        maxDecimalLength: 9,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const WithValue = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1234.56',
+        currencyText: 'USD',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const CurrencyPositionLeft = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1000',
+        currencyText: '$',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const CurrencyPositionRight = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1000',
+        currencyText: 'ETH',
+        currencyPosition: 'right',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const IntegerOnly = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1234',
+        currencyText: 'items',
+        currencyPosition: 'right',
+        allowDecimals: false,
+        thousandsSeparator: true,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const WithThousandsSeparator = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1000000',
+        currencyText: 'USD',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const WithoutThousandsSeparator = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1000000',
+        currencyText: 'USD',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: false,
+        isInvalid: false,
+        editable: true,
+    },
+};
+export const ErrorState = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1234.56',
+        currencyText: 'USD',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        isInvalid: true,
+        editable: true,
+    },
+};
+export const DisabledAmountInput = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '1234.56',
+        currencyText: 'USD',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        isInvalid: false,
+        editable: false,
+    },
+};
+export const CustomLengthLimits = {
+    render: (args) => _jsx(AmountInputStory, { ...args }),
+    args: {
+        value: '123',
+        currencyText: '$',
+        currencyPosition: 'left',
+        allowDecimals: true,
+        thousandsSeparator: true,
+        maxIntegerLength: 6,
+        maxDecimalLength: 2,
+        isInvalid: false,
+        editable: true,
     },
 };

package/dist/src/lib/Components/AmountInput/index.d.ts

@@ -1,2 +1,3 @@
 export * from './AmountInput';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/lib/Components/AmountInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/dist/src/lib/Components/AmountInput/index.js

@@ -1 +1,2 @@
 export * from './AmountInput';
+export * from './types';