@ledgerhq/lumen-ui-rnative 0.1.4 → 0.1.6

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

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

@@ -1 +1 @@
-{"version":3,"file":"AmountDisplay.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountDisplay/AmountDisplay.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,kBAAkB,EAInB,MAAM,SAAS,CAAC;AA6IjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,aAAa;+DAOvB,kBAAkB;;CA8DpB,CAAC"}
+{"version":3,"file":"AmountDisplay.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountDisplay/AmountDisplay.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,kBAAkB,EAInB,MAAM,SAAS,CAAC;AAmJjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,aAAa;+DAOvB,kBAAkB;;CA8DpB,CAAC"}

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

@@ -6,6 +6,7 @@ import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
 import { Pulse } from '../../Animations/Pulse';
+import { RuntimeConstants } from '../../utils';
 import { Box } from '../Utility';
 import { DIGITS, } from './types';
 const INTEGER_DIGIT_WIDTHS = {
@@ -91,7 +92,10 @@ const DigitStrip = memo(({ value, textStyle, animate, type }) => {
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: translateY.value }],
     }), [translateY]);
-    return (_jsx(Animated.View, { style: { height: lineHeight, overflow: 'hidden', width: width }, accessibilityValue: { text: String(value) }, children: _jsx(Animated.View, { style: [animatedStyle, { alignItems: 'center' }], children: DIGITS.map((d) => (_jsx(Text, { style: textStyle, children: d }, d))) }) }));
+    return (_jsx(Animated.View, { style: { height: lineHeight, overflow: 'hidden', width: width }, accessibilityValue: { text: String(value) }, children: _jsx(Animated.View, { style: [animatedStyle, { alignItems: 'center' }], children: DIGITS.map((d) => (_jsx(Text, { style: [
+                    textStyle,
+                    RuntimeConstants.isAndroid && { height: lineHeight },
+                ], children: d }, d))) }) }));
 });
 const DigitStripList = memo(({ items, textStyle, animate, type }) => {
     return items.map((item, index) => {

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

@@ -3,7 +3,7 @@ export declare function SegmentedControlButton({ value, children, icon: Icon, on
 export declare namespace SegmentedControlButton {
     var displayName: string;
 }
-export declare function SegmentedControl({ selectedValue, onSelectedChange, accessibilityLabel, children, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedControl({ selectedValue, onSelectedChange, accessibilityLabel, children, disabled, appearance, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace SegmentedControl {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,2BAA2B,EAC3B,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAIjB,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EACP,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAkC7B;yBAxCe,sBAAsB;;;AA4EtC,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAwEvB;yBA9Ee,gBAAgB"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,2BAA2B,EAC3B,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAMjB,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EACP,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAqC7B;yBA3Ce,sBAAsB;;;AA2FtC,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,UAAyB,EACzB,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAkCvB;yBA1Ce,gBAAgB"}

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

@@ -1,24 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useRef } from 'react';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { useStyleSheet } from '../../../styles';
-import { durations, easingCurves } from '../../Animations/constants';
 import { Box, Pressable, Text } from '../Utility';
 import { SegmentedControlContextProvider, useSegmentedControlContext, } from './SegmentedControlContext';
-const ICON_SIZE = 16;
+import { usePillLayout, useSegmentedControlSelectedIndex, } from './usePillLayout';
 export function SegmentedControlButton({ value, children, icon: Icon, onPress, ...props }) {
-    const styles = useButtonStyles();
-    const { selectedValue, onSelectedChange } = useSegmentedControlContext();
+    const { selectedValue, onSelectedChange, disabled } = useSegmentedControlContext();
     const selected = selectedValue === value;
+    const styles = useButtonStyles({ selected, disabled });
     function handlePress() {
-        onSelectedChange(value);
-        onPress?.();
+        if (!disabled) {
+            onSelectedChange(value);
+            onPress?.();
+        }
     }
-    return (_jsx(Pressable, { onPress: handlePress, accessibilityState: { selected }, style: styles.button, ...props, children: _jsxs(Box, { style: styles.content, children: [Icon && (_jsx(Box, { style: styles.iconWrap, children: _jsx(Icon, { size: ICON_SIZE }) })), _jsx(Text, { typography: selected ? 'body2SemiBold' : 'body2', lx: { color: 'base' }, style: styles.label, children: children })] }) }));
+    return (_jsx(Pressable, { onPress: handlePress, disabled: disabled, accessibilityState: { selected, disabled }, style: styles.button, ...props, children: _jsxs(Box, { style: styles.content, children: [Icon && (_jsx(Box, { style: styles.iconWrap, children: _jsx(Icon, { size: 16, color: styles.textColor }) })), _jsx(Text, { typography: styles.typography, lx: { color: styles.textColor }, style: styles.label, children: children })] }) }));
 }
 SegmentedControlButton.displayName = 'SegmentedControlButton';
-function useButtonStyles() {
-    return useStyleSheet((t) => ({
+function useButtonStyles({ selected, disabled, }) {
+    const styles = useStyleSheet((t) => ({
         button: {
             flex: 1,
             flexDirection: 'row',
@@ -44,71 +44,44 @@ function useButtonStyles() {
             alignItems: 'center',
         },
     }), []);
+    const typography = selected
+        ? 'body2SemiBold'
+        : 'body2';
+    const textColor = selected && !disabled ? 'base' : 'muted';
+    return { ...styles, typography, textColor };
 }
-export function SegmentedControl({ selectedValue, onSelectedChange, accessibilityLabel, children, ...props }) {
-    const styles = useRootStyles();
-    const pillTranslateX = useSharedValue(0);
-    const pillWidth = useSharedValue(0);
-    const pillHeight = useSharedValue(0);
-    const hasLayoutRef = useRef(false);
-    const getSelectedIndex = useCallback(() => {
-        return React.Children.toArray(children).findIndex((child) => {
-            if (React.isValidElement(child) && child.props != null) {
-                return child.props.value === selectedValue;
-            }
-            return false;
-        });
-    }, [selectedValue, children]);
-    function onLayout(e) {
-        const { width, height } = e.nativeEvent.layout;
-        const count = React.Children.count(children);
-        const slotWidth = count > 0 ? width / count : 0;
-        pillWidth.value = slotWidth;
-        pillHeight.value = height;
-        if (!hasLayoutRef.current) {
-            hasLayoutRef.current = true;
-            const index = getSelectedIndex();
-            if (index >= 0) {
-                pillTranslateX.value = index * slotWidth;
-            }
-        }
-    }
-    useEffect(() => {
-        if (!hasLayoutRef.current)
-            return;
-        const index = getSelectedIndex();
-        if (index >= 0 && pillWidth.value > 0) {
-            pillTranslateX.value = withTiming(index * pillWidth.value, {
-                duration: durations['250'],
-                easing: easingCurves.bezier.default,
-            });
-        }
-    }, [pillWidth, pillTranslateX, getSelectedIndex]);
-    const animatedPillStyle = useAnimatedStyle(() => ({
-        transform: [{ translateX: pillTranslateX.value }],
-        width: pillWidth.value,
-        height: pillHeight.value,
-    }), [pillTranslateX, pillWidth, pillHeight]);
-    return (_jsx(SegmentedControlContextProvider, { value: { selectedValue, onSelectedChange }, children: _jsxs(Box, { accessibilityRole: 'radiogroup', accessibilityLabel: accessibilityLabel, onLayout: onLayout, style: styles.container, ...props, children: [children, _jsx(Animated.View, { style: [styles.pill, animatedPillStyle], pointerEvents: 'none' })] }) }));
+export function SegmentedControl({ selectedValue, onSelectedChange, accessibilityLabel, children, disabled, appearance = 'background', ...props }) {
+    const styles = useRootStyles({
+        disabled: Boolean(disabled),
+        appearance,
+    });
+    const selectedIndex = useSegmentedControlSelectedIndex(selectedValue, children);
+    const { onLayout, animatedPillStyle } = usePillLayout({
+        selectedIndex,
+        children,
+    });
+    return (_jsx(SegmentedControlContextProvider, { value: { selectedValue, onSelectedChange, disabled }, children: _jsxs(Box, { accessibilityRole: 'radiogroup', accessibilityLabel: accessibilityLabel, accessibilityState: { disabled }, onLayout: onLayout, style: styles.container, ...props, children: [children, _jsx(Animated.View, { style: [styles.pill, animatedPillStyle], pointerEvents: 'none' })] }) }));
 }
 SegmentedControl.displayName = 'SegmentedControl';
-function useRootStyles() {
+function useRootStyles({ disabled, appearance, }) {
     return useStyleSheet((t) => ({
         container: {
             flexDirection: 'row',
             alignItems: 'center',
             position: 'relative',
             width: '100%',
-            borderRadius: t.borderRadius.full,
-            backgroundColor: t.colors.bg.baseTransparent,
+            borderRadius: t.borderRadius.md,
+            backgroundColor: appearance === 'background' ? t.colors.bg.surface : 'transparent',
         },
         pill: {
             position: 'absolute',
             top: 0,
             left: 0,
             borderRadius: t.borderRadius.sm,
-            backgroundColor: t.colors.bg.muted,
+            backgroundColor: disabled
+                ? t.colors.bg.baseTransparentPressed
+                : t.colors.bg.mutedTransparent,
             zIndex: 0,
         },
-    }), []);
+    }), [disabled, appearance]);
 }

package/dist/src/lib/Components/SegmentedControl/SegmentedControlContext.d.ts

@@ -1,6 +1,7 @@
 export type SegmentedControlContextValue = {
     selectedValue: string;
     onSelectedChange: (value: string) => void;
+    disabled?: boolean;
 };
 declare const SegmentedControlContextProvider: import("react").FC<{
     children: import("react").ReactNode;

package/dist/src/lib/Components/SegmentedControl/SegmentedControlContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/SegmentedControlContext.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,QAAA,MAAO,+BAA+B;;;EAC+B,CAAC;AAEtE,eAAO,MAAM,0BAA0B,oCAInC,CAAC;AAEL,OAAO,EAAE,+BAA+B,EAAE,CAAC"}
+{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/SegmentedControlContext.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAO,+BAA+B;;;EAC+B,CAAC;AAEtE,eAAO,MAAM,0BAA0B,oCAInC,CAAC;AAEL,OAAO,EAAE,+BAA+B,EAAE,CAAC"}

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

@@ -1,5 +1,5 @@
 import { ComponentType, ReactNode } from 'react';
-import { StyledPressableProps } from '../../../styles';
+import { LumenTextStyle, StyledPressableProps } from '../../../styles';
 import { IconSize } from '../Icon';
 import { BoxProps } from '../Utility';
 export type SegmentedControlProps = {
@@ -11,17 +11,27 @@ export type SegmentedControlProps = {
      * Callback when the selected segment value changes.
      */
     onSelectedChange: (value: string) => void;
+    /**
+     * When true, the entire control is disabled (no interaction, selected uses muted styling).
+     */
+    disabled?: boolean;
+    /**
+     * Visual style of the control container: "background" shows the surface bg, "no-background" is transparent.
+     * @default 'background'
+     */
+    appearance?: 'background' | 'no-background';
     /**
      * Accessible label for the control (e.g. "File view").
      */
     accessibilityLabel?: string;
     /**
-     * Segment buttons (SegmentedControlButton). Can be wrapped (e.g. in Tooltip).
+     * Segment buttons (SegmentedControlButton).
      */
     children: ReactNode;
 } & Omit<BoxProps, 'children'>;
 type IconComponent = ComponentType<{
     size?: IconSize;
+    color?: LumenTextStyle['color'];
 }>;
 export type SegmentedControlButtonProps = {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAE/B,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,GAAG,eAAe,CAAC;IAC5C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAE/B,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}

package/dist/src/lib/Components/SegmentedControl/usePillLayout.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { LayoutChangeEvent } from 'react-native';
+export declare function useSegmentedControlSelectedIndex(selectedValue: string, children: React.ReactNode): number;
+type UsePillLayoutParams = {
+    selectedIndex: number;
+    children: React.ReactNode;
+};
+export declare function usePillLayout({ selectedIndex, children, }: UsePillLayoutParams): {
+    onLayout: (e: LayoutChangeEvent) => void;
+    animatedPillStyle: {
+        transform: {
+            translateX: number;
+        }[];
+        width: number;
+        height: number;
+    };
+};
+export {};
+//# sourceMappingURL=usePillLayout.d.ts.map

package/dist/src/lib/Components/SegmentedControl/usePillLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePillLayout.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/usePillLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAQjD,wBAAgB,gCAAgC,CAC9C,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,GACxB,MAAM,CAWR;AAED,KAAK,mBAAmB,GAAG;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,QAAQ,GACT,EAAE,mBAAmB;kBAMC,iBAAiB,KAAG,IAAI;;;;;;;;EAoC9C"}

package/dist/src/lib/Components/SegmentedControl/usePillLayout.js

@@ -0,0 +1,46 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { durations, easingCurves } from '../../Animations/constants';
+export function useSegmentedControlSelectedIndex(selectedValue, children) {
+    return useMemo(() => React.Children.toArray(children).findIndex((child) => {
+        if (React.isValidElement(child) && child.props != null) {
+            return child.props.value === selectedValue;
+        }
+        return false;
+    }), [selectedValue, children]);
+}
+export function usePillLayout({ selectedIndex, children, }) {
+    const pillTranslateX = useSharedValue(0);
+    const pillWidth = useSharedValue(0);
+    const pillHeight = useSharedValue(0);
+    const hasLayoutRef = useRef(false);
+    const onLayout = (e) => {
+        const { width, height } = e.nativeEvent.layout;
+        const count = React.Children.count(children);
+        const slotWidth = count > 0 ? width / count : 0;
+        pillWidth.value = slotWidth;
+        pillHeight.value = height;
+        if (!hasLayoutRef.current) {
+            hasLayoutRef.current = true;
+            if (selectedIndex >= 0) {
+                pillTranslateX.value = selectedIndex * slotWidth;
+            }
+        }
+    };
+    useEffect(() => {
+        if (!hasLayoutRef.current)
+            return;
+        if (selectedIndex >= 0 && pillWidth.value > 0) {
+            pillTranslateX.value = withTiming(selectedIndex * pillWidth.value, {
+                duration: durations['250'],
+                easing: easingCurves.bezier.default,
+            });
+        }
+    }, [selectedIndex, pillWidth, pillTranslateX]);
+    const animatedPillStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: pillTranslateX.value }],
+        width: pillWidth.value,
+        height: pillHeight.value,
+    }), [pillTranslateX, pillWidth, pillHeight]);
+    return { onLayout, animatedPillStyle };
+}

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

@@ -21,10 +21,10 @@ const useStyles = ({ disabled, pressed, isFull, }) => {
                 gap: t.spacings.s8,
                 padding: t.spacings.s12,
                 borderRadius: t.borderRadius.md,
-                backgroundColor: t.colors.bg.muted,
+                backgroundColor: t.colors.bg.surface,
             },
             isFull && { width: t.sizes.full },
-            pressed && !disabled && { backgroundColor: t.colors.bg.mutedPressed },
+            pressed && !disabled && { backgroundColor: t.colors.bg.surfacePressed },
             disabled && { backgroundColor: t.colors.bg.disabled },
         ]),
         label: StyleSheet.flatten([

package/jest.config.ts

@@ -13,7 +13,6 @@ export default {
   displayName: '@ledgerhq/lumen-ui-rnative',
   preset: 'react-native',
   setupFiles: ['<rootDir>/jest.setup.ts'],
-  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
   transformIgnorePatterns: [
     `node_modules/(?!(.pnpm|${transformIncludePatterns.join('|')})/)`,
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

package/src/lib/Components/AmountDisplay/AmountDisplay.tsx

@@ -10,6 +10,7 @@ import Animated, {
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
 import { Pulse } from '../../Animations/Pulse';
+import { RuntimeConstants } from '../../utils';
 import { Box } from '../Utility';
 import {
   AmountDisplayProps,
@@ -123,7 +124,13 @@ const DigitStrip = memo(
       >
         <Animated.View style={[animatedStyle, { alignItems: 'center' }]}>
           {DIGITS.map((d) => (
-            <Text key={d} style={textStyle}>
+            <Text
+              key={d}
+              style={[
+                textStyle,
+                RuntimeConstants.isAndroid && { height: lineHeight },
+              ]}
+            >
               {d}
             </Text>
           ))}

package/src/lib/Components/SegmentedControl/SegmentedControl.mdx

@@ -25,6 +25,7 @@ SegmentedControl is a tab bar–style component for switching between mutually e
 - **Segments**: Individual options the user can select.
 - **Selected state**: The active segment (sliding pill + semi-bold label).
 - **Optional icon**: Icon to the left of the label (from Symbols).
+- **Appearance**: Use `appearance="background"` (default) for a surface background, or `appearance="no-background"` for a transparent container.
 
 ## Properties
 
@@ -55,44 +56,6 @@ SegmentedControl lays out segments in a horizontal row with equal width per segm
 
 Use the library as part of `@ledgerhq/lumen-ui-rnative`. See the [Setup Guide →](?path=/docs/getting-started-setup--docs).
 
-## SegmentedControlButton
-
-Use as a direct child of SegmentedControl (or inside wrappers such as Tooltip). Required: value (string) and children (label). Optional: icon (component from symbols), onPress (runs in addition to parent onSelectedChange).
-
-<div className='my-24 overflow-hidden rounded-lg'>
-  <table className='w-full'>
-    <thead>
-      <tr className='border-b border-muted bg-muted'>
-        <th className='p-12 text-left text-on-accent body-2'>Prop</th>
-        <th className='p-12 text-left text-on-accent body-2'>Type</th>
-        <th className='p-12 text-left text-on-accent body-2'>Description</th>
-      </tr>
-    </thead>
-    <tbody className='bg-canvas'>
-      <tr className='border-b border-muted'>
-        <td className='text-accent p-12'>value</td>
-        <td className='p-12 text-muted'>string</td>
-        <td className='p-12 text-muted'>Unique value for this segment (e.g. "send", "receive")</td>
-      </tr>
-      <tr className='border-b border-muted'>
-        <td className='text-accent p-12'>children</td>
-        <td className='p-12 text-muted'>ReactNode</td>
-        <td className='p-12 text-muted'>Button label (e.g. "Send", "Tokens")</td>
-      </tr>
-      <tr className='border-b border-muted'>
-        <td className='text-accent p-12'>icon</td>
-        <td className='p-12 text-muted'>ComponentType</td>
-        <td className='p-12 text-muted'>Optional icon to the left of the label (from Symbols)</td>
-      </tr>
-      <tr>
-        <td className='text-accent p-12'>onPress</td>
-        <td className='p-12 text-muted'>() =&gt; void</td>
-        <td className='p-12 text-muted'>Optional callback when the button is pressed (in addition to parent onSelectedChange)</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
 ## Basic Usage
 
 Control selected value in state at the top level and pass it to SegmentedControl. Buttons use value to identify themselves; selected state is derived from context.

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

@@ -17,34 +17,27 @@ const meta = {
   argTypes: {
     onSelectedChange: {
       action: 'change',
-      description: 'Callback when the selected value changes',
-      table: {
-        type: { summary: '(value: string) => void' },
-      },
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    appearance: {
+      options: ['background', 'no-background'],
+      control: 'radio',
     },
     accessibilityLabel: {
       control: 'text',
-      description: 'Accessible label for the control',
-      table: {
-        type: { summary: 'string' },
-      },
     },
     selectedValue: {
       control: 'text',
-      description:
-        'The value of the currently selected segment (drives the sliding pill)',
-      table: {
-        type: { summary: 'string' },
-      },
     },
     children: {
       control: false,
-      description: 'SegmentedControlButton elements',
-      table: {
-        type: { summary: 'ReactNode' },
-      },
     },
   },
+  args: {
+    appearance: 'background',
+  },
 } satisfies Meta<typeof SegmentedControl>;
 
 export default meta;
@@ -52,12 +45,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Base: Story = {
   args: {} as React.ComponentProps<typeof SegmentedControl>,
-  render: () => {
+  render: (args) => {
     const [state, setState] = useState('send');
 
     return (
       <Box lx={{ width: 's256' }}>
         <SegmentedControl
+          {...args}
           selectedValue={state}
           onSelectedChange={setState}
           accessibilityLabel='Transaction type'
@@ -75,11 +69,12 @@ export const Base: Story = {
 
 export const WithIcons: Story = {
   args: {} as React.ComponentProps<typeof SegmentedControl>,
-  render: () => {
+  render: (args) => {
     const [state, setState] = useState('tokens');
 
     return (
       <SegmentedControl
+        {...args}
         selectedValue={state}
         onSelectedChange={setState}
         accessibilityLabel='Asset section'
@@ -100,3 +95,24 @@ export const WithIcons: Story = {
     );
   },
 };
+
+export const Disabled: Story = {
+  args: {} as React.ComponentProps<typeof SegmentedControl>,
+  render: (args) => (
+    <Box lx={{ width: 's256' }}>
+      <SegmentedControl
+        {...args}
+        selectedValue='receive'
+        onSelectedChange={() => {
+          /* empty */
+        }}
+        accessibilityLabel='Transaction type (disabled)'
+        disabled
+      >
+        <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+        <SegmentedControlButton value='receive'>Receive</SegmentedControlButton>
+        <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
+      </SegmentedControl>
+    </Box>
+  ),
+};