@ledgerhq/lumen-ui-rnative 0.1.7 → 0.1.9

package/dist/module/lib/Animations/Pulse/Pulse.mdx

@@ -0,0 +1,86 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as PulseStories from './Pulse.stories';
+import { Pulse } from './Pulse';
+import {
+  CustomTabs,
+  Tab,
+} from '../../../../.storybook/components';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Animations/Pulse' of={PulseStories} />
+
+# ⚡ Pulse
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+The Pulse animation creates a smooth opacity fade in/out effect, commonly used for loading states and skeleton screens. It provides visual feedback that content is being processed or loaded.
+
+## Anatomy
+
+<Canvas of={PulseStories.Base} />
+
+- **Children**: The content to animate with opacity changes
+- **Duration**: Complete cycle duration (fade out + fade in)
+- **Animate**: Controls whether the animation is active
+
+## Properties
+
+### Overview
+
+<Canvas of={PulseStories.Base} />
+<Controls of={PulseStories.Base} />
+
+### Duration
+
+The duration prop controls how long a complete pulse cycle takes (fade out to fade in). Shorter durations create faster, more noticeable pulses, while longer durations provide subtle, gentle feedback.
+
+<Canvas of={PulseStories.DurationShowcase} />
+
+### Practical Usage
+
+The Pulse animation is commonly used with components like AmountDisplay to indicate that data is being fetched or updated.
+
+<Canvas of={PulseStories.WithAmountDisplay} />
+
+## Accessibility
+
+- Does not rely on animation alone to convey information
+- Maintains readable opacity range (0.35 to 1.0)
+
+</Tab>
+<Tab label="Implementation">
+
+## Installation
+
+```bash
+npm install @ledgerhq/lumen-ui-rnative
+```
+
+> **Note**: `@ledgerhq/lumen-design-core` and other peer dependencies (`react`, `react-native`, etc.) are required. See our Setup Guide for complete installation.
+
+## Basic Usage
+
+```tsx
+import { Pulse } from '@ledgerhq/lumen-ui-rnative';
+import { View } from 'react-native';
+
+function LoadingCard() {
+  return (
+    <Pulse animate={true}>
+      <View style={{ width: 200, height: 100, backgroundColor: '#E0E0E0' }} />
+    </Pulse>
+  );
+}
+```
+
+## Performance Considerations
+
+- The Pulse component uses `useNativeDriver` for optimal performance on native platforms
+- Animation cleanup is handled automatically on unmount
+- Consider using different duration values for multiple skeleton elements to create a more natural loading pattern
+
+</Tab>
+</CustomTabs>

package/dist/module/lib/Animations/Pulse/Pulse.stories.js

@@ -0,0 +1,139 @@
+"use strict";
+
+import { View } from 'react-native';
+import { AmountDisplay } from "../../Components/AmountDisplay/index.js";
+import { Box, Text } from "../../Components/Utility/index.js";
+import { Pulse } from "./Pulse.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const usdFormatter = value => {
+  const [integerPart, decimalPart] = value.toFixed(2).split(/\.|,/);
+  return {
+    integerPart,
+    decimalPart,
+    currencyText: '$',
+    decimalSeparator: '.',
+    currencyPosition: 'start'
+  };
+};
+const meta = {
+  title: 'Animations/Pulse',
+  component: Pulse,
+  parameters: {
+    layout: 'centered'
+  }
+};
+export default meta;
+export const Base = {
+  args: {
+    timing: {
+      duration: 1000,
+      easing: 'linear'
+    },
+    animate: true,
+    children: /*#__PURE__*/_jsx(Box, {
+      lx: {
+        width: 's48',
+        height: 's48',
+        backgroundColor: 'accent'
+      }
+    })
+  }
+};
+export const DurationShowcase = {
+  args: {
+    timing: {
+      duration: 1000,
+      easing: 'linear'
+    },
+    animate: true,
+    children: /*#__PURE__*/_jsx(Box, {
+      lx: {
+        width: 's48',
+        height: 's48',
+        backgroundColor: 'accent'
+      }
+    })
+  },
+  render: args => /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      gap: 24,
+      alignItems: 'center'
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        alignItems: 'center',
+        gap: 8
+      },
+      children: [/*#__PURE__*/_jsx(Pulse, {
+        timing: {
+          ...args.timing,
+          duration: 700
+        },
+        animate: true,
+        children: args.children
+      }), /*#__PURE__*/_jsx(Text, {
+        typography: "body4",
+        lx: {
+          color: 'muted'
+        },
+        children: "700ms"
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        alignItems: 'center',
+        gap: 8
+      },
+      children: [/*#__PURE__*/_jsx(Pulse, {
+        timing: {
+          ...args.timing,
+          duration: 1000
+        },
+        animate: true,
+        children: args.children
+      }), /*#__PURE__*/_jsx(Text, {
+        typography: "body4",
+        lx: {
+          color: 'muted'
+        },
+        children: "1000ms"
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        alignItems: 'center',
+        gap: 8
+      },
+      children: [/*#__PURE__*/_jsx(Pulse, {
+        timing: {
+          ...args.timing,
+          duration: 2000
+        },
+        animate: true,
+        children: args.children
+      }), /*#__PURE__*/_jsx(Text, {
+        typography: "body4",
+        lx: {
+          color: 'muted'
+        },
+        children: "2000ms"
+      })]
+    })]
+  })
+};
+export const WithAmountDisplay = {
+  render: () => {
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 16
+      },
+      children: /*#__PURE__*/_jsx(AmountDisplay, {
+        formatter: usdFormatter,
+        value: 1234.56,
+        loading: true
+      })
+    });
+  }
+};
+//# sourceMappingURL=Pulse.stories.js.map

