@ledgerhq/lumen-ui-rnative 0.0.55 → 0.0.57-0

package/src/lib/Components/Switch/BaseSwitch.tsx

@@ -8,12 +8,7 @@ import {
 } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 
-import {
-  PressableRef,
-  SlottablePressableProps,
-  SlottableViewProps,
-  ViewRef,
-} from '../../types';
+import { SlottablePressableProps, SlottableViewProps } from '../../types';
 import { SlotPressable, SlotView } from '../Slot';
 
 import { SwitchProps } from './types';
@@ -32,130 +27,122 @@ type BaseSwitchRootProps = SlottablePressableProps & {
 const [BaseSwitchProvider, useBaseSwitchContext] =
   createSafeContext<BaseSwitchRootProps>(ROOT_COMPONENT_NAME);
 
-const BaseSwitchRoot = React.forwardRef<PressableRef, BaseSwitchRootProps>(
-  (
-    {
-      asChild,
-      checked,
-      size = 'md',
-      onCheckedChange,
-      disabled = false,
-      onPress: onPressProp,
-      'aria-valuetext': ariaValueText,
-      ...props
+const BaseSwitchRoot = ({
+  asChild,
+  checked,
+  size = 'md',
+  onCheckedChange,
+  disabled = false,
+  onPress: onPressProp,
+  'aria-valuetext': ariaValueText,
+  ref,
+  ...props
+}: BaseSwitchRootProps) => {
+  const styles = useStyles({
+    checked: !!checked,
+    disabled: !!disabled,
+    size,
+  });
+
+  const onPress = useCallback(
+    (ev: GestureResponderEvent) => {
+      if (disabled) return;
+      onCheckedChange?.(!checked);
+      onPressProp?.(ev);
     },
-    ref,
-  ) => {
-    const styles = useStyles({
-      checked: !!checked,
-      disabled: !!disabled,
-      size,
-    });
-
-    const onPress = useCallback(
-      (ev: GestureResponderEvent) => {
-        if (disabled) return;
-        onCheckedChange?.(!checked);
-        onPressProp?.(ev);
-      },
-      [disabled, checked, onCheckedChange, onPressProp],
-    );
-
-    const Component = asChild ? SlotPressable : Pressable;
+    [disabled, checked, onCheckedChange, onPressProp],
+  );
 
-    return (
-      <BaseSwitchProvider
-        value={{
+  const Component = asChild ? SlotPressable : Pressable;
+
+  return (
+    <BaseSwitchProvider
+      value={{
+        checked,
+        onCheckedChange,
+        disabled,
+        size,
+      }}
+    >
+      <Component
+        style={styles.root}
+        ref={ref}
+        aria-disabled={disabled}
+        role='switch'
+        aria-checked={checked}
+        onPress={onPress}
+        accessibilityState={{
           checked,
-          onCheckedChange,
           disabled,
-          size,
         }}
-      >
-        <Component
-          style={styles.root}
-          ref={ref}
-          aria-disabled={disabled}
-          role='switch'
-          aria-checked={checked}
-          onPress={onPress}
-          accessibilityState={{
-            checked,
-            disabled,
-          }}
-          accessibilityValue={
-            ariaValueText ? { text: ariaValueText } : undefined
-          }
-          disabled={disabled}
-          {...props}
-        />
-      </BaseSwitchProvider>
-    );
-  },
-);
+        accessibilityValue={ariaValueText ? { text: ariaValueText } : undefined}
+        disabled={disabled}
+        {...props}
+      />
+    </BaseSwitchProvider>
+  );
+};
 BaseSwitchRoot.displayName = ROOT_COMPONENT_NAME;
 
-const BaseSwitchThumb = React.forwardRef<ViewRef, SlottableViewProps>(
-  ({ asChild, ...props }, ref) => {
-    const { checked, disabled, size } = useBaseSwitchContext({
-      consumerName: THUMB_COMPONENT_NAME,
-      contextRequired: true,
-    });
-
-    const styles = useStyles({
-      checked: !!checked,
-      disabled: !!disabled,
-      size: size || 'md',
-    });
-
-    const translateX = useRef(new Animated.Value(checked ? 1 : 0)).current;
-
-    useEffect(() => {
-      Animated.timing(translateX, {
-        toValue: checked ? 1 : 0,
-        duration: 200,
-        useNativeDriver: true,
-      }).start();
-    }, [checked, translateX]);
-
-    const getTranslateDistance = (): number => {
-      const sizeName = size || 'md';
-      return sizeName === 'sm' ? 8 : 16;
-    };
-
-    const animatedStyle = {
-      transform: [
-        {
-          translateX: translateX.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, getTranslateDistance()],
-          }),
-        },
-      ],
-    };
-
-    if (asChild) {
-      const Component = SlotView;
-      return (
-        <Component
-          ref={ref}
-          role='presentation'
-          style={styles.thumb}
-          {...props}
-        />
-      );
-    }
+const BaseSwitchThumb = ({ asChild, ref, ...props }: SlottableViewProps) => {
+  const { checked, disabled, size } = useBaseSwitchContext({
+    consumerName: THUMB_COMPONENT_NAME,
+    contextRequired: true,
+  });
+
+  const styles = useStyles({
+    checked: !!checked,
+    disabled: !!disabled,
+    size: size || 'md',
+  });
+
+  const translateX = useRef(new Animated.Value(checked ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(translateX, {
+      toValue: checked ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  }, [checked, translateX]);
+
+  const getTranslateDistance = (): number => {
+    const sizeName = size || 'md';
+    return sizeName === 'sm' ? 8 : 16;
+  };
+
+  const animatedStyle = {
+    transform: [
+      {
+        translateX: translateX.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, getTranslateDistance()],
+        }),
+      },
+    ],
+  };
 
+  if (asChild) {
+    const Component = SlotView;
     return (
-      <Animated.View
+      <Component
         ref={ref}
         role='presentation'
-        style={[styles.thumbBase, animatedStyle]}
+        style={styles.thumb}
         {...props}
       />
     );
-  },
-);
+  }
+
+  return (
+    <Animated.View
+      ref={ref}
+      role='presentation'
+      style={[styles.thumbBase, animatedStyle]}
+      {...props}
+    />
+  );
+};
 
 type Size = NonNullable<SwitchProps['size']>;
 

