@ledgerhq/lumen-ui-rnative 0.1.10 → 0.1.12

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/BottomSheet/BottomSheet.stories.tsx

@@ -416,9 +416,9 @@ export const VirtualList: Story = {
           />
           <BottomSheetFlatList
             data={data}
-            keyExtractor={(item) => (item as ListItem).id}
-            renderItem={({ item }) => {
-              const typedItem = item as ListItem;
+            keyExtractor={(item: ListItem) => item.id}
+            renderItem={({ item }: { item: ListItem }) => {
+              const typedItem = item;
               return (
                 <Box
                   lx={{
@@ -496,7 +496,7 @@ export const StickyHeaderContent: Story = {
           />
           <BottomSheetFlatList
             data={filteredData}
-            keyExtractor={(item) => (item as ListItem).id}
+            keyExtractor={(item: ListItem) => item.id}
             stickyHeaderIndices={[0]}
             ListHeaderComponent={
               <Box
@@ -513,7 +513,7 @@ export const StickyHeaderContent: Story = {
                 />
               </Box>
             }
-            renderItem={({ item }) => {
+            renderItem={({ item }: { item: ListItem }) => {
               const typedItem = item as ListItem;
 
               return (
@@ -618,16 +618,16 @@ export const VirtualizedList: Story = {
           />
           <BottomSheetVirtualizedList
             data={data}
-            getItem={(items, index) => {
+            getItem={(items: ListItem[], index: number) => {
               const typedData = items as ListItem[];
               return typedData[index];
             }}
-            getItemCount={(items) => {
+            getItemCount={(items: ListItem[]) => {
               const typedData = items as ListItem[];
               return typedData.length;
             }}
-            keyExtractor={(item) => (item as ListItem).id}
-            renderItem={({ item }) => {
+            keyExtractor={(item: ListItem) => item.id}
+            renderItem={({ item }: { item: ListItem }) => {
               const typedItem = item as ListItem;
               return (
                 <Box

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

@@ -2,7 +2,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 +47,7 @@ const resolveCardInnerContext = ({
         cardPressable: !!onPress,
         headerPressable: false,
         footerExpanded: true,
+        disabled: !!disabled,
         onHeaderPress: undefined,
       };
     case 'expandable':
@@ -55,6 +55,7 @@ const resolveCardInnerContext = ({
         cardPressable: false,
         headerPressable: !!onPress && !disabled,
         footerExpanded: Boolean(expanded),
+        disabled: !!disabled,
         onHeaderPress: onPress,
       };
     case 'info':
@@ -62,6 +63,7 @@ const resolveCardInnerContext = ({
         cardPressable: false,
         headerPressable: false,
         footerExpanded: true,
+        disabled: !!disabled,
         onHeaderPress: undefined,
       };
   }
@@ -73,6 +75,7 @@ const [CardProvider, useCardContext] = createSafeContext<CardContextValue>(
     cardPressable: false,
     headerPressable: false,
     footerExpanded: true,
+    disabled: false,
   },
 );
 
@@ -255,13 +258,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) => ({
@@ -374,11 +375,11 @@ export const CardContent = ({
     (t) => ({
       container: StyleSheet.flatten([
         {
-          flexDirection: 'column' as const,
+          flexDirection: 'column',
           gap: t.spacings.s4,
         },
         isTrailing
-          ? { flexShrink: 1, minWidth: 0, alignItems: 'flex-end' as const }
+          ? { flexShrink: 1, minWidth: 0, alignItems: 'flex-end' }
           : { flex: 1, minWidth: 0 },
       ]),
     }),
@@ -454,8 +455,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 +522,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 +668,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';
@@ -8,13 +9,16 @@ import { Pressable } from '../Utility';
 import { HIT_SLOP_MAP, InteractiveIconProps } from './types';
 
 type IconType = InteractiveIconProps['iconType'];
+type Appearance = NonNullable<InteractiveIconProps['appearance']>;
 
 const useStyles = ({
   iconType,
+  appearance,
   pressed,
   disabled,
 }: {
   iconType: IconType;
+  appearance: Appearance;
   pressed: boolean;
   disabled: boolean;
 }) => {
@@ -24,6 +28,21 @@ const useStyles = ({
         filled: { backgroundColor: t.colors.bg.base },
         stroked: { backgroundColor: t.colors.bg.baseTransparent },
       };
+      const appearanceColors = {
+        base: {
+          default: t.colors.text.base,
+          pressed: t.colors.text.basePressed,
+        },
+        muted: {
+          default: t.colors.text.muted,
+          pressed: t.colors.text.mutedPressed,
+        },
+        white: {
+          default: t.colors.text.white,
+          pressed: t.colors.text.whitePressed,
+        },
+      };
+      const colorSet = appearanceColors[appearance];
 
       return {
         container: StyleSheet.flatten([
@@ -38,12 +57,12 @@ const useStyles = ({
           color: disabled
             ? t.colors.text.disabled
             : pressed
-              ? t.colors.text.mutedPressed
-              : t.colors.text.muted,
+              ? colorSet.pressed
+              : colorSet.default,
         },
       };
     },
-    [iconType, pressed, disabled],
+    [iconType, appearance, pressed, disabled],
   );
 };
 
@@ -79,13 +98,18 @@ const useStyles = ({
 export const InteractiveIcon = ({
   iconType,
   children,
-  disabled = false,
+  disabled: disabledProp = false,
   hitSlop: hitSlopProp,
   hitSlopType = 'comfortable',
+  appearance = 'muted',
   style,
   lx,
   ...props
 }: InteractiveIconProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'InteractiveIcon',
+    mergeWith: { disabled: disabledProp },
+  });
   const child = Children.only(children);
 
   let iconSize: IconSize = 20;
@@ -100,7 +124,7 @@ export const InteractiveIcon = ({
       lx={lx}
       style={[style, { alignItems: 'center', justifyContent: 'center' }]}
       accessibilityRole='button'
-      accessibilityState={{ disabled: !!disabled }}
+      accessibilityState={{ disabled }}
       disabled={disabled}
       hitSlop={resolvedHitSlop}
       {...props}
@@ -108,8 +132,9 @@ export const InteractiveIcon = ({
       {({ pressed }) => (
         <InteractiveIconContent
           iconType={iconType}
+          appearance={appearance}
           pressed={pressed}
-          disabled={!!disabled}
+          disabled={disabled}
         >
           {children}
         </InteractiveIconContent>
@@ -120,15 +145,17 @@ export const InteractiveIcon = ({
 
 const InteractiveIconContent = ({
   iconType,
+  appearance,
   pressed,
   disabled,
   children,
 }: PropsWithChildren<{
   iconType: IconType;
+  appearance: Appearance;
   pressed: boolean;
   disabled: boolean;
 }>) => {
-  const styles = useStyles({ iconType, pressed, disabled });
+  const styles = useStyles({ iconType, appearance, pressed, disabled });
 
   return (
     <View style={styles.container}>

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

@@ -42,11 +42,24 @@ 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.
    */
   iconType: 'filled' | 'stroked';
+  /**
+   * The color appearance of the icon.
+   * - `base`: Default high-contrast color.
+   * - `muted`: Subdued color for secondary actions.
+   * - `white`: White color for use on dark backgrounds.
+   * @default 'muted'
+   */
+  appearance?: 'base' | 'muted' | 'white';
   /**
    * Preset for the touchable area. Ignored if `hitSlop` is passed explicitly.
    * Automatically applies insets based on the child's icon size.
@@ -55,4 +68,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/Link/Link.mdx

@@ -1,6 +1,7 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as LinkStories from './Link.stories';
 import { Link } from './Link';
+import { Box } from '../Utility';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';

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