package/dist/module/lib/Animations/Pulse/Pulse.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","AmountDisplay","Box","Text","Pulse","jsx","_jsx","jsxs","_jsxs","usdFormatter","value","integerPart","decimalPart","toFixed","split","currencyText","decimalSeparator","currencyPosition","meta","title","component","parameters","layout","Base","args","timing","duration","easing","animate","children","lx","width","height","backgroundColor","DurationShowcase","render","style","flexDirection","gap","alignItems","typography","color","WithAmountDisplay","formatter","loading"],"sourceRoot":"../../../../../src","sources":["lib/Animations/Pulse/Pulse.stories.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Animations/Pulse/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./Pulse.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/module/lib/Animations/Pulse/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Animations/Pulse/index.ts"],"mappings":";;AAAA,cAAc,YAAS;AACvB,cAAc,YAAS","ignoreList":[]}

package/dist/module/lib/Animations/Pulse/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/lib/Animations/Pulse/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Animations/Pulse/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/lib/Animations/Spin/Spin.js

@@ -0,0 +1,57 @@
+"use strict";
+
+import { memo, useEffect } from 'react';
+import Animated, { cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import { useTimingConfig } from "../useTimingConfig.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TIMING_DEFAULTS = {
+  duration: 1000,
+  easing: 'linear'
+};
+const _worklet_12509649909761_init_data = {
+  code: "function SpinTsx1(){const{sv}=this.__closure;return{transform:[{rotate:sv.value*360+\"deg\"}]};}",
+  location: "/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Animations/Spin/Spin.tsx",
+  sourceMap: "{\"version\":3,\"names\":[\"SpinTsx1\",\"sv\",\"__closure\",\"transform\",\"rotate\",\"value\"],\"sources\":[\"/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Animations/Spin/Spin.tsx\"],\"mappings\":\"AA+BI,SAAAA,SAAA,QAAAC,EAAA,OAAAC,SAAA,OAAO,CACLC,SAAS,CAAE,CAAC,CAAEC,MAAM,CAAKH,EAAE,CAACI,KAAK,CAAG,GAAG,MAAM,CAAC,CAChD,CAAC\",\"ignoreList\":[]}"
+};
+export const Spin = /*#__PURE__*/memo(({
+  children,
+  timing
+}) => {
+  const sv = useSharedValue(0);
+  const timingConfig = useTimingConfig({
+    duration: timing?.duration ?? TIMING_DEFAULTS.duration,
+    easing: timing?.easing ?? TIMING_DEFAULTS.easing
+  });
+  useEffect(() => {
+    sv.value = withRepeat(withTiming(1, timingConfig), -1);
+    return () => cancelAnimation(sv);
+  }, [sv, timingConfig]);
+  const animatedStyle = useAnimatedStyle(function SpinTsx1Factory({
+    _worklet_12509649909761_init_data,
+    sv
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const SpinTsx1 = () => ({
+      transform: [{
+        rotate: `${sv.value * 360}deg`
+      }]
+    });
+    SpinTsx1.__closure = {
+      sv
+    };
+    SpinTsx1.__workletHash = 12509649909761;
+    SpinTsx1.__pluginVersion = "0.6.1";
+    SpinTsx1.__initData = _worklet_12509649909761_init_data;
+    SpinTsx1.__stackDetails = _e;
+    return SpinTsx1;
+  }({
+    _worklet_12509649909761_init_data,
+    sv
+  }), [sv]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: animatedStyle,
+    children: children
+  });
+});
+Spin.displayName = 'Spin';
+//# sourceMappingURL=Spin.js.map

