@ledgerhq/lumen-ui-rnative 0.1.1 → 0.1.3

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

@@ -0,0 +1,159 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SegmentedControlStories from './SegmentedControl.stories';
+import { SegmentedControl } from './SegmentedControl';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+import { Box } from '../Utility';
+
+<Meta title='Navigation/SegmentedControl' of={SegmentedControlStories} />
+
+# 📑 SegmentedControl
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+SegmentedControl is a tab bar–style component for switching between mutually exclusive options. Use it when the user needs to choose one of a small set of choices (e.g. transaction type, asset section).
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=1170-2345&m=dev).
+
+## Anatomy
+
+<Canvas of={SegmentedControlStories.Base} />
+
+- **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).
+
+## Properties
+
+<Canvas of={SegmentedControlStories.Base} />
+<Controls of={SegmentedControlStories.Base} />
+
+### Labels only vs with icons
+
+You can use segments with text only (Base), or add an icon to each button (WithIcons). Use one approach consistently for all segments in a single control.
+
+<Canvas of={SegmentedControlStories.Base} />
+
+<Canvas of={SegmentedControlStories.WithIcons} />
+
+## Responsive Layout
+
+SegmentedControl lays out segments in a horizontal row with equal width per segment. The sliding pill animates to the selected segment.
+
+## Accessibility
+
+- Use accessibilityLabel on SegmentedControl to describe the control (e.g. "Transaction type", "Asset section").
+- Each segment exposes accessibilityState with a selected value for screen readers.
+
+</Tab>
+  <Tab label="Implementation">
+
+## Installation
+
+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.
+
+```tsx
+import React from 'react';
+import { SegmentedControl, SegmentedControlButton } from '@ledgerhq/lumen-ui-rnative';
+
+export default function Example() {
+  const [state, setState] = React.useState('send');
+
+  return (
+    <SegmentedControl
+      selectedValue={state}
+      onSelectedChange={setState}
+      accessibilityLabel='Transaction type'
+    >
+      <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+      <SegmentedControlButton value='receive'>Receive</SegmentedControlButton>
+      <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
+    </SegmentedControl>
+  );
+}
+```
+
+## With icons
+
+Pass an icon from symbols to each button for a left-positioned icon. Use icons on all segments or none for consistency.
+
+```tsx
+import { SegmentedControl, SegmentedControlButton } from '@ledgerhq/lumen-ui-rnative';
+import { Coins, Nft, TransferHorizontal, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function Example() {
+  const [state, setState] = React.useState('tokens');
+  return (
+    <SegmentedControl
+      selectedValue={state}
+      onSelectedChange={setState}
+      accessibilityLabel='Asset section'
+    >
+      <SegmentedControlButton value='tokens' icon={Coins}>
+        Tokens
+      </SegmentedControlButton>
+      <SegmentedControlButton value='nfts' icon={Nft}>
+        NFTs
+      </SegmentedControlButton>
+      <SegmentedControlButton value='activity' icon={TransferHorizontal}>
+        Activity
+      </SegmentedControlButton>
+      <SegmentedControlButton value='settings' icon={Settings}>
+        Settings
+      </SegmentedControlButton>
+    </SegmentedControl>
+  );
+}
+```
+
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
+  <CommonRulesDoAndDont />
+</Box>
+
+</Tab>
+</CustomTabs>

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

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import React, { useState } from 'react';
+import { Coins, Nft, TransferHorizontal, Settings } from '../../Symbols';
+import { Box } from '../Utility';
+import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
+
+const meta = {
+  title: 'Navigation/SegmentedControl',
+  component: SegmentedControl,
+  subcomponents: {
+    SegmentedControlButton,
+  },
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  argTypes: {
+    onSelectedChange: {
+      action: 'change',
+      description: 'Callback when the selected value changes',
+      table: {
+        type: { summary: '(value: string) => void' },
+      },
+    },
+    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' },
+      },
+    },
+  },
+} satisfies Meta<typeof SegmentedControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {} as React.ComponentProps<typeof SegmentedControl>,
+  render: () => {
+    const [state, setState] = useState('send');
+
+    return (
+      <Box lx={{ width: 's256' }}>
+        <SegmentedControl
+          selectedValue={state}
+          onSelectedChange={setState}
+          accessibilityLabel='Transaction type'
+        >
+          <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+          <SegmentedControlButton value='receive'>
+            Receive
+          </SegmentedControlButton>
+          <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
+        </SegmentedControl>
+      </Box>
+    );
+  },
+};
+
+export const WithIcons: Story = {
+  args: {} as React.ComponentProps<typeof SegmentedControl>,
+  render: () => {
+    const [state, setState] = useState('tokens');
+
+    return (
+      <SegmentedControl
+        selectedValue={state}
+        onSelectedChange={setState}
+        accessibilityLabel='Asset section'
+      >
+        <SegmentedControlButton value='tokens' icon={Coins}>
+          Tokens
+        </SegmentedControlButton>
+        <SegmentedControlButton value='nfts' icon={Nft}>
+          NFTs
+        </SegmentedControlButton>
+        <SegmentedControlButton value='activity' icon={TransferHorizontal}>
+          Activity
+        </SegmentedControlButton>
+        <SegmentedControlButton value='settings' icon={Settings}>
+          Settings
+        </SegmentedControlButton>
+      </SegmentedControl>
+    );
+  },
+};

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

