@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/dist/src/styles/theme/index.d.ts

@@ -0,0 +1,2 @@
+export { createStylesheetTheme, getNegativeSpacings, } from './createStylesheetTheme';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/styles/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC"}

package/dist/src/styles/theme/index.js

@@ -0,0 +1 @@
+export { createStylesheetTheme, getNegativeSpacings, } from './createStylesheetTheme';

package/dist/src/styles/types/create.types.d.ts

@@ -5,7 +5,7 @@ type AllAvailableKeys = keyof (ViewStyle & TextStyle & ImageStyle);
 type FlatLumensValues = {
     [propName in AllAvailableKeys]?: AllAvailableStyles[propName];
 };
-type LumensValues = FlatLumensValues;
+type LumensValues = FlatLumensValues | FlatLumensValues[];
 export type LumenStyleSheet = {
     [styleName: string]: LumensValues | ((...args: any) => LumensValues);
 };

package/dist/src/styles/types/create.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/create.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE1D,KAAK,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,KAAK,gBAAgB,GAAG,MAAM,CAAC,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnE,KAAK,gBAAgB,GAAG;KACrB,QAAQ,IAAI,gBAAgB,CAAC,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC;CAC9D,CAAC;AAEF,KAAK,YAAY,GAAG,gBAAgB,CAAC;AAErC,MAAM,MAAM,eAAe,GAAG;IAC5B,CAAC,SAAS,EAAE,MAAM,GACd,YAAY,GAEZ,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,YAAY,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,uBAAuB,CAAC,CAAC,SAAS,eAAe,IACzD,CAAC,CAAC,KAAK,EAAE,oBAAoB,KAAK,CAAC,CAAC,GACpC,CAAC,CAAC"}
+{"version":3,"file":"create.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/create.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE1D,KAAK,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,KAAK,gBAAgB,GAAG,MAAM,CAAC,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnE,KAAK,gBAAgB,GAAG;KACrB,QAAQ,IAAI,gBAAgB,CAAC,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC;CAC9D,CAAC;AAEF,KAAK,YAAY,GAAG,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC5B,CAAC,SAAS,EAAE,MAAM,GACd,YAAY,GAEZ,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,YAAY,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,uBAAuB,CAAC,CAAC,SAAS,eAAe,IACzD,CAAC,CAAC,KAAK,EAAE,oBAAoB,KAAK,CAAC,CAAC,GACpC,CAAC,CAAC"}

package/dist/src/styles/types/factories.types.d.ts

@@ -0,0 +1,41 @@
+import { PressableProps, PressableStateCallbackType, TextProps as RNTextProps, ViewProps, ViewStyle } from 'react-native';
+import { LumenTextStyle, LumenViewStyle } from './lx.types';
+import { LumenStyleSheetTheme } from './theme.types';
+type StyleFn = (state: PressableStateCallbackType) => ViewStyle;
+export type PressableStyleItem = ViewStyle | StyleFn | PressableStyleItem[] | null | undefined;
+export type ExtendRNPressableProps = Omit<PressableProps, 'style'> & {
+    style?: PressableStyleItem;
+};
+/**
+ * View API that extends lx style property
+ */
+export type StyledViewProps = {
+    /**
+     * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
+     */
+    lx?: LumenViewStyle;
+} & ViewProps;
+/**
+ * Text API that extends lx style property
+ */
+export type StyledTextProps = {
+    /**
+     * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
+     */
+    lx?: LumenTextStyle;
+    /**
+     * Typography preset
+     */
+    typography?: keyof LumenStyleSheetTheme['typographies'];
+} & RNTextProps;
+/**
+ * Pressable API that extends lx style property
+ */
+export type StyledPressableProps = {
+    /**
+     * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
+     */
+    lx?: LumenViewStyle;
+} & ExtendRNPressableProps;
+export {};
+//# sourceMappingURL=factories.types.d.ts.map

package/dist/src/styles/types/factories.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"factories.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/factories.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,0BAA0B,EAC1B,SAAS,IAAI,WAAW,EACxB,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC;AAChE,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,OAAO,GACP,kBAAkB,EAAE,GACpB,IAAI,GACJ,SAAS,CAAC;AAEd,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAC,cAAc,CAAC,CAAC;CACzD,GAAG,WAAW,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB,GAAG,sBAAsB,CAAC"}

