@ledgerhq/lumen-ui-rnative 0.1.7 → 0.1.9

package/dist/module/lib/Components/AmountInput/index.js.map

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

package/dist/module/lib/Components/AmountInput/types.js

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

package/dist/module/lib/Components/AmountInput/types.js.map

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

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

@@ -0,0 +1,133 @@
+"use strict";
+
+import { useState, useEffect } from 'react';
+import { StyleSheet, Image, View } from 'react-native';
+import { useCommonTranslation } from "../../../i18n/index.js";
+import { useStyleSheet } from "../../../styles/index.js";
+import { User } from "../../Symbols/index.js";
+import { Box } from "../Utility/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const fallbackSizes = {
+  sm: 16,
+  md: 24,
+  lg: 32
+};
+const useStyles = ({
+  size
+}) => {
+  return useStyleSheet(t => {
+    const sizeMap = {
+      sm: {
+        size: t.sizes.s40,
+        padding: t.spacings.s4
+      },
+      md: {
+        size: t.sizes.s48,
+        padding: t.spacings.s4
+      },
+      lg: {
+        size: t.sizes.s72,
+        padding: t.spacings.s4
+      }
+    };
+    const notificationsMap = {
+      sm: t.sizes.s10,
+      md: t.sizes.s12,
+      lg: t.sizes.s16
+    };
+    return {
+      root: {
+        position: 'relative',
+        width: sizeMap[size].size,
+        height: sizeMap[size].size,
+        borderRadius: 9999,
+        backgroundColor: t.colors.bg.muted,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: sizeMap[size].padding
+      },
+      notification: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        width: notificationsMap[size],
+        height: notificationsMap[size],
+        borderRadius: 9999,
+        backgroundColor: t.colors.bg.errorStrong,
+        zIndex: 1
+      },
+      image: {
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        borderRadius: 9999
+      }
+    };
+  }, [size]);
+};
+
+/**
+ * A circular avatar component that displays a user image or fallback icon.
+ *
+ * When the image fails to load or no src is provided, displays a User icon fallback.
+ * Supports an optional notification indicator.
+ *
+ * @see {@link https://lumen-ldls.vercel.app/?path=/docs/react-native_communication-avatar--docs Storybook}
+ *
+ * @example
+ * import { Avatar } from '@ledgerhq/lumen-ui-react';
+ *
+ * <Avatar src="https://example.com/photo.jpg" size="md" />
+ *
+ * // With notification indicator
+ * <Avatar src="https://example.com/photo.jpg" showNotification />
+ */
+export const Avatar = ({
+  lx,
+  style,
+  src,
+  alt = 'avatar',
+  size = 'md',
+  showNotification = false,
+  ref,
+  ...props
+}) => {
+  const {
+    t
+  } = useCommonTranslation();
+  const [error, setError] = useState(false);
+  const shouldFallback = !src || error;
+  const styles = useStyles({
+    size
+  });
+  const resolvedAlt = alt || t('components.avatar.defaultAlt');
+  const accessibilityLabel = showNotification ? `${resolvedAlt}, ${t('components.avatar.notificationAriaLabel')}` : resolvedAlt;
+  useEffect(() => {
+    setError(false);
+  }, [src]);
+  return /*#__PURE__*/_jsxs(Box, {
+    ref: ref,
+    lx: lx,
+    style: StyleSheet.flatten([styles.root, style]),
+    accessibilityRole: "image",
+    accessibilityLabel: accessibilityLabel,
+    ...props,
+    children: [showNotification && /*#__PURE__*/_jsx(View, {
+      style: styles.notification,
+      accessible: false
+    }), shouldFallback ? /*#__PURE__*/_jsx(User, {
+      size: fallbackSizes[size],
+      accessible: false,
+      testID: "avatar-fallback-icon"
+    }) : /*#__PURE__*/_jsx(Image, {
+      source: {
+        uri: src
+      },
+      style: styles.image,
+      accessible: false,
+      onError: () => setError(true),
+      testID: "avatar-image"
+    })]
+  });
+};
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useState","useEffect","StyleSheet","Image","View","useCommonTranslation","useStyleSheet","User","Box","jsx","_jsx","jsxs","_jsxs","fallbackSizes","sm","md","lg","useStyles","size","t","sizeMap","sizes","s40","padding","spacings","s4","s48","s72","notificationsMap","s10","s12","s16","root","position","width","height","borderRadius","backgroundColor","colors","bg","muted","alignItems","justifyContent","notification","top","right","errorStrong","zIndex","image","overflow","Avatar","lx","style","src","alt","showNotification","ref","props","error","setError","shouldFallback","styles","resolvedAlt","accessibilityLabel","flatten","accessibilityRole","children","accessible","testID","source","uri","onError"],"sourceRoot":"../../../../../src","sources":["lib/Components/Avatar/Avatar.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAC3C,SAASC,UAAU,EAAEC,KAAK,EAAEC,IAAI,QAAQ,cAAc;AACtD,SAASC,oBAAoB,QAAQ,wBAAe;AACpD,SAASC,aAAa,QAAQ,0BAAiB;AAC/C,SAASC,IAAI,QAAQ,wBAAe;AACpC,SAASC,GAAG,QAAQ,qBAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAKjC,MAAMC,aAAa,GAAG;EACpBC,EAAE,EAAE,EAAE;EACNC,EAAE,EAAE,EAAE;EACNC,EAAE,EAAE;AACN,CAAU;AAEV,MAAMC,SAAS,GAAGA,CAAC;EAAEC;AAAqB,CAAC,KAAK;EAC9C,OAAOZ,aAAa,CACjBa,CAAC,IAAK;IACL,MAAMC,OAAO,GAAG;MACdN,EAAE,EAAE;QAAEI,IAAI,EAAEC,CAAC,CAACE,KAAK,CAACC,GAAG;QAAEC,OAAO,EAAEJ,CAAC,CAACK,QAAQ,CAACC;MAAG,CAAC;MACjDV,EAAE,EAAE;QAAEG,IAAI,EAAEC,CAAC,CAACE,KAAK,CAACK,GAAG;QAAEH,OAAO,EAAEJ,CAAC,CAACK,QAAQ,CAACC;MAAG,CAAC;MACjDT,EAAE,EAAE;QAAEE,IAAI,EAAEC,CAAC,CAACE,KAAK,CAACM,GAAG;QAAEJ,OAAO,EAAEJ,CAAC,CAACK,QAAQ,CAACC;MAAG;IAClD,CAAC;IAED,MAAMG,gBAAgB,GAAG;MACvBd,EAAE,EAAEK,CAAC,CAACE,KAAK,CAACQ,GAAG;MACfd,EAAE,EAAEI,CAAC,CAACE,KAAK,CAACS,GAAG;MACfd,EAAE,EAAEG,CAAC,CAACE,KAAK,CAACU;IACd,CAAC;IAED,OAAO;MACLC,IAAI,EAAE;QACJC,QAAQ,EAAE,UAAU;QACpBC,KAAK,EAAEd,OAAO,CAACF,IAAI,CAAC,CAACA,IAAI;QACzBiB,MAAM,EAAEf,OAAO,CAACF,IAAI,CAAC,CAACA,IAAI;QAC1BkB,YAAY,EAAE,IAAI;QAClBC,eAAe,EAAElB,CAAC,CAACmB,MAAM,CAACC,EAAE,CAACC,KAAK;QAClCC,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBnB,OAAO,EAAEH,OAAO,CAACF,IAAI,CAAC,CAACK;MACzB,CAAC;MACDoB,YAAY,EAAE;QACZV,QAAQ,EAAE,UAAU;QACpBW,GAAG,EAAE,CAAC;QACNC,KAAK,EAAE,CAAC;QACRX,KAAK,EAAEN,gBAAgB,CAACV,IAAI,CAAC;QAC7BiB,MAAM,EAAEP,gBAAgB,CAACV,IAAI,CAAC;QAC9BkB,YAAY,EAAE,IAAI;QAClBC,eAAe,EAAElB,CAAC,CAACmB,MAAM,CAACC,EAAE,CAACO,WAAW;QACxCC,MAAM,EAAE;MACV,CAAC;MACDC,KAAK,EAAE;QACLd,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,MAAM;QACdc,QAAQ,EAAE,QAAQ;QAClBb,YAAY,EAAE;MAChB;IACF,CAAC;EACH,CAAC,EACD,CAAClB,IAAI,CACP,CAAC;AACH,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMgC,MAAM,GAAGA,CAAC;EACrBC,EAAE;EACFC,KAAK;EACLC,GAAG;EACHC,GAAG,GAAG,QAAQ;EACdpC,IAAI,GAAG,IAAI;EACXqC,gBAAgB,GAAG,KAAK;EACxBC,GAAG;EACH,GAAGC;AACQ,CAAC,KAAK;EACjB,MAAM;IAAEtC;EAAE,CAAC,GAAGd,oBAAoB,CAAC,CAAC;EACpC,MAAM,CAACqD,KAAK,EAAEC,QAAQ,CAAC,GAAG3D,QAAQ,CAAU,KAAK,CAAC;EAClD,MAAM4D,cAAc,GAAG,CAACP,GAAG,IAAIK,KAAK;EACpC,MAAMG,MAAM,GAAG5C,SAAS,CAAC;IAAEC;EAAK,CAAC,CAAC;EAElC,MAAM4C,WAAW,GAAGR,GAAG,IAAInC,CAAC,CAAC,8BAA8B,CAAC;EAE5D,MAAM4C,kBAAkB,GAAGR,gBAAgB,GACvC,GAAGO,WAAW,KAAK3C,CAAC,CAAC,yCAAyC,CAAC,EAAE,GACjE2C,WAAW;EAEf7D,SAAS,CAAC,MAAM;IACd0D,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC,EAAE,CAACN,GAAG,CAAC,CAAC;EAET,oBACEzC,KAAA,CAACJ,GAAG;IACFgD,GAAG,EAAEA,GAAI;IACTL,EAAE,EAAEA,EAAG;IACPC,KAAK,EAAElD,UAAU,CAAC8D,OAAO,CAAC,CAACH,MAAM,CAAC7B,IAAI,EAAEoB,KAAK,CAAC,CAAE;IAChDa,iBAAiB,EAAC,OAAO;IACzBF,kBAAkB,EAAEA,kBAAmB;IAAA,GACnCN,KAAK;IAAAS,QAAA,GAERX,gBAAgB,iBACf7C,IAAA,CAACN,IAAI;MAACgD,KAAK,EAAES,MAAM,CAAClB,YAAa;MAACwB,UAAU,EAAE;IAAM,CAAE,CACvD,EACAP,cAAc,gBACblD,IAAA,CAACH,IAAI;MACHW,IAAI,EAAEL,aAAa,CAACK,IAAI,CAAE;MAC1BiD,UAAU,EAAE,KAAM;MAClBC,MAAM,EAAC;IAAsB,CAC9B,CAAC,gBAEF1D,IAAA,CAACP,KAAK;MACJkE,MAAM,EAAE;QAAEC,GAAG,EAAEjB;MAAI,CAAE;MACrBD,KAAK,EAAES,MAAM,CAACb,KAAM;MACpBmB,UAAU,EAAE,KAAM;MAClBI,OAAO,EAAEA,CAAA,KAAMZ,QAAQ,CAAC,IAAI,CAAE;MAC9BS,MAAM,EAAC;IAAc,CACtB,CACF;EAAA,CACE,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/module/lib/Components/Avatar/Avatar.mdx