@@ -0,0 +1,57 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+describe('SegmentedControl', () => {
+  it('renders segments with labels', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <SegmentedControl
+          selectedValue='send'
+          onSelectedChange={() => {
+            /* empty */
+          }}
+          accessibilityLabel='Transaction type'
+        >
+          <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+          <SegmentedControlButton value='receive'>
+            Receive
+          </SegmentedControlButton>
+        </SegmentedControl>
+      </TestWrapper>,
+    );
+    expect(getByText('Send')).toBeTruthy();
+    expect(getByText('Receive')).toBeTruthy();
+  });
+
+  it('calls onSelectedChange with segment value when a segment is pressed', () => {
+    const onSelectedChange = jest.fn();
+    const { getByText } = render(
+      <TestWrapper>
+        <SegmentedControl
+          selectedValue='send'
+          onSelectedChange={onSelectedChange}
+          accessibilityLabel='Transaction type'
+        >
+          <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+          <SegmentedControlButton value='receive'>
+            Receive
+          </SegmentedControlButton>
+        </SegmentedControl>
+      </TestWrapper>,
+    );
+
+    fireEvent.press(getByText('Receive'));
+
+    expect(onSelectedChange).toHaveBeenCalledWith('receive');
+  });
+});

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

@@ -0,0 +1,202 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { LayoutChangeEvent } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} 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';
+import type {
+  SegmentedControlButtonProps,
+  SegmentedControlProps,
+} from './types';
+
+const ICON_SIZE = 16;
+
+export function SegmentedControlButton({
+  value,
+  children,
+  icon: Icon,
+  onPress,
+  ...props
+}: SegmentedControlButtonProps) {
+  const styles = useButtonStyles();
+  const { selectedValue, onSelectedChange } = useSegmentedControlContext();
+
+  const selected = selectedValue === value;
+
+  function handlePress() {
+    onSelectedChange(value);
+    onPress?.();
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      accessibilityState={{ selected }}
+      style={styles.button}
+      {...props}
+    >
+      <Box style={styles.content}>
+        {Icon && (
+          <Box style={styles.iconWrap}>
+            <Icon size={ICON_SIZE} />
+          </Box>
+        )}
+        <Text
+          typography={selected ? 'body2SemiBold' : 'body2'}
+          lx={{ color: 'base' }}
+          style={styles.label}
+        >
+          {children}
+        </Text>
+      </Box>
+    </Pressable>
+  );
+}
+
+SegmentedControlButton.displayName = 'SegmentedControlButton';
+
+function useButtonStyles() {
+  return useStyleSheet(
+    (t) => ({
+      button: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: t.spacings.s16,
+        paddingVertical: t.spacings.s8,
+        borderRadius: t.borderRadius.full,
+        zIndex: 1,
+      },
+      content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: t.spacings.s8,
+      },
+      label: {
+        textAlign: 'center',
+        includeFontPadding: false,
+      },
+      iconWrap: {
+        flexDirection: 'row',
+        alignItems: 'center',
+      },
+    }),
+    [],
+  );
+}
+
+export function SegmentedControl({
+  selectedValue,
+  onSelectedChange,
+  accessibilityLabel,
+  children,
+  ...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],
+  );
+
+  return (
+    <SegmentedControlContextProvider
+      value={{ selectedValue, onSelectedChange }}
+    >
+      <Box
+        accessibilityRole='radiogroup'
+        accessibilityLabel={accessibilityLabel}
+        onLayout={onLayout}
+        style={styles.container}
+        {...props}
+      >
+        {children}
+        <Animated.View
+          style={[styles.pill, animatedPillStyle]}
+          pointerEvents='none'
+        />
+      </Box>
+    </SegmentedControlContextProvider>
+  );
+}
+
+SegmentedControl.displayName = 'SegmentedControl';
+
+function useRootStyles() {
+  return useStyleSheet(
+    (t) => ({
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        position: 'relative',
+        width: '100%',
+        borderRadius: t.borderRadius.full,
+        backgroundColor: t.colors.bg.baseTransparent,
+      },
+      pill: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        borderRadius: t.borderRadius.sm,
+        backgroundColor: t.colors.bg.muted,
+        zIndex: 0,
+      },
+    }),
+    [],
+  );
+}

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