package/dist/module/lib/Animations/Spin/Spin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","useEffect","Animated","cancelAnimation","useAnimatedStyle","useSharedValue","withRepeat","withTiming","useTimingConfig","jsx","_jsx","TIMING_DEFAULTS","duration","easing","_worklet_12509649909761_init_data","code","location","sourceMap","Spin","children","timing","sv","timingConfig","value","animatedStyle","SpinTsx1Factory","_e","global","Error","SpinTsx1","transform","rotate","__closure","__workletHash","__pluginVersion","__initData","__stackDetails","View","style","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Animations/Spin/Spin.tsx"],"mappings":";;AAAA,SAASA,IAAI,EAAEC,SAAS,QAAQ,OAAO;AACvC,OAAOC,QAAQ,IACbC,eAAe,EACfC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,UAAU,QACL,yBAAyB;AAEhC,SAASC,eAAe,QAAQ,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGrD,MAAMC,eAA6B,GAAG;EACpCC,QAAQ,EAAE,IAAI;EACdC,MAAM,EAAE;AACV,CAAC;AAAC,MAAAC,iCAAA;EAAAC,IAAA;EAAAC,QAAA;EAAAC,SAAA;AAAA;AACF,OAAO,MAAMC,IAAI,gBAAGlB,IAAI,CAAC,CAAC;EAAEmB,QAAQ;EAAEC;AAAkB,CAAC,KAAK;EAC5D,MAAMC,EAAE,GAAGhB,cAAc,CAAS,CAAC,CAAC;EAEpC,MAAMiB,YAAY,GAAGd,eAAe,CAAC;IACnCI,QAAQ,EAAEQ,MAAM,EAAER,QAAQ,IAAID,eAAe,CAACC,QAAQ;IACtDC,MAAM,EAAEO,MAAM,EAAEP,MAAM,IAAIF,eAAe,CAACE;EAC5C,CAAC,CAAC;EAEFZ,SAAS,CAAC,MAAM;IACdoB,EAAE,CAACE,KAAK,GAAGjB,UAAU,CAACC,UAAU,CAAC,CAAC,EAAEe,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;IAEtD,OAAO,MAAMnB,eAAe,CAACkB,EAAE,CAAC;EAClC,CAAC,EAAE,CAACA,EAAE,EAAEC,YAAY,CAAC,CAAC;EAEtB,MAAME,aAAa,GAAGpB,gBAAgB,CACpC,SAAAqB,gBAAA;IAAAX,iCAAA;IAC2BO;EAAE;IAAA,MAAAK,EAAA,QAAAC,MAAA,CAAAC,KAAA;IAAA,MAAAC,QAAA,GAD7BA,CAAA,MAAO;MACLC,SAAS,EAAE,CAAC;QAAEC,MAAM,EAAE,GAAGV,EAAE,CAACE,KAAK,GAAG,GAAG;MAAM,CAAC;IAChD,CAAC,CAAC;IAAAM,QAAA,CAAAG,SAAA;MADyBX;IAAE;IAAAQ,QAAA,CAAAI,aAAA;IAAAJ,QAAA,CAAAK,eAAA;IAAAL,QAAA,CAAAM,UAAA,GAAArB,iCAAA;IAAAe,QAAA,CAAAO,cAAA,GAAAV,EAAA;IAAA,OAAAG,QAAA;EAAA,CAD7B;IAAAf,iCAAA;IAC2BO;EAAE,IAE7B,CAACA,EAAE,CACL,CAAC;EAED,oBAAOX,IAAA,CAACR,QAAQ,CAACmC,IAAI;IAACC,KAAK,EAAEd,aAAc;IAAAL,QAAA,EAAEA;EAAQ,CAAgB,CAAC;AACxE,CAAC,CAAC;AACFD,IAAI,CAACqB,WAAW,GAAG,MAAM","ignoreList":[]}

