@ledgerhq/lumen-ui-rnative 0.1.5 → 0.1.7

package/dist/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -37,7 +37,7 @@
   "peerDependencies": {
     "@types/react": "^19.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.1.1",
+    "@ledgerhq/lumen-design-core": "0.1.2",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-reanimated": "^3.0.0",

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

@@ -192,7 +192,7 @@ export const VariantsShowcase: Story = {
             </ListItemContent>
           </ListItemLeading>
           <ListItemTrailing>
-            <ListItemIcon icon={ChevronRight} />
+            <ListItemIcon color='muted' icon={ChevronRight} />
           </ListItemTrailing>
         </ListItem>
 
@@ -205,7 +205,7 @@ export const VariantsShowcase: Story = {
             </ListItemContent>
           </ListItemLeading>
           <ListItemTrailing>
-            <ListItemIcon icon={ChevronRight} />
+            <ListItemIcon color='muted' icon={ChevronRight} />
           </ListItemTrailing>
         </ListItem>
 
@@ -284,7 +284,7 @@ export const DisabledState: Story = {
           </ListItemContent>
         </ListItemLeading>
         <ListItemTrailing>
-          <ListItemIcon icon={ChevronRight} />
+          <ListItemIcon color='muted' icon={ChevronRight} />
         </ListItemTrailing>
       </ListItem>
 
@@ -357,7 +357,7 @@ export const ResponsiveLayout: Story = {
             </ListItemContent>
           </ListItemLeading>
           <ListItemTrailing>
-            <ListItemIcon icon={ChevronRight} />
+            <ListItemIcon color='muted' icon={ChevronRight} />
           </ListItemTrailing>
         </ListItem>
 
@@ -375,7 +375,7 @@ export const ResponsiveLayout: Story = {
             </ListItemContent>
           </ListItemLeading>
           <ListItemTrailing>
-            <ListItemIcon icon={ChevronRight} />
+            <ListItemIcon color='muted' icon={ChevronRight} />
           </ListItemTrailing>
         </ListItem>
 

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>
+  ),
+};

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

@@ -1,12 +1,6 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { LayoutChangeEvent } from 'react-native';
-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 type { LumenTextStyle, LumenTypographyTokenName } from '../../../styles';
 import { Box, Pressable, Text } from '../Utility';
 import {
   SegmentedControlContextProvider,
@@ -16,8 +10,10 @@ import type {
   SegmentedControlButtonProps,
   SegmentedControlProps,
 } from './types';
-
-const ICON_SIZE = 16;
+import {
+  usePillLayout,
+  useSegmentedControlSelectedIndex,
+} from './usePillLayout';
 
 export function SegmentedControlButton({
   value,
@@ -26,32 +22,35 @@ export function SegmentedControlButton({
   onPress,
   ...props
 }: SegmentedControlButtonProps) {
-  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 (
     <Pressable
       onPress={handlePress}
-      accessibilityState={{ selected }}
+      disabled={disabled}
+      accessibilityState={{ selected, disabled }}
       style={styles.button}
       {...props}
     >
       <Box style={styles.content}>
         {Icon && (
           <Box style={styles.iconWrap}>
-            <Icon size={ICON_SIZE} />
+            <Icon size={16} color={styles.textColor} />
           </Box>
         )}
         <Text
-          typography={selected ? 'body2SemiBold' : 'body2'}
-          lx={{ color: 'base' }}
+          typography={styles.typography}
+          lx={{ color: styles.textColor }}
           style={styles.label}
         >
           {children}
@@ -63,8 +62,14 @@ export function SegmentedControlButton({
 
 SegmentedControlButton.displayName = 'SegmentedControlButton';
 
-function useButtonStyles() {
-  return useStyleSheet(
+function useButtonStyles({
+  selected,
+  disabled,
+}: {
+  selected: boolean;
+  disabled?: boolean;
+}) {
+  const styles = useStyleSheet(
     (t) => ({
       button: {
         flex: 1,
@@ -93,6 +98,12 @@ function useButtonStyles() {
     }),
     [],
   );
+  const typography: LumenTypographyTokenName = selected
+    ? 'body2SemiBold'
+    : 'body2';
+  const textColor: LumenTextStyle['color'] =
+    selected && !disabled ? 'base' : 'muted';
+  return { ...styles, typography, textColor };
 }
 
 export function SegmentedControl({
@@ -100,67 +111,31 @@ export function SegmentedControl({
   onSelectedChange,
   accessibilityLabel,
   children,
+  disabled,
+  appearance = 'background',
   ...props
 }: SegmentedControlProps) {
-  const styles = useRootStyles();
-  const pillTranslateX = useSharedValue(0);
-  const pillWidth = useSharedValue(0);
-  const pillHeight = useSharedValue(0);
-  const hasLayoutRef = useRef(false);
-
-  const getSelectedIndex = useCallback((): number => {
-    return React.Children.toArray(children).findIndex((child) => {
-      if (React.isValidElement(child) && child.props != null) {
-        return (child.props as { value?: string }).value === selectedValue;
-      }
-      return false;
-    });
-  }, [selectedValue, children]);
-
-  function onLayout(e: LayoutChangeEvent) {
-    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],
+  const styles = useRootStyles({
+    disabled: Boolean(disabled),
+    appearance,
+  });
+  const selectedIndex = useSegmentedControlSelectedIndex(
+    selectedValue,
+    children,
   );
+  const { onLayout, animatedPillStyle } = usePillLayout({
+    selectedIndex,
+    children,
+  });
 
   return (
     <SegmentedControlContextProvider
-      value={{ selectedValue, onSelectedChange }}
+      value={{ selectedValue, onSelectedChange, disabled }}
     >
       <Box
         accessibilityRole='radiogroup'
         accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled }}
         onLayout={onLayout}
         style={styles.container}
         {...props}
@@ -177,7 +152,13 @@ export function SegmentedControl({
 
 SegmentedControl.displayName = 'SegmentedControl';
 
-function useRootStyles() {
+function useRootStyles({
+  disabled,
+  appearance,
+}: {
+  disabled: boolean;
+  appearance: 'background' | 'no-background';
+}) {
   return useStyleSheet(
     (t) => ({
       container: {
@@ -185,18 +166,21 @@ function useRootStyles() {
         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/src/lib/Components/SegmentedControl/SegmentedControlContext.tsx

@@ -3,6 +3,7 @@ import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
 export type SegmentedControlContextValue = {
   selectedValue: string;
   onSelectedChange: (value: string) => void;
+  disabled?: boolean;
 };
 
 const [SegmentedControlContextProvider, _useSegmentedControlSafeContext] =

package/src/lib/Components/SegmentedControl/types.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';
 
@@ -12,18 +12,28 @@ 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/src/lib/Components/SegmentedControl/usePillLayout.ts

@@ -0,0 +1,76 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { LayoutChangeEvent } from 'react-native';
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { durations, easingCurves } from '../../Animations/constants';
+
+export function useSegmentedControlSelectedIndex(
+  selectedValue: string,
+  children: React.ReactNode,
+): number {
+  return useMemo(
+    () =>
+      React.Children.toArray(children).findIndex((child) => {
+        if (React.isValidElement(child) && child.props != null) {
+          return (child.props as { value?: string }).value === selectedValue;
+        }
+        return false;
+      }),
+    [selectedValue, children],
+  );
+}
+
+type UsePillLayoutParams = {
+  selectedIndex: number;
+  children: React.ReactNode;
+};
+
+export function usePillLayout({
+  selectedIndex,
+  children,
+}: UsePillLayoutParams) {
+  const pillTranslateX = useSharedValue(0);
+  const pillWidth = useSharedValue(0);
+  const pillHeight = useSharedValue(0);
+  const hasLayoutRef = useRef(false);
+
+  const onLayout = (e: LayoutChangeEvent): void => {
+    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/src/lib/Components/TileButton/TileButton.tsx

@@ -38,10 +38,10 @@ const useStyles = ({
           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([