@ledgerhq/lumen-ui-rnative 0.0.68 → 0.0.70

package/src/lib/Components/Avatar/Avatar.tsx

@@ -0,0 +1,132 @@
+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';
+import { AvatarProps } from './types';
+
+type Size = NonNullable<AvatarProps['size']>;
+
+const fallbackSizes = {
+  sm: 16,
+  md: 24,
+} as const;
+
+const useStyles = ({ size }: { size: 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
+}: AvatarProps) => {
+  const { t } = useCommonTranslation();
+  const [error, setError] = useState<boolean>(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 (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.root, style])}
+      accessibilityRole='image'
+      accessibilityLabel={accessibilityLabel}
+      {...props}
+    >
+      {showNotification && (
+        <View style={styles.notification} accessible={false} />
+      )}
+      {shouldFallback ? (
+        <User
+          size={fallbackSizes[size]}
+          accessible={false}
+          testID='avatar-fallback-icon'
+        />
+      ) : (
+        <Image
+          source={{ uri: src }}
+          style={styles.image}
+          accessible={false}
+          onError={() => setError(true)}
+          testID='avatar-image'
+        />
+      )}
+    </Box>
+  );
+};

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

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

package/src/lib/Components/Avatar/types.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'>;

package/src/lib/Components/CardButton/CardButton.tsx

