@ledgerhq/lumen-ui-rnative 0.0.51 → 0.0.53

package/src/i18n/locales/ja.json

@@ -1,3 +1,23 @@
 {
-  "components": {}
-}
+  "components": {
+    "addressInput": {
+      "qrCodeAriaLabel": "QRコードをスキャン"
+    },
+    "baseInput": {
+      "clearInputAriaLabel": "インプットを削除"
+    },
+    "spinner": {
+      "loadingAriaLabel": "読み込み中"
+    },
+    "bottomSheetHeader": {
+      "goBackAriaLabel": "戻る",
+      "closeAriaLabel": "閉じる"
+    },
+    "banner": {
+      "closeAriaLabel": "閉じる"
+    },
+    "link": {
+      "opensInNewTabAriaLabel": "（新しいタブで開く）"
+    }
+  }
+}

package/src/i18n/locales/ko.json

@@ -1,3 +1,23 @@
 {
-  "components": {}
-}
+  "components": {
+    "addressInput": {
+      "qrCodeAriaLabel": "QR 코드 스캔"
+    },
+    "baseInput": {
+      "clearInputAriaLabel": "입력 값 지우기"
+    },
+    "spinner": {
+      "loadingAriaLabel": "로딩중"
+    },
+    "bottomSheetHeader": {
+      "goBackAriaLabel": "돌아가기",
+      "closeAriaLabel": "닫기"
+    },
+    "banner": {
+      "closeAriaLabel": "닫기"
+    },
+    "link": {
+      "opensInNewTabAriaLabel": "(새 탭에서 열기)"
+    }
+  }
+}

package/src/i18n/locales/pt.json

@@ -1,3 +1,23 @@
 {
-  "components": {}
-}
+  "components": {
+    "addressInput": {
+      "qrCodeAriaLabel": "Escanear QR Code"
+    },
+    "baseInput": {
+      "clearInputAriaLabel": "Limpar input"
+    },
+    "spinner": {
+      "loadingAriaLabel": "Carregando"
+    },
+    "bottomSheetHeader": {
+      "goBackAriaLabel": "Voltar",
+      "closeAriaLabel": "Fechar"
+    },
+    "banner": {
+      "closeAriaLabel": "Fechar"
+    },
+    "link": {
+      "opensInNewTabAriaLabel": "(abre em uma nova aba)"
+    }
+  }
+}

package/src/i18n/locales/ru.json

@@ -1,3 +1,23 @@
 {
-  "components": {}
-}
+  "components": {
+    "addressInput": {
+      "qrCodeAriaLabel": "Сканировать QR-код"
+    },
+    "baseInput": {
+      "clearInputAriaLabel": "Очистить поле"
+    },
+    "spinner": {
+      "loadingAriaLabel": "Загрузка"
+    },
+    "bottomSheetHeader": {
+      "goBackAriaLabel": "Назад",
+      "closeAriaLabel": "Закрыть"
+    },
+    "banner": {
+      "closeAriaLabel": "Закрыть"
+    },
+    "link": {
+      "opensInNewTabAriaLabel": "(открывается в новой вкладке)"
+    }
+  }
+}

package/src/i18n/locales/th.json

@@ -1,3 +1,23 @@
 {
-  "components": {}
-}
+  "components": {
+    "addressInput": {
+      "qrCodeAriaLabel": "สแกน QR Code"
+    },
+    "baseInput": {
+      "clearInputAriaLabel": "ล้างอินพุต"
+    },
+    "spinner": {
+      "loadingAriaLabel": "กำลังโหลด"
+    },
+    "bottomSheetHeader": {
+      "goBackAriaLabel": "ย้อนกลับ",
+      "closeAriaLabel": "ปิด"
+    },
+    "banner": {
+      "closeAriaLabel": "ปิด"
+    },
+    "link": {
+      "opensInNewTabAriaLabel": "(เปิดในแท็บใหม่)"
+    }
+  }
+}

package/src/i18n/locales/tr.json

@@ -1,3 +1,23 @@
 {
-  "components": {}
-}
+  "components": {
+    "addressInput": {
+      "qrCodeAriaLabel": "Karekodu okut"
+    },
+    "baseInput": {
+      "clearInputAriaLabel": "Girdiyi temizle"
+    },
+    "spinner": {
+      "loadingAriaLabel": "Yükleniyor"
+    },
+    "bottomSheetHeader": {
+      "goBackAriaLabel": "Geri dön",
+      "closeAriaLabel": "Kapat"
+    },
+    "banner": {
+      "closeAriaLabel": "Kapat"
+    },
+    "link": {
+      "opensInNewTabAriaLabel": "(yeni sekmede açılır)"
+    }
+  }
+}