@@ -0,0 +1,321 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as AvatarStories from './Avatar.stories';
+import { Avatar } from './Avatar';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+import { Box } from '../Utility';
+
+<Meta title='Communication/Avatar' of={AvatarStories} />
+
+# 👤 Avatar
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+The Avatar component displays a circular user profile image with automatic fallback to a User icon when the image is unavailable or fails to load. It supports an optional notification indicator and three size variants. This React Native implementation ensures consistent behavior across mobile platforms while maintaining design system coherence.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10546-614&p=f&m=dev).
+
+## Anatomy
+
+<Canvas of={AvatarStories.Base} />
+
+- **Image/Fallback Icon**: The circular user image or User icon fallback displayed when image is unavailable
+- **Notification Indicator (optional)**: A red dot positioned at the top-right corner to indicate notifications
+- **Container**: Rounded full background with muted styling
+
+## Properties
+
+### Overview
+
+<Canvas of={AvatarStories.Base} />
+<Controls of={AvatarStories.Base} />
+
+### Size
+
+Avatars come in three different sizes:
+
+<Canvas of={AvatarStories.SizeShowcase} />
+
+### States
+
+The Avatar component handles two primary states automatically:
+
+- **With Image**: Displays the provided image when `src` is valid and loads successfully
+- **Fallback**: Shows a User icon when `src` is undefined or the image fails to load
+
+<Canvas of={AvatarStories.FallbackShowcase} />
+
+### Notification Indicator
+
+An optional notification indicator can be displayed to show status or alerts:
+
+- **showNotification**: Boolean prop to toggle the notification dot (default: false)
+
+<Canvas of={AvatarStories.NotificationShowcase} />
+
+### As Interactive Trigger
+
+Avatars are commonly used as interactive triggers for navigation or actions:
+
+<Canvas of={AvatarStories.InteractiveShowcase} />
+
+## Accessibility
+
+To be implemented:
+
+- **Color contrast**
+- **Text zoom support**
+- **Semantic alt text for images**
+- **Screen reader announcements for notification state**
+- **Touch target sizing** (minimum 44px)
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+```tsx
+import { Avatar } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return <Avatar src="https://example.com/photo.jpg" size="md" />;
+}
+```
+
+### Fallback Handling
+
+The Avatar component automatically displays a fallback User icon when the image source is undefined or fails to load:
+
+```tsx
+import { Avatar } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  // Fallback will be shown automatically
+  return <Avatar size="md" alt="User profile" />;
+}
+```
+
+### With Notification
+
+Display a notification indicator to show status or alerts:
+
+```tsx
+import { Avatar } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  const hasNotifications = true;
+  
+  return (
+    <Avatar 
+      src="https://example.com/photo.jpg" 
+      showNotification={hasNotifications}
+      size="md" 
+      alt="User profile"
+    />
+  );
+}
+```
+
+### Different Sizes
+
+Choose the appropriate size based on your layout needs:
+
+```tsx
+import { Avatar, Box } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
+      <Avatar src="https://example.com/photo.jpg" size="sm" />
+      <Avatar src="https://example.com/photo.jpg" size="md" />
+      <Avatar src="https://example.com/photo.jpg" size="lg" />
+    </Box>
+  );
+}
+```
+
+### As Interactive Trigger
+
+Avatars are commonly used as interactive triggers for navigation or actions. Wrap the Avatar in a `Pressable` component:
+
+```tsx
+import { Avatar } from '@ledgerhq/lumen-ui-rnative';
+import { Pressable, Linking } from 'react-native';
+
+function UserProfile() {
+  const handlePress = () => {
+    // Navigate or perform action
+    console.log('Avatar pressed');
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={({ pressed }) => ({
+        borderRadius: 9999,
+        opacity: pressed ? 0.7 : 1,
+        backgroundColor: pressed ? 'rgba(0, 0, 0, 0.05)' : 'transparent',
+      })}
+    >
+      <Avatar 
+        src="https://example.com/photo.jpg"
+        size="md" 
+        alt="User menu" 
+        showNotification 
+      />
+    </Pressable>
+  );
+}
+```
+
+**Key points:**
+- Wrap Avatar in a `Pressable` component for touch interactions
+- Use `borderRadius: 9999` to maintain circular touch area
+- Add opacity changes for visual feedback on press
+- Provide appropriate `alt` text for accessibility
+
+### Custom Styling
+
+While the component comes with predefined styles, you can extend them using the `lx` prop for token-based styling:
+
+```tsx
+<Avatar 
+  src="https://example.com/photo.jpg" 
+  size="md" 
+  lx={{ marginRight: 's8' }} // Layout positioning with design tokens
+/>
+```
+
+You can also use the `style` prop for escape-hatch styling when needed:
+
+```tsx
+<Avatar 
+  src="https://example.com/photo.jpg" 
+  size="md" 
+  style={{ marginRight: 8 }} // Raw style values
+/>
+```
+
+### Complete Example
+
+Here's a comprehensive example showing all Avatar features in a user profile context:
+
+```tsx
+import { Avatar, Box, Text } from '@ledgerhq/lumen-ui-rnative';
+import { Pressable } from 'react-native';
+import { useState } from 'react';
+
+function UserProfileHeader() {
+  const [user, setUser] = useState({
+    name: 'John Doe',
+    avatar: 'https://example.com/photo.jpg',
+    hasNotifications: true,
+  });
+
+  const handleProfilePress = () => {
+    console.log('Opening user menu...');
+    // Navigate to profile or show menu
+  };
+
+  return (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12', padding: 's16' }}>
+      <Pressable
+        onPress={handleProfilePress}
+        style={({ pressed }) => ({
+          borderRadius: 9999,
+          opacity: pressed ? 0.7 : 1,
+          backgroundColor: pressed ? 'rgba(0, 0, 0, 0.05)' : 'transparent',
+        })}
+      >
+        <Avatar
+          src={user.avatar}
+          size="md"
+          showNotification={user.hasNotifications}
+          alt={`${user.name} profile picture`}
+        />
+      </Pressable>
+      <Box lx={{ flexDirection: 'column' }}>
+        <Text>{user.name}</Text>
+        {user.hasNotifications && (
+          <Text style={{ fontSize: 12, color: '#666' }}>
+            You have new notifications
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+}
+```
+
+## Do's and Don'ts
+
+The following guidelines ensure consistent usage of the Avatar component and maintain design system principles.
+
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Provide descriptive alt text'
+      description='Use meaningful alt text for better accessibility and screen reader support'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Avatar 
+  src="https://example.com/photo.jpg" 
+  alt="John Doe profile picture" 
+  size="md"
+/>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't omit alt text"
+      description='Missing alt text reduces accessibility for screen reader users'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Avatar 
+  src="https://example.com/photo.jpg" 
+  size="md"
+/>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <CommonRulesDoAndDont />
+</Box>
+
+## Platform Considerations
+
+### iOS Specific
+
+- Avatars automatically adapt to iOS design guidelines
+- Touch feedback uses appropriate opacity transitions
+- Respects iOS accessibility settings like reduced motion
+
+### Android Specific
+
+- Material Design touch feedback is supported through React Native's Pressable
+- Handles Android back button interactions appropriately
+- Respects Android accessibility services
+
+### Cross-Platform
+
+- Consistent visual appearance across platforms
+- Platform-appropriate touch feedback via Pressable
+- Unified API regardless of platform
+- Images load using React Native's Image component with cross-platform optimization
+
+</Tab>
+</CustomTabs>