package/dist/module/lib/Animations/Spin/Spin.mdx

@@ -0,0 +1,85 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SpinStories from './Spin.stories';
+import { Spin } from './Spin';
+import {
+  CustomTabs,
+  Tab,
+} from '../../../../.storybook/components';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Animations/Spin' of={SpinStories} />
+
+# 🔄 Spin
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+The Spin animation creates a continuous rotation effect, commonly used for loading indicators and progress spinners. It provides visual feedback that a process is ongoing or content is being loaded.
+
+## Anatomy
+
+<Canvas of={SpinStories.Base} />
+
+- **Children**: The content to rotate continuously
+- **Duration**: Time for one complete 360° rotation
+
+## Properties
+
+### Overview
+
+<Canvas of={SpinStories.Base} />
+<Controls of={SpinStories.Base} />
+
+### Duration
+
+The duration prop controls how long one complete rotation takes. Shorter durations create faster spins, while longer durations provide slower, more subtle rotation.
+
+<Canvas of={SpinStories.DurationShowcase} />
+
+### Practical Usage
+
+The Spin animation is commonly used with the Spinner component to create loading indicators throughout the application.
+
+<Canvas of={SpinStories.WithSpinner} />
+
+## Accessibility
+
+- Does not rely on animation alone to convey information
+- Should be paired with appropriate loading labels for screen readers
+
+</Tab>
+<Tab label="Implementation">
+
+## Installation
+
+```bash
+npm install @ledgerhq/lumen-ui-rnative
+```
+
+> **Note**: `@ledgerhq/lumen-design-core` and other peer dependencies (`react`, `react-native`, etc.) are required. See our Setup Guide for complete installation.
+
+## Basic Usage
+
+```tsx
+import { Spin } from '@ledgerhq/lumen-ui-rnative';
+import { View } from 'react-native';
+
+function LoadingIcon() {
+  return (
+    <Spin>
+      <View style={{ width: 40, height: 40, backgroundColor: '#007AFF' }} />
+    </Spin>
+  );
+}
+```
+
+## Performance Considerations
+
+- The Spin component uses `useNativeDriver` for optimal performance on native platforms
+- Rotation animation runs continuously until component unmounts
+- Animation cleanup is handled automatically on unmount
+
+</Tab>
+</CustomTabs>

package/dist/module/lib/Animations/Spin/Spin.stories.js

@@ -0,0 +1,122 @@
+"use strict";
+
+import { View } from 'react-native';
+import { Spinner } from "../../Components/Spinner/index.js";
+import { Box, Text } from "../../Components/Utility/index.js";
+import { Spin } from "./Spin.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  title: 'Animations/Spin',
+  component: Spin,
+  parameters: {
+    layout: 'centered'
+  }
+};
+export default meta;
+export const Base = {
+  args: {
+    timing: {
+      duration: 1000,
+      easing: 'linear'
+    },
+    children: /*#__PURE__*/_jsx(Box, {
+      lx: {
+        width: 's48',
+        height: 's48',
+        backgroundColor: 'accent'
+      }
+    })
+  }
+};
+export const DurationShowcase = {
+  args: {
+    timing: {
+      duration: 1000,
+      easing: 'linear'
+    },
+    children: /*#__PURE__*/_jsx(Box, {
+      lx: {
+        width: 's48',
+        height: 's48',
+        backgroundColor: 'accent'
+      }
+    })
+  },
+  render: args => /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      gap: 24,
+      alignItems: 'center'
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        alignItems: 'center',
+        gap: 8
+      },
+      children: [/*#__PURE__*/_jsx(Spin, {
+        timing: {
+          ...args.timing,
+          duration: 500
+        },
+        children: args.children
+      }), /*#__PURE__*/_jsx(Text, {
+        typography: "body4",
+        lx: {
+          color: 'muted'
+        },
+        children: "500ms"
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        alignItems: 'center',
+        gap: 8
+      },
+      children: [/*#__PURE__*/_jsx(Spin, {
+        timing: {
+          ...args.timing,
+          duration: 1000
+        },
+        children: args.children
+      }), /*#__PURE__*/_jsx(Text, {
+        typography: "body4",
+        lx: {
+          color: 'muted'
+        },
+        children: "1000ms"
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        alignItems: 'center',
+        gap: 8
+      },
+      children: [/*#__PURE__*/_jsx(Spin, {
+        timing: {
+          ...args.timing,
+          duration: 2000
+        },
+        children: args.children
+      }), /*#__PURE__*/_jsx(Text, {
+        typography: "body4",
+        lx: {
+          color: 'muted'
+        },
+        children: "2000ms"
+      })]
+    })]
+  })
+};
+export const WithSpinner = {
+  render: () => {
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 16
+      },
+      children: /*#__PURE__*/_jsx(Spinner, {
+        size: 40
+      })
+    });
+  }
+};
+//# sourceMappingURL=Spin.stories.js.map