package/src/i18n/locales/zh.json

@@ -1,3 +1,23 @@
 {
-  "components": {}
-}
+  "components": {
+    "addressInput": {
+      "qrCodeAriaLabel": "扫描二维码"
+    },
+    "baseInput": {
+      "clearInputAriaLabel": "清空输入框"
+    },
+    "spinner": {
+      "loadingAriaLabel": "加载中"
+    },
+    "bottomSheetHeader": {
+      "goBackAriaLabel": "返回",
+      "closeAriaLabel": "关闭"
+    },
+    "banner": {
+      "closeAriaLabel": "关闭"
+    },
+    "link": {
+      "opensInNewTabAriaLabel": "（在新选项卡中打开）"
+    }
+  }
+}

package/src/lib/Components/BaseInput/BaseInput.tsx

@@ -18,6 +18,7 @@ export const BaseInput = React.forwardRef<TextInput, BaseInputProps>(
     {
       lx,
       style,
+      containerStyle,
       inputStyle,
       labelStyle,
       label,
@@ -100,7 +101,7 @@ export const BaseInput = React.forwardRef<TextInput, BaseInputProps>(
     return (
       <Box lx={lx} style={style}>
         <Pressable
-          style={styles.container}
+          style={StyleSheet.flatten([styles.container, containerStyle])}
           onPress={() => inputRef.current?.focus()}
           disabled={!editable}
         >
@@ -109,7 +110,11 @@ export const BaseInput = React.forwardRef<TextInput, BaseInputProps>(
           <TextInput
             ref={inputRef}
             value={value}
-            style={[styles.input, { lineHeight: 0 }, inputStyle]}
+            style={StyleSheet.flatten([
+              styles.input,
+              { lineHeight: 0 },
+              inputStyle,
+            ])}
             onFocus={() => setIsFocused(true)}
             onBlur={() => setIsFocused(false)}
             onChangeText={handleChangeText}

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

@@ -12,9 +12,13 @@ export type BaseInputProps = {
    */
   label?: string;
   /**
-   * Additional styles to apply to the container element.
+   * Additional styles to apply to the outer wrapper element.
    */
   style?: StyleProp<ViewStyle>;
+  /**
+   * Additional styles to apply to the inner container element (Pressable).
+   */
+  containerStyle?: StyleProp<ViewStyle>;
   /**
    * Additional styles to apply to the input element.
    */

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

@@ -7,6 +7,9 @@ import { SearchInputProps } from './types';
 const meta: Meta<typeof SearchInput> = {
   component: SearchInput,
   title: 'Input/SearchInput',
+  args: {
+    appearance: 'plain',
+  },
   parameters: {
     docs: {
       source: {

package/src/lib/Components/SearchInput/SearchInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TextInput } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { Search as SearchIcon } from '../../Symbols';
 import { BaseInput } from '../BaseInput';
 import { type SearchInputProps } from './types';
@@ -7,14 +8,37 @@ import { type SearchInputProps } from './types';
 export const SearchInput = React.forwardRef<
   React.ElementRef<typeof TextInput>,
   SearchInputProps
->((props, ref) => {
-  return (
-    <BaseInput
-      ref={ref}
-      prefix={<SearchIcon size={20} color='muted' accessible={false} />}
-      {...props}
-    />
+>(
+  (
+    { appearance = 'plain', style, containerStyle, inputStyle, ...props },
+    ref,
+  ) => {
+    const styles = useAppearanceStyles(appearance);
+
+    return (
+      <BaseInput
+        ref={ref}
+        prefix={<SearchIcon size={20} color='muted' accessible={false} />}
+        style={style}
+        containerStyle={[containerStyle, styles.container]}
+        inputStyle={[inputStyle, styles.input]}
+        {...props}
+      />
+    );
+  },
+);
+
+const useAppearanceStyles = (appearance: 'plain' | 'transparent') => {
+  return useStyleSheet(
+    (t) => ({
+      container:
+        appearance === 'transparent'
+          ? { backgroundColor: t.colors.bg.mutedTransparent }
+          : {},
+      input: { backgroundColor: 'transparent' },
+    }),
+    [appearance],
   );
-});
+};
 
 SearchInput.displayName = 'SearchInput';

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

@@ -2,4 +2,10 @@ import { BaseInputProps } from '../BaseInput';
 import { BoxProps } from '../Utility';
 
 export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label'> &
-  BoxProps;
+  BoxProps & {
+    /**
+     * The visual appearance of the search input
+     * @default 'plain'
+     */
+    appearance?: 'plain' | 'transparent';
+  };

package/src/lib/Components/Tile/Tile.tsx

@@ -48,6 +48,7 @@ const useRootStyles = ({
             position: 'relative',
             flexDirection: 'column',
             width: '100%',
+            flex: 1,
             alignItems: 'center',
             gap: t.spacings.s8,
             paddingHorizontal: t.spacings.s8,

package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.mdx

@@ -0,0 +1,142 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as LinearGradientStories from './LinearGradient.stories';
+import { CustomTabs, Tab } from '../../../../../../.storybook/components';
+
+<Meta title='Utility/LinearGradient' of={LinearGradientStories} />
+
+# LinearGradient
+
+<CustomTabs>
+  <Tab label="Overview ">
+
+## Introduction
+
+LinearGradient renders a linear gradient background using `react-native-svg`. 
+It extends Box, supporting all `lx` style props for layout and sizing.
+
+## Anatomy
+
+<Canvas of={LinearGradientStories.Base} />
+<Controls of={LinearGradientStories.Base} />
+
+## Properties
+
+### Direction
+
+Supports preset directions or custom angles in degrees:
+
+<Canvas of={LinearGradientStories.DirectionShowcase} />
+
+### With Children
+
+Content renders on top of the gradient:
+
+<Canvas of={LinearGradientStories.WithChildren} />
+
+### Multiple Stops
+
+The `offset` prop controls where each color appears along the gradient (0 = start, 1 = end).  
+When omitted, stops are distributed evenly.  
+For example, 3 stops without offsets will be placed at 0, 0.5, and 1.
+
+<Canvas of={LinearGradientStories.WithMultipleStops} />
+
+### Crypto Gradients
+
+The `theme` object expose a `colors.gradients.crypto` object that contains gradient definitions for each crypto token.  
+
+<Canvas of={LinearGradientStories.CryptoGradients} />
+
+</Tab>
+
+  <Tab label="Implementation ">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+The `direction` prop accepts preset strings like `to-bottom`, `to-right`, or diagonal variants. 
+Use design tokens for colors to ensure theme consistency.
+
+```tsx
+import { LinearGradient } from '@ledgerhq/lumen-ui-rnative';
+
+<LinearGradient
+  direction="to-bottom"
+  stops={[{ color: 'accent' }, { color: 'active', opacity: 0 }]}
+  lx={{ height: 's192', width: 's192', borderRadius: 'lg' }}
+/>
+```
+
+### Custom Angle
+
+Pass a number to `direction` for precise angle control. 
+Angles follow convention: 
+- 0° points up
+- 90° points right
+- 180° points down
+- 270° points left
+
+```tsx
+<LinearGradient
+  direction={45}
+  stops={[{ color: 'accent' }, { color: 'active' }]}
+  lx={{ height: 's80', width: 's80' }}
+/>
+```
+
+### With Children
+
+The gradient acts as a background. Children are rendered on top and define the component's height when no explicit size is set.
+
+```tsx
+<LinearGradient
+  direction="to-bottomright"
+  stops={[{ color: 'accent' }, { color: 'active', opacity: 0 }]}
+  lx={{ padding: 's24', borderRadius: 'lg' }}
+>
+  <Text lx={{ color: 'base' }}>Content on gradient</Text>
+</LinearGradient>
+```
+
+### Stops API
+
+Each stop defines a color at a position.  
+Use `opacity: 0` for fade-out effects.   
+Colors support both design tokens (`'accent'`) and raw values (`'#FF6B6B'`).
+
+**Default behavior when `offset` is omitted:** stops are evenly distributed. 
+- With 2 stops → `[0, 1]`. 
+- With 3 stops → `[0, 0.5, 1]`. 
+- With 4 stops → `[0, 0.33, 0.66, 1]`.
+
+```tsx
+type GradientStop = {
+  color: BackgroundColorToken | string;  // Token or raw color
+  offset?: number;   // 0-1, auto-spread if omitted
+  opacity?: number;  // 0-1, defaults to 1
+}
+```
+
+### Crypto Gradients
+
+The `theme` object expose a `colors.gradients.crypto` object that contains gradient definitions for each crypto token.  
+
+```tsx
+import { useTheme } from '@ledgerhq/lumen-ui-rnative';
+
+const { theme } = useTheme();
+
+return (
+  <LinearGradient
+    stops={theme.colors.gradients.crypto.bitcoin}
+    lx={{ padding: 's24', borderRadius: 'lg' }}
+    direction="to-bottomright"
+  />
+);
+```
+
+</Tab>
+</CustomTabs>

package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx

@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { useTheme } from 'src/styles';
+import { Box } from '../../Box';
+import { Text } from '../../Text';
+import { LinearGradient } from './LinearGradient';
+
+const meta: Meta<typeof LinearGradient> = {
+  component: LinearGradient,
+  title: 'Utility/LinearGradient',
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof LinearGradient>;
+
+export const Base: Story = {
+  args: {
+    direction: 'to-bottom',
+    stops: [{ color: 'accent' }, { color: 'active', opacity: 0 }],
+    lx: {
+      width: 's192',
+      height: 's56',
+      borderRadius: 'lg',
+    },
+  },
+};
+
+export const DirectionShowcase: Story = {
+  render: () => {
+    const orientations = [
+      'to-bottom',
+      'to-right',
+      'to-top',
+      'to-left',
+      'to-bottomright',
+      'to-bottomleft',
+      'to-topright',
+      'to-topleft',
+      0,
+      90,
+      180,
+      270,
+    ] as const;
+
+    return (
+      <Box lx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 's20' }}>
+        {orientations.map((orientation) => {
+          return (
+            <Box key={orientation} lx={{ gap: 's4' }}>
+              <LinearGradient
+                direction={orientation}
+                stops={[{ color: 'accent' }, { color: 'active', opacity: 0 }]}
+                lx={{ height: 's40', width: 's176', borderRadius: 'md' }}
+              />
+              <Text typography='body4' lx={{ color: 'base' }}>
+                {orientation}
+              </Text>
+            </Box>
+          );
+        })}
+      </Box>
+    );
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    direction: 'to-bottomright',
+    stops: [{ color: 'accent' }, { color: 'active', opacity: 0, offset: 0.75 }],
+    lx: {
+      padding: 's24',
+      borderRadius: 'lg',
+      width: 's288',
+    },
+  },
+  render: (args) => (
+    <LinearGradient {...args}>
+      <Text typography='heading2SemiBold' lx={{ color: 'base' }}>
+        With Children
+      </Text>
+      <Text typography='body2' lx={{ color: 'base', marginTop: 's8' }}>
+        Adapt height based on content.
+      </Text>
+      <Text typography='body3' lx={{ color: 'base', marginTop: 's8' }}>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit consectetur
+        adipisicing elit adipisicing elit. Mas adename labin anet.
+      </Text>
+    </LinearGradient>
+  ),
+};
+
+export const WithMultipleStops: Story = {
+  args: {
+    direction: 'to-right',
+    stops: [
+      { color: 'accent', offset: 0, opacity: 1 },
+      { color: 'warning', offset: 0.5, opacity: 1 },
+      { color: 'errorStrong', offset: 1, opacity: 1 },
+    ],
+    lx: {
+      borderRadius: 'md',
+      height: 's56',
+      width: 's288',
+    },
+  },
+  render: (args) => {
+    const { theme } = useTheme();
+    console.log({ theme });
+    return (
+      <Box lx={{ gap: 's12' }}>
+        <LinearGradient {...args} />
+        <Box lx={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Text>accent</Text>
+          <Text>warning</Text>
+          <Text>errorStrong</Text>
+        </Box>
+      </Box>
+    );
+  },
+};
+
+export const CryptoGradients: Story = {
+  args: {
+    direction: 'to-bottomright',
+    lx: {
+      borderRadius: 'md',
+      height: 's56',
+      width: 's288',
+    },
+  },
+  render: (args) => {
+    const { theme } = useTheme();
+
+    return (
+      <Box
+        lx={{
+          gap: 's20',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+        }}
+      >
+        {Object.entries(theme.colors.gradients.crypto).map(
+          ([key, gradient]) => (
+            <Box key={key} lx={{ gap: 's4' }}>
+              <LinearGradient
+                {...args}
+                lx={{
+                  height: 's40',
+                  width: 's176',
+                  borderRadius: 'md',
+                }}
+                stops={gradient}
+              ></LinearGradient>
+              <Text typography='body4' lx={{ color: 'base' }}>
+                {key}
+              </Text>
+            </Box>
+          ),
+        )}
+      </Box>
+    );
+  },
+};