@ledgerhq/lumen-ui-rnative 0.0.52 → 0.0.53

package/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.test.tsx

@@ -0,0 +1,69 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+import React, { createRef } from 'react';
+import { Text, View } from 'react-native';
+
+import { ThemeProvider } from '../../../ThemeProvider/ThemeProvider';
+import { RadialGradient } from './RadialGradient';
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+describe('RadialGradient', () => {
+  it('should have correct display name', () => {
+    expect(RadialGradient.displayName).toBe('RadialGradient');
+  });
+
+  it('should render children', () => {
+    renderWithProvider(
+      <RadialGradient stops={[{ color: '#FF6B6B' }, { color: '#4ECDC4' }]}>
+        <Text>Child Content</Text>
+      </RadialGradient>,
+    );
+    expect(screen.getByText('Child Content')).toBeTruthy();
+  });
+
+  it('should forward ref', () => {
+    const ref = createRef<View>();
+    renderWithProvider(
+      <RadialGradient
+        ref={ref}
+        stops={[{ color: '#FF6B6B' }, { color: '#4ECDC4' }]}
+      />,
+    );
+    expect(ref.current).toBeTruthy();
+  });
+
+  it('should resolve lx style tokens', () => {
+    renderWithProvider(
+      <RadialGradient
+        testID='radial-gradient'
+        stops={[{ color: '#FF6B6B' }, { color: '#4ECDC4' }]}
+        lx={{ padding: 's16', marginTop: 's8' }}
+      />,
+    );
+    const gradient = screen.getByTestId('radial-gradient');
+    expect(gradient.props.style.padding).toBe(16);
+    expect(gradient.props.style.marginTop).toBe(8);
+  });
+
+  it('should pass accessibility props', () => {
+    renderWithProvider(
+      <RadialGradient
+        testID='radial-gradient'
+        stops={[{ color: '#FF6B6B' }, { color: '#4ECDC4' }]}
+        accessibilityLabel='Decorative gradient'
+        accessible={false}
+      />,
+    );
+    const gradient = screen.getByTestId('radial-gradient');
+    expect(gradient.props.accessibilityLabel).toBe('Decorative gradient');
+    expect(gradient.props.accessible).toBe(false);
+  });
+});

package/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.tsx

@@ -0,0 +1,102 @@
+import { forwardRef, memo, useId, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import type { View } from 'react-native';
+import Svg, {
+  Defs,
+  RadialGradient as SvgRadialGradient,
+  Rect,
+  Stop,
+} from 'react-native-svg';
+import { useTheme } from '../../../../../styles';
+import { Box } from '../../Box';
+import { processGradientStops } from '../utils/resolveGradientColor';
+import type { RadialGradientProps } from './types';
+
+const DEFAULT_CENTER = { x: 0.5, y: 0.5 };
+
+const styles = StyleSheet.create({
+  gradient: {
+    ...StyleSheet.absoluteFillObject,
+    width: '100%',
+    height: '100%',
+  },
+});
+
+/**
+ * RadialGradient - A container component that renders a radial gradient background.
+ *
+ * Uses react-native-svg to render gradients that work consistently across platforms.
+ * Extends Box, so it supports all lx style props for layout and sizing.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/utility-radialgradient--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { RadialGradient } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage (center to edge)
+ * <RadialGradient
+ *   lx={{ height: 's200', borderRadius: 'lg' }}
+ *   stops={[
+ *     { color: '#845EC2', offset: 0 },
+ *     { color: '#FF6F91', offset: 1 },
+ *   ]}
+ * />
+ * ```
+ */
+export const RadialGradient = memo(
+  forwardRef<View, RadialGradientProps>(
+    ({ center = DEFAULT_CENTER, stops, children, lx = {}, ...props }, ref) => {
+      const gradientId = useId();
+      const { theme } = useTheme();
+
+      const processedStops = useMemo(() => {
+        return processGradientStops(stops, theme.colors.bg);
+      }, [stops, theme.colors.bg]);
+
+      const centerCoordinates = useMemo(() => {
+        return {
+          cx: `${center.x * 100}%`,
+          cy: `${center.y * 100}%`,
+        };
+      }, [center]);
+
+      return (
+        <Box ref={ref} lx={{ overflow: 'hidden', ...lx }} {...props}>
+          <Svg style={styles.gradient} preserveAspectRatio='none'>
+            <Defs>
+              <SvgRadialGradient
+                id={gradientId}
+                cx={centerCoordinates.cx}
+                cy={centerCoordinates.cy}
+                rx='50%'
+                ry='50%'
+                fx={centerCoordinates.cx}
+                fy={centerCoordinates.cy}
+              >
+                {processedStops.map((stop, index) => (
+                  <Stop
+                    key={index}
+                    offset={`${stop.offset * 100}%`}
+                    stopColor={stop.color}
+                    stopOpacity={stop.opacity}
+                  />
+                ))}
+              </SvgRadialGradient>
+            </Defs>
+            <Rect
+              x='0'
+              y='0'
+              width='100%'
+              height='100%'
+              fill={`url(#${gradientId})`}
+            />
+          </Svg>
+          {children}
+        </Box>
+      );
+    },
+  ),
+);
+
+RadialGradient.displayName = 'RadialGradient';

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

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

package/src/lib/Components/Utility/Gradient/RadialGradient/types.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;

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

@@ -0,0 +1,22 @@
+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;
+};

package/src/lib/Components/Utility/Gradient/utils/resolveGradientColor.test.ts