@@ -0,0 +1,17 @@
+import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+
+export type SegmentedControlContextValue = {
+  selectedValue: string;
+  onSelectedChange: (value: string) => void;
+};
+
+const [SegmentedControlContextProvider, _useSegmentedControlSafeContext] =
+  createSafeContext<SegmentedControlContextValue>('SegmentedControl');
+
+export const useSegmentedControlContext = () =>
+  _useSegmentedControlSafeContext({
+    consumerName: 'SegmentedControlButton',
+    contextRequired: true,
+  });
+
+export { SegmentedControlContextProvider };

package/src/lib/Components/SegmentedControl/index.ts

@@ -0,0 +1,2 @@
+export * from './SegmentedControl';
+export type * from './types';

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

@@ -0,0 +1,46 @@
+import { ComponentType, ReactNode } from 'react';
+import { StyledPressableProps } from '../../../styles';
+import { IconSize } from '../Icon';
+import { BoxProps } from '../Utility';
+
+export type SegmentedControlProps = {
+  /**
+   * The value of the currently selected segment (drives the sliding pill).
+   */
+  selectedValue: string;
+  /**
+   * Callback when the selected segment value changes.
+   */
+  onSelectedChange: (value: string) => void;
+  /**
+   * Accessible label for the control (e.g. "File view").
+   */
+  accessibilityLabel?: string;
+  /**
+   * Segment buttons (SegmentedControlButton). Can be wrapped (e.g. in Tooltip).
+   */
+  children: ReactNode;
+} & Omit<BoxProps, 'children'>;
+
+type IconComponent = ComponentType<{
+  size?: IconSize;
+}>;
+
+export type SegmentedControlButtonProps = {
+  /**
+   * Value for this segment (must be unique among siblings).
+   */
+  value: string;
+  /**
+   * Button label (e.g. "Preview", "Raw").
+   */
+  children: ReactNode;
+  /**
+   * Optional icon shown to the left of the label (from Symbols).
+   */
+  icon?: IconComponent;
+  /**
+   * Optional callback when the button is pressed (in addition to onSelectedChange on the parent).
+   */
+  onPress?: () => void;
+} & Omit<StyledPressableProps, 'children'>;

