@ledgerhq/lumen-ui-rnative 0.0.51 → 0.0.53

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from 'src/styles';
+import { Box } from '../../Box';
+import { Text } from '../../Text';
+import { LinearGradient } from './LinearGradient';
+const meta = {
+    component: LinearGradient,
+    title: 'Utility/LinearGradient',
+    parameters: {
+        layout: 'centered',
+        backgrounds: { default: 'light' },
+        docs: {
+            source: {
+                language: 'tsx',
+                format: true,
+                type: 'code',
+            },
+        },
+    },
+};
+export default meta;
+export const Base = {
+    args: {
+        direction: 'to-bottom',
+        stops: [{ color: 'accent' }, { color: 'active', opacity: 0 }],
+        lx: {
+            width: 's192',
+            height: 's56',
+            borderRadius: 'lg',
+        },
+    },
+};
+export const DirectionShowcase = {
+    render: () => {
+        const orientations = [
+            'to-bottom',
+            'to-right',
+            'to-top',
+            'to-left',
+            'to-bottomright',
+            'to-bottomleft',
+            'to-topright',
+            'to-topleft',
+            0,
+            90,
+            180,
+            270,
+        ];
+        return (_jsx(Box, { lx: { flexDirection: 'row', flexWrap: 'wrap', gap: 's20' }, children: orientations.map((orientation) => {
+                return (_jsxs(Box, { lx: { gap: 's4' }, children: [_jsx(LinearGradient, { direction: orientation, stops: [{ color: 'accent' }, { color: 'active', opacity: 0 }], lx: { height: 's40', width: 's176', borderRadius: 'md' } }), _jsx(Text, { typography: 'body4', lx: { color: 'base' }, children: orientation })] }, orientation));
+            }) }));
+    },
+};
+export const WithChildren = {
+    args: {
+        direction: 'to-bottomright',
+        stops: [{ color: 'accent' }, { color: 'active', opacity: 0, offset: 0.75 }],
+        lx: {
+            padding: 's24',
+            borderRadius: 'lg',
+            width: 's288',
+        },
+    },
+    render: (args) => (_jsxs(LinearGradient, { ...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 consectetur adipisicing elit adipisicing elit. Mas adename labin anet." })] })),
+};
+export const WithMultipleStops = {
+    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 (_jsxs(Box, { lx: { gap: 's12' }, children: [_jsx(LinearGradient, { ...args }), _jsxs(Box, { lx: { flexDirection: 'row', justifyContent: 'space-between' }, children: [_jsx(Text, { children: "accent" }), _jsx(Text, { children: "warning" }), _jsx(Text, { children: "errorStrong" })] })] }));
+    },
+};
+export const CryptoGradients = {
+    args: {
+        direction: 'to-bottomright',
+        lx: {
+            borderRadius: 'md',
+            height: 's56',
+            width: 's288',
+        },
+    },
+    render: (args) => {
+        const { theme } = useTheme();
+        return (_jsx(Box, { lx: {
+                gap: 's20',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+            }, children: Object.entries(theme.colors.gradients.crypto).map(([key, gradient]) => (_jsxs(Box, { lx: { gap: 's4' }, children: [_jsx(LinearGradient, { ...args, lx: {
+                            height: 's40',
+                            width: 's176',
+                            borderRadius: 'md',
+                        }, stops: gradient }), _jsx(Text, { typography: 'body4', lx: { color: 'base' }, children: key })] }, key))) }));
+    },
+};

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { StyledViewProps } from '../../../../../styles';
+import { GradientStop } from '../gradient.types';
+export type GradientCoordinates = {
+    x1: string;
+    y1: string;
+    x2: string;
+    y2: string;
+};
+export type LinearGradientDirection = 'to-bottom' | 'to-top' | 'to-left' | 'to-right' | 'to-bottomright' | 'to-bottomleft' | 'to-topright' | 'to-topleft';
+/**
+ * Props for the LinearGradient component.
+ */
+export type LinearGradientProps = {
+    /**
+     * Gradient color stops
+     */
+    stops: GradientStop[];
+    /**
+     * Optional children to render on top of the gradient
+     */
+    children?: ReactNode;
+    /**
+     * Direction preset for the gradient.
+     * @default 'to-bottom'
+     *
+     * Can be a direction preset or a custom angle in degrees.
+     * 0° points to the right, 90° points down.
+     */
+    direction?: LinearGradientDirection | number;
+} & StyledViewProps;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Utility/Gradient/LinearGradient/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;AAEjD,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAC/B,WAAW,GACX,QAAQ,GACR,SAAS,GACT,UAAU,GACV,gBAAgB,GAChB,eAAe,GACf,aAAa,GACb,YAAY,CAAC;AAEjB;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,uBAAuB,GAAG,MAAM,CAAC;CAC9C,GAAG,eAAe,CAAC"}

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

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

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

@@ -0,0 +1,31 @@
+import type { View } from 'react-native';
+/**
+ * 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 declare const RadialGradient: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    stops: import("../gradient.types").GradientStop[];
+    children?: import("react").ReactNode;
+    center?: import("./types").RadialGradientCenter;
+} & {
+    lx?: import("../../../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & import("react").RefAttributes<View>>>;
+//# sourceMappingURL=RadialGradient.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGradient.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAsBzC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,cAAc;;;;;;4EAqD1B,CAAC"}

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useId, useMemo } from 'react';
+import { StyleSheet } 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';
+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(({ 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 (_jsxs(Box, { ref: ref, lx: { overflow: 'hidden', ...lx }, ...props, children: [_jsxs(Svg, { style: styles.gradient, preserveAspectRatio: 'none', children: [_jsx(Defs, { children: _jsx(SvgRadialGradient, { id: gradientId, cx: centerCoordinates.cx, cy: centerCoordinates.cy, rx: '50%', ry: '50%', fx: centerCoordinates.cx, fy: centerCoordinates.cy, children: processedStops.map((stop, index) => (_jsx(Stop, { offset: `${stop.offset * 100}%`, stopColor: stop.color, stopOpacity: stop.opacity }, index))) }) }), _jsx(Rect, { x: '0', y: '0', width: '100%', height: '100%', fill: `url(#${gradientId})` })] }), children] }));
+}));
+RadialGradient.displayName = 'RadialGradient';

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { RadialGradient } from './RadialGradient';
+declare const meta: Meta<typeof RadialGradient>;
+export default meta;
+type Story = StoryObj<typeof RadialGradient>;
+export declare const Base: Story;
+export declare const CenterPositionShowcase: Story;
+export declare const WithChildren: Story;
+export declare const WithMultipleStops: Story;
+//# sourceMappingURL=RadialGradient.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGradient.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,IAAI,EAAE,KASlB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAuEpC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwB1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAC"}

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.51",
+  "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.39",
+    "@ledgerhq/lumen-design-core": "0.0.41",
     "react": "~18.3.1",
     "react-native": "~0.77.3",
     "react-native-reanimated": "^3.0.0",

package/src/i18n/locales/de.json

@@ -1,3 +1,23 @@
 {
-  "components": {}
-}
+  "components": {
+    "addressInput": {
+      "qrCodeAriaLabel": "QR-Code scannen"
+    },
+    "baseInput": {
+      "clearInputAriaLabel": "Eingabe löschen"
+    },
+    "spinner": {
+      "loadingAriaLabel": "Wird geladen"
+    },
+    "bottomSheetHeader": {
+      "goBackAriaLabel": "Zurück",
+      "closeAriaLabel": "Schließen"
+    },
+    "banner": {
+      "closeAriaLabel": "Schließen"
+    },
+    "link": {
+      "opensInNewTabAriaLabel": "(Öffnet in neuem Tab)"
+    }
+  }
+}

package/src/i18n/locales/en.json

@@ -15,6 +15,9 @@
     },
     "banner": {
       "closeAriaLabel": "Close"
+    },
+    "link": {
+      "opensInNewTabAriaLabel": "(opens in a new tab)"
     }
   }
-}
+}

package/src/i18n/locales/es.json

@@ -1,3 +1,23 @@
 {
-  "components": {}
-}
+  "components": {
+    "addressInput": {
+      "qrCodeAriaLabel": "Escanear código QR"
+    },
+    "baseInput": {
+      "clearInputAriaLabel": "Borrar entrada"
+    },
+    "spinner": {
+      "loadingAriaLabel": "Cargando"
+    },
+    "bottomSheetHeader": {
+      "goBackAriaLabel": "Volver",
+      "closeAriaLabel": "Cerrar"
+    },
+    "banner": {
+      "closeAriaLabel": "Cerrar"
+    },
+    "link": {
+      "opensInNewTabAriaLabel": "(se abre en una pestaña nueva)"
+    }
+  }
+}

package/src/i18n/locales/fr.json

@@ -1,7 +1,7 @@
 {
   "components": {
     "addressInput": {
-      "qrCodeAriaLabel": "Scanner le QR code"
+      "qrCodeAriaLabel": "Scanner le code QR"
     },
     "baseInput": {
       "clearInputAriaLabel": "Effacer la saisie"
@@ -15,6 +15,9 @@
     },
     "banner": {
       "closeAriaLabel": "Fermer"
+    },
+    "link": {
+      "opensInNewTabAriaLabel": "(s'ouvre dans un nouvel onglet)"
     }
   }
-}
+}