@ledgerhq/lumen-ui-rnative 0.1.22 → 0.1.24

package/src/lib/Components/OptionList/useOptionList/useOptionListItems.ts

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import type {
+  MetaShape,
+  OptionListItemData,
+  OptionListItemGroup,
+} from '../types';
+
+const groupByField = <TMeta extends MetaShape = MetaShape>(
+  items: OptionListItemData<TMeta>[],
+): OptionListItemGroup<TMeta>[] => {
+  const order: string[] = [];
+  const map: Record<string, OptionListItemData<TMeta>[]> = {};
+  for (const item of items) {
+    const key = item.group ?? '';
+    if (!map[key]) {
+      order.push(key);
+      map[key] = [];
+    }
+    map[key].push(item);
+  }
+  return order.map((label) => ({ label, items: map[label] }));
+};
+
+const hasGroups = (items: OptionListItemData[]): boolean =>
+  items.some((item) => item.group != null);
+
+const toResult = <TMeta extends MetaShape = MetaShape>(
+  items: OptionListItemData<TMeta>[],
+): UseOptionListItemsResult<TMeta> => {
+  const isGrouped = hasGroups(items);
+  return isGrouped
+    ? { isGrouped: true, groups: groupByField(items), flatItems: [] }
+    : { isGrouped: false, groups: [], flatItems: items };
+};
+
+type UseOptionListItemsParams<TMeta extends MetaShape = MetaShape> = {
+  items: OptionListItemData<TMeta>[];
+};
+
+type UseOptionListItemsResult<TMeta extends MetaShape = MetaShape> = {
+  isGrouped: boolean;
+  groups: OptionListItemGroup<TMeta>[];
+  flatItems: OptionListItemData<TMeta>[];
+};
+
+export const useOptionListItems = <TMeta extends MetaShape = MetaShape>({
+  items,
+}: UseOptionListItemsParams<TMeta>): UseOptionListItemsResult<TMeta> =>
+  useMemo(() => toResult(items), [items]);

package/src/lib/Components/PageIndicator/PageIndicator.tsx

