@ledgerhq/lumen-ui-rnative 0.0.67 → 0.0.69

package/.storybook/docs/getting-started/setup.mdx

@@ -93,6 +93,18 @@ const ThemeToggle = () => {
 ```
 
 
+## (Optional) Setup AI Assistant
+
+For better AI assistance (Cursor, Claude, VS Code Copilot, etc.), reference the included rules.
+
+**For Cursor**, add to your `.cursorrules`:
+
+```
+@node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md
+```
+
+[Learn more about AI rules →](https://www.npmjs.com/package/@ledgerhq/lumen-ui-rnative#-ai-assistant-setup)
+
 ## Internationalization
 
 The ThemeProvider also manages the app’s locale using React Context.  

package/ai-rules/README.md

@@ -0,0 +1,98 @@
+# Lumen AI Rules for Consumers
+
+AI assistant rules to help you use `@ledgerhq/lumen-ui-rnative` correctly in your projects.
+
+## What These Rules Do
+
+These rules help AI assistants:
+
+✅ **Correct imports** - Suggest proper import paths (e.g., `/symbols` for icons)  
+✅ **Design tokens** - Use Lumen tokens via the `lx` style system  
+✅ **Component catalog** - Know which React Native components are available  
+✅ **Style system** - Use the `lx` prop with type-safe design tokens  
+✅ **Dark mode** - Understand automatic theme support
+
+## Usage by AI Tool
+
+### Cursor
+
+Add to your project's `.cursorrules` file:
+
+```
+@node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md
+```
+
+Or create `.cursor/rules/lumen-rnative.mdc`:
+
+```markdown
+---
+description: Lumen UI React Native design system rules
+globs:
+alwaysApply: true
+---
+
+@node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md
+```
+
+### Claude / Claude Code
+
+Reference the rules file in your conversation:
+
+```
+Use the design system rules from: node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md
+```
+
+Or copy the content from `node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md` into your custom instructions.
+
+### VS Code / GitHub Copilot
+
+Add to your workspace settings (`.vscode/settings.json`):
+
+```json
+{
+  "github.copilot.advanced": {
+    "contextFiles": ["node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md"]
+  }
+}
+```
+
+### WebStorm / JetBrains AI
+
+Add the file `node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md` to your AI Assistant settings under "Additional Context".
+
+### Manual Setup
+
+Copy the rules from `node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md` into your preferred AI assistant's configuration.
+
+## Example Results
+
+With these rules, AI assistants will suggest:
+
+```tsx
+// ❌ Without rules
+import { ArrowRight } from '@ledgerhq/lumen-ui-rnative';
+<View style={{ backgroundColor: '#f5f5f5', padding: 16 }}>
+  <Text style={{ color: '#666', fontWeight: 'bold' }}>Text</Text>
+</View>;
+
+// ✅ With rules
+import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+<Box lx={{ backgroundColor: 'muted', padding: 16 }}>
+  <Text lx={{ color: 'muted', fontSize: 'heading-3' }}>Text</Text>
+</Box>;
+```
+
+## Auto-Sync Benefits
+
+By referencing the file from node_modules instead of copying:
+
+- ✅ Always get the latest rules when you update the package
+- ✅ No manual copy/paste needed
+- ✅ Consistent across your team
+- ✅ Rules are version-locked with your package version
+
+## Learn More
+
+- [Lumen Documentation](https://ldls.vercel.app)
+- [Package README](../README.md)
+- [Main Repository](https://github.com/LedgerHQ/lumen)

package/ai-rules/RULES.md

@@ -0,0 +1,150 @@
+# Lumen UI React Native - AI Assistant Rules
+
+## About Lumen
+
+**Lumen** (Ledger Design Language System), also known as **Lumen**, is Ledger's comprehensive design system providing:
+
+- **UI components** available via `@ledgerhq/lumen-ui-rnative`
+- **Design tokens** (colors, spacing, typography) available via `@ledgerhq/lumen-design-core`
+- **Multiple brand presets**: available via `@ledgerhq/lumen-design-core`
+
+## Setup Requirements
+
+### Package Installation
+
+- Import components from `@ledgerhq/lumen-ui-rnative`
+- Import icons from `@ledgerhq/lumen-ui-rnative/symbols` (not from main package)
+- Import design tokens/presets from `@ledgerhq/lumen-design-core`
+
+---
+
+## Available React Native Components
+
+Below is a complete list of all available Lumen React Native components. Click any component name to view its documentation and interactive examples in Storybook.
+
+**Components:**
+
+- [Button](https://ldls.vercel.app/?path=/docs/action-button--docs) - Primary action button component
+- [CardButton](https://ldls.vercel.app/?path=/docs/action-cardbutton--docs) - Card-style interactive button
+- [IconButton](https://ldls.vercel.app/?path=/docs/action-iconbutton--docs) - Button with icon only
+- [InteractiveIcon](https://ldls.vercel.app/?path=/docs/action-interactiveicon--docs) - Interactive icon with states
+- [Link](https://ldls.vercel.app/?path=/docs/action-link--docs) - Hyperlink component
+- [TileButton](https://ldls.vercel.app/?path=/docs/action-tilebutton--docs) - Interactive tile button
+- [AmountDisplay](https://ldls.vercel.app/?path=/docs/communication-amountdisplay--docs) - Display formatted amounts with currency
+- [Banner](https://ldls.vercel.app/?path=/docs/communication-banner--docs) - Alert and notification banners
+- [Spinner](https://ldls.vercel.app/?path=/docs/communication-spinner--docs) - Loading spinner indicator
+- [Spot](https://ldls.vercel.app/?path=/docs/communication-spot--docs) - Icon container with background
+- [Subheader](https://ldls.vercel.app/?path=/docs/communication-subheader--docs) - Section subheader component
+- [Tag](https://ldls.vercel.app/?path=/docs/communication-tag--docs) - Label and tag component
+- [Tooltip](https://ldls.vercel.app/?path=/docs/communication-tooltip--docs) - Tooltip overlay component
+- [BottomSheet](https://ldls.vercel.app/?path=/docs/containment-bottomsheet--docs) - Bottom sheet modal component
+- [ListItem](https://ldls.vercel.app/?path=/docs/containment-listitem--docs) - List item with flexible composition
+- [Tile](https://ldls.vercel.app/?path=/docs/containment-tile--docs) - Content container tile
+- [AddressInput](https://ldls.vercel.app/?path=/docs/input-addressinput--docs) - Input field for cryptocurrency addresses
+- [AmountInput](https://ldls.vercel.app/?path=/docs/input-amountinput--docs) - Input field for amount values
+- [SearchInput](https://ldls.vercel.app/?path=/docs/input-searchinput--docs) - Search input field
+- [TextInput](https://ldls.vercel.app/?path=/docs/input-textinput--docs) - Text input field
+- [Divider](https://ldls.vercel.app/?path=/docs/layout-divider--docs) - Visual separator line
+- [TabBar](https://ldls.vercel.app/?path=/docs/navigation-tabbar--docs) - Bottom tab navigation bar
+- [Checkbox](https://ldls.vercel.app/?path=/docs/selection-checkbox--docs) - Checkbox input for selections
+- [Select](https://ldls.vercel.app/?path=/docs/selection-select--docs) - Dropdown select component
+- [Switch](https://ldls.vercel.app/?path=/docs/selection-switch--docs) - Toggle switch component
+
+**Symbols:**
+
+- [Icon](https://ldls.vercel.app/?path=/docs/symbols-interface-icons--docs) - Interface icon components
+
+**Utility Components:**
+
+- [Box](https://ldls.vercel.app/?path=/docs/utility-box--docs) - Layout container with style props
+- [LinearGradient](https://ldls.vercel.app/?path=/docs/utility-lineargradient--docs) - Linear gradient component
+- [Pressable](https://ldls.vercel.app/?path=/docs/utility-pressable--docs) - Pressable wrapper with visual feedback
+- [RadialGradient](https://ldls.vercel.app/?path=/docs/utility-radialgradient--docs) - Radial gradient component
+- [Text](https://ldls.vercel.app/?path=/docs/utility-text--docs) - Text component with style props
+
+### Icons
+
+[View all available icons in Storybook →](https://ldls.vercel.app/?path=/docs/symbols-interface-icons--docs)
+
+- Always import icons from `/symbols` entry point
+- Import: `import { ArrowRight, CheckCircle } from '@ledgerhq/lumen-ui-rnative/symbols'`
+- Use as components: `<ArrowRight size={20} />`
+- Pass as props: `<Button icon={ArrowRight}>Label</Button>`
+- Available sizes: 12, 16, 20, 24, 32, 40, 48, 56
+
+---
+
+## React Native Style System
+
+Lumen React Native uses a custom style system called `lx` that provides type-safe access to design tokens. Explore the style system documentation:
+
+- [Colors](https://ldls.vercel.app/?path=/docs/style-system-theme-colors--docs) - Semantic color tokens for background, text, and borders
+- [Spacings](https://ldls.vercel.app/?path=/docs/style-system-theme-spacings--docs) - Spacing scale for padding, margin, and gaps
+- [Sizes](https://ldls.vercel.app/?path=/docs/style-system-theme-sizes--docs) - Size tokens for width and height
+- [Shadows](https://ldls.vercel.app/?path=/docs/style-system-theme-shadows--docs) - Elevation shadow styles
+- [Border Width](https://ldls.vercel.app/?path=/docs/style-system-theme-border-width--docs) - Border width tokens
+- [Border Radius](https://ldls.vercel.app/?path=/docs/style-system-theme-border-radius--docs) - Border radius tokens
+
+### Style System Usage
+
+```tsx
+import { Box, Text } from '@ledgerhq/lumen-ui-rnative';
+
+// Using lx prop for type-safe styling
+<Box
+  lx={{
+    backgroundColor: 'base',
+    padding: 16,
+    borderRadius: 'md',
+    borderWidth: 1,
+    borderColor: 'muted',
+  }}
+>
+  <Text lx={{ color: 'base', fontSize: 'body-2' }}>Styled with design tokens</Text>
+</Box>;
+```
+
+---
+
+## Design Tokens
+
+### Colors
+
+Use Lumen design tokens -- do not use default React Native color values.
+
+#### Available Background Colors
+
+- **Canvas**: `canvas`, `canvas-muted`, `canvas-sheet`, `canvas-overlay`
+- **Base**: `base`, `base-hover`, `base-pressed`
+- **Base Transparent**: `base-transparent`, `base-transparent-hover`, `base-transparent-pressed`
+- **Muted**: `muted`, `muted-hover`, `muted-pressed`
+- **Muted Transparent**: `muted-transparent`, `muted-transparent-hover`, `muted-transparent-pressed`, `muted-transparent-disabled`
+- **Muted Strong**: `muted-strong`, `muted-strong-hover`, `muted-strong-pressed`
+- **Accent**: `accent`, `accent-hover`, `accent-pressed`
+- **Interactive**: `interactive`, `interactive-hover`, `interactive-pressed`
+- **Status**: `error`, `error-strong`, `error-transparent`, `warning`, `warning-strong`, `success`, `success-strong`, `success-transparent`
+- **Active**: `active`, `active-hover`, `active-pressed`, `active-subtle`, `active-subtle-hover`, `active-subtle-pressed`
+- **Surface**: `surface`, `surface-hover`, `surface-pressed`
+- **Utility**: `white`, `black`, `disabled`, `disabled-strong`
+
+#### Available Text Colors
+
+- **Base**: `base`, `base-hover`, `base-pressed`
+- **Muted**: `muted`, `muted-hover`, `muted-pressed`, `muted-subtle`
+- **Interactive**: `interactive`, `interactive-hover`, `interactive-pressed`
+- **Status**: `error`, `warning`, `success`
+- **On Colors**: `on-accent`, `on-interactive`, `on-error-strong`, `on-warning`, `on-success-strong`
+- **Utility**: `white`, `black`, `grey`, `disabled`, `active`
+
+#### Available Border Colors
+
+- **Base**: `base`, `base-hover`, `base-pressed`
+- **Muted**: `muted`, `muted-hover`, `muted-pressed`, `muted-subtle`
+- **Status**: `error`, `warning`, `success`
+- **Interactive**: `focus`, `active`
+- **Utility**: `black`, `white`, `disabled`
+
+### Dark Mode
+
+- Lumen components support dark mode automatically via the theme provider
+- No component-level changes needed

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -37,7 +37,7 @@
   "peerDependencies": {
     "@types/react": "^19.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.0.47",
+    "@ledgerhq/lumen-design-core": "0.0.49",
     "react": "19.0.0",
     "react-native": "~0.79.7",
     "react-native-reanimated": "^3.0.0",

package/dist/src/i18n/locales/de.json

@@ -3,6 +3,10 @@
         "addressInput": {
             "qrCodeAriaLabel": "QR-Code scannen"
         },
+        "avatar": {
+            "defaultAlt": "Benutzer-Avatar",
+            "notificationAriaLabel": "Hat Benachrichtigung"
+        },
         "baseInput": {
             "clearInputAriaLabel": "Eingabe löschen"
         },

package/dist/src/i18n/locales/en.json

@@ -3,6 +3,10 @@
         "addressInput": {
             "qrCodeAriaLabel": "Scan QR code"
         },
+        "avatar": {
+            "defaultAlt": "User avatar",
+            "notificationAriaLabel": "Has notification"
+        },
         "baseInput": {
             "clearInputAriaLabel": "Clear input"
         },

package/dist/src/i18n/locales/es.json

@@ -3,6 +3,10 @@
         "addressInput": {
             "qrCodeAriaLabel": "Escanear código QR"
         },
+        "avatar": {
+            "defaultAlt": "Avatar de usuario",
+            "notificationAriaLabel": "Tiene notificación"
+        },
         "baseInput": {
             "clearInputAriaLabel": "Borrar entrada"
         },

package/dist/src/i18n/locales/fr.json

@@ -3,6 +3,10 @@
         "addressInput": {
             "qrCodeAriaLabel": "Scanner le code QR"
         },
+        "avatar": {
+            "defaultAlt": "Avatar de l'utilisateur",
+            "notificationAriaLabel": "A une notification"
+        },
         "baseInput": {
             "clearInputAriaLabel": "Effacer la saisie"
         },

package/dist/src/i18n/locales/ja.json

@@ -3,6 +3,10 @@
         "addressInput": {
             "qrCodeAriaLabel": "QRコードをスキャン"
         },
+        "avatar": {
+            "defaultAlt": "ユーザーアバター",
+            "notificationAriaLabel": "通知あり"
+        },
         "baseInput": {
             "clearInputAriaLabel": "インプットを削除"
         },

package/dist/src/i18n/locales/ko.json

@@ -3,6 +3,10 @@
         "addressInput": {
             "qrCodeAriaLabel": "QR 코드 스캔"
         },
+        "avatar": {
+            "defaultAlt": "사용자 아바타",
+            "notificationAriaLabel": "알림 있음"
+        },
         "baseInput": {
             "clearInputAriaLabel": "입력 값 지우기"
         },

package/dist/src/i18n/locales/pt.json

@@ -3,6 +3,10 @@
         "addressInput": {
             "qrCodeAriaLabel": "Escanear QR Code"
         },
+        "avatar": {
+            "defaultAlt": "Avatar do usuário",
+            "notificationAriaLabel": "Tem notificação"
+        },
         "baseInput": {
             "clearInputAriaLabel": "Limpar input"
         },

package/dist/src/i18n/locales/ru.json

@@ -3,6 +3,10 @@
         "addressInput": {
             "qrCodeAriaLabel": "Сканировать QR-код"
         },
+        "avatar": {
+            "defaultAlt": "Аватар пользователя",
+            "notificationAriaLabel": "Есть уведомление"
+        },
         "baseInput": {
             "clearInputAriaLabel": "Очистить поле"
         },

package/dist/src/i18n/locales/th.json

@@ -3,6 +3,10 @@
         "addressInput": {
             "qrCodeAriaLabel": "สแกน QR Code"
         },
+        "avatar": {
+            "defaultAlt": "อวาตาร์ผู้ใช้",
+            "notificationAriaLabel": "มีการแจ้งเตือน"
+        },
         "baseInput": {
             "clearInputAriaLabel": "ล้างอินพุต"
         },

package/dist/src/i18n/locales/tr.json

@@ -3,6 +3,10 @@
         "addressInput": {
             "qrCodeAriaLabel": "Karekodu okut"
         },
+        "avatar": {
+            "defaultAlt": "Kullanıcı avatarı",
+            "notificationAriaLabel": "Bildirim var"
+        },
         "baseInput": {
             "clearInputAriaLabel": "Girdiyi temizle"
         },

package/dist/src/i18n/locales/zh.json

@@ -3,6 +3,10 @@
         "addressInput": {
             "qrCodeAriaLabel": "扫描二维码"
         },
+        "avatar": {
+            "defaultAlt": "用户头像",
+            "notificationAriaLabel": "有通知"
+        },
         "baseInput": {
             "clearInputAriaLabel": "清空输入框"
         },

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

@@ -0,0 +1,19 @@
+import { AvatarProps } from './types';
+/**
+ * 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 declare const Avatar: ({ lx, style, src, alt, size, showNotification, ref, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuDtC;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,mEAShB,WAAW,4CA6Cb,CAAC"}

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { StyleSheet, Image, View } from 'react-native';
+import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet } from '../../../styles';
+import { User } from '../../Symbols';
+import { Box } from '../Utility';
+const fallbackSizes = {
+    sm: 16,
+    md: 24,
+};
+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 },
+        };
+        const notificationsMap = {
+            sm: t.sizes.s10,
+            md: t.sizes.s12,
+        };
+        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 (_jsxs(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.root, style]), accessibilityRole: 'image', accessibilityLabel: accessibilityLabel, ...props, children: [showNotification && (_jsx(View, { style: styles.notification, accessible: false })), shouldFallback ? (_jsx(User, { size: fallbackSizes[size], accessible: false, testID: 'avatar-fallback-icon' })) : (_jsx(Image, { source: { uri: src }, style: styles.image, accessible: false, onError: () => setError(true), testID: 'avatar-image' }))] }));
+};

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

@@ -0,0 +1,22 @@
+import { StoryObj } from '@storybook/react-native-web-vite';
+declare const meta: {
+    component: ({ lx, style, src, alt, size, showNotification, ref, ...props }: import("./types").AvatarProps) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    parameters: {
+        docs: {
+            source: {
+                language: string;
+                format: boolean;
+                type: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const SizeShowcase: Story;
+export declare const FallbackShowcase: Story;
+export declare const NotificationShowcase: Story;
+export declare const InteractiveShowcase: Story;
+//# sourceMappingURL=Avatar.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAMlE,QAAA,MAAM,IAAI;;;;;;;;;;;;CAYqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAKnC,eAAO,MAAM,IAAI,EAAE,KAelB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA6B1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAe9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAiBlC,CAAC;AAKF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC"}

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

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, Pressable, Linking } from 'react-native';
+import { Box } from '../Utility';
+import { Avatar } from './Avatar';
+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) => _jsx(Avatar, { ...args }),
+    parameters: {
+        docs: {
+            source: {
+                code: `<Avatar src="https://example.com" size="md" alt="avatar" showNotification={false} />`,
+            },
+        },
+    },
+};
+export const SizeShowcase = {
+    render: () => (_jsxs(Box, { lx: {
+            alignItems: 'stretch',
+            flexDirection: 'row',
+            gap: 's16',
+        }, children: [_jsxs(View, { style: { alignItems: 'center', justifyContent: 'flex-end' }, children: [_jsx(Avatar, { src: exampleSrc, alt: 'avatar', size: 'sm', showNotification: false }), _jsx(Text, { style: { marginTop: 4 }, children: "sm" })] }), _jsxs(View, { style: { alignItems: 'center', justifyContent: 'flex-end' }, children: [_jsx(Avatar, { src: exampleSrc, alt: 'avatar', size: 'md', showNotification: false }), _jsx(Text, { style: { marginTop: 4 }, children: "md" })] })] })),
+};
+export const FallbackShowcase = {
+    args: {
+        src: 'https://brokenLink.random',
+        size: 'md',
+        alt: 'Fallback example',
+        showNotification: false,
+    },
+    render: (args) => _jsx(Avatar, { ...args }),
+    parameters: {
+        docs: {
+            source: {
+                code: `<Avatar src="https://brokenLink.random" size="md" alt="Fallback example" showNotification={false} />`,
+            },
+        },
+    },
+};
+export const NotificationShowcase = {
+    render: () => (_jsxs(Box, { lx: {
+            flexDirection: 'row',
+            gap: 's16',
+        }, children: [_jsx(Avatar, { src: exampleSrc, alt: 'avatar', size: 'md', showNotification: false }), _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: () => (_jsx(Pressable, { onPress: onPressRedirect, style: ({ pressed }) => ({
+            borderRadius: 9999,
+            opacity: pressed ? 0.7 : 1,
+            backgroundColor: pressed ? 'rgba(0, 0, 0, 0.05)' : 'transparent',
+        }), children: _jsx(Avatar, { src: exampleSrc, size: 'md', showNotification: true }) })),
+};

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

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

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

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

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

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

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

@@ -0,0 +1,26 @@
+import { StyledViewProps } from '../../../styles';
+export type AvatarProps = {
+    /**
+     * Image source URL. When undefined or on load error, displays a fallback icon.
+     * @optional
+     */
+    src?: string;
+    /**
+     * Alternative text for the image.
+     * @optional
+     */
+    alt?: string;
+    /**
+     * The size variant of the avatar.
+     * @optional
+     * @default md
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Whether to show the notifications indicator.
+     * @optional
+     * @default false
+     */
+    showNotification?: boolean;
+} & Omit<StyledViewProps, 'children'>;
+//# sourceMappingURL=types.d.ts.map