@@ -67,7 +67,7 @@ const useStyles = ({
           gap: t.spacings.s4,
         },
         title: StyleSheet.flatten([
-          t.typographies.body1SemiBold,
+          t.typographies.body2SemiBold,
           {
             color: disabled ? t.colors.text.disabled : t.colors.text.base,
             minWidth: 0,
@@ -75,9 +75,9 @@ const useStyles = ({
           },
         ]),
         description: StyleSheet.flatten([
-          t.typographies.body2,
+          t.typographies.body3,
           {
-            color: disabled ? t.colors.text.disabled : t.colors.text.base,
+            color: disabled ? t.colors.text.disabled : t.colors.text.muted,
             minWidth: 0,
           },
         ]),

package/src/lib/Components/PageIndicator/PageIndicator.mdx

@@ -33,6 +33,9 @@ The PageIndicator consists of:
 
 ## Properties
 
+- **currentPage**: 1-based page number (first page is 1, second is 2, etc.). Valid range: 1 to totalPages.
+- **totalPages**: Total number of pages.
+
 ### Overview
 
 <div style={{ width: '100%' }}>
@@ -75,7 +78,7 @@ import { PageIndicator } from '@ledgerhq/lumen-ui-rnative';
 import { useState } from 'react';
 
 function MyComponent() {
-  const [currentPage, setCurrentPage] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
   const totalPages = 5;
 
   return <PageIndicator currentPage={currentPage} totalPages={totalPages} />;
@@ -90,7 +93,7 @@ import { ArrowLeft, ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
 import { useState } from 'react';
 
 function MyComponent() {
-  const [page, setPage] = useState(0);
+  const [page, setPage] = useState(1);
   const totalPages = 9;
 
   return (
@@ -100,14 +103,14 @@ function MyComponent() {
           icon={ArrowLeft}
           size='xs'
           accessibilityLabel='Previous page'
-          onPress={() => setPage((v) => Math.max(0, v - 1))}
+          onPress={() => setPage((v) => Math.max(1, v - 1))}
         />
         <PageIndicator currentPage={page} totalPages={totalPages} />
         <IconButton
           icon={ArrowRight}
           size='xs'
           accessibilityLabel='Next page'
-          onPress={() => setPage((v) => Math.min(totalPages - 1, v + 1))}
+          onPress={() => setPage((v) => Math.min(totalPages, v + 1))}
         />
       </Box>
     </Box>

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

@@ -24,13 +24,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Base: Story = {
   args: {
-    currentPage: 0,
+    currentPage: 1,
     totalPages: 5,
   },
 };
 
 const InteractiveComponent = ({ totalPages }: { totalPages: number }) => {
-  const [page, setPage] = useState(0);
+  const [page, setPage] = useState(1);
   const { theme } = useTheme();
 
   return (
@@ -48,7 +48,7 @@ const InteractiveComponent = ({ totalPages }: { totalPages: number }) => {
           size='xs'
           accessibilityLabel='Previous page'
           appearance='transparent'
-          onPress={() => setPage((v) => Math.max(0, v - 1))}
+          onPress={() => setPage((v) => Math.max(1, v - 1))}
         />
         <Text
           lx={{ color: 'base', width: 's28', textAlign: 'center' }}
@@ -61,7 +61,7 @@ const InteractiveComponent = ({ totalPages }: { totalPages: number }) => {
           size='xs'
           accessibilityLabel='Next page'
           appearance='transparent'
-          onPress={() => setPage((v) => Math.min(totalPages - 1, v + 1))}
+          onPress={() => setPage((v) => Math.min(totalPages, v + 1))}
         />
       </Box>
       <PageIndicator currentPage={page} totalPages={totalPages} />
@@ -71,7 +71,7 @@ const InteractiveComponent = ({ totalPages }: { totalPages: number }) => {
 
 export const Interactive: Story = {
   args: {
-    currentPage: 0,
+    currentPage: 1,
     totalPages: 9,
   },
   render: (args) => <InteractiveComponent totalPages={args.totalPages} />,

package/src/lib/Components/PageIndicator/PageIndicator.test.tsx

@@ -20,7 +20,7 @@ describe('PageIndicator Component', () => {
       renderWithProvider(
         <PageIndicator
           testID='page-indicator'
-          currentPage={0}
+          currentPage={1}
           totalPages={5}
         />,
       );
@@ -31,7 +31,7 @@ describe('PageIndicator Component', () => {
       renderWithProvider(
         <PageIndicator
           testID='page-indicator'
-          currentPage={0}
+          currentPage={1}
           totalPages={5}
         />,
       );
@@ -43,7 +43,7 @@ describe('PageIndicator Component', () => {
       renderWithProvider(
         <PageIndicator
           testID='page-indicator'
-          currentPage={0}
+          currentPage={1}
           totalPages={3}
         />,
       );
@@ -55,7 +55,7 @@ describe('PageIndicator Component', () => {
       renderWithProvider(
         <PageIndicator
           testID='page-indicator'
-          currentPage={0}
+          currentPage={1}
           totalPages={10}
         />,
       );
@@ -69,7 +69,7 @@ describe('PageIndicator Component', () => {
       renderWithProvider(
         <PageIndicator
           testID='page-indicator'
-          currentPage={0}
+          currentPage={1}
           totalPages={5}
         />,
       );
@@ -80,7 +80,7 @@ describe('PageIndicator Component', () => {
       renderWithProvider(
         <PageIndicator
           testID='page-indicator'
-          currentPage={2}
+          currentPage={3}
           totalPages={5}
         />,
       );
@@ -91,7 +91,7 @@ describe('PageIndicator Component', () => {
       renderWithProvider(
         <PageIndicator
           testID='page-indicator'
-          currentPage={4}
+          currentPage={5}
           totalPages={5}
         />,
       );
@@ -104,7 +104,7 @@ describe('PageIndicator Component', () => {
       renderWithProvider(
         <PageIndicator
           testID='page-indicator'
-          currentPage={0}
+          currentPage={1}
           totalPages={1}
         />,
       );
@@ -115,7 +115,7 @@ describe('PageIndicator Component', () => {
       renderWithProvider(
         <PageIndicator
           testID='page-indicator'
-          currentPage={0}
+          currentPage={1}
           totalPages={2}
         />,
       );
@@ -126,7 +126,7 @@ describe('PageIndicator Component', () => {
       renderWithProvider(
         <PageIndicator
           testID='page-indicator'
-          currentPage={5}
+          currentPage={6}
           totalPages={20}
         />,
       );
@@ -139,7 +139,7 @@ describe('PageIndicator Component', () => {
       renderWithProvider(
         <PageIndicator
           testID='page-indicator'
-          currentPage={0}
+          currentPage={1}
           totalPages={5}
           lx={{ marginTop: 's16' }}
         />,
@@ -151,7 +151,7 @@ describe('PageIndicator Component', () => {
       renderWithProvider(
         <PageIndicator
           testID='page-indicator'
-          currentPage={0}
+          currentPage={1}
           totalPages={5}
           style={{ marginTop: 16 }}
         />,
@@ -167,7 +167,7 @@ describe('PageIndicator Component', () => {
         <PageIndicator
           ref={ref}
           testID='page-indicator'
-          currentPage={0}
+          currentPage={1}
           totalPages={5}
         />,
       );
@@ -178,7 +178,7 @@ describe('PageIndicator Component', () => {
       renderWithProvider(
         <PageIndicator
           testID='page-indicator'
-          currentPage={0}
+          currentPage={1}
           totalPages={5}
           accessibilityLabel='Page indicator'
         />,

package/src/lib/Components/PageIndicator/PageIndicator.tsx

@@ -126,7 +126,7 @@ const usePageIndicator = ({
   );
 
   const firstVisibleIndex = offset;
-  const lastVisibleIndex = offset + MAX_VISIBLE_DOTS - 1;
+  const lastVisibleIndex = offset + visibleDots - 1;
 
   const isActive = useCallback(
     (index: number): boolean => index === currentPage,
@@ -192,9 +192,13 @@ export const PageIndicator = ({
   const styles = usePageIndicatorStyles();
   const { theme } = useTheme();
 
+  const currentPageIndex = Math.max(
+    0,
+    Math.min(currentPage - 1, totalPages - 1),
+  );
   const { viewportWidth, stripAnimatedStyle, isActive, isShrunk } =
     usePageIndicator({
-      currentPage,
+      currentPage: currentPageIndex,
       totalPages,
       dotSize: theme.sizes.s6,
       gap: theme.spacings.s4,

package/src/lib/Components/PageIndicator/types.ts

@@ -2,7 +2,7 @@ import { BoxProps } from '../Utility';
 
 export type PageIndicatorProps = {
   /**
-   * The currently active page index. 0-based (first page is 0, second is 1, etc.).
+   * The currently active page. 1-based (first page is 1, second is 2, etc.).
    */
   currentPage: number;
   /**

package/src/lib/Components/index.ts

@@ -1,6 +1,7 @@
 export * from './AddressInput';
 export * from './AmountDisplay';
 export * from './AmountInput';
+export * from './Avatar';
 export * from './Banner';
 export * from './BottomSheet';
 export * from './Button';

package/src/lib/Symbols/Icons/Chart5.tsx

@@ -0,0 +1,53 @@
+import Svg, { Path, Mask } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * Chart5 icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { Chart5 } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Chart5 />
+ *
+ * @example
+ * // With custom size and style
+ * <Chart5 size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={Chart5} size="md">
+ *   Click me
+ * </Button>
+ */
+export const Chart5 = createIcon(
+  'Chart5',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
+    <Path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.3}
+      d='m3.96 10.313 2.562-2.639a.485.485 0 0 1 .712 0l1.082 1.114a.493.493 0 0 0 .713 0l3.012-3.101m-1.345.005h1.344v1.385'
+    />
+    <Mask id='path-2-inside-1_8174_813' fill='#fff'>
+      <Path d='M.9 3.672a2 2 0 0 1 2-2h10.2a2 2 0 0 1 2 2v8.656a2 2 0 0 1-2 2H2.9a2 2 0 0 1-2-2z' />
+    </Mask>
+    <Path
+      fill='currentColor'
+      d='M2.9 1.672v1.3h10.2v-2.6H2.9zm12.2 2h-1.3v8.656h2.6V3.672zm-2 10.656v-1.3H2.9v2.6h10.2zm-12.2-2h1.3V3.672H-.4v8.656zm2 2v-1.3a.7.7 0 0 1-.7-.7H-.4a3.3 3.3 0 0 0 3.3 3.3zm12.2-2h-1.3a.7.7 0 0 1-.7.7v2.6a3.3 3.3 0 0 0 3.3-3.3zm-2-10.656v1.3a.7.7 0 0 1 .7.7h2.6a3.3 3.3 0 0 0-3.3-3.3zm-10.2 0v-1.3a3.3 3.3 0 0 0-3.3 3.3h2.6a.7.7 0 0 1 .7-.7z'
+      mask='url(#path-2-inside-1_8174_813)'
+    />
+  </Svg>,
+);

package/src/lib/Symbols/Icons/Chart5Fill.tsx

@@ -0,0 +1,42 @@
+import Svg, { Path } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * Chart5Fill icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { Chart5Fill } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Chart5Fill />
+ *
+ * @example
+ * // With custom size and style
+ * <Chart5Fill size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={Chart5Fill} size="md">
+ *   Click me
+ * </Button>
+ */
+export const Chart5Fill = createIcon(
+  'Chart5Fill',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
+    <Path
+      fill='currentColor'
+      d='M13.1 1.662a2 2 0 0 1 2 2v8.66a2 2 0 0 1-2 2H2.9a2 2 0 0 1-2-2v-8.66a2 2 0 0 1 2-2zm-2.404 3.379a.648.648 0 0 0-.173 1.273L8.672 8.22l-.97-1a1.134 1.134 0 0 0-1.646 0L3.493 9.86a.65.65 0 0 0 .934.905l2.45-2.527.974 1.002.088.082c.456.381 1.132.355 1.556-.082l1.925-1.982a.648.648 0 0 0 1.27-.183V5.691a.647.647 0 0 0-.709-.65z'
+    />
+  </Svg>,
+);

package/src/lib/Symbols/Icons/CurveDown.tsx

@@ -0,0 +1,69 @@
+import Svg, { Path, Circle } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * CurveDown icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { CurveDown } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <CurveDown />
+ *
+ * @example
+ * // With custom size and style
+ * <CurveDown size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={CurveDown} size="md">
+ *   Click me
+ * </Button>
+ */
+export const CurveDown = createIcon(
+  'CurveDown',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 17 16'>
+    <Path
+      stroke='currentColor'
+      strokeDasharray='1 2.2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.3}
+      d='M1.52 11.793H10.2'
+    />
+    <Path
+      stroke='currentColor'
+      strokeDasharray='1 2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.3}
+      d='M13.235 11.793h2.393'
+    />
+    <Path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.3}
+      d='M2.264 2.099C2.156 3.302 2.711 5.404 5.5 6.03c2.719.611 5.44 1.397 5.912 4.106'
+    />
+    <Circle
+      cx={2.108}
+      cy={2.108}
+      r={1.458}
+      stroke='currentColor'
+      strokeWidth={1.3}
+      transform='matrix(1 0 0 -1 9.601 13.901)'
+    />
+  </Svg>,
+);

package/src/lib/Symbols/Icons/CurveUp.tsx

@@ -0,0 +1,68 @@
+import Svg, { Path, Circle } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * CurveUp icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { CurveUp } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <CurveUp />
+ *
+ * @example
+ * // With custom size and style
+ * <CurveUp size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={CurveUp} size="md">
+ *   Click me
+ * </Button>
+ */
+export const CurveUp = createIcon(
+  'CurveUp',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 17 16'>
+    <Path
+      stroke='currentColor'
+      strokeDasharray='1 2.2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.3}
+      d='M1.52 4.208H10.2'
+    />
+    <Path
+      stroke='currentColor'
+      strokeDasharray='1 2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.3}
+      d='M13.235 4.207h2.393'
+    />
+    <Path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.3}
+      d='M2.264 13.901c-.108-1.203.447-3.305 3.236-3.932 2.719-.611 5.44-1.397 5.912-4.106'
+    />
+    <Circle
+      cx={11.71}
+      cy={4.207}
+      r={1.458}
+      stroke='currentColor'
+      strokeWidth={1.3}
+    />
+  </Svg>,
+);