package/src/lib/Components/Switch/Switch.test.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Switch } from './Switch';
 
-const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
     {children}
   </ThemeProvider>

package/src/lib/Components/Switch/Switch.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useControllableState } from '../../utils';
 import { Pressable } from '../Utility';
 import { BaseSwitchThumb, BaseSwitchRoot } from './BaseSwitch';
@@ -29,42 +27,35 @@ import { SwitchProps } from './types';
  * // Uncontrolled switch with default state
  * <Switch defaultChecked={true} onCheckedChange={handleChange} />
  */
-export const Switch = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  SwitchProps
->(
-  (
-    {
-      lx,
-      style,
-      checked: checkedProp,
-      onCheckedChange: onCheckedChangeProp,
-      defaultChecked = false,
-      disabled,
-      size = 'md',
-      ...props
-    },
-    ref,
-  ) => {
-    const [checked, onCheckedChange] = useControllableState({
-      prop: checkedProp,
-      onChange: onCheckedChangeProp,
-      defaultProp: defaultChecked,
-    });
+export const Switch = ({
+  lx,
+  style,
+  checked: checkedProp,
+  onCheckedChange: onCheckedChangeProp,
+  defaultChecked = false,
+  disabled,
+  size = 'md',
+  ref,
+  ...props
+}: SwitchProps) => {
+  const [checked, onCheckedChange] = useControllableState({
+    prop: checkedProp,
+    onChange: onCheckedChangeProp,
+    defaultProp: defaultChecked,
+  });
 
-    return (
-      <Pressable ref={ref} lx={lx} style={style} {...props}>
-        <BaseSwitchRoot
-          disabled={disabled}
-          checked={checked}
-          onCheckedChange={onCheckedChange}
-          size={size}
-        >
-          <BaseSwitchThumb />
-        </BaseSwitchRoot>
-      </Pressable>
-    );
-  },
-);
+  return (
+    <Pressable ref={ref} lx={lx} style={style} {...props}>
+      <BaseSwitchRoot
+        disabled={disabled}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        size={size}
+      >
+        <BaseSwitchThumb />
+      </BaseSwitchRoot>
+    </Pressable>
+  );
+};
 
 Switch.displayName = 'Switch';

