@ledgerhq/lumen-ui-rnative 0.0.52 → 0.0.53

package/dist/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../Box';
+import { Text } from '../../Text';
+import { RadialGradient } from './RadialGradient';
+const meta = {
+    component: RadialGradient,
+    title: 'Utility/RadialGradient',
+    parameters: {
+        layout: 'centered',
+        backgrounds: { default: 'light' },
+        docs: {
+            source: {
+                language: 'tsx',
+                format: true,
+                type: 'code',
+            },
+        },
+    },
+};
+export default meta;
+export const Base = {
+    args: {
+        stops: [{ color: 'accent' }, { color: 'active', opacity: 0 }],
+        lx: {
+            height: 's192',
+            width: 's192',
+            borderRadius: 'lg',
+        },
+    },
+};
+export const CenterPositionShowcase = {
+    render: () => {
+        const positions = [
+            {
+                title: 'Aspect ratio 1:1',
+                isSquare: true,
+                items: [
+                    {
+                        center: { x: 0.5, y: 0.5 },
+                        label: '{x: 0.5, y: 0.5} (default)',
+                    },
+                    { center: { x: 0.2, y: 0.2 }, label: '{x: 0.2, y: 0.2}' },
+                    { center: { x: 0.8, y: 0.8 }, label: '{x: 0.8, y: 0.8}' },
+                    { center: { x: 0.2, y: 0.8 }, label: '{x: 0.2, y: 0.8}' },
+                    { center: { x: 0.8, y: 0.2 }, label: '{x: 0.8, y: 0.2}' },
+                ],
+            },
+            {
+                title: 'Aspect ratio 1:2',
+                isSquare: false,
+                items: [
+                    {
+                        center: { x: 0.5, y: 0.5 },
+                        label: '{x: 0.5, y: 0.5} (default)',
+                    },
+                    { center: { x: 0.2, y: 0.2 }, label: '{x: 0.2, y: 0.2}' },
+                    { center: { x: 0.8, y: 0.8 }, label: '{x: 0.8, y: 0.8}' },
+                    { center: { x: 0.2, y: 0.8 }, label: '{x: 0.2, y: 0.8}' },
+                    { center: { x: 0.8, y: 0.2 }, label: '{x: 0.8, y: 0.2}' },
+                ],
+            },
+        ];
+        return (_jsx(Box, { lx: { flexDirection: 'column', gap: 's40' }, children: positions.map(({ title, isSquare, items }) => (_jsxs(Box, { children: [_jsx(Text, { typography: 'heading5SemiBold', lx: { color: 'base', marginBottom: 's16' }, children: title }), _jsx(Box, { lx: { flexDirection: 'row', flexWrap: 'wrap', gap: 's24' }, children: items.map(({ center, label }) => (_jsxs(Box, { lx: { gap: 's8', alignItems: 'center' }, children: [_jsx(RadialGradient, { center: center, stops: [
+                                        { color: 'accent' },
+                                        { color: 'active', opacity: 0 },
+                                    ], lx: {
+                                        height: 's72',
+                                        width: isSquare ? 's72' : 's144',
+                                        borderRadius: 'md',
+                                        borderColor: 'active',
+                                        borderWidth: 's1',
+                                    } }), _jsx(Text, { typography: 'body4', lx: { color: 'base' }, children: label })] }, label))) })] }, title))) }));
+    },
+};
+export const WithChildren = {
+    args: {
+        stops: [{ color: 'accent' }, { color: 'active', opacity: 0 }],
+        lx: {
+            padding: 's24',
+            borderRadius: 'lg',
+            width: 's288',
+            borderColor: 'active',
+            borderWidth: 's1',
+        },
+    },
+    render: (args) => (_jsxs(RadialGradient, { ...args, children: [_jsx(Text, { typography: 'heading2SemiBold', lx: { color: 'base' }, children: "With Children" }), _jsx(Text, { typography: 'body2', lx: { color: 'base', marginTop: 's8' }, children: "Adapt height based on content." }), _jsx(Text, { typography: 'body3', lx: { color: 'base', marginTop: 's8' }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos" })] })),
+};
+export const WithMultipleStops = {
+    args: {
+        stops: [
+            { color: 'warning', offset: 0, opacity: 1 },
+            { color: 'accent', offset: 0.5, opacity: 1 },
+            { color: 'error', offset: 1, opacity: 1 },
+        ],
+        lx: {
+            height: 's80',
+            width: 's80',
+            borderRadius: 'full',
+        },
+    },
+};

package/dist/src/lib/Components/Utility/Gradient/RadialGradient/index.d.ts

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

package/dist/src/lib/Components/Utility/Gradient/RadialGradient/index.d.ts.map

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

package/dist/src/lib/Components/Utility/Gradient/RadialGradient/index.js

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

package/dist/src/lib/Components/Utility/Gradient/RadialGradient/types.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { StyledViewProps } from '../../../../../styles';
+import { GradientStop } from '../gradient.types';
+export type RadialGradientCenter = {
+    /**
+     * Horizontal position (0 = left, 1 = right)
+     */
+    x: number;
+    /**
+     * Vertical position (0 = top, 1 = bottom)
+     */
+    y: number;
+};
+export type RadialGradientProps = {
+    /**
+     * Gradient color stops
+     * Takes an object of color, offset and opacity.
+     * Offset is a number between 0 and 1.
+     * Opacity is a number between 0 and 1.
+     */
+    stops: GradientStop[];
+    /**
+     * Optional children to render on top of the gradient
+     */
+    children?: ReactNode;
+    /**
+     * Center position of the gradient.
+     * @default { x: 0.5, y: 0.5 }
+     */
+    center?: RadialGradientCenter;
+} & StyledViewProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/Utility/Gradient/RadialGradient/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Utility/Gradient/RadialGradient/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;;OAKG;IACH,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B,GAAG,eAAe,CAAC"}

package/dist/src/lib/Components/Utility/Gradient/RadialGradient/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/Components/Utility/Gradient/gradient.types.d.ts

@@ -0,0 +1,21 @@
+import type { LumenStyleSheetTheme } from '../../../../styles';
+/**
+ * Background color token from the theme
+ */
+export type BackgroundColorToken = keyof LumenStyleSheetTheme['colors']['bg'];
+export type GradientStop = {
+    /**
+     * Color value - can be a design token key (e.g., 'accent', 'error')
+     * or a raw color string (e.g., '#FF6B6B', 'rgba(...)')
+     */
+    color: BackgroundColorToken | (string & {});
+    /**
+     * Position of the stop (0-1). If omitted, stops are auto-spread evenly.
+     */
+    offset?: number;
+    /**
+     * Opacity of the color (0-1).
+     */
+    opacity?: number;
+};
+//# sourceMappingURL=gradient.types.d.ts.map

package/dist/src/lib/Components/Utility/Gradient/gradient.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient.types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Gradient/gradient.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,MAAM,oBAAoB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC;AAE9E,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,KAAK,EAAE,oBAAoB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}

package/dist/src/lib/Components/Utility/Gradient/gradient.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/Components/Utility/Gradient/utils/resolveGradientColor.d.ts

@@ -0,0 +1,21 @@
+import type { LumenStyleSheetTheme } from '../../../../../styles';
+import type { GradientStop } from '../gradient.types';
+type BackgroundColors = LumenStyleSheetTheme['colors']['bg'];
+/**
+ * Resolves a gradient stop color to a concrete color value.
+ * If the color is a design token, it's resolved from the theme.
+ * If it's a raw color string, it's returned as-is.
+ */
+export declare const resolveGradientColor: (color: string, bgColors: BackgroundColors) => string;
+/**
+ * Processes gradient stops by:
+ * 1. Resolving color tokens to actual values
+ * 2. Auto-spreading offsets if not provided
+ */
+export declare const processGradientStops: (stops: GradientStop[], bgColors: BackgroundColors) => Array<{
+    color: string;
+    offset: number;
+    opacity: number;
+}>;
+export {};
+//# sourceMappingURL=resolveGradientColor.d.ts.map

package/dist/src/lib/Components/Utility/Gradient/utils/resolveGradientColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveGradientColor.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Utility/Gradient/utils/resolveGradientColor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,KAAK,EAAwB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE5E,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC;AAI7D;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,OAAO,MAAM,EACb,UAAU,gBAAgB,KACzB,MAMF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,OAAO,YAAY,EAAE,EACrB,UAAU,gBAAgB,KACzB,KAAK,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAuBA,CAAC"}

package/dist/src/lib/Components/Utility/Gradient/utils/resolveGradientColor.js

@@ -0,0 +1,38 @@
+const DEFAULT_OPACITY = 1;
+const DEFAULT_OFFSET = 0;
+/**
+ * Resolves a gradient stop color to a concrete color value.
+ * If the color is a design token, it's resolved from the theme.
+ * If it's a raw color string, it's returned as-is.
+ */
+export const resolveGradientColor = (color, bgColors) => {
+    const isBackgroundToken = color in bgColors;
+    if (isBackgroundToken) {
+        return bgColors[color];
+    }
+    return color;
+};
+/**
+ * Processes gradient stops by:
+ * 1. Resolving color tokens to actual values
+ * 2. Auto-spreading offsets if not provided
+ */
+export const processGradientStops = (stops, bgColors) => {
+    const stopCount = stops.length;
+    return stops.map((stop, index) => {
+        const resolvedColor = resolveGradientColor(stop.color, bgColors);
+        // Auto-spread offsets if not provided
+        // For n stops: 0, 1/(n-1), 2/(n-1), ..., 1
+        const offset = stop.offset !== undefined
+            ? stop.offset
+            : stopCount === 1
+                ? DEFAULT_OFFSET
+                : index / (stopCount - 1);
+        const opacity = stop.opacity !== undefined ? stop.opacity : DEFAULT_OPACITY;
+        return {
+            color: resolvedColor,
+            offset,
+            opacity,
+        };
+    });
+};

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

@@ -1,4 +1,6 @@
 export * from './Pressable';
 export * from './Box';
 export * from './Text';
+export * from './Gradient/LinearGradient';
+export * from './Gradient/RadialGradient';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Utility/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Utility/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC"}

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

@@ -1,3 +1,5 @@
 export * from './Pressable';
 export * from './Box';
 export * from './Text';
+export * from './Gradient/LinearGradient';
+export * from './Gradient/RadialGradient';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -33,7 +33,7 @@
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.0.40",
+    "@ledgerhq/lumen-design-core": "0.0.41",
     "react": "~18.3.1",
     "react-native": "~0.77.3",
     "react-native-reanimated": "^3.0.0",

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>