@@ -10,7 +10,7 @@ import Animated, {
 import { useStyleSheet, useTheme } from '../../../styles';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { Box } from '../Utility';
-import { PageIndicatorProps } from './types';
+import type { PageIndicatorProps } from './types';
 
 const AnimatedBox = Animated.createAnimatedComponent(Box);
 const MAX_VISIBLE_DOTS = 4;

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

@@ -1,4 +1,4 @@
-import { BoxProps } from '../Utility';
+import type { BoxProps } from '../Utility';
 
 export type PageIndicatorProps = {
   /**

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
 import { View } from 'react-native';
 import { SearchInput } from './SearchInput';
-import { SearchInputProps } from './types';
+import type { SearchInputProps } from './types';
 
 const meta: Meta<typeof SearchInput> = {
   component: SearchInput,

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

@@ -1,5 +1,5 @@
-import { BaseInputProps } from '../BaseInput';
-import { BoxProps } from '../Utility';
+import type { BaseInputProps } from '../BaseInput';
+import type { BoxProps } from '../Utility';
 
 export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label'> &
   BoxProps & {

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

@@ -1,5 +1,5 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
-import { LayoutChangeEvent } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useStyleSheet } from '../../../styles';
 import type { LumenTextStyle, LumenTypographyTokenName } from '../../../styles';

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

@@ -1,7 +1,7 @@
-import { ComponentType, ReactNode } from 'react';
-import { LumenTextStyle, StyledPressableProps } from '../../../styles';
-import { IconSize } from '../Icon';
-import { BoxProps } from '../Utility';
+import type { ComponentType, ReactNode } from 'react';
+import type { LumenTextStyle, StyledPressableProps } from '../../../styles';
+import type { IconSize } from '../Icon';
+import type { BoxProps } from '../Utility';
 
 export type SegmentedControlProps = {
   /**

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

@@ -1,13 +1,13 @@
+import type { ReactNode } from 'react';
 import React, {
   Children,
   isValidElement,
-  ReactNode,
   useCallback,
   useEffect,
   useMemo,
   useRef,
 } from 'react';
-import { LayoutChangeEvent } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
 import {
   useAnimatedStyle,
   useSharedValue,

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

@@ -1,6 +1,7 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import { useState, useRef, useMemo, ReactNode } from 'react';
-import { SelectData } from './types';
+import type { ReactNode } from 'react';
+import { useState, useRef, useMemo } from 'react';
+import type { SelectData } from './types';
 
 type GlobalSelectBottomSheetContextValue = {
   currentSelect: SelectData | null;

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

@@ -1,4 +1,5 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import type { ReactNode } from 'react';
 import {
   useState,
   useEffect,
@@ -6,7 +7,6 @@ import {
   useId,
   Children,
   isValidElement,
-  ReactNode,
 } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';

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

@@ -1,6 +1,6 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import { ReactNode } from 'react';
-import { SelectContentItem } from './types';
+import type { ReactNode } from 'react';
+import type { SelectContentItem } from './types';
 
 export type SelectContextValue = {
   selectId: string;

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

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react';
-import { PressableProps } from 'react-native';
-import {
+import type { ReactNode } from 'react';
+import type { PressableProps } from 'react-native';
+import type {
   StyledViewProps,
   StyledPressableProps,
   StyledTextProps,
 } from '../../../styles';
-import { BoxProps } from '../Utility';
+import type { BoxProps } from '../Utility';
 
 export type SelectProps = {
   /**

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { Box } from '../Utility/Box';
 import { Skeleton } from './Skeleton';
 

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

@@ -1,4 +1,4 @@
-import { StyledViewProps } from '../../../styles';
+import type { StyledViewProps } from '../../../styles';
 
 export type SkeletonProps = {
   /**

package/src/lib/Components/Slot/Slot.tsx

@@ -1,11 +1,10 @@
-import {
+import type {
   ComponentRef,
-  isValidElement,
-  cloneElement,
   ComponentPropsWithoutRef,
   ComponentPropsWithRef,
 } from 'react';
-import {
+import { isValidElement, cloneElement } from 'react';
+import type {
   View,
   Pressable,
   Text,
@@ -15,10 +14,10 @@ import {
   TextProps,
   ImageProps,
   StyleProp,
-  StyleSheet,
   PressableStateCallbackType,
   ImageStyle as RNImageStyle,
 } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 const SlotPressable = ({
   ref,

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
 import { Spinner } from './Spinner';

package/src/lib/Components/Spinner/Spinner.tsx

@@ -1,9 +1,10 @@
 import Svg, { Path } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
-import { LumenTextStyle, useResolveTextStyle, useTheme } from '../../../styles';
+import type { LumenTextStyle } from '../../../styles';
+import { useResolveTextStyle, useTheme } from '../../../styles';
 import { Spin } from '../../Animations/Spin';
 import { Box } from '../Utility';
-import { SpinnerProps } from './types';
+import type { SpinnerProps } from './types';
 
 /**
  * A basic spinner component for loading states.

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

@@ -1,6 +1,6 @@
-import { LumenTextStyle } from '../../../styles';
-import { IconSize } from '../Icon';
-import { TextProps } from '../Utility';
+import type { LumenTextStyle } from '../../../styles';
+import type { IconSize } from '../Icon';
+import type { TextProps } from '../Utility';
 
 export type SpinnerProps = {
   /**

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

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { Settings, Plus, Heart, Star } from '../../Symbols';
-import { IconProps } from '../Icon';
+import type { IconProps } from '../Icon';
 import { Box, Text } from '../Utility';
 import { Spot } from './Spot';
-import { SpotProps } from './types';
+import type { SpotProps } from './types';
 
 const meta: Meta<typeof Spot> = {
   component: Spot,

package/src/lib/Components/Spot/Spot.tsx

@@ -1,7 +1,8 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
-import { LumenTypographyTokens, useStyleSheet } from '../../../styles';
+import type { LumenTypographyTokens } from '../../../styles';
+import { useStyleSheet } from '../../../styles';
 import {
   BluetoothCircleFill,
   CheckmarkCircleFill,
@@ -9,10 +10,11 @@ import {
   InformationFill,
   WarningFill,
 } from '../../Symbols';
-import { IconSize } from '../Icon/types';
-import { Spinner, SpinnerProps } from '../Spinner';
+import type { IconSize } from '../Icon/types';
+import type { SpinnerProps } from '../Spinner';
+import { Spinner } from '../Spinner';
 import { Box } from '../Utility';
-import { SpotAppearance, SpotProps, SpotSize } from './types';
+import type { SpotAppearance, SpotProps, SpotSize } from './types';
 
 const BLUETOOTH_COLOR = '#0082FC';
 

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

@@ -1,6 +1,6 @@
-import { ComponentType } from 'react';
-import { StyledViewProps } from '../../../styles';
-import { IconProps } from '../Icon';
+import type { ComponentType } from 'react';
+import type { StyledViewProps } from '../../../styles';
+import type { IconProps } from '../Icon';
 
 export type SpotAppearance =
   | 'icon'

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
 import { Stepper } from './Stepper';

package/src/lib/Components/Stepper/Stepper.tsx

@@ -15,7 +15,7 @@ import { useTheme } from '../../../styles';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
-import { StepperProps } from './types';
+import type { StepperProps } from './types';
 
 const SIZE = 48;
 const STROKE_WIDTH = 4;

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

@@ -1,4 +1,4 @@
-import { StyledViewProps } from '../../../styles';
+import type { StyledViewProps } from '../../../styles';
 
 export type StepperProps = {
   /**

package/src/lib/Components/Subheader/Subheader.tsx

@@ -3,7 +3,7 @@ import { useStyleSheet } from '../../../styles';
 import { ChevronRight, Information } from '../../Symbols';
 import { InteractiveIcon } from '../InteractiveIcon';
 import { Box, Pressable, Text } from '../Utility';
-import {
+import type {
   SubheaderCountProps,
   SubheaderDescriptionProps,
   SubheaderInfoProps,

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { StyledTextProps, StyledViewProps } from '../../../styles';
-import { InteractiveIconProps } from '../InteractiveIcon';
+import type { ReactNode } from 'react';
+import type { StyledTextProps, StyledViewProps } from '../../../styles';
+import type { InteractiveIconProps } from '../InteractiveIcon';
 
 export type SubheaderProps = {
   /**

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

@@ -14,10 +14,10 @@ import Animated, {
 import { useStyleSheet } from '../../../styles';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
 
-import { SlottablePressableProps, SlottableViewProps } from '../../types';
+import type { SlottablePressableProps, SlottableViewProps } from '../../types';
 import { SlotPressable, SlotView } from '../Slot';
 
-import { SwitchProps } from './types';
+import type { SwitchProps } from './types';
 
 const ROOT_COMPONENT_NAME = 'BaseSwitch';
 const THUMB_COMPONENT_NAME = 'BaseSwitchThumb';

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

@@ -3,7 +3,7 @@ import { useControllableState } from '../../utils';
 import { Pressable } from '../Utility';
 import { BaseSwitchThumb, BaseSwitchRoot } from './BaseSwitch';
 
-import { SwitchProps } from './types';
+import type { SwitchProps } from './types';
 
 /**
  * The switch follows the design system tokens and supports checked, unchecked,

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

@@ -1,4 +1,4 @@
-import { StyledPressableProps } from '../../../styles';
+import type { StyledPressableProps } from '../../../styles';
 
 export type SwitchProps = {
   /**

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

@@ -1,19 +1,14 @@
 import { BlurView } from '@sbaiahmed1/react-native-blur';
+import type { ReactNode } from 'react';
 import {
   Children,
   isValidElement,
-  ReactNode,
   useCallback,
   useEffect,
   useRef,
 } from 'react';
-import {
-  LayoutChangeEvent,
-  Platform,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 import Animated, {
   cancelAnimation,
   useAnimatedStyle,
@@ -27,7 +22,7 @@ import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { Placeholder } from '../../Symbols';
 import { Box, Pressable } from '../Utility';
 import { TabBarContextProvider, useTabBarContext } from './TabBarContext';
-import { TabBarItemProps, TabBarProps } from './types';
+import type { TabBarItemProps, TabBarProps } from './types';
 
 export const TAB_BAR_HEIGHT = 60;
 const PILL_INSET = 4;

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

@@ -1,7 +1,7 @@
-import { ComponentType, ReactNode } from 'react';
-import { StyledViewProps } from '../../../styles';
-import { IconSize } from '../Icon';
-import { BoxProps } from '../Utility';
+import type { ComponentType, ReactNode } from 'react';
+import type { StyledViewProps } from '../../../styles';
+import type { IconSize } from '../Icon';
+import type { BoxProps } from '../Utility';
 
 type IconComponent = ComponentType<{
   size?: IconSize;

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

@@ -1,9 +1,9 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { StyleSheet, Text } from 'react-native';
 import { useStyleSheet } from '../../../styles';
-import { IconSize } from '../Icon';
+import type { IconSize } from '../Icon';
 import { Box } from '../Utility';
-import { TagProps } from './types';
+import type { TagProps } from './types';
 
 type Appearance = NonNullable<TagProps['appearance']>;
 type Size = NonNullable<TagProps['size']>;

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

@@ -1,6 +1,6 @@
-import { ComponentType } from 'react';
-import { StyledViewProps } from '../../../styles';
-import { IconProps } from '../Icon';
+import type { ComponentType } from 'react';
+import type { StyledViewProps } from '../../../styles';
+import type { IconProps } from '../Icon';
 
 export type TagProps = {
   /**

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

@@ -1,4 +1,4 @@
-import { BaseInputProps } from '../BaseInput';
-import { BoxProps } from '../Utility';
+import type { BaseInputProps } from '../BaseInput';
+import type { BoxProps } from '../Utility';
 
 export type TextInputProps = Omit<BaseInputProps, 'prefix'> & BoxProps;

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

@@ -5,7 +5,7 @@ import { LumenStyleSheetProvider } from '../../../styles';
 
 import { GlobalSelectProvider } from '../Select/GlobalSelectContext';
 import { GlobalTooltipProvider } from '../Tooltip/GlobalTooltipContext';
-import { ThemeProviderProps } from './types';
+import type { ThemeProviderProps } from './types';
 
 const [ThemeContextProvider] = createSafeContext('ThemeProvider');
 

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

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
-import { ColorSchemeName } from 'react-native';
-import { SupportedLocale } from '../../../i18n/languages';
-import { LumenThemes } from '../../../styles';
+import type { PropsWithChildren } from 'react';
+import type { ColorSchemeName } from 'react-native';
+import type { SupportedLocale } from '../../../i18n/languages';
+import type { LumenThemes } from '../../../styles';
 
 export type ThemeProviderProps = PropsWithChildren & {
   /**

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

@@ -3,11 +3,11 @@ import {
   isTextChildren,
   useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { Box, Pressable, Text } from '../Utility';
-import {
+import type {
   TileContentProps,
   TileDescriptionProps,
   TileProps,

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import {
+import type { ReactNode } from 'react';
+import type {
   StyledPressableProps,
   StyledTextProps,
   StyledViewProps,

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

@@ -1,7 +1,7 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen, fireEvent } from '@testing-library/react-native';
-import { ViewStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
 
 import { Settings } from '../../Symbols';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';

package/src/lib/Components/TileButton/TileButton.tsx

@@ -2,12 +2,12 @@ import {
   isTextChildren,
   useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
-import { IconSize } from '../Icon';
+import type { IconSize } from '../Icon';
 import { Pressable, Text } from '../Utility';
-import { TileButtonProps } from './types';
+import type { TileButtonProps } from './types';
 
 const ICON_SIZE: IconSize = 20;
 

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

@@ -1,7 +1,7 @@
-import { ComponentType, ReactNode } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { StyledPressableProps } from '../../../styles';
-import { IconSize } from '../Icon';
+import type { ComponentType, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyledPressableProps } from '../../../styles';
+import type { IconSize } from '../Icon';
 
 export type TileButtonProps = {
   /**

package/src/lib/Components/Tooltip/GlobalTooltipContext.tsx

@@ -1,5 +1,6 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import { useState, useCallback, useRef, useMemo, ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import { useState, useCallback, useRef, useMemo } from 'react';
 
 export type TooltipData = {
   id: string;

package/src/lib/Components/Tooltip/Tooltip.tsx

@@ -3,8 +3,8 @@ import { Pressable } from 'react-native';
 import { useControllableState } from '../../utils';
 import { SlotPressable } from '../Slot';
 import { useTooltipActions } from './GlobalTooltipContext';
+import type { TooltipContentData } from './TooltipContext';
 import {
-  TooltipContentData,
   TooltipContextProvider,
   useTooltipSafeContext,
 } from './TooltipContext';

package/src/lib/Components/Tooltip/TooltipContext.tsx

@@ -1,5 +1,5 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 export type TooltipContentData = {
   title?: string;

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { PressableProps } from 'react-native';
+import type { ReactNode } from 'react';
+import type { PressableProps } from 'react-native';
 
 export type TooltipProps = {
   /**

package/src/lib/Components/Utility/Box/types.ts

@@ -1,3 +1,3 @@
-import { StyledViewProps } from '../../../../styles';
+import type { StyledViewProps } from '../../../../styles';
 
 export type BoxProps = StyledViewProps;

package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.test.tsx

@@ -2,7 +2,8 @@ import { describe, it, expect } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen } from '@testing-library/react-native';
 import { createRef } from 'react';
-import { Text, View } from 'react-native';
+import type { View } from 'react-native';
+import { Text } from 'react-native';
 
 import { ThemeProvider } from '../../../ThemeProvider/ThemeProvider';
 import { LinearGradient } from './LinearGradient';

package/src/lib/Components/Utility/Gradient/LinearGradient/types.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { StyledViewProps } from '../../../../../styles';
-import { GradientStop } from '../gradient.types';
+import type { ReactNode } from 'react';
+import type { StyledViewProps } from '../../../../../styles';
+import type { GradientStop } from '../gradient.types';
 
 export type GradientCoordinates = {
   x1: string;

package/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.test.tsx

@@ -2,7 +2,8 @@ import { describe, it, expect } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen } from '@testing-library/react-native';
 import { createRef } from 'react';
-import { Text, View } from 'react-native';
+import type { View } from 'react-native';
+import { Text } from 'react-native';
 
 import { ThemeProvider } from '../../../ThemeProvider/ThemeProvider';
 import { RadialGradient } from './RadialGradient';