@ledgerhq/lumen-ui-rnative 0.1.9 → 0.1.11

package/dist/typescript/src/lib/Components/TileButton/TileButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TileButton.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/TileButton/TileButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAwD1C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU;yFASpB,eAAe;;CAyBjB,CAAC"}
+{"version":3,"file":"TileButton.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/TileButton/TileButton.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAwD1C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU;uGASpB,eAAe;;CA6BjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -42,7 +42,7 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.1.1",
+    "@ledgerhq/lumen-utils-shared": "0.1.2",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
@@ -52,7 +52,7 @@
   "peerDependencies": {
     "@types/react": "^19.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.1.3",
+    "@ledgerhq/lumen-design-core": "0.1.5",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-reanimated": "^3.0.0",

package/src/lib/Components/AmountInput/AmountInput.tsx

@@ -1,4 +1,8 @@
-import { getFontSize, textFormatter } from '@ledgerhq/lumen-utils-shared';
+import {
+  getFontSize,
+  textFormatter,
+  useDisabledContext,
+} from '@ledgerhq/lumen-utils-shared';
 import { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Pressable, StyleSheet, TextInput } from 'react-native';
 import Animated, {
@@ -23,7 +27,7 @@ export const AmountInput = ({
   style,
   currencyText,
   currencyPosition = 'left',
-  editable = true,
+  editable: editableProp = true,
   maxIntegerLength = 9,
   maxDecimalLength = 9,
   allowDecimals = true,
@@ -37,6 +41,10 @@ export const AmountInput = ({
   const inputRef = useRef<TextInput>(null);
   const inputValue = String(value);
   const [isFocused, setIsFocused] = useState(false);
+  const disabled = useDisabledContext({
+    consumerName: 'AmountInput',
+    mergeWith: { disabled: !editableProp },
+  });
 
   const translateX = useSharedValue(0);
   const animatedFontSize = useSharedValue(getFontSize(inputValue));
@@ -46,7 +54,7 @@ export const AmountInput = ({
 
   const styles = useStyles({
     hasValue: !!inputValue,
-    isEditable: editable,
+    isEditable: !disabled,
     isInvalid,
   });
 
@@ -93,7 +101,7 @@ export const AmountInput = ({
   }, [inputValue, animatedFontSize, translateX]);
 
   useEffect(() => {
-    if (isFocused && editable) {
+    if (isFocused && !disabled) {
       caretOpacity.value = withRepeat(
         withSequence(
           withTiming(1, { duration: 150, easing: Easing.ease }),
@@ -107,7 +115,7 @@ export const AmountInput = ({
     } else {
       caretOpacity.value = 0;
     }
-  }, [isFocused, editable, caretOpacity]);
+  }, [isFocused, disabled, caretOpacity]);
 
   const handleChangeText = (text: string) => {
     const formatted = textFormatter(text, {
@@ -127,7 +135,7 @@ export const AmountInput = ({
   ) : null;
 
   const handlePress = () => {
-    if (editable) {
+    if (!disabled) {
       inputRef.current?.focus();
     }
   };
@@ -138,7 +146,7 @@ export const AmountInput = ({
       <TextInput
         ref={inputRef}
         keyboardType='decimal-pad'
-        editable={editable}
+        editable={!disabled}
         value={inputValue}
         onChangeText={handleChangeText}
         onFocus={(e) => {

package/src/lib/Components/BaseInput/BaseInput.tsx

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import {
   useCallback,
   useEffect,
@@ -32,12 +33,16 @@ export const BaseInput = ({
   errorMessage,
   hideClearButton,
   onChangeText: onChangeTextProp,
-  editable = true,
+  editable: editableProp = true,
   prefix,
   suffix,
   ref,
   ...props
 }: BaseInputProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'BaseInput',
+    mergeWith: { disabled: !editableProp },
+  });
   const { t } = useCommonTranslation();
   const { theme } = useTheme();
   const inputRef = useRef<TextInput>(null);
@@ -55,7 +60,7 @@ export const BaseInput = ({
     ? !!props.value && props.value.length > 0
     : uncontrolledValue.length > 0;
 
-  const showClearButton = hasContent && editable && !hideClearButton;
+  const showClearButton = hasContent && !disabled && !hideClearButton;
 
   const handleChangeText = useCallback(
     (text: string) => {
@@ -79,7 +84,7 @@ export const BaseInput = ({
   const styles = useStyles({
     hasError: !!errorMessage,
     isFocused,
-    isEditable: editable,
+    isEditable: !disabled,
     hasLabel: !!label,
   });
 
@@ -88,7 +93,7 @@ export const BaseInput = ({
     isFocused,
     showClearButton,
     hasError: !!errorMessage,
-    isEditable: editable,
+    isEditable: !disabled,
   });
 
   return (
@@ -96,7 +101,7 @@ export const BaseInput = ({
       <Pressable
         style={StyleSheet.flatten([styles.container, containerStyle])}
         onPress={() => inputRef.current?.focus()}
-        disabled={!editable}
+        disabled={disabled}
       >
         {prefix}
 
@@ -107,7 +112,7 @@ export const BaseInput = ({
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
           onChangeText={handleChangeText}
-          editable={editable}
+          editable={!disabled}
           autoCapitalize='none'
           autoCorrect={false}
           selectionColor={theme.colors.text.active}
@@ -128,7 +133,7 @@ export const BaseInput = ({
           </Animated.Text>
         )}
 
-        {(suffix || (!hideClearButton && editable)) && (
+        {(suffix || (!hideClearButton && !disabled)) && (
           <View style={styles.suffixContainer}>
             {showClearButton ? (
               <InteractiveIcon

package/src/lib/Components/Button/BaseButton.tsx

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { PropsWithChildren } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
@@ -147,10 +148,14 @@ export const BaseButton = ({
   isFull = false,
   loading = false,
   icon: IconProp,
-  disabled = false,
+  disabled: disabledProp = false,
   ref,
   ...props
 }: BaseButtonProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'BaseButton',
+    mergeWith: { disabled: disabledProp },
+  });
   const rootStyles = useRootStyles({ isFull });
 
   return (

package/src/lib/Components/Card/Card.tsx

@@ -1,8 +1,6 @@
 import {
   createSafeContext,
-  DisabledProvider,
   isTextChildren,
-  useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
 import React, { ReactNode, Ref, useCallback, useEffect, useMemo } from 'react';
 import { LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native';
@@ -48,6 +46,7 @@ const resolveCardInnerContext = ({
         cardPressable: !!onPress,
         headerPressable: false,
         footerExpanded: true,
+        disabled: !!disabled,
         onHeaderPress: undefined,
       };
     case 'expandable':
@@ -55,6 +54,7 @@ const resolveCardInnerContext = ({
         cardPressable: false,
         headerPressable: !!onPress && !disabled,
         footerExpanded: Boolean(expanded),
+        disabled: !!disabled,
         onHeaderPress: onPress,
       };
     case 'info':
@@ -62,6 +62,7 @@ const resolveCardInnerContext = ({
         cardPressable: false,
         headerPressable: false,
         footerExpanded: true,
+        disabled: !!disabled,
         onHeaderPress: undefined,
       };
   }
@@ -73,6 +74,7 @@ const [CardProvider, useCardContext] = createSafeContext<CardContextValue>(
     cardPressable: false,
     headerPressable: false,
     footerExpanded: true,
+    disabled: false,
   },
 );
 
@@ -162,47 +164,43 @@ export const Card = ({
   if (innerContext.cardPressable) {
     return (
       <CardProvider value={innerContext}>
-        <DisabledProvider value={{ disabled }}>
-          <Pressable
-            ref={ref}
-            lx={lx}
-            style={style as ViewStyle}
-            onPress={onPress}
-            disabled={disabled}
-            accessibilityRole='button'
-            accessibilityState={{ disabled }}
-            {...props}
-          >
-            {({ pressed }) => (
-              <CardInner
-                outlined={outlined}
-                pressed={pressed}
-                disabled={disabled}
-                interactive
-              >
-                {children}
-              </CardInner>
-            )}
-          </Pressable>
-        </DisabledProvider>
+        <Pressable
+          ref={ref}
+          lx={lx}
+          style={style as ViewStyle}
+          onPress={onPress}
+          disabled={disabled}
+          accessibilityRole='button'
+          accessibilityState={{ disabled }}
+          {...props}
+        >
+          {({ pressed }) => (
+            <CardInner
+              outlined={outlined}
+              pressed={pressed}
+              disabled={disabled}
+              interactive
+            >
+              {children}
+            </CardInner>
+          )}
+        </Pressable>
       </CardProvider>
     );
   }
 
   return (
     <CardProvider value={innerContext}>
-      <DisabledProvider value={{ disabled }}>
-        <Box lx={lx} style={style} {...props}>
-          <CardInner
-            outlined={outlined}
-            pressed={false}
-            disabled={disabled}
-            interactive={false}
-          >
-            {children}
-          </CardInner>
-        </Box>
-      </DisabledProvider>
+      <Box lx={lx} style={style} {...props}>
+        <CardInner
+          outlined={outlined}
+          pressed={false}
+          disabled={disabled}
+          interactive={false}
+        >
+          {children}
+        </CardInner>
+      </Box>
     </CardProvider>
   );
 };
@@ -255,13 +253,11 @@ export const CardHeader = ({
   style,
   ...props
 }: CardHeaderProps) => {
-  const disabled = useDisabledContext({
-    consumerName: 'CardHeader',
-  });
-  const { headerPressable, footerExpanded, onHeaderPress } = useCardContext({
-    consumerName: 'CardHeader',
-    contextRequired: false,
-  });
+  const { disabled, headerPressable, footerExpanded, onHeaderPress } =
+    useCardContext({
+      consumerName: 'CardHeader',
+      contextRequired: false,
+    });
 
   const chevronStyle = useStyleSheet(
     (t) => ({
@@ -454,8 +450,9 @@ export const CardContentTitle = ({
   style,
   ...props
 }: CardContentTitleProps & { ref?: Ref<View> }) => {
-  const disabled = useDisabledContext({
+  const { disabled } = useCardContext({
     consumerName: 'CardContentTitle',
+    contextRequired: false,
   });
   const { align } = useCardContentAlignContext({
     consumerName: 'CardContentTitle',
@@ -520,8 +517,9 @@ export const CardContentDescription = ({
   style,
   ...props
 }: CardContentDescriptionProps & { ref?: Ref<View> }) => {
-  const disabled = useDisabledContext({
+  const { disabled } = useCardContext({
     consumerName: 'CardContentDescription',
+    contextRequired: false,
   });
   const { align } = useCardContentAlignContext({
     consumerName: 'CardContentDescription',
@@ -665,10 +663,7 @@ export const CardFooter = ({
   style,
   ...props
 }: CardFooterProps & { ref?: Ref<View> }) => {
-  const disabled = useDisabledContext({
-    consumerName: 'CardFooter',
-  });
-  const { footerExpanded } = useCardContext({
+  const { disabled, footerExpanded } = useCardContext({
     consumerName: 'CardFooter',
     contextRequired: false,
   });

package/src/lib/Components/Card/types.ts

@@ -8,6 +8,7 @@ export type CardContextValue = {
   cardPressable: boolean;
   headerPressable: boolean;
   footerExpanded: boolean;
+  disabled: boolean;
   onHeaderPress?: (event: GestureResponderEvent) => void;
 };
 
@@ -15,10 +16,6 @@ export type CardContentAlignContextValue = {
   align?: 'left' | 'right';
 };
 
-export type CardDisabledContextValue = {
-  disabled: boolean;
-};
-
 export type CardProps = {
   /**
    * The interaction mode of the card.

package/src/lib/Components/CardButton/CardButton.tsx

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { StyleSheet, Text, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { ChevronRight } from '../../Symbols';
@@ -128,10 +129,15 @@ export const CardButton = ({
   title,
   description,
   hideChevron,
-  disabled = false,
+  disabled: disabledProp = false,
   ref,
   ...props
 }: CardButtonProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'CardButton',
+    mergeWith: { disabled: disabledProp },
+  });
+
   return (
     <Pressable
       ref={ref}

package/src/lib/Components/Checkbox/Checkbox.tsx

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useStyleSheet } from '../../../styles';
 import { Check } from '../../Symbols';
 import { useControllableState } from '../../utils';
@@ -37,11 +38,16 @@ export const Checkbox = ({
   checked: checkedProp,
   onCheckedChange: onCheckedChangeProp,
   defaultChecked = false,
-  disabled = false,
+  disabled: disabledProp = false,
   label,
   ref,
   ...props
 }: CheckboxProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'Checkbox',
+    mergeWith: { disabled: disabledProp },
+  });
+
   const [checked, onCheckedChange] = useControllableState({
     prop: checkedProp,
     onChange: onCheckedChangeProp,

package/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { Children, isValidElement, PropsWithChildren } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
@@ -79,13 +80,17 @@ const useStyles = ({
 export const InteractiveIcon = ({
   iconType,
   children,
-  disabled = false,
+  disabled: disabledProp = false,
   hitSlop: hitSlopProp,
   hitSlopType = 'comfortable',
   style,
   lx,
   ...props
 }: InteractiveIconProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'InteractiveIcon',
+    mergeWith: { disabled: disabledProp },
+  });
   const child = Children.only(children);
 
   let iconSize: IconSize = 20;
@@ -100,7 +105,7 @@ export const InteractiveIcon = ({
       lx={lx}
       style={[style, { alignItems: 'center', justifyContent: 'center' }]}
       accessibilityRole='button'
-      accessibilityState={{ disabled: !!disabled }}
+      accessibilityState={{ disabled }}
       disabled={disabled}
       hitSlop={resolvedHitSlop}
       {...props}
@@ -109,7 +114,7 @@ export const InteractiveIcon = ({
         <InteractiveIconContent
           iconType={iconType}
           pressed={pressed}
-          disabled={!!disabled}
+          disabled={disabled}
         >
           {children}
         </InteractiveIconContent>

package/src/lib/Components/InteractiveIcon/types.ts

@@ -42,6 +42,11 @@ export type HitSlopType =
   | 'compact-vertical';
 
 export type InteractiveIconProps = {
+  /**
+   * Whether the icon is disabled.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * The visual style of the icon button.
    * Choose 'filled' for icons with solid backgrounds or 'stroked' for outlined icons.
@@ -55,4 +60,4 @@ export type InteractiveIconProps = {
    */
   hitSlopType?: HitSlopType;
 } & PropsWithChildren &
-  Omit<StyledPressableProps, 'children'>;
+  Omit<StyledPressableProps, 'children' | 'disabled'>;

package/src/lib/Components/Label/Label.tsx

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useStyleSheet } from '../../../styles';
 import { Text } from '../Utility';
 import { LabelProps } from './types';
@@ -23,14 +24,18 @@ const useStyles = ({ disabled }: { disabled: boolean }) => {
 export const Label = ({
   style,
   lx = {},
-  disabled = false,
+  disabled: disabledProp = false,
   children,
   onPress,
   onLongPress,
   ref,
   ...props
 }: LabelProps) => {
-  const styles = useStyles({ disabled });
+  const disabled = useDisabledContext({
+    consumerName: 'Label',
+    mergeWith: { disabled: disabledProp },
+  });
+  const styles = useStyles({ disabled: !!disabled });
 
   return (
     <Text

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

@@ -1,6 +1,8 @@
 import {
   createSafeContext,
+  DisabledProvider,
   isTextChildren,
+  useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
 import React, { Ref } from 'react';
 import { StyleSheet, View } from 'react-native';
@@ -9,7 +11,6 @@ import { Spot } from '../Spot';
 import { Box, Pressable, Text } from '../Utility';
 import {
   ListItemContentProps,
-  ListItemContextValue,
   ListItemDescriptionProps,
   ListItemIconProps,
   ListItemLeadingProps,
@@ -20,9 +21,6 @@ import {
   ListItemTruncateProps,
 } from './types';
 
-const [ListItemProvider, useListItemContext] =
-  createSafeContext<ListItemContextValue>('ListItem', {});
-
 const [ListItemTrailingProvider, useListItemTrailingContext] =
   createSafeContext<{ isInTrailing: boolean }>('ListItemTrailing', {
     isInTrailing: false,
@@ -91,12 +89,17 @@ export const ListItem = ({
   children,
   lx = {},
   style,
-  disabled = false,
+  disabled: disabledProp = false,
   ref,
   ...pressableProps
 }: ListItemProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'ListItem',
+    mergeWith: { disabled: disabledProp },
+  });
+
   return (
-    <ListItemProvider value={{ disabled }}>
+    <DisabledProvider value={{ disabled }}>
       <Pressable
         ref={ref}
         lx={lx}
@@ -110,7 +113,7 @@ export const ListItem = ({
           <ListItemInner pressed={pressed}>{children}</ListItemInner>
         )}
       </Pressable>
-    </ListItemProvider>
+    </DisabledProvider>
   );
 };
 
@@ -224,7 +227,7 @@ export const ListItemTitle = ({
   ref,
   ...viewProps
 }: ListItemTitleProps & { ref?: Ref<View> }) => {
-  const { disabled } = useListItemContext({
+  const disabled = useDisabledContext({
     consumerName: 'ListItemTitle',
     contextRequired: true,
   });
@@ -302,7 +305,7 @@ export const ListItemDescription = ({
   ref,
   ...viewProps
 }: ListItemDescriptionProps & { ref?: Ref<View> }) => {
-  const { disabled } = useListItemContext({
+  const disabled = useDisabledContext({
     consumerName: 'ListItemDescription',
     contextRequired: true,
   });
@@ -411,7 +414,7 @@ ListItemTrailing.displayName = 'ListItemTrailing';
  * Fixed at size 48 for consistent list item appearance.
  */
 export const ListItemSpot = (props: ListItemSpotProps) => {
-  const { disabled } = useListItemContext({
+  const disabled = useDisabledContext({
     consumerName: 'ListItemSpot',
     contextRequired: true,
   });
@@ -433,7 +436,7 @@ export const ListItemIcon = ({
   ...viewProps
 }: ListItemIconProps) => {
   const { theme } = useTheme();
-  const { disabled } = useListItemContext({
+  const disabled = useDisabledContext({
     consumerName: 'ListItemIcon',
     contextRequired: true,
   });
@@ -471,7 +474,7 @@ export const ListItemTruncate = ({
   ref,
   ...textProps
 }: ListItemTruncateProps & { ref?: Ref<React.ElementRef<typeof Text>> }) => {
-  const { disabled } = useListItemContext({
+  const disabled = useDisabledContext({
     consumerName: 'ListItemTruncate',
     contextRequired: true,
   });

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

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import Animated from 'react-native-reanimated';
 import { useStyleSheet } from '../../../styles';
 import type { LumenTextStyle, LumenTypographyTokenName } from '../../../styles';
@@ -111,10 +112,14 @@ export function SegmentedControl({
   onSelectedChange,
   accessibilityLabel,
   children,
-  disabled,
+  disabled: disabledProp,
   appearance = 'background',
   ...props
 }: SegmentedControlProps) {
+  const disabled = useDisabledContext({
+    consumerName: 'SegmentedControl',
+    mergeWith: { disabled: disabledProp },
+  });
   const styles = useRootStyles({
     disabled: Boolean(disabled),
     appearance,

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

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

package/src/lib/Components/Select/Select.tsx

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import React, { useState, useEffect, useCallback, useId } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
@@ -57,8 +58,12 @@ export const Select = ({
   value: controlledValue,
   defaultValue,
   onValueChange,
-  disabled = false,
+  disabled: disabledProp = false,
 }: SelectProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'Select',
+    mergeWith: { disabled: disabledProp },
+  });
   const selectId = useId();
 
   const [internalOpen, setInternalOpen] = useControllableState({