@@ -0,0 +1,144 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import {
+  resolveGradientColor,
+  processGradientStops,
+} from './resolveGradientColor';
+
+const bgColors = ledgerLiveThemes.dark.colors.bg;
+
+describe('resolveGradientColor', () => {
+  describe('resolveGradientColor', () => {
+    it('should resolve background tokens to actual color values', () => {
+      const accentColor = resolveGradientColor('accent', bgColors);
+      expect(accentColor).toBe(bgColors.accent);
+      expect(accentColor).toMatch(/^#|^rgb/);
+    });
+
+    it('should pass through raw hex colors unchanged', () => {
+      expect(resolveGradientColor('#FF6B6B', bgColors)).toBe('#FF6B6B');
+      expect(resolveGradientColor('#000', bgColors)).toBe('#000');
+    });
+
+    it('should pass through rgb/rgba colors unchanged', () => {
+      expect(resolveGradientColor('rgb(255, 0, 0)', bgColors)).toBe(
+        'rgb(255, 0, 0)',
+      );
+      expect(resolveGradientColor('rgba(255, 0, 0, 0.5)', bgColors)).toBe(
+        'rgba(255, 0, 0, 0.5)',
+      );
+    });
+
+    it('should pass through named CSS colors unchanged', () => {
+      expect(resolveGradientColor('red', bgColors)).toBe('red');
+      expect(resolveGradientColor('blue', bgColors)).toBe('blue');
+    });
+  });
+
+  describe('processGradientStops', () => {
+    it('should resolve color tokens in stops', () => {
+      const stops = [{ color: 'accent' }, { color: 'error' }];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].color).toBe(bgColors.accent);
+      expect(processed[1].color).toBe(bgColors.error);
+    });
+
+    it('should preserve raw colors in stops', () => {
+      const stops = [{ color: '#FF6B6B' }, { color: '#4ECDC4' }];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].color).toBe('#FF6B6B');
+      expect(processed[1].color).toBe('#4ECDC4');
+    });
+
+    it('should auto-spread offsets for 2 stops', () => {
+      const stops = [{ color: '#FF6B6B' }, { color: '#4ECDC4' }];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].offset).toBe(0);
+      expect(processed[1].offset).toBe(1);
+    });
+
+    it('should auto-spread offsets for 3 stops', () => {
+      const stops = [
+        { color: '#FF6B6B' },
+        { color: '#FFD93D' },
+        { color: '#4ECDC4' },
+      ];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].offset).toBe(0);
+      expect(processed[1].offset).toBe(0.5);
+      expect(processed[2].offset).toBe(1);
+    });
+
+    it('should auto-spread offsets for 4 stops', () => {
+      const stops = [
+        { color: '#FF6B6B' },
+        { color: '#FFD93D' },
+        { color: '#6BCB77' },
+        { color: '#4ECDC4' },
+      ];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].offset).toBeCloseTo(0);
+      expect(processed[1].offset).toBeCloseTo(0.333, 2);
+      expect(processed[2].offset).toBeCloseTo(0.666, 2);
+      expect(processed[3].offset).toBeCloseTo(1);
+    });
+
+    it('should preserve explicit offsets', () => {
+      const stops = [
+        { color: '#FF6B6B', offset: 0.1 },
+        { color: '#FFD93D', offset: 0.3 },
+        { color: '#4ECDC4', offset: 0.9 },
+      ];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].offset).toBe(0.1);
+      expect(processed[1].offset).toBe(0.3);
+      expect(processed[2].offset).toBe(0.9);
+    });
+
+    it('should default opacity to 1', () => {
+      const stops = [{ color: '#FF6B6B' }, { color: '#4ECDC4' }];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].opacity).toBe(1);
+      expect(processed[1].opacity).toBe(1);
+    });
+
+    it('should preserve explicit opacity', () => {
+      const stops = [
+        { color: '#FF6B6B', opacity: 0.5 },
+        { color: '#4ECDC4', opacity: 0.8 },
+      ];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].opacity).toBe(0.5);
+      expect(processed[1].opacity).toBe(0.8);
+    });
+
+    it('should handle single stop', () => {
+      const stops = [{ color: '#FF6B6B' }];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].offset).toBe(0);
+      expect(processed[0].opacity).toBe(1);
+    });
+
+    it('should handle mixed token and raw colors', () => {
+      const stops = [
+        { color: 'accent', offset: 0 },
+        { color: '#FF6B6B', offset: 0.5 },
+        { color: 'error', offset: 1 },
+      ];
+      const processed = processGradientStops(stops, bgColors);
+
+      expect(processed[0].color).toBe(bgColors.accent);
+      expect(processed[1].color).toBe('#FF6B6B');
+      expect(processed[2].color).toBe(bgColors.error);
+    });
+  });
+});

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

@@ -0,0 +1,59 @@
+import type { LumenStyleSheetTheme } from '../../../../../styles';
+import type { BackgroundColorToken, GradientStop } from '../gradient.types';
+
+type BackgroundColors = LumenStyleSheetTheme['colors']['bg'];
+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: string,
+  bgColors: BackgroundColors,
+): string => {
+  const isBackgroundToken = color in bgColors;
+  if (isBackgroundToken) {
+    return bgColors[color as BackgroundColorToken];
+  }
+  return color;
+};
+
+/**
+ * Processes gradient stops by:
+ * 1. Resolving color tokens to actual values
+ * 2. Auto-spreading offsets if not provided
+ */
+export const processGradientStops = (
+  stops: GradientStop[],
+  bgColors: BackgroundColors,
+): Array<{
+  color: string;
+  offset: number;
+  opacity: number;
+}> => {
+  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/src/lib/Components/Utility/index.ts

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