package/src/lib/Components/Tag/Tag.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
 import { StyleSheet, Text } from 'react-native';
 import { useStyleSheet } from '../../../styles';
-import { ViewRef } from '../../types';
 import { IconSize } from '../Icon';
 import { Box } from '../Utility';
 import { TagProps } from './types';
@@ -128,37 +126,33 @@ const iconSizeMap: Record<Size, IconSize> = {
  * // Small tag
  * <Tag label="Small" size="sm" />
  */
-export const Tag = React.forwardRef<ViewRef, TagProps>(
-  (
-    {
-      appearance = 'accent',
-      size = 'md',
-      icon,
-      label,
-      disabled = false,
-      lx = {},
-      style,
-      ...props
-    },
-    ref,
-  ) => {
-    const styles = useStyles({ appearance, size, disabled });
+export const Tag = ({
+  appearance = 'accent',
+  size = 'md',
+  icon,
+  label,
+  disabled = false,
+  lx = {},
+  style,
+  ref,
+  ...props
+}: TagProps) => {
+  const styles = useStyles({ appearance, size, disabled });
 
-    const IconComponent = icon;
-    const iconSize = iconSizeMap[size];
+  const IconComponent = icon;
+  const iconSize = iconSizeMap[size];
 
-    return (
-      <Box
-        ref={ref}
-        lx={lx}
-        style={StyleSheet.flatten([styles.root, style])}
-        {...props}
-      >
-        {IconComponent && <IconComponent size={iconSize} style={styles.icon} />}
-        <Text style={styles.text}>{label}</Text>
-      </Box>
-    );
-  },
-);
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.root, style])}
+      {...props}
+    >
+      {IconComponent && <IconComponent size={iconSize} style={styles.icon} />}
+      <Text style={styles.text}>{label}</Text>
+    </Box>
+  );
+};
 
 Tag.displayName = 'Tag';

package/src/lib/Components/TextInput/TextInput.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-import { TextInput as RNTextInput } from 'react-native';
 import { BaseInput } from '../BaseInput';
 import { type TextInputProps } from './types';
 
@@ -57,11 +55,8 @@ import { type TextInputProps } from './types';
  *   }}
  * />
  */
-export const TextInput = React.forwardRef<
-  React.ElementRef<typeof RNTextInput>,
-  TextInputProps
->((props, ref) => {
-  return <BaseInput ref={ref} {...props} />;
-});
+export const TextInput = (props: TextInputProps) => {
+  return <BaseInput {...props} />;
+};
 
 TextInput.displayName = 'TextInput';

package/src/lib/Components/ThemeProvider/ThemeProvider.test.tsx

@@ -24,6 +24,7 @@ describe('ThemeProvider', () => {
       </ThemeProvider>,
     );
 
-    expect(screen.getByTestId('child')).toHaveTextContent('Hello World');
+    expect(screen.getByTestId('child'));
+    expect(screen.getByText('Hello World'));
   });
 });

package/src/lib/Components/ThemeProvider/ThemeProvider.tsx

@@ -1,5 +1,4 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import { FC } from 'react';
 
 import { I18nProvider } from '../../../i18n';
 import { LumenStyleSheetProvider } from '../../../styles';
@@ -10,12 +9,12 @@ import { ThemeProviderProps } from './types';
 
 const [ThemeContextProvider] = createSafeContext('ThemeProvider');
 
