@ledgerhq/lumen-ui-rnative 0.0.52 → 0.0.53

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "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.40",
     "react": "~18.3.1",
     "react-native": "~0.77.3",
     "react-native-reanimated": "^3.0.0",

package/dist/src/lib/Components/BaseInput/BaseInput.d.ts

@@ -3,6 +3,7 @@ import { TextInput } from 'react-native';
 export declare const BaseInput: React.ForwardRefExoticComponent<{
     label?: string;
     style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     inputStyle?: import("react-native").StyleProp<import("react-native").TextStyle>;
     labelStyle?: import("react-native").StyleProp<import("react-native").TextStyle>;
     errorMessage?: string;

package/dist/src/lib/Components/BaseInput/BaseInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAA8B,SAAS,EAAQ,MAAM,cAAc,CAAC;AAQ3E,eAAO,MAAM,SAAS;;;;;;;;;;;;sEAqJrB,CAAC"}
+{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BaseInput/BaseInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAA8B,SAAS,EAAQ,MAAM,cAAc,CAAC;AAQ3E,eAAO,MAAM,SAAS;;;;;;;;;;;;;sEA0JrB,CAAC"}

package/dist/src/lib/Components/BaseInput/BaseInput.js

@@ -6,7 +6,7 @@ import { useStyleSheet, useTheme } from '../../../styles';
 import { DeleteCircleFill } from '../../Symbols/Icons/DeleteCircleFill';
 import { InteractiveIcon } from '../InteractiveIcon';
 import { Box, Pressable } from '../Utility';
-export const BaseInput = React.forwardRef(({ lx, style, inputStyle, labelStyle, label, errorMessage, hideClearButton, onChangeText: onChangeTextProp, editable = true, prefix, suffix, ...props }, ref) => {
+export const BaseInput = React.forwardRef(({ lx, style, containerStyle, inputStyle, labelStyle, label, errorMessage, hideClearButton, onChangeText: onChangeTextProp, editable = true, prefix, suffix, ...props }, ref) => {
     const { t } = useCommonTranslation();
     const { theme } = useTheme();
     const inputRef = useRef(null);
@@ -56,7 +56,11 @@ export const BaseInput = React.forwardRef(({ lx, style, inputStyle, labelStyle,
         hasError: !!errorMessage,
         isEditable: editable,
     });
-    return (_jsxs(Box, { lx: lx, style: style, children: [_jsxs(Pressable, { style: styles.container, onPress: () => inputRef.current?.focus(), disabled: !editable, children: [prefix, _jsx(TextInput, { ref: inputRef, value: value, style: [styles.input, { lineHeight: 0 }, inputStyle], onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onChangeText: handleChangeText, editable: editable, autoCapitalize: 'none', autoCorrect: false, selectionColor: theme.colors.text.active, placeholderTextColor: theme.colors.text.muted, ...props }), label && (_jsx(Animated.Text, { style: [
+    return (_jsxs(Box, { lx: lx, style: style, children: [_jsxs(Pressable, { style: StyleSheet.flatten([styles.container, containerStyle]), onPress: () => inputRef.current?.focus(), disabled: !editable, children: [prefix, _jsx(TextInput, { ref: inputRef, value: value, style: StyleSheet.flatten([
+                            styles.input,
+                            { lineHeight: 0 },
+                            inputStyle,
+                        ]), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onChangeText: handleChangeText, editable: editable, autoCapitalize: 'none', autoCorrect: false, selectionColor: theme.colors.text.active, placeholderTextColor: theme.colors.text.muted, ...props }), label && (_jsx(Animated.Text, { style: [
                             floatingLabelStyles.label,
                             floatingLabelStyles.animatedLabel,
                             labelStyle,

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

@@ -6,9 +6,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/dist/src/lib/Components/BaseInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BaseInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAC/B,QAAQ,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BaseInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAC/B,QAAQ,CAAC"}

package/dist/src/lib/Components/SearchInput/SearchInput.d.ts

@@ -2,5 +2,7 @@ import React from 'react';
 import { TextInput } from 'react-native';
 export declare const SearchInput: React.ForwardRefExoticComponent<Omit<import("../BaseInput").BaseInputProps, "label" | "prefix"> & {
     lx?: import("../../../styles").LumenViewStyle;
-} & import("react-native").ViewProps & React.RefAttributes<TextInput>>;
+} & import("react-native").ViewProps & {
+    appearance?: "plain" | "transparent";
+} & React.RefAttributes<TextInput>>;
 //# sourceMappingURL=SearchInput.d.ts.map

package/dist/src/lib/Components/SearchInput/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzC,eAAO,MAAM,WAAW;;sEAWtB,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,eAAO,MAAM,WAAW;;;;mCAqBvB,CAAC"}

package/dist/src/lib/Components/SearchInput/SearchInput.js

@@ -1,8 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import { useStyleSheet } from '../../../styles';
 import { Search as SearchIcon } from '../../Symbols';
 import { BaseInput } from '../BaseInput';
-export const SearchInput = React.forwardRef((props, ref) => {
-    return (_jsx(BaseInput, { ref: ref, prefix: _jsx(SearchIcon, { size: 20, color: 'muted', accessible: false }), ...props }));
+export const SearchInput = React.forwardRef(({ appearance = 'plain', style, containerStyle, inputStyle, ...props }, ref) => {
+    const styles = useAppearanceStyles(appearance);
+    return (_jsx(BaseInput, { ref: ref, prefix: _jsx(SearchIcon, { size: 20, color: 'muted', accessible: false }), style: style, containerStyle: [containerStyle, styles.container], inputStyle: [inputStyle, styles.input], ...props }));
 });
+const useAppearanceStyles = (appearance) => {
+    return useStyleSheet((t) => ({
+        container: appearance === 'transparent'
+            ? { backgroundColor: t.colors.bg.mutedTransparent }
+            : {},
+        input: { backgroundColor: 'transparent' },
+    }), [appearance]);
+};
 SearchInput.displayName = 'SearchInput';

package/dist/src/lib/Components/SearchInput/SearchInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA8BlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AA6B1C,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KASjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAOnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAC"}
+{"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAiClC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AA6B1C,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KASjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAOnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAC"}

package/dist/src/lib/Components/SearchInput/SearchInput.stories.js

@@ -5,6 +5,9 @@ import { SearchInput } from './SearchInput';
 const meta = {
     component: SearchInput,
     title: 'Input/SearchInput',
+    args: {
+        appearance: 'plain',
+    },
     parameters: {
         docs: {
             source: {

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

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

package/dist/src/lib/Components/SearchInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,OAAO,CAAC,GACrE,QAAQ,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,OAAO,CAAC,GACrE,QAAQ,GAAG;IACT;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACtC,CAAC"}

package/dist/src/lib/Components/Tile/Tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAIhD,OAAO,EACL,gBAAgB,EAEhB,oBAAoB,EAEpB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AAoDjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,IAAI;;;;;;6HAoChB,CAAC;AAkBF;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;YAAW,aAAa;;CAM5C,CAAC;AAeF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW;8BAA6B,gBAAgB;;CAWpE,CAAC;AAwBF;;;;GAIG;AACH,eAAO,MAAM,SAAS;8BAA6B,cAAc;;CA6BhE,CAAC;AAwBF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe;+BAIzB,oBAAoB;;CA6BtB,CAAC"}
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAIhD,OAAO,EACL,gBAAgB,EAEhB,oBAAoB,EAEpB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AAqDjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,IAAI;;;;;;6HAoChB,CAAC;AAkBF;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;YAAW,aAAa;;CAM5C,CAAC;AAeF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW;8BAA6B,gBAAgB;;CAWpE,CAAC;AAwBF;;;;GAIG;AACH,eAAO,MAAM,SAAS;8BAA6B,cAAc;;CA6BhE,CAAC;AAwBF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe;+BAIzB,oBAAoB;;CA6BtB,CAAC"}

package/dist/src/lib/Components/Tile/Tile.js

@@ -22,6 +22,7 @@ const useRootStyles = ({ appearance, disabled, pressed, }) => {
                     position: 'relative',
                     flexDirection: 'column',
                     width: '100%',
+                    flex: 1,
                     alignItems: 'center',
                     gap: t.spacings.s8,
                     paddingHorizontal: t.spacings.s8,

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

@@ -0,0 +1,32 @@
+import type { View } from 'react-native';
+import type { LinearGradientDirection } from './types';
+/**
+ * LinearGradient - A container component that renders a linear 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-lineargradient--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { LinearGradient } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with direction preset
+ * <LinearGradient
+ *   direction="to-bottomright"
+ *   stops={[
+ *     { color: '#FF6B6B', offset: 0 },
+ *     { color: '#6BCB77', offset: 1 },
+ *   ]}
+ *   lx={{ height: 's200', borderRadius: 'lg' }}
+ * />
+ */
+export declare const LinearGradient: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    stops: import("../gradient.types").GradientStop[];
+    children?: import("react").ReactNode;
+    direction?: LinearGradientDirection | number;
+} & {
+    lx?: import("../../../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & import("react").RefAttributes<View>>>;
+//# sourceMappingURL=LinearGradient.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAUzC,OAAO,KAAK,EAEV,uBAAuB,EAExB,MAAM,SAAS,CAAC;AAwCjB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,cAAc;;;;;;4EA8C1B,CAAC"}

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

@@ -0,0 +1,75 @@
+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, LinearGradient as SvgLinearGradient, Rect, Stop, } from 'react-native-svg';
+import { useTheme } from '../../../../../styles';
+import { Box } from '../../Box';
+import { processGradientStops } from '../utils/resolveGradientColor';
+const DIRECTION_MAP = {
+    'to-bottom': { x1: '0%', y1: '0%', x2: '0%', y2: '100%' },
+    'to-top': { x1: '0%', y1: '100%', x2: '0%', y2: '0%' },
+    'to-right': { x1: '0%', y1: '0%', x2: '100%', y2: '0%' },
+    'to-left': { x1: '100%', y1: '0%', x2: '0%', y2: '0%' },
+    'to-bottomright': { x1: '0%', y1: '0%', x2: '100%', y2: '100%' },
+    'to-bottomleft': { x1: '100%', y1: '0%', x2: '0%', y2: '100%' },
+    'to-topright': { x1: '0%', y1: '100%', x2: '100%', y2: '0%' },
+    'to-topleft': { x1: '100%', y1: '100%', x2: '0%', y2: '0%' },
+};
+const angleToCoordinates = (angle) => {
+    const normalizedAngle = ((angle % 360) + 360) % 360;
+    // Convert to radians (CSS: 0° is up, going clockwise)
+    // SVG: we need to map this to x1,y1 -> x2,y2
+    const radians = ((normalizedAngle - 90) * Math.PI) / 180;
+    const x2 = Math.cos(radians) * 0.5 + 0.5;
+    const y2 = Math.sin(radians) * 0.5 + 0.5;
+    const x1 = 1 - x2;
+    const y1 = 1 - y2;
+    return {
+        x1: `${Math.round(x1 * 100)}%`,
+        y1: `${Math.round(y1 * 100)}%`,
+        x2: `${Math.round(x2 * 100)}%`,
+        y2: `${Math.round(y2 * 100)}%`,
+    };
+};
+const styles = StyleSheet.create({
+    gradient: {
+        ...StyleSheet.absoluteFillObject,
+        width: '100%',
+        height: '100%',
+    },
+});
+/**
+ * LinearGradient - A container component that renders a linear 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-lineargradient--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { LinearGradient } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with direction preset
+ * <LinearGradient
+ *   direction="to-bottomright"
+ *   stops={[
+ *     { color: '#FF6B6B', offset: 0 },
+ *     { color: '#6BCB77', offset: 1 },
+ *   ]}
+ *   lx={{ height: 's200', borderRadius: 'lg' }}
+ * />
+ */
+export const LinearGradient = memo(forwardRef(({ direction = 'to-bottom', stops, children, lx = {}, ...props }, ref) => {
+    const gradientId = useId();
+    const { theme } = useTheme();
+    const coordinates = useMemo(() => {
+        const isCustomAngle = typeof direction === 'number';
+        return isCustomAngle
+            ? angleToCoordinates(direction)
+            : DIRECTION_MAP[direction];
+    }, [direction]);
+    const processedStops = useMemo(() => processGradientStops(stops, theme.colors.bg), [stops, theme.colors.bg]);
+    return (_jsxs(Box, { ref: ref, lx: { overflow: 'hidden', ...lx }, ...props, children: [_jsxs(Svg, { style: styles.gradient, preserveAspectRatio: 'none', children: [_jsx(Defs, { children: _jsx(SvgLinearGradient, { id: gradientId, ...coordinates, 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] }));
+}));
+LinearGradient.displayName = 'LinearGradient';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGradient.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,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,KAUlB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwB1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA4B/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAyC7B,CAAC"}

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"}