package/dist/module/lib/Animations/Spin/Spin.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Spinner","Box","Text","Spin","jsx","_jsx","jsxs","_jsxs","meta","title","component","parameters","layout","Base","args","timing","duration","easing","children","lx","width","height","backgroundColor","DurationShowcase","render","style","flexDirection","gap","alignItems","typography","color","WithSpinner","size"],"sourceRoot":"../../../../../src","sources":["lib/Animations/Spin/Spin.stories.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Animations/Spin/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./Spin.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/module/lib/Animations/Spin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Animations/Spin/index.ts"],"mappings":";;AAAA,cAAc,WAAQ;AACtB,cAAc,YAAS","ignoreList":[]}

package/dist/module/lib/Animations/Spin/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/lib/Animations/Spin/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Animations/Spin/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/lib/Animations/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export * from "./Spin/index.js";
+export * from "./Pulse/index.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/module/lib/Animations/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["lib/Animations/index.ts"],"mappings":";;AAAA,cAAc,iBAAQ;AACtB,cAAc,kBAAS;AACvB,cAAc,YAAS","ignoreList":[]}

package/dist/module/lib/Animations/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/lib/Animations/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["lib/Animations/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/lib/Animations/useTimingConfig.js

@@ -0,0 +1,18 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { Easing } from 'react-native-reanimated';
+import { useTheme } from "../../styles/index.js";
+export const useTimingConfig = ({
+  duration,
+  easing
+}) => {
+  const {
+    theme
+  } = useTheme();
+  return useMemo(() => ({
+    duration: theme.motion.durations[duration],
+    easing: Easing.bezier(...theme.motion.easings[easing])
+  }), [duration, easing, theme]);
+};
+//# sourceMappingURL=useTimingConfig.js.map

package/dist/module/lib/Animations/useTimingConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","Easing","useTheme","useTimingConfig","duration","easing","theme","motion","durations","bezier","easings"],"sourceRoot":"../../../../src","sources":["lib/Animations/useTimingConfig.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,QAAQ,QAAQ,uBAAc;AAGvC,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAC9BC,QAAQ;EACRC;AACY,CAAC,KAAmB;EAChC,MAAM;IAAEC;EAAM,CAAC,GAAGJ,QAAQ,CAAC,CAAC;EAE5B,OAAOF,OAAO,CACZ,OAAO;IACLI,QAAQ,EAAEE,KAAK,CAACC,MAAM,CAACC,SAAS,CAACJ,QAAQ,CAAC;IAC1CC,MAAM,EAAEJ,MAAM,CAACQ,MAAM,CAAC,GAAGH,KAAK,CAACC,MAAM,CAACG,OAAO,CAACL,MAAM,CAAC;EACvD,CAAC,CAAC,EACF,CAACD,QAAQ,EAAEC,MAAM,EAAEC,KAAK,CAC1B,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/module/lib/Components/AddressInput/AddressInput.js

@@ -0,0 +1,52 @@
+"use strict";
+
+import { Text } from 'react-native';
+import { useCommonTranslation } from "../../../i18n/index.js";
+import { useStyleSheet } from "../../../styles/index.js";
+import { QrCode } from "../../Symbols/index.js";
+import { BaseInput } from "../BaseInput/index.js";
+import { InteractiveIcon } from "../InteractiveIcon/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const AddressInput = ({
+  prefix = 'To:',
+  suffix,
+  onQrCodeClick,
+  ref,
+  ...props
+}) => {
+  const {
+    t
+  } = useCommonTranslation();
+  const styles = useStyles();
+  const actualPrefix = /*#__PURE__*/_jsx(Text, {
+    accessible: false,
+    style: styles.prefix,
+    children: prefix
+  });
+  const actualSuffix = suffix || onQrCodeClick && /*#__PURE__*/_jsx(InteractiveIcon, {
+    iconType: "stroked",
+    onPress: onQrCodeClick,
+    accessibilityLabel: t('components.addressInput.qrCodeAriaLabel'),
+    children: /*#__PURE__*/_jsx(QrCode, {
+      size: 20
+    })
+  });
+  return /*#__PURE__*/_jsx(BaseInput, {
+    ref: ref,
+    prefix: actualPrefix,
+    suffix: actualSuffix,
+    ...props
+  });
+};
+const useStyles = () => {
+  return useStyleSheet(t => {
+    return {
+      prefix: {
+        ...t.typographies.body1,
+        color: t.colors.text.base
+      }
+    };
+  }, []);
+};
+AddressInput.displayName = 'AddressInput';
+//# sourceMappingURL=AddressInput.js.map