package/src/lib/Components/TabBar/TabBar.tsx

@@ -287,6 +287,7 @@ const useStyles = () =>
       },
       pill: {
         position: 'absolute',
+        pointerEvents: 'none',
         top: PILL_INSET,
         left: PILL_INSET,
         borderRadius: t.borderRadius.full,

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

@@ -5,7 +5,6 @@ import { BoxProps } from '../Utility';
 
 type IconComponent = ComponentType<{
   size?: IconSize;
-  className?: string;
 }>;
 
 export type TabBarItemProps = {

package/src/lib/Components/index.ts

@@ -17,6 +17,7 @@ export * from './ListItem';
 export * from './NavBar';
 export * from './PageIndicator';
 export * from './SearchInput';
+export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';

package/src/styles/theme/createStylesheetTheme.test.ts

@@ -15,7 +15,7 @@ describe('createStylesheetTheme', () => {
     });
 
     it('should flatten heading/body typography tokens', () => {
-      jest.spyOn(RuntimeConstants, 'isAndroid', 'get').mockReturnValue(true);
+      jest.spyOn(RuntimeConstants, 'isIOS', 'get').mockReturnValue(true);
       const theme = ledgerLiveThemes.dark;
 
       const result = createStylesheetTheme(theme);

package/src/styles/theme/resolvers/resolveFontWeights.test.ts

@@ -9,8 +9,9 @@ describe('resolveTypographies', () => {
     jest.restoreAllMocks();
   });
 
-  it('should not modify fontFamily on android', () => {
-    jest.spyOn(RuntimeConstants, 'isAndroid', 'get').mockReturnValue(true);
+  it('should not modify fontFamily on iOS', () => {
+    jest.spyOn(RuntimeConstants, 'isIOS', 'get').mockReturnValue(true);
+    jest.spyOn(RuntimeConstants, 'isBrowser', 'get').mockReturnValue(false);
     const theme = ledgerLiveThemes.dark;
 
     const result = createStylesheetTheme(theme);
@@ -24,8 +25,9 @@ describe('resolveTypographies', () => {
     );
   });
 
-  it('should append weight suffix to fontFamily on non-android', () => {
-    jest.spyOn(RuntimeConstants, 'isAndroid', 'get').mockReturnValue(false);
+  it('should append weight suffix to fontFamily on Android', () => {
+    jest.spyOn(RuntimeConstants, 'isIOS', 'get').mockReturnValue(false);
+    jest.spyOn(RuntimeConstants, 'isBrowser', 'get').mockReturnValue(false);
     const theme = ledgerLiveThemes.dark;
 
     const result = createStylesheetTheme(theme);
@@ -44,8 +46,9 @@ describe('resolveTypographies', () => {
     });
   });
 
-  it('should not modify other typography properties on non-android', () => {
-    jest.spyOn(RuntimeConstants, 'isAndroid', 'get').mockReturnValue(false);
+  it('should not modify other typography properties on Android', () => {
+    jest.spyOn(RuntimeConstants, 'isIOS', 'get').mockReturnValue(false);
+    jest.spyOn(RuntimeConstants, 'isBrowser', 'get').mockReturnValue(false);
     const theme = ledgerLiveThemes.dark;
 
     const result = createStylesheetTheme(theme);

package/src/styles/theme/resolvers/resolveFontWeights.ts

@@ -14,7 +14,7 @@ export const FONT_WEIGHT_SUFFIX_MAP = {
 };
 
 export const resolveFontWeights = (typographies: LumenTypographyTokens) => {
-  if (RuntimeConstants.isAndroid || RuntimeConstants.isBrowser) {
+  if (RuntimeConstants.isIOS || RuntimeConstants.isBrowser) {
     return typographies;
   }
 

package/dist/src/lib/Components/Banner/Banner.figma.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=Banner.figma.d.ts.map

package/dist/src/lib/Components/Banner/Banner.figma.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Banner.figma.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Banner/Banner.figma.tsx"],"names":[],"mappings":""}