package/dist/src/styles/types/factories.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/styles/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './create.types';
 export * from './theme.types';
-export * from './styled.types';
+export * from './lx.types';
+export * from './factories.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/styles/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}

package/dist/src/styles/types/index.js

@@ -1,3 +1,4 @@
 export * from './create.types';
 export * from './theme.types';
-export * from './styled.types';
+export * from './lx.types';
+export * from './factories.types';

package/dist/src/styles/types/{styled.types.d.ts → lx.types.d.ts}

@@ -1,4 +1,4 @@
-import type { ViewStyle, FlexStyle, TextStyle, ViewProps, TextProps } from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
 import type { LumenStyleSheetTheme } from './theme.types';
 /**
  * Extract token keys from theme
@@ -11,8 +11,28 @@ type TextColorToken = keyof LumenStyleSheetTheme['colors']['text'];
 type BorderColorToken = keyof LumenStyleSheetTheme['colors']['border'];
 type BorderRadiusToken = keyof LumenStyleSheetTheme['borderRadius'];
 type ShadowToken = keyof LumenStyleSheetTheme['shadows'];
-type TypographyToken = keyof LumenStyleSheetTheme['typographies'];
-type SpacingProps = {
+/**
+ * Main public types - combine token props with RN props
+ */
+export type LumenViewStyle = {
+    /**
+     * Flex layout
+     */
+    flex?: ViewStyle['flex'];
+    flexDirection?: ViewStyle['flexDirection'];
+    flexWrap?: ViewStyle['flexWrap'];
+    justifyContent?: ViewStyle['justifyContent'];
+    alignItems?: ViewStyle['alignItems'];
+    alignSelf?: ViewStyle['alignSelf'];
+    alignContent?: ViewStyle['alignContent'];
+    flexGrow?: ViewStyle['flexGrow'];
+    flexShrink?: ViewStyle['flexShrink'];
+    flexBasis?: ViewStyle['flexBasis'];
+    position?: ViewStyle['position'];
+    zIndex?: ViewStyle['zIndex'];
+    overflow?: ViewStyle['overflow'];
+    display?: ViewStyle['display'];
+    aspectRatio?: ViewStyle['aspectRatio'];
     /**
      * Padding
      */
@@ -38,30 +58,37 @@ type SpacingProps = {
     marginHorizontal?: SpacingToken;
     marginVertical?: SpacingToken;
     /**
-     * Gaps
+     * Position
+     */
+    top?: SpacingToken;
+    bottom?: SpacingToken;
+    left?: SpacingToken;
+    right?: SpacingToken;
+    start?: SpacingToken;
+    end?: SpacingToken;
+    /**
+     * Gap
      */
     gap?: SpacingToken;
     rowGap?: SpacingToken;
     columnGap?: SpacingToken;
-};
-/**
- * Size props - use size tokens only
- */
-type SizeProps = {
+    /**
+     * Size
+     */
     width?: SizeToken;
     height?: SizeToken;
     minWidth?: SizeToken;
     minHeight?: SizeToken;
     maxWidth?: SizeToken;
     maxHeight?: SizeToken;
-};
-/**
- * Background color props - use background color tokens only
- */
-type BackgroundColorProps = {
+    /**
+     * Background color
+     */
     backgroundColor?: BackgroundColorToken;
-};
-type BorderProps = {
+    /**
+     * Shadow
+     */
+    boxShadow?: ShadowToken;
     /**
      * Border width
      */
@@ -90,46 +117,18 @@ type BorderProps = {
     borderTopRightRadius?: BorderRadiusToken;
     borderBottomLeftRadius?: BorderRadiusToken;
     borderBottomRightRadius?: BorderRadiusToken;
+    /**
+     * Other styles
+     */
+    opacity?: ViewStyle['opacity'];
+    borderStyle?: ViewStyle['borderStyle'];
+    transform?: ViewStyle['transform'];
 };
-/**
- * Shadow props - use shadow tokens
- */
-type ShadowProps = {
-    boxShadow?: ShadowToken;
-};
-/**
- * Flex layout props - passthrough from React Native
- */
-type FlexLayoutProps = Pick<FlexStyle, 'flex' | 'flexDirection' | 'flexWrap' | 'justifyContent' | 'alignItems' | 'alignSelf' | 'alignContent' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'position' | 'top' | 'bottom' | 'left' | 'right' | 'start' | 'end' | 'zIndex' | 'overflow' | 'display' | 'aspectRatio'>;
-/**
- * Other view style props - passthrough from React Native
- */
-type OtherViewStyleProps = Pick<ViewStyle, 'opacity' | 'borderStyle' | 'transform'>;
-/**
- * Text color props - use text color tokens only
- */
-type TextColorProps = {
+export type LumenTextStyle = LumenViewStyle & {
     color?: TextColorToken;
+    textAlign?: TextStyle['textAlign'];
+    textTransform?: TextStyle['textTransform'];
+    textDecorationLine?: TextStyle['textDecorationLine'];
 };
-/**
- * Typography prop
- */
-type TypographyProps = {
-    typo?: TypographyToken;
-};
-/**
- * Text style props - passthrough from React Native
- */
-type OtherTextStyleProps = Pick<TextStyle, 'textAlign' | 'textTransform' | 'textDecorationLine'>;
-/**
- * Main public types - combine token props with RN props
- */
-export type LumenViewStyleProps = SpacingProps & SizeProps & BackgroundColorProps & BorderProps & ShadowProps & FlexLayoutProps & OtherViewStyleProps;
-export type LumenTextStyleProps = LumenViewStyleProps & TextColorProps & TypographyProps & OtherTextStyleProps;
-/**
- * Derived style-only types (for internal resolver use)
- */
-export type LumenViewProps = LumenViewStyleProps & ViewProps;
-export type LumenTextProps = LumenTextStyleProps & TextProps;
 export {};
-//# sourceMappingURL=styled.types.d.ts.map
+//# sourceMappingURL=lx.types.d.ts.map

package/dist/src/styles/types/lx.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lx.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/lx.types.ts"],"names":[],"mappings":"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"}

package/dist/src/styles/types/lx.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/styles/types/utility.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utility.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/utility.types.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG;IAAE,UAAU,EAAE,IAAI,CAAA;CAAE,CAAC;AACjE,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG;KACpE,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACzD,CAAC"}
+{"version":3,"file":"utility.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/utility.types.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG;IAAE,UAAU,EAAE,IAAI,CAAA;CAAE,CAAC;AAEjE,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG;KACpE,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACzD,CAAC"}

package/dist/src/utils/icon-template.js

@@ -10,7 +10,7 @@ const template = (variables, { tpl }) => {
  * 
  * @component
  * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
- * @param {string} [className] - Additional CSS classes to apply to the icon (via NativeWind).
+ * @param {string} [color] - The color of the icon.
  * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
  * 
  * @example
@@ -20,8 +20,8 @@ const template = (variables, { tpl }) => {
  * <${componentName} />
  * 
  * @example
- * // With custom size and className (NativeWind)
- * <${componentName} size={40} className="text-warning" />
+ * // With custom size and style
+ * <${componentName} size={40} color="warning" lx={{ marginTop: 's4' }} />
  * 
  * @example
  * // Used within a Button component

package/jest.config.ts

@@ -2,7 +2,6 @@ import type { Config } from 'jest';
 
 const transformIncludePatterns = [
   '@react-native/polyfills',
-  'react-native-css-interop',
   'react-native-svg',
   'react-native-reanimated',
   '(jest-)?react-native',

package/jest.setup.ts

@@ -44,16 +44,6 @@ jest.mock('@gorhom/bottom-sheet', () => {
   };
 });
 
-// Mock react-native-css-interop to pass through components unchanged
-jest.mock('react-native-css-interop', () => {
-  const mockReact = jest.requireActual<typeof import('react')>('react');
-  return {
-    cssInterop: (component: any) => component,
-    createInteropElement: (component: any, ...args: any[]) =>
-      mockReact.createElement(component, ...args),
-  };
-});
-
 // Mock react-native-reanimated
 jest.mock('react-native-reanimated', () => {
   const mockRN =

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
     "ui",
     "components",
     "design-system",
-    "mobile",
-    "nativewind"
+    "mobile"
   ],
   "type": "module",
   "main": "./src/index.ts",
@@ -25,19 +24,17 @@
       "import": "./src/lib/Symbols/index.ts",
       "default": "./src/lib/Symbols/index.ts"
     },
-    "./styles": "./src/styles/index.ts",
-    "./ToRemove": "./src/lib/Components/_ToRemove/ToRemove.tsx"
+    "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.0.11",
+    "@ledgerhq/lumen-utils-shared": "0.0.12",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
   "peerDependencies": {
     "react": "~18.3.1",
     "react-native": "~0.77.3",
-    "react-native-svg": "^15.0.0",
-    "nativewind": "~4.1.23"
+    "react-native-svg": "^15.0.0"
   },
   "nx": {
     "tags": [

package/src/lib/Components/AddressInput/AddressInput.mdx

@@ -3,7 +3,7 @@ import * as AddressInputStories from './AddressInput.stories';
 import { AddressInput } from './AddressInput';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Input/AddressInput' of={AddressInputStories} />
 
@@ -18,38 +18,47 @@ The AddressInput component provides a specialized input field for entering crypt
 
 > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6375-6974&m=dev).
 
-<Canvas of={AddressInputStories.WebPreviewWarning} />
+> ⚠️ **Note on Web Preview:** The Storybook preview below may display visual inconsistencies as certain React Native APIs (such as Reanimated animations) cannot be fully translated to web environments. While the component's functionality should accurately represent the native implementation, it may not render as intended. For the complete native experience, please refer to the component on an actual iOS or Android device.
+
+<Canvas of={AddressInputStories.Base} />
+<Controls of={AddressInputStories.Base} />
 
 ## Anatomy
 
-> **Layout:** The AddressInput component takes the full width of its container by default. You can control the width directly using `className` or by wrapping in a container.
+> **Layout:** The AddressInput component takes the full width of its container by default. You can control the width by using the `style` prop or by wrapping in a container.
 
 ### Customizable Prefix
 
 The component displays "To:" as the default prefix text, but this can be customized via the `prefix` prop for different use cases like "From:", "Withdraw to:", etc.
 
+<Canvas of={AddressInputStories.WithCustomPrefix} />
+
 ### QR Code Scanner
 
 When `onQrCodeClick` is provided, a QR code scanner icon appears when the input is empty, allowing users to scan addresses directly. Without `onQrCodeClick`, no QR code icon appears.
 
+<Canvas of={AddressInputStories.WithoutQrCode} />
+
 ### Clear Button
 
 A clear button appears **automatically** when input has content, replacing the QR code scanner icon (if present).
 
+<Canvas of={AddressInputStories.WithContent} />
+
 > **Note:** The clear button only clears the input content/value. It does not clear error states - you must handle error state clearing separately in your component logic.
 
 #### **Hiding the Clear Button**
 
 Use `hideClearButton` to prevent the clear button from appearing.
 
-#### **Extending the Clear Behavior**
-
-Use `onClear` to extend the default clear behavior with custom logic.
+<Canvas of={AddressInputStories.WithHiddenClearButton} />
 
 ### Error State
 
 The input supports error handling through `errorMessage` which displays an error message below the input with error styling including a red border and text color.
 
+<Canvas of={AddressInputStories.WithError} />
+
 The error message will be automatically:
 
 - Connected to the input
@@ -61,6 +70,8 @@ The error message will be automatically:
 
 The input can be disabled using the `editable` prop set to `false`.
 
+<Canvas of={AddressInputStories.DisabledAddressInput} />
+
 ## Controlled vs Uncontrolled
 
 The AddressInput component supports both controlled and uncontrolled usage.
@@ -285,14 +296,14 @@ function MyComponent() {
 
 ### With Custom Styling
 
-While the component comes with predefined styles, you can extend them using NativeWind classes:
+While the component comes with predefined styles, you can extend them using the `style` prop:
 
 ```tsx
 <AddressInput
   placeholder='Enter address or ENS'
   value={address}
   onChangeText={setAddress}
-  className='max-w-md' // Control width
+  style={{ maxWidth: 320 }} // Control width
   onQrCodeClick={() => openQrScanner()}
 />
 ```
@@ -387,7 +398,7 @@ function TransactionForm() {
         onChangeText={setRecipientAddress}
         errorMessage={addressError}
         onQrCodeClick={() => openQrScanner()}
-        className='max-w-md'
+        style={{ maxWidth: 320 }}
       />
       {/* Other transaction fields */}
     </View>
@@ -430,7 +441,7 @@ function AddressForm() {
 
 ## Do's and Don'ts
 
-<div className='flex flex-col gap-24'>
+<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use controlled input pattern'

package/src/lib/Components/AddressInput/AddressInput.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { Banner } from '../Banner';
+import { useState } from 'react';
+import { View } from 'react-native';
 import { AddressInput } from './AddressInput';
+import { AddressInputProps } from './types';
 
 const meta: Meta<typeof AddressInput> = {
   component: AddressInput,
@@ -14,25 +16,156 @@ const meta: Meta<typeof AddressInput> = {
       },
     },
   },
+  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;
 type Story = StoryObj<typeof AddressInput>;
 
-export const WebPreviewWarning: Story = {
-  render: () => (
-    <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: AddressInputProps) => {
+  const [address, setAddress] = useState(args.value?.toString() ?? '');
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        minHeight: 96,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+      }}
+    >
+      <View style={{ width: '100%', maxWidth: 400 }}>
+        <AddressInput
+          {...args}
+          value={address}
+          onChangeText={setAddress}
+          onQrCodeClick={
+            args.onQrCodeClick ?? (() => alert('QR code scanner opened'))
+          }
+        />
+      </View>
+    </View>
+  );
+};
+
+export const Base: Story = {
+  render: (args) => <AddressInputStory {...args} />,
+  args: {
+    placeholder: 'Enter address or ENS',
+    prefix: 'To:',
+    editable: true,
+    hideClearButton: false,
+  },
+};
+
+export const WithContent: Story = {
+  render: (args) => <AddressInputStory {...args} />,
+  args: {
+    placeholder: 'Enter address or ENS',
+    value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
+    prefix: 'To:',
+    editable: true,
+    hideClearButton: false,
+  },
+};
+
+export const WithCustomPrefix: Story = {
+  render: (args) => <AddressInputStory {...args} />,
+  args: {
+    placeholder: 'Enter sender address',
+    prefix: 'From:',
+    editable: true,
+    hideClearButton: false,
+  },
+};
+
+const AddressInputWithoutQrStory = (args: AddressInputProps) => {
+  const [address, setAddress] = useState(args.value?.toString() ?? '');
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        minHeight: 96,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+      }}
+    >
+      <View style={{ width: '100%', maxWidth: 400 }}>
+        <AddressInput
+          {...args}
+          value={address}
+          onChangeText={setAddress}
+          onQrCodeClick={undefined}
+        />
+      </View>
+    </View>
+  );
+};
+
+export const WithoutQrCode: Story = {
+  render: (args) => <AddressInputWithoutQrStory {...args} />,
+  args: {
+    placeholder: 'Enter address or ENS',
+    prefix: 'To:',
+    editable: true,
+    hideClearButton: false,
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <AddressInputStory {...args} />,
+  args: {
+    placeholder: 'Enter address or ENS',
+    value: 'invalid-address',
+    errorMessage: 'Invalid address format',
+    prefix: 'To:',
+    editable: true,
+    hideClearButton: false,
+  },
+};
+
+export const DisabledAddressInput: Story = {
+  render: (args) => <AddressInputStory {...args} />,
+  args: {
+    placeholder: 'Enter address or ENS',
+    value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
+    prefix: 'To:',
+    editable: false,
+    hideClearButton: false,
+  },
+};
+
+export const WithHiddenClearButton: Story = {
+  render: (args) => <AddressInputStory {...args} />,
+  args: {
+    placeholder: 'Enter address or ENS',
+    value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
+    prefix: 'To:',
+    editable: true,
+    hideClearButton: true,
   },
 };