package/dist/module/lib/Components/AddressInput/AddressInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text","useCommonTranslation","useStyleSheet","QrCode","BaseInput","InteractiveIcon","jsx","_jsx","AddressInput","prefix","suffix","onQrCodeClick","ref","props","t","styles","useStyles","actualPrefix","accessible","style","children","actualSuffix","iconType","onPress","accessibilityLabel","size","typographies","body1","color","colors","text","base","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/AddressInput/AddressInput.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AACnC,SAASC,oBAAoB,QAAQ,wBAAe;AACpD,SAASC,aAAa,QAAQ,0BAAiB;AAC/C,SAASC,MAAM,QAAQ,wBAAe;AACtC,SAASC,SAAS,QAAQ,uBAAc;AACxC,SAASC,eAAe,QAAQ,6BAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGrD,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAC3BC,MAAM,GAAG,KAAK;EACdC,MAAM;EACNC,aAAa;EACbC,GAAG;EACH,GAAGC;AACc,CAAC,KAAK;EACvB,MAAM;IAAEC;EAAE,CAAC,GAAGb,oBAAoB,CAAC,CAAC;EACpC,MAAMc,MAAM,GAAGC,SAAS,CAAC,CAAC;EAE1B,MAAMC,YAAY,gBAChBV,IAAA,CAACP,IAAI;IAACkB,UAAU,EAAE,KAAM;IAACC,KAAK,EAAEJ,MAAM,CAACN,MAAO;IAAAW,QAAA,EAC3CX;EAAM,CACH,CACP;EAED,MAAMY,YAAY,GAChBX,MAAM,IACLC,aAAa,iBACZJ,IAAA,CAACF,eAAe;IACdiB,QAAQ,EAAC,SAAS;IAClBC,OAAO,EAAEZ,aAAc;IACvBa,kBAAkB,EAAEV,CAAC,CAAC,yCAAyC,CAAE;IAAAM,QAAA,eAEjEb,IAAA,CAACJ,MAAM;MAACsB,IAAI,EAAE;IAAG,CAAE;EAAC,CACL,CACjB;EAEJ,oBACElB,IAAA,CAACH,SAAS;IACRQ,GAAG,EAAEA,GAAI;IACTH,MAAM,EAAEQ,YAAa;IACrBP,MAAM,EAAEW,YAAa;IAAA,GACjBR;EAAK,CACV,CAAC;AAEN,CAAC;AAED,MAAMG,SAAS,GAAGA,CAAA,KAAM;EACtB,OAAOd,aAAa,CAAEY,CAAC,IAAK;IAC1B,OAAO;MACLL,MAAM,EAAE;QACN,GAAGK,CAAC,CAACY,YAAY,CAACC,KAAK;QACvBC,KAAK,EAAEd,CAAC,CAACe,MAAM,CAACC,IAAI,CAACC;MACvB;IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;AACR,CAAC;AAEDvB,YAAY,CAACwB,WAAW,GAAG,cAAc","ignoreList":[]}