-const ThemeProvider: FC<ThemeProviderProps> = ({
+const ThemeProvider = ({
   colorScheme,
   themes,
   children,
   locale,
-}) => {
+}: ThemeProviderProps) => {
   return (
     <ThemeContextProvider value={{}}>
       <LumenStyleSheetProvider colorScheme={colorScheme} themes={themes}>

package/src/lib/Components/Tile/Tile.mdx

@@ -76,6 +76,12 @@ By default the tile fills the width of its container. The title and description
 
 <Canvas of={TileStories.ResponsiveLayout} />
 
+### Centered Content
+
+Use the `centered` prop to vertically center tile content. This is useful when a tile has less content than its neighbors, like a "Show more" tile in a grid.
+
+<Canvas of={TileStories.CenteredShowcase} />
+
 </Tab>
 <Tab label="Implementation">
 
@@ -149,6 +155,35 @@ import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
 </Tile>
 ```
 
+### Centered Content
+
+Use the `centered` prop to vertically center the tile content. This is useful when a tile has less content than its neighbors in a grid, like a "Show more" tile that needs to align with richer tiles.
+
+```tsx
+import { ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+import { View } from 'react-native';
+
+// In a grid where other tiles have more content
+<View style={{ flexDirection: 'row', gap: 8 }}>
+  <Tile appearance='card'>
+    <TileSpot appearance='coin' icon='btc' />
+    <TileContent>
+      <TileTitle>Title</TileTitle>
+      <TileDescription>Description</TileDescription>
+    </TileContent>
+    <Tag label='Label' />
+  </Tile>
+
+  {/* Show more tile with centered content */}
+  <Tile appearance='card' centered>
+    <TileSpot appearance='icon' icon={ChevronRight} />
+    <TileContent>
+      <TileTitle>Show more</TileTitle>
+    </TileContent>
+  </Tile>
+</View>
+```
+
 ### With Coin Icon
 
 ```tsx

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { Settings, Plus, User, Apps } from '../../Symbols';
+import { Settings, Plus, User, Apps, ChevronRight } from '../../Symbols';
 import { Tag } from '../Tag/Tag';
 import { Box, Text } from '../Utility';
 import {
@@ -28,14 +28,37 @@ const meta: Meta<typeof Tile> = {
       },
     },
   },
+  argTypes: {
+    onPress: {
+      action: 'pressed',
+    },
+    onLongPress: {
+      action: 'long pressed',
+    },
+    appearance: {
+      control: 'select',
+      options: ['no-background', 'card'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    centered: {
+      control: 'boolean',
+    },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof Tile>;
 
 export const Base: Story = {
-  render: () => (
-    <Tile lx={{ maxWidth: 's112' }}>
+  args: {
+    appearance: 'no-background',
+    disabled: false,
+    centered: false,
+  },
+  render: (args) => (
+    <Tile {...args} lx={{ maxWidth: 's112' }}>
       <TileSpot appearance='icon' icon={Settings} />
       <TileContent>
         <TileTitle>Item with Spot and Description</TileTitle>
@@ -253,3 +276,40 @@ export const AppearanceShowcase: Story = {
     </Box>
   ),
 };
+
+export const CenteredShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', gap: 's8' }}>
+      <Tile appearance='card' lx={{ width: 's128' }}>
+        <TileSpot appearance='icon' icon={Apps} />
+        <TileContent>
+          <TileTitle>Title</TileTitle>
+          <TileDescription>Description</TileDescription>
+        </TileContent>
+        <Tag label='Label' appearance='base' />
+      </Tile>
+      <Tile appearance='card' lx={{ width: 's128' }}>
+        <TileSpot appearance='icon' icon={Apps} />
+        <TileContent>
+          <TileTitle>Title</TileTitle>
+          <TileDescription>Description</TileDescription>
+        </TileContent>
+        <Tag label='Label' appearance='base' />
+      </Tile>
+      <Tile appearance='card' lx={{ width: 's128' }}>
+        <TileSpot appearance='icon' icon={Apps} />
+        <TileContent>
+          <TileTitle>Title</TileTitle>
+          <TileDescription>Description</TileDescription>
+        </TileContent>
+        <Tag label='Label' appearance='base' />
+      </Tile>
+      <Tile appearance='card' centered lx={{ width: 's128' }}>
+        <TileSpot appearance='icon' icon={ChevronRight} />
+        <TileContent>
+          <TileTitle>Show more</TileTitle>
+        </TileContent>
+      </Tile>
+    </Box>
+  ),
+};

package/src/lib/Components/Tile/Tile.test.tsx

@@ -14,7 +14,7 @@ import {
   TileDescription,
 } from './Tile';
 
-const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
     {children}
   </ThemeProvider>