package/dist/module/lib/Components/Avatar/Avatar.stories.js

@@ -0,0 +1,154 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, Pressable, Linking } from 'react-native';
+import { Box } from "../Utility/index.js";
+import { Avatar } from "./Avatar.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: Avatar,
+  title: 'Communication/Avatar',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code'
+      }
+    }
+  }
+};
+export default meta;
+const exampleSrc = 'https://plus.unsplash.com/premium_photo-1689551670902-19b441a6afde?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
+export const Base = {
+  args: {
+    src: exampleSrc,
+    alt: 'avatar',
+    size: 'md',
+    showNotification: false
+  },
+  render: args => /*#__PURE__*/_jsx(Avatar, {
+    ...args
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Avatar src="https://example.com" size="md" alt="avatar" showNotification={false} />`
+      }
+    }
+  }
+};
+export const SizeShowcase = {
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      alignItems: 'stretch',
+      flexDirection: 'row',
+      gap: 's16'
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        alignItems: 'center',
+        justifyContent: 'flex-end'
+      },
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        src: exampleSrc,
+        alt: "avatar",
+        size: "sm",
+        showNotification: false
+      }), /*#__PURE__*/_jsx(Text, {
+        style: {
+          marginTop: 4
+        },
+        children: "sm"
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        alignItems: 'center',
+        justifyContent: 'flex-end'
+      },
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        src: exampleSrc,
+        alt: "avatar",
+        size: "md",
+        showNotification: false
+      }), /*#__PURE__*/_jsx(Text, {
+        style: {
+          marginTop: 4
+        },
+        children: "md"
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        alignItems: 'center',
+        justifyContent: 'flex-end'
+      },
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        src: exampleSrc,
+        alt: "avatar",
+        size: "lg",
+        showNotification: false
+      }), /*#__PURE__*/_jsx(Text, {
+        style: {
+          marginTop: 4
+        },
+        children: "lg"
+      })]
+    })]
+  })
+};
+export const FallbackShowcase = {
+  args: {
+    src: 'https://brokenLink.random',
+    size: 'md',
+    alt: 'Fallback example',
+    showNotification: false
+  },
+  render: args => /*#__PURE__*/_jsx(Avatar, {
+    ...args
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Avatar src="https://brokenLink.random" size="md" alt="Fallback example" showNotification={false} />`
+      }
+    }
+  }
+};
+export const NotificationShowcase = {
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'row',
+      gap: 's16'
+    },
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      src: exampleSrc,
+      alt: "avatar",
+      size: "md",
+      showNotification: false
+    }), /*#__PURE__*/_jsx(Avatar, {
+      src: exampleSrc,
+      alt: "avatar",
+      size: "md",
+      showNotification: true
+    })]
+  })
+};
+const onPressRedirect = () => Linking.openURL('https://shop.ledger.com/pages/ledger-nano-gen5');
+export const InteractiveShowcase = {
+  render: () => /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPressRedirect,
+    style: ({
+      pressed
+    }) => ({
+      borderRadius: 9999,
+      opacity: pressed ? 0.7 : 1,
+      backgroundColor: pressed ? 'rgba(0, 0, 0, 0.05)' : 'transparent'
+    }),
+    children: /*#__PURE__*/_jsx(Avatar, {
+      src: exampleSrc,
+      size: "md",
+      showNotification: true
+    })
+  })
+};
+//# sourceMappingURL=Avatar.stories.js.map

package/dist/module/lib/Components/Avatar/Avatar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","Pressable","Linking","Box","Avatar","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","docs","source","language","format","type","exampleSrc","Base","args","src","alt","size","showNotification","render","code","SizeShowcase","lx","alignItems","flexDirection","gap","children","style","justifyContent","marginTop","FallbackShowcase","NotificationShowcase","onPressRedirect","openURL","InteractiveShowcase","onPress","pressed","borderRadius","opacity","backgroundColor"],"sourceRoot":"../../../../../src","sources":["lib/Components/Avatar/Avatar.stories.tsx"],"mappings":"